/* B.H.A.I. pre-launch site. Phones first: every scene is a full portrait screen (100svh). */
:root{--taxi:#f7c600;--red:#d61c28;--ink:#07060f;--fg:#efeae0;--muted:#a7a3b5}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color:var(--fg);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.55 Hind,system-ui,sans-serif;overflow-x:hidden}
main{overflow-x:clip}
section{position:relative;min-height:100svh;overflow:hidden}
a{color:var(--taxi)}
:focus-visible{outline:3px solid var(--taxi);outline-offset:3px}
img{max-width:none}


.hint{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));text-align:center;font-size:12px;letter-spacing:.2em;
  color:#fffc;text-transform:uppercase;z-index:30;pointer-events:none;text-shadow:0 1px 6px #000,0 0 2px #000}

/* ---- arrival: a full-screen movie-trailer loop of real gameplay (owner, 2026-11-02) ----
   The film always fills the window edge to edge: 16:9 when the window is wider than tall, 9:16 when it's taller (hero.js).
   Wide windows: the title sits low on the left like a film poster, out of the picture's way. */
#arrival{background:#05040b}
#arrival .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#05040b}
#arrival .shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(#07060fbf 0%,#07060f40 20%,transparent 36%,transparent 62%,#07060fa6 80%,#07060f 100%)}
/* the trailer's lines, over the film on their cues */
#arrival .card{position:absolute;left:0;right:0;top:32%;transform:translateY(-50%);z-index:3;padding:0 8vw;text-align:center;pointer-events:none;
  font:italic 400 clamp(22px,3vw,44px)/1.3 Hind,sans-serif;color:#fff;text-shadow:0 2px 4px #000,0 0 24px #000c;opacity:0;transition:opacity .35s}
#arrival .card.on{opacity:1}
#arrival .card.big{font:400 clamp(44px,8vw,132px)/1.05 Bungee,sans-serif;color:var(--taxi);-webkit-text-stroke:2px #0c0804;text-shadow:4px 5px 0 #000}
#arrival .card.end{top:48%}   /* the last line, alone on black */
#arrival .title{position:absolute;left:0;right:0;top:calc(9svh + env(safe-area-inset-top));opacity:0;transform:scale(1.6);
  transition:transform .6s .2s cubic-bezier(.3,1.6,.5,1),opacity .5s .2s;z-index:3}
/* the static line: only when there's no film (Data Saver, reduced motion) */
#arrival .tagline{display:none;position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));margin:0;text-align:center;z-index:3;
  font-style:italic;color:#ffe9b8;font-size:clamp(16px,2vw,22px);text-shadow:0 2px 8px #000}
#arrival.still .tagline{display:block}
#arrival.open .title{opacity:1;transform:scale(1)}
/* the waitlist, right on the first screen */
#arrival .join{position:absolute;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;
  white-space:nowrap;padding:14px 26px;border-radius:12px;background:var(--taxi);color:#1a1405;text-decoration:none;
  font:400 clamp(15px,1.6vw,19px)/1 Bungee,sans-serif;box-shadow:0 6px 24px #000a,0 0 0 3px #0c0804;opacity:0;visibility:hidden;
  transition:opacity .8s .9s,visibility 0s .9s}
#arrival.open .join{opacity:1;visibility:visible}
#arrival .pitch{position:absolute;left:0;right:0;bottom:calc(158px + env(safe-area-inset-bottom));z-index:3;margin:0 auto;padding:0 22px;max-width:520px;text-align:center;
  color:#f2eee2;font:500 15px/1.35 Hind,sans-serif;text-shadow:0 1px 6px #000,0 0 18px #000;opacity:0;transition:opacity .8s .9s}
