/* ============ THEMES (Settings → Theme; persisted, applied on <html data-theme>) ============
   summit = the default identity (Delhi Summit: warm marble, sandstone and
   saffron — no purple lead). Every colour the chrome uses flows through
   these variables, so a theme re-skins the whole site — landing, menus,
   panels and HUD — without touching the 3D scene. */
:root, :root[data-theme="summit"]{
  --bg:#f2ead9; --bg2:#ece0c8; --bg-glow:#ffd9a0; --panel:#fdf8ec; --panel2:#f7ecd4; --panel-deep:#f3e8cf;
  --violet:#a85e00; --violet2:#9a4a12; --magenta:#b03a2e; --gold:#8a5a00;
  --text:#2e2114; --strong:#1d130a; --muted:#5a4630; --line:#d9c69c;
  --bar-bg:rgba(253,248,236,.9); --hud-bg:rgba(253,248,236,.92); --scrim:rgba(35,22,8,.55);
  --btn1:#ffb340; --btn2:#d97700; --btn3:#b45309; --btn-shadow:rgba(217,119,0,.38);
  --ghost1:#fffdf6; --ghost2:#f1e5c8; --toggle-bg:#fffdf6;
  --kbd1:#fffdf6; --kbd2:#efe3c6; --kbd-line:#c9b183; --row-line:rgba(70,48,14,.14);
  --sep1:#d97700; --sep2:#b03a2e; --sep3:#e8a020;
}
:root[data-theme="dusk"]{
  --bg:#0b0614; --bg2:#14092b; --bg-glow:#2a1660; --panel:#1a0f38; --panel2:#211347; --panel-deep:#150b30;
  --violet:#7c4dff; --violet2:#b388ff; --magenta:#d500f9; --gold:#ffb300;
  --text:#f3efff; --strong:#fff; --muted:#bdb3e6; --line:#3a2780;
  --bar-bg:rgba(11,6,20,.82); --hud-bg:rgba(13,7,28,.78); --scrim:rgba(5,2,12,.8);
  --btn1:#9a6bff; --btn2:#6a2ff2; --btn3:#571fd0; --btn-shadow:rgba(106,47,242,.45);
  --ghost1:#2c1a5e; --ghost2:#1d1042; --toggle-bg:#241355;
  --kbd1:#3d2a7d; --kbd2:#241355; --kbd-line:#5a43b8; --row-line:rgba(255,255,255,.08);
  --sep1:#7c4dff; --sep2:#d500f9; --sep3:#ffb300;
}
:root[data-theme="tricolour"]{
  --bg:#f4efe4; --bg2:#efe6d0; --bg-glow:#ffe3b3; --panel:#fffdf6; --panel2:#f7efdb; --panel-deep:#f3ead2;
  --violet:#a85e00; --violet2:#0b6b2d; --magenta:#1a3f9e; --gold:#8f4f06;
  --text:#241f14; --strong:#171208; --muted:#5d543f; --line:#d8c9a3;
  --bar-bg:rgba(255,251,240,.88); --hud-bg:rgba(255,252,244,.9); --scrim:rgba(30,22,8,.55);
  --btn1:#ffb340; --btn2:#d97700; --btn3:#b45309; --btn-shadow:rgba(217,119,0,.4);
  --ghost1:#ffffff; --ghost2:#f1e7cd; --toggle-bg:#fffdf6;
  --kbd1:#fffdf6; --kbd2:#efe6d0; --kbd-line:#c9b586; --row-line:rgba(60,45,10,.14);
  --sep1:#f08c00; --sep2:#0e7a34; --sep3:#1a3f9e;
}
:root[data-theme="midnight"]{
  --bg:#040b16; --bg2:#071528; --bg-glow:#0b3050; --panel:#0a1a2e; --panel2:#0e2338; --panel-deep:#081426;
  --violet:#00749c; --violet2:#4dd0e1; --magenta:#2979ff; --gold:#ffd54f;
  --text:#e3f2fd; --strong:#fff; --muted:#90a9c4; --line:#1d3a55;
  --bar-bg:rgba(4,11,22,.85); --hud-bg:rgba(6,17,32,.82); --scrim:rgba(2,6,14,.82);
  --btn1:#29b6f6; --btn2:#0288d1; --btn3:#01579b; --btn-shadow:rgba(2,136,209,.45);
  --ghost1:#0d2440; --ghost2:#081a30; --toggle-bg:#0d2440;
  --kbd1:#14334f; --kbd2:#0a1e33; --kbd-line:#2a5a86; --row-line:rgba(255,255,255,.08);
  --sep1:#0288d1; --sep2:#00e5ff; --sep3:#ffd54f;
}
:root[data-theme="sandstone"]{
  --bg:#160a06; --bg2:#221008; --bg-glow:#572a12; --panel:#2a1409; --panel2:#351b0d; --panel-deep:#211006;
  --violet:#b04f1c; --violet2:#f0a868; --magenta:#b03a2e; --gold:#ffc46b;
  --text:#f7ead9; --strong:#fff8ee; --muted:#cfa583; --line:#5a3418;
  --bar-bg:rgba(22,10,6,.85); --hud-bg:rgba(30,15,7,.82); --scrim:rgba(12,5,2,.82);
  --btn1:#e8935a; --btn2:#c75b21; --btn3:#9e3f10; --btn-shadow:rgba(199,91,33,.45);
  --ghost1:#452212; --ghost2:#2c1509; --toggle-bg:#3a1d0e;
  --kbd1:#5a3016; --kbd2:#331a0b; --kbd-line:#8a5426; --row-line:rgba(255,255,255,.09);
  --sep1:#d96f32; --sep2:#b03a2e; --sep3:#ffc46b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,var(--bg-glow) 0%,var(--bg) 55%);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
/* visible keyboard focus everywhere (Hallmark floor) */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:var(--violet2);text-decoration:none}
h1,h2,h3{letter-spacing:.02em;margin:0 0 .5em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
p{line-height:1.6;color:var(--muted)}
/* glowing theme separator — gradient follows the active theme; the flow
   animation runs only when Animations are ON (Settings), per the fleet
   animations-off default. body.no-sep hides separators entirely. */
.sep{height:2px;background:linear-gradient(90deg,transparent,var(--sep1),var(--sep2),var(--sep3),var(--sep1),transparent);
  background-size:200% 100%;opacity:.85}
body.anim-on .sep{animation:sepflow 9s linear infinite}
body.no-sep .sep{display:none}
@keyframes sepflow{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.sep,.pop,.hero-aura,.brand-mark{animation:none!important}
  .reveal-up,.reveal-left,.reveal-right,.reveal-scale{transition:none!important}}
/* top bar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;
  padding:.6rem 1.2rem;background:var(--bar-bg);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:600;letter-spacing:.14em}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--btn1),var(--btn2) 55%,var(--btn3));color:#fff;font-weight:800;font-size:1.15rem;
  box-shadow:0 4px 14px var(--btn-shadow),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.35)}
body.anim-on .brand-mark{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.brand-text strong{color:var(--strong)}
.topbar nav{display:flex;gap:1.1rem;margin-left:auto}
.topbar nav a{color:var(--muted);font-size:.95rem}.topbar nav a:hover{color:var(--strong)}
@media(max-width:640px){.topbar nav{display:none}}
/* buttons — real 3D depth */
.btn{border:0;cursor:pointer;color:#fff;font-weight:700;letter-spacing:.04em;border-radius:12px;
  padding:.65rem 1.25rem;background:linear-gradient(180deg,var(--btn1),var(--btn2) 60%,var(--btn3));
  box-shadow:0 6px 16px var(--btn-shadow),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.28);
  transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(2px);box-shadow:0 2px 8px var(--btn-shadow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-big{padding:.95rem 1.9rem;font-size:1.08rem;border-radius:14px}
.btn-small{padding:.5rem 1rem;font-size:.9rem}
.btn-ghost{background:linear-gradient(180deg,var(--ghost1),var(--ghost2));color:var(--violet2);
  box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.3)}
/* hero */
/* HOME SCREEN — the GTA cover is the title screen. Title treatment is baked
   into assets/cover-summit-day.png, so the DOM title bits are hidden (logo /
   eyebrow / h1 / sub / stats / aura) and only the Play CTA floats over the
   bottom of the cover, on a gradient scrim. Panel keeps the cover's aspect
   so the title is never cropped; max-height caps it on ultra-wide screens. */
.hero{position:relative;text-align:center;padding:0;overflow:hidden;aspect-ratio:1112/574;max-height:82vh}
.hero-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(5,2,16,.85),transparent);pointer-events:none}
.hero-aura,.hero-logo,.hero .eyebrow,.hero h1,.hero-sub,.hero-stats{display:none}
.hero-cta{position:absolute;left:0;right:0;bottom:1.1rem;z-index:2;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero-aura{position:absolute;inset:-20%;background:
  radial-gradient(420px 260px at 25% 35%,rgba(124,77,255,.35),transparent 70%),
  radial-gradient(520px 300px at 78% 30%,rgba(213,0,249,.22),transparent 70%);
  animation:aura 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes aura{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
.hero-logo{width:118px;height:118px;object-fit:cover;border-radius:26px;position:relative;
  box-shadow:0 14px 40px rgba(124,77,255,.5),inset 0 1px 0 rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.25)}
.eyebrow{letter-spacing:.03em;font-size:.85rem;color:var(--gold);font-weight:700;position:relative}
#photo-flash{position:absolute;inset:0;z-index:30;background:#fff;opacity:0;pointer-events:none;transition:opacity .45s ease}
.hero h1{font-size:clamp(3rem,9vw,6.2rem);font-weight:900;line-height:.98;position:relative}
.hero-sub{max-width:720px;margin:0 auto 1.6rem;font-size:1.08rem;position:relative}
.hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap} /* position set by the cover block above */
.hero-stats{gap:2.4rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap} /* display:none by the cover block above */
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:1.7rem;color:var(--strong)}.hero-stats span{color:var(--muted);font-size:.85rem;letter-spacing:.08em}
/* entrance pops — motion only when Animations are ON (Settings); with
   animations off the elements are simply visible, no entrance movement */
