/* BOUNTY LANE M2 UI kit: title, contract board, briefing, results, garage, settings, pause, WRENCH radio card, in-run widgets.
   One display font (Outfit, embedded), palette: bg #14181F, cream #FFF1D6, amber #FFB347, orange #FF6A1F, teal #2EE6D6, gold #FFE14D.
   Scale: --k set by meta.js (landscape min(w/960,h/540), portrait w/430). Every text >= 14 px, every button >= 48 px. */
:root{--bg:#14181f;--bg2:#1d242d;--cream:#fff1d6;--amber:#ffb347;--orange:#ff6a1f;--teal:#2ee6d6;--gold:#ffe14d;--green:#58e07a;--red:#ff3b30;--k:1}
html,body{font-family:Outfit,"Arial Black","Trebuchet MS",Impact,system-ui,sans-serif}
#bgArt{position:fixed;inset:0;z-index:0;background:#2a1a30 center/cover no-repeat;transition:opacity .35s;opacity:0}
#bgArt.on{opacity:1}
#bgArt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,31,.0) 55%,rgba(20,24,31,.55) 100%)}
#bgArt.dim::before{content:"";position:absolute;inset:0;background:rgba(14,18,26,.55);z-index:1}
canvas#menuCanvas{position:fixed;left:0;top:0;z-index:2;display:none;pointer-events:none}
#ui{position:fixed;inset:0;z-index:20;pointer-events:none;color:var(--cream);font-weight:700;letter-spacing:.02em}
#ui *{box-sizing:border-box}
.scr{position:absolute;inset:0;display:none;opacity:0;transition:opacity .24s ease-out;pointer-events:none}
.scr.show{display:block}
.scr.on{opacity:1}
.scr.on .hit,.scr.on button{pointer-events:auto}
button{font-family:inherit;font-weight:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;min-width:48px;padding:0 calc(var(--k)*24px);border-radius:999px;border:2px solid rgba(255,241,214,.85);background:rgba(20,24,31,.9);color:var(--cream);
 font-weight:900;font-size:max(16px,calc(var(--k)*19px));letter-spacing:.05em;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,.45);transition:transform .08s,box-shadow .08s,filter .12s;touch-action:manipulation}
