@font-face{font-family:Space;src:url('assets/fonts/space-grotesk-latin.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:Mono;src:url('assets/fonts/dm-mono-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--ink:#fff5df;--teal:#79dfc7;--amber:#f5c97e;--panel:#12303dde}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100svh;display:grid;place-items:center;background:#0c202a;color:var(--ink);font-family:Space,system-ui,sans-serif}
.stage{--cq:1cqw;position:relative;width:min(98vw,1800px,calc((100svh - 12px)*16/9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;border-radius:8px;box-shadow:0 16px 60px #0005}
#game{display:block;width:100%;height:100%;outline:0;background:#9cc5cf}
.mono{font-family:Mono,monospace}
button,select{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible{outline:3px solid #fff4ba;outline-offset:4px}
.hud{position:absolute;z-index:4;pointer-events:none}.hud button{pointer-events:auto}
.stage:not(.racing) .hud,.stage:not(.racing) .objective,.stage:not(.racing) .race-message{visibility:hidden}
.hud-top{top:calc(2*var(--cq));left:calc(2.5*var(--cq));right:calc(2.5*var(--cq));display:flex;gap:calc(1*var(--cq));align-items:flex-start}
.hud-cell{padding:calc(.7*var(--cq)) calc(1*var(--cq));background:var(--panel);border:1px solid #ffffff26;border-radius:5px;display:flex;flex-direction:column;gap:calc(.25*var(--cq));box-shadow:0 3px 15px #102a3a20}
.hud-label{font-size:calc(.7*var(--cq));letter-spacing:.15em;color:#b8d2d1;line-height:1.5;font-weight:500}
.hud-big{font-size:calc(2.15*var(--cq));line-height:1.15;font-weight:700}.hud-sub{font-size:calc(.8*var(--cq));color:#d5e5de}
.place-cell{min-width:calc(8*var(--cq));display:flex;flex-direction:row;align-items:baseline;gap:calc(.1*var(--cq))}.place-cell .hud-label{display:none}.place-cell .hud-big{font-size:calc(4.2*var(--cq));line-height:1;color:var(--amber)}.place-suf{font-size:calc(1.7*var(--cq));color:var(--amber)}
.core-cell{margin-left:auto;min-width:calc(15*var(--cq))}.core-cell .hud-big{font-size:calc(1.9*var(--cq))}
.item-cell{position:absolute;left:0;top:calc(8*var(--cq));width:calc(8*var(--cq));text-align:center;align-items:center}.item-icon{font-size:calc(2.5*var(--cq));color:var(--amber)}.item-cell .hud-sub{font-size:calc(.65*var(--cq))}
.hud-left{left:calc(2.5*var(--cq));bottom:calc(5*var(--cq));width:calc(14*var(--cq))}.pills{display:none}
.battery,.drift-meter-wrap{padding:calc(.55*var(--cq)) calc(.8*var(--cq));background:var(--panel);border-radius:4px;margin-top:calc(.65*var(--cq))}
.battery-bars{display:flex;gap:calc(.3*var(--cq));margin:calc(.4*var(--cq)) 0}.battery-bars i{height:calc(.4*var(--cq));flex:1;background:var(--teal);border-radius:3px}
.drift-meter{height:calc(.4*var(--cq));background:#ffffff20;border-radius:3px;margin:calc(.4*var(--cq)) 0;overflow:hidden}#driftFill{height:100%;background:var(--amber);width:0}
.hud-right{right:calc(2.5*var(--cq));bottom:calc(5*var(--cq));display:flex;flex-direction:column;align-items:flex-end;gap:calc(1*var(--cq))}.speedo{display:flex;align-items:baseline;gap:calc(.3*var(--cq));text-shadow:0 2px 10px #103443}.speedo .hud-big{font-size:calc(4.5*var(--cq));letter-spacing:-.06em}#minimap{width:calc(10.5*var(--cq));height:calc(10.5*var(--cq));min-width:84px;min-height:84px;background:#0b2230b8;border:1px solid #c2dbd533;border-radius:calc(1*var(--cq))}
.objective{position:absolute;left:50%;bottom:calc(2*var(--cq));transform:translateX(-50%);background:#12303dcc;padding:calc(.6*var(--cq)) calc(1.3*var(--cq));white-space:nowrap;border-radius:20px;font-size:calc(.8*var(--cq));letter-spacing:.1em;z-index:4}
.race-message{position:absolute;top:24%;left:18%;right:18%;text-align:center;font-size:calc(1.8*var(--cq));letter-spacing:.04em;text-shadow:0 2px 10px #072331;z-index:5;color:#fff7d1}
.hud-buttons{bottom:calc(.65*var(--cq));right:calc(1*var(--cq));display:flex;gap:calc(.3*var(--cq))}.hud-buttons button{border:1px solid #ffffff20;background:#12303dbb;border-radius:3px;font-size:calc(.65*var(--cq));padding:calc(.35*var(--cq)) calc(.5*var(--cq));letter-spacing:.05em}
.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;background:#0b2638db}.hidden{display:none!important}
.overlay-card{margin-left:5%;width:43%;padding-bottom:calc(3*var(--cq))}.kicker{font-size:calc(.85*var(--cq));letter-spacing:.25em;color:var(--amber);margin-bottom:calc(2.3*var(--cq))}
h1{font-size:calc(5.4*var(--cq));line-height:.96;letter-spacing:-.055em;font-weight:700;max-width:calc(36*var(--cq))}h1 .subtitle{display:block;font-size:calc(.95*var(--cq));letter-spacing:.23em;line-height:1.5;color:var(--teal);margin-top:calc(1.5*var(--cq))}
.brief{font-size:calc(1.05*var(--cq));line-height:1.75;max-width:calc(34*var(--cq));margin-top:calc(1.8*var(--cq));color:#d5e3de}.brief strong{color:#fff3d7}
.difficulty-row{display:flex;align-items:center;gap:calc(1*var(--cq));font-size:calc(.8*var(--cq));letter-spacing:.14em;margin-top:calc(1.5*var(--cq));color:#b8d7d2}select{background:#163643;border:1px solid #ffffff30;padding:calc(.5*var(--cq)) calc(.8*var(--cq));border-radius:3px;font-size:calc(.85*var(--cq))}
.primary{display:block;border:0;border-radius:4px;padding:calc(1.15*var(--cq)) calc(2*var(--cq));margin-top:calc(1.4*var(--cq));background:var(--amber);color:#17333f;font-size:calc(1.05*var(--cq));font-weight:700;letter-spacing:.09em;box-shadow:0 4px 0 #9d7846;transition:transform .15s,background .15s}.primary:hover{background:#ffe0a0;transform:translateY(-2px)}.primary:disabled{opacity:.5;cursor:wait}
.assist-note{font-size:calc(.7*var(--cq));line-height:1.6;color:#a8c2c3;margin-top:calc(1*var(--cq));max-width:calc(34*var(--cq))}.controls-line{position:absolute;bottom:calc(1.5*var(--cq));left:5%;right:5%;display:flex;gap:calc(1.4*var(--cq));flex-wrap:wrap;font-size:calc(.72*var(--cq));color:#bed4cf}.controls-line b{color:var(--amber);font-weight:400}
#finishOverlay .overlay-card{margin:auto;width:60%;padding:0}h2{font-size:calc(4.2*var(--cq));letter-spacing:-.04em;color:var(--amber);margin-bottom:calc(1.5*var(--cq))}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(.7*var(--cq));font-size:calc(1*var(--cq));margin-bottom:calc(1*var(--cq))}.result-grid b{color:#a3c7c4;font-weight:400}.result-grid i{font-style:normal;text-align:right}.result-reason{display:block;margin-bottom:calc(1.5*var(--cq));font-size:calc(1.2*var(--cq))}.credit-line{margin-top:calc(1.5*var(--cq));font-size:calc(.8*var(--cq));color:#a8c2c3}
.stats-overlay{position:absolute;top:0;left:25%;right:20%;z-index:20;background:#071b2bc9;font-size:calc(.8*var(--cq));padding:calc(.2*var(--cq));text-align:center}
.touch-controls{display:none;position:absolute;inset:auto calc(2*var(--cq)) calc(5*var(--cq));z-index:7;pointer-events:none;justify-content:space-between}.touch-controls>div{display:flex;gap:calc(1*var(--cq))}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;background:#12303dcc;border:1px solid #c7e2d75e;border-radius:8px;min-width:calc(7*var(--cq));height:calc(7*var(--cq));font-size:calc(1.2*var(--cq))}
.overdrive-meter-wrap{height:4px;width:100%;background:#ffffff20}#overdriveMeter{height:100%;background:var(--teal)}
@media(pointer:coarse){.racing .touch-controls{display:flex}.hud-left{bottom:calc(12.2*var(--cq))}.hud-right{bottom:calc(13*var(--cq))}.hud-buttons button{font-size:calc(.9*var(--cq))}.hud-buttons{bottom:calc(.5*var(--cq))}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.secondary{display:inline-block;margin-top:calc(1*var(--cq));background:transparent;border:1px solid #abcfc866;border-radius:4px;padding:calc(.75*var(--cq)) calc(1.3*var(--cq));font-size:calc(.9*var(--cq));letter-spacing:.08em}.secondary:hover{background:#ffffff12}
.race-intel{top:calc(2.4*var(--cq));left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;gap:calc(.35*var(--cq));text-shadow:0 2px 6px #153744}.race-intel span{font-size:calc(.7*var(--cq));letter-spacing:.3em;color:#fff0c9}.race-intel strong{font-size:calc(.95*var(--cq));font-weight:500;letter-spacing:.06em}
.event-wash{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0}.pause-panel{position:absolute;inset:0;background:#0d2d3dbb;backdrop-filter:blur(5px);z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center}.pause-panel>p{font-size:calc(1*var(--cq));letter-spacing:.3em;color:#a5d6cc}.pause-panel h2{margin:calc(.9*var(--cq)) 0;font-size:calc(6*var(--cq))}.pause-panel span{font-size:calc(.75*var(--cq));margin-top:calc(1.5*var(--cq));color:#b2cec6}
@media(max-height:480px){.race-intel span{font-size:7px}.race-intel strong{font-size:8px}}
@media(prefers-reduced-motion:reduce){.event-wash{display:none}}
[hidden]{display:none!important}
.countdown-overlay{position:absolute;inset:0;z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#15333935,transparent 65%);text-align:center;text-shadow:0 4px 24px #102c39b0}.countdown-overlay>span{font-size:calc(.8*var(--cq));color:#e9f2ce;letter-spacing:.24em;background:#153339b0;padding:calc(.45*var(--cq)) calc(.9*var(--cq))}.countdown-overlay>strong{font-size:calc(15*var(--cq));font-weight:700;letter-spacing:-.07em;line-height:1.2;color:#edf4c8;filter:drop-shadow(0 5px 0 #183a46)}.countdown-overlay .countdown-note{font-size:calc(.6*var(--cq));background:none;letter-spacing:.35em}

/* Arcade skill chain: score is earned from real world pickups and maneuvers. */
.arcade-score{top:calc(17.5*var(--cq));left:calc(2.5*var(--cq));width:calc(10.4*var(--cq));padding:calc(.7*var(--cq)) calc(1*var(--cq));background:var(--panel);border:1px solid #ffffff26;border-radius:5px}.arcade-score>span{font-size:calc(.55*var(--cq));letter-spacing:.16em;color:#c5d5bf}.arcade-score>strong{display:block;font-size:calc(1.75*var(--cq));letter-spacing:-.055em;color:#ffe7a2;margin:calc(.2*var(--cq)) 0}.arcade-score>div{display:flex;gap:calc(.55*var(--cq));align-items:center;font-size:calc(.6*var(--cq))}.arcade-score b{font-size:calc(1*var(--cq));color:#9df6d0}.arcade-score i{display:block;height:calc(.2*var(--cq));background:#63837a60;margin-top:calc(.4*var(--cq))}.arcade-score em{display:block;height:100%;background:#ffd674;width:0}.arcade-score.chain{border-color:#f2cd81;box-shadow:0 0 20px #efc87a20}
@media(max-height:480px){.arcade-score>span{font-size:6px}.arcade-score>div{font-size:6px}}

.finish-kicker{font-size:calc(.8*var(--cq));letter-spacing:.3em;color:#99dfd0;margin-bottom:calc(1*var(--cq))}#finishOverlay{background:linear-gradient(110deg,#101c3bec,#152646ef);backdrop-filter:blur(8px)}#finishOverlay .overlay-card{width:66%;padding:calc(2*var(--cq)) 0}#finishOverlay h2{font-size:calc(4.1*var(--cq));letter-spacing:-.06em;margin-bottom:calc(1.5*var(--cq));color:#e6efb7}#finishOverlay .result-grid{grid-template-columns:1fr 1.3fr;gap:calc(.56*var(--cq));font-size:calc(.9*var(--cq))}#finishOverlay button{font-size:calc(.84*var(--cq));padding:calc(.8*var(--cq)) calc(1.5*var(--cq));margin:calc(.4*var(--cq)) calc(.5*var(--cq)) 0 0}#finishOverlay .primary{background:#ddebab;color:#153438;box-shadow:none}#finishOverlay .credit-line{font-size:calc(.6*var(--cq))}

.screen-reader-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Touch layouts lift the left stack above the steer buttons, so the score card moves beside the item card. */
@media(pointer:coarse){.arcade-score{top:calc(11.9*var(--cq));left:calc(12.2*var(--cq))}}
/* iOS Safari ignores user-scalable=no, so gestures are refused here too: no pinch or double-tap zoom,
   no rubber-band scroll, no long-press callout or text selection while racing. Unverified on a real phone. */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
.stage{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ===== ARCADE ATTRACT MODE — Citylight Sprint title screen. Aono Media © 2026 =====
   Cabinet-style: perspective grid floor, chrome-extruded title, hazard-striped start button,
   tilting city cards with a running circuit light. All sizes in cqw so the 16:9 stage scales. */
:root{--ar-cyan:#3af2ff;--ar-mag:#ff3fd0;--ar-yel:#ffe14d;--ar-ink:#fff8e6;--ar-navy:#06081c;--ar-navy2:#0c1238;--ar-line:#2a3a7a}
.overlay-cover{display:block;background:var(--ar-navy);color:var(--ar-ink);overflow:hidden;isolation:isolate}
.attract-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.attract-sky{position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 62%,#3a1466 0%,#160c3d 38%,var(--ar-navy) 72%)}
.attract-sun{position:absolute;left:50%;top:38%;width:calc(30*var(--cq));height:calc(30*var(--cq));transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(180deg,var(--ar-yel) 0%,#ff7a3d 45%,var(--ar-mag) 100%);opacity:.32;filter:blur(calc(.4*var(--cq)));-webkit-mask:repeating-linear-gradient(180deg,#000 0 calc(2.6*var(--cq)),transparent calc(2.6*var(--cq)) calc(3.4*var(--cq)));mask:repeating-linear-gradient(180deg,#000 0 calc(2.6*var(--cq)),transparent calc(2.6*var(--cq)) calc(3.4*var(--cq)))}
.attract-grid{position:absolute;left:-50%;right:-50%;top:52%;bottom:-10%;background-image:linear-gradient(90deg,transparent 0 calc(50% - 1px),#39e6ff66 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(180deg,transparent 0 calc(100% - 2px),#ff3fd066 calc(100% - 2px) 100%);background-size:calc(6*var(--cq)) 100%,100% calc(3.2*var(--cq));transform:perspective(calc(38*var(--cq))) rotateX(66deg);transform-origin:50% 0;opacity:.55;animation:ar-grid 2.4s linear infinite;-webkit-mask:linear-gradient(180deg,transparent,#000 25%);mask:linear-gradient(180deg,transparent,#000 25%)}
@keyframes ar-grid{to{background-position:0 0,0 calc(3.2*var(--cq))}}
.attract-scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#0000 0 3px,#00000030 3px 4px);mix-blend-mode:multiply;opacity:.8}
.attract-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#02030fcc 100%)}
.overlay-cover::before{content:none}

/* header strip */
.setup-brand{position:absolute;top:calc(1.9*var(--cq));left:calc(3.4*var(--cq));right:calc(3.4*var(--cq));display:flex;align-items:center;gap:calc(.85*var(--cq));font-size:calc(.74*var(--cq));font-weight:700;letter-spacing:.14em;z-index:2}
.brand-mark{display:grid;place-items:center;width:calc(3*var(--cq));height:calc(3*var(--cq));font-size:calc(1.05*var(--cq));letter-spacing:-.04em;color:var(--ar-navy);background:var(--ar-cyan);transform:skew(-10deg);box-shadow:calc(.25*var(--cq)) calc(.25*var(--cq)) 0 var(--ar-mag)}
.brand-name{line-height:1.1}.brand-small{display:block;font-size:calc(.46*var(--cq));letter-spacing:.2em;margin-top:calc(.28*var(--cq));color:#8fa5d8;font-weight:500}
.attract-credits{margin-left:auto;font-size:calc(.6*var(--cq));letter-spacing:.18em;color:#9fb3e6;display:flex;align-items:center;gap:calc(.5*var(--cq))}.attract-credits i{width:calc(.55*var(--cq));height:calc(.55*var(--cq));border-radius:50%;background:var(--ar-yel);box-shadow:0 0 calc(.8*var(--cq)) var(--ar-yel);animation:ar-blink 1.1s steps(2,start) infinite}
.edition{margin-left:calc(1.6*var(--cq));font-size:calc(.58*var(--cq));color:var(--ar-navy);background:var(--ar-yel);padding:calc(.35*var(--cq)) calc(.7*var(--cq));transform:skew(-10deg);letter-spacing:.14em}
@keyframes ar-blink{to{visibility:hidden}}

/* left column: title, cartridge, CTA */
.overlay-cover .setup-intro{position:absolute;left:calc(3.4*var(--cq));top:calc(8.4*var(--cq));width:calc(32*var(--cq));bottom:calc(7*var(--cq));margin:0;padding:0;display:flex;flex-direction:column}
.arcade-title{font-size:calc(6.4*var(--cq));line-height:.9;letter-spacing:-.05em;font-weight:700;max-width:none;margin:0;transform:skew(-9deg);transform-origin:0 100%}
.title-line{position:relative;display:block;color:#1b0f4a;text-shadow:calc(.12*var(--cq)) calc(.12*var(--cq)) 0 #2a1d70,calc(.24*var(--cq)) calc(.24*var(--cq)) 0 #2a1d70,calc(.36*var(--cq)) calc(.36*var(--cq)) 0 #2a1d70,calc(.48*var(--cq)) calc(.48*var(--cq)) 0 #ff3fd0,calc(.6*var(--cq)) calc(.6*var(--cq)) 0 #ff3fd0,calc(.72*var(--cq)) calc(.72*var(--cq)) 0 #ff3fd0,calc(.9*var(--cq)) calc(.9*var(--cq)) calc(1.4*var(--cq)) #0008}
.title-line::after{content:attr(data-text);position:absolute;inset:0;text-shadow:none;background:linear-gradient(180deg,#ffffff 0%,#dff8ff 38%,#3af2ff 52%,#0e7fa0 60%,#c9f4ff 74%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 calc(.5*var(--cq)) #3af2ff80)}
.title-alt{text-shadow:calc(.12*var(--cq)) calc(.12*var(--cq)) 0 #2a1d70,calc(.24*var(--cq)) calc(.24*var(--cq)) 0 #2a1d70,calc(.36*var(--cq)) calc(.36*var(--cq)) 0 #2a1d70,calc(.48*var(--cq)) calc(.48*var(--cq)) 0 #3af2ff,calc(.6*var(--cq)) calc(.6*var(--cq)) 0 #3af2ff,calc(.72*var(--cq)) calc(.72*var(--cq)) 0 #3af2ff,calc(.9*var(--cq)) calc(.9*var(--cq)) calc(1.4*var(--cq)) #0008}.title-alt::after{background:linear-gradient(180deg,#fff 0%,#ffe6f8 36%,#ff3fd0 52%,#8f1670 60%,#ffd0f2 74%,#fff 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 calc(.5*var(--cq)) #ff3fd080)}
.title-badge{margin:calc(1.7*var(--cq)) 0 0;align-self:flex-start;font-size:calc(.66*var(--cq));letter-spacing:.22em;color:var(--ar-navy);background:var(--ar-ink);padding:calc(.4*var(--cq)) calc(.9*var(--cq));transform:skew(-10deg);box-shadow:calc(.25*var(--cq)) calc(.25*var(--cq)) 0 var(--ar-cyan)}.title-badge b{color:#b8007f}
.overlay-cover .brief{margin-top:calc(1.6*var(--cq));max-width:calc(27*var(--cq));font-size:calc(.8*var(--cq));line-height:1.6;color:#b9c6f0}.overlay-cover .brief strong{color:#fff;font-weight:700}.cartridge{margin-top:auto;padding:calc(1*var(--cq)) calc(1.1*var(--cq));border:1px solid #3af2ff55;background:linear-gradient(180deg,#0f1747e6,#0a0f33e6);position:relative;box-shadow:inset 0 0 0 1px #0000,0 0 calc(1.6*var(--cq)) #3af2ff14}
.cartridge::before{content:"";position:absolute;left:-1px;top:-1px;width:calc(1.4*var(--cq));height:calc(1.4*var(--cq));border-top:calc(.22*var(--cq)) solid var(--ar-cyan);border-left:calc(.22*var(--cq)) solid var(--ar-cyan)}.cartridge::after{content:"";position:absolute;right:-1px;bottom:-1px;width:calc(1.4*var(--cq));height:calc(1.4*var(--cq));border-bottom:calc(.22*var(--cq)) solid var(--ar-mag);border-right:calc(.22*var(--cq)) solid var(--ar-mag)}
.setup-ready{display:flex;align-items:baseline;gap:calc(.55*var(--cq));flex-wrap:wrap;margin:0}.setup-ready>span:first-child{width:100%;font-size:calc(.55*var(--cq));letter-spacing:.24em;color:#8fa5d8;margin-bottom:calc(.25*var(--cq))}.setup-ready strong{font-size:calc(1.5*var(--cq));font-weight:700;letter-spacing:-.02em;color:#fff}.setup-ready #setupCourseName{color:var(--ar-cyan)}.ready-divider{color:var(--ar-mag);font-size:calc(1.3*var(--cq))}
.overlay-cover .difficulty-row{margin:calc(1*var(--cq)) 0 0;font-size:calc(.55*var(--cq));letter-spacing:.24em;color:#8fa5d8;display:block}.overlay-cover .difficulty-row select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pace-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.3*var(--cq));margin-top:calc(.45*var(--cq))}.pace-seg button{border:1px solid #3af2ff55;background:#0b1240;color:#9fb3e6;font-size:calc(.62*var(--cq));font-weight:700;letter-spacing:.14em;padding:calc(.55*var(--cq)) 0;transform:skew(-10deg);transition:background .12s,color .12s,box-shadow .12s}.pace-seg button:hover{color:#fff;background:#152062}.pace-seg button.on{background:var(--ar-cyan);color:var(--ar-navy);border-color:var(--ar-cyan);box-shadow:0 0 calc(1*var(--cq)) #3af2ff88}.pace-seg button[data-pace=pro].on{background:var(--ar-mag);border-color:var(--ar-mag);color:#fff;box-shadow:0 0 calc(1*var(--cq)) #ff3fd088}
.overlay-cover .primary.start-cta{position:relative;display:block;width:100%;margin:calc(1.1*var(--cq)) 0 0;padding:calc(1.15*var(--cq)) calc(2.6*var(--cq)) calc(.95*var(--cq)) calc(1*var(--cq));font-size:calc(1.55*var(--cq));font-weight:700;letter-spacing:.06em;text-align:center;color:var(--ar-navy);background:linear-gradient(180deg,#fff5a8,var(--ar-yel) 55%,#ffb800);border:calc(.18*var(--cq)) solid var(--ar-navy);border-radius:0;box-shadow:0 calc(.45*var(--cq)) 0 #8a1f7a,0 calc(.45*var(--cq)) 0 calc(.18*var(--cq)) var(--ar-navy),0 0 calc(2*var(--cq)) #ffe14d55;transform:skew(-10deg);transition:transform .12s,box-shadow .12s;animation:ar-pulse 1.6s ease-in-out infinite;overflow:visible}
.start-cta::before{content:"";position:absolute;left:calc(-.4*var(--cq));right:calc(-.4*var(--cq));top:calc(-.8*var(--cq));height:calc(.45*var(--cq));background:repeating-linear-gradient(135deg,var(--ar-yel) 0 calc(.7*var(--cq)),var(--ar-navy) calc(.7*var(--cq)) calc(1.4*var(--cq)))}
.start-cta::after{content:"▶ PRESS ENTER";position:absolute;left:0;right:0;bottom:calc(-1.55*var(--cq));text-align:center;font-family:Mono,monospace;font-size:calc(.6*var(--cq));font-weight:400;letter-spacing:.3em;color:var(--ar-yel);transform:skew(10deg);animation:ar-blink 1s steps(2,start) infinite}
.overlay-cover .primary.start-cta:not(:disabled):hover{background:linear-gradient(180deg,#fffbd0,#fff07a 55%,#ffc42a);transform:skew(-10deg) translateY(calc(-.15*var(--cq)));box-shadow:0 calc(.6*var(--cq)) 0 #8a1f7a,0 calc(.6*var(--cq)) 0 calc(.18*var(--cq)) var(--ar-navy),0 0 calc(3*var(--cq)) #ffe14d99}.overlay-cover .primary.start-cta:not(:disabled):active{transform:skew(-10deg) translateY(calc(.35*var(--cq)));box-shadow:0 calc(.1*var(--cq)) 0 #8a1f7a,0 calc(.1*var(--cq)) 0 calc(.18*var(--cq)) var(--ar-navy)}
.overlay-cover .primary.start-cta:disabled{opacity:1;cursor:wait;background:#2a2f5a;color:#8fa5d8;animation:none;box-shadow:0 calc(.45*var(--cq)) 0 #141a3a,0 calc(.45*var(--cq)) 0 calc(.18*var(--cq)) var(--ar-navy)}.start-cta:disabled::after{visibility:hidden;animation:none}
@keyframes ar-pulse{50%{box-shadow:0 calc(.45*var(--cq)) 0 #8a1f7a,0 calc(.45*var(--cq)) 0 calc(.18*var(--cq)) var(--ar-navy),0 0 calc(3.2*var(--cq)) #ffe14d99}}
.overlay-cover .assist-note{font-size:calc(.55*var(--cq));margin-top:calc(2.1*var(--cq));color:#8fa5d8;letter-spacing:.06em;max-width:none}.setup-intro:has(#startButton:not(:disabled)) #loadingNote{display:none}
.swap-link{margin-top:calc(2.3*var(--cq));align-self:flex-start;background:none;border:0;border-bottom:1px solid #ff3fd0;color:var(--ar-mag);font-size:calc(.62*var(--cq));font-weight:700;letter-spacing:.18em;padding:calc(.2*var(--cq)) 0}.swap-link:hover{color:#fff;border-color:#fff}.setup-intro:has(#startButton:disabled) .swap-link{display:none}

/* right column: tabs, headline, cards */
.setup-picker{position:absolute;left:calc(38.5*var(--cq));right:calc(3.4*var(--cq));top:calc(8.4*var(--cq));bottom:calc(6.2*var(--cq));z-index:1}
.setup-tabs{display:flex;gap:calc(.6*var(--cq));height:calc(3.2*var(--cq));border-bottom:1px solid #2a3a7a}
.setup-tab{background:#0b1240;border:1px solid #2a3a7a;border-bottom:0;display:flex;align-items:center;gap:calc(.6*var(--cq));font-size:calc(.7*var(--cq));color:#8fa5d8;padding:0 calc(1.2*var(--cq));letter-spacing:.14em;transform:skew(-10deg);transition:background .12s,color .12s}.setup-tab>*{transform:skew(10deg)}.setup-tab i{font-style:normal;font-family:Mono,monospace;font-size:calc(.6*var(--cq));color:var(--ar-mag)}.setup-tab strong{font-weight:700}.setup-tab>span{font-size:calc(.5*var(--cq));background:#1a2460;padding:calc(.15*var(--cq)) calc(.4*var(--cq));color:#c7d3ff}
.setup-tab:hover{color:#fff;background:#152062}.setup-tab[aria-selected=true]{color:var(--ar-navy);background:var(--ar-cyan);border-color:var(--ar-cyan);box-shadow:0 0 calc(1.2*var(--cq)) #3af2ff66}.setup-tab[aria-selected=true] i,.setup-tab[aria-selected=true]>span{color:var(--ar-navy);background:#ffffff55}
.picker-heading{display:flex;justify-content:space-between;align-items:baseline;margin:calc(1.3*var(--cq)) 0 calc(1*var(--cq));position:relative}.picker-heading h2{font-size:calc(1.9*var(--cq));color:#fff;letter-spacing:-.03em;margin:0;font-weight:700;transform:skew(-9deg);position:relative;text-shadow:calc(.18*var(--cq)) calc(.18*var(--cq)) 0 var(--ar-mag)}.picker-heading h2::before{content:attr(data-ghost);position:absolute;left:calc(-.6*var(--cq));top:calc(-1.35*var(--cq));font-size:calc(4.2*var(--cq));letter-spacing:-.05em;color:transparent;text-shadow:none;-webkit-text-stroke:1px #3af2ff33;z-index:-1;pointer-events:none}.picker-heading p{font-size:calc(.55*var(--cq));color:#8fa5d8;letter-spacing:.2em}
.level-list{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.1*var(--cq));perspective:calc(60*var(--cq))}
.level-card{position:relative;cursor:pointer;border:1px solid #2a3a7a;padding:calc(.4*var(--cq)) calc(.4*var(--cq)) calc(.8*var(--cq));display:flex;flex-direction:column;background:#0b1240;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);transform-style:preserve-3d;transition:transform .18s ease-out,border-color .15s,box-shadow .15s;will-change:transform}
.level-card:hover{border-color:var(--course-accent);box-shadow:0 0 calc(1.6*var(--cq)) color-mix(in srgb,var(--course-accent) 40%,transparent),0 calc(1*var(--cq)) calc(2*var(--cq)) #0006;z-index:2}
.level-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.level-card:has(input:checked){border-color:var(--course-accent);background:#0f1747;box-shadow:0 0 calc(2*var(--cq)) color-mix(in srgb,var(--course-accent) 45%,transparent),inset 0 0 0 1px var(--course-accent)}
.level-card:has(input:checked)::before{content:"";position:absolute;inset:calc(-.45*var(--cq));border:calc(.22*var(--cq)) dashed var(--course-accent);animation:ar-chase 1.2s linear infinite;pointer-events:none;-webkit-mask:conic-gradient(#000 0 0);opacity:.95}
@keyframes ar-chase{to{background-position:0 0;border-color:color-mix(in srgb,var(--course-accent) 40%,#fff)}}
.level-card:has(input:focus-visible){outline:3px solid #fff4ba;outline-offset:4px}
.course-art{position:relative;display:block;overflow:hidden;background:#000}.course-art svg{width:100%;height:calc(16.6*var(--cq));display:block;object-fit:cover;transition:transform .35s ease}.level-card:hover .course-art svg{transform:scale(1.05)}
.course-art .route-dash{animation:ar-dash 1.1s linear infinite}@keyframes ar-dash{to{stroke-dashoffset:-20}}
.course-index{position:absolute;top:calc(-.1*var(--cq));left:calc(.3*var(--cq));font-size:calc(2.6*var(--cq));font-weight:700;letter-spacing:-.06em;color:#fff;text-shadow:calc(.15*var(--cq)) calc(.15*var(--cq)) 0 var(--course-accent),calc(.3*var(--cq)) calc(.3*var(--cq)) 0 #000;transform:skew(-9deg);font-style:italic}
.course-selected{display:none;position:absolute;right:calc(.5*var(--cq));top:calc(.5*var(--cq));background:var(--ar-yel);color:var(--ar-navy);font-size:calc(.5*var(--cq));font-weight:700;letter-spacing:.16em;padding:calc(.3*var(--cq)) calc(.55*var(--cq));transform:skew(-10deg);box-shadow:calc(.15*var(--cq)) calc(.15*var(--cq)) 0 var(--ar-navy)}.level-card:has(input:checked) .course-selected{display:block}
.course-card-name{font-size:calc(1.15*var(--cq));font-weight:700;margin:calc(.75*var(--cq)) calc(.4*var(--cq)) calc(.2*var(--cq));letter-spacing:-.02em;color:#fff}.level-card:has(input:checked) .course-card-name{color:var(--course-accent)}
.course-card-caption{font-size:calc(.5*var(--cq));color:#8fa5d8;margin:0 calc(.4*var(--cq));letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.course-pips{display:inline-flex;gap:calc(.18*var(--cq))}.course-pips i{width:calc(.55*var(--cq));height:calc(.55*var(--cq));background:#1f2b66;transform:skew(-14deg)}.course-pips i.on{background:var(--course-accent);box-shadow:0 0 calc(.5*var(--cq)) var(--course-accent)}
.course-detail{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:calc(.9*var(--cq));margin-top:calc(1.4*var(--cq));padding-top:calc(1*var(--cq));border-top:1px solid #2a3a7a}.detail-eyebrow{display:block;font-size:calc(.52*var(--cq));letter-spacing:.22em;color:var(--ar-cyan);text-transform:uppercase}.course-detail h3{font-size:calc(2.6*var(--cq));font-weight:700;letter-spacing:-.04em;margin-top:calc(.15*var(--cq));line-height:1;transform:skew(-9deg);transform-origin:0 100%;text-shadow:calc(.15*var(--cq)) calc(.15*var(--cq)) 0 var(--ar-mag)}
.course-rating{border:1px solid var(--ar-yel);color:var(--ar-yel);padding:calc(.45*var(--cq)) calc(.7*var(--cq));font-size:calc(.6*var(--cq));font-weight:700;text-transform:uppercase;letter-spacing:.14em;transform:skew(-10deg)}.course-best{font-size:calc(.62*var(--cq));letter-spacing:.14em;color:#fff;background:#152062;padding:calc(.5*var(--cq)) calc(.8*var(--cq));border-left:calc(.25*var(--cq)) solid var(--ar-cyan)}.course-best.has-record{border-left-color:var(--ar-yel);color:var(--ar-yel)}
.course-detail>p{grid-column:1/-1;font-size:calc(.72*var(--cq));line-height:1.5;color:#b9c6f0;margin:0}

/* racer garage */
.setup-picker .character-panel{position:static;width:auto;height:auto;padding:0;border:0;background:none;--selected-color:#24b9af}
.character-list{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(.5*var(--cq))}
.racer-card{position:relative;overflow:hidden;border:1px solid #2a3a7a;background:#0b1240;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding-bottom:calc(.55*var(--cq));transition:transform .15s,border-color .15s,box-shadow .15s}
.racer-card::before{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--racer-color) 35%,transparent))}
.racer-card img{display:block;width:130%;max-width:none;height:calc(8*var(--cq));object-fit:contain;margin-top:calc(.3*var(--cq));filter:drop-shadow(0 3px 4px #0006);position:relative;transition:transform .2s}
.racer-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:2}
.racer-card:hover{transform:translateY(calc(-.25*var(--cq)));border-color:var(--racer-color)}.racer-card:hover img{transform:scale(1.08)}
.racer-card:has(input:checked){border-color:var(--racer-color);box-shadow:0 0 calc(1.4*var(--cq)) color-mix(in srgb,var(--racer-color) 55%,transparent),inset 0 0 0 1px var(--racer-color)}
.racer-card:has(input:focus-visible){outline:3px solid #fff1bd;outline-offset:2px}
.racer-name{font-size:calc(.85*var(--cq));font-weight:700;letter-spacing:.08em;position:relative;text-transform:uppercase}.racer-pick{position:absolute;top:calc(.3*var(--cq));left:calc(.3*var(--cq));font-size:calc(.4*var(--cq));letter-spacing:.12em;padding:calc(.15*var(--cq)) calc(.35*var(--cq));background:var(--ar-yel);color:var(--ar-navy);font-weight:700;visibility:hidden;transform:skew(-10deg)}.racer-card:has(input:checked) .racer-pick{visibility:visible}
.setup-picker .racer-details{position:relative;min-height:calc(19*var(--cq));margin-top:calc(1.2*var(--cq));padding:calc(1*var(--cq)) calc(26*var(--cq)) 0 0;border-top:1px solid #2a3a7a}
.setup-picker .racer-details #racerPersonality,.setup-picker .racer-details #racerTrait,.setup-picker .racer-details #racerTradeoff{display:none}
.setup-picker .racer-heading{display:block}.setup-picker .racer-heading h2{font-size:calc(4.2*var(--cq));line-height:1;color:#fff;margin:0;transform:skew(-9deg);transform-origin:0 100%;text-shadow:calc(.2*var(--cq)) calc(.2*var(--cq)) 0 var(--selected-color)}.setup-picker .racer-heading p{font-size:calc(.7*var(--cq));margin-top:calc(.5*var(--cq));text-transform:uppercase;letter-spacing:.18em;color:var(--ar-cyan)}
.setup-picker .racer-details .racer-quote{font-size:calc(1*var(--cq));line-height:1.45;margin:calc(1*var(--cq)) 0 calc(1.1*var(--cq));color:#d7dfff;font-style:italic}
.racer-hero{position:absolute;right:calc(-1*var(--cq));top:calc(-.3*var(--cq));width:calc(27*var(--cq));height:calc(21*var(--cq));margin:0;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--selected-color) 30%,transparent),transparent 68%);isolation:isolate}.racer-hero img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 calc(.8*var(--cq)) calc(1.2*var(--cq)) #0006);animation:ar-hover 3s ease-in-out infinite}.racer-orbit{position:absolute;width:75%;height:21%;bottom:5%;left:12.5%;border:calc(.14*var(--cq)) solid color-mix(in srgb,var(--selected-color) 70%,transparent);border-radius:50%;box-shadow:0 0 calc(1.5*var(--cq)) color-mix(in srgb,var(--selected-color) 30%,transparent)}
@keyframes ar-hover{50%{transform:translateY(calc(-.5*var(--cq)))}}
.racer-stats{display:grid;gap:calc(.6*var(--cq));max-width:calc(26*var(--cq))}.racer-stats>div{display:grid;grid-template-columns:calc(6*var(--cq)) 1fr;align-items:center;gap:calc(.6*var(--cq))}.racer-stats span{font-size:calc(.55*var(--cq));letter-spacing:.2em;color:#8fa5d8}.racer-stats i{height:calc(.5*var(--cq));background:#152062;overflow:hidden;transform:skew(-14deg)}.racer-stats b{height:100%;display:block;background:linear-gradient(90deg,var(--selected-color),#fff);box-shadow:0 0 calc(.8*var(--cq)) var(--selected-color);transition:width .35s ease}

/* bottom ticker */
.controls-ticker{position:absolute;left:0;right:0;bottom:0;height:calc(2.6*var(--cq));background:var(--ar-navy2);border-top:1px solid #2a3a7a;overflow:hidden;display:flex;align-items:center;z-index:2}
.ticker-track{display:flex;gap:calc(2.4*var(--cq));white-space:nowrap;font-size:calc(.62*var(--cq));letter-spacing:.16em;color:#9fb3e6;animation:ar-ticker 28s linear infinite;padding-left:calc(1*var(--cq))}.ticker-track b{color:var(--ar-yel);font-weight:400;margin-right:calc(.35*var(--cq))}
@keyframes ar-ticker{to{transform:translateX(-50%)}}
.controls-ticker::before,.controls-ticker::after{content:"";position:absolute;top:0;bottom:0;width:calc(6*var(--cq));z-index:1;pointer-events:none}.controls-ticker::before{left:0;background:linear-gradient(90deg,var(--ar-navy2),transparent)}.controls-ticker::after{right:0;background:linear-gradient(270deg,var(--ar-navy2),transparent)}
.setup-footer{display:none}

@media(prefers-reduced-motion:reduce){.attract-grid,.ticker-track,.start-cta,.racer-hero img,.course-art .route-dash{animation:none!important}.level-card{transform:none!important}}
/* phone landscape: keep tap targets and legibility */
@media(max-height:480px) and (orientation:landscape){
 .setup-brand{font-size:max(7px,calc(.74*var(--cq)))}.attract-credits{display:none}.edition{font-size:6px}.brand-small{font-size:5px}
 .arcade-title{font-size:calc(6.2*var(--cq))}.title-badge{font-size:max(6px,calc(.66*var(--cq)));margin-top:calc(1.2*var(--cq))}
 .setup-ready strong{font-size:max(11px,calc(1.5*var(--cq)))}.setup-ready>span:first-child,.overlay-cover .difficulty-row{font-size:max(6px,calc(.55*var(--cq)))}
 .pace-seg button{font-size:max(7px,calc(.62*var(--cq)));min-height:24px}.overlay-cover .primary.start-cta{font-size:max(12px,calc(1.55*var(--cq)));min-height:36px}.start-cta::after{font-size:6px;bottom:-11px}.overlay-cover .brief{display:none}.swap-link{font-size:max(7px,calc(.62*var(--cq)));margin-top:calc(2*var(--cq))}
 .setup-tabs{height:32px}.setup-tab{min-height:31px;font-size:max(8px,calc(.7*var(--cq)))}.setup-tab i,.setup-tab>span{font-size:6px}
 .picker-heading h2{font-size:max(13px,calc(1.9*var(--cq)))}.picker-heading p{font-size:6px}.picker-heading h2::before{display:none}
 .course-art svg{height:calc(14.5*var(--cq))}.course-card-name{font-size:max(10px,calc(1.15*var(--cq)))}.course-card-caption{font-size:6px}.course-detail h3{font-size:max(16px,calc(2.6*var(--cq)))}.course-rating,.course-best{font-size:6px}.course-detail>p{display:none}
 .racer-name{font-size:max(7px,calc(.85*var(--cq)))}.setup-picker .racer-heading h2{font-size:max(18px,calc(4*var(--cq)))}.setup-picker .racer-heading p{font-size:6px}.setup-picker .racer-details .racer-quote{font-size:8px;margin:calc(.6*var(--cq)) 0 calc(.9*var(--cq))}.racer-stats span{font-size:6px}.racer-stats i{height:3px}.racer-hero{width:calc(24*var(--cq));height:calc(19*var(--cq))}.setup-picker .racer-details{padding-right:calc(23*var(--cq));min-height:calc(20*var(--cq))}
 .ticker-track{font-size:6px}.controls-ticker{height:14px}
}

/* Mode selection shares the existing cartridge, with a compact touch-safe target. */
.mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:calc(.4*var(--cq));margin-bottom:calc(.65*var(--cq))}
.mode-seg button{min-height:28px;padding:calc(.6*var(--cq));border:1px solid #779fb9;background:#111b37;color:#bdd1e5;font:700 calc(.7*var(--cq)) "Space Grotesk",sans-serif;letter-spacing:.06em}
.mode-seg button[aria-pressed="true"]{background:#c8f7df;color:#132d33;border-color:#c8f7df}
.trial-mode .pace-seg{visibility:hidden}.trial-mode .item-cell,.trial-mode .place-cell{display:none}
@media(max-height:480px){.mode-seg button{font-size:8px;min-height:26px;padding:3px}.mode-seg{margin-bottom:4px}.cartridge{padding:calc(.65*var(--cq))}.setup-ready{font-size:8px}}

.trial-mode [data-action="item"]{display:none}
.trial-mode .pace-seg,.trial-mode .difficulty-row{display:none}

/* Race broadcast: open road, bold corner instruments, one clear objective. */
.hud-top{top:calc(2*var(--cq));left:calc(3*var(--cq));right:calc(3*var(--cq))}
.hud-cell{background:none;border:0;box-shadow:none;border-radius:0;padding:0;text-shadow:0 2px 5px #061327,0 0 14px #061327}
.place-cell{position:absolute;right:0;top:calc(39*var(--cq));min-width:0;transform:skew(-8deg);filter:drop-shadow(0 3px 0 #13293d)}
.place-cell .hud-big{font-size:calc(7*var(--cq));color:#ffe997;letter-spacing:-.09em}.place-suf{font-size:calc(2.2*var(--cq));color:#fff3c0}
.timer-cell{position:absolute;left:calc(9*var(--cq));top:calc(.5*var(--cq))}.timer-cell .hud-big{font-size:calc(2.1*var(--cq))}.timer-cell .hud-label{font-size:calc(.62*var(--cq))}
.item-cell{top:0;left:0;width:calc(7*var(--cq));height:calc(7*var(--cq));border:2px solid #b6f5ed9c;border-radius:50%;justify-content:center;background:radial-gradient(circle at 35% 25%,#38607acc,#071930dd);box-shadow:0 3px 0 #061327, inset 0 0 0 3px #0d244ac0}
.item-cell .hud-label{display:none}.item-icon{font-size:calc(3*var(--cq));line-height:1.1}.item-cell .hud-sub{font-size:calc(.52*var(--cq));max-width:calc(6*var(--cq));line-height:1.25}.overdrive-meter-wrap{position:absolute;bottom:calc(-.7*var(--cq))}
.core-cell{position:absolute;right:0;top:0;text-align:right;border-right:calc(.25*var(--cq)) solid #9cf5de;padding-right:calc(.8*var(--cq));min-width:0}.core-cell .hud-big{font-size:calc(1.7*var(--cq))}.core-cell .hud-sub{font-size:calc(.66*var(--cq))}
.arcade-score{top:calc(7.5*var(--cq));left:calc(12*var(--cq));width:calc(11*var(--cq));padding:0;background:none;border:0;border-radius:0;text-shadow:0 2px 5px #051525;box-shadow:none!important}.arcade-score>span{font-size:calc(.5*var(--cq))}.arcade-score>strong{font-size:calc(2*var(--cq));margin:0}.arcade-score.chain{border:0}.arcade-score i{height:calc(.18*var(--cq));width:calc(8*var(--cq))}
.hud-left{left:calc(3*var(--cq));bottom:calc(4*var(--cq));width:calc(15*var(--cq));text-shadow:0 2px 5px #061327}.battery,.drift-meter-wrap{background:none;padding:0;border:0;border-radius:0;margin-top:calc(.7*var(--cq))}.battery-bars i{height:calc(.55*var(--cq));transform:skew(-18deg);border-radius:0;box-shadow:0 2px 4px #071225}.battery .hud-sub{display:none}.drift-meter{height:calc(.5*var(--cq));border-radius:0;transform:skew(-18deg);box-shadow:0 2px 4px #071225}.drift-meter-wrap .hud-label{display:none}.hud-left .hud-label,.hud-left .hud-sub{font-size:calc(.67*var(--cq))}
.hud-right{right:calc(3*var(--cq));bottom:calc(13*var(--cq));gap:calc(.2*var(--cq));flex-direction:column-reverse}.speedo .hud-big{font-size:calc(2.3*var(--cq))}.speedo .hud-sub{font-size:calc(.65*var(--cq))}#minimap{width:calc(10*var(--cq));height:calc(10*var(--cq));background:#08193125;border:0;border-radius:0;filter:drop-shadow(0 2px 3px #061327)}
.objective{bottom:calc(2.2*var(--cq));background:linear-gradient(90deg,transparent,#071629bb 20% 80%,transparent);border-radius:0;padding:calc(.5*var(--cq)) calc(2.5*var(--cq));font-size:calc(.7*var(--cq))}.race-intel{top:calc(2.5*var(--cq))}.race-intel span{font-size:calc(.6*var(--cq))}.race-intel strong{font-size:calc(.85*var(--cq))}.hud-buttons button{background:#07182ca0;border:0;font-size:calc(.6*var(--cq))}
/* Finish ceremony keeps the original racer as the hero; data remains earned in play. */
#finishOverlay{background:linear-gradient(100deg,#06122b42 0%,#09142bb8 50%,#101c38dd 100%);backdrop-filter:blur(2px)}
#finishOverlay::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 calc(8*var(--cq)),#b6f6ff05 calc(8*var(--cq)) calc(8.2*var(--cq)));pointer-events:none}
#finishOverlay .overlay-card{position:relative;width:94%;height:100%;padding:calc(3*var(--cq)) 0;display:flex;align-items:center;gap:calc(3*var(--cq));justify-content:flex-end}
.finish-racer{width:19%;align-self:flex-end;min-height:calc(18*var(--cq));position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,color-mix(in srgb,var(--finish-accent,#24b9af) 25%,transparent),transparent 66%)}
.finish-racer img{width:110%;max-width:none;opacity:.58;filter:drop-shadow(0 calc(1.2*var(--cq)) calc(1.6*var(--cq)) #0007);transform:rotate(-4deg)}
.finish-racer figcaption{position:absolute;bottom:calc(4*var(--cq));left:calc(3*var(--cq));right:0;display:flex;flex-direction:column;transform:skew(-8deg)}
#finishRacerName{font-size:calc(2.7*var(--cq));font-weight:700;letter-spacing:-.06em;line-height:1;text-shadow:calc(.16*var(--cq)) calc(.16*var(--cq)) 0 var(--finish-accent)}
#finishCourseName{font-size:calc(.9*var(--cq));letter-spacing:.16em;color:#cce6f0;margin-top:calc(.6*var(--cq))}
.finish-summary{flex:1;min-width:0}.finish-kicker{font-size:calc(.65*var(--cq));letter-spacing:.23em;margin-bottom:calc(.7*var(--cq));color:#a9dedc}
#finishOverlay h2{font-size:calc(4.6*var(--cq));line-height:.98;margin-bottom:calc(1.3*var(--cq));max-width:calc(45*var(--cq));transform:skew(-7deg);color:#eaf1ff;text-shadow:calc(.18*var(--cq)) calc(.18*var(--cq)) 0 #396179}
#finishOverlay.result-win h2{color:#fff09d;text-shadow:calc(.18*var(--cq)) calc(.18*var(--cq)) 0 #905968}
.result-podium{display:flex;align-items:center;gap:calc(1*var(--cq));border-bottom:1px solid #abdcf144;padding-bottom:calc(.5*var(--cq));margin-bottom:calc(1*var(--cq))}.result-podium strong{font:700 calc(4*var(--cq)) Space,sans-serif;color:#ffe593;line-height:1}.result-podium small{font-size:calc(1.4*var(--cq));color:#c8dbe5}.result-podium>span{font:500 calc(.65*var(--cq)) Space,sans-serif;letter-spacing:.2em;color:#c0d5e4}
#finishOverlay .result-grid{font-size:calc(.72*var(--cq));gap:calc(.38*var(--cq)) calc(.8*var(--cq));margin-bottom:calc(1*var(--cq));line-height:1.3}#finishOverlay .result-grid b{font-size:calc(.63*var(--cq));letter-spacing:.07em;color:#99b3c9}#finishOverlay .result-grid i{color:#f2f7ff}#finishOverlay .result-grid i:nth-child(2){color:#ffe69a;font-weight:700}#finishOverlay .result-reason{font-size:calc(.85*var(--cq));margin-bottom:calc(.8*var(--cq));color:#ffb7ac}
#finishOverlay button{font-size:calc(.7*var(--cq));min-height:30px;padding:calc(.75*var(--cq)) calc(1*var(--cq));margin:calc(.35*var(--cq)) calc(.3*var(--cq)) 0 0;border-radius:2px}#finishOverlay .primary{display:inline-block;background:#ffe68d;box-shadow:0 calc(.25*var(--cq)) 0 #997147;color:#112441}#finishOverlay .credit-line{margin-top:calc(1*var(--cq));font-size:calc(.5*var(--cq));color:#7c96ad}
@media(pointer:coarse){.hud-left{bottom:calc(13*var(--cq))}.hud-right{bottom:calc(18*var(--cq))}.place-cell{top:calc(28*var(--cq))}.arcade-score{top:calc(7.5*var(--cq));left:calc(12*var(--cq))}.hud-buttons button{font-size:calc(.8*var(--cq));min-height:24px}.objective{bottom:calc(1.2*var(--cq))}}
@media(max-height:480px){#finishOverlay .overlay-card{padding:calc(1.5*var(--cq)) 0;gap:calc(2*var(--cq))}.finish-racer{width:38%}#finishOverlay .result-grid{font-size:max(6px,calc(.72*var(--cq)));gap:calc(.24*var(--cq)) calc(.6*var(--cq))}#finishOverlay .result-grid b{font-size:max(6px,calc(.63*var(--cq)))}#finishOverlay h2{font-size:calc(4*var(--cq));margin-bottom:calc(.7*var(--cq))}.result-podium{margin-bottom:calc(.5*var(--cq))}.result-podium strong{font-size:calc(3*var(--cq))}#finishOverlay button{font-size:max(7px,calc(.7*var(--cq)));min-height:28px;padding:calc(.6*var(--cq))}.finish-kicker{font-size:6px}.finish-racer figcaption{bottom:calc(5*var(--cq))}.hud-label,.hud-sub{font-size:max(6px,calc(.65*var(--cq)))}.item-cell .hud-sub{font-size:5px}.timer-cell .hud-label{font-size:6px}}
.place-cell{top:calc(44*var(--cq))}
#finishOverlay .result-grid{font-size:calc(.95*var(--cq));gap:calc(.6*var(--cq)) calc(.8*var(--cq))}#finishOverlay .result-grid b{font-size:calc(.73*var(--cq))}
.gamepad-hint{font-size:calc(.47*var(--cq));color:#8fa5d8;letter-spacing:.07em;line-height:1.5;margin-top:calc(.7*var(--cq))}
@media(pointer:coarse){.place-cell{top:calc(35*var(--cq))}.hud-right{bottom:calc(19*var(--cq))}.speedo .hud-big{font-size:calc(1.7*var(--cq))}}
@media(max-height:480px){#finishOverlay .result-grid{font-size:max(7px,calc(.95*var(--cq)));gap:calc(.45*var(--cq)) calc(.6*var(--cq))}#finishOverlay .result-grid b{font-size:max(6px,calc(.73*var(--cq)))}.gamepad-hint{font-size:5px;margin-top:calc(.4*var(--cq))}}

/* Portrait play: the stage fills the phone and --cq switches to a height-aware unit so text stays readable. */
@media(max-aspect-ratio:4/5){
body{display:block;padding:0;min-height:0}
.stage{width:100vw;height:100svh;aspect-ratio:auto;border-radius:0;box-shadow:none;container-type:size;--cq:min(2.1cqw,1cqh)}
.overlay-cover{display:block;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.overlay-cover .attract-bg{position:fixed}
.setup-brand{top:calc(1.9*var(--cq) + env(safe-area-inset-top))}
.setup-brand .attract-credits{display:none}
.overlay-cover .setup-intro{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin:calc(8*var(--cq) + env(safe-area-inset-top)) calc(3.4*var(--cq)) 0}
.setup-picker{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:calc(4*var(--cq)) calc(3.4*var(--cq)) calc(6*var(--cq) + env(safe-area-inset-bottom))}
.character-list{grid-template-columns:repeat(3,1fr)}
.setup-picker .racer-details{padding-right:0;min-height:0}
.controls-ticker,.gamepad-hint{display:none}
.hud-top{top:calc(2*var(--cq) + env(safe-area-inset-top))}
.race-intel{top:calc(15.5*var(--cq) + env(safe-area-inset-top))}
.touch-controls{bottom:calc(3*var(--cq) + env(safe-area-inset-bottom));align-items:flex-end}
.touch-left button{min-width:calc(9.5*var(--cq));height:calc(9.5*var(--cq));font-size:calc(2.2*var(--cq))}
.touch-right{display:grid!important;grid-template-columns:repeat(2,auto)}
.touch-right button{min-width:calc(8*var(--cq));height:calc(7*var(--cq));font-size:calc(1.3*var(--cq))}
.hud-left,.hud-right{bottom:calc(19*var(--cq) + env(safe-area-inset-bottom))}
.hud-buttons{bottom:auto;top:calc(8.5*var(--cq) + env(safe-area-inset-top));right:calc(2*var(--cq))}
.overlay:not(.overlay-cover){overflow-y:auto}
#finishOverlay .overlay-card{width:92%;flex-direction:column}
}
/* OutRun-style arcade HUD (2026-09-28): chunky italic cabinet numerals, big centred clock,
   extended-play flash and a segmented tach. Appended last so it wins over the panel look. */
.stage .timer-cell{position:absolute;left:50%;top:0;transform:translateX(-50%) skewX(-8deg);background:none;border:0;box-shadow:none;align-items:center;gap:0;padding:0;min-width:calc(12*var(--cq))}
.stage .timer-cell .hud-label{font-size:calc(1.35*var(--cq));font-weight:700;letter-spacing:.18em;color:#ffe066;-webkit-text-stroke:calc(.12*var(--cq)) #9b1d12;paint-order:stroke;text-shadow:0 calc(.2*var(--cq)) 0 #5a0d08}
.stage #raceTimer{font-family:Space,system-ui,sans-serif;font-size:calc(6.2*var(--cq));line-height:.95;font-weight:700;font-style:italic;letter-spacing:-.02em;color:#ffd23a;background:linear-gradient(#fff6b0 10%,#ffd23a 45%,#ff8a1f 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 calc(.28*var(--cq)) 0 #7a130b) drop-shadow(0 0 calc(.6*var(--cq)) #ff6a2a88)}
.stage .timer-cell.trial #raceTimer{font-size:calc(3.4*var(--cq))}
.stage .timer-cell.low #raceTimer{background:linear-gradient(#fff 5%,#ff5a4a 50%,#c0121a);-webkit-background-clip:text;background-clip:text;animation:hudBlink .5s steps(2) infinite}
.stage .timer-cell.extend #raceTimer{animation:hudExtend .35s ease-out infinite alternate}
.extend-banner{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:calc(2.3*var(--cq));font-weight:700;font-style:italic;color:#fff;-webkit-text-stroke:calc(.16*var(--cq)) #d11a5b;paint-order:stroke;text-shadow:0 0 calc(1*var(--cq)) #ff3d8b;opacity:0;pointer-events:none}
.stage .timer-cell.extend .extend-banner{opacity:1;animation:hudBlink .3s steps(2) infinite}
@keyframes hudBlink{50%{opacity:.35}}
@keyframes hudExtend{from{transform:scale(1)}to{transform:scale(1.12)}}
.stage .hud-cell{background:linear-gradient(135deg,#0d1b3acc,#2a0f3ab3);border:0;border-left:calc(.3*var(--cq)) solid #ffcf3a;border-radius:0;transform:skewX(-8deg)}
.stage .timer-cell{border:0}
.stage .place-cell .hud-big,.stage .place-suf{font-style:italic;color:#ffd23a;-webkit-text-stroke:calc(.1*var(--cq)) #7a130b;paint-order:stroke}
.stage .speedo{flex-wrap:wrap;justify-content:flex-end;transform:skewX(-8deg);max-width:calc(20*var(--cq))}
.stage .speedo .hud-big{font-family:Space,system-ui,sans-serif;font-style:italic;font-weight:700;color:#fff;-webkit-text-stroke:calc(.12*var(--cq)) #0d1b3a;paint-order:stroke;text-shadow:0 calc(.25*var(--cq)) 0 #0d1b3a}
.stage .speedo .hud-sub{font-weight:700;font-style:italic;color:#ffd23a;letter-spacing:.12em}
.tach{flex-basis:100%;height:calc(1*var(--cq));margin-top:calc(.3*var(--cq));background:#0d1b3a99;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(.8*var(--cq)),transparent 0 calc(1*var(--cq)));mask:repeating-linear-gradient(90deg,#000 0 calc(.8*var(--cq)),transparent 0 calc(1*var(--cq)))}
.tach i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3cf0a0,#ffe066 60%,#ff5a2a 85%,#ff1a4a);transition:width .08s linear}
.stage .arcade-score strong{font-style:italic;color:#ffd23a;-webkit-text-stroke:calc(.08*var(--cq)) #7a130b;paint-order:stroke}
.stage .hud-top .timer-cell{background:none;transform:translateX(-50%) skewX(-8deg);top:0}
.stage #raceTimer{text-shadow:none}
.stage .race-intel{top:calc(11.5*var(--cq))}
.stage:has(.timer-cell.extend) .race-intel{opacity:0}

/* Skidlings live face: the player's current expression from the vector face master. */
.face-badge{width:72px;height:72px;border-radius:50%;border:3px solid #14121c;box-shadow:0 0 0 3px rgba(164,107,255,.55);overflow:hidden;margin-bottom:8px;background:#e2b48a}
.face-badge img{width:100%;height:100%;display:block}
@media (max-width:760px){.face-badge{width:52px;height:52px}}

/* ===== Skidlings select v2: step 1 garage stage (crew), step 2 dispatch map (city). ===== */
.arcade-attract.v2{--u:min(calc(100vh / 720),calc(100vw / 1280));--v2-violet:#a46bff;--v2-cyan:#35e0f0;--v2-yellow:#ffd24a;--v2-mut:#9aa4c8;overflow:hidden;background:#07090f}
.v2 .attract-bg,.v2 .picker-heading,.v2 .arcade-title,.v2 .title-badge,.v2 #modeBrief,.v2 .setup-ready,.v2 .swap-link,.v2 .gamepad-hint,.v2 .controls-ticker,.v2 .racer-hero,.v2 .course-art,.v2 #racerPersonality{display:none!important}
.v2 .v2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.v2 .v2-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 45% 55%,transparent 40%,rgba(4,6,14,.78))}
.v2[data-step="crew"] .v2-city,.v2[data-step="city"] .v2-crew,.v2[data-step="crew"] .setup-intro,.v2[data-step="crew"] .v2-back{display:none!important}
.v2[data-step="city"] .v2-bg.v2-city{width:86%;left:-4%;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.v2 > *:not(.v2-bg):not(.v2-shade){z-index:2}
/* header + step chips (the tabs, kept clickable) */
.v2 .v2-head{position:absolute;left:calc(var(--u)*44);top:calc(var(--u)*30);display:flex;align-items:center;gap:calc(var(--u)*14);font-weight:800;letter-spacing:.08em;font-size:calc(var(--u)*26)}
.v2 .v2-head b{background:linear-gradient(90deg,#fff,#c9a6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2 .v2-back{width:calc(var(--u)*44);height:calc(var(--u)*44);border:2px solid var(--v2-cyan);background:rgba(8,12,28,.6);color:var(--v2-cyan);font-size:calc(var(--u)*24);cursor:pointer;clip-path:polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%)}
.v2 .setup-brand{position:absolute;right:calc(var(--u)*44);top:calc(var(--u)*18);transform:scale(.8);transform-origin:top right}
.v2 .setup-brand .attract-credits{display:none}
.v2 .setup-picker{position:static}
.v2 .setup-tabs{position:absolute;left:50%;top:calc(var(--u)*30);transform:translateX(-50%);display:flex;gap:calc(var(--u)*8);margin:0;z-index:3}
.v2 #crewTab{order:0}.v2 #courseTab{order:1}
.v2 .setup-tab{padding:calc(var(--u)*6) calc(var(--u)*14);font-size:calc(var(--u)*12);min-width:0;height:auto}
/* ---- step 1: crew ---- */
.v2 .character-panel{position:static;display:block;background:none;border:0;padding:0}
.v2 .character-list{position:absolute;left:calc(var(--u)*44);top:calc(var(--u)*112);display:flex;flex-direction:column;gap:calc(var(--u)*10);width:auto;margin:0;overflow:visible}
.v2 .racer-card{width:calc(var(--u)*78);height:calc(var(--u)*78);padding:0;border-radius:calc(var(--u)*14);border:2px solid #2b3358;background:#0d1226 var(--face) no-repeat;background-size:calc(var(--u)*440) auto;background-position:calc(var(--u)*-6) calc(var(--u)*-10);position:relative;overflow:hidden;cursor:pointer;transform:none!important;box-shadow:none}
.v2 .racer-card img,.v2 .racer-card .racer-name{display:none}
.v2 .racer-card::before{content:'';position:absolute;right:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--racer-color)}
.v2 .racer-card:has(input:checked){border-color:var(--racer-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--racer-color) 40%,transparent),0 0 24px var(--racer-color)}
.v2 .racer-card .racer-pick{position:absolute;left:0;right:0;bottom:0;font:700 calc(var(--u)*9) Mono,monospace;letter-spacing:.14em;text-align:center;padding:2px 0;background:var(--racer-color);color:#0b0d18;opacity:0}
.v2 .racer-card:has(input:checked) .racer-pick{opacity:1}
.v2 .racer-card input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.v2 .racer-card:focus-within{outline:3px solid var(--v2-yellow);outline-offset:2px}
.v2 .v2-hero{position:absolute;left:calc(var(--u)*150);bottom:calc(var(--u)*40);height:calc(var(--u)*540);max-width:calc(var(--u)*680);object-fit:contain;object-position:bottom left;filter:drop-shadow(0 0 calc(var(--u)*30) rgba(164,107,255,.3))}
.v2 .racer-details{position:absolute;right:calc(var(--u)*44);top:calc(var(--u)*112);width:calc(var(--u)*380);padding:calc(var(--u)*22) calc(var(--u)*24) calc(var(--u)*20);background:linear-gradient(160deg,rgba(20,26,51,.9),rgba(10,12,28,.94));border:1.5px solid color-mix(in srgb,var(--selected-color,#a46bff) 60%,transparent);clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,8% 100%,0 92%);display:block}
.v2 .racer-heading h2{font-size:calc(var(--u)*60);line-height:.95;font-style:italic;font-weight:800;margin:calc(var(--u)*4) 0}
.v2 .racer-heading p{font:600 calc(var(--u)*11) Mono,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--selected-color,#a46bff);margin:0}
.v2 .racer-heading{display:flex;flex-direction:column-reverse}
.v2 .racer-quote{font-size:calc(var(--u)*14);color:var(--v2-mut);margin:0 0 calc(var(--u)*12)}
.v2 .racer-stats{display:grid;gap:calc(var(--u)*10);margin:0 0 calc(var(--u)*12)}
.v2 .racer-stats div{display:grid;grid-template-columns:1fr;gap:calc(var(--u)*5)}
.v2 .racer-stats span{font-size:calc(var(--u)*13);font-weight:700;letter-spacing:.08em}
.v2 .racer-stats i{height:calc(var(--u)*6);background:#232a4d;border-radius:3px;overflow:hidden;display:block}
.v2 .racer-stats b{display:block;height:100%;background:linear-gradient(90deg,var(--selected-color,#a46bff),var(--v2-cyan))}
.v2 .racer-details p{font-size:calc(var(--u)*13)}
/* primary CTA (both steps) */
.v2 .v2-cta{position:absolute;right:calc(var(--u)*44);bottom:calc(var(--u)*36);display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*8)}
.v2 .v2-step{font:700 calc(var(--u)*11) Mono,monospace;letter-spacing:.24em;color:var(--v2-yellow)}
.v2 .v2-sub{font:600 calc(var(--u)*12) Mono,monospace;letter-spacing:.18em;color:var(--v2-mut)}
.v2 .v2-go,.v2 #startButton{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*16);padding:0 calc(var(--u)*30) 0 calc(var(--u)*34);height:calc(var(--u)*78);min-width:calc(var(--u)*380);font-family:inherit;font-weight:800;font-size:calc(var(--u)*28);letter-spacing:.12em;color:#1a1300;background:linear-gradient(180deg,#ffe27a,#ffc21a);border:0;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);box-shadow:0 12px 40px rgba(255,194,26,.55);cursor:pointer;margin:0}
.v2 .v2-go kbd{font:700 calc(var(--u)*12) Mono,monospace;padding:4px 8px;border:2px solid #1a1300;border-radius:5px}
.v2 .v2-go:focus-visible,.v2 #startButton:focus-visible{outline:3px solid #fff;outline-offset:4px}
.v2 #startButton:disabled{filter:grayscale(.7) brightness(.7);cursor:wait}
/* ---- step 2: city ---- */
.v2 .course-panel{position:static;background:none;border:0;padding:0}
.v2 .level-list{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.v2 .level-card{position:absolute;transform:translate(-50%,-100%)!important;pointer-events:auto;padding:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*9);background:rgba(10,13,30,.86);border:1.5px solid var(--course-accent);color:var(--course-accent);clip-path:polygon(0 0,90% 0,100% 30%,100% 100%,10% 100%,0 70%);text-align:center;width:auto;min-width:0;height:auto;cursor:pointer;box-shadow:none}
.v2 .level-card:nth-child(1){left:27%;top:28%}.v2 .level-card:nth-child(2){left:44%;top:19%}.v2 .level-card:nth-child(3){left:60%;top:28%}
.v2 .level-card input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.v2 .course-card-name{display:block;font-size:calc(var(--u)*17);font-weight:800;color:#fff}
.v2 .course-card-caption{display:block;font:500 calc(var(--u)*10) Mono,monospace;letter-spacing:.2em;text-transform:uppercase}
.v2 .level-card:has(input:checked){padding:calc(var(--u)*12) calc(var(--u)*20);border-width:2.5px;box-shadow:0 0 calc(var(--u)*30) var(--course-accent)}
.v2 .level-card:has(input:checked) .course-card-name{font-size:calc(var(--u)*24)}
.v2 .level-card:has(input:checked)::before{content:'✓ SELECTED';display:block;font:700 calc(var(--u)*10) Mono,monospace;letter-spacing:.2em}
.v2 .level-card:focus-within{outline:3px solid var(--v2-yellow);outline-offset:3px}
.v2 .course-detail{position:absolute;right:calc(var(--u)*44);top:calc(var(--u)*100);width:calc(var(--u)*330);padding:calc(var(--u)*20) calc(var(--u)*22) calc(var(--u)*10);background:linear-gradient(160deg,rgba(20,26,51,.92),rgba(10,12,28,.95));border:1.5px solid rgba(53,224,240,.55);border-bottom:0;display:block}
.v2 .course-detail h3{font-size:calc(var(--u)*38);font-style:italic;font-weight:800;margin:calc(var(--u)*4) 0 calc(var(--u)*6)}
.v2 .course-detail p,.v2 .course-detail .course-best{font-size:calc(var(--u)*13);color:var(--v2-mut)}
.v2 .setup-intro{position:absolute;right:calc(var(--u)*44);top:calc(var(--u)*330);width:calc(var(--u)*330);padding:0 calc(var(--u)*22) calc(var(--u)*16);background:rgba(10,12,28,.95);border:1.5px solid rgba(53,224,240,.55);border-top:0;display:flex;flex-direction:column;gap:calc(var(--u)*10);max-height:none;overflow:visible}
.v2 .setup-intro .cartridge{margin:0;padding:0;background:none;border:0}
.v2 .setup-intro .v2-city-step{margin-top:calc(var(--u)*8)}
.v2 .setup-intro #startButton{min-width:0;width:100%;font-size:calc(var(--u)*26)}
.v2 .v2-locks span{position:absolute;font:600 calc(var(--u)*11) Mono,monospace;letter-spacing:.2em;color:#7d86a8;padding:6px 10px;border:1px dashed #3a4466;background:rgba(8,10,22,.7)}
@media (pointer:coarse){.v2 .racer-card,.v2 .level-card{min-height:44px}}
.v2 .racer-card,.v2 .racer-card:has(input:checked){background:#0d1226 var(--face) no-repeat;background-size:calc(var(--u)*440) auto;background-position:calc(var(--u)*-6) calc(var(--u)*-10)}
.v2 .racer-card .racer-pick{top:auto;height:auto;inset:auto 0 0 0;width:auto}
.v2 .setup-brand{display:none}
.v2 .setup-picker .racer-details #racerTrait,.v2 .setup-picker .racer-details #racerTradeoff{display:block}
.v2 .racer-details #racerTrait{margin:calc(var(--u)*6) 0 0;padding:calc(var(--u)*8) calc(var(--u)*12) 0;border-left:3px solid var(--v2-cyan);background:rgba(53,224,240,.08);font:700 calc(var(--u)*11) Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--v2-cyan)}
.v2 .racer-details #racerTradeoff{margin:0;padding:calc(var(--u)*3) calc(var(--u)*12) calc(var(--u)*9);border-left:3px solid var(--v2-cyan);background:rgba(53,224,240,.08);font-size:calc(var(--u)*13);color:#e6ebff}
.v2 .setup-intro{left:auto;bottom:auto;height:auto;min-height:0;top:calc(var(--u)*318);transform:none;margin:0}
.v2 .course-detail{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*6);left:auto;bottom:auto;height:auto;min-height:calc(var(--u)*218);transform:none}
.v2 .course-detail > div{display:block}
.v2 .course-detail .course-best{order:3;background:none;border:0;padding:0;font:600 calc(var(--u)*12) Mono,monospace}
.v2 .course-detail p{order:2;margin:0}
.v2 .level-card .course-pips{display:none}

/* ---- Skidlings select v2, portrait (phones and tablets held upright): a scrolling vertical stack. ---- */
@media (max-aspect-ratio: 1/1){
 .arcade-attract.v2{--p:clamp(1px,calc(100vw / 390),1.7px);display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--p)*12);overflow-y:auto;overflow-x:hidden;padding:calc(var(--p)*14) calc(var(--p)*16) calc(var(--p)*96);-webkit-overflow-scrolling:touch}
 .v2 .setup-picker,.v2 .character-panel,.v2 .course-panel{display:contents}
 .v2 .character-panel[hidden],.v2 .course-panel[hidden]{display:none}
 .v2 > *:not(.v2-bg):not(.v2-shade),.v2 .setup-picker > *,.v2 .character-panel > *,.v2 .course-panel > *{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto;max-width:none}
 .v2 .v2-bg{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;left:0!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:.55}
 .v2 .v2-shade{position:fixed}
 .v2 .v2-head{order:1;font-size:calc(var(--p)*20);gap:calc(var(--p)*10)}
 .v2 .v2-back{width:44px;height:44px;font-size:22px}
 .v2 .setup-tabs{order:2;display:flex;justify-content:center;gap:8px}
 .v2 .setup-tab{min-height:40px;font-size:calc(var(--p)*12);padding:6px 14px}
 /* crew step */
 .v2 .v2-hero{order:3;align-self:center;height:auto!important;width:min(100%,560px)!important;max-height:42vh;object-fit:contain;object-position:center bottom}
 .v2 .character-list{order:4;flex-direction:row!important;gap:10px!important;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px;scroll-snap-type:x mandatory;justify-content:safe center}
 .v2 .racer-card{flex:0 0 auto;width:64px!important;height:64px!important;background-size:360px auto!important;background-position:-5px -8px!important;scroll-snap-align:center}
 .v2 .racer-details{order:5;width:auto!important;padding:14px 16px!important}
 .v2 .racer-heading h2{font-size:calc(var(--p)*44)}
 .v2 .racer-heading p,.v2 .racer-stats span{font-size:calc(var(--p)*12)}
 .v2 .racer-quote,.v2 .racer-details #racerTradeoff{font-size:calc(var(--p)*14)}
 /* primary CTA pinned to the bottom, full width, thumb sized */
 .v2 .v2-cta,.v2 .v2-city-step{order:9}
 .v2 .v2-cta{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;align-items:stretch;gap:4px;z-index:5}
 .v2 .v2-cta .v2-step,.v2 .v2-cta .v2-sub{text-align:center;font-size:calc(var(--p)*10);text-shadow:0 1px 6px #000}
 .v2 .v2-go,.v2 #startButton{min-width:0!important;width:100%;height:60px;font-size:calc(var(--p)*20);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
 .v2 .v2-go kbd{display:none}
 /* city step */
 .v2[data-step="city"] .v2-bg.v2-city{position:relative!important;inset:auto!important;order:3;width:100%!important;height:auto!important;max-height:38vh;object-fit:contain;opacity:1}
 .v2 .v2-locks{display:none}
 .v2 .level-list{order:4;display:flex!important;gap:8px;overflow-x:auto;padding:4px 2px 10px;pointer-events:auto;scroll-snap-type:x mandatory}
 .v2 .level-card{flex:0 0 auto;min-height:48px;scroll-snap-align:center}
 .v2 .course-detail{order:5;width:auto!important;min-height:0!important;padding:14px 16px 6px!important}
 .v2 .course-detail h3{font-size:calc(var(--p)*30)}
 .v2 .setup-intro{order:6;width:auto!important;padding:0 16px 14px!important}
 .v2 .setup-intro #startButton{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;z-index:5}
 .v2 .setup-intro .v2-city-step{text-align:center}
 .v2 .mode-seg button,.v2 .pace-seg button{min-height:44px;font-size:13px}
 .arcade-attract.v2{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
 .v2 .character-list{height:auto!important;min-height:78px;align-items:center;flex-wrap:nowrap}
 .v2 .level-list{height:auto!important;min-height:64px;align-items:center}
 .v2 .level-card{height:auto!important;padding:8px 14px!important}
 .v2 .level-card span{position:static!important;display:block}
 .v2 .level-card .course-card-name{font-size:16px}.v2 .level-card .course-card-caption{font-size:10px}
 .v2 .level-card:has(input:checked) .course-card-name{font-size:18px}
 .v2 .setup-intro #startButton{font-size:calc(var(--p)*20)!important}
 .v2 .course-detail p,.v2 .course-detail .course-best{font-size:14px}
 .v2 .v2-step{font-size:11px}
 .v2 .level-card{position:relative!important;transform:none!important;left:auto!important;top:auto!important}
 .v2 .setup-intro{margin:0!important}.v2 .course-detail{margin:0!important;overflow:visible;height:auto!important;max-height:none!important}
 .v2 .v2-hero{max-height:32vh}
}
/* Short landscape phones: keep the primary buttons thumb sized. Touch screens have no Enter key. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px){.v2 .v2-go,.v2 #startButton{height:48px;min-height:48px}}
@media (pointer:coarse){.v2 .v2-go kbd{display:none}}
/* Results grid: labels sat at the left edge with their values right-aligned 500px away on a
   1024px screen, so every row had to be read across a gap. Pack the value beside its label. */
#finishOverlay .result-grid{grid-template-columns:max-content minmax(0,1fr);column-gap:calc(1.6*var(--cq));max-width:calc(46*var(--cq))}
#finishOverlay .result-grid i{text-align:left}
/* Phone landscape (812x375): the finish buttons measured 53x28px with 7px type and the stats grid
   7px. Thumb targets stay 44px and the type gets a floor; the card still fits a 363px stage. */
@media(max-height:480px),(pointer:coarse){#finishOverlay button{min-height:44px;font-size:max(11px,calc(.7*var(--cq)));padding:0 14px;margin-top:6px}}
@media(max-height:480px){#finishOverlay .result-grid{font-size:max(10px,calc(.95*var(--cq)));gap:2px calc(.6*var(--cq));margin-bottom:4px}#finishOverlay .result-grid b{font-size:max(8.5px,calc(.73*var(--cq)))}#finishOverlay h2{font-size:max(22px,calc(4.6*var(--cq)));margin-bottom:4px}#finishOverlay .result-podium{margin-bottom:4px;padding-bottom:3px}#finishOverlay .result-reason{font-size:max(9px,calc(.85*var(--cq)))}#finishOverlay .finish-kicker{font-size:max(7px,calc(.65*var(--cq)))}}
/* HUD legibility floors. Every HUD size is a share of the stage width, and on a 645px landscape
   phone stage the corner hint measured 5.5px, the district label 3.9px, the drift tier and core
   hint 4.3px and the pause/sound/assist buttons 3.9px. max() keeps the desktop sizes untouched
   (the cq value wins there) and only lifts the phone sizes to a readable floor. A later
   .race-intel rule had also undone the 7/8px short-landscape floor set earlier in this file. */
.race-intel span{font-size:max(8px,calc(.6*var(--cq)))}
.race-intel strong{font-size:max(10px,calc(.85*var(--cq)))}
.hud-sub{font-size:max(8px,calc(.8*var(--cq)))}
.item-cell .hud-sub,.speedo .hud-sub{font-size:max(8px,calc(.65*var(--cq)))}
.hud-label{font-size:max(7px,calc(.7*var(--cq)))}
.objective{font-size:max(8px,calc(.7*var(--cq)))}
.hud-buttons button{font-size:max(9px,calc(.9*var(--cq)))}
@media(min-aspect-ratio:4/5){.hud-buttons{right:calc(10.5*var(--cq))}}
@media(pointer:coarse){.hud-buttons button{min-height:28px;padding:0 8px}}
.hud-left .hud-label,.hud-left .hud-sub{font-size:max(8px,calc(.67*var(--cq)))}
.core-cell .hud-sub{font-size:max(8px,calc(.66*var(--cq)))}
.item-cell .hud-sub{font-size:max(7px,calc(.52*var(--cq)))}
@media(max-height:480px){.objective{bottom:calc(3.6*var(--cq))}}
/* Portrait phones keep a full-bleed stage (375px wide, so 1cq is 3.75px): the results grid
   measured 7.5px type there. Same floors as the short-landscape block, keyed on touch. */
@media(pointer:coarse){#finishOverlay .result-grid{font-size:max(11px,calc(.95*var(--cq)));gap:3px calc(.8*var(--cq))}#finishOverlay .result-grid b{font-size:max(9px,calc(.73*var(--cq)))}#finishOverlay h2{font-size:max(26px,calc(4.6*var(--cq)))}#finishOverlay .result-reason{font-size:max(10px,calc(.85*var(--cq)))}#finishOverlay .finish-kicker{font-size:max(8px,calc(.65*var(--cq)))}#finishOverlay .result-podium strong{font-size:max(28px,calc(4*var(--cq)))}}
/* Portrait phone (375x812 stage): the toggle bar (y 67-95), arcade score (59-114) and route hint
   (91-117) all sat on the timer cell (16-78) and on each other. Stack them: timer row, then the
   toggle bar at the right and the score at the left, then the route hint; the objective pill
   moves above the touch controls instead of touching the stage edge under them. */
@media(max-aspect-ratio:4/5){
 .hud-buttons{top:calc(22.5*var(--cq) + env(safe-area-inset-top));right:calc(2*var(--cq))}
 .arcade-score{left:calc(5.3*var(--cq));right:auto;top:calc(21*var(--cq) + env(safe-area-inset-top))}
 .objective{bottom:auto;top:calc(11.5*var(--cq) + 32px + env(safe-area-inset-top))}
}
/* Portrait city step (iPhone 17 Safari, 402x740): the course detail is a flex item with
   min-height:0, so the column shrank it to 89px and its description and record line spilled under
   the Core Chase / Time Trial row. Keep it at content height and clamp the blurb to two lines. */
@media (max-aspect-ratio: 1/1){
 .v2 .course-detail{flex-shrink:0}
 .v2 #levelDescription{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Portrait city step on the iPhone 17 (Safari viewport about 402x700): the Easy/Standard/Pro row
   sat under the fixed Start Race button. A shorter map hero gives the row its space back, and the
   overlay can scroll with room under the fixed button if a phone is shorter still. */
@media (max-aspect-ratio: 1/1){
 .v2[data-step="city"] .v2-bg.v2-city{max-height:16vh}
 #launchOverlay.v2{overflow-y:auto;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* iPhone 17 portrait: "FLUX LINE RIGHT → • THREAD 3 ARCHES" wrapped and its second line hid
   behind the objective pill. One line, clipped with an ellipsis if a phone is narrower still. */
@media (max-aspect-ratio: 1/1){
 .race-intel{width:94%;max-width:94%}
 .race-intel strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}
/* iPhone 17 portrait: "FLOW COMBO // 2x SCORE" (the race message at top:24%) landed on the
   pause/sound/assist bar. Put it under that bar, above the horizon. */
@media(max-aspect-ratio:4/5){.race-message{top:calc(22.5*var(--cq) + 58px + env(safe-area-inset-top));left:4%;right:4%;font-size:max(14px,calc(1.8*var(--cq)))}}
/* Phone declutter. Mid-race a touch screen keeps: item, clock, core status, corner hint, score,
   place, speed, minimap, battery bars, drift bar, the controls and one Pause button. Dropped on
   touch: the district label, the objective pill (it repeated the core cell), the face badge, the
   SURGE BATTERY / LUMEN SCORE labels and the idle drift tutorial line (the tier shows while a
   drift or tow is live). Sound and Steering Assist moved into the pause panel (main.js). */
@media(pointer:coarse){
 #districtLabel,#objective,.face-badge,.battery .hud-label,.hud-left .hud-label,.arcade-score>span{display:none}
 .drift-meter-wrap #driftTier{display:none}.drift-meter-wrap.live #driftTier{display:block}
 .hud-buttons{right:calc(2*var(--cq))}
 .hud-buttons #pauseButton{min-height:36px;padding:0 14px}
 #pausePanel #soundButton,#pausePanel #assistButton{pointer-events:auto;font:inherit;min-height:44px;padding:0 18px;margin:6px 4px 0;border:1px solid #ffffff30;background:#12303dbb;border-radius:4px;letter-spacing:.06em}
}
@media(pointer:coarse){#pausePanel button{min-height:44px;min-width:62%;font-size:13px;margin:6px 0 0;padding:0 18px}#pausePanel>span{display:none}}
/* Touch control layout and look (2026-10-13). Steering moved to the right thumb, actions to the
   left with Boost as the primary (gas is automatic on touch; Boost spends the surge battery).
   Liquid-glass buttons: frosted blur, specular top edge, soft rim, pressed state brightens. */
@media(pointer:coarse){
 .touch-controls{flex-direction:row-reverse}
 .touch-right{display:grid!important;grid-template-columns:1fr 1fr;grid-template-areas:"brake item" "drift drift" "boost boost";gap:8px;align-items:end}
 .touch-right button{min-width:0;width:100%}
 .touch-right [data-key="ArrowDown"]{grid-area:brake;height:calc(5.6*var(--cq));font-size:max(10px,calc(1.1*var(--cq)))}
 .touch-right [data-action="item"]{grid-area:item;height:calc(5.6*var(--cq));font-size:max(10px,calc(1.1*var(--cq)))}
 .touch-right [data-key="Shift"]{grid-area:drift;height:calc(7.5*var(--cq));font-size:max(12px,calc(1.4*var(--cq)))}
 .touch-right [data-key=" "]{grid-area:boost;height:calc(10*var(--cq));font-size:max(15px,calc(1.9*var(--cq)));font-weight:800;letter-spacing:.08em}
 .touch-controls button{color:#f4fbff;font-weight:700;letter-spacing:.06em;text-shadow:0 1px 2px #0008;border-radius:22px;border:1px solid rgba(255,255,255,.42);background:linear-gradient(145deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 45%,rgba(255,255,255,.04) 100%);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 18px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.28);transition:transform .08s,background .12s,box-shadow .12s}
 .touch-controls button:active,.touch-controls button.held{background:linear-gradient(145deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.14) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 22px rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.25);transform:scale(.96)}
 .touch-right [data-key=" "]{border-color:rgba(255,226,160,.75);background:linear-gradient(145deg,rgba(255,214,120,.55) 0%,rgba(255,176,64,.26) 50%,rgba(255,150,40,.14) 100%);box-shadow:inset 0 1px 0 rgba(255,245,210,.85),inset 0 0 22px rgba(255,200,110,.18),0 10px 28px rgba(255,140,30,.22)}
 .touch-right [data-key=" "]:active,.touch-right [data-key=" "].held{background:linear-gradient(145deg,rgba(255,232,160,.8) 0%,rgba(255,196,90,.5) 50%,rgba(255,170,60,.3) 100%)}
 .touch-left button{border-radius:26px}
}
@media(pointer:coarse){
 .touch-right{width:calc(34*var(--cq));max-width:46vw}
 .touch-right [data-key="ArrowDown"],.touch-right [data-action="item"]{height:max(44px,calc(5.6*var(--cq)))}
 .touch-right [data-key="Shift"]{height:max(52px,calc(7.5*var(--cq)))}
 .touch-right [data-key=" "]{height:max(72px,calc(10*var(--cq)))}
 /* the action stack is taller than the steer pair now; lift the battery and drift bars above it */
 .racing .hud-left{bottom:calc(3*var(--cq) + 215px + env(safe-area-inset-bottom))}
}
/* iPhone 17 portrait (Safari viewport about 700px): the racer name sat under the fixed Ride
   button. A slightly shorter crew hero gives the heading its room. */
@media (max-aspect-ratio: 1/1){.v2 .v2-hero.v2-crew{max-height:26vh}}