.pop{opacity:0;animation:pop .7s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d,0s)}
body:not(.anim-on) .pop{opacity:1;animation:none}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
/* sections */
.section{max-width:1120px;margin:0 auto;padding:3.6rem 1.2rem}
.section-sub{max-width:640px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;
  padding:1.3rem;box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)}
/* scene select (title bar picker) */
.scene-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.2rem}
.scene-card{text-align:left;cursor:pointer;font:inherit;color:var(--muted);
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;
  padding:1.3rem;display:flex;flex-direction:column;gap:.35rem;
  box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.scene-card:hover{transform:translateY(-2px);border-color:var(--violet2)}
.scene-card.selected{border-color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px var(--gold),0 0 22px rgba(255,179,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.scene-kicker{color:var(--gold);font-weight:800;letter-spacing:.04em;font-size:.78rem}
.scene-name{color:var(--strong);font-size:1.35rem;font-weight:800;letter-spacing:.02em}
.scene-sub{color:var(--violet2);font-size:.85rem;font-weight:600}
.scene-desc{line-height:1.55;font-size:.95rem}
.scene-now{margin-top:1rem}.scene-now b{color:var(--strong)}
#scene-label{font-size:.68rem;letter-spacing:.05em;color:var(--gold);font-weight:800;margin-bottom:.3rem}
.card-num{color:var(--gold);font-weight:800;letter-spacing:.04em;font-size:.85rem}
.card h3{color:var(--strong);margin:.4rem 0}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:1.2rem}
.zone{background:var(--panel-deep);border:1px solid var(--line);border-radius:16px;padding:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.zone b{color:var(--strong)}.zone span{color:var(--muted);font-size:.92rem;line-height:1.5}
.zone.core{border-color:var(--gold)} .zone.summit{border-color:var(--magenta)}
.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.controls-grid div{background:var(--panel-deep);border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
kbd{background:linear-gradient(180deg,var(--kbd1),var(--kbd2));border:1px solid var(--kbd-line);border-bottom-width:3px;border-radius:8px;
  padding:.28rem .6rem;font-family:inherit;font-weight:700;color:var(--strong);width:max-content}
.features{line-height:1.9;color:var(--muted);padding-left:1.2rem}
.feature-img{width:100%;max-height:220px;object-fit:cover;object-position:top;border-radius:16px;margin-top:1rem;border:1px solid var(--line)}
footer{padding:0 1.2rem 2.4rem;text-align:center}
footer p{max-width:760px;margin:1.4rem auto 0;font-size:.92rem}
/* scroll reveals (JS adds .in) */
.reveal-up,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .7s ease,transform .7s ease}
.reveal-up{transform:translateY(28px)} .reveal-left{transform:translateX(-32px)}
.reveal-right{transform:translateX(32px)} .reveal-scale{transform:scale(.94)}
.reveal-up.in,.reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}
/* animations off: scroll reveals land instantly, fully visible */
body:not(.anim-on) .reveal-up,body:not(.anim-on) .reveal-left,body:not(.anim-on) .reveal-right,body:not(.anim-on) .reveal-scale{opacity:1;transform:none;transition:none}
/* ---------- GAME ---------- */
#game-shell{padding:1rem;scroll-margin-top:76px} /* 76px clears the sticky top bar + separator, so the shell's top (and the objective box) is never under it */
#game-wrap{position:relative;max-width:1280px;margin:0 auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);background:#000;aspect-ratio:16/9}
#game-canvas-holder,#game-canvas-holder canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#game-loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--panel-deep);color:var(--violet2);
  font-size:1.2rem;letter-spacing:.15em;z-index:5}
#hud{position:absolute;inset:0;pointer-events:none;z-index:6;font-size:.8rem}
#objective-box{position:absolute;top:14px;left:14px;max-width:280px;background:var(--hud-bg);
  border:1px solid var(--line);border-radius:14px;padding:.55rem .7rem;backdrop-filter:blur(6px)}