.btn:hover{filter:brightness(1.12)}
.btn:active,.btn.press{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.btn.p{background:linear-gradient(180deg,#ffc766,#ffb347 55%,#f19a2c);border-color:#fff1d6;color:#14181f;box-shadow:0 4px 0 #a8641a,0 8px 18px rgba(255,150,40,.35)}
.btn.p:active{box-shadow:0 1px 0 #a8641a}
.btn.big{min-height:calc(var(--k)*72px);padding:0 calc(var(--k)*44px);font-size:max(22px,calc(var(--k)*32px));letter-spacing:.07em}
.btn.sm{min-height:48px;font-size:max(14px,calc(var(--k)*16px));padding:0 calc(var(--k)*16px)}
.btn[disabled],.btn.dis{opacity:.45;filter:grayscale(.5);pointer-events:none}
.btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.btn.ico{padding:0;width:max(48px,calc(var(--k)*52px));height:max(48px,calc(var(--k)*52px));border-radius:16px}
.btn.ico svg{width:55%;height:55%}
.btn.off .x{display:block}.btn .x{display:none;stroke:var(--red)}
.panel{position:relative;background:rgba(20,24,31,.9);border:2px solid rgba(255,179,71,.6);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,241,214,.12),0 10px 30px rgba(0,0,0,.35)}
.lbl{font-size:max(14px,calc(var(--k)*14px));letter-spacing:.12em;color:#d9c9ac;text-transform:uppercase}
.cashchip{display:inline-flex;align-items:center;gap:.4em;min-height:48px;padding:0 calc(var(--k)*16px);border-radius:999px;background:rgba(20,24,31,.88);border:2px solid rgba(255,225,77,.7);color:var(--gold);font-weight:900;font-size:max(18px,calc(var(--k)*24px))}
.cashchip svg{width:1em;height:1em;fill:none;stroke:var(--gold);stroke-width:2.4}
.star{width:calc(var(--k)*40px);height:calc(var(--k)*40px);min-width:28px;min-height:28px;flex:none}
.star path{fill:rgba(20,24,31,.8);stroke:#6d6a63;stroke-width:1.6;stroke-linejoin:round}
.star.on path{fill:var(--gold);stroke:#a8641a;filter:drop-shadow(0 0 6px rgba(255,200,60,.6))}
.star.sp{animation:starpop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.slide-in{animation:slidein .3s ease-out both}
@keyframes slidein{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}

/* ---------- title */
#scrTitle .logo{position:absolute;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
#scrTitle .logo svg{width:100%;height:auto;display:block;overflow:visible}
#scrTitle .menu{position:absolute;display:flex;flex-direction:column;gap:calc(var(--k)*14px);align-items:stretch}
#scrTitle .row2{display:flex;gap:calc(var(--k)*12px)}
#scrTitle .row2 .btn{flex:1}
#scrTitle .hintline{font-size:max(14px,calc(var(--k)*15px));color:#fff1d6;text-align:center;text-shadow:0 2px 0 rgba(20,24,31,.9),0 0 12px rgba(20,24,31,.7);animation:blinky 1.6s ease-in-out infinite}
@keyframes blinky{50%{opacity:.45}}
#scrTitle .tr{position:absolute;top:calc(var(--k)*14px);right:calc(var(--k)*14px);display:flex;gap:calc(var(--k)*10px)}
#scrTitle .tl{position:absolute;top:calc(var(--k)*14px);left:calc(var(--k)*14px);display:flex;gap:10px}
#scrTitle .tag{position:absolute;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.22em;color:var(--cream);text-shadow:0 2px 0 rgba(20,24,31,.9);text-transform:uppercase}
@media (orientation:landscape){
 #scrTitle .logo{left:calc(var(--k)*34px);top:calc(var(--k)*28px);width:min(46vw,calc(var(--k)*470px))}
 #scrTitle .tag{left:calc(var(--k)*40px);top:calc(var(--k)*28px + min(46vw,calc(var(--k)*470px))*.49 + 4px)}
 #scrTitle .menu{left:calc(var(--k)*40px);bottom:calc(var(--k)*58px);width:min(40vw,calc(var(--k)*400px))}
 #scrTitle .tw{right:calc(var(--k)*16px);top:calc(var(--k)*84px);max-width:min(36vw,calc(var(--k)*400px))}
}
@media (orientation:portrait){
 #scrTitle .logo{left:50%;transform:translateX(-52%);top:calc(var(--k)*74px);width:min(80vw,calc(var(--k)*400px))}
 #scrTitle .tag{left:0;right:0;text-align:center;letter-spacing:.1em;top:calc(var(--k)*74px + min(80vw,calc(var(--k)*400px))*.49 + 4px)}
 #scrTitle .menu{left:50%;transform:translateX(-50%);bottom:calc(var(--k)*34px + env(safe-area-inset-bottom));width:min(86vw,calc(var(--k)*400px))}
 #scrTitle .tw{left:calc(var(--k)*10px);right:calc(var(--k)*10px);top:calc(var(--k)*262px);max-width:none}
}

/* ---------- WRENCH radio card (title, briefing, results, in-run) */
.wr{position:absolute;display:flex;align-items:center;gap:calc(var(--k)*12px);padding:calc(var(--k)*8px) calc(var(--k)*16px) calc(var(--k)*8px) calc(var(--k)*8px);min-height:calc(var(--k)*84px);max-width:min(92vw,calc(var(--k)*470px));
 background:linear-gradient(180deg,rgba(32,42,52,.96),rgba(20,24,31,.96));border:2px solid rgba(255,179,71,.75);border-radius:calc(var(--k)*44px) 16px 16px calc(var(--k)*44px);box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,241,214,.14);pointer-events:auto}
.wr .face{position:relative;flex:none;width:calc(var(--k)*68px);height:calc(var(--k)*68px);min-width:56px;min-height:56px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2f8a8f,#14515c 70%);border:3px solid var(--orange);box-shadow:0 0 0 2px rgba(255,241,214,.85),0 0 14px rgba(255,106,31,.4);overflow:hidden}
.wr .face img{position:absolute;left:50%;top:52%;width:132%;height:132%;transform:translate(-50%,-50%);object-fit:contain}
.wr .face.radio img{width:118%;height:118%;top:50%}
.wr .face.alarm{border-color:var(--red);box-shadow:0 0 0 2px rgba(255,241,214,.85),0 0 16px rgba(255,59,48,.65);animation:alarmpulse .5s infinite alternate}
@keyframes alarmpulse{to{box-shadow:0 0 0 2px rgba(255,241,214,.85),0 0 24px rgba(255,59,48,.95)}}
.wr .face.payday{border-color:var(--green);box-shadow:0 0 0 2px rgba(255,241,214,.85),0 0 16px rgba(88,224,122,.6)}
.wr .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.wr .nm{font-size:max(14px,calc(var(--k)*13px));letter-spacing:.18em;color:var(--amber);display:flex;gap:8px;align-items:center}
.wr .nm i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blinky 1s infinite}
.wr .ln{font-size:max(15px,calc(var(--k)*18px));line-height:1.22;color:var(--cream);font-weight:700;letter-spacing:.01em;min-height:2.44em}
.wr .skip{position:absolute;right:10px;top:4px;font-size:max(14px,calc(var(--k)*12px));color:#d9c9ac;opacity:.8}
.wr.in{animation:wrin .28s ease-out both}
@keyframes wrin{0%{opacity:0;transform:translateY(-14px) scale(.96)}100%{opacity:1;transform:none}}

/* ---------- contract board + briefing */
.head{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:calc(var(--k)*12px);padding:calc(var(--k)*12px) calc(var(--k)*16px)}
.head h2{margin:0;font-weight:900;font-size:max(22px,calc(var(--k)*34px));letter-spacing:.06em;color:var(--cream);text-shadow:0 3px 0 rgba(20,24,31,.9);flex:1;text-transform:uppercase}
.board{position:absolute;left:calc(var(--k)*16px);right:calc(var(--k)*16px);top:calc(var(--k)*84px);bottom:calc(var(--k)*20px + env(safe-area-inset-bottom));display:flex;gap:calc(var(--k)*16px);align-items:stretch;justify-content:center}
.ccard{position:relative;flex:1;max-width:calc(var(--k)*330px);display:flex;flex-direction:column;gap:calc(var(--k)*8px);padding:calc(var(--k)*14px);cursor:pointer;transition:transform .12s,border-color .12s;pointer-events:auto}
.ccard:hover{transform:translateY(-3px)}
.ccard.next{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,179,71,.35),0 12px 30px rgba(0,0,0,.45),0 0 24px rgba(255,179,71,.25)}
.ccard .no{font-size:max(14px,calc(var(--k)*15px));letter-spacing:.2em;color:var(--amber)}
.ccard .nm{font-size:max(20px,calc(var(--k)*25px));font-weight:900;line-height:1.05;text-transform:uppercase;min-height:2.1em}
.ccard .sb{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;letter-spacing:.08em;white-space:nowrap}
.ccard .mug{height:calc(var(--k)*112px);display:flex;align-items:center;justify-content:center}
.ccard .mug img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.ccard .gl{display:flex;flex-direction:column;gap:5px;font-size:max(14px,calc(var(--k)*15px));color:var(--cream)}
.ccard .gl div{display:flex;gap:8px;align-items:center}
.ccard .gl svg{width:18px;height:18px;flex:none}
.ccard .stars{display:flex;gap:4px;margin-top:auto}
.ccard .bn{font-size:max(16px,calc(var(--k)*20px));color:var(--gold);font-weight:900}
.ccard .lock{position:absolute;inset:0;border-radius:12px;background:rgba(14,18,26,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:12px;font-size:max(15px,calc(var(--k)*17px));color:#d9c9ac}
.ccard .lock svg{width:calc(var(--k)*44px);height:calc(var(--k)*44px);min-width:30px;fill:none;stroke:#d9c9ac;stroke-width:2.2}
@media (orientation:portrait){
 .board{flex-direction:column;overflow-y:auto;justify-content:flex-start;top:calc(var(--k)*76px);gap:10px;pointer-events:auto}
 .ccard{max-width:none;flex:none;display:grid;grid-template-columns:calc(var(--k)*92px) 1fr;grid-template-areas:"mug nm" "mug bn" "mug gl" "stars stars";column-gap:12px;row-gap:4px;padding:12px}
 .ccard .mug{grid-area:mug;height:auto;align-self:start}.ccard .nm{grid-area:nm;min-height:0}.ccard .no,.ccard .sb{display:none}.ccard .gl{grid-area:gl}.ccard .stars{grid-area:stars;margin:0}
 .ccard .bn{grid-area:bn}
}
@media (orientation:landscape) and (max-height:520px){
 .ccard .mug{height:calc(var(--k)*100px)}.ccard .gl{gap:3px}.board{top:calc(var(--k)*70px)}
}
.brief{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,calc(var(--k)*720px));max-height:92vh;overflow:auto;padding:calc(var(--k)*18px);display:grid;grid-template-columns:calc(var(--k)*190px) 1fr;gap:calc(var(--k)*16px);pointer-events:auto}
.brief .poster{display:flex;flex-direction:column;align-items:center;gap:6px}
.brief .poster img{width:100%;max-height:calc(var(--k)*250px);object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.brief h3{margin:0;font-size:max(22px,calc(var(--k)*34px));font-weight:900;text-transform:uppercase;line-height:1.05}
.brief .goals{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.brief .goals div{display:flex;align-items:center;gap:10px;font-size:max(15px,calc(var(--k)*18px))}
.brief .goals .star{width:26px;height:26px;min-width:0;min-height:0}
.brief .acts{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.brief .wr{position:relative;max-width:none;margin-top:6px}
@media (orientation:portrait){.brief{grid-template-columns:1fr}.brief .poster img{max-height:calc(var(--k)*150px)}}
@media (orientation:landscape) and (max-height:520px){.brief{grid-template-columns:calc(var(--k)*120px) 1fr;padding:12px}.brief .poster img{max-height:calc(var(--k)*160px)}.brief .wr{min-height:60px}}

/* ---------- results */
.res{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,calc(var(--k)*760px));max-height:94vh;overflow:auto;padding:calc(var(--k)*18px);display:flex;flex-direction:column;gap:calc(var(--k)*10px);pointer-events:auto}
.res h2{margin:0;text-align:center;font-weight:900;font-size:max(26px,calc(var(--k)*46px));letter-spacing:.06em;text-transform:uppercase;text-shadow:0 4px 0 rgba(20,24,31,.9);color:var(--gold)}
.res h2.bad{color:#ff7a66}
.res .sub{text-align:center;font-size:max(14px,calc(var(--k)*16px));color:#d9c9ac;letter-spacing:.14em;margin-top:-4px}
.res .stars{display:flex;justify-content:center;gap:calc(var(--k)*14px)}
.res .stars .star{width:calc(var(--k)*64px);height:calc(var(--k)*64px)}
.res .mid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--k)*14px)}
.res .lines{display:flex;flex-direction:column;gap:4px}
.res .ln2{display:flex;justify-content:space-between;gap:12px;font-size:max(15px,calc(var(--k)*18px));padding:2px 0;border-bottom:1px solid rgba(255,241,214,.1)}
.res .ln2 b{color:var(--gold);font-weight:900}
.res .ln2.tot{font-size:max(20px,calc(var(--k)*28px));border-bottom:0;margin-top:4px}
.res .goalrows{display:flex;flex-direction:column;gap:6px;font-size:max(14px,calc(var(--k)*16px))}
.res .goalrows div{display:flex;gap:8px;align-items:center;opacity:.55}.res .goalrows div.ok{opacity:1}
.res .goalrows .star{width:22px;height:22px;min-width:0;min-height:0}
.res .badges{display:flex;gap:8px;flex-wrap:wrap}
.res .badge{padding:3px 12px;border-radius:999px;background:rgba(255,225,77,.16);border:2px solid var(--gold);color:var(--gold);font-size:max(14px,calc(var(--k)*14px));letter-spacing:.1em;animation:slidein .35s both}
.res .next{display:flex;flex-direction:column;gap:4px}
.res .bar{height:14px;border-radius:8px;background:rgba(255,241,214,.12);overflow:hidden;border:1px solid rgba(255,241,214,.3)}
.res .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ffe14d);transition:width .8s ease-out}
.res .acts{display:flex;gap:calc(var(--k)*12px);justify-content:center;flex-wrap:wrap}
.res .wr{position:relative;max-width:none}
@media (orientation:portrait){.res .mid{grid-template-columns:1fr}.res .stars .star{width:calc(var(--k)*56px);height:calc(var(--k)*56px)}}
@media (orientation:landscape) and (max-height:520px){.res{padding:10px;gap:6px}.res h2{font-size:max(24px,calc(var(--k)*34px))}.res .wr{min-height:56px}.res .stars .star{width:44px;height:44px}.res .ln2{font-size:14px}.res .goalrows{font-size:14px}}

/* ---------- garage */
.gar{position:absolute;display:flex;flex-direction:column;gap:calc(var(--k)*10px);pointer-events:auto}
.gar .tabs{display:flex;gap:calc(var(--k)*8px)}
.gar .tabs .btn{flex:1;padding:0 6px;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.03em}
.gar .tabs .btn.sel{background:var(--amber);color:#14181f;border-color:#fff1d6}
.gar .body{display:flex;flex-direction:column;gap:calc(var(--k)*10px);overflow-y:auto;min-height:0;flex:1;padding-right:2px}
.gcar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:calc(var(--k)*10px) calc(var(--k)*12px);cursor:pointer;border-radius:12px}
.gcar.sel{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,179,71,.35),0 0 18px rgba(255,179,71,.25)}
.gcar .nm{font-size:max(18px,calc(var(--k)*22px));font-weight:900;text-transform:uppercase}
.gcar .pk{font-size:max(14px,calc(var(--k)*14px));color:var(--teal);letter-spacing:.08em}
.sbars{display:flex;flex-direction:column;gap:5px;grid-column:1/3}
.sb{display:grid;grid-template-columns:max(104px,calc(var(--k)*108px)) 1fr;align-items:center;gap:8px;font-size:max(14px,calc(var(--k)*14px));letter-spacing:.1em;color:#d9c9ac}
.sb .tr{height:12px;border-radius:7px;background:rgba(255,241,214,.12);overflow:hidden;position:relative;border:1px solid rgba(255,241,214,.25)}
.sb .tr i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff8a2a,#ffd166);transition:width .35s}
.sb .tr u{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(88,224,122,.9) 0 5px,rgba(88,224,122,.45) 5px 10px);transition:all .35s}
.urow{display:grid;grid-template-columns:calc(var(--k)*42px) 1fr auto;gap:4px 12px;align-items:center;padding:calc(var(--k)*8px) calc(var(--k)*12px)}
.urow .ic{grid-row:1/3;width:calc(var(--k)*42px);height:calc(var(--k)*42px);min-width:34px;border-radius:12px;background:rgba(255,179,71,.14);border:2px solid rgba(255,179,71,.5);padding:7px}
.urow .ic svg{width:100%;height:100%;fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.urow .nm{font-size:max(17px,calc(var(--k)*20px));font-weight:900;display:flex;gap:10px;align-items:center;text-transform:uppercase}
.pips{display:inline-flex;gap:4px}.pips u{width:calc(var(--k)*20px);height:calc(var(--k)*12px);min-width:16px;min-height:10px;border-radius:3px;background:#2a303a;border:2px solid rgba(255,241,214,.45)}.pips u.on{background:var(--amber);border-color:#fff1d6}
.urow .ds{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;grid-column:2}
.urow .bt{grid-column:3;grid-row:1/3}
.sw{display:flex;flex-wrap:wrap;gap:calc(var(--k)*10px)}
.sw button{position:relative;width:max(52px,calc(var(--k)*64px));height:max(52px,calc(var(--k)*64px));border-radius:16px;border:3px solid rgba(255,241,214,.5);box-shadow:0 4px 0 rgba(0,0,0,.4);padding:0}
.sw button.sel{border-color:#fff1d6;box-shadow:0 0 0 3px var(--amber),0 4px 0 rgba(0,0,0,.4)}
.sw button span{position:absolute;left:0;right:0;bottom:-2px;font-size:14px;text-align:center;background:rgba(20,24,31,.85);border-radius:0 0 12px 12px;color:var(--gold)}
@media (orientation:landscape){.gar{right:calc(var(--k)*16px);top:calc(var(--k)*78px);bottom:calc(var(--k)*16px);width:min(48vw,calc(var(--k)*470px))}.gar .wr{display:none}}
@media (orientation:portrait){.gar{left:calc(var(--k)*12px);right:calc(var(--k)*12px);bottom:calc(var(--k)*12px + env(safe-area-inset-bottom));top:46%}.gar .tabs .btn{font-size:14px;letter-spacing:.02em;padding:0 4px}}
@media (orientation:landscape) and (max-height:520px){.gar{top:64px;gap:6px;width:min(52vw,440px)}.gcar{padding:6px 10px}.urow{padding:5px 10px}}
.gwr{position:absolute;left:calc(var(--k)*16px);top:calc(var(--k)*78px)}
@media (orientation:portrait){.gwr{left:calc(var(--k)*12px);right:calc(var(--k)*12px);top:calc(var(--k)*64px);max-width:none;min-height:60px}.gwr .ln{min-height:2.44em;font-size:15px}.gwr .face{width:52px;height:52px;min-width:52px;min-height:52px}}
@media (orientation:landscape) and (max-height:520px){.gwr{display:none}}
.stage{position:absolute;pointer-events:auto;touch-action:none}
@media (orientation:landscape){.stage{left:0;top:70px;bottom:0;width:52%}}
@media (orientation:portrait){.stage{left:0;right:0;top:130px;height:30%}}

/* ---------- settings + pause (modal) */
.modal{position:absolute;inset:0;background:rgba(10,14,20,.62);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.mbox{width:min(92vw,calc(var(--k)*460px));max-height:92vh;overflow:auto;padding:calc(var(--k)*18px);display:flex;flex-direction:column;gap:calc(var(--k)*12px)}
.mbox h3{margin:0;font-weight:900;font-size:max(24px,calc(var(--k)*34px));text-align:center;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:max(16px,calc(var(--k)*19px));text-transform:uppercase}
.seg{display:flex;border:2px solid rgba(255,241,214,.6);border-radius:999px;overflow:hidden}
.seg button{min-height:48px;min-width:max(52px,calc(var(--k)*64px));padding:0 12px;border:0;background:transparent;font-weight:900;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.06em}
.seg button.sel{background:var(--amber);color:#14181f}
.tog{position:relative;width:calc(var(--k)*80px);min-width:72px;height:calc(var(--k)*48px);min-height:48px;border-radius:999px;border:2px solid rgba(255,241,214,.7);background:rgba(255,241,214,.12);padding:0}
.tog i{position:absolute;left:4px;top:4px;width:calc(var(--k)*36px);min-width:34px;height:calc(var(--k)*36px);min-height:34px;border-radius:50%;background:var(--cream);transition:left .15s}
.tog.on{background:rgba(88,224,122,.4);border-color:var(--green)}
.tog.on i{left:calc(100% - max(34px,calc(var(--k)*36px)) - 4px);background:var(--green)}
.mbox .danger{border-color:var(--red);color:#ff9a90}
.mbox .note{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;text-align:center}
.mbox .col{display:flex;flex-direction:column;gap:10px}

/* ---------- in-run widgets (DOM overlays above the HUD) */
#runui{position:fixed;inset:0;z-index:12;pointer-events:none;display:none}
#runui.on{display:block}
.runbar{position:absolute;left:50%;top:calc(var(--k)*58px);transform:translateX(-50%);width:min(46vw,calc(var(--k)*420px));display:flex;flex-direction:column;align-items:center;gap:3px;text-shadow:0 2px 0 rgba(20,24,31,.9)}
.runbar .nm{font-size:max(14px,calc(var(--k)*15px));letter-spacing:.14em;color:var(--cream);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.runbar .trk{position:relative;width:100%;height:calc(var(--k)*12px);min-height:10px;border-radius:8px;background:rgba(20,24,31,.8);border:2px solid rgba(255,241,214,.7);overflow:hidden}
.runbar .trk i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffb347,#ff6a1f)}
.runbar .trk b{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,241,214,.8)}
.runbar .gl{display:flex;gap:10px;font-size:max(14px,calc(var(--k)*14px));color:#fff1d6}
.runbar .gl span{display:inline-flex;gap:4px;align-items:center;padding:1px 8px;border-radius:999px;background:rgba(20,24,31,.7);border:1px solid rgba(255,241,214,.35)}
.runbar .gl span.ok{border-color:var(--gold);color:var(--gold)}
.runbar .gl svg{width:14px;height:14px}
.bossbar{position:absolute;left:50%;top:calc(var(--k)*58px);transform:translateX(-50%);width:min(70vw,calc(var(--k)*560px));display:none;flex-direction:column;align-items:center;gap:4px}
.bossbar.on{display:flex}
.bossbar .nm{font-size:max(16px,calc(var(--k)*20px));font-weight:900;letter-spacing:.2em;color:#ff7a66;text-shadow:0 2px 0 rgba(20,24,31,.95);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.bossbar .hp{display:flex;gap:4px;width:100%}
.bossbar .seg1{flex:var(--w,1);height:calc(var(--k)*16px);min-height:12px;border-radius:6px;background:rgba(20,24,31,.85);border:2px solid rgba(255,241,214,.8);overflow:hidden;position:relative}
.bossbar .seg1 i{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#ff3b30,#ff8a2a);transition:width .12s}
.bossbar .seg1.dead{opacity:.35;border-color:#6d6a63}
.bossbar .esc{width:100%;height:calc(var(--k)*8px);min-height:6px;border-radius:5px;background:rgba(20,24,31,.8);border:1px solid rgba(255,241,214,.5);position:relative;overflow:visible;margin-top:2px}
.bossbar .esc i{position:absolute;left:0;top:0;bottom:0;background:#ffd166;border-radius:5px}
.bossbar .esc em{position:absolute;right:-2px;top:-6px;font-style:normal;font-size:14px;color:#ff7a66}
.quest{position:absolute;left:calc(var(--k)*16px);top:calc(var(--k)*72px);display:none;flex-direction:column;gap:2px;padding:6px 12px;border-radius:12px;background:rgba(20,24,31,.8);border:2px solid rgba(255,179,71,.6);font-size:max(14px,calc(var(--k)*14px));text-shadow:0 1px 0 rgba(0,0,0,.6)}
.quest.on{display:flex}
.quest .qh{font-size:14px;letter-spacing:.16em;color:var(--amber)}
.quest .qr{display:flex;gap:8px;align-items:center;color:var(--cream)}
.quest .qr.done{color:var(--green)}
.quest .qr b{margin-left:auto;color:var(--gold)}
.ptr{position:absolute;left:0;top:0;z-index:5;display:none;flex-direction:column;align-items:center;gap:2px;will-change:transform;pointer-events:none}
.ptr.on{display:flex}
.ptr .lb{padding:2px 10px;border-radius:999px;background:var(--amber);color:#14181f;font-weight:900;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.08em;white-space:nowrap;box-shadow:0 3px 0 #a8641a}
.ptr svg{width:calc(var(--k)*40px);height:calc(var(--k)*40px);min-width:30px;min-height:30px;fill:var(--amber);stroke:#14181f;stroke-width:2;animation:ptrbob .55s ease-in-out infinite alternate;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
@keyframes ptrbob{to{transform:translateY(8px)}}
.banner{position:absolute;left:0;right:0;top:34%;text-align:center;opacity:0;pointer-events:none}
.banner b{display:block;font-size:max(30px,calc(var(--k)*64px));font-weight:900;letter-spacing:.1em;color:var(--gold);text-shadow:0 5px 0 rgba(20,24,31,.95),0 0 26px rgba(255,150,40,.6);text-transform:uppercase}
.banner span{display:block;font-size:max(16px,calc(var(--k)*22px));letter-spacing:.2em;color:var(--cream);text-shadow:0 2px 0 rgba(20,24,31,.95)}
.banner.go{animation:bn 1.8s ease-out both}
@keyframes bn{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.96)}}
.banner.red b{color:#ff7a66}
.mugcard{position:absolute;right:calc(var(--k)*20px);top:calc(var(--k)*100px);width:calc(var(--k)*250px);display:none;flex-direction:column;align-items:center;transform-origin:center;text-align:center}
.mugcard.on{display:flex;animation:mugin 2.6s cubic-bezier(.2,1,.3,1) both}
@keyframes mugin{0%{opacity:0;transform:translateX(120%) rotate(8deg) scale(.9)}14%{opacity:1;transform:translateX(0) rotate(-3deg) scale(1)}80%{opacity:1;transform:translateX(0) rotate(-3deg)}100%{opacity:0;transform:translateX(30%) rotate(2deg)}}
.mugcard img{width:100%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.mugcard .mn{position:absolute;left:12%;right:12%;bottom:8%;color:#3b2418;font-weight:900;line-height:1.05}
.mugcard .mn b{display:block;font-size:max(20px,calc(var(--k)*28px));letter-spacing:.06em;color:#b3260f;text-transform:uppercase}
.mugcard .mn span{display:block;font-size:max(14px,calc(var(--k)*14px));letter-spacing:.06em}
@media (orientation:portrait){.mugcard{right:calc(var(--k)*10px);width:calc(var(--k)*200px);top:calc(var(--k)*230px)}}
.pauseov .btn{min-width:calc(var(--k)*240px)}
.toast{position:absolute;left:50%;bottom:calc(var(--k)*140px);transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:rgba(20,24,31,.9);border:2px solid var(--gold);color:var(--gold);font-weight:900;font-size:max(16px,calc(var(--k)*20px));opacity:0}
.toast.go{animation:toast 1.6s ease-out both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}

.pw{position:relative;display:inline-block;max-height:100%}.pw img{display:block}
.pw .plate{position:absolute;left:15%;right:15%;bottom:8.5%;height:11%;display:flex;align-items:center;justify-content:center;color:#3b2418;font-weight:900;font-size:max(14px,calc(var(--k)*13px));letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden}

@media (orientation:portrait){
 .runbar{left:calc(var(--k)*12px);transform:none;width:calc(100vw - 190px);top:calc(var(--k)*64px);align-items:stretch}
 .runbar .nm{font-size:14px;letter-spacing:.08em;justify-content:space-between}
 .bossbar{left:calc(var(--k)*12px);transform:none;width:calc(100vw - 190px);top:calc(var(--k)*62px)}
 .bossbar .nm{font-size:15px;letter-spacing:.12em}
 .quest{top:calc(var(--k)*190px)}
 .banner{top:30%}
 .mugcard{top:calc(var(--k)*210px)}
}
@media (orientation:landscape) and (max-height:520px){
 .runbar{top:calc(var(--k)*50px)}
 .quest{top:calc(var(--k)*64px)}
}

@media (orientation:landscape) and (max-height:520px){.ccard{padding:8px 10px;gap:3px}.ccard .no{display:none}.ccard .mug{height:calc(var(--k)*80px)}.ccard .nm{font-size:max(17px,calc(var(--k)*22px));min-height:0}.ccard .gl{font-size:14px}.ccard .bn{font-size:15px}.ccard .stars .star{width:24px;height:24px}.ccard .sb{display:none}.board{top:60px;bottom:8px}.head{padding:6px 10px}}

#scrTitle.on{pointer-events:auto}

@media (orientation:portrait){#scrBoard .head .btn.sm span,#scrBoard .head .btn.sm{font-size:0}#scrBoard .head .btn.sm{min-width:48px;width:52px;padding:0}#scrBoard .head .btn.sm svg{font-size:22px}}

@media (orientation:portrait){#scrBoard .head{gap:8px;padding:10px}#scrBoard .head h2{font-size:22px;letter-spacing:.03em}#scrBoard .head .cashchip{padding:0 10px;font-size:18px}}

@media (orientation:portrait){#scrBoard .head .btn.sm{display:none}.ccard{grid-template-columns:calc(var(--k)*112px) 1fr}.pw .plate{letter-spacing:0;font-size:14px;left:10%;right:10%}}

.urow .sb2{grid-column:1/4}.urow .sb2 .tr{height:10px;border-radius:6px;background:rgba(255,241,214,.12);overflow:hidden;position:relative;border:1px solid rgba(255,241,214,.25)}.urow .sb2 .tr i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff8a2a,#ffd166)}.urow .sb2 .tr u{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(88,224,122,.95) 0 5px,rgba(88,224,122,.5) 5px 10px)}
@media (orientation:portrait){.res{padding:12px;gap:6px;max-height:96vh}.res h2{font-size:max(24px,calc(var(--k)*32px))}.res .stars .star{width:44px;height:44px}.res .sub{font-size:14px}.res .wr{min-height:60px}.res .wr .face{width:52px;height:52px;min-width:52px;min-height:52px}.res .ln2.tot{font-size:22px}}

/* ======================================================================= M2b: layout fixes (REVIEW_M2 P0-1, P0-2, P1-6, P1-8, P2-11)
   WRENCH in-run radio is docked in a reserved slot (never over the chips / progress / boss bar / quest panel / hint pill):
   landscape = bottom centre between the speed dial and the weapon chip, <= 360 x 72 px at 1280x720; portrait = a full-width band under the top HUD. */
.runwr{position:absolute;display:none;left:0;right:0;margin:0 auto;top:auto;bottom:max(10px,calc(var(--k)*18px));box-sizing:border-box;width:max(310px,calc(var(--k)*270px));max-width:calc(100vw - 16px);min-height:0;height:auto;gap:calc(var(--k)*8px);padding:6px 12px 6px 6px;border-radius:36px 14px 14px 36px;pointer-events:none;z-index:6}
.runwr.on{display:flex}
.runwr .face{width:max(44px,calc(var(--k)*38px));height:max(44px,calc(var(--k)*38px));min-width:44px;min-height:44px;border-width:2px}
.runwr .nm{font-size:14px;line-height:1;letter-spacing:.14em}
.runwr .ln{font-size:max(14px,calc(var(--k)*11.5px));line-height:1.15;min-height:2.3em;max-height:2.3em;overflow:hidden}
.runwr .skip{display:none}
@media (orientation:portrait){
 .runwr{left:10px;right:10px;width:auto;max-width:none;bottom:auto;top:calc(var(--k)*150px + var(--rws,0px));margin:0}
 .quest{top:calc(var(--k)*150px + 118px + var(--rws,0px))}
 .mugcard{top:calc(var(--k)*150px + 118px + var(--rws,0px));width:calc(var(--k)*150px)}
 .banner{top:50%}
 #hud .hint{top:calc(var(--k)*150px + 76px + var(--rws,0px))}
 .runbar{width:calc(100vw - 150px)}
 .runbar .nm{letter-spacing:.02em}
}
@media (orientation:landscape) and (max-height:520px){.runwr{bottom:max(8px,calc(var(--k)*14px))}}

/* chips: >= 14 px text at every size (the goal chips' <small> used to fall to ~11 px) */
.runbar .gl small{font-size:inherit}
.runbar .gl span{padding:1px 10px;min-height:calc(var(--k)*24px)}
#hud .chain{font-size:max(14px,calc(var(--u)*20px));min-height:max(24px,calc(var(--u)*30px));display:inline-flex;align-items:center}
#hud .chain.c1{opacity:.6;border-color:rgba(255,241,214,.45)}
#hud .hk{font-size:max(14px,calc(var(--u)*13px))}
#hud .hint{max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center;white-space:nowrap}
.ptr .lb{max-width:calc(100vw - 16px)}

/* quest panel: collapses to a single line once a quest is done */
.quest.one{padding:4px 12px}
.quest .qr b{margin-left:10px}
@media (orientation:portrait){.quest{max-width:calc(100vw - 32px)}}

/* boss bar part labels */
.bossbar .seg1{height:max(20px,calc(var(--k)*16px));display:flex;align-items:center;justify-content:center}
.bossbar .seg1 em{position:relative;z-index:1;font-style:normal;font-size:14px;line-height:1;letter-spacing:.04em;color:#fff1d6;text-shadow:0 1px 0 #14181f,0 0 4px #14181f;white-space:nowrap}
@media (orientation:portrait){.bossbar{width:calc(100vw - 130px)}}

/* garage toast lives over the 3D stage, never on the rows / tabs */
.toast.gtoast{left:26%;bottom:max(16px,calc(var(--k)*26px))}
@media (orientation:portrait){.toast.gtoast{left:50%;bottom:auto;top:calc(46% - 56px)}}
@media (orientation:landscape) and (max-height:520px){.toast.gtoast{left:26%}}

/* results: <= 90% of the viewport, WRENCH line never under the buttons */
.res{display:flex;flex-direction:column;max-height:90vh;overflow:hidden;gap:calc(var(--k)*8px);padding:calc(var(--k)*14px) calc(var(--k)*18px)}
.res h2{font-size:max(26px,calc(var(--k)*40px))}
.res .stars .star{width:calc(var(--k)*50px);height:calc(var(--k)*50px)}
.res .mid{min-height:0;overflow-y:auto;flex:0 1 auto;align-items:start}
.res .mid>div:last-child{display:flex;flex-direction:column;gap:calc(var(--k)*8px)}
.res .badges{margin-top:2px}
.res .ln2{font-size:max(15px,calc(var(--k)*17px))}
.res .ln2.tot{font-size:max(20px,calc(var(--k)*26px))}
.res .slot,.res .acts{flex:none}
.res .wr{min-height:calc(var(--k)*64px);padding:6px 14px 6px 6px}
.res .wr .face{width:calc(var(--k)*52px);height:calc(var(--k)*52px);min-width:48px;min-height:48px}
.res .wr .ln{min-height:0;font-size:max(15px,calc(var(--k)*16px))}
.res .acts{position:static}
@media (orientation:landscape) and (max-height:520px){
 .res{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h2 h2" "sub sub" "mid mid" "slot acts";align-items:center;width:min(96vw,840px);padding:8px 14px;gap:4px 12px}
 .res h2{grid-area:h2;text-align:left;font-size:max(22px,calc(var(--k)*28px))}
 .res .sub{grid-area:sub;text-align:left;margin:0}
 .res .stars{grid-area:h2;justify-self:end;align-self:center}.res .mid{grid-area:mid;gap:12px}.res .slot{grid-area:slot;min-width:0}.res .acts{grid-area:acts;flex-wrap:nowrap}
 .res .stars .star{width:36px;height:36px}
 .res .wr{min-height:52px}
 .res .ln2{padding:0;font-size:max(14px,calc(var(--k)*15px))}.res .ln2.tot{font-size:max(18px,calc(var(--k)*22px));margin-top:2px}
 .res .goalrows{gap:3px}.res .mid>div:last-child{gap:4px}.res .badge{padding:1px 10px}
 .res .acts .btn.p{padding:0 14px}
}
@media (orientation:portrait){.res{padding:12px;gap:6px;max-height:90vh}.res .mid{overflow-y:auto}}
/* results compaction pass (all sizes): everything fits without scrolling at 1280x720, 907x510, 844x390 */
.res{padding:calc(var(--k)*10px) calc(var(--k)*18px);gap:calc(var(--k)*6px)}
.res h2{font-size:max(24px,calc(var(--k)*34px));line-height:1.05}
.res .stars .star{width:calc(var(--k)*44px);height:calc(var(--k)*44px)}
.res .wr{min-height:calc(var(--k)*56px)}
.res .wr .face{width:calc(var(--k)*46px);height:calc(var(--k)*46px)}
.res .badge{padding:1px 10px;letter-spacing:.05em}
.res .badges{gap:6px}
.res .next{gap:2px}.res .next .bar{height:10px}
.res .goalrows{gap:4px}
@media (orientation:landscape) and (max-height:520px){
 .res{padding:6px 14px;gap:2px 12px}
 .res h2{font-size:max(22px,calc(var(--k)*26px))}
 .res .sub{line-height:1.1}
 .res .wr{min-height:48px}.res .wr .face{width:44px;height:44px;min-width:44px;min-height:44px}
 .res .ln2{line-height:1.1}.res .goalrows{gap:2px}.res .next .bar{height:8px}.res .next{gap:0}
}
@media (orientation:portrait){
 .res{padding:10px;gap:4px}
 .res h2{font-size:24px;letter-spacing:.03em}
 .res .ln2{font-size:15px;padding:1px 0}.res .ln2.tot{font-size:20px}
 .res .goalrows{font-size:14px;gap:3px}
 .res .stars .star{width:38px;height:38px}
}

/* banners never leave the screen (portrait: smaller type, 8 px side padding) */
.banner{padding:0 8px}
.banner b{font-size:max(30px,min(calc(var(--k)*64px),11.5vw))}
@media (orientation:portrait){.banner b{letter-spacing:.04em}}
.toast{bottom:max(calc(var(--k)*100px),96px)}
.toast.gtoast{bottom:max(16px,calc(var(--k)*26px))}
@media (orientation:portrait){.toast.gtoast{bottom:auto}}
@media (orientation:portrait){.toast{bottom:236px;white-space:nowrap;max-width:calc(100vw - 16px)}}
@media (orientation:landscape) and (max-height:520px){.banner{top:39%}}
@media (orientation:landscape) and (max-height:520px){.quest{gap:0;padding:3px 10px}.quest .qr,.quest .qh{line-height:1.1}}
#hud .chain{margin-left:calc(var(--u)*30px)}   /* M2b: the cash bump (x1.18) must not touch the chain pill */

/* ---------- M2c: CHOOSE YOUR INTERCEPTOR */
#scrPick{--pw:min(36vw,calc(var(--k)*430px))}
#scrPick .stage{position:absolute;left:0;top:calc(var(--k)*70px);bottom:0;width:calc(100% - var(--pw) - 28px);touch-action:pan-y;cursor:grab}
#scrPick .head h2{font-size:max(22px,calc(var(--k)*32px))}
#scrPick .arrow{position:absolute;top:44%;z-index:2}
#scrPick .arrow.l{left:calc(var(--k)*12px)}
#scrPick .arrow.r{left:calc(100% - var(--pw) - 28px - max(48px,var(--k)*52px) - 8px);transform:scaleX(-1)}
#scrPick .arrow:active{transform:translateY(3px)}#scrPick .arrow.r:active{transform:scaleX(-1) translateY(3px)}
#scrPick .dots{position:absolute;left:0;width:calc(100% - var(--pw) - 28px);bottom:calc(var(--k)*34px);display:flex;gap:calc(var(--k)*12px);justify-content:center;pointer-events:none}
#scrPick .dots u{width:calc(var(--k)*14px);height:calc(var(--k)*14px);min-width:12px;min-height:12px;border-radius:50%;background:rgba(255,241,214,.28);border:2px solid rgba(255,241,214,.7)}
#scrPick .dots u.on{background:var(--amber);border-color:#fff1d6;transform:scale(1.25)}#scrPick .dots u.lk:not(.on){border-style:dashed;opacity:.8}
#scrPick .pickpan{position:absolute;right:calc(var(--k)*16px);top:calc(var(--k)*78px);bottom:calc(var(--k)*16px);width:var(--pw);display:flex;flex-direction:column;gap:calc(var(--k)*8px);padding:calc(var(--k)*16px) calc(var(--k)*18px);pointer-events:auto}
#scrPick .pickpan .role{font-size:max(14px,calc(var(--k)*15px));letter-spacing:.2em;color:var(--teal);font-weight:900}
#scrPick .pickpan .nm{margin:0;font-size:max(30px,calc(var(--k)*46px));font-weight:900;letter-spacing:.04em;color:var(--cream);text-shadow:0 3px 0 rgba(0,0,0,.5);line-height:1}
#scrPick .pickpan .tg{font-size:max(15px,calc(var(--k)*17px));line-height:1.25;color:#e9dcc2;min-height:2.5em}
#scrPick .pickpan .pk{font-size:max(14px,calc(var(--k)*15px));letter-spacing:.1em;color:var(--gold);font-weight:900}
#scrPick .pickpan .sbars{margin-top:calc(var(--k)*4px);gap:calc(var(--k)*9px)}
#scrPick .pickpan .sb{grid-template-columns:max(104px,calc(var(--k)*112px)) 1fr}
#scrPick .pickpan .sb .tr{height:max(14px,calc(var(--k)*16px))}
#scrPick .pickpan .lockrow{min-height:0}
#scrPick .pickpan .cashchip.lk{font-size:max(14px,calc(var(--k)*14px));min-height:48px;padding:6px 12px;border-radius:14px;color:#ff9c8f;border-color:rgba(255,90,70,.7);white-space:normal;line-height:1.2}
#scrPick .pickpan #btnPick{margin-top:auto;width:100%}
#scrPick .pickpan.locked .nm{color:#c9bda6}
#scrPick .pwr{position:absolute;left:calc(var(--k)*16px);bottom:calc(var(--k)*72px);max-width:min(52vw,calc(var(--k)*430px))}
@media (orientation:portrait){
 #scrPick .stage{width:100%;top:calc(var(--k)*64px);bottom:auto;height:36%}#scrPick{--pw:0px}
 #scrPick .arrow{top:21%}#scrPick .arrow.r{left:auto;right:calc(var(--k)*12px)}
 #scrPick .dots{width:100%;bottom:auto;top:calc(36% + var(--k)*62px)}
 #scrPick .pickpan{left:calc(var(--k)*12px);right:calc(var(--k)*12px);width:auto;top:calc(36% + var(--k)*92px);bottom:calc(var(--k)*12px + env(safe-area-inset-bottom));padding:calc(var(--k)*12px) calc(var(--k)*14px);gap:calc(var(--k)*6px)}
 #scrPick .pickpan .nm{font-size:max(28px,calc(var(--k)*38px))}
 #scrPick .pickpan .tg{min-height:0;font-size:15px}
 #scrPick .pwr{display:none}
}
@media (orientation:landscape) and (max-height:520px){
 #scrPick{--pw:min(42vw,400px)}#scrPick .head h2{font-size:22px}#scrPick .stage{top:60px}#scrPick .pickpan{top:62px;bottom:10px;padding:8px 12px;gap:4px}#scrPick .pickpan .role{display:none}#scrPick .pickpan .nm{font-size:28px}
 #scrPick .pickpan .tg{min-height:0;font-size:14px}#scrPick .pickpan .sbars{gap:5px}#scrPick .pickpan .sb .tr{height:12px}#scrPick .pickpan #btnPick{min-height:48px;font-size:20px}#scrPick .pickpan .pk{font-size:14px}#scrPick .pickpan .sb{grid-template-columns:96px 1fr}
 #scrPick .pwr{display:none}#scrPick .dots{bottom:10px}
}
.gcar .nm small{font-size:max(14px,.58em);letter-spacing:.14em;color:var(--teal);font-weight:900;margin-left:6px}

/* ---------- M2c (REVIEW_M2B P1-4): contract posters stay inside their cards (the 400 px poster images were not height-bound -> they spilled over the stars / bounty at 1280x720) */
.ccard .mug .pw{height:100%;max-height:100%}.ccard .mug .pw img{height:100%;width:auto;max-width:100%;object-fit:contain}
@media (orientation:landscape) and (min-height:600px){.ccard .mug{height:clamp(112px,23vh,220px)}.ccard .mug .pw .plate{font-size:max(14px,calc(var(--k)*14px))}}

/* ======================================================================= M3 hud (REVIEW_M2C items 4-5): start HUD <= 12 text elements, one-line quest, one-line goals, compact boss banner, right-hand key hints */
.chain.c1{opacity:0}
body:not(.touch) #hud .hint{left:auto;right:calc(var(--u)*16px);top:calc(var(--u)*72px);transform:none;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;justify-content:flex-start;gap:calc(var(--u)*6px);max-width:none}
#hud .hk{padding:calc(var(--u)*4px) calc(var(--u)*10px);border-radius:8px;background:rgba(20,24,31,.8);border:2px solid #ffb347;border-bottom-width:4px;font-size:max(14px,calc(var(--u)*14px));letter-spacing:.06em;white-space:pre}
body.touch #hud .hk{border:0;background:none;padding:0}
#hud .chain.c1{opacity:0}
.runbar.late .nm{display:none}
.runbar .gl1{display:inline-flex;gap:0;align-items:center;white-space:pre;padding:1px 10px;border-radius:999px;background:rgba(20,24,31,.7);border:1px solid rgba(255,241,214,.35);min-height:calc(var(--k)*24px)}
.runbar .gl1.ok{border-color:var(--gold);color:var(--gold)}
.runbar .gl1 svg{margin-right:4px}
.quest .qr{gap:10px}.quest .qt{white-space:nowrap}
.quest .qp{display:inline-flex;gap:4px}.quest .qp u{width:12px;height:8px;border-radius:3px;background:rgba(255,241,214,.25)}.quest .qp u.on{background:#58e07a}.quest .qp u.cur{background:var(--amber)}
.runwr .nm{display:none}
.banner.go{animation:none}
.banner.compact{top:6px;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 16px)}
.banner.compact b{font-size:max(26px,calc(var(--k)*34px));letter-spacing:.08em;line-height:1;white-space:nowrap;text-shadow:0 3px 0 rgba(20,24,31,.95),0 0 12px rgba(255,150,40,.5)}
.banner.compact span{display:none}

/* ======================================================================= M3 contentui: contract board (2 stretches + daily), wanted wall, title badge, briefing / results extras */
.mdc{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(111,211,255,.12);border:2px solid #6fd3ff;color:#c4ecff;font-size:max(14px,calc(var(--k)*14px));font-weight:900;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.mdc svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mdc.plain{background:rgba(255,241,214,.07);border-color:rgba(255,241,214,.4);color:#d9c9ac}
.dbl{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;background:linear-gradient(180deg,#ffe14d,#ffb347);color:#2a1706;font-weight:900;font-size:max(14px,calc(var(--k)*14px));letter-spacing:.08em;white-space:nowrap}
.dbl.done{background:rgba(88,224,122,.16);border:2px solid var(--green);color:var(--green)}
.dbl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3}
/* ---- board shell */
#scrBoard .bdcol{position:absolute;left:calc(var(--k)*16px);right:calc(var(--k)*16px);top:calc(var(--k)*78px);bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:none}
#scrBoard .bdcol>*{pointer-events:auto}
#scrBoard .dcard{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top act" "mid act";align-items:center;gap:4px 14px;padding:8px 14px;border:2px solid #ffd24a;background:linear-gradient(90deg,rgba(74,52,10,.94),rgba(20,24,31,.94) 70%);cursor:pointer;box-shadow:0 0 0 2px rgba(255,210,74,.18),0 10px 24px rgba(0,0,0,.4)}
#scrBoard .dcard.focus,#scrBoard .ccard.focus{outline:3px solid var(--cream);outline-offset:2px}
.dtop{grid-area:top;display:flex;align-items:center;gap:10px;min-width:0}
.dlab{font-size:max(15px,calc(var(--k)*17px));letter-spacing:.16em;color:#ffd24a;white-space:nowrap}
.dfl svg,.dst svg{width:calc(var(--k)*22px);height:calc(var(--k)*22px);min-width:18px;min-height:18px;fill:#ff8a2a;stroke:#ffd24a;stroke-width:1.2;display:block}
.dst{display:inline-flex;align-items:center;gap:6px;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.08em;color:#d9c9ac;white-space:nowrap}
.dst.on{color:#ffb347}.dst:not(.on) svg{fill:none;stroke:#6d6a63}
.dmid{grid-area:mid;display:flex;align-items:center;gap:12px;min-width:0}
.dinfo{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}.dtop{flex-wrap:wrap}.dtop .dsub{margin:0;flex:0 1 auto}
.dmug{flex:none;height:calc(var(--k)*58px);min-height:50px}.dmug .pw{height:100%}.dmug .pw img{height:100%;width:auto}.dmug .plate{display:none}
.dinfo{min-width:0}
.dnm{font-size:max(19px,calc(var(--k)*24px));font-weight:900;line-height:1.05;text-transform:uppercase}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.dsub{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;letter-spacing:.06em;margin-top:3px}
.dact{grid-area:act;display:flex;gap:10px;align-items:center}
.dact .btn{white-space:nowrap}
/* ---- stretch tabs = the two bands */
.sttabs{flex:none;display:flex;gap:10px}
.sttab{position:relative;flex:1;min-height:48px;padding:0;border-radius:12px;border:2px solid rgba(255,241,214,.35);overflow:hidden;text-align:left;display:flex;align-items:center;background:#222;opacity:.78;transition:opacity .15s,transform .1s;touch-action:manipulation}
.sttab .start{position:absolute;inset:0;width:100%;height:100%;display:block}
.sttab::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,6,.78),rgba(14,10,6,.35) 70%,rgba(14,10,6,.1))}
.sttab .stx{position:relative;z-index:1;display:flex;flex-direction:column;padding:3px 12px;gap:1px;text-shadow:0 2px 0 rgba(0,0,0,.7)}
.sttab .stn{display:flex;align-items:center;gap:8px;font-size:max(14px,calc(var(--k)*17px));font-weight:900;letter-spacing:.08em;color:var(--cream);text-transform:uppercase;line-height:1.1}
.sttab .stn svg{width:18px;height:18px;flex:none;fill:none;stroke:#ffd24a;stroke-width:2.4}
.sttab .stl{font-size:14px;font-weight:900;letter-spacing:.05em;color:#ffcf7a;line-height:1.15}
.sttab.on{opacity:1;border-color:var(--cream);box-shadow:0 0 0 2px rgba(255,241,214,.25),0 6px 16px rgba(0,0,0,.4)}
.sttab.st-redline.on{border-color:#ffb020;box-shadow:0 0 0 2px rgba(255,176,32,.35),0 6px 16px rgba(0,0,0,.4)}
.sttab.locked .start{filter:saturate(.6) brightness(.8)}
/* ---- card strip */
#scrBoard .stripw{position:relative;flex:1;min-height:0;padding:0 30px}
#scrBoard .bd2{position:absolute;inset:0 30px;display:flex;flex-direction:row;gap:12px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;align-items:stretch;padding:6px 6px 8px;scroll-snap-type:x mandatory;scroll-padding:0 6px;scrollbar-width:none}
#scrBoard .bd2::-webkit-scrollbar{display:none}
#scrBoard .bd2 .ccard{flex:0 0 calc((100% - 24px)/3);max-width:none;scroll-snap-align:start;min-width:0;overflow:hidden}
#scrBoard .bnav{position:absolute;top:50%;z-index:3;margin-top:-24px;width:48px;height:48px;min-height:48px}
#scrBoard .bnav.l{left:-14px}#scrBoard .bnav.r{right:-14px;transform:scaleX(-1)}
#scrBoard .bnav.r:active{transform:scaleX(-1) translateY(3px)}
.ccard.st-sunburn{border-color:rgba(255,179,71,.75);background:linear-gradient(180deg,rgba(78,44,20,.94),rgba(24,22,28,.94) 55%)}
.ccard.st-redline{border-color:rgba(107,150,255,.7);background:linear-gradient(180deg,rgba(14,30,72,.95),rgba(12,16,30,.95) 55%)}
.ccard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:12px 12px 0 0;background:#ffb347}
.ccard.st-redline::before{background:linear-gradient(90deg,#3a6cff,#ffb020)}
#scrBoard .ccard .nm{min-height:0;font-size:max(19px,calc(var(--k)*23px));line-height:1.05}
#scrBoard .ccard .cm{display:flex}
#scrBoard .ccard .sbr{display:flex;flex-direction:column;gap:2px;margin-top:auto}
#scrBoard .ccard .stars{margin:0}
#scrBoard .ccard .stars .star{width:calc(var(--k)*30px);height:calc(var(--k)*30px);min-width:24px;min-height:24px}
#scrBoard .ccard .best{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;letter-spacing:.04em;white-space:nowrap}
#scrBoard .ccard .bn{font-size:max(16px,calc(var(--k)*19px))}
#scrBoard .ccard .mug{flex:1;min-height:56px;height:auto;position:relative}
#scrBoard .ccard .mug .pw{position:absolute;inset:0;height:auto;max-height:none;display:flex;justify-content:center}
#scrBoard .ccard .mug .pw img{height:100%;width:auto;max-width:100%;object-fit:contain}
#scrBoard .ccard .no{letter-spacing:.1em;white-space:nowrap}
#scrBoard .ccard .sb{display:none}
#scrBoard .ccard .nm{min-height:2.1em}
#scrBoard .ccard .lock{z-index:2}
#scrBoard .ccard.next{box-shadow:0 0 0 2px rgba(255,179,71,.45),0 0 22px rgba(255,179,71,.3)}
@media (orientation:landscape) and (max-width:960px){#scrBoard .bd2 .ccard{flex-basis:calc((100% - 12px)/2.4)}}
/* compact card (portrait + short landscape): poster left, text right */
@media (orientation:portrait),(orientation:landscape) and (max-height:599px){
 #scrBoard .bd2 .ccard{display:grid;grid-template-columns:clamp(104px,40%,150px) minmax(0,1fr);grid-template-areas:"mug nm" "mug cm" "mug bn" "mug sbr";grid-template-rows:auto auto auto 1fr;column-gap:10px;row-gap:3px;padding:10px 10px 8px}
 #scrBoard .ccard .no,#scrBoard .ccard .sb{display:none}
 #scrBoard .ccard .mug{grid-area:mug;align-self:center;height:auto;flex:none;position:static}
 #scrBoard .ccard .mug .pw{position:relative;inset:auto;height:auto;display:block}#scrBoard .ccard .mug .pw img{height:auto;width:100%;max-height:calc(100vh - 230px)}
 #scrBoard .ccard .nm{min-height:0}
 #scrBoard .ccard .nm{grid-area:nm}#scrBoard .ccard .cm{grid-area:cm}#scrBoard .ccard .bn{grid-area:bn}#scrBoard .ccard .sbr{grid-area:sbr;margin-top:0;align-self:end}
 #scrBoard .ccard .pw .plate{letter-spacing:0;font-size:14px;left:9%;right:9%}
 #scrBoard .ccard .stars .star{width:26px;height:26px;min-width:0;min-height:0}
}
@media (orientation:portrait){
 #scrBoard .bdcol{top:calc(var(--k)*78px);left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom))}
 #scrBoard .stripw{overflow:hidden}
 #scrBoard .bd2{flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;padding:4px 2px 8px;gap:10px}
 #scrBoard .bd2 .ccard{flex:none;scroll-margin:0}
 #scrBoard .bnav{display:none}
 #scrBoard .dcard{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "mid" "act";padding:8px 10px;gap:4px}
 .dlab{letter-spacing:.1em}.dtop{flex-wrap:wrap;gap:4px 10px}
 .dmug{height:52px}
 .dact{width:100%}.dact .btn{flex:1;padding:0 8px}
 .sttabs{gap:6px}.sttab .stx{padding:3px 8px}.sttab .stn{letter-spacing:.02em;font-size:14px}
}
@media (orientation:landscape) and (max-height:520px){
 #scrBoard .bdcol{top:60px;gap:6px;bottom:6px}
 #scrBoard .dcard{padding:5px 12px;gap:0 12px}
 .dmug{height:44px;min-height:40px}.dnm{font-size:max(17px,calc(var(--k)*22px))}.dchips{margin-top:2px}.dsub{margin-top:1px}
 .dlab{font-size:14px}.dfl svg,.dst svg{width:18px;height:18px}
 #scrBoard .dact .btn{padding:0 12px;font-size:14px}
 .sttab .stn{font-size:14px}
 #scrBoard .bd2{padding:4px 34px 6px}
}
/* ---- title: wall button + daily badge */
.btn.tdaily{gap:6px;padding:0 12px;position:relative;border-color:#ffd24a;color:#ffd24a}
.btn.tdaily svg{fill:#ff8a2a;stroke:#ffd24a;stroke-width:1.4;width:18px;height:18px}
.btn.tdaily .dot{position:absolute;right:4px;top:4px;width:10px;height:10px;border-radius:50%;background:#58e07a;box-shadow:0 0 8px #58e07a;display:none}
.btn.tdaily.ready .dot{display:block;animation:blinky 1s infinite}
.btn.tdaily:not(.ready){border-color:rgba(255,241,214,.5);color:#d9c9ac}.btn.tdaily:not(.ready) svg{fill:none;stroke:#8a857a}
.btn.tdaily .tdt{padding-right:8px}
#scrTitle .row2 .btn{padding:0 calc(var(--k)*10px);min-width:0;white-space:nowrap}
@media (orientation:portrait){.btn.tdaily .rd{display:none}#scrTitle .row2 .btn{padding:0 6px;font-size:15px}#scrTitle .row2 .btn svg{display:none}#scrTitle .row2 .btn .star{display:inline}}
/* ---- briefing */
.brief .lbl .dbl{min-height:22px;padding:0 8px;font-size:14px}
.brief .brow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.brief .elc{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid #ff7a66;color:#ff9c8f;font-weight:900;font-size:max(15px,calc(var(--k)*17px));letter-spacing:.04em;background:rgba(255,59,48,.1)}
.brief .elc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.brief .bmod{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.brief .bm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brief .bmd{font-size:max(14px,calc(var(--k)*15px));color:#e9dcc2;letter-spacing:.02em;line-height:1.2}
.brief.isdaily{border-color:#ffd24a}
.brief.st-redline{border-color:rgba(107,150,255,.85)}
@media (orientation:landscape) and (max-height:520px){.brief{padding:8px 12px;gap:10px;max-height:96vh;grid-template-columns:max(128px,calc(var(--k)*130px)) 1fr}.brief .goals{gap:2px;margin:2px 0}.brief .goals div{font-size:14px}.brief .goals .star{width:18px;height:18px}.brief .bounty{min-height:34px!important;font-size:15px!important;padding:0 10px}.brief .elc{min-height:34px;font-size:14px}.brief .bm{gap:6px}.brief .acts{margin-top:4px}.brief .wr{margin-top:2px}.brief h3{font-size:24px}.brief .info{min-width:0}}
@media (orientation:portrait){.brief{max-height:96vh;padding:12px;gap:8px}.brief .poster img{max-height:calc(var(--k)*120px)}.brief .goals div{font-size:15px}.brief .goals{gap:3px;margin:2px 0}.brief .bounty{min-height:36px!important}.brief .elc{min-height:36px}}
/* ---- results: elite stamp / wall / daily strip */
.xrow{display:flex;flex-direction:column;gap:5px;min-width:0}
.xr{display:flex;align-items:center;gap:8px;padding:3px 10px;min-height:40px;border-radius:12px;background:rgba(255,241,214,.07);border:1px solid rgba(255,241,214,.28);flex:1 1 auto;min-width:0}
.xr .xt{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.xr .xt b{font-size:max(14px,calc(var(--k)*15px));font-weight:900;letter-spacing:.04em;color:var(--cream)}
.xr .xt span{font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;letter-spacing:.03em}
.xr .xi svg{width:22px;height:22px;display:block;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.xr.dl .xi svg{fill:#ff8a2a;stroke:#ffd24a}.xr.ms .xi svg{fill:var(--gold);stroke:#a8641a}
.xr.el{border-color:#e0281d;background:rgba(224,40,29,.12)}.xr.el .xt b{color:#ff9c8f}
.xr.ms{border-color:var(--gold);background:rgba(255,225,77,.12);animation:slidein .45s .9s both}.xr.ms .xt b{color:var(--gold)}
.xr.el{padding-left:24px}.xthumb{position:relative;flex:none;height:52px;width:40px;display:block}.xthumb img{height:100%;width:100%;object-fit:contain;display:block}.xthumb.dim img{filter:grayscale(.8) brightness(.6)}
.stamp{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-16deg);font-style:normal;font-weight:900;font-size:14px;letter-spacing:.06em;color:#e0281d;border:3px solid #e0281d;border-radius:5px;padding:0 5px;background:rgba(255,241,214,.86);white-space:nowrap;line-height:1.15;pointer-events:none}
.xthumb .stamp{font-size:14px;animation:stampin .5s .8s cubic-bezier(.2,1.9,.4,1) both;left:50%;top:55%}
@keyframes stampin{0%{opacity:0;transform:translate(-50%,-50%) rotate(-16deg) scale(3)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-16deg) scale(1)}}
@media (orientation:landscape){.res .mid:has(.xrow){grid-template-columns:1.1fr 1fr 1.05fr}}
@media (orientation:landscape) and (max-height:520px){.xr{min-height:34px;padding:1px 8px}.xr.el{padding-left:20px}.xthumb{height:44px;width:34px}}
/* ======================= WANTED WALL */
#scrWall .head{padding:8px calc(var(--k)*16px)}#scrWall .head .btn.ico{width:56px;height:56px}
#scrWall .wcol{position:absolute;left:calc(var(--k)*16px);right:calc(var(--k)*16px);top:76px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:none}
#scrWall .wcol>*{pointer-events:auto}
#scrWall .wcount svg{stroke:var(--gold)}
.wrail{flex:none;display:flex;flex-direction:column;gap:6px;position:relative}
.rbar{height:8px;border-radius:5px;background:rgba(255,241,214,.15);border:1px solid rgba(255,241,214,.3);overflow:hidden}
.rbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb347,#ffe14d)}
.rnodes{display:flex;gap:8px}
.rn{flex:1;display:flex;align-items:center;gap:8px;min-height:40px;padding:2px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,225,77,.3) var(--f,0%),rgba(20,24,31,.92) var(--f,0%));border:2px solid rgba(255,241,214,.35);min-width:0}
.rn.ok{border-color:var(--green)}
.rno{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--gold);font-size:max(16px,calc(var(--k)*18px));font-weight:900}
.rn:not(.ok) .rno{color:#d9c9ac}
.rno svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rn.ok .rno svg{stroke:var(--green)}
.rtx{font-size:max(14px,calc(var(--k)*14px));color:var(--cream);letter-spacing:.02em;line-height:1.1;display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.rtx .sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--cream)}
.wallbd{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px 12px;border-radius:16px;border:5px solid #5b3a1b;box-shadow:inset 0 0 40px rgba(40,20,5,.55),0 10px 30px rgba(0,0,0,.45),0 0 0 2px rgba(255,210,150,.25);
 background:radial-gradient(circle at 22% 30%,rgba(86,46,18,.42) 0 1.6px,transparent 2.4px) 0 0/9px 9px,radial-gradient(circle at 68% 62%,rgba(255,226,170,.28) 0 1.3px,transparent 2.2px) 0 0/13px 13px,radial-gradient(circle at 40% 55%,rgba(60,30,10,.3) 0 2px,transparent 3px) 0 0/17px 17px,radial-gradient(ellipse at 50% 35%,#cf9358,#a56a36 80%);scrollbar-width:thin}
.wsec{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.wband{position:relative;overflow:hidden;height:32px;min-height:32px;border-radius:8px;border:2px solid rgba(255,241,214,.7);display:flex;align-items:center;padding:0 12px;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.wband .start{position:absolute;inset:0;width:100%;height:100%}
.wband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,6,.8),rgba(14,10,6,.3) 75%,rgba(14,10,6,.1))}
.wband.st-daily{background:linear-gradient(90deg,#4a340a,#8a5a10)}
.wbt{position:relative;z-index:1;font-size:max(14px,calc(var(--k)*16px));font-weight:900;letter-spacing:.1em;color:var(--cream);text-shadow:0 2px 0 rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;grid-auto-rows:var(--wrow,140px)}
.wslot{position:relative;display:flex;gap:8px;height:var(--wrow,140px);padding:6px;border-radius:12px;background:rgba(20,24,31,.9);border:2px solid rgba(255,241,214,.3);box-shadow:0 6px 12px rgba(0,0,0,.4);cursor:pointer;min-width:0;container-type:inline-size}
.wslot:nth-child(2n){transform:rotate(.5deg)}.wslot:nth-child(3n){transform:rotate(-.5deg)}
.wslot::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#c01a10 70%);box-shadow:0 3px 3px rgba(0,0,0,.5);z-index:3}
.wslot.focus{outline:3px solid var(--cream);outline-offset:2px}
.wpost{position:relative;flex:none;height:100%;aspect-ratio:400/522;container-type:inline-size}
.wpost .pw{display:block;height:100%}.wpost .pw img{height:100%;width:100%;object-fit:contain}
.wslot .plate{display:none}
.winfo{display:flex;flex-direction:column;gap:2px;min-width:0;justify-content:center;flex:1}
.wk{font-size:14px;letter-spacing:.14em;color:var(--amber);line-height:1.1}
.wn{font-size:clamp(15px,6.6cqw,21px);font-weight:900;line-height:1.05;text-transform:uppercase;overflow-wrap:break-word}
.wl{font-size:14px;color:#d9c9ac;line-height:1.15;letter-spacing:.02em}
.wl .paid{color:var(--green);font-weight:900}.wl .paid.o{color:var(--gold)}
.wl .req{display:inline-flex;gap:5px;align-items:flex-start;color:#ffb6a8}
.wl .req svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;margin-top:1px}
.wslot.done{border-color:rgba(88,224,122,.65)}
.wslot.open{border-color:rgba(255,179,71,.8)}
.wslot.locked{background:rgba(14,16,22,.88)}
.wslot.locked .pw img{filter:brightness(.1) contrast(1.1)}
.wslot.locked .wpost::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--wrow,140px)*.4);font-weight:900;color:rgba(255,241,214,.28)}
.wslot.locked:not(.next) .wn{color:#8d8a80}
.wslot.next{border:3px solid #ffd24a;animation:wpulse 1.3s ease-in-out infinite;background:rgba(40,30,8,.94)}
@keyframes wpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,74,.7),0 0 12px rgba(255,210,74,.4)}50%{box-shadow:0 0 0 6px rgba(255,210,74,.18),0 0 26px rgba(255,210,74,.75)}}
.wslot.next .wk{color:#ffd24a}
.wpost .stamp{font-size:max(14px,17cqw);top:46%;left:50%;padding:0 3px;letter-spacing:.02em}
.wslot.done .wpost .stamp{animation:stampin .45s both cubic-bezier(.2,1.9,.4,1)}
@media (orientation:landscape) and (max-height:520px){
 #scrWall .wcol{top:60px;gap:5px;bottom:6px}
 .rn{min-height:36px}.wband{height:30px;min-height:30px}
}
@media (orientation:portrait){
 #scrWall .wcol{top:calc(var(--k)*78px);left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom))}
 .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;margin-top:6px}
 .wslot{flex-direction:column;align-items:center;text-align:center;padding:8px 6px}
 .wpost{height:calc(var(--wrow)*.5)}
 .winfo{justify-content:flex-start;align-items:center;flex:none;width:100%}
 .wl{font-size:14px}.wl .req{text-align:left}
 .rn{padding:2px 6px;gap:4px}.rtx{font-size:14px}.rnodes{gap:5px}
 .rno{font-size:16px}
 .wbt{letter-spacing:0}
 #scrWall .wcount{padding:0 10px;font-size:16px}#scrWall .head h2{font-size:22px;letter-spacing:.03em}
}
/* M3 contentui pass 2: compact cards, stacked daily buttons on short landscape, tabs dock into the head at 844x390 */
@media (orientation:portrait),(orientation:landscape) and (max-height:599px){
 #scrBoard .bd2 .ccard{grid-template-columns:clamp(98px,38%,150px) minmax(0,1fr)}
 #scrBoard .ccard .mdc{white-space:normal;line-height:1.05;padding:3px 8px;letter-spacing:.02em;border-radius:14px}
 #scrBoard .ccard .bn{white-space:nowrap;font-size:max(16px,calc(var(--k)*17px))}
 #scrBoard .ccard .nm{font-size:max(18px,calc(var(--k)*21px))}
 #scrBoard .ccard .best{letter-spacing:0}
}
.ccard .lock{background:rgba(10,13,20,.9)}
@media (orientation:landscape) and (max-height:599px){
 #scrBoard .dact{flex-direction:column;align-items:stretch;gap:6px}
}
@media (orientation:landscape) and (max-height:460px){
 #scrBoard .sttabs{position:absolute;top:-54px;left:56px;right:262px;height:48px;z-index:4}
 #scrBoard .head h2{visibility:hidden}
 #scrBoard .head{padding-right:8px}
 #scrBoard .stripw{padding:0 28px}#scrBoard .bd2{inset:0 28px}
}
@media (orientation:landscape) and (min-height:600px){
 #scrBoard .bd2 .ccard{display:grid;grid-template-columns:clamp(110px,44%,170px) minmax(0,1fr);grid-template-areas:"mug no" "mug nm" "mug cm" "mug bn" "mug sbr";grid-template-rows:auto auto auto auto 1fr;column-gap:14px;row-gap:5px;padding:14px}
 #scrBoard .ccard .no{display:block;grid-area:no;font-size:14px;letter-spacing:.06em}
 #scrBoard .ccard .mug{grid-area:mug;align-self:center;height:auto;flex:none;position:static;min-height:0}
 #scrBoard .ccard .mug .pw{position:relative;inset:auto;height:auto;display:block}#scrBoard .ccard .mug .pw img{height:auto;width:100%;max-height:none}
 #scrBoard .ccard .nm{grid-area:nm;min-height:0;font-size:max(20px,calc(var(--k)*23px))}#scrBoard .ccard .cm{grid-area:cm}#scrBoard .ccard .bn{grid-area:bn;white-space:nowrap}#scrBoard .ccard .sbr{grid-area:sbr;margin-top:0;align-self:end}
 #scrBoard .ccard .pw .plate{letter-spacing:0;font-size:14px;left:9%;right:9%}
 #scrBoard .ccard .mdc{white-space:normal;line-height:1.05;padding:3px 8px;border-radius:14px}
}
@media (orientation:landscape) and (min-height:600px){#scrBoard .ccard .bn{font-size:max(16px,calc(var(--k)*16px))}}
/* M3 contentui pass 2: wall on short landscape + portrait header / rail */
@media (orientation:landscape) and (max-height:599px){
 .wpost{height:min(100%,94px)}
 .wslot{align-items:center}
 .wslot:not(.next) .wk{display:none}
 .wl{line-height:1.1}
}
@media (orientation:portrait){
 .rtx .pn{display:none}
 #scrWall .head h2{font-size:19px;letter-spacing:0;white-space:nowrap}
 #scrWall .wcount{padding:0 8px;gap:4px;font-size:15px;white-space:nowrap}#scrWall .wcount svg{display:none}
 #scrWall .head{gap:8px;padding:8px 10px}
}
@media (orientation:landscape) and (max-height:599px){
 .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wpost{height:calc(var(--wrow) - 16px)}
 .wslot:not(.next) .wk{display:block}
}
@media (orientation:portrait){.rno svg{display:none}.rtx{flex-wrap:nowrap;white-space:nowrap}.rn{padding:2px 6px}}
.xrow .xr{flex:none}
.res .mid>div:nth-child(2){display:flex;flex-direction:column;gap:calc(var(--k)*8px)}
@media (orientation:landscape) and (max-height:520px){.res .mid>div:nth-child(2){gap:4px}}
.xr.el{gap:18px;padding-left:26px}
/* M3 contentui pass 3: results strip compaction (box <= 85 % of the viewport at 4 sizes), briefing width on short landscape, title badge on 390 */
.xr .xt{display:block;line-height:1.15}.xr .xt span{display:inline;margin-left:4px}.xr .xt b{display:inline}
.xr{min-height:34px;padding:3px 10px}
.xr.el .xt b{display:block}.xr.el .xt span{margin-left:0}
.xthumb{height:46px;width:36px}
@media (orientation:landscape) and (min-height:600px){.res .ln2{font-size:max(15px,calc(var(--k)*16px));padding:1px 0}.res .ln2.tot{font-size:max(20px,calc(var(--k)*24px))}}
@media (orientation:portrait){
 .res .mid{grid-template-columns:1fr 1fr;gap:6px 10px}
 .res .mid>div.xrow:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:5px}
 .res .ln2{font-size:15px}
 .xr{padding:2px 8px;min-height:44px}.xr.el{padding-left:24px;gap:14px}
 .xr .xt b,.xr .xt span{font-size:14px}.xr .xi svg{width:20px;height:20px}
}
@media (orientation:landscape) and (max-height:520px){.brief{width:min(96vw,820px)}}
@media (orientation:portrait){.btn.tdaily{padding:0 8px;gap:4px}.btn.tdaily .tdt{padding-right:0}#scrTitle .tr{gap:calc(var(--k)*6px)}}
.res .xr .xt b{font-size:15px}.res .xr .xt span{font-size:14px}.res .xr{min-height:0;padding:3px 10px}
@media (orientation:portrait){.res .xr{min-height:44px;padding:2px 8px}}
.res .xr .xt span{display:block;margin-left:0}.res .xr .xt b{display:block}.res .xr.wl .xt b,.res .xr.wl .xt span{display:inline}.res .xr.wl .xt span{margin-left:6px}
@media (orientation:portrait){
 .res .mid .xrow .xr.el,.res .mid .xrow .xr.ms{grid-column:1/-1}
 .res .wr{min-height:56px}.res .stars .star{width:34px;height:34px}
}
@media (orientation:landscape) and (max-height:520px){.res .xr{padding:2px 8px}.res .xr .xt b{font-size:14px}.res .xr.ms .xt span,.res .xr.dl .xt span{font-size:14px}.res .mid:has(.xrow){grid-template-columns:1fr .9fr 1.2fr}.xthumb{height:40px;width:31px}}
@media (orientation:portrait){.res .xr.wl .xt span,.res .xr.dl .xt span{display:none}.res .xr{min-height:36px}.res .sub{font-size:14px;letter-spacing:.06em;line-height:1.15}.res .wr .ln{font-size:14px;line-height:1.15}.res .wr{min-height:52px;padding-top:3px;padding-bottom:3px}.res .wr .face{width:44px;height:44px;min-width:44px;min-height:44px}.res .acts{gap:6px}}
@media (orientation:portrait){.res .ln2{font-size:14px;padding:0;line-height:1.2}.res .ln2.tot{font-size:19px;margin-top:2px}.res .lines{gap:2px}.res .mid>div.xrow:last-child{align-content:start;align-items:start}}
#scrTitle .row2{gap:calc(var(--k)*8px)}
#scrTitle .row2 .btn{flex:1 1 auto;padding:0 calc(var(--k)*12px);font-size:max(15px,calc(var(--k)*16px));letter-spacing:.03em}
#scrTitle .row2 .btn svg:not(.star){display:none}
/* M3 hud: WRENCH box. .cmp = compact form for long lines (no portrait, 14 px, tight) so every line fits in 2 lines; landscape <= 520 px high: the box moves to the left column (never over the car / weapon chip / buttons) */
.runwr.cmp .face{display:none}.runwr.cmp{border-radius:14px;padding:6px 12px}.runwr.cmp .ln{font-size:14px;letter-spacing:0}
@media (orientation:landscape) and (max-height:520px){.runwr{left:10px;right:auto;margin:0;width:400px;max-width:calc(100vw - 20px);bottom:auto;top:max(100px,calc(var(--k)*100px))}}
/* M3 contentui pass 4: badges are a full-width row under the three columns (they appear last and used to push the box past 85 %); stamp / best-line fixes */
.res .badges{flex:none;justify-content:center;min-height:0}
.res .badges:empty{display:none}
.xthumb .stamp{left:30%}
#scrBoard .ccard .best{white-space:normal;line-height:1.15}
@media (orientation:landscape) and (min-height:600px){.res .stars .star{width:40px;height:40px}.res .wr{min-height:60px}.res .wr .face{width:46px;height:46px}}
@media (orientation:landscape) and (max-height:520px){.res{grid-template-areas:"h2 h2" "sub sub" "mid mid" "bdg bdg" "slot acts"}.res .badges{grid-area:bdg;justify-content:flex-start}}
.xr.el{gap:30px;padding-left:32px}
@media (orientation:landscape) and (min-height:600px){.res h2{font-size:max(24px,calc(var(--k)*30px))}.res{gap:calc(var(--k)*5px)}}
@media (orientation:landscape) and (max-height:520px){#scrBoard .ccard .pw .plate{left:12%;right:12%;font-size:14px;letter-spacing:0}}
@media (orientation:landscape) and (max-height:520px){.res{grid-template-areas:"h2 h2" "sub bdg" "mid mid" "slot acts"}.res .badges{grid-area:bdg;justify-content:flex-end;flex-wrap:nowrap}.res .badge{padding:0 8px;letter-spacing:0;white-space:nowrap}}
@media (orientation:portrait){.res .badge{padding:0 8px;letter-spacing:0;white-space:nowrap}.res .badges{gap:4px;flex-wrap:wrap}.res h2{font-size:22px}.res{padding:8px 10px;gap:3px}.res .wr{min-height:48px}.res .mid>div.xrow:last-child{gap:4px}}
@media (orientation:portrait),(orientation:landscape) and (max-height:599px){#scrBoard .bd2 .ccard{grid-template-columns:clamp(116px,38%,150px) minmax(0,1fr)}}

.mugcard{right:calc(var(--k)*10px);width:calc(var(--k)*230px)}
@media (orientation:portrait){.mugcard{right:calc(var(--k)*10px);width:calc(var(--k)*150px)}}
@media (orientation:landscape) and (max-height:520px){.res .sub{letter-spacing:.03em;white-space:nowrap;font-size:14px}}
@media (orientation:landscape){.mugcard{top:calc(var(--k)*58px + 118px)}}
@media (orientation:landscape) and (max-height:520px){.banner:not(.compact){top:48%}}
@media (orientation:landscape) and (max-height:520px){.mugcard{width:128px;top:calc(var(--k)*58px + 100px)}.mugcard .mn b{font-size:17px;letter-spacing:.03em}.mugcard .mn span{font-size:12px}}   /* M3 boss2 fix: the card was 203 px tall and met the weapon chip with the rocket line (BRAZIER, 844x390) */
@media (orientation:landscape) and (max-height:460px){#scrBoard .sttab .sx{display:none}#scrBoard .sttab.locked{flex:1.8}#scrBoard .sttab .stl{white-space:nowrap}}
@media (orientation:landscape) and (max-height:460px){#scrBoard .sttab.locked{flex:2.4}#scrBoard .sttab .stl{letter-spacing:0;font-size:14px}#scrBoard .sttab .stx{padding:3px 8px}}
@media (orientation:landscape) and (max-height:460px){#scrBoard .sttabs{right:244px}#scrBoard .sttab.locked{flex:3}#scrBoard .sttab:not(.locked){flex:1}}
#scrBoard .bnav.l{left:calc(var(--k)*-16px + 2px)}#scrBoard .bnav.r{right:calc(var(--k)*-16px + 2px)}
@media (orientation:portrait){.bossbar .hp{gap:2px}.bossbar .seg1 em{letter-spacing:-.03em}}
@media (orientation:landscape) and (max-height:520px){.banner:not(.compact){top:50%}.banner:not(.compact) b{font-size:26px;line-height:1}.banner:not(.compact) span{font-size:14px;line-height:1.1}.toast{bottom:max(calc(var(--k)*100px),84px)}}

/* ===================================================================== M4 (v0.10.0): danger + progression ===================================================================== */
/* ---- HUD: special slot, gadgets, armor warning, hunter arrow ---- */
.br{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wchip .wname{font-size:max(12px,calc(var(--u)*15px))}
.wchip.pri-scatter{border-color:#ff7a2a}.wchip.pri-rail{border-color:#fff1d6}.wchip.pri-coil{border-color:#4fd8ff}
.schip,.gchip{position:relative;display:flex;align-items:center;gap:calc(var(--u)*8px);padding:calc(var(--u)*5px) calc(var(--u)*12px);border-radius:12px;background:rgba(20,24,31,.88);border:2px solid rgba(255,179,71,.55);min-width:calc(var(--u)*150px);overflow:hidden;font-size:max(14px,calc(var(--u)*13px));color:#fff1d6}
.schip .sk,.gchip .gk{min-width:calc(var(--u)*22px);height:calc(var(--u)*22px);padding:0 4px;border-radius:6px;border:2px solid #ffb347;border-bottom-width:4px;display:inline-flex;align-items:center;justify-content:center;font-size:max(14px,calc(var(--u)*13px));color:#ffb347}
.schip .sn,.gchip .gn{flex:1;white-space:nowrap}
.schip .sp{display:flex;gap:3px}.schip .sp u{width:calc(var(--u)*8px);height:calc(var(--u)*12px);border-radius:2px;background:#3a3f4a}.schip .sp u.on{background:#ff6a4a}
.schip.sp-mines .sp u.on{background:#9be85a}.schip.empty{opacity:.6}
.schip .cdb,.gchip .cdb{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}.schip .cdb u,.gchip .cdb u{display:block;height:100%;width:100%;background:#ff3b30;transform-origin:left;transform:scaleX(0)}
.gchip svg{width:calc(var(--u)*20px);height:calc(var(--u)*20px);fill:none;stroke:#2ee6d6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gchip.ready{border-color:#2ee6d6;box-shadow:0 0 10px rgba(46,230,214,.4)}.gchip.used{opacity:.45}
.warnov{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse farthest-corner at center,rgba(255,30,20,0) 52%,rgba(255,30,20,.5) 100%)}
.warnov.on{animation:warnp .83s ease-in-out infinite}@keyframes warnp{0%,100%{opacity:.15}50%{opacity:1}}
.armor.low .lbl{color:#ff8a7e}
.tbtn.g1,.tbtn.g2{width:64px;height:64px;font-size:12px;line-height:1.05;text-align:center;border-color:#2ee6d6;color:#2ee6d6;padding:4px}
.tbtn.g1{bottom:calc(240px + env(safe-area-inset-bottom));right:calc(30px + env(safe-area-inset-right))}.tbtn.g2{bottom:calc(240px + env(safe-area-inset-bottom));right:calc(104px + env(safe-area-inset-right))}
@media (orientation:portrait){body.touch .tbtn.g1{bottom:calc(228px + env(safe-area-inset-bottom));right:20px}body.touch .tbtn.g2{bottom:calc(228px + env(safe-area-inset-bottom));right:94px}.schip,.gchip{min-width:0}}
.acue[data-t=hunter] svg{stroke:#ff4a3a;filter:drop-shadow(0 0 6px rgba(255,60,40,.95)) drop-shadow(0 2px 0 rgba(20,24,31,.9))}
.acue[data-t=hunterwarn]{animation-duration:.1s}.acue[data-t=hunterwarn] svg{stroke:#ff1010;stroke-width:7;filter:drop-shadow(0 0 10px rgba(255,20,10,1)) drop-shadow(0 2px 0 rgba(20,24,31,.9))}
/* ---- WRECKED overlay ---- */
#wreckOv{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--k,1)*10px);text-align:center;pointer-events:none;padding:0 4vw;background:radial-gradient(ellipse at center,rgba(70,0,0,.15) 0%,rgba(20,0,0,.72) 100%)}
#wreckOv.on{display:flex;animation:wkin .35s ease-out}@keyframes wkin{0%{opacity:0}100%{opacity:1}}
#wreckOv .wk{font-weight:900;font-size:max(64px,17vh);line-height:1;letter-spacing:.06em;color:#ff4a3a;transform:skewX(-7deg);text-shadow:0 0 0 #14181f,-4px -4px 0 #14181f,4px -4px 0 #14181f,-4px 4px 0 #14181f,4px 4px 0 #14181f,0 8px 0 #14181f,0 0 32px rgba(255,60,30,.75);animation:wkp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes wkp{0%{transform:skewX(-7deg) scale(2.6);opacity:0}100%{transform:skewX(-7deg) scale(1);opacity:1}}
#wreckOv .wby{font-weight:900;font-size:max(22px,4.4vh);letter-spacing:.1em;color:#fff1d6;text-shadow:0 3px 0 rgba(20,24,31,.95)}
#wreckOv .wtip{display:flex;align-items:center;gap:12px;max-width:min(92vw,640px);padding:10px 16px;border-radius:14px;background:rgba(20,24,31,.9);border:2px solid #ffb347;font-size:max(16px,2.6vh);line-height:1.25;color:#fff1d6}
#wreckOv .wface{flex:0 0 auto;width:max(48px,8vh);height:max(48px,8vh);border-radius:50%;border:2px solid #ffb347;background:center/cover no-repeat}
#wreckOv .wtx{text-align:left}
#wreckOv .wcsh{font-weight:900;font-size:max(18px,3.2vh);letter-spacing:.08em;color:#ffe14d;text-shadow:0 2px 0 #14181f}
#wreckOv .wbt2{display:flex;gap:14px;margin-top:6px;pointer-events:auto}
#wreckOv .wbt2 .btn{pointer-events:auto;min-height:56px}
/* ---- results: wrecked + pursuit ---- */
.res.wrecked h2{color:#ff4a3a;letter-spacing:.08em}
.res .killer{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;padding:6px 12px;border-radius:12px;background:rgba(255,59,48,.14);border:2px solid rgba(255,90,70,.6)}
.res .killer b{font-size:max(16px,calc(var(--k)*18px));letter-spacing:.08em;color:#ff8a7e}.res .killer span{font-size:max(14px,calc(var(--k)*15px));color:#fff1d6;line-height:1.25}
.badge.unl{border-color:#58e07a;color:#58e07a}
/* ---- title / garage extras ---- */
#scrTitle .bestlvl{position:absolute;left:0;right:0;top:calc(var(--k)*8px);text-align:center;display:none;font-weight:900;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.12em;color:#ffb347;text-shadow:0 2px 0 rgba(20,24,31,.9);pointer-events:none}
#scrTitle .tr .tunl{margin-right:4px}#scrTitle .tr .tunl svg.u,#btnGarUnl svg.u{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4}
#scrGarage .garbest{position:absolute;left:calc(var(--k)*16px);top:calc(var(--k)*70px);font-weight:900;font-size:max(14px,calc(var(--k)*14px));letter-spacing:.1em;color:#ffb347;text-shadow:0 2px 0 rgba(20,24,31,.9)}
#scrGarage .head .btn.sm{margin-left:auto}
/* ---- next 3 unlocks strip ---- */
.nextUnlocks{display:flex;gap:calc(var(--k)*8px);align-items:stretch;pointer-events:auto}
.nextUnlocks .nuh{display:none}
.nextUnlocks .nu{flex:1 1 0;min-width:0;display:grid;grid-template-columns:calc(var(--k)*26px) 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:calc(var(--k)*6px) calc(var(--k)*10px);border-radius:12px;background:rgba(20,24,31,.9);border:2px solid rgba(255,179,71,.55)}
.nextUnlocks .nu i{grid-row:1/3;width:calc(var(--k)*26px);height:calc(var(--k)*26px);min-width:20px}.nextUnlocks .nu i svg{width:100%;height:100%;fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nextUnlocks .nu b{font-size:max(14px,calc(var(--k)*14px));font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.nextUnlocks .nu span{font-size:max(14px,calc(var(--k)*12px));color:#d9c9ac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
@media (orientation:landscape){#scrGarage .nextUnlocks{position:absolute;left:calc(var(--k)*16px);bottom:calc(var(--k)*16px);width:calc(100vw - min(48vw,calc(var(--k)*470px)) - calc(var(--k)*48px))}
 #scrBoard .nextUnlocks{margin:calc(var(--k)*2px) calc(var(--k)*6px) 0}}
@media (orientation:portrait){#scrGarage .nextUnlocks{position:absolute;left:calc(var(--k)*12px);right:calc(var(--k)*12px);top:calc(var(--k)*100px)}#scrGarage .garbest{top:calc(var(--k)*72px)}
 .nextUnlocks .nu{grid-template-columns:1fr;grid-template-rows:auto auto}.nextUnlocks .nu i{display:none}.nextUnlocks .nu b{white-space:normal;line-height:1.1;font-size:14px}.nextUnlocks .nu span{white-space:normal;font-size:14px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #scrBoard .nextUnlocks{margin:4px 0 0}}
/* ---- roadmap screen ---- */
#scrUnlocks .unlcol{position:absolute;left:0;right:0;top:calc(var(--k)*74px);bottom:0;display:flex;flex-direction:column;gap:calc(var(--k)*10px);padding:0 calc(var(--k)*16px) calc(var(--k)*14px);pointer-events:none}
#scrUnlocks .nextUnlocks.big .nuh{display:block;position:absolute;margin-top:calc(var(--k)*-1px);font-size:14px}
#scrUnlocks .nextUnlocks.big{flex:0 0 auto}
#scrUnlocks .unllist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(var(--k)*6px);padding-right:4px;pointer-events:auto;-webkit-overflow-scrolling:touch}
.unlhd{font-weight:900;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.12em;color:#ffb347;padding:2px 2px}
.urow2{display:grid;grid-template-columns:calc(var(--k)*34px) 1fr auto;align-items:center;gap:12px;padding:calc(var(--k)*7px) calc(var(--k)*12px);border-radius:12px;background:rgba(20,24,31,.86);border:2px solid rgba(255,241,214,.18)}
.urow2 .ui{width:calc(var(--k)*34px);height:calc(var(--k)*34px);min-width:26px;display:block}.urow2 .ui svg{width:100%;height:100%;fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.urow2 .un{display:flex;flex-direction:column;min-width:0}.urow2 .un b{font-size:max(15px,calc(var(--k)*17px));font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--cream)}.urow2 .un em{font-style:normal;font-size:max(14px,calc(var(--k)*13px));color:#d9c9ac}
.urow2 .us{width:calc(var(--k)*28px);min-width:24px;height:calc(var(--k)*28px);display:flex;align-items:center;justify-content:center}.urow2 .us svg{width:100%;height:100%;fill:none;stroke:#8c8678;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.urow2 .us small{font-size:14px;color:#14181f;background:var(--amber);border-radius:6px;padding:2px 6px;font-weight:900}
.urow2.done{opacity:.72;border-color:rgba(88,224,122,.4)}.urow2.done .us svg{stroke:var(--green)}.urow2.nxt{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,179,71,.25)}
/* ---- garage weapons tab ---- */
.wrow{display:grid;grid-template-columns:calc(var(--k)*44px) 1fr auto;gap:3px 12px;align-items:center;padding:calc(var(--k)*8px) calc(var(--k)*12px);border-color:color-mix(in srgb,var(--wc,#ffb347) 70%,transparent)}
.wrow.lock{opacity:.78;border-color:rgba(255,241,214,.25)}
.wrow .wic{grid-row:1/4;width:calc(var(--k)*44px);height:calc(var(--k)*44px);min-width:36px;padding:7px;border-radius:12px;background:rgba(255,255,255,.06);border:2px solid color-mix(in srgb,var(--wc,#ffb347) 70%,transparent)}
.wrow .wic svg{width:100%;height:100%;fill:none;stroke:var(--wc,#ffb347);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wrow .wnm{font-size:max(17px,calc(var(--k)*19px));font-weight:900;text-transform:uppercase;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wrow .wnm small{font-size:max(14px,calc(var(--k)*12px));color:#d9c9ac;letter-spacing:.06em}
.wrow .pips2{display:inline-flex;gap:3px}.wrow .pips2 u{width:calc(var(--k)*16px);height:10px;min-width:12px;border-radius:3px;background:#2a303a;border:2px solid rgba(255,241,214,.4)}.wrow .pips2 u.on{background:var(--wc,#ffb347);border-color:#fff1d6}
.wrow .wrl{grid-column:2;font-size:max(14px,calc(var(--k)*13px));color:var(--wc,#ffb347);letter-spacing:.1em;font-weight:900}
.wrow .wds{grid-column:2/4;font-size:max(14px,calc(var(--k)*14px));color:#d9c9ac;line-height:1.25}
.wrow .wst{grid-column:2/4;display:flex;gap:calc(var(--k)*10px);font-size:max(14px,calc(var(--k)*12px));letter-spacing:.1em;color:#d9c9ac}.wrow .wst span{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:8px;background:rgba(255,255,255,.07)}
.wrow .wst i{display:inline-block;width:calc(var(--k)*46px);height:8px;border-radius:5px;background:rgba(255,241,214,.14);position:relative;overflow:hidden}.wrow .wst i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*100%);background:var(--wc,#ffb347)}
.wrow .wbt{grid-column:3;grid-row:1/3;align-self:center}
.wrow .lockreq{display:inline-flex;align-items:center;gap:6px;font-size:max(14px,calc(var(--k)*12px));color:#ff9c8f;letter-spacing:.05em;max-width:calc(var(--k)*150px);line-height:1.15;text-align:right}.wrow .lockreq svg{width:1.3em;height:1.3em;flex:none;fill:none;stroke:#ff9c8f;stroke-width:2.4}
.wrow .cashchip.mx{min-height:40px;font-size:max(14px,calc(var(--k)*15px));color:#58e07a;border-color:#58e07a}
.wrow.gad .wnm small{color:var(--teal)}.wsec{margin:6px 0 0;color:#ffb347;letter-spacing:.12em}
@media (orientation:portrait){.wrow{grid-template-columns:calc(var(--k)*40px) 1fr auto}.wrow .wst{display:none}}
/* ---- loadout ---- */
#scrLoadout .ldbox{position:absolute;left:50%;top:calc(var(--k)*76px);transform:translateX(-50%);width:min(94vw,calc(var(--k)*900px));max-height:calc(100% - var(--k)*92px);overflow-y:auto;padding:calc(var(--k)*12px) calc(var(--k)*16px);display:flex;flex-direction:column;gap:calc(var(--k)*8px);pointer-events:auto}
.ldh{font-weight:900;font-size:max(14px,calc(var(--k)*15px));letter-spacing:.14em;color:#ffb347}
.ldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--k)*200px),1fr));gap:calc(var(--k)*8px)}
.ldc{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:2px solid rgba(255,241,214,.3);color:var(--cream);text-align:left;font-family:inherit;pointer-events:auto}
.ldc .wic{width:calc(var(--k)*34px);height:calc(var(--k)*34px);min-width:28px;flex:none}.ldc .wic svg{width:100%;height:100%;fill:none;stroke:var(--wc,#2ee6d6);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ldc .ln{display:flex;flex-direction:column;min-width:0}.ldc b{font-size:max(15px,calc(var(--k)*17px));font-weight:900;letter-spacing:.04em}.ldc em{font-style:normal;font-size:max(14px,calc(var(--k)*13px));color:#d9c9ac;line-height:1.15}
.ldc.sel{border-color:var(--wc,#2ee6d6);background:color-mix(in srgb,var(--wc,#2ee6d6) 18%,rgba(20,24,31,.9));box-shadow:0 0 0 2px color-mix(in srgb,var(--wc,#2ee6d6) 40%,transparent)}
.ldc.lk{opacity:.5}.ldrow .lockreq{display:inline-flex;align-items:center;gap:6px;color:#ff9c8f;font-size:14px}.ldrow .lockreq svg{width:1.3em;height:1.3em;fill:none;stroke:#ff9c8f;stroke-width:2.4}
.ldacts{display:flex;justify-content:center;margin-top:6px}
@media (orientation:portrait){.ldrow{grid-template-columns:1fr 1fr}.ldc{padding:6px 8px;gap:6px}.ldc em{display:none}}
/* ---- briefing heat selector, pursuit card ---- */
.heatsel{margin:4px 0 2px}.heatsel .hl{font-size:max(14px,calc(var(--k)*13px));letter-spacing:.14em;color:#ffb347}
.hbtns{display:flex;gap:calc(var(--k)*8px);margin:3px 0}.hbtns .btn{flex:1;padding:0 8px;font-size:max(14px,calc(var(--k)*15px))}.hbtns .btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4}
.hbtns .btn.sel{background:var(--amber);color:#14181f;border-color:#fff1d6}.hbtns .btn.lk{opacity:.5}
.heatsel .hinfo{font-size:max(14px,calc(var(--k)*13px));color:#d9c9ac;line-height:1.2;min-height:2.4em}.heatsel .hstars{font-size:14px;color:#ffe14d;letter-spacing:.08em}
.ccard.pcard .plv{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:linear-gradient(180deg,#3a1d12,#14181f)}.ccard.pcard .plv b{font-size:calc(var(--k)*60px);line-height:1;color:#ffb347}.ccard.pcard .plv em{font-style:normal;font-size:14px;letter-spacing:.12em;color:#d9c9ac}
/* ---- M4 layout fixes (after the first screenshot pass) ---- */
.nextUnlocks{flex-wrap:wrap;row-gap:4px}.nextUnlocks .nuh{display:flex!important;flex:0 0 100%;justify-content:space-between;font-weight:900;font-size:max(14px,calc(var(--k)*12px));letter-spacing:.14em;color:#ffb347;text-shadow:0 2px 0 rgba(20,24,31,.9)}.nextUnlocks .nuh em{font-style:normal;color:#ffe14d}
.nextUnlocks .nu b,.nextUnlocks .nu span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12}
#scrUnlocks .nextUnlocks.big .nuh{position:static;margin:0}
@media (orientation:landscape){#scrGarage .nextUnlocks{left:calc(var(--k)*16px);bottom:calc(var(--k)*14px);width:calc(100vw - min(48vw,calc(var(--k)*470px)) - calc(var(--k)*40px))}#scrGarage .head .btn.sm{white-space:nowrap}}
@media (orientation:portrait){#scrGarage .nextUnlocks{position:static!important;width:auto}#scrGarage .gar .nextUnlocks{flex:0 0 auto}}
.gar .tabs .btn{font-size:max(14px,calc(var(--k)*14px));padding:0 4px;letter-spacing:0}
#wreckOv .wk{font-size:min(max(64px,17vh),17vw)}
.wreckon #hud .touch,.wreckon #hud .hint,.wreckon #hud .br,.wreckon #hud .bl{opacity:0;pointer-events:none}
body.touch .gchip{display:none!important}
.res .badges{flex-wrap:wrap;justify-content:center}

.unlchip{position:absolute;left:50%;top:calc(var(--k)*8px);transform:translate(-50%,-30px);opacity:0;display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(20,40,28,.92);border:2px solid #58e07a;color:#58e07a;font-weight:900;font-size:max(14px,calc(var(--k)*16px));letter-spacing:.06em;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:all .35s ease-out}.unlchip.go{opacity:1;transform:translate(-50%,0)}.unlchip svg.u{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4}
@media (orientation:landscape) and (max-height:520px){#scrBoard .nextUnlocks{display:none}}
.tcard::after{content:attr(data-bn);color:#ffe14d}
body.touch .schip .sk{display:none}
.heatsel{margin:2px 0 0}.hbtns{margin:0}
#lvlChip{position:absolute;left:50%;top:calc(var(--u,1)*92px);transform:translateX(-50%);padding:2px 14px;border-radius:14px;background:rgba(40,22,10,.88);border:2px solid #ffb347;color:#ffd24a;font-weight:900;letter-spacing:.12em;font-size:max(14px,calc(var(--u,1)*15px));white-space:nowrap;pointer-events:none;z-index:5}#lvlChip.go{animation:lvlp .6s ease-out}@keyframes lvlp{0%{transform:translateX(-50%) scale(1.5)}100%{transform:translateX(-50%) scale(1)}}
@media (orientation:portrait){#btnGarUnl{display:none}}
.ldacts{position:sticky;bottom:-4px;padding:6px 0 2px;background:linear-gradient(180deg,rgba(20,24,31,0),rgba(20,24,31,.95) 40%)}

/* ---- v0.11.0 CEO phone fixes (QA_BUGS P1-1, P1-3, P2-4, wreck buttons) ---- */
#wreckOv .wk{font-size:min(max(48px,17vh),12.5vw);letter-spacing:.03em}
#wreckOv .wbt2{flex-wrap:wrap;justify-content:center;max-width:94vw}
@media (max-width:440px){#scrTitle .tag{font-size:12px;letter-spacing:.04em;padding:0 8px;white-space:nowrap}#scrTitle .tag .tl{display:none}#loadTitle{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#wreckOv .wbt2 .btn{padding-left:18px;padding-right:18px}}

/* ---- v0.11.0 layout fixes (QA_BUGS #2-#7; tests/v011_checks.py layout_checks) ---- */
@media (orientation:portrait){
 body.touch .runbar{left:12px;transform:none;width:calc(100vw - 24px - 192px);align-items:flex-start}
 body.touch .runbar .nm{gap:6px;letter-spacing:.04em;font-size:13px}body.touch .runbar .gl{gap:3px;font-size:12px;flex-wrap:wrap;max-width:100%}body.touch .runbar .gl span{padding:1px 5px;gap:2px}
 body.touch #modChip{left:12px!important;transform:none!important}
 body.touch .br{top:calc(var(--u)*80px + 58px)!important}
}
@media (max-width:440px){#loadTitle{max-width:none!important;flex:none;overflow:visible!important;text-overflow:clip!important;font-size:13px;letter-spacing:.03em;padding-left:10px;padding-right:10px}}
@media (orientation:landscape) and (max-height:560px){
 #scrTitle{--lw:min(46vw,calc(var(--k)*470px),calc((100vh - 250px)/.49))}
 #scrTitle .logo{top:60px;width:var(--lw)}#scrTitle .tag{top:calc(60px + var(--lw)*.49 + 2px)}
 #scrTitle .tl{top:8px;left:12px}#scrTitle .menu{bottom:28px}
 .ldc{min-height:40px;padding:4px 10px}.ldc em{display:none}
 .ldacts{position:absolute;top:8px;left:50%;width:max-content;transform:translateX(-50%);margin:0;padding:0;background:none;z-index:6}.ldacts,.ldacts .btn{pointer-events:auto!important}.ldacts{height:44px;align-items:center}.ldacts .btn{height:44px;min-height:44px;padding:0 22px;align-self:center}
 #scrGarage .nextUnlocks{display:none}
}
#garBody .lbl{color:#ffe9c4;text-shadow:0 2px 0 rgba(20,24,31,.95),0 0 8px rgba(20,24,31,.9);margin:6px 0 4px}
#garBody .sw{gap:10px;margin-bottom:6px}#garBody .sw button{min-width:64px}#garBody .sw button span{font-size:12px;padding:0 3px;white-space:nowrap}
/* ---- v0.11.0 CEO phone polish 2 (390x844 screenshots: logo Y and JACKAL RUN chip touching the right edge) ---- */
@media (orientation:portrait) and (max-width:440px){
 #scrTitle .logo{width:min(72vw,calc(var(--k)*400px));transform:translateX(-50%)}
 #scrLoadout .head h2{font-size:24px;letter-spacing:.02em}
 #loadTitle{max-width:calc(100vw - 210px)!important;overflow:hidden!important;white-space:nowrap}
}

/* ======================================================================= v0.12.0: next-unlock chip in the run HUD + phone text floors */
.nxchip{position:absolute;display:none;flex-direction:column;gap:3px;box-sizing:border-box;padding:3px 10px 5px;border-radius:10px;background:rgba(20,24,31,.78);border:1px solid rgba(255,241,214,.35);pointer-events:none;z-index:4;text-align:center}
.nxchip.on{display:flex}
.nxchip .nxt{font-size:12px;letter-spacing:.06em;color:#fff1d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(20,24,31,.9)}
.nxchip .nxb{display:block;height:6px;border-radius:4px;background:rgba(255,241,214,.18);overflow:hidden}
.nxchip .nxb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ffe14d);transition:width .25s}
.nxchip.rdy{border-color:#58e07a}.nxchip.rdy .nxt{color:#58e07a}.nxchip.rdy .nxb i{background:#58e07a}
#wreckOv .wnx{font-weight:900;font-size:max(14px,2.5vh);letter-spacing:.05em;color:#fff1d6;text-shadow:0 2px 0 #14181f;max-width:92vw}
@media (orientation:landscape) and (max-height:520px){#wreckOv{gap:calc(var(--k,1)*6px)}#wreckOv .wk{font-size:min(max(48px,14vh),12.5vw)}}
.res .dres{min-height:44px;margin-top:6px;width:100%;font-size:max(12px,calc(var(--k)*13px));letter-spacing:.05em;white-space:normal}.res .dres.ready{border-color:#ffe14d;color:#ffe14d}.res .dres:disabled{opacity:.75}

/* v0.12.1: cue pill (focus / sound) */
.gatepill{position:absolute;left:50%;top:38%;transform:translateX(-50%);display:none;max-width:90vw;box-sizing:border-box;padding:8px 16px;border-radius:999px;background:rgba(20,24,31,.88);border:2px solid #ffe14d;color:#ffe14d;font-weight:900;font-size:14px;letter-spacing:.08em;white-space:nowrap;pointer-events:none;z-index:6;text-shadow:0 2px 0 rgba(20,24,31,.9)}
.gatepill.on{display:block}.gatepill.focus{animation:gp .8s ease-in-out infinite alternate;font-size:16px}.gatepill.sound{border-color:rgba(255,241,214,.6);color:#fff1d6;font-size:12px;padding:5px 12px;top:calc(100% - 150px)}
@keyframes gp{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.07)}}
@media (max-width:440px){.gatepill.focus{white-space:normal;text-align:center;width:80vw}}
/* v0.13.0 F5: wreck overlay leads with BANKED / LOST */
#wreckOv .wcsh.v13{display:flex;gap:18px;justify-content:center;align-items:baseline;flex-wrap:wrap}
#wreckOv .wcsh .wbk{color:#58e07a}#wreckOv .wcsh .wls{color:#ff6a5a}
.res .ln3{display:flex;justify-content:space-between;gap:12px;font-size:max(15px,calc(var(--k)*18px));padding:2px 0}.res .ln3 b{color:#ff6a5a;font-weight:900}

/* v0.13.0 F4: compare deltas, test drive button, paint preview mark */
.sbars.cmp .sb{grid-template-columns:max(104px,calc(var(--k)*108px)) 1fr 2.4em}
.sb .dl{font-style:normal;font-weight:900;text-align:right}.sb .dl.up{color:#58e07a}.sb .dl.dn{color:#ff6a5a}.sb .dl.eq{color:#8f8670}
.gcar .act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.gcar.pv{border-color:#7fe3ff;box-shadow:0 0 0 2px rgba(127,227,255,.35)}
.tdbtn{min-height:44px}
.sw button.pv{outline:3px solid #fff1d6;outline-offset:2px}

/* v0.13 follow-up 2 (A5): phone = the NEXT chip is part of the run bar (no box) */
.nxchip.merged{background:none;border:0;padding:0 2px;margin-top:0}.nxchip.merged .nxt{text-align:left;font-size:12px}

/* v0.13.0 team fix 1 (P2-8): menu text never overlaps / clips */
@media (orientation:landscape) and (min-height:600px){#scrBoard .ccard .nm{font-size:max(18px,calc(var(--k)*16px));line-height:1.12}}
#scrBoard .ccard .nm{overflow-wrap:anywhere}
@media (orientation:portrait){#btnWall2{font-size:13px;padding-left:8px;padding-right:8px;white-space:nowrap}#btnWall2 svg{display:none}}
/* team fix 1 (P3-1): the cash pill no longer sits on the "B" of BOUNTY on a tall landscape title */
@media (orientation:landscape) and (min-height:600px){#scrTitle .logo{top:calc(var(--k)*54px)}#scrTitle .tag{top:calc(var(--k)*54px + min(46vw,calc(var(--k)*470px))*.49 + 4px)}}

/* ---- team fix 2 (REVIEW_V013_R2 P2-3): the paint-preview line lives in the stage column (left of the panel), above the NEXT UNLOCKS cards, wraps instead of running under the panel, and stays for 3.5 s */
@media (orientation:landscape){.toast.gtoast{left:23%;max-width:42vw;white-space:normal;text-align:center;border-radius:18px;line-height:1.15;bottom:max(16px,calc(var(--k)*26px));animation-duration:3.5s}}
@media (orientation:landscape) and (min-height:521px){.toast.gtoast{bottom:calc(var(--k)*200px)}}
@media (orientation:portrait){.toast.gtoast{animation-duration:3.5s}}

/* ---- team fix 2 (P2-4): the event board in a short landscape window: tiers on the left, the 3 events on the right, so all 3 show with no scroll */
@media (orientation:landscape) and (max-height:520px){
.wkmodal.semodal .wkscroll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:14px;align-content:start}
.wkmodal.semodal .wkscroll>h3,.wkmodal.semodal .wkscroll>.lbl,.wkmodal.semodal .wkscroll>.sebar{grid-column:1/-1}
.wkmodal.semodal .wkscroll>.lbl.wkx{grid-column:1/-1;grid-row:7;margin-top:6px}
.wkmodal.semodal .wkscroll>.setiers{grid-column:1;grid-row:4/span 3;grid-template-columns:1fr 1fr;column-gap:8px;align-self:start}
.wkmodal.semodal .wkscroll>.sevent{grid-column:2;margin-top:0;margin-bottom:6px}
}
@media (orientation:landscape) and (max-height:520px){
.wkmodal.semodal .wkscroll .setier{padding:1px 6px;line-height:1.1}
.wkmodal.semodal .wkscroll>.sebar{margin:3px 0}
.wkmodal.semodal .wkscroll>.sevent{padding:4px 8px;margin-bottom:4px}
.wkmodal.semodal .wkscroll>.lbl.wkx{margin-top:2px}
}

/* ---- team fix 2 (P2-5): short landscape contract board: GARAGE collapses to its wheel icon so the map tabs end well before the $ pill (they overlapped it at 844x390 / 667x375 / 932x430) */
@media (orientation:landscape) and (max-height:520px){
#scrBoard .head .btn.sm>span{display:none}
#scrBoard .head .btn.sm{min-width:48px;padding-left:12px;padding-right:12px}
#scrBoard .sttabs{right:236px}
}

/* ---- team fix 2 (P3): TOTAL . BANKED never wraps */
.res .ln2.tot span{white-space:nowrap}
.res .ln2.tot{font-size:max(17px,calc(var(--k)*22px))!important;gap:8px}
@media (orientation:portrait){.res .ln2.tot{font-size:17px!important}}

/* ---- team fix 2 (P3): the in-run Wrench bubble in a short landscape window sits in the top-left corner and stays out of the road's centre band */
@media (orientation:landscape) and (max-height:520px){.runwr{width:min(300px,34vw)}}
@media (orientation:landscape) and (max-height:520px){.runwr .ln{max-height:none}}

/* ---- team fix 3 (R3 P2-2): phone garage - tabs size to their text with a 10 px gap, the NEXT UNLOCKS cards show their whole line (no clamp) */
@media (orientation:portrait){
.gar .tabs{gap:10px}.gar .tabs .btn{flex:1 1 auto;padding:0 10px}
#scrGarage .nextUnlocks .nu span{display:block;-webkit-line-clamp:unset;overflow:visible}
#scrGarage .nextUnlocks .nu{align-content:start}
}

/* ---- team fix 3 (R3 P2-3): the Wrench box (JS, top-left in every landscape window) and the sound pill never sit on the car (the car fills the lower middle) */
@media (orientation:landscape){.runwr{left:10px;right:auto;margin:0;bottom:auto}.runwr .ln{max-height:none}}
@media (orientation:landscape){.gatepill.sound{left:8px;right:auto;top:32%;transform:none;max-width:150px;white-space:normal;text-align:center;border-radius:14px}}
@media (orientation:portrait){.gatepill.sound{left:auto;right:10px;top:36%;transform:none}}

/* ---- team fix 3 (R3 P2-4): a wreck's headline is what you KEPT; the LOST line is a quiet note (14 px, cream-grey, never red or bigger than the total) */
.res .ln3{font-size:14px!important;padding:0;opacity:.85}.res .ln3 b{color:#d9c9ac!important}.res .ln3 span{white-space:normal}
#wreckOv .wcsh .wls{color:#d9c9ac;font-size:.7em;opacity:.85}#wreckOv .wcsh .wbk{font-size:1.1em}

/* ---- team fix 4 (R4 P2-2): the results Wrench line is never cut: in a short landscape window the radio box drops its name row and shrinks its face so a 4-line tip fits above the panel edge */
@media (orientation:landscape) and (max-height:520px){.res .wr .nm{display:none}.res .wr .face{width:34px;height:34px;min-width:34px;min-height:34px}.res .wr{min-height:40px;padding:4px 10px 4px 4px}.res .wr .ln{font-size:14px;line-height:1.15;min-height:0}}

/* ---- team fix 5 (R5 P3): the primary-weapon chip shrinks to its name (it was a 200 px box with an empty left slot) */
.wchip{min-width:0!important;width:auto!important;align-self:flex-end;justify-content:flex-start}
.wchip .pips:empty{display:none}.wchip{min-height:0!important}

/* ---- v0.13 round 3 (G3): first-run HUD. <= 8 elements at 5 s on desktop, <= 7 on a phone; one hint at a time; no radio in the first 10 s; quest after the first wreck; NEXT chip after the first cash */
body.fr.fr-k0 .runbar .gl,body.fr.fr-k0 .quest,body.fr.fr-k0 .wchip,body.fr.fr-k0 .tcard,body.fr.fr-k0 #hFire,body.fr.fr-k0 #hNitro,body.fr.fr-k0 .schip,body.fr.fr-k0 .gchip,body.fr.fr-t12 .runbar .gl,body.fr.fr-t12 .quest,body.fr.fr-t12 .wchip,body.fr.fr-t12 .schip,body.fr.fr-t12 .gchip,body.fr.fr-t12 .nxchip,body.fr.fr-t12 .tcard,body.fr.fr-t12 .toast,body.fr.fr-t12 .tbtn.swap,body.fr.fr-t12 .tbtn.g1,body.fr.fr-t12 .tbtn.g2{display:none!important}
body.fr.fr-c0 .nxchip{display:none!important}
body.fr.fr-t10 .runwr{display:none!important}
body.fr.fr-ptr .hint{display:none!important}
body.fr.fr-t10.touch .tr .ibtn:last-child{display:none!important}

/* ---- round 3 (4d): portrait toasts wrap inside the screen instead of running past both edges ("clipped toasts") */
@media (orientation:portrait){.toast{white-space:normal!important;text-align:center;width:max-content;max-width:calc(100vw - 20px)!important;border-radius:20px;line-height:1.15;box-sizing:border-box}}

/* ---- round 3 (4e): the Unlocks screen opens on the NEXT 3 cards; the full list is collapsed behind one header (no text wall); rows wrap instead of truncating */
#unlList.collapsed .urow2{display:none}
#unlList .unltog{display:block;width:100%;text-align:left;background:rgba(20,24,31,.86);border:2px solid rgba(255,179,71,.5);border-radius:12px;padding:10px 14px;min-height:44px;font:inherit;font-weight:900;color:#ffb347;cursor:pointer}
#unlList.collapsed{flex:0 0 auto}
.urow2 .un b,.urow2 .un em{white-space:normal;overflow:visible;text-overflow:clip}

@media (orientation:portrait){.toast.gtoast{top:calc(46% - 84px)}}
.res.guard .acts{pointer-events:none}
.res.guard .acts,.res.guard .acts .btn{pointer-events:none!important}

/* ---- gate review R1 (P2): the run-bar name + wave label stay on one line each (portrait "DUSTY START" wrapped into the TRAINING bar) */
.runbar .nm #rbName,.runbar .nm #rbWave{white-space:nowrap}
body.touch .runbar .nm{gap:8px;font-size:12px;letter-spacing:.02em}