#arrival .pitch b{color:var(--taxi);font:400 clamp(14px,3.9vw,18px)/1.5 Bungee,sans-serif}
#arrival.open .pitch{opacity:1}
#arrival .hint{z-index:3}
@media (min-aspect-ratio:1/1){
  #arrival .card{top:20%}
  #arrival .card.end{top:42%}
  #arrival .shade{background:linear-gradient(#07060f8c 0%,transparent 16%,transparent 58%,#07060fd9 100%),linear-gradient(90deg,#07060fa6 0%,transparent 42%)}
  #arrival .title{left:clamp(20px,4vw,64px);right:auto;top:auto;bottom:calc(clamp(74px,12vh,116px) + env(safe-area-inset-bottom));text-align:left;
    font-size:clamp(36px,min(7vw,11vh),96px);transform-origin:left bottom}
  #arrival .join{left:clamp(20px,4vw,64px);bottom:calc(clamp(14px,4vh,44px) + env(safe-area-inset-bottom));transform:none;padding:12px 22px}
  #arrival .tagline{left:auto;right:clamp(20px,4vw,64px);bottom:calc(clamp(14px,4vh,44px) + env(safe-area-inset-bottom));text-align:right}
  #arrival .hint{left:auto;right:clamp(20px,4vw,64px);bottom:calc(10px + env(safe-area-inset-bottom))}
  #arrival.still .hint{display:none}
}
/* 18+, beside the menu button */
#arrival .age{position:absolute;left:calc(66px + env(safe-area-inset-left));top:calc(19px + env(safe-area-inset-top));z-index:13;
  font:400 14px/1 Bungee,sans-serif;color:#fff;border:2px solid #fff;border-radius:6px;padding:6px 7px 5px;background:#000a}
#mute{position:fixed;right:calc(12px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:100;width:44px;height:44px;
  border-radius:50%;border:2px solid #fff3;background:#000a;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:none;padding:0}
#mute.on{display:block}

@media (prefers-reduced-motion:reduce){
  #arrival *{transition:none!important;animation:none!important}
}

/* ---- searchlight: the cast in the dark ---- */
#searchlight{height:100svh;min-height:520px;background:linear-gradient(#06081a 0%,#1d1035 45%,#5a2a1a 78%,#120a10 100%);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#searchlight .stage{position:absolute;inset:0;overflow:hidden}
#searchlight .glow{position:absolute;left:50%;top:58%;width:130%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(#ff8c2a55,transparent 65%)}
#searchlight img.c{position:absolute;width:auto;transform:translateX(-50%);filter:drop-shadow(0 0 2px #ff9a4088);pointer-events:none}
#searchlight img.back{filter:brightness(.55) saturate(.8) blur(.6px)}
#searchlight img.mid{filter:brightness(.78)}
#searchlight::after{content:'';position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(transparent,var(--ink));z-index:15;pointer-events:none}
#searchlight .rain{position:absolute;inset:-12%;z-index:16;opacity:.3;pointer-events:none;
  background:repeating-linear-gradient(100deg,transparent 0 16px,#9cc8ff55 16px 17px);animation:rain .5s linear infinite}
@keyframes rain{to{transform:translate(-20px,90px)}}
#searchlight .dark{position:absolute;left:0;top:0;z-index:17;pointer-events:none;will-change:transform;
  background:radial-gradient(circle var(--r,105px) at 50% 50%,transparent 0,transparent 50%,#05040cf0 100%)}
#searchlight .title{position:absolute;left:0;right:0;top:calc(7svh + env(safe-area-inset-top));z-index:20;pointer-events:none;
  font-size:clamp(44px,9vw,120px);animation:flick 4s infinite}
@keyframes flick{0%,18%,22%,60%,64%,100%{opacity:1}20%,62%{opacity:.25}}
#searchlight .name{position:absolute;z-index:19;font:400 12px/1.3 Bungee,sans-serif;color:#fff;background:var(--red);padding:2px 8px;
  transform:translateX(-50%);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:2px 3px 0 #000}
#searchlight .name.on{opacity:1}
#searchlight .hint{z-index:21}
@media (orientation:landscape){#searchlight .title{top:3svh;font-size:clamp(36px,6vw,92px)}#searchlight .name{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  #searchlight .dark,#searchlight .rain{display:none}
  #searchlight .title{animation:none}
}

/* ---- cast cards ---- */
#cast{background:var(--ink)}
#cast .head{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:baseline;
  padding:calc(72px + env(safe-area-inset-top)) 18px 0;pointer-events:none}   /* below the fixed menu, Join and sound buttons */
#cast .head h2{margin:0;font:400 18px Bungee,sans-serif;color:var(--taxi);letter-spacing:.06em}
#cast .head .count{font:400 14px Bungee,sans-serif;letter-spacing:.1em;color:#fffc}
#cast .head .count b{font-weight:400;color:var(--taxi)}
/* arrow buttons on both sides of the character: 52px thumb targets, the back one hidden on the first card */
#cast .nav{position:absolute;top:calc(50% - 70px);z-index:6;width:52px;height:52px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--taxi);background:#07060fb3;
  border:2px solid #f7c60088;box-shadow:0 4px 16px #000a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-tap-highlight-color:transparent}