.obj-label{font-size:.68rem;letter-spacing:.08em;color:var(--gold);font-weight:800}
#objective-text{color:var(--strong);font-weight:600;margin-top:.25rem;line-height:1.35}
#waypoint-dist{color:var(--violet2);font-size:.72rem;margin-top:.2rem}
#speed-box{position:absolute;right:16px;bottom:16px;background:var(--hud-bg);border:1px solid var(--line);
  border-radius:14px;padding:.5rem .9rem;color:var(--strong)}
#speed-box span{font-size:1.35rem;font-weight:800} #speed-box small{color:var(--muted);margin-left:.3rem}
#chaos-box{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:230px;background:rgba(60,4,20,.8);
  border:1px solid #ff4081;border-radius:14px;padding:.5rem .7rem}
.chaos-track{height:10px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:.35rem}
#chaos-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff9100,#ff1744);transition:width .2s}
#minimap{position:absolute;top:14px;right:14px;border-radius:14px;border:1px solid var(--line);background:var(--hud-bg);pointer-events:auto;cursor:pointer}
#hint-box{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:var(--hud-bg);
  color:var(--muted);border-radius:999px;padding:.35rem 1rem;font-size:.72rem;white-space:nowrap}
/* ---------- TOUCH CONTROLS (JS shows them only on touch devices, in-game) ---------- */
#touch-ui{position:absolute;inset:0;z-index:7;pointer-events:none}
#touch-ui [hidden]{display:none!important}
#stick-zone{position:absolute;left:0;bottom:0;width:46%;height:64%;pointer-events:auto;touch-action:none}
#stick-base{position:absolute;width:124px;height:124px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.35);background:rgba(20,10,44,.28);backdrop-filter:blur(3px)}
#stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(124,77,255,.55) 60%,rgba(56,0,107,.6));
  border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.tbtn{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.38);cursor:pointer;
  background:rgba(20,10,44,.52);backdrop-filter:blur(5px);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.06em;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .1s ease,transform .1s ease}
