/* Lagoon ride map — chrome borrows the plaques on the painted map: navy field, gold keyline, cream lettering. */
:root{
  --ink:#0B1226; --plaque:#151E38; --plaque-2:#1D2848; --line:#2B3760;
  --gold:#CDAA60; --cream:#F3E8CC; --sage:#9CC2A6; --mute:#A9B2CC;
  --mk:26px;
  --display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --legend-w:348px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 40% 45%,#1A2547 0%,var(--ink) 70%);color:var(--cream);font:500 15px/1.45 var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--cream);color:var(--ink);padding:8px 12px;border-radius:8px}
.skip:focus{top:12px}

/* ---------- stage + engines ---------- */
#stage{position:fixed;inset:0}
.engine{position:absolute;inset:0;overflow:hidden}
#art-engine{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#art-engine.dragging{cursor:grabbing}
#art-world{position:absolute;left:0;top:0;transform-origin:0 0;background:#55683f center/cover no-repeat;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(205,170,96,.35)}
#art-img{display:block;width:100%;height:100%;opacity:0;transition:opacity .5s ease;pointer-events:none}
#art-img.ready{opacity:1}
.marker-layer{position:absolute;inset:0;pointer-events:none}
#g3d-engine gmp-map-3d{width:100%;height:100%;display:block}

/* ---------- markers ---------- */
.mk{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;z-index:1}
.mk i{position:absolute;left:calc(var(--mk)/-2);top:calc(var(--mk)/-2);width:var(--mk);height:var(--mk);border-radius:50%;
  background:var(--c);border:max(1.5px,calc(var(--mk)*.075)) solid var(--cream);color:#fff;display:grid;place-items:center;
  font:700 calc(var(--mk)*.44)/1 var(--ui);font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.25);transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s}
.mk.tiny i{font-size:0}
.mk em{position:absolute;left:0;bottom:calc(var(--mk)/2 + 9px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font:600 13px/1 var(--ui);font-style:normal;
  background:var(--plaque);color:var(--cream);padding:7px 10px;border-radius:8px;box-shadow:0 0 0 1px var(--gold),0 6px 18px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.mk:hover,.mk.hot,.mk.sel{z-index:5}
.mk:hover i,.mk.hot i{transform:scale(1.28)}
.mk:hover em,.mk.hot em,.mk.sel em{opacity:1;transform:translateX(-50%)}
.mk.sel{z-index:6}
.mk.sel i{transform:scale(1.45);box-shadow:0 0 0 3px var(--gold),0 0 0 9px rgba(205,170,96,.28),0 8px 20px rgba(0,0,0,.45)}
.mk.dim{z-index:0}
.mk.dim i{opacity:.28;transform:scale(.72)}
.mk.dim{pointer-events:none}
.mk.drop i{animation:drop .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i)*14ms + 250ms)}
@keyframes drop{from{transform:translateY(-26px) scale(.2);opacity:0}to{transform:none;opacity:1}}
.me{position:absolute;left:0;top:0;width:0;height:0;z-index:7;pointer-events:none}
.me::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#2F8CFF;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.me::after{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid #2F8CFF;animation:ping 2s ease-out infinite}
@keyframes ping{to{transform:scale(3.4);opacity:0}}

/* ---------- plaque surface ---------- */
.plaque,#legend,#card,#modes .seg,#blend,#tools,#legend-toggle,#toast{background:linear-gradient(180deg,var(--plaque-2),var(--plaque));box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px var(--gold),0 18px 50px rgba(0,0,0,.45)}

