/* Owned by workstream U (UI). GTA: San Andreas HUD + menus. Sizes scale with --u (1px at 1280x720, set by JS). */
@font-face{font-family:Pricedown;src:url('../../assets/fonts/pricedown.ttf') format('truetype');font-display:block}
@font-face{font-family:Beckett;src:url('../../assets/fonts/beckett.ttf') format('truetype');font-display:block}
@font-face{font-family:Poppins;font-weight:400;src:url('../../assets/fonts/Poppins-400.woff2') format('woff2')}
@font-face{font-family:Poppins;font-weight:700;src:url('../../assets/fonts/Poppins-700.woff2') format('woff2')}

:root{
  --u:1px;
  --cream:#f7f2e7;--purple:#5923aa;--lilac:#c9a8ff;--gold:#d4b160;
  --sa-white:#e1e1e1;--sa-green:#98cc8c;--sa-red:#d80c24;--sa-red-dark:#5a0a10;--sa-gold:#d6b864;--sa-title:#cdb162;
  --sa-blue:#acc8f0;--sa-blue-dim:#4a5a6b;--sa-wasted:#b4191d;--sa-radio:#d5a43a;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#fff;font-family:Poppins,system-ui,sans-serif;overscroll-behavior:none}
body{touch-action:none;-webkit-user-select:none;user-select:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui-root{position:fixed;inset:0;pointer-events:none;z-index:2;font-family:Poppins,sans-serif}
#ui-root .hide{display:none!important}

/* ---------- SA text helpers ---------- */
.sa-o{paint-order:stroke fill;-webkit-text-stroke:calc(3.2*var(--u)) #000;text-shadow:calc(1.2*var(--u)) calc(1.6*var(--u)) 0 #000}
.pd{font-family:Pricedown,Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.bk{font-family:Beckett,'UnifrakturMaguntia',serif;font-weight:400}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;transition:opacity .45s ease}
.hud.off{opacity:0}
.hud-tr{position:absolute;top:calc(var(--safe-t) + 26*var(--u));right:calc(var(--safe-r) + 34*var(--u));display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto auto auto;column-gap:calc(7*var(--u));justify-items:end;align-items:start}
.hud-clock{grid-column:1;grid-row:1;font-size:calc(38*var(--u));line-height:.86;color:var(--sa-white);margin-top:calc(2*var(--u))}
.hud-weapon{grid-column:2;grid-row:1/3;width:calc(66*var(--u));height:calc(66*var(--u));border:calc(4*var(--u)) solid #050505;border-radius:calc(13*var(--u));background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 calc(1*var(--u)) rgba(255,255,255,.08) inset}
.hud-weapon svg{width:86%;height:86%;display:block;filter:drop-shadow(calc(1*var(--u)) calc(1*var(--u)) 0 rgba(0,0,0,.35))}
.hud-money{grid-column:1;grid-row:2;font-size:calc(31*var(--u));line-height:.9;color:var(--sa-green);margin-top:calc(5*var(--u));letter-spacing:.01em}
.hud-money.neg{color:#d8443a}
.hud-bars{grid-column:1/3;grid-row:3;justify-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:calc(6*var(--u));margin-top:calc(9*var(--u));padding-left:calc(4*var(--u))}
.bar{position:relative;width:calc(122*var(--u));height:calc(15*var(--u));background:#000;padding:calc(3*var(--u))}
.bar i{display:block;position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));bottom:calc(3*var(--u));right:calc(3*var(--u));background:var(--sa-red-dark)}
.bar b{display:block;position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));bottom:calc(3*var(--u));width:calc(116*var(--u));transform-origin:left center;background:var(--sa-red)}
.bar.armor i{background:#3f3f3f}.bar.armor b{background:#e1e1e1}
.bar.flash b{animation:hpflash .5s steps(2,start) infinite}
@keyframes hpflash{to{visibility:hidden}}
.hud-stars{grid-column:1/3;grid-row:4;display:flex;gap:calc(3*var(--u));margin-top:calc(7*var(--u))}
.hud-stars svg{width:calc(28*var(--u));height:calc(28*var(--u));display:block;overflow:visible}
.hud-stars path{fill:#5f5f5f;stroke:#050505;stroke-width:2.6;stroke-linejoin:round;paint-order:stroke}
.hud-stars .on path{fill:#e8c66b}
.hud-stars .blink path{fill:#f4f0e0}
.hud-loc{position:absolute;right:calc(var(--safe-r) + 40*var(--u));bottom:calc(var(--safe-b) + 58*var(--u));font-size:calc(46*var(--u));line-height:1;color:var(--sa-white);opacity:0;transition:opacity .9s ease;white-space:nowrap;text-align:right}
.hud-loc.show{opacity:1;transition-duration:.35s}
.hud-veh{position:absolute;right:calc(var(--safe-r) + 40*var(--u));bottom:calc(var(--safe-b) + 112*var(--u));font-size:calc(34*var(--u));color:#9bbf5a;opacity:0;transition:opacity .8s;white-space:nowrap}
.hud-veh.show{opacity:1;transition-duration:.3s}
.radar{position:absolute;left:calc(var(--safe-l) + 40*var(--u));bottom:calc(var(--safe-b) + 34*var(--u));width:calc(168*var(--u));height:calc(168*var(--u))}
.radar canvas{width:100%;height:100%;display:block}

/* ---------- radio, help, prompt, subtitles ---------- */
.radio-box{position:absolute;left:50%;top:calc(var(--safe-t) + 18*var(--u));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--u));opacity:0;transition:opacity .6s;pointer-events:none}
.radio-box.show{opacity:1;transition-duration:.15s}
.radio-icons{display:flex;align-items:center;gap:calc(10*var(--u));height:calc(66*var(--u))}
.radio-box.textonly .radio-icons{display:none}
.r-ic{width:calc(40*var(--u));height:calc(40*var(--u));filter:grayscale(1) brightness(.62);opacity:.8;transition:width .18s,height .18s,filter .18s,opacity .18s}
.r-ic svg{width:100%;height:100%;display:block;filter:drop-shadow(0 calc(2*var(--u)) 0 rgba(0,0,0,.6))}
.r-ic.sel{width:calc(64*var(--u));height:calc(64*var(--u));filter:none;opacity:1}
.radio{font-size:calc(30*var(--u));line-height:1.05;color:var(--sa-radio);white-space:nowrap;transition:color .2s}
.radio.tuning{color:#8e8e8e}
.tl{position:absolute;left:calc(var(--safe-l) + 34*var(--u));top:calc(var(--safe-t) + 26*var(--u));display:flex;flex-direction:column;align-items:flex-start;gap:calc(8*var(--u))}
.helpbox{position:relative;max-width:calc(380*var(--u));min-width:calc(200*var(--u));background:rgba(0,0,0,.86);padding:calc(15*var(--u)) calc(18*var(--u));font:700 calc(17*var(--u))/1.35 Poppins,sans-serif;color:#fff;opacity:0;transform:translateY(calc(-6*var(--u)));transition:opacity .25s,transform .25s;display:flex;gap:calc(12*var(--u));align-items:center}
.helpbox:not(.show),.promptbox:not(.show){display:none}
.helpbox.show{opacity:1;transform:none;animation:helpin .25s ease}
@keyframes helpin{from{opacity:0;transform:translateY(calc(-6*var(--u)))}}
.helpbox img{height:calc(54*var(--u));width:auto;flex:0 0 auto}
.helpbox b,.helpbox kbd,.promptbox b,.promptbox kbd{color:#acc8f0;font:inherit;background:none}
.helpbox .g,.promptbox .g{color:var(--sa-green)}.helpbox .r{color:#e0505a}.helpbox .y,.promptbox .y{color:#e8c66b}.helpbox .p{color:var(--lilac)}
.promptbox{position:relative;background:rgba(0,0,0,.86);padding:calc(11*var(--u)) calc(18*var(--u));font:700 calc(16*var(--u))/1.3 Poppins,sans-serif;color:#fff;opacity:0;transition:opacity .2s,top .25s;max-width:calc(380*var(--u))}
.promptbox.show{opacity:1}
.is-touch .promptbox{pointer-events:auto;cursor:pointer;min-height:44px;display:flex;align-items:center}
.helpbox b.tk,.promptbox b.tk{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;padding:0 .45em;border-radius:1em;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px currentColor;color:#e8c66b;font:400 .95em/1 Pricedown,Impact,sans-serif;letter-spacing:.03em;vertical-align:middle}
.skiphint{position:absolute;right:calc(var(--safe-r) + 24px);bottom:calc(var(--safe-b) + 3.5vh);font:700 clamp(11px,calc(14*var(--u)),15px)/1 Poppins,sans-serif;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none;z-index:3}
.skiphint.show{opacity:1;transition-delay:1.2s}
.sub{position:absolute;left:12%;right:12%;bottom:calc(var(--safe-b) + 92*var(--u));text-align:center;font:700 calc(24*var(--u))/1.32 Poppins,sans-serif;color:#fff;paint-order:stroke fill;-webkit-text-stroke:calc(3.4*var(--u)) #000;text-shadow:0 calc(1.5*var(--u)) calc(1*var(--u)) #000;transition:bottom .5s ease}
.sub span{display:inline}
.sub .y{color:#e8c66b}.sub .b{color:#acc8f0}.sub .g{color:var(--sa-green)}.sub .p{color:var(--lilac)}
.lbon .tl{top:calc(12.5vh + 12px)}
.lbon .sub{bottom:calc(var(--safe-b) + 3.2vh)}

/* ---------- centre titles ---------- */
.center{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4vw}
.ttl{display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .6s ease}
.ttl.show{opacity:1;transition-duration:.25s}
.ttl .t{font-family:Pricedown,Impact,sans-serif;font-size:calc(58*var(--u));line-height:1.02;color:var(--sa-title);paint-order:stroke fill;-webkit-text-stroke:calc(5*var(--u)) #000;text-shadow:calc(2*var(--u)) calc(2.5*var(--u)) 0 #000}
.ttl .s{margin-top:calc(8*var(--u));font:700 calc(21*var(--u))/1.25 Poppins,sans-serif;color:#fff;text-transform:uppercase;paint-order:stroke fill;-webkit-text-stroke:calc(3.2*var(--u)) #000;text-shadow:0 calc(1.5*var(--u)) 0 #000;letter-spacing:.01em;max-width:min(92vw,calc(560*var(--u)))}
.ttl .m{margin-top:calc(4*var(--u));font-family:Pricedown,Impact,sans-serif;font-size:calc(44*var(--u));color:#fff;paint-order:stroke fill;-webkit-text-stroke:calc(4*var(--u)) #000;text-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 #000}
.ttl.mission{margin-top:calc(110*var(--u))}
.ttl.mission .t+.t{margin-top:calc(2*var(--u))}
.ttl.passed{margin-top:calc(60*var(--u))}
.ttl.failed .t{color:#c0252a}
.ttl.red .t{color:#c0252a}.ttl.white .t{color:#eee}.ttl.blue .t{color:var(--sa-blue)}.ttl.purple .t{color:#a26bf0}
.ttl.small .t{font-size:calc(38*var(--u))}
.ttl.huge .t{font-size:calc(92*var(--u))}
.ttl.pop.show{animation:ttlpop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes ttlpop{from{transform:scale(1.35)}to{transform:none}}
.ttl.stunt{position:absolute;top:22%;left:0;right:0}
.ttl.stunt .t{font-size:calc(40*var(--u));color:var(--sa-blue)}
.ttl.stunt .m{font-size:calc(34*var(--u))}
.ttl.day .t{font-size:calc(62*var(--u))}

/* wasted / busted */
.death{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s ease;-webkit-backdrop-filter:grayscale(1) contrast(1.15) brightness(.85);backdrop-filter:grayscale(1) contrast(1.15) brightness(.85)}
.death.show{opacity:1}
.death::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.death .t{position:relative;z-index:1;font-family:Pricedown,Impact,sans-serif;font-size:calc(108*var(--u));color:var(--sa-wasted);paint-order:stroke fill;-webkit-text-stroke:calc(6*var(--u)) #000;text-shadow:calc(3*var(--u)) calc(3*var(--u)) 0 #000;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease .5s,transform 3s ease .5s}
.death.show .t{opacity:1;transform:scale(1)}
.death.busted .t{color:#c22a2a}

/* fight hud */
.fight{position:absolute;left:50%;top:calc(var(--safe-t) + 24*var(--u));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--u));opacity:0;transition:opacity .4s}
.fight.show{opacity:1}
.fight .lbl{font-size:calc(26*var(--u));color:var(--sa-title);white-space:nowrap}
.fight .score{font-size:calc(42*var(--u));color:#f2f2f2;white-space:nowrap}
.fight .bars{display:flex;gap:calc(26*var(--u));align-items:center}
.fight .who{display:flex;flex-direction:column;gap:calc(3*var(--u));align-items:flex-start}
.fight .who.r{align-items:flex-end}
.fight .who span{font-size:calc(22*var(--u));color:#e1e1e1}
.fight .bar{width:calc(170*var(--u))}
.fight .bar b{width:calc(164*var(--u))}
.fight .who.r .bar b{left:auto;right:calc(3*var(--u));transform-origin:right center}

/* letterbox + fade */
.lb{position:absolute;left:0;right:0;height:12.5vh;background:#000;transition:transform .7s cubic-bezier(.6,0,.3,1)}
.lb.top{top:0;transform:translateY(-101%)}.lb.bot{bottom:0;transform:translateY(101%)}
.lbon .lb{transform:none}
.fade{position:absolute;inset:0;background:#000;opacity:0;transition-property:opacity;transition-timing-function:linear}
.fade.white{background:#fff}

/* ---------- interactive overlays ---------- */
.secret-wallet{margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid #ffffff40}
.secret-wallet h2{font-size:30px;color:var(--gold);margin:0 0 14px}
.secret-card{padding:16px;margin:12px 0;background:#100b17cc;border-left:4px solid var(--purple)}
.secret-card h3{font:700 16px Poppins,sans-serif;margin:0 0 10px;color:#ead59d}
.secret-code{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;font:700 24px monospace;letter-spacing:.08em;-webkit-user-select:text;user-select:text;color:#fff}
.secret-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.secret-actions .btn{font-size:13px;padding:12px 16px}
.secret-actions button:disabled{opacity:.45;cursor:default;transform:none;filter:none}
.secret-copy-status{min-height:1.4em;font:13px Poppins,sans-serif;color:#ead59d;margin-top:8px}
.ov{position:absolute;inset:0;pointer-events:auto}
.btn{appearance:none;border:0;cursor:pointer;font:700 calc(16*var(--u))/1 Poppins,sans-serif;padding:calc(13*var(--u)) calc(20*var(--u));min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4em;text-decoration:none;transition:transform .12s,filter .12s;letter-spacing:.01em}
.btn:hover,.btn:focus-visible{filter:brightness(1.12);outline:none;transform:translateY(-1px)}
.btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--purple)}
.btn.purple{background:var(--purple);color:#fff}
.btn.dark{background:#141414;color:#fff}
.btn.ghost{background:transparent;color:#141414;box-shadow:inset 0 0 0 2px #141414}
.btn.sa{background:rgba(0,0,0,.6);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}

/* main menu (SA PC) */
.menu{background:#000;display:flex;align-items:stretch;overflow:hidden}
.menu-art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.0;transition:opacity .8s ease}
.menu-art.show{opacity:.92}
.menu-art{right:28%;background-position:30% center}
.menu-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 55%,#000 100%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 25%)}
.menu-sean{position:absolute;left:4vw;bottom:0;height:min(92vh,calc(700*var(--u)));filter:drop-shadow(0 0 30px rgba(0,0,0,.6));opacity:0;transform:translateY(20px);transition:opacity 1s .2s,transform 1.2s .2s}
.menu.ready .menu-sean{opacity:1;transform:none}
.menu-col{position:relative;margin-left:auto;width:min(48vw,calc(560*var(--u)));display:flex;flex-direction:column;justify-content:center;padding:calc(40*var(--u)) calc(56*var(--u)) calc(40*var(--u)) 0;gap:calc(16*var(--u))}
.logo{display:flex;flex-direction:column;align-items:flex-start;line-height:.8;user-select:none}
.logo .l1{font-family:Pricedown,Impact,sans-serif;font-size:calc(44*var(--u));color:#fff;paint-order:stroke fill;-webkit-text-stroke:calc(5*var(--u)) #000;letter-spacing:.04em}
.logo .l2{font-family:Beckett,serif;font-size:calc(118*var(--u));color:#fff;paint-order:stroke fill;-webkit-text-stroke:calc(7*var(--u)) #000;text-shadow:calc(4*var(--u)) calc(5*var(--u)) 0 #000;margin-top:calc(-2*var(--u));line-height:.95}
.logo .l3{display:flex;align-items:center;gap:calc(10*var(--u));margin-top:calc(12*var(--u));font:700 calc(13*var(--u))/1 Poppins,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#cfcfcf}
.logo .l3 img{height:calc(26*var(--u));width:auto;display:block}
.menu-items{list-style:none;margin:calc(26*var(--u)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(4*var(--u))}
.menu-items li{font-family:Pricedown,Impact,sans-serif;font-size:calc(44*var(--u));line-height:1.05;color:var(--sa-blue-dim);cursor:pointer;paint-order:stroke fill;-webkit-text-stroke:calc(3*var(--u)) #000;transition:color .12s;width:max-content;min-height:44px;display:flex;align-items:center}
.menu-items li.sel{color:var(--sa-blue)}
.menu-items li .arr{display:inline-block;width:0;overflow:hidden;color:var(--sa-blue);transition:width .15s}
.menu-items li.sel .arr{width:.7em}
.menu-hint{font:400 calc(13*var(--u))/1.6 Poppins,sans-serif;color:#9a9a9a;margin-top:calc(14*var(--u))}
.menu-hint b{color:#d8d8d8;font-weight:700}
.fine{font:400 calc(12*var(--u))/1.4 Poppins,sans-serif;color:#8a8a8a}
.menu .fine{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 14*var(--u));text-align:center}
.menu .opts{display:none;flex-direction:column;gap:calc(4*var(--u))}
.menu.optmode .opts{display:flex}.menu.optmode .menu-items.main{display:none}

/* loading */
.loading{background:#000;display:flex;align-items:center;justify-content:center}
.ld-frame{position:relative;width:min(100vw,177.7vh);aspect-ratio:16/9;max-height:100vh;overflow:hidden}
.ld-img{position:absolute;inset:calc(18*var(--u));background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;box-shadow:0 0 0 calc(7*var(--u)) var(--fc,#c3832f),0 0 0 calc(10*var(--u)) #000}
.ld-img.show{opacity:1}
.ld-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35));pointer-events:none}
.ld-logo{position:absolute;left:calc(46*var(--u));top:calc(38*var(--u));z-index:2}
.ld-logo .l1{font-size:calc(22*var(--u));-webkit-text-stroke-width:calc(3.5*var(--u))}
.ld-logo .l2{font-size:calc(56*var(--u));-webkit-text-stroke-width:calc(4.5*var(--u))}
.ld-bar{position:absolute;right:calc(52*var(--u));bottom:calc(48*var(--u));width:calc(300*var(--u));height:calc(16*var(--u));background:#000;padding:calc(3*var(--u));z-index:2;box-shadow:0 0 0 calc(1*var(--u)) rgba(255,255,255,.12)}
.ld-bar b{display:block;height:100%;width:0;background:linear-gradient(#e4cc85,#b8913c);transition:width .25s}
.ld-tip{position:absolute;left:calc(52*var(--u));bottom:calc(44*var(--u));z-index:2;max-width:55%;font:700 calc(15*var(--u))/1.35 Poppins,sans-serif;color:#fff;paint-order:stroke fill;-webkit-text-stroke:calc(3*var(--u)) #000}
.loading .fine{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 8*var(--u));text-align:center;z-index:3;color:#777}

/* pause menu (SA frontend) */
.pause{background:#050607;display:flex;flex-direction:column}
.p-head{display:flex;align-items:flex-end;justify-content:space-between;padding:calc(var(--safe-t) + 22*var(--u)) calc(var(--safe-r) + 40*var(--u)) calc(10*var(--u)) calc(var(--safe-l) + 40*var(--u));gap:calc(20*var(--u))}
.p-title{font-family:Beckett,serif;font-size:calc(60*var(--u));line-height:1;color:var(--sa-blue);paint-order:stroke fill;-webkit-text-stroke:calc(3*var(--u)) #000}
.p-tabs{display:flex;gap:calc(22*var(--u));flex-wrap:wrap;justify-content:flex-end}
.p-tabs button{appearance:none;background:none;border:0;cursor:pointer;font-family:Pricedown,Impact,sans-serif;font-size:calc(34*var(--u));color:var(--sa-blue-dim);paint-order:stroke fill;-webkit-text-stroke:calc(2.5*var(--u)) #000;padding:4px 2px;min-height:44px}
.p-tabs button.sel,.p-tabs button:hover,.p-tabs button:focus-visible{color:var(--sa-blue);outline:none}
.p-body{flex:1;position:relative;margin:0 calc(var(--safe-r) + 40*var(--u)) calc(var(--safe-b) + 18*var(--u)) calc(var(--safe-l) + 40*var(--u));border-top:2px solid #26303a;overflow:hidden}
.p-page{position:absolute;inset:0;display:none;overflow:auto}
.p-page.sel{display:block}
.p-foot{position:absolute;right:calc(var(--safe-r) + 40*var(--u));bottom:calc(var(--safe-b) + 4*var(--u));font:400 calc(12*var(--u))/1 Poppins,sans-serif;color:#7d8794}
.map-wrap{position:absolute;inset:calc(14*var(--u)) calc(230*var(--u)) 0 0;overflow:hidden;cursor:grab;background:#3e5d77;touch-action:none}
.map-wrap:active{cursor:grabbing}
.map-wrap canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.legend{position:absolute;right:0;top:calc(14*var(--u));width:calc(214*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u));font:700 calc(14*var(--u))/1.2 Poppins,sans-serif;color:#dfe6ee}
.legend h4{margin:0 0 calc(4*var(--u));font:400 calc(28*var(--u))/1 Pricedown,Impact,sans-serif;color:var(--sa-blue)}
.legend div{display:flex;align-items:center;gap:calc(10*var(--u))}
.legend canvas{width:calc(22*var(--u));height:calc(22*var(--u))}
.legend .keys{margin-top:calc(10*var(--u));font-weight:400;color:#8a96a3;font-size:calc(12*var(--u));display:block}
.brief{padding:calc(18*var(--u)) 0;display:flex;flex-direction:column;gap:calc(10*var(--u));font:700 calc(17*var(--u))/1.4 Poppins,sans-serif}
.brief p{margin:0;color:#e8e8e8}
.brief p.h{color:#acc8f0}.brief p.t{color:var(--sa-title);font:400 calc(26*var(--u))/1.1 Pricedown,Impact,sans-serif}
.brief .empty{color:#6c7684}
.statl{padding:calc(16*var(--u)) 0;display:grid;grid-template-columns:1fr auto;gap:calc(9*var(--u)) calc(40*var(--u));max-width:calc(720*var(--u));font:700 calc(18*var(--u))/1.2 Poppins,sans-serif;color:#dfe6ee}
.statl .v{color:#fff;text-align:right;font-family:Pricedown,Impact,sans-serif;font-weight:400;font-size:calc(24*var(--u))}
.statl .sec{grid-column:1/3;font:400 calc(28*var(--u))/1 Pricedown,Impact,sans-serif;color:var(--sa-blue);margin-top:calc(10*var(--u))}
.optl{padding:calc(18*var(--u)) 0;display:flex;flex-direction:column;gap:calc(6*var(--u));max-width:calc(620*var(--u))}
.optl button,.opts button{appearance:none;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;gap:calc(30*var(--u));font-family:Pricedown,Impact,sans-serif;font-size:calc(34*var(--u));color:var(--sa-blue-dim);paint-order:stroke fill;-webkit-text-stroke:calc(2.5*var(--u)) #000;padding:2px 0;min-height:44px;align-items:center;text-align:left}
.optl button:hover,.optl button:focus-visible,.optl button.sel,.opts button:hover,.opts button:focus-visible,.opts button.sel{color:var(--sa-blue);outline:none}
.optl button em,.opts button em{font-style:normal;color:#fff}
.orow{display:grid;grid-template-columns:1fr minmax(120px,calc(240*var(--u))) calc(60*var(--u));gap:calc(16*var(--u));align-items:center;min-height:44px;font-family:Pricedown,Impact,sans-serif;font-size:calc(34*var(--u));color:var(--sa-blue-dim);paint-order:stroke fill;-webkit-text-stroke:calc(2.5*var(--u)) #000;outline:none}
.orow.sel{color:var(--sa-blue)}
.orow em{font-style:normal;color:#fff;text-align:right}
.orow input{-webkit-appearance:none;appearance:none;height:12px;background:#1b2530;border:2px solid #000;box-shadow:0 0 0 1px #4a5a6b;cursor:pointer;margin:0}
.orow input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:26px;background:var(--sa-blue);border:2px solid #000}
.orow input::-moz-range-thumb{width:16px;height:26px;background:var(--sa-blue);border:2px solid #000;border-radius:0}
.optl .ctl{margin-top:calc(16*var(--u));font:400 calc(14*var(--u))/1.8 Poppins,sans-serif;color:#9aa4b0}
.optl .ctl b{color:#dfe6ee}

/* stats: POG INVENTORY UPGRADE */
.stats{background:radial-gradient(ellipse at 70% 20%,#231a3a 0%,#120d1f 55%,#0b0814 100%);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
.stats.show{opacity:1}
.st-card{width:min(90vw,calc(640*var(--u)));display:flex;flex-direction:column}
.st-h{font-size:calc(64*var(--u));line-height:1;color:#f2e9cf}
.st-k{font:700 calc(15*var(--u))/1 Poppins,sans-serif;color:#b9a3e0;letter-spacing:.02em;margin:calc(14*var(--u)) 0 calc(22*var(--u))}
.st-row{margin-bottom:calc(20*var(--u))}
.st-row .top{display:flex;justify-content:space-between;font:400 calc(24*var(--u))/1 Pricedown,Impact,sans-serif;color:#f2e9cf;margin-bottom:calc(7*var(--u))}
.st-bar{height:calc(16*var(--u));border:calc(2*var(--u)) solid #cfc8db;background:#3a3448;position:relative}
.st-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#a777ef;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.st-f{font:400 calc(22*var(--u))/1 Pricedown,Impact,sans-serif;color:var(--sa-title);margin-top:calc(2*var(--u))}
.st-sub{margin-top:calc(46*var(--u));text-align:center;font:700 calc(23*var(--u))/1.3 Poppins,sans-serif;color:#fff}
.st-cont{margin-top:calc(22*var(--u));text-align:center;font:400 calc(13*var(--u))/1 Poppins,sans-serif;color:#8b82a0;animation:blinkslow 1.6s ease-in-out infinite}
@keyframes blinkslow{50%{opacity:.35}}

/* store (SA shop menu, doingwell) */
.store{background:rgba(5,3,10,.5);display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 26*var(--u)) calc(var(--safe-r) + 30*var(--u)) calc(var(--safe-b) + 26*var(--u)) calc(var(--safe-l) + 34*var(--u));opacity:0;transition:opacity .3s}
.store.show{opacity:1}
.sh{position:relative;display:flex;gap:calc(26*var(--u));align-items:stretch;max-width:100%;max-height:100%;width:min(100%,calc(1000*var(--u)));height:min(100%,calc(640*var(--u)))}
.sh-panel{width:calc(430*var(--u));min-width:250px;flex:0 0 auto;max-width:46%;background:rgba(0,0,0,.92);padding:calc(22*var(--u)) calc(24*var(--u));display:flex;flex-direction:column;gap:calc(11*var(--u));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#4a3a66 transparent}
.sh-logo{height:calc(40*var(--u));min-height:22px;width:auto;align-self:flex-start}
.sh-tag{font:700 max(calc(12*var(--u)),9px)/1 Poppins,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac)}
.sh-item{display:flex;justify-content:space-between;align-items:center;gap:calc(12*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));background:rgba(89,35,170,.55);box-shadow:inset 3px 0 0 var(--lilac)}
.sh-item .n{font:400 max(calc(26*var(--u)),17px)/1.05 Pricedown,Impact,sans-serif;color:#fff;paint-order:stroke fill;-webkit-text-stroke:1.5px #000}
.sh-item .cnt{font:700 max(calc(12*var(--u)),10px)/1 Poppins,sans-serif;color:var(--gold);letter-spacing:.08em;flex:0 0 auto}
.sh-desc{font:400 max(calc(14*var(--u)),12px)/1.5 Poppins,sans-serif;color:#ddd}
.sh-ing{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(6*var(--u))}
.sh-ing div{background:var(--cream);color:#141414;text-align:center;padding:calc(8*var(--u)) calc(4*var(--u))}
.sh-ing b{display:block;font:700 max(calc(17*var(--u)),12px)/1 Poppins,sans-serif;color:var(--purple)}
.sh-ing span{font:400 max(calc(10.5*var(--u)),9px)/1.2 Poppins,sans-serif}
.sh-plink{align-self:flex-start;font:700 max(calc(13*var(--u)),12px)/1 Poppins,sans-serif;color:var(--lilac);text-decoration:none;border-bottom:2px solid rgba(201,168,255,.4);padding:8px 0 4px;min-height:32px;display:inline-flex;align-items:flex-end}
.sh-plink:hover,.sh-plink:focus-visible{color:#fff;border-color:#fff;outline:none}
.sh-clerk{font:italic 400 max(calc(14*var(--u)),11.5px)/1.45 Poppins,sans-serif;color:#bfb6d2}
.sh-btns{display:flex;flex-direction:column;gap:calc(8*var(--u));margin-top:auto;padding-top:calc(4*var(--u))}
.sh-btns .btn{width:100%;font-size:max(calc(16*var(--u)),13px);min-height:44px}
.sh-link{background:var(--cream);color:var(--purple)}
.sh-x{position:absolute;right:calc(-6*var(--u));top:calc(-6*var(--u));width:44px;height:44px;border-radius:0;background:#000;color:#fff;border:2px solid #fff;font:700 18px/1 Poppins,sans-serif;cursor:pointer;display:none;z-index:3}
.sh-view{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:calc(10*var(--u));position:relative}
.sh-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.sh-stage::before{content:'';position:absolute;left:50%;top:52%;width:min(92%,90vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(201,168,255,.32),rgba(89,35,170,0) 68%);pointer-events:none}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.sh-canvas:active{cursor:grabbing}
.sh-stage.is-card .sh-canvas{display:none}
.sh-stage.is-box .sh-card{display:none}
.sh-card{position:relative;height:min(82%,calc(380*var(--u)));aspect-ratio:1;perspective:900px;touch-action:none;cursor:grab}
.sh-card-in{width:100%;height:100%;padding:calc(10*var(--u));background:var(--cream);box-shadow:0 0 0 3px #000,0 0 0 6px var(--purple),0 calc(22*var(--u)) calc(34*var(--u)) rgba(0,0,0,.6);transform-style:preserve-3d;animation:cardsway 5.5s ease-in-out infinite;transform:rotateY(var(--drag,0deg))}
.sh-card-in img{width:100%;height:100%;object-fit:cover;display:block}
.sh-card.in .sh-card-in{animation:cardin .45s cubic-bezier(.2,1.3,.4,1),cardsway 5.5s ease-in-out .45s infinite}
@keyframes cardsway{0%,100%{transform:rotateY(calc(var(--drag,0deg) - 16deg)) rotateX(4deg) rotateZ(-1deg)}50%{transform:rotateY(calc(var(--drag,0deg) + 16deg)) rotateX(-3deg) rotateZ(1deg)}}
@keyframes cardin{from{transform:rotateY(-80deg) scale(.8);opacity:0}}
.sh-arr{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);width:48px;height:64px;background:rgba(0,0,0,.6);color:#fff;border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);font:400 40px/1 Pricedown,Impact,sans-serif;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 0 6px}
.sh-arr.l{left:0}.sh-arr.r{right:0}
.sh-arr:hover,.sh-arr:focus-visible{background:var(--purple);outline:none}
.sh-thumbs{display:flex;gap:calc(8*var(--u));justify-content:flex-start;flex:0 0 auto;overflow-x:auto;touch-action:pan-x;padding:4px 2px;scrollbar-width:none}
.sh-thumbs button{flex:0 0 auto;width:clamp(42px,calc(62*var(--u)),62px);aspect-ratio:1;padding:0;border:0;background:var(--cream);box-shadow:0 0 0 2px #000;opacity:.55;cursor:pointer;transition:opacity .15s,transform .15s,box-shadow .15s}
.sh-thumbs button:first-child{margin-left:auto}.sh-thumbs button:last-child{margin-right:auto}
.sh-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.sh-thumbs button.sel{opacity:1;box-shadow:0 0 0 2px #000,0 0 0 5px var(--gold);transform:translateY(-3px)}
.sh-thumbs button:hover{opacity:.9}
.sh-keys{font:400 calc(12*var(--u))/1.4 Poppins,sans-serif;color:#8d8d8d}

/* end card */
.end{background:var(--cream);display:flex;align-items:center;justify-content:center;color:#141414;opacity:0;transition:opacity .9s}
.end.show{opacity:1}
.end::before{content:'';position:absolute;left:50%;top:44%;width:min(90vw,820px);aspect-ratio:1.5;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(201,168,255,.55) 0%,rgba(201,168,255,0) 62%);pointer-events:none}
.end-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(14*var(--u));padding:24px}
.end-logo{width:min(78vw,calc(560*var(--u)));height:auto}
.end-tag{font-family:Pricedown,Impact,sans-serif;font-size:min(7.4vw,calc(44*var(--u)));color:var(--purple);letter-spacing:.02em}
.end-url{font:700 calc(26*var(--u))/1 Poppins,sans-serif;margin-top:calc(18*var(--u))}
.end-handle{font:400 calc(16*var(--u))/1 Poppins,sans-serif;color:#77707f}
.end-btns{display:flex;gap:calc(12*var(--u));flex-wrap:wrap;justify-content:center;margin-top:calc(24*var(--u))}
.end .fine{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 14*var(--u));text-align:center;color:#8f8899}

/* ---------- touch ---------- */
.touch{position:absolute;inset:0;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;--tb:clamp(56px,calc(13.5vh + 4px),66px)}
.t-look{position:absolute;left:40%;right:0;top:0;bottom:0;pointer-events:auto;touch-action:none}
.t-stick{position:absolute;left:calc(var(--safe-l) + 22px);bottom:calc(var(--safe-b) + 20px);width:clamp(112px,32vh,136px);aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 0 0 2px rgba(0,0,0,.4);pointer-events:auto;touch-action:none;opacity:.62}
.t-stick:active{opacity:.85}
.t-knob{position:absolute;left:50%;top:50%;width:44%;height:44%;transform-origin:center;margin:-22% 0 0 -22%;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 0 0 3px #000}
.touch button{appearance:none;border:0;padding:0;margin:0;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.tb{position:absolute;width:var(--tb);height:var(--tb);border-radius:50%;background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 3px rgba(255,255,255,.78),0 0 0 2px rgba(0,0,0,.45);font:400 15px/1 Pricedown,Impact,sans-serif;letter-spacing:.03em;paint-order:stroke fill;-webkit-text-stroke:2px #000;opacity:.58;pointer-events:auto;display:flex;align-items:center;justify-content:center;text-align:center}
.tb svg{width:46%;height:46%}
.tb.on,.pedal.on,.t-enter.on{opacity:.95;background:rgba(89,35,170,.78)}
/* on foot: SA mobile cluster, bottom-right (G = gap) */
.t-foot,.t-car{position:absolute;right:calc(var(--safe-r) + 14px);bottom:calc(var(--safe-b) + 14px);width:calc(var(--tb) * 3 + 20px);height:calc(var(--tb) * 2 + 10px);pointer-events:none}
.b-punch{right:0;bottom:0;width:calc(var(--tb) * 1.18);height:calc(var(--tb) * 1.18);font-size:17px}
.b-kick{right:calc(var(--tb) * 1.18 + 10px);bottom:0}
.b-block{right:calc(var(--tb) * 2.18 + 20px);bottom:0}
.b-jump{right:calc(var(--tb) * .1);bottom:calc(var(--tb) * 1.18 + 10px)}
.b-sprint{right:calc(var(--tb) * 1.18 + 10px);bottom:calc(var(--tb) + 10px)}
/* in car: pedals bottom-right, handbrake / horn above */
.t-car{height:calc(var(--tb) * 3 + 20px)}
.pedal{position:absolute;bottom:0;width:calc(var(--tb) * 1.15);border-radius:14px;background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 3px rgba(255,255,255,.78),0 0 0 2px rgba(0,0,0,.45);opacity:.58;pointer-events:auto;font:400 16px/1 Pricedown,Impact,sans-serif;letter-spacing:.03em;paint-order:stroke fill;-webkit-text-stroke:2px #000;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 4px,transparent 4px 13px)}
.p-gas{right:0;height:calc(var(--tb) * 2)}
.p-brake{right:calc(var(--tb) * 1.15 + 12px);height:calc(var(--tb) * 1.55)}
.p-gas.on{background-color:rgba(64,150,70,.8)}
.p-brake.on{background-color:rgba(190,40,40,.8)}
.b-hb{right:calc(var(--tb) * 1.15 + 12px + var(--tb) * .075);bottom:calc(var(--tb) * 1.55 + 10px);font-size:13px;line-height:.95}
.b-horn{right:calc(var(--tb) * 2.3 + 26px);bottom:0;width:calc(var(--tb) * .86);height:calc(var(--tb) * .86)}
.touch:not(.car) .t-car,.touch.car .t-foot{display:none}
/* context ▶ button: enter car / interact on foot, exit in a car */
.t-enter{position:absolute;right:calc(var(--safe-r) + 14px + var(--tb) * .08);bottom:calc(var(--safe-b) + 14px + var(--tb) * 2.3 + 22px);width:var(--tb);height:var(--tb);border-radius:50%;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 3px #e8c66b,0 0 0 2px rgba(0,0,0,.5);color:#e8c66b;opacity:.75;pointer-events:auto;display:none;align-items:center;justify-content:center}
.t-enter svg{width:48%;height:48%;margin-left:8%}
.t-enter.show{display:flex;animation:tenter .35s ease}
.touch.car .t-enter{bottom:calc(var(--safe-b) + 14px + var(--tb) * 2 + 12px)}
.touch.car .t-enter svg{transform:scaleX(-1);margin:0 8% 0 0}
@keyframes tenter{from{transform:scale(.6);opacity:0}}
.modal .touch{display:none}
.t-radio{position:absolute;left:calc(var(--safe-l) + 200*var(--u) + 66px);top:calc(var(--safe-t) + 14px);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);padding:11px;pointer-events:auto;display:none;opacity:.8}
.t-radio svg{width:100%;height:100%;display:block}
.in-car .t-radio{display:block}
.t-pause{position:absolute;left:calc(var(--safe-l) + 200*var(--u) + 12px);top:calc(var(--safe-t) + 14px);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);font:700 16px/1 Poppins,sans-serif;pointer-events:auto;opacity:.8}
.is-touch .radar{left:calc(var(--safe-l) + 16*var(--u) + 6px);top:calc(var(--safe-t) + 16*var(--u) + 6px);bottom:auto}
.is-touch .tl{left:calc(var(--safe-l) + 200*var(--u) + 70px)}
.is-touch.in-car .tl{left:calc(var(--safe-l) + 200*var(--u) + 126px)}
.dead .touch{display:none}
.cine .t-stick,.cine .t-foot,.cine .t-car,.cine .t-pause,.cine .t-radio,.cine .t-enter{display:none!important}
.cine .t-look{left:0}
.is-touch .helpbox,.is-touch .promptbox{max-width:min(calc(330*var(--u)),calc(100vw - 200*var(--u) - 200px))}
.is-touch .hud-loc{bottom:calc(var(--safe-b) + 170px)}
.is-touch .sub{bottom:calc(var(--safe-b) + 180px)}
.is-touch.lbon .tl{top:calc(12.5vh + 12px)}
.lbon .sub{bottom:calc(var(--safe-b) + 13vh)}
.is-touch .radio-box{top:calc(var(--safe-t) + 26*var(--u) + 92px)}

/* ---------- mission list (main menu + pause tab) ---------- */
.mlist{display:flex;flex-direction:column;height:100%;min-height:0;gap:calc(10*var(--u))}
.ml-head{display:flex;align-items:center;gap:calc(18*var(--u));flex-wrap:wrap;padding-top:calc(10*var(--u))}
.ml-title{font-family:Beckett,serif;font-size:clamp(28px,calc(60*var(--u)),60px);line-height:1;color:var(--sa-blue);paint-order:stroke fill;-webkit-text-stroke:calc(3*var(--u)) #000}
.ml-back{appearance:none;background:none;border:0;cursor:pointer;font:400 clamp(20px,calc(32*var(--u)),34px)/1 Pricedown,Impact,sans-serif;color:var(--sa-blue);paint-order:stroke fill;-webkit-text-stroke:2px #000;min-height:44px;padding:0 6px 0 0}
.ml-prog{margin-left:auto;display:flex;align-items:center;gap:12px;font:700 clamp(11px,calc(15*var(--u)),15px)/1 Poppins,sans-serif;color:#c9c2d4;text-transform:uppercase;letter-spacing:.06em}
.ml-prog b{color:var(--gold)}
.ml-prog i{display:block;width:clamp(70px,calc(160*var(--u)),160px);height:10px;background:#1b1622;box-shadow:0 0 0 2px #000,0 0 0 3px #3b3446}
.ml-prog i b{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--gold))}
.ml-rows{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px;padding:2px 4px 18px 2px;scrollbar-width:thin;scrollbar-color:#4a3a66 transparent}
.ml-row{display:grid;grid-template-columns:clamp(34px,calc(56*var(--u)),56px) 1fr auto auto;align-items:center;gap:clamp(8px,calc(16*var(--u)),16px);padding:clamp(6px,calc(10*var(--u)),10px) clamp(8px,calc(16*var(--u)),16px);background:rgba(12,10,18,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);cursor:pointer;min-height:56px;transition:background .12s;outline:none;flex:0 0 auto}
.ml-row.sel{background:rgba(89,35,170,.55);box-shadow:inset 0 0 0 2px var(--lilac)}
.ml-row.cur .ml-n{color:var(--gold)}
.ml-row.cur::after{content:'NOW';grid-column:4;grid-row:1;align-self:start;justify-self:end;margin:-4px -6px 0 0;font:700 9px/1 Poppins,sans-serif;letter-spacing:.12em;color:#141414;background:var(--gold);padding:2px 5px;display:none}
.ml-n{font-size:clamp(26px,calc(46*var(--u)),46px);line-height:1;color:var(--sa-blue-dim);text-align:center;paint-order:stroke fill;-webkit-text-stroke:2px #000}
.ml-row.sel .ml-n{color:var(--sa-blue)}
.ml-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ml-main b{font-size:clamp(19px,calc(32*var(--u)),32px);line-height:1;color:#fff;paint-order:stroke fill;-webkit-text-stroke:2px #000;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-main small{font:700 clamp(10px,calc(13*var(--u)),13px)/1.2 Poppins,sans-serif;color:var(--gold);text-transform:uppercase;letter-spacing:.07em}
.ml-main em{font:400 clamp(11px,calc(14*var(--u)),14px)/1.3 Poppins,sans-serif;font-style:normal;color:#b9b2c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tick{width:clamp(22px,calc(30*var(--u)),30px);height:clamp(22px,calc(30*var(--u)),30px);color:var(--gold);filter:drop-shadow(0 2px 0 #000)}
.ml-tick svg{width:100%;height:100%;display:block}
.ml-go{appearance:none;border:0;cursor:pointer;min-width:clamp(74px,calc(110*var(--u)),110px);min-height:44px;padding:0 12px;background:#1b1622;box-shadow:inset 0 0 0 2px #4a3a66;color:var(--sa-blue);font-size:clamp(17px,calc(24*var(--u)),24px);paint-order:stroke fill;-webkit-text-stroke:1.5px #000}
.ml-row.sel .ml-go,.ml-go:hover{background:var(--gold);color:#141414;-webkit-text-stroke:0;box-shadow:none}
.ml-row.done:not(.sel) .ml-go{color:#8d86a0}
.menu-ml{position:absolute;inset:0;display:none;padding:calc(var(--safe-t) + 18px) calc(var(--safe-r) + 6vw) calc(var(--safe-b) + 34px) calc(var(--safe-l) + 6vw);background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.92) 45%);z-index:2}
.menu.mlmode .menu-ml{display:block}
.menu.mlmode .menu-col{visibility:hidden}
.p-page .mlist{padding:0 0 4px}
.p-page{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.p-page:has(.mlist){overflow:hidden}
/* ---------- rotate / add-to-home-screen ---------- */
.rotate{position:absolute;inset:0;z-index:40;background:rgba(5,4,8,.94);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;pointer-events:auto;color:var(--gold)}
.rotate.show{display:flex}
.rotate svg{width:84px;height:84px;animation:rot 2.2s ease-in-out infinite}
.rotate b{font-size:34px;color:var(--sa-blue);font-weight:400}
.rotate span{font:400 14px/1.4 Poppins,sans-serif;color:#bdb6c8}
@keyframes rot{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
.a2hs{position:absolute;left:calc(var(--safe-l) + 14px);bottom:calc(var(--safe-b) + 30px);transform:translateY(calc(100% + 40px));width:min(330px,calc(100vw - 28px));font-size:12px!important;z-index:5;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);background:rgba(10,8,14,.94);box-shadow:0 0 0 2px var(--purple);padding:8px 8px 8px 14px;font:400 13px/1.35 Poppins,sans-serif;color:#eee;transition:transform .4s ease;pointer-events:auto}
.a2hs.show{transform:none}
@media (orientation:portrait){.ml-main b{white-space:normal}.a2hs{bottom:auto;top:calc(var(--safe-t) + 12px);transform:translateY(-140%)}}
.a2hs b{color:var(--gold)}
.a2hs svg{width:15px;height:15px;vertical-align:-2px;color:var(--lilac)}
.a2hs button{appearance:none;border:0;background:none;color:#fff;font:700 22px/1 Poppins,sans-serif;min-width:44px;min-height:44px;cursor:pointer}

/* ---------- portrait / phones ---------- */
@media (orientation:portrait){
  .hud-tr{right:calc(var(--safe-r) + 18*var(--u))}
  .hud-loc{right:calc(var(--safe-r) + 24*var(--u))}
  .radar{left:calc(var(--safe-l) + 24*var(--u))}
  .sub{left:5%;right:5%}
  .radio-box{top:calc(var(--safe-t) + 175*var(--u))}
  .is-touch .radio-box{top:calc(var(--safe-t) + 200*var(--u) + 12px)}
  .radio{font-size:calc(34*var(--u))}
  .fight{top:30%}
  .is-touch .sub{bottom:calc(var(--safe-b) + 215px)}
  .is-touch .hud-loc{bottom:calc(var(--safe-b) + 158px)}
  .menu-art{right:0;background-position:35% top}
  .menu-art::after{background:linear-gradient(0deg,#000 0%,#000 38%,rgba(0,0,0,0) 70%)}
  .tl{left:calc(var(--safe-l) + 16*var(--u))}
  .helpbox,.promptbox{max-width:calc(100vw - 230*var(--u) - 40px)}
  .is-touch .tl{left:calc(var(--safe-l) + 14px);top:calc(var(--safe-t) + 200*var(--u) + 24px)}
  .is-touch .helpbox,.is-touch .promptbox{max-width:calc(100vw - 28px)}
  .menu-col{width:100%;padding:calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 50px);justify-content:flex-end;align-items:center;text-align:center;background:linear-gradient(0deg,#000 45%,rgba(0,0,0,0) 75%)}
  .menu-sean{left:50%;transform:translateX(-50%);bottom:auto;top:calc(var(--safe-t) + 2vh);height:48vh}
  .menu.ready .menu-sean{transform:translateX(-50%)}
  .logo{align-items:center}
  .menu-items{align-items:center;margin-top:12px}
  .menu-hint{display:none}
  .ld-frame{width:100vw;height:100vh;aspect-ratio:auto}
  .ld-logo{left:50%;transform:translateX(-50%);top:calc(var(--safe-t) + 34px);text-align:center}
  .ld-logo .logo{align-items:center}
  .ld-tip{left:24px;right:24px;max-width:none;bottom:calc(var(--safe-b) + 90px);text-align:center}
  .ld-bar{left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--safe-b) + 50px);width:70vw}
  .p-head{flex-direction:column;align-items:flex-start;padding-left:16px;padding-right:16px}
  .p-tabs{justify-content:flex-start;gap:14px}
  .p-body{margin-left:16px;margin-right:16px}
  .map-wrap{right:0;bottom:calc(130*var(--u) + 80px)}
  .legend{top:auto;bottom:0;left:0;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
  .legend h4,.legend .keys{grid-column:1/3}
  .sh{flex-direction:column-reverse;align-items:stretch;width:100%;height:100%}
  .store{justify-content:center;align-items:flex-end;padding-left:12px;padding-right:12px}
  .sh-panel{width:100%;max-width:none;min-width:0;flex:1 1 auto}
  .sh-view{flex:0 0 auto;height:34vh}
  .sh-x{display:block}
}
@media (max-height:500px) and (orientation:landscape){
  .menu-col{padding-top:calc(var(--safe-t) + 10px);padding-bottom:28px;gap:4px;justify-content:center}
  .logo .l2{font-size:calc(92*var(--u))}
  .menu-items{margin-top:6px;gap:0}
  .menu-items li{min-height:36px}
  .menu-hint{display:none}
  .store{padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 10px)}
  .sh{gap:10px;height:100%}
  .sh-panel{width:min(46%,360px);padding:12px 14px;gap:8px}
  .sh-x{display:block;right:0;top:0}
  .sh-arr{width:40px;height:52px;font-size:32px}
  .sh-keys{display:none}
  .menu-sean{height:96vh}
  .is-touch .hud-loc{bottom:calc(var(--safe-b) + 146px);right:calc(var(--safe-r) + 20px)}
  .is-touch .sub{bottom:calc(var(--safe-b) + 14px);left:calc(var(--safe-l) + 170px);right:calc(var(--safe-r) + 250px)}
}
/* ---------- phones in landscape (≤ 500 px tall): readable text, HUD clear of the touch controls ---------- */
@media (max-height:500px) and (orientation:landscape){
  .helpbox{font-size:12px;padding:9px 12px;max-width:300px;min-width:0}
  .helpbox img{height:34px}
  .promptbox{font-size:12.5px;padding:8px 12px;max-width:300px}
  .sub{font-size:15px;-webkit-text-stroke:2.6px #000}
  .ttl .s{font-size:13px;-webkit-text-stroke:2.4px #000}
  .ttl .t{font-size:max(calc(58*var(--u)),30px)}
  .hud-loc{font-size:max(calc(46*var(--u)),26px)}
  .hud-veh{font-size:max(calc(34*var(--u)),19px)}
  .is-touch .hud-veh{bottom:auto;top:calc(var(--safe-t) + 178*var(--u))}
  .is-touch .hud-loc{bottom:auto;top:calc(var(--safe-t) + 178*var(--u) + 24px);right:calc(var(--safe-r) + 18px)}
  .is-touch .hud-veh{right:calc(var(--safe-r) + 18px)}
  .p-foot{display:none}
  .p-head{padding-top:calc(var(--safe-t) + 8px);padding-bottom:4px}
  .p-title{font-size:30px}
  .p-tabs{gap:12px}
  .p-tabs button{font-size:20px;min-height:40px}
  .p-body{margin-bottom:calc(var(--safe-b) + 8px)}
  .optl button,.orow{font-size:20px;min-height:40px}
  .orow{grid-template-columns:1fr 160px 44px}
  .optl .ctl{display:none}
  .ml-row{min-height:52px;padding:5px 10px}
  .menu-ml{padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 22px) calc(var(--safe-l) + 16px)}
  .ml-title{font-size:30px}
  .skiphint{bottom:calc(var(--safe-b) + 10px)}
  .radio{font-size:21px}
  .r-ic{width:26px;height:26px}.r-ic.sel{width:38px;height:38px}.radio-icons{height:40px}
}
.is-touch .p-foot{display:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}