.tbtn.on,.tbtn:active{background:rgba(124,77,255,.68);transform:scale(.94)}
.tbtn-big{width:86px;height:86px;font-size:.95rem}
.tbtn-small{width:48px;height:48px;font-size:.66rem}
#foot-controls{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:auto auto;gap:12px;align-items:end;justify-items:end}
/* GTA SA mobile cluster on foot: big JUMP bottom-right, SPRINT left of it,
   ENTER above JUMP — joystick lives bottom-left. Driving keeps its own row. */
#btn-interact{grid-column:2;grid-row:1}
#btn-sprint{grid-column:1;grid-row:2}
#btn-jump{grid-column:2;grid-row:2}
#drive-controls{position:absolute;inset:auto 0 0 0;pointer-events:none}
#drive-controls .steer-cluster{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;gap:12px}
#drive-controls .pedal-cluster{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;gap:12px;align-items:flex-end}
.tbtn-pause{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(208px + env(safe-area-inset-top));
  width:46px;height:46px;font-size:.95rem}
#rotate-hint{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:7;
  background:rgba(20,10,44,.85);border:1px solid var(--gold);color:#fff;border-radius:999px;
  padding:.35rem .95rem;font-size:.8rem;font-weight:700;pointer-events:none;white-space:nowrap}