#cast .nav:active{transform:scale(.92)}
#cast .nav[hidden]{display:none}
#cast .prev{left:calc(10px + env(safe-area-inset-left))}
#cast .next{right:calc(10px + env(safe-area-inset-right));animation:nudge 1.6s ease-in-out 3}
@keyframes nudge{50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){#cast .next{animation:none}}
#cast .track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
#cast .track::-webkit-scrollbar{display:none}
#cast .card{position:relative;flex:0 0 100%;height:100svh;min-height:560px;scroll-snap-align:start;overflow:hidden;
  background:linear-gradient(160deg,var(--c1),var(--c2) 55%,#0b0a14)}
.g-hero{--c1:#2a2006;--c2:#4a3a08;--acc:#f7c600}.g-boss{--c1:#1f1606;--c2:#3d2a0b;--acc:#e8b04a}
.g-gang{--c1:#1c0d0d;--c2:#3b0f12;--acc:#ff5a5a}.g-crew{--c1:#06201f;--c2:#0b3b38;--acc:#3ce1cd}
.g-law{--c1:#081428;--c2:#0f2550;--acc:#5aa0ff}.g-town{--c1:#1d0b24;--c2:#3a1240;--acc:#ff7ad6}
#cast .bigname{position:absolute;top:calc(100px + env(safe-area-inset-top));left:-8px;font:400 clamp(58px,17vw,96px)/.9 Bungee,sans-serif;
  color:#ffffff12;white-space:nowrap;pointer-events:none}
#cast .card img{position:absolute;left:50%;bottom:clamp(170px,26svh,230px);transform:translateX(-50%);height:min(60svh,560px);width:auto;
  filter:drop-shadow(0 10px 30px #000a)}
#cast .info{position:absolute;left:0;right:0;bottom:0;padding:26px 20px calc(44px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#0b0a14 32%)}
#cast .role{font:400 12px Bungee,sans-serif;color:var(--acc);letter-spacing:.08em}
#cast h3{margin:2px 0 0;font:400 clamp(26px,7vw,34px)/1.05 Bungee,sans-serif;color:#fff}
#cast .meta{font:12px/1.4 'Courier New',monospace;color:#aaa;margin:6px 0 10px;letter-spacing:.04em}
#cast q{display:block;font-size:17px;line-height:1.4;color:#ffe9b8;font-style:italic;quotes:'“' '”'}
#cast .dots{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:6px;z-index:5;pointer-events:none}
#cast .dots i{width:6px;height:6px;border-radius:3px;background:#555;transition:width .2s,background .2s}
#cast .dots i.on{background:var(--taxi);width:18px}
@media (min-width:900px){
  #cast{padding:90px clamp(20px,4vw,64px) 80px}
  #cast .head{position:static;padding:0 0 26px}
  #cast .head h2{font-size:34px}
  #cast .head .count,#cast .dots,#cast .nav{display:none}
  #cast .track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow:visible;max-width:1400px;margin:0 auto}
  #cast .card{height:600px;min-height:0;border-radius:14px;flex:none}
  #cast .card img{height:380px;bottom:190px}
  #cast .bigname{font-size:64px;top:20px}
  #cast .info{padding:20px 18px 22px}
  #cast q{font-size:15px}
}

/* ---- the story: a sticky stage per part, beats scroll over it ---- */
#story{overflow:visible;min-height:0;background:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#story .part{position:relative}
#story .stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
#story .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
#story .shade{position:absolute;inset:0;background:linear-gradient(#07060fcc,transparent 30%,transparent 55%,#07060fee)}
#story .people{position:absolute;left:0;right:0;bottom:0;height:62%;display:flex;justify-content:center;align-items:flex-end}
#story .who{height:100%;width:auto;margin:0 -7%;opacity:0;transform:translateY(40px) scale(.94);transition:opacity .7s,transform .7s;
  filter:drop-shadow(0 8px 24px #000c)}
#story .who.in{opacity:1;transform:none}
#story .who[data-bust]{height:44%}
@media (max-width:899px){#story .people{height:50%}#story .who{display:none;min-width:0;height:auto;max-height:100%;max-width:36%;margin:0 -3%;
  object-fit:contain}#story .who[data-bust]{height:auto;max-height:44%}#story .who.in{display:block}}   /* phones show 3 at most */
#story .steps{position:relative;z-index:2;margin-top:-100svh;padding-bottom:30svh}
#story .step{min-height:78svh;display:flex;align-items:flex-start;justify-content:center;padding:14svh 16px 0}
#story .step:first-child{min-height:100svh}
#story .card{max-width:480px;width:100%;background:#07060fd9;border:1px solid #ffffff1a;border-radius:14px;padding:18px 18px 16px;
  box-shadow:0 10px 40px #000a;opacity:.25;transform:translateY(16px);transition:opacity .5s,transform .5s}
#story .step.on .card{opacity:1;transform:none}
#story .card p{margin:0;font-size:17px;color:#ece6da}
#story .card q{display:block;margin-top:10px;font-size:18px;line-height:1.4;font-style:italic;color:#ffe9b8;quotes:'“' '”'}
#story .place{display:inline-block;margin-top:10px;font:400 11px Bungee,sans-serif;letter-spacing:.08em;color:#07060f;background:var(--taxi);
  padding:3px 8px;border-radius:4px}
#story .who-says{display:block;margin-top:8px;font:400 11px Bungee,sans-serif;letter-spacing:.12em;color:var(--taxi)}
#story .card.title{text-align:center;background:transparent;border:0;box-shadow:none}
#story .num{font:400 13px Bungee,sans-serif;letter-spacing:.3em;color:#ff8c1a}
#story h3{margin:6px 0 0;font:400 clamp(40px,12vw,84px)/1 Bungee,sans-serif;color:var(--taxi);-webkit-text-stroke:2px #0c0804;
  text-shadow:0 0 22px #ff9a0080,4px 5px 0 #000}
#story .choice{max-width:440px;width:100%;margin:0 auto;background:#120c06f2;border:2px solid var(--taxi);border-radius:16px;padding:22px 18px;
  text-align:center;box-shadow:0 0 40px #f7c60033}
#story .choice .head{font:400 26px Bungee,sans-serif;color:var(--taxi)}
#story .choice .sub{margin:6px 0 16px;color:#ece6da;font-size:17px}
#story .choice button{display:block;width:100%;margin-top:10px;padding:14px;border-radius:10px;font:400 16px Bungee,sans-serif;cursor:default;
  border:2px solid #fff3;background:#1b1712;color:#fff}
#story .choice button.a{border-color:#d61c28aa}#story .choice button.b{border-color:#5aa0ffaa}
#story .end{flex-direction:column;align-items:center;justify-content:flex-start}   /* top, like every card: never on the faces */
#story .note{margin:12px 0 0;text-align:center;font:400 12px Bungee,sans-serif;letter-spacing:.14em;color:#ff8c1a}
#story .files{padding:70px 18px 90px;max-width:980px;margin:0 auto;display:grid;gap:14px;grid-template-columns:1fr}
#story .files-head{grid-column:1/-1;margin:0 0 6px;text-align:center;font:400 14px Bungee,sans-serif;letter-spacing:.14em;color:#a7a3b5}
#story .locked{position:relative;background:#d8c9a3;color:#2a2218;border-radius:6px;padding:16px 16px 18px;overflow:hidden;
  box-shadow:inset 0 0 40px #8a744877,0 6px 20px #000a;transform:rotate(-.6deg)}
#story .locked:nth-child(odd){transform:rotate(.5deg)}
#story .locked .num{color:#7a2a1a}
#story .locked h3{font-size:26px;color:#2a2218;-webkit-text-stroke:0;text-shadow:none}
#story .locked .bar{display:block;height:12px;margin-top:9px;background:#141210;width:88%}
#story .locked .bar.s{width:60%}
#story .locked .stamp{position:absolute;right:12px;bottom:12px;transform:rotate(-12deg);border:3px solid #b3261e;color:#b3261e;
  font:400 14px Bungee,sans-serif;padding:4px 8px;letter-spacing:.1em;opacity:.85}
#story .locked .unlock{display:block;margin-top:12px;font-size:13px;font-weight:600;color:#5a4a33}
@media (min-width:900px){
  #story .files{grid-template-columns:repeat(3,1fr)}
  /* everyone fits across the screen (--n = the part's head count) and stays below the cards, so no face is cut or covered */
  #story .people{height:min(54%,calc(100svh - 440px))}   /* 440px: room for the tallest card, Part 4's choice */
  #story .step{padding-top:8svh}
  #story .who{flex:0 1 auto;min-width:0;height:auto;max-height:100%;max-width:calc(112% / var(--n,4));margin:0 -1.5%;object-fit:contain}
  #story .who[data-bust]{height:auto;max-height:44%}
  #story .step{justify-content:flex-start;padding-left:8vw}
  #story .step:first-child{justify-content:center;padding-left:16px}
  #story .end{justify-content:flex-start;padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  #story .stage{position:relative;height:60svh}
  #story .steps{margin-top:0}
  #story .step{min-height:0;padding:16px}
  #story .step:first-child{min-height:0}
  #story .who,#story .card{opacity:1;transform:none;transition:none}
}

/* ---- gameplay reel ---- */
#reel{display:flex;align-items:center;justify-content:center;gap:48px;padding:0;background:#05040b}
#reel .frame{position:relative;height:100svh;aspect-ratio:9/16;max-width:100%;background:#000}
#reel video{width:100%;height:100%;object-fit:cover;display:block}
#reel .cap{position:absolute;left:16px;right:16px;bottom:calc(70px + env(safe-area-inset-bottom));opacity:0;transform:translateY(10px);
  transition:opacity .35s,transform .35s;pointer-events:none}
#reel .cap.on{opacity:1;transform:none}
#reel .cap b{display:block;font:400 clamp(26px,8vw,40px)/1 Bungee,sans-serif;color:var(--taxi);text-shadow:3px 4px 0 #000}
#reel .cap span{display:inline-block;margin-top:8px;font:400 12px 'Courier New',monospace;letter-spacing:.18em;color:#fff;
  background:#000a;padding:3px 8px}
#reel .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 24px;border-radius:40px;border:2px solid var(--taxi);
  background:#000b;color:var(--taxi);font:400 16px Bungee,sans-serif;cursor:pointer}
#reel .side{display:none;max-width:340px}
#reel .side h2{font:400 36px/1 Bungee,sans-serif;color:var(--taxi);margin:0 0 12px}
#reel .side p{color:var(--muted)}
@media (min-width:900px){#reel .side{display:block}#reel .frame{height:88svh;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px #000c}}

/* ---- hidden in the city ---- */
#secrets,#sidelife{padding:70px 0 60px;background:var(--ink)}
#secrets .head,#sidelife .head{max-width:900px;margin:0 auto;padding:0 18px 22px;text-align:center}
#secrets .head.small{padding-top:50px}
.kicker{font:400 12px Bungee,sans-serif;letter-spacing:.3em;color:#ff8c1a}
#secrets h2,#sidelife h2{margin:8px 0 8px;font:400 clamp(26px,7vw,44px)/1.05 Bungee,sans-serif;color:var(--taxi);text-shadow:3px 4px 0 #000}
#secrets .head p,#sidelife .head p{margin:0;color:var(--muted)}
#secrets .rides{display:grid;gap:14px;padding:0 16px;max-width:1200px;margin:0 auto;grid-template-columns:1fr}
#secrets .excl{position:relative;background:radial-gradient(ellipse 70% 55% at 50% 32%,#8a6a3a,#3a2a4a 45%,#0d0b16 80%);border:1px solid #ffffff14;border-radius:14px;
  padding:16px;overflow:hidden}
#secrets .excl img{display:block;width:100%;height:150px;object-fit:contain;filter:drop-shadow(0 10px 18px #000)}
#secrets .excl .tag{position:absolute;right:12px;top:12px;font:400 11px Bungee,sans-serif;color:#07060f;background:var(--taxi);padding:2px 7px;border-radius:4px}
#secrets .excl h3{margin:10px 0 6px;font:400 22px Bungee,sans-serif;color:#fff}
#secrets .speed{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}
#secrets .speed i{display:block;height:100%;background:linear-gradient(90deg,#ff8c1a,var(--taxi))}
#secrets .fast{margin-top:6px;font:400 11px Bungee,sans-serif;letter-spacing:.08em;color:var(--taxi)}
#secrets .riddle{margin:10px 0 0;font-style:italic;color:#ffe9b8}
#secrets .spots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px;max-width:1200px;margin:0 auto}
#secrets .spot{background:#14111f;border:1px solid #2c2945;border-radius:10px;padding:12px;font-size:14px}
#secrets .spot b{display:block;font:400 14px Bungee,sans-serif;color:#fff;margin:4px 0 2px}
#secrets .spot span{color:var(--muted)}
#secrets .spot.venue{border-color:#5a2a5a}
@media (min-width:700px){#secrets .rides{grid-template-columns:repeat(2,1fr)}#secrets .spots{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){#secrets .rides{grid-template-columns:repeat(3,1fr)}#secrets .spots{grid-template-columns:repeat(4,1fr)}}

/* ---- side life ---- */
#sidelife .strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 14px;scrollbar-width:none;
  overscroll-behavior-x:contain}
#sidelife .strip::-webkit-scrollbar{display:none}
#sidelife .life{flex:0 0 78%;max-width:320px;scroll-snap-align:center;border-radius:14px;padding:18px;min-height:200px;
  background:linear-gradient(160deg,hsl(var(--h) 45% 18%),#0d0b16 75%);border:1px solid #ffffff14}
#sidelife .life .tag{font:400 11px Bungee,sans-serif;letter-spacing:.1em;color:#07060f;background:var(--taxi);padding:2px 7px;border-radius:4px}
#sidelife .life h3{margin:12px 0 6px;font:400 21px/1.1 Bungee,sans-serif;color:#fff}
#sidelife .life p{margin:0;color:#ddd6c9;font-size:16px}
#sidelife .hint-x{text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff8}
@media (min-width:900px){#sidelife .life{flex-basis:300px}#sidelife .strip{justify-content:flex-start;padding-left:max(16px,calc(50vw - 600px))}}

/* ---- the whole city: live map finale ---- */
#city{height:420svh;overflow:visible;background:#05040b}
#city.still{height:100svh}
#city .stage{position:sticky;top:0;height:100svh;overflow:hidden}
#city canvas{display:block}
#city .cap{position:absolute;left:18px;right:18px;top:calc(70px + env(safe-area-inset-top));pointer-events:none}
#city .cap b{display:block;font:400 clamp(22px,6vw,40px)/1.05 Bungee,sans-serif;color:var(--taxi);text-shadow:3px 4px 0 #000}
#city .cap span{display:block;margin-top:6px;color:#e8e2d6;text-shadow:0 1px 6px #000;font-size:15px}
#city .osm{position:absolute;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));font-size:11px;color:#fff9}

/* ---- Borivali: Season 2 tease ---- */
#borivali{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 22px;background:#05040b}
#borivali .bg{position:absolute;inset:0;background:url('/img/s08.webp') center/cover;filter:brightness(.22) saturate(.6)}
#borivali .say{position:relative;max-width:min(92vw,640px);margin-bottom:12svh;opacity:0;transform:translateY(16px);transition:opacity 1s,transform 1s}
#borivali .who{font:400 12px Bungee,sans-serif;color:var(--taxi);letter-spacing:.12em}
#borivali .say p{margin:8px 0 0;font-size:clamp(20px,5.4vw,30px);line-height:1.35;font-style:italic;color:#ffe9b8;text-shadow:0 2px 10px #000}
#borivali .train{position:absolute;left:0;bottom:7%;height:58px;width:260%;display:flex;gap:6px;transform:translateX(0)}
#borivali .train i{flex:1;background:linear-gradient(#7d1f1f 0 22%,#c9c2b4 22% 70%,#7d1f1f 70%);border-radius:6px 6px 2px 2px;position:relative}
#borivali .train i::before{content:'';position:absolute;left:8%;right:8%;top:30%;height:26%;
  background:repeating-linear-gradient(90deg,#1b2a3a 0 18px,transparent 18px 28px)}
#borivali .next{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .8s 2.2s}
#borivali .to{font:400 12px Bungee,sans-serif;letter-spacing:.3em;color:#ff8c1a}
#borivali .next b{font:400 clamp(52px,15vw,150px)/1 Bungee,sans-serif;color:var(--taxi);-webkit-text-stroke:2px #0c0804;
  text-shadow:0 0 26px #ff9a0088,4px 5px 0 #000;font-weight:400}
#borivali .s2{display:inline-block;margin-top:10px;background:var(--red);color:#fff;font:400 13px Bungee,sans-serif;padding:4px 14px;transform:skewX(-12deg)}
#borivali.go .say{opacity:1;transform:none}
#borivali.go .train{transform:translateX(-100%);transition:transform 4.5s 1s cubic-bezier(.55,0,.6,1)}
#borivali.go .next{opacity:1}
@media (prefers-reduced-motion:reduce){
  #borivali .say,#borivali .next{transition:none}
  #borivali .train{display:none}
}

/* ---- waitlist ---- */
#waitlist{background:radial-gradient(circle at 50% 0,#3a1a08,var(--ink) 62%);display:flex;align-items:center;justify-content:center;
  padding:calc(48px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}
#waitlist .wrap{width:100%;max-width:440px}
#waitlist h2{font:400 clamp(28px,7.4vw,44px)/1.05 Bungee,sans-serif;color:var(--taxi);margin:0 0 10px;text-shadow:3px 4px 0 #000}
#waitlist .lead{color:#c9c4d6;margin:0 0 14px;font-size:16px}
#waitlist label{display:block;font:400 12px/1.2 Bungee,sans-serif;color:#aaa6ba;letter-spacing:.08em;margin:14px 0 6px;text-transform:uppercase}
#waitlist label em{font:400 11px Hind,sans-serif;letter-spacing:0;text-transform:none;color:#888}
#waitlist input:not([type=checkbox]):not([type=radio]){width:100%;background:#15131f;border:1px solid #2c2945;border-radius:10px;padding:12px;font:16px Hind,sans-serif;
  color:#eee;min-height:48px}
#waitlist input:focus{border-color:var(--taxi);outline:none}
#waitlist .phone{display:flex;align-items:stretch;background:#15131f;border:1px solid #2c2945;border-radius:10px}
#waitlist .phone:focus-within{border-color:var(--taxi)}
#waitlist .phone span{padding:12px 4px 12px 12px;color:#888;font-size:16px;align-self:center}
#waitlist .phone input{border:0!important;background:transparent!important}
#waitlist .chk{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.35 Hind,sans-serif;color:#ddd;letter-spacing:0;text-transform:none;
  margin:16px 0 0;cursor:pointer}
#waitlist .chk input{width:22px;height:22px;flex:none;accent-color:var(--taxi);margin:0}
#waitlist .err{display:block;color:#ff6b6b;font-size:14px;min-height:0}
#waitlist .err:empty{display:none}
#waitlist .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#waitlist .btn{display:block;width:100%;margin-top:22px;background:var(--taxi);color:#1a1405;font:400 19px Bungee,sans-serif;padding:15px;
  border:0;border-radius:10px;box-shadow:0 5px 0 #6b5400;cursor:pointer;min-height:54px}
#waitlist .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6b5400}
#waitlist .btn:disabled{opacity:.6;cursor:default}
#waitlist .areas{border:0;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#waitlist .areas legend{padding:0;margin:0 0 6px;font:400 12px/1.2 Bungee,sans-serif;color:#aaa6ba;letter-spacing:.08em}
#waitlist .areas legend em{font:400 11px Hind,sans-serif;letter-spacing:0;color:#888}
#waitlist .areas input{position:absolute;opacity:0;width:1px;height:1px}
#waitlist .areas label{flex:1 1 40%;margin:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 8px;background:#15131f;border:1px solid #2c2945;border-radius:10px;
  font:500 15px/1.2 Hind,sans-serif;color:#ddd;letter-spacing:0;text-align:center;cursor:pointer}
#waitlist .areas input:checked+label{background:var(--taxi);border-color:var(--taxi);color:#1a1405;font-weight:600}
#waitlist .areas input:focus-visible+label{outline:2px solid var(--taxi);outline-offset:2px}
#waitlist .note{margin:16px 0 -10px;text-align:center;color:#f2eee2;font-weight:600;font-size:15px}
#waitlist .thanks .share{margin:18px 0;background:#25d366;color:#04200f;text-decoration:none;text-align:center;box-sizing:border-box}
#waitlist .status{color:#ffb347;margin:14px 0 0;font-weight:600}
#waitlist .small{font-size:13px;color:#8a869a;margin:14px 0 0;text-align:center}
#waitlist .thanks{text-align:center;padding:30px 0}
#waitlist .thanks .big{font:400 clamp(22px,6vw,30px)/1.2 Bungee,sans-serif;color:var(--taxi)}