/* ---------- legend ---------- */
#legend{position:fixed;top:14px;right:14px;bottom:14px;width:var(--legend-w);border-radius:14px;display:flex;flex-direction:column;z-index:20;transition:transform .35s cubic-bezier(.3,.9,.3,1),opacity .25s}
#legend::after{content:"";position:absolute;inset:5px;border:1px solid rgba(205,170,96,.4);border-radius:10px;pointer-events:none}
body.legend-closed #legend{transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none}
#sheet-handle{display:none}
#legend header{padding:22px 22px 12px}
#legend h1{margin:0;font:750 34px/1 var(--display);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:.005em;color:var(--cream)}
#legend .sub{margin:6px 0 16px;color:var(--sage);font:500 15px/1 var(--display);font-variation-settings:"SOFT" 100,"opsz" 24}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:12px;width:17px;height:17px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.search input{width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:rgba(6,10,24,.55);padding:0 40px 0 38px;color:var(--cream);outline:none}
.search input::placeholder{color:var(--mute)}
.search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(205,170,96,.2)}
.search input::-webkit-search-cancel-button{filter:invert(.8)}
.search kbd{position:absolute;right:10px;font:600 12px/1 var(--ui);color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:4px 7px}
.search input:focus~kbd,.search input:not(:placeholder-shown)~kbd{display:none}
.chips{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.chips button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);color:var(--mute);font-weight:600;font-size:13px;transition:background .15s,color .15s,border-color .15s}
.chips button:hover{color:var(--cream);border-color:var(--mute)}
.chips button[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
#legend-list{flex:1;overflow:auto;padding:0 10px 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain;outline:none}
.area{margin-top:6px}
.area>button{position:sticky;top:0;z-index:1;width:100%;display:flex;align-items:baseline;gap:10px;padding:12px 12px 8px;background:#1B2645;box-shadow:0 6px 8px -6px rgba(0,0,0,.5);text-align:left}
.area>button b{font:650 19px/1.1 var(--display);font-variation-settings:"SOFT" 100,"opsz" 36;color:var(--cream)}
.area>button span{margin-left:auto;color:var(--mute);font-size:12.5px;font-weight:600}
.area>button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--cream);align-self:center}
.area.solo>button span{color:var(--gold)}
.area ul{list-style:none;margin:0;padding:0}
.row{width:100%;display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:9px;text-align:left;color:#E6DEC8}
.row b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--c);border:1.5px solid var(--cream);display:grid;place-items:center;font:700 11px/1 var(--ui);color:#fff;font-variant-numeric:tabular-nums}
.row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{color:var(--mute);font-size:12px;font-weight:500}
.row:hover,.row.hot{background:rgba(243,232,204,.08);color:#fff}
.row.sel{background:var(--cream);color:var(--ink)}
.row.sel small{color:#5b5a4e}
.empty{padding:26px 14px;color:var(--mute);text-align:center}
.empty button{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
#legend footer{padding:10px 22px 16px;color:#7f89a8;font-size:11.5px;line-height:1.4;border-top:1px solid rgba(43,55,96,.7)}

#legend-toggle{position:fixed;top:14px;right:calc(var(--legend-w) + 26px);z-index:21;height:38px;padding:0 14px;border-radius:10px;font-weight:600;font-size:13.5px;transition:right .35s cubic-bezier(.3,.9,.3,1)}
#legend-toggle .lt-closed{display:none}
body.legend-closed #legend-toggle{right:14px}
body.legend-closed #legend-toggle .lt-open{display:none}
body.legend-closed #legend-toggle .lt-closed{display:inline}

/* ---------- modes + blend ---------- */
#modes{position:fixed;left:calc((100vw - 376px)/2);top:14px;transform:translateX(-50%);z-index:20;display:flex;gap:10px;align-items:center;transition:left .35s cubic-bezier(.3,.9,.3,1);max-width:calc(100vw - 420px);flex-wrap:wrap;justify-content:center}
body.legend-closed #modes{left:50%}
#modes .seg{display:flex;padding:4px;border-radius:12px}
#modes .seg button{height:34px;padding:0 15px;border-radius:9px;font-weight:600;font-size:14px;color:var(--mute);transition:background .15s,color .15s}
#modes .seg button:hover{color:var(--cream)}
#modes .seg button[aria-pressed=true]{background:var(--cream);color:var(--ink)}
#modes .seg.solo{display:none}
#blend{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--mute)}
#blend input{width:150px;accent-color:var(--gold)}

/* ---------- tools ---------- */
#tools{position:fixed;left:14px;bottom:calc(14px + var(--safe-b));z-index:20;display:flex;flex-direction:column;border-radius:12px;padding:4px}
#tools button{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;color:var(--cream)}
#tools button:hover{background:rgba(243,232,204,.1)}
#tools button[aria-pressed=true]{background:var(--cream);color:var(--ink)}
#tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#tools .play,#tools .stop{fill:currentColor;stroke:none}
#tools .stop{display:none}
#tools [data-act=tour][aria-pressed=true] .play{display:none}
#tools [data-act=tour][aria-pressed=true] .stop{display:block}

/* ---------- ride card ---------- */
#card{position:fixed;left:68px;bottom:calc(14px + var(--safe-b));width:min(400px,calc(100vw - 96px));z-index:22;border-radius:14px;padding:20px 22px 18px;animation:rise .28s cubic-bezier(.3,.9,.3,1)}
#card::after{content:"";position:absolute;inset:5px;border:1px solid rgba(205,170,96,.4);border-radius:10px;pointer-events:none}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.card-top{display:flex;gap:14px;align-items:flex-start;padding-right:30px}
.card-top .num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--c);border:2.5px solid var(--cream);display:grid;place-items:center;font:700 19px/1 var(--ui);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.card-top h2{margin:0;font:700 27px/1.08 var(--display);font-variation-settings:"SOFT" 100,"opsz" 72;color:var(--cream);text-wrap:balance}
.card-top p{margin:5px 0 0;color:var(--sage);font-size:13.5px;font-weight:600}
.card-x{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:8px;color:var(--mute);display:grid;place-items:center;z-index:1}
.card-x:hover{color:var(--cream);background:rgba(243,232,204,.1)}
.card-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none}
.meter{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--mute);font-size:13px;font-weight:600}
.meter .pips{display:flex;gap:4px}
.meter .pips u{width:22px;height:7px;border-radius:4px;background:var(--line);text-decoration:none}
.meter .pips u.on{background:var(--gold)}
.blurb{margin:12px 0 0;color:#E6DEC8;font-size:15px;line-height:1.5;max-width:44ch}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.facts li{font-size:12.5px;font-weight:600;color:var(--cream);border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:rgba(6,10,24,.4)}
.actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.actions a,.actions button{height:40px;padding:0 14px;border-radius:10px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream);border:1px solid var(--line)}
.actions a:hover,.actions button:hover{border-color:var(--gold)}
.actions .primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.actions .primary:hover{background:#fff}
.actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pager{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(43,55,96,.8);font-size:13px;font-weight:600}
.pager button{color:var(--mute);max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager button:hover{color:var(--cream)}

#toast{position:fixed;left:50%;top:calc(70px + var(--safe-t));transform:translateX(-50%);z-index:40;padding:11px 16px;border-radius:10px;font-weight:600;font-size:14px;max-width:min(92vw,460px);text-align:center;animation:rise .25s}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--legend-w:100vw}
  #legend{top:auto;left:0;right:0;bottom:0;width:auto;height:min(76dvh,640px);border-radius:18px 18px 0 0;transform:translateY(calc(100% - 132px - var(--safe-b)));transition:transform .4s cubic-bezier(.3,.9,.3,1)}
  #legend::after{border-radius:14px 14px 0 0;border-bottom:0;inset:5px 5px 0}
  body.sheet-open #legend{transform:none}
  body.legend-closed #legend{transform:translateY(calc(100% - 132px - var(--safe-b)));opacity:1;pointer-events:auto}
  body.has-card #legend{transform:translateY(110%)}
  #sheet-handle{display:block;width:100%;height:22px;flex:none}
  #sheet-handle i{display:block;width:42px;height:4px;border-radius:2px;background:var(--line);margin:9px auto 0}
  #legend header{padding:2px 16px 10px}
  #legend h1{font-size:24px;display:inline}
  #legend .sub{display:inline;margin-left:8px;font-size:13px}
  .search{margin-top:10px}
  .search kbd{display:none}
  #legend-list{padding-bottom:calc(16px + var(--safe-b))}
  body:not(.sheet-open) .chips{display:none}
  #legend-toggle{display:none}
  #modes,body.legend-closed #modes{left:10px;top:calc(10px + var(--safe-t));right:62px;transform:none;flex-wrap:wrap}
  #blend input{width:110px}
  #tools{left:auto;right:10px;top:calc(62px + var(--safe-t));bottom:auto}
  #tools [data-act=zin],#tools [data-act=zout],#tools [data-act=full]{display:none}
  #card{left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;padding:20px 18px calc(16px + var(--safe-b))}
  #card::after{border-radius:14px 14px 0 0;border-bottom:0;inset:5px 5px 0}
  .card-top h2{font-size:24px}
  .mk em{display:none}
  .mk.sel em{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- v2: the 3D toy park ---------- */
#world{position:absolute;inset:0}
#world canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#markers,#pois{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
#pois{z-index:4}
.mk.off,.poi.off{display:none}
.mk i{transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s,opacity .2s}
.poi{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto}
.poi i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:7px;background:var(--c);border:1.5px solid var(--cream);display:grid;place-items:center;color:#fff;font:700 11px/1 var(--ui);font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.poi em{position:absolute;left:0;bottom:16px;transform:translateX(-50%);white-space:nowrap;font:600 12px/1 var(--ui);font-style:normal;background:var(--plaque);color:var(--cream);padding:6px 9px;border-radius:7px;box-shadow:0 0 0 1px var(--gold);opacity:0;pointer-events:none;transition:opacity .12s}
.poi:hover{z-index:3}.poi:hover em{opacity:1}
#modes .seg button{white-space:nowrap}
#layers{position:fixed;left:calc((100vw - 376px)/2);bottom:calc(14px + var(--safe-b));transform:translateX(-50%);z-index:20;display:flex;gap:6px;padding:5px;border-radius:12px;background:linear-gradient(180deg,var(--plaque-2),var(--plaque));box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px var(--gold),0 18px 50px rgba(0,0,0,.45);transition:left .35s cubic-bezier(.3,.9,.3,1)}
body.legend-closed #layers{left:50%}
body.has-card #layers{left:calc((100vw - 376px)/2 + 190px)}
#layers button{height:32px;padding:0 12px 0 9px;border-radius:8px;font-weight:600;font-size:13px;color:var(--mute);display:flex;align-items:center;gap:7px;white-space:nowrap}
#layers button::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c);opacity:.55}
#layers button:hover{color:var(--cream)}
#layers button[aria-pressed=true]{background:rgba(243,232,204,.12);color:var(--cream)}
#layers button[aria-pressed=true]::before{opacity:1;box-shadow:0 0 0 1.5px var(--cream)}
#wx{position:fixed;left:14px;top:14px;z-index:20;height:42px;padding:0 14px;border-radius:12px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;color:var(--cream);background:linear-gradient(180deg,var(--plaque-2),var(--plaque));box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px var(--gold),0 18px 50px rgba(0,0,0,.45)}
#wx b{font:700 19px/1 var(--display);font-variation-settings:"SOFT" 100,"opsz" 36}
#wx span{color:var(--sage);font-weight:500}
#credit{position:fixed;left:68px;bottom:calc(6px + var(--safe-b));z-index:6;font-size:10.5px;color:rgba(20,26,50,.75);background:rgba(243,232,204,.7);padding:2px 7px;border-radius:5px;pointer-events:none}
body.has-card #credit{display:none}
[data-time=night]~#credit{color:#c9d2ee;background:rgba(10,16,38,.6)}
#hud{position:fixed;left:50%;bottom:calc(26px + var(--safe-b));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:18px;padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,var(--plaque-2),var(--plaque));box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px var(--gold),0 18px 50px rgba(0,0,0,.5)}
#hud div{text-align:center;min-width:74px}#hud b{display:block;font:700 26px/1 var(--display);font-variant-numeric:tabular-nums}#hud small{color:var(--sage);font-weight:600;font-size:11.5px}
#hud button{height:40px;padding:0 16px;border-radius:10px;background:var(--cream);color:var(--ink);font-weight:700}
body.pov #legend,body.pov #legend-toggle,body.pov #modes,body.pov #layers,body.pov #tools,body.pov #card,body.pov #wx,body.pov #markers,body.pov #pois,body.pov #credit{display:none!important}
#g3d-engine{z-index:3;background:#0B1226}
@media (max-width:760px){
  #modes,body.legend-closed #modes{max-width:none;right:62px;justify-content:flex-start}
  #modes .seg{overflow-x:auto;max-width:100%}
  #modes .seg button{padding:0 11px;font-size:13px}
  #wx{top:auto;left:10px;bottom:calc(142px + var(--safe-b));height:36px;font-size:12.5px}
  #wx span{display:none}
  body.has-card #wx,body.sheet-open #wx,body.has-card #layers,body.sheet-open #layers{display:none}
  #layers,body.legend-closed #layers,body.has-card #layers{left:10px;right:10px;transform:none;bottom:calc(186px + var(--safe-b));overflow-x:auto;justify-content:flex-start}
  #credit{left:10px;bottom:calc(134px + var(--safe-b));font-size:9.5px}
}