#game-wrap:fullscreen{max-width:none;width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0}
#game-canvas-holder canvas{touch-action:none}
#pause-menu .btn{min-width:210px;min-height:48px;font-size:1rem}
/* touch devices: hint pill shows the touch text instead of hiding on small screens */
body.touch #hint-box{white-space:normal;text-align:center;max-width:56vw}
/* ---------- phone fit ---------- */
@media(max-width:920px){
  #hint-box{display:none}
  body.touch #hint-box{display:block;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));font-size:.62rem;padding:.28rem .7rem;max-width:52vw}
  #minimap{width:110px;height:110px;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
  .tbtn-pause{top:calc(128px + env(safe-area-inset-top))}
  #objective-box{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));max-width:36vw;padding:.45rem .6rem}
  #objective-text{font-size:.68rem;line-height:1.3}
  #waypoint-dist{font-size:.66rem}
  #speed-box{right:calc(12px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom));padding:.35rem .6rem}
  #speed-box span{font-size:1.15rem}
  #chaos-box{width:170px;padding:.4rem .6rem}
  #toast{font-size:.88rem;max-width:92%;padding:.7rem 1rem;top:16%}
  #interact{bottom:calc(150px + env(safe-area-inset-bottom));font-size:.78rem;max-width:88vw;text-align:center}
  #game-shell{padding:.4rem}
  #game-wrap{aspect-ratio:auto;height:78vh}
}
@media(max-width:920px) and (orientation:landscape){
  #game-wrap{height:92vh}
  body.touch #hint-box{bottom:calc(10px + env(safe-area-inset-bottom));max-width:30vw}
  #speed-box{bottom:calc(112px + env(safe-area-inset-bottom))}
}
@media(max-width:920px) and (orientation:portrait){
  #rotate-hint{top:calc(132px + env(safe-area-inset-top))}
  /* VOICES/CHAOS meter: top-centre collides with the objective panel on a
     390px portrait screen (objective x10-150 vs meter x110-280). Stack it in
     the right column under the minimap (ends ~120px) and below the pause
     button (ends ~174px) and the rotate hint (~132-165px) — y180 clear of all three. */
  #chaos-box{top:calc(180px + env(safe-area-inset-top));left:auto;right:calc(10px + env(safe-area-inset-right));transform:none;width:150px}
}
/* Landscape phone (e.g. 1024x576): CSS width is >920 so the max-width:920px
   rule never fires and the desktop 190px minimap eats the screen — cap by
   HEIGHT too, so any short viewport gets the phone-size minimap. */
@media(max-height:600px){
  #minimap{width:120px;height:120px}
  .tbtn-pause{top:calc(138px + env(safe-area-inset-top))}
}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);background:var(--hud-bg);
  border:1px solid var(--violet);color:var(--strong);font-size:1.05rem;font-weight:700;text-align:center;
  border-radius:16px;padding:1rem 1.6rem;max-width:80%;box-shadow:0 16px 40px rgba(0,0,0,.5)}
#interact{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);background:var(--hud-bg);
  border:1px solid var(--gold);color:var(--strong);border-radius:999px;padding:.45rem 1.1rem}
#pause-menu,#webgl-error{position:absolute;inset:0;z-index:8;display:grid;place-items:center;align-content:center;gap:.6rem;
  background:var(--scrim);text-align:center;padding:1rem}
#pause-menu h2,#webgl-error h2{color:var(--strong)}

/* ---------- MAIN MENU (scene cards with real GIF previews) ---------- */
.menu{text-align:center}
.menu-title{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:900}
.menu-tag{margin:0 auto 1.4rem}
.menu-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem}
.menu-subhead{color:var(--gold);letter-spacing:.04em;font-size:.9rem;font-weight:800;margin:0 0 .9rem}
.menu-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;text-align:left}
.menu-scene-card{cursor:pointer;font:inherit;color:var(--muted);padding:0;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;
  display:flex;flex-direction:column;gap:.3rem;
  box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.menu-scene-card:hover,.menu-scene-card:focus-visible{transform:translateY(-3px) scale(1.01);border-color:var(--violet2);outline:none;
  box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 22px rgba(124,77,255,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.menu-scene-card:active{transform:translateY(1px) scale(.99)}
.menu-scene-card.selected{border-color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px var(--gold),0 0 22px rgba(255,179,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.scene-gif{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panel-deep)}
.ms-kicker{color:var(--gold);font-weight:800;letter-spacing:.04em;font-size:.76rem;padding:.9rem 1.1rem 0}
.ms-name{color:var(--strong);font-size:1.3rem;font-weight:800;padding:0 1.1rem}
.ms-sub{color:var(--violet2);font-size:.85rem;font-weight:600;padding:0 1.1rem}
.ms-progress{color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.14em;padding:0 1.1rem 1.1rem}
.rooms-row{margin-top:1.2rem;width:100%;cursor:pointer;font:inherit;font-weight:800;letter-spacing:.04em;color:var(--strong);
  background:linear-gradient(180deg,var(--ghost1),var(--ghost2));border:1px solid var(--violet2);border-radius:14px;padding:.95rem 1.2rem;
  box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);transition:filter .12s ease,transform .12s ease}
.rooms-row:hover{filter:brightness(1.15)} .rooms-row:active{transform:translateY(2px)}
.rooms-arrow{float:right;color:var(--gold)}
.menu-note{margin-top:1rem;font-size:.9rem}
.scene-now{text-align:center}
/* ---------- CUTSCENE (letterbox + title card) ---------- */
#letterbox{position:absolute;inset:0;pointer-events:none;z-index:9}
.lb-bar{position:absolute;left:0;right:0;height:9%;background:#000}
.lb-top{top:0}.lb-bottom{bottom:0}
#cutscene-card{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);z-index:10;text-align:center;
  max-width:min(640px,88%);pointer-events:none}
#cutscene-sub{color:var(--gold);font-weight:800;letter-spacing:.06em;font-size:.82rem;text-shadow:0 2px 8px #000}
#cutscene-title{color:#fff;font-size:clamp(1.5rem,4vw,2.4rem);font-weight:900;margin:.3rem 0;text-shadow:0 2px 12px #000}
#cutscene-body{color:#fff;font-size:.95rem;line-height:1.55;text-shadow:0 2px 8px #000;margin:0}
.skip-hint{color:rgba(255,255,255,.65);font-size:.72rem;letter-spacing:.06em;font-weight:700;margin-top:.6rem}
/* ---------- CAMPAIGN BEAT CARD ---------- */
#campaign-card{position:absolute;inset:0;z-index:11;display:grid;place-items:center;align-content:center;gap:.8rem;
  background:var(--scrim);text-align:center;padding:1.2rem}
#campaign-card h2{color:var(--strong);font-size:clamp(1.4rem,3.6vw,2rem)}
#campaign-card p{max-width:560px;color:var(--text);margin:0}
.campaign-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
/* ---------- BIG MAP ---------- */
#bigmap-overlay{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:var(--scrim);padding:1rem}
#bigmap-panel{width:min(680px,96vw);background:var(--panel-deep);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.7)}
#bigmap-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;
  font-weight:800;letter-spacing:.05em;font-size:.9rem;color:var(--gold)}
#bigmap-close{cursor:pointer;border:0;background:rgba(255,255,255,.1);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1rem}
#bigmap{width:100%;height:auto;display:block}
#bigmap-legend{display:flex;gap:1.1rem;flex-wrap:wrap;padding:.6rem 1rem;color:var(--muted);font-size:.8rem}
#bigmap-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.3rem;vertical-align:-1px}
.dot-you{background:#fff}.dot-wp{background:#ffc400}.dot-rally{background:#ffd54f}.dot-lm{background:#7c4dff}
/* ---------- SETTINGS + ROOMS PANELS ---------- */
#settings-panel,#rooms-panel{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--scrim);padding:1rem}
.settings-inner,.rooms-inner{width:min(520px,96vw);max-height:88vh;overflow:auto;background:var(--panel-deep);border:1px solid var(--line);
  border-radius:18px;padding:1.2rem;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.settings-head h2{margin:0;color:var(--strong)}
.settings-head button{cursor:pointer;border:0;background:rgba(255,255,255,.1);color:var(--strong);width:34px;height:34px;border-radius:50%;font-size:1rem}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid var(--row-line)}
.set-row>span{color:var(--text);font-weight:600}
.seg{display:flex;flex-wrap:wrap;justify-content:flex-end;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{cursor:pointer;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:.5rem .9rem}
.seg button.active{background:var(--violet);color:#fff}
.toggle{cursor:pointer;border:1px solid var(--line);background:var(--toggle-bg);color:var(--strong);font:inherit;font-weight:700;
  border-radius:999px;padding:.45rem 1.1rem;min-width:74px}
.set-note{color:var(--muted);font-size:.85rem;margin:.4rem 0}
.btn-danger{background:linear-gradient(180deg,#b71c1c,#7f0000)}
.rooms-sub{margin-top:0}
.rooms-actions{display:flex;flex-direction:column;gap:.8rem;margin-bottom:.8rem}
.room-join{display:flex;gap:.6rem}
.room-join input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--strong);
  font:inherit;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.7rem .9rem}
#rooms-status{color:var(--muted);font-size:.9rem;margin:.4rem 0}
#room-share{margin-top:.6rem;display:flex;flex-direction:column;gap:.7rem}
.room-code-line{color:var(--text)} .room-code-line b{color:var(--gold);letter-spacing:.12em;font-size:1.1rem}
#room-players{color:var(--text);line-height:1.7}
#rooms-list{list-style:none;margin:.8rem 0 0;padding:0;color:var(--muted);font-size:.9rem}
#rooms-list li{padding:.5rem 0;border-top:1px solid var(--row-line)}
/* ---------- COMPACT HUD (settings) ---------- */
body.hud-compact #hud{font-size:.72rem}
body.hud-compact #objective-text{font-size:.62rem}
body.hud-compact #hint-box{font-size:.62rem}
body.hud-compact #toast{font-size:.95rem}
/* ---------- APP MODE (installed / fullscreen launch: menu is the app) ---------- */
body.app-mode .topbar nav,body.app-mode #story,body.app-mode #map,body.app-mode #controls,
body.app-mode #features,body.app-mode footer,body.app-mode .hero-cta a[href="#story"]{display:none}
body.app-mode .hero{padding:0}
body.app-mode #scenes{min-height:calc(100svh - 320px);display:flex;flex-direction:column;justify-content:center}
/* ---------- CUSTOM CURSORS (Settings → Cursor) ----------
   GPU-cheap by construction: two fixed divs moved only via transform.
   JS adds body.cursor-custom (fine pointers only) and body.has-cursor
   after the first mouse move, so the native cursor hides only while a
   custom one is actually on screen. Touch input never activates it. */
#cursor-dot,#cursor-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;
  opacity:0;will-change:transform}
#cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--gold)}
#cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--violet2)}
body.has-cursor #cursor-dot,body.has-cursor #cursor-ring{opacity:1}
body.cursor-custom,body.cursor-custom a,body.cursor-custom button,body.cursor-custom input,
body.cursor-custom .scene-card,body.cursor-custom .menu-scene-card,body.cursor-custom canvas{cursor:none!important}
/* crosshair skin: a fine gold reticle */
body[data-cursor="crosshair"] #cursor-ring{border-color:var(--gold);
  background:linear-gradient(var(--gold),var(--gold)) center/2px 9px no-repeat,
             linear-gradient(var(--gold),var(--gold)) center/9px 2px no-repeat}
body[data-cursor="crosshair"] #cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px}
/* ring skin: no dot, one thin neutral ring */
body[data-cursor="ring"] #cursor-dot{display:none}
body[data-cursor="ring"] #cursor-ring{border:1.5px solid var(--text);width:26px;height:26px;margin:-13px 0 0 -13px}