/* TruGrit Grip Race. Brand tokens follow trugrittraction.com (theme trugrit): navy, ink, slate, gold. */
@font-face{font-family:"PIRULEN";src:url("../assets/fonts/PirulenRg-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#003050; --deep:#021A2B; --ink:#0E1B26; --slate:#566574; --steel:#8796A5; --mist:#C9D6E2;
  --line:#DCE2E8; --blue:#0F5C9A; --gold:#FFB81C; --gold-soft:#FFF3D1; --green:#17794A; --ok:#3DDC84; --bad:#FF5A4E;
  --panel:rgba(2,26,43,.82); --panel-edge:rgba(201,214,226,.18);
  --cut:14px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deep);color:#fff;overflow:hidden;overscroll-behavior:none}
body{font-family:Barlow,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
button,input,select{font:inherit}
[hidden]{display:none!important}

.app{position:fixed;inset:0;overflow:hidden;background:#000}
.view{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- shared pieces */
.btn{appearance:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;padding:13px 26px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.back:focus-visible,.seg button:focus-visible,.board select:focus-visible,.pose:focus-visible,.title-player button:focus-visible,.mute:focus-visible,.ghost-toggle input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wcard:focus-visible,.pcard:focus-visible,.mode:focus-visible,.opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 6px rgba(255,184,28,.25),0 0 40px rgba(255,184,28,.35)}
.opt:focus-visible{background:rgba(255,184,28,.18);transform:translateX(3px)}
.btn-gold{background:linear-gradient(180deg,#FFC83F,#FFB81C 55%,#E8A000);border-color:#FFD66B;color:#0E1B26;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 8px 30px rgba(255,184,28,.25)}
.btn-gold:hover{background:linear-gradient(180deg,#FFD35E,#FFC23A 55%,#F0AA00)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.18);color:var(--mist)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:12px}
.fine{font-size:13px;color:var(--steel);line-height:1.45;margin:10px 0}
.panel{background:var(--panel);border:1px solid var(--panel-edge);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);padding:32px 34px;position:relative;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.panel::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.5;pointer-events:none}
.panel h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:38px;letter-spacing:.02em;margin:0 0 10px;text-transform:uppercase}
.panel p{color:var(--mist);line-height:1.5;margin:0 0 14px}

.screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));animation:screenIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes screenIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.screen::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 40%,rgba(2,26,43,.25),rgba(2,26,43,.86) 70%),linear-gradient(180deg,rgba(2,26,43,.2),rgba(2,26,43,.9));pointer-events:none}
.screen-head{position:absolute;top:max(18px,env(safe-area-inset-top));left:0;right:0;display:flex;align-items:center;gap:16px;padding:0 max(24px,env(safe-area-inset-left))}
.screen-head h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:34px;text-transform:uppercase;letter-spacing:.03em;margin:0}
.screen-head .step{margin-left:auto;font-family:"Barlow Condensed",sans-serif;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:15px}
.back{appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;width:44px;height:44px;font-size:30px;line-height:1;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

/* ---------- title */
.title-screen::before{background:radial-gradient(80% 70% at 50% 45%,rgba(2,26,43,0),rgba(2,26,43,.7) 75%),linear-gradient(180deg,rgba(2,26,43,.45),rgba(2,26,43,.15) 40%,rgba(2,26,43,.85))}
.title-wrap{text-align:center;max-width:900px;display:flex;flex-direction:column;align-items:center}
.title-brand,.title-menu{display:flex;flex-direction:column;align-items:center}
.title-logo{width:min(250px,46vw);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.title-game{font-family:"PIRULEN",sans-serif;font-weight:400;font-size:clamp(54px,11vw,136px);line-height:.9;margin:14px 0 6px;display:flex;gap:.25em;letter-spacing:.02em;background:linear-gradient(180deg,#fff 0%,#fff 46%,#FFD66B 52%,#FFB81C 70%,#B97800 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 40px rgba(255,184,28,.25));position:relative}
/* the gold is painted only inside the title's box, and an italic last letter leans past it (Brian: "the p on slip is cut
   off"), so the slanted word carries room for its lean */
.title-game span:last-child{font-style:italic;padding-right:.18em}
.title-lede{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(22px,3.2vw,34px);margin:6px 0 8px;letter-spacing:.01em}
.title-sub{color:var(--mist);font-size:clamp(15px,1.7vw,18px);line-height:1.55;max-width:680px;margin:0 0 26px}
.title-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.title-modes{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:16px;margin:0 0 16px}
.mode{appearance:none;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;padding:16px 20px 18px;border:1px solid rgba(255,255,255,.28);background:rgba(2,26,43,.72);color:#fff;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:transform .15s ease,background .15s ease}
.mode b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.mode span{font-size:15px;color:var(--mist);line-height:1.35}
.mode:hover{transform:translateY(-2px);background:rgba(15,92,154,.45)}
.mode.btn-gold{border-color:#FFD66B;background:linear-gradient(180deg,#FFC83F,#FFB81C 55%,#E8A000);color:var(--ink);box-shadow:0 8px 30px rgba(255,184,28,.25)}
.mode.btn-gold:hover{background:linear-gradient(180deg,#FFD35E,#FFC23A 55%,#F0AA00)}
.mode.btn-gold span{color:#3a2c00}
.title-player{margin-top:18px;color:var(--steel);font-size:14px;min-height:20px}
.title-player button{background:none;border:0;color:var(--gold);cursor:pointer;text-decoration:underline;padding:0 0 0 6px}
.title-ticker{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;overflow:hidden;white-space:nowrap;font-family:"Barlow Condensed",sans-serif;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:rgba(201,214,226,.7);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.title-ticker div{display:inline-block;animation:ticker 40s linear infinite;padding-left:100%}
.title-ticker b{color:var(--gold);font-weight:600}
@keyframes ticker{to{transform:translateX(-100%)}}

.how{max-width:860px}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px;margin:16px 0}
.how-grid h3{font-family:"Barlow Condensed",sans-serif;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px;font-size:20px}
.how-grid p{margin:0}
.how-keys{font-size:14px}
.player{max-width:520px;width:100%}
.player label{display:flex;flex-direction:column;gap:6px;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--mist);margin:0 0 14px;font-size:15px}
.player input{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);color:#fff;padding:12px 14px;font-size:18px;font-family:Barlow,sans-serif;letter-spacing:0;text-transform:none;outline:none}
.player input:focus{border-color:var(--gold)}

/* ---------- garage */
.garage{width:min(1180px,100%);display:flex;flex-direction:column;gap:22px;margin-top:40px}
.garage-stage{display:grid;grid-template-columns:minmax(320px,1.25fr) 1fr;gap:30px;align-items:center}
.wheel-hero{position:relative;width:100%;aspect-ratio:16/10;justify-self:center}
#showroom{position:absolute;inset:0;width:100%;height:100%;display:block}
.wheel-photo{position:absolute;right:2%;top:3%;margin:0;width:clamp(72px,9vw,112px);text-align:center;background:rgba(2,26,43,.7);border:1px solid var(--panel-edge);padding:6px 6px 4px}
.wheel-photo img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.wheel-photo figcaption{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.pose{position:absolute;left:2%;bottom:4%;appearance:none;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(2,26,43,.7);color:var(--mist);font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px}
.pose:hover{color:#fff;border-color:var(--gold)}
.job{display:flex;flex-direction:column;gap:2px;background:linear-gradient(90deg,rgba(255,184,28,.16),rgba(2,26,43,.6));border-left:4px solid var(--gold);padding:10px 16px}
.job b{font-family:"Barlow Condensed",sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.job span{color:var(--mist);font-size:15px}
.job.flash{animation:jobFlash .6s ease}
@keyframes jobFlash{30%{background:rgba(255,90,78,.3)}}
@keyframes roll{to{transform:rotate(360deg)}}
.wheel-info h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(34px,4vw,52px);margin:0 0 8px;text-transform:uppercase;line-height:1}
.wheel-info p{color:var(--mist);line-height:1.55;margin:0 0 14px;max-width:560px}
.wheel-kicker{font-family:"Barlow Condensed",sans-serif;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-size:15px;margin-bottom:6px}
.stats{display:grid;gap:9px;margin:6px 0 4px;max-width:520px}
.stat{display:grid;grid-template-columns:130px 1fr 34px;gap:12px;align-items:center;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--mist)}
.stat-bar{height:10px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.stat-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blue),var(--gold));transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.stat-bar s{position:absolute;inset:0 auto 0 0;border-right:2px solid rgba(255,255,255,.7);text-decoration:none}
.stat b{color:#fff;text-align:right}
@keyframes grow{from{transform:scaleX(0)}}
.wheel-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.wcard{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(2,26,43,.65);color:#fff;padding:12px 10px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.wcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35)}
.wcard[aria-selected="true"]{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,184,28,.16),rgba(2,26,43,.75))}
.wcard img,.wcard .mini-oem{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.wcard .mini-oem{border-radius:50%;background:radial-gradient(circle,transparent 0 24%,#2b2f33 25% 38%,#1b1e21 39%),repeating-conic-gradient(#24282c 0 6deg,#2e3337 6deg 12deg)}
.wcard span{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:16px;text-align:center;line-height:1.05}
.wcard em{font-style:normal;font-size:12px;color:var(--steel);letter-spacing:.08em;text-transform:uppercase}
.wcard .best,.wcard .rec,.wcard .lock{position:absolute;top:6px;right:8px;font-size:11px;color:var(--gold);font-family:"Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.wcard .rec{left:6px;right:6px;top:-1px;text-align:center;background:var(--gold);color:var(--ink);padding:1px 4px}
.wcard.locked{opacity:.5;filter:grayscale(.8)}
.wcard.locked .lock{color:var(--mist)}
.wcard.locked:hover{transform:none}

/* ---------- pipe select */
.pipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,420px));gap:22px;justify-content:center;width:100%;margin-top:30px}
.pcard{appearance:none;border:1px solid rgba(255,255,255,.16);background:#000;color:#fff;padding:0;cursor:pointer;text-align:left;position:relative;overflow:hidden;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);transition:transform .25s ease,border-color .25s ease}
.pcard:hover{transform:translateY(-4px);border-color:var(--gold)}
.pcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 6s ease}
.pcard:hover img{transform:scale(1.12)}
.pcard .pc-body{padding:16px 18px 18px;background:linear-gradient(180deg,rgba(2,26,43,.4),rgba(2,26,43,.95))}
.pcard h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;text-transform:uppercase;margin:0}
.pcard p{color:var(--mist);margin:4px 0 10px;font-size:15px}
.pcard .pc-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--steel)}
.pcard .pc-meta b{color:var(--gold);font-weight:600}
.pcard .pc-play{position:absolute;top:14px;right:14px;background:var(--gold);color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;padding:6px 12px;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.ghost-toggle{margin-top:22px;color:var(--mist);display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.ghost-toggle input{width:18px;height:18px;accent-color:#FFB81C}

/* ---------- OSD (CCTV text) */
.osd{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:"Consolas","Lucida Console",ui-monospace,monospace;font-size:clamp(11px,1.25vw,16px);color:#f4f7e8;text-shadow:0 0 6px rgba(255,255,255,.35),1px 1px 0 #000,-1px -1px 0 #000;letter-spacing:.06em;opacity:0;transition:opacity .4s}
.app[data-screen="race"] .osd{opacity:.92}
.osd-tl,.osd-bl{position:absolute;display:flex;flex-direction:column;gap:2px}
.osd-tl{top:clamp(86px,12vh,120px);left:clamp(16px,2.2vw,34px)}
.osd-bl{bottom:clamp(150px,22vh,200px);left:clamp(16px,2.2vw,34px)}
.osd-rec{display:flex;align-items:center;gap:6px}
.osd-rec i{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- HUD */
.hud{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .35s}
.app[data-screen="race"] .hud{opacity:1}
.hud-label{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--mist)}
.hud-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.hud-brand img{width:clamp(80px,9vw,124px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.hud-clock{text-align:center;background:linear-gradient(180deg,rgba(2,26,43,.85),rgba(2,26,43,.55));border:1px solid var(--panel-edge);padding:6px 28px 8px;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,18px 100%)}
.hud-time{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(30px,4.2vw,50px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hud-time.low{color:var(--bad);animation:blink .6s steps(2) infinite}
.hud-gap{font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;min-height:17px}
.hud-gap.ahead{color:var(--ok)} .hud-gap.behind{color:var(--bad)}
.hud-defects{justify-self:end;text-align:right;background:linear-gradient(180deg,rgba(2,26,43,.85),rgba(2,26,43,.5));border:1px solid var(--panel-edge);padding:8px 16px;clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.hud-count{font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,3.4vw,42px);line-height:1;font-weight:700}
.hud-count b{color:var(--gold)} .hud-count span{color:var(--steel);font-weight:500}
.hud-score{font-family:"Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);font-size:15px}
.hud-score b{color:#fff;font-variant-numeric:tabular-nums}
.hud-count.pop b{animation:pop .5s ease}
@keyframes pop{30%{transform:scale(1.5);color:#fff}}

.hud-bottom{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end}
.gauge{position:relative;width:clamp(150px,17vw,220px)}
.gauge svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.g-track{fill:none;stroke:rgba(2,26,43,.75);stroke-width:18}
.g-speed{fill:none;stroke:url(#gSpeed);stroke-width:12;stroke-dasharray:0 100;stroke-linecap:butt}
.g-spin{fill:none;stroke:rgba(255,90,78,.85);stroke-width:5;stroke-dasharray:0 100;transform:translateY(-12px);transform-origin:center}
.g-ticks line{stroke:rgba(255,255,255,.55);stroke-width:2}
.gauge-read{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:"Barlow Condensed",sans-serif;line-height:1}
.gauge-read b{display:block;font-size:clamp(32px,3.6vw,46px);font-variant-numeric:tabular-nums}
.gauge-read span{font-size:12px;letter-spacing:.16em;color:var(--mist)}
.gauge-throttle{position:absolute;left:8%;right:8%;bottom:-8px;height:4px;background:rgba(255,255,255,.12)}
.gauge-throttle i{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}

.track{align-self:end;background:linear-gradient(180deg,rgba(2,26,43,.4),rgba(2,26,43,.8));border:1px solid var(--panel-edge);padding:6px 12px 8px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%)}
.track-head{display:flex;justify-content:space-between;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.surface{color:#fff;font-weight:600}
.surface.warn{color:var(--gold)} .surface.hot{color:var(--bad)}
.track-svg{width:100%;height:clamp(46px,7vh,70px);display:block}
.track-svg .pipe{fill:none;stroke:rgba(201,214,226,.35);stroke-width:14;stroke-linecap:round}
.track-svg .pipe-in{fill:none;stroke:rgba(2,26,43,.9);stroke-width:9;stroke-linecap:round}
.track-svg .done{fill:none;stroke:url(#trackGrad);stroke-width:5;stroke-linecap:round}
.track-svg .zone{stroke-width:9;fill:none;stroke-linecap:butt;opacity:.6}
.track-svg .mk{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;text-anchor:middle}
.track-svg .mk-q{fill:var(--steel)} .track-svg .mk-ok{fill:var(--ok)} .track-svg .mk-bad{fill:var(--bad)} .track-svg .mk-miss{fill:#5a6773}
.track-svg .me{fill:var(--gold);stroke:#000;stroke-width:2}
.track-svg .ghost{fill:rgba(255,255,255,.55)}
.track-svg .ghost-l{font-family:"Barlow Condensed",sans-serif;font-size:15px;fill:rgba(255,255,255,.75);text-anchor:middle}

.rig{position:relative;width:clamp(330px,37vw,580px);background:rgba(2,26,43,.85);border:1px solid var(--panel-edge);clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rig canvas{display:block;width:100%;height:clamp(160px,29vh,270px)}
.rig-top{position:absolute;top:6px;left:18px;right:10px;display:flex;justify-content:space-between;gap:8px;font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 3px #000}
.rig-wheel{color:#fff;font-weight:700}
.rig-lift{color:var(--mist)}
.rig-lift.up{color:var(--gold)}
.rig-grip{display:flex;align-items:center;gap:10px;padding:4px 12px 7px}
.rig-grip .grip-bar{flex:1;margin:0}
.grip-bar{position:relative;height:12px;background:rgba(255,255,255,.08);margin:6px 0 8px;overflow:hidden}
.grip-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green),var(--gold) 70%,var(--bad));transition:width .06s linear}
.grip-bar em{position:absolute;top:-2px;bottom:-2px;width:3px;background:#fff;left:70%;box-shadow:0 0 8px #fff}
.coach{position:absolute;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + clamp(120px,17vh,150px));transform:translateX(-50%);max-width:min(620px,70vw);text-align:center;background:rgba(2,26,43,.9);border:1px solid rgba(255,184,28,.5);padding:8px 16px;font-family:"Barlow Condensed",sans-serif;font-size:19px;letter-spacing:.02em;opacity:0;transition:opacity .25s}
.coach.on{opacity:1;animation:coachIn .35s ease}
@keyframes coachIn{from{transform:translate(-50%,8px)}}

.slip{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) skewX(-10deg);font-family:"PIRULEN",sans-serif;font-size:clamp(22px,3.6vw,46px);color:var(--bad);text-shadow:0 0 20px rgba(255,90,78,.8),0 3px 0 #000;opacity:0;letter-spacing:.06em;transition:opacity .12s}
.slip.on{opacity:1;animation:shake .12s linear infinite}
@keyframes shake{25%{transform:translate(-51%,-50%) skewX(-10deg)}75%{transform:translate(-49%,-51%) skewX(-10deg)}}
.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);background:rgba(2,26,43,.9);border:1px solid var(--panel-edge);border-left:4px solid var(--gold);padding:10px 18px;font-family:"Barlow Condensed",sans-serif;font-size:20px;letter-spacing:.03em;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translateX(-50%) translateY(6px)}
.toast.good{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)}
.banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:"PIRULEN",sans-serif;font-size:clamp(26px,5vw,64px);opacity:0;pointer-events:none;text-shadow:0 4px 0 rgba(0,0,0,.6),0 0 40px rgba(255,184,28,.4)}
.banner.on{animation:banner 1.8s cubic-bezier(.2,.8,.2,1) both}
.banner small{display:block;font-family:"Barlow Condensed",sans-serif;font-size:.36em;letter-spacing:.12em;color:var(--gold);margin-top:8px}
@keyframes banner{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

.touch{position:absolute;inset:auto 0 0 0;height:46%;display:none;pointer-events:none}
.app.is-touch .touch{display:block}
.pedal,.logbtn,.liftbtn{position:absolute;pointer-events:auto;appearance:none;border:2px solid rgba(255,255,255,.35);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.1em;font-size:18px;touch-action:none;-webkit-tap-highlight-color:transparent}
.pedal{bottom:max(150px,26vh);width:clamp(84px,13vw,120px);height:clamp(110px,24vh,170px);background:rgba(2,26,43,.55);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.pedal.brake{left:max(16px,env(safe-area-inset-left))}
.pedal.gas{right:max(16px,env(safe-area-inset-right));background:rgba(255,184,28,.28);border-color:var(--gold)}
.pedal.on{background:rgba(255,184,28,.65);color:var(--ink)}
.logbtn{left:50%;bottom:max(150px,26vh);transform:translateX(-50%);width:clamp(84px,11vw,110px);height:clamp(84px,11vw,110px);border-radius:50%;background:rgba(15,92,154,.65);border-color:#7fb6e6;font-size:22px}
.liftbtn{left:calc(50% + clamp(70px,9vw,90px));bottom:max(150px,26vh);width:clamp(64px,8vw,80px);height:clamp(64px,8vw,80px);border-radius:50%;background:rgba(2,26,43,.7);border-color:rgba(255,255,255,.4);font-size:15px}
.liftbtn.up{background:rgba(255,184,28,.35);border-color:var(--gold)}
.logbtn.ready{background:rgba(255,184,28,.85);color:var(--ink);border-color:#fff;animation:readyPulse 1s ease-in-out infinite}
@keyframes readyPulse{50%{box-shadow:0 0 0 12px rgba(255,184,28,0),0 0 30px rgba(255,184,28,.8)}}
.pausebtn{position:absolute;pointer-events:auto;top:max(96px,14vh);right:max(14px,env(safe-area-inset-right));width:40px;height:40px;border:1px solid rgba(255,255,255,.3);background:rgba(2,26,43,.6);color:#fff;font-weight:700;letter-spacing:-.1em;cursor:pointer;display:none}
.app.is-touch .pausebtn{display:block}
/* wheel swap, on screen from 10 s into a run (U on a keyboard) */
.swapbtn{position:absolute;pointer-events:none;right:max(14px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 118px);display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1px solid var(--gold);background:rgba(2,26,43,.78);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateX(12px);transition:opacity .35s,transform .35s,background .15s}
.swapbtn.on{opacity:1;transform:none;pointer-events:auto;animation:swapIn 1.6s ease-out .35s 2}
.swapbtn:hover,.swapbtn:focus-visible{background:rgba(255,184,28,.22);outline:none}
.swapbtn kbd{display:grid;place-items:center;width:24px;height:24px;background:var(--gold);color:var(--ink);font-family:inherit;font-size:15px}
@keyframes swapIn{50%{box-shadow:0 0 0 8px rgba(255,184,28,0),0 0 26px rgba(255,184,28,.7)}}
.app.is-touch .swapbtn{top:max(10px,env(safe-area-inset-top));right:auto;left:calc(max(14px,env(safe-area-inset-left)) + 134px);height:40px;font-size:14px;padding:0 10px;letter-spacing:.06em}
.swapbtn .swap-noun{margin-left:-3px}
.swapbtn .swap-icon{display:none;color:var(--gold)}
.app.is-touch .swapbtn kbd,.app.is-touch .swapbtn .swap-noun{display:none}
/* too narrow for the logo, pause, a word and the clock across the top: the button becomes a square like pause */
@media (max-width:640px){.app.is-touch .swapbtn{width:40px;padding:0;justify-content:center;left:calc(max(14px,env(safe-area-inset-left)) + 130px)}.app.is-touch .swapbtn .swap-verb{display:none}.app.is-touch .swapbtn .swap-icon{display:block}}

/* ---------- classifier */
.classify{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(2,26,43,.35),rgba(2,26,43,.8));animation:screenIn .25s ease both;padding:16px}
.classify-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0;width:min(980px,100%);background:var(--panel);border:1px solid var(--panel-edge);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.classify-shot{position:relative;background:#000}
.classify-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;filter:contrast(1.05)}
.classify-shot::after{content:"";position:absolute;inset:10%;border:2px solid rgba(255,184,28,.85);clip-path:polygon(0 0,18% 0,18% 3px,3px 3px,3px 18%,0 18%,0 0,100% 0,100% 18%,calc(100% - 3px) 18%,calc(100% - 3px) 3px,82% 3px,82% 0,100% 0,100% 100%,82% 100%,82% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 82%,100% 82%,100% 100%,0 100%,0 82%,3px 82%,3px calc(100% - 3px),18% calc(100% - 3px),18% 100%,0 100%)}
.classify-tag{position:absolute;left:12px;top:10px;font-family:Consolas,ui-monospace,monospace;font-size:13px;background:rgba(0,0,0,.6);padding:3px 8px;letter-spacing:.08em}
.classify-body{padding:22px 24px}
.classify-body h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:32px;margin:0;text-transform:uppercase}
.classify-sub{color:var(--mist);margin:4px 0 14px;font-size:15px}
.classify-opts{display:grid;gap:9px}
.opt{appearance:none;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;padding:11px 14px;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-size:21px;letter-spacing:.02em;transition:background .12s,border-color .12s,transform .12s}
.opt kbd{font-family:"Barlow Condensed",sans-serif;font-weight:700;width:28px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:var(--gold);font-size:17px}
.opt:hover{background:rgba(255,184,28,.15);border-color:var(--gold);transform:translateX(3px)}
.opt.right{background:rgba(61,220,132,.25);border-color:var(--ok)}
.opt.wrong{background:rgba(255,90,78,.25);border-color:var(--bad)}
.classify-timer{height:4px;background:rgba(255,255,255,.1);margin-top:14px}
.classify-timer i{display:block;height:100%;background:var(--gold);width:100%}

/* ---------- upgrade offer */
.offer{position:absolute;inset:0;z-index:26;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(2,26,43,.4),rgba(2,26,43,.85));animation:screenIn .25s ease both;padding:16px}
.offer-card{width:min(620px,100%);background:var(--panel);border:1px solid var(--gold);padding:26px 30px;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.offer-kicker{font-family:"Barlow Condensed",sans-serif;color:var(--bad);letter-spacing:.16em;text-transform:uppercase}
.offer-card h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,3.6vw,40px);text-transform:uppercase;margin:4px 0 8px;line-height:1.05}
.offer-card p{color:var(--mist);line-height:1.5;margin:0 0 18px}

/* ---------- countdown lights */
.lights{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none}
.lights-row{display:flex;gap:clamp(10px,2vw,20px);background:rgba(0,0,0,.75);padding:16px 22px;border:1px solid rgba(255,255,255,.2);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.lights-row i{width:clamp(34px,5vw,58px);aspect-ratio:1;border-radius:50%;background:#1b0705;box-shadow:inset 0 4px 10px rgba(0,0,0,.8);transition:background .08s,box-shadow .08s}
.lights-row i.on{background:radial-gradient(circle at 40% 35%,#ffb3a8,#ff3b30 45%,#9b0d05);box-shadow:0 0 30px #ff3b30,0 0 60px rgba(255,59,48,.5)}
.lights-row.go i{background:radial-gradient(circle at 40% 35%,#d9ffe9,#3DDC84 45%,#0b6b36);box-shadow:0 0 30px #3DDC84,0 0 70px rgba(61,220,132,.6)}
.lights-word{font-family:"PIRULEN",sans-serif;font-size:clamp(40px,8vw,96px);color:var(--gold);text-shadow:0 0 40px rgba(255,184,28,.7),0 5px 0 #000;min-height:1.2em}
.lights-row.go ~ .lights-word{color:var(--ok);text-shadow:0 0 40px rgba(61,220,132,.7),0 5px 0 #000}

/* ---------- results */
.results{width:min(1160px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--panel-edge);padding:26px 30px;clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);touch-action:pan-y;user-select:text}
.results-head{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k s" "t s" "m s";align-items:end;gap:2px 24px}
.results-kicker{grid-area:k;font-family:"Barlow Condensed",sans-serif;color:var(--gold);letter-spacing:.16em;text-transform:uppercase}
.results-head h2{grid-area:t;font-family:"Barlow Condensed",sans-serif;font-size:clamp(30px,4vw,48px);margin:0;text-transform:uppercase;line-height:1}
.results-meta{grid-area:m;color:var(--mist);font-size:15px}
.results-score{grid-area:s;text-align:right;font-family:"PIRULEN",sans-serif}
.results-score b{display:block;font-size:clamp(40px,6vw,74px);font-weight:400;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.results-score span{font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.results-body{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.results h3{font-family:"Barlow Condensed",sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.results-log ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
.results-log li{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);position:relative;animation:screenIn .4s both}
.results-log li img,.results-log li .noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:repeating-linear-gradient(45deg,#0b1620 0 8px,#0e1b26 8px 16px)}
.results-log li div{padding:4px 6px 6px;font-family:"Barlow Condensed",sans-serif;font-size:14px;line-height:1.1}
.results-log li small{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.results-log li.ok small{color:var(--ok)} .results-log li.bad small{color:var(--bad)} .results-log li.miss{opacity:.6} .results-log li.miss small{color:var(--steel)}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:140px 1fr 70px;gap:10px;align-items:center;font-family:"Barlow Condensed",sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.03em}
.bar .track-b{height:18px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.bar .track-b i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blue),var(--gold));animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.bar.oem .track-b i{background:linear-gradient(90deg,#3a4652,#8796A5)}
.bar.me span:first-child{color:var(--gold)}
.bar b{text-align:right;font-variant-numeric:tabular-nums}
.bar small{color:var(--steel);font-size:12px;display:block;letter-spacing:.06em}
.duel{margin-bottom:18px;padding:14px 16px;background:linear-gradient(135deg,rgba(255,184,28,.14),rgba(2,26,43,.5));border:1px solid rgba(255,184,28,.4)}
.duel h3{color:var(--gold)}
.duel table{width:100%;border-collapse:collapse;font-family:"Barlow Condensed",sans-serif;font-size:18px}
.duel th,.duel td{padding:5px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.duel thead th{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.duel thead th.tg{color:var(--gold)}
.duel tbody th{font-weight:500;color:var(--mist);text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.duel td:last-child{color:#fff;font-weight:700}
.results-save{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);color:var(--mist);font-size:15px}
.results-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- leaderboard */
.board{width:min(1180px,100%);margin-top:56px;max-height:calc(100% - 60px);display:flex;flex-direction:column;gap:14px}
.board-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.seg{display:flex;border:1px solid rgba(255,255,255,.2)}
.seg button{appearance:none;border:0;background:transparent;color:var(--mist);padding:9px 16px;font-family:"Barlow Condensed",sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.seg button.on{background:var(--gold);color:var(--ink);font-weight:700}
.board select{background:rgba(2,26,43,.8);color:#fff;border:1px solid rgba(255,255,255,.2);padding:9px 12px;font-family:"Barlow Condensed",sans-serif;font-size:17px;text-transform:uppercase}
.board-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;min-height:0;overflow:auto;touch-action:pan-y}
.board-table{background:var(--panel);border:1px solid var(--panel-edge);overflow:auto}
.board table{width:100%;border-collapse:collapse;font-size:16px}
.board th{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:13px;color:var(--steel);text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;background:#04223a}
.board td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.board td:first-child{font-family:"PIRULEN",sans-serif;color:var(--gold);width:44px}
.board td small{display:block;color:var(--steel);font-size:12px}
.board tr.me td{background:rgba(255,184,28,.1)}
.board td.num{font-variant-numeric:tabular-nums;font-family:"Barlow Condensed",sans-serif;font-size:19px}
.board .empty{padding:30px;text-align:center;color:var(--mist)}
.board-standings{background:var(--panel);border:1px solid var(--panel-edge);padding:16px 18px}
.board-standings h3{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;margin:0;font-size:24px}

/* ---------- pause, loader, hints */
.pause{min-width:320px;text-align:center}
/* a phone held sideways: the pause menu in two columns under a full-width Resume, so it fits without clipping */
@media (max-height:560px){
  .pause-screen{justify-content:safe center}
  .pause{padding:14px 22px 12px}
  .pause h2{font-size:28px;margin-bottom:8px}
  .pause .col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pause .col .btn{padding:9px 16px;font-size:17px}
  .pause #pause-resume{grid-column:1/-1}
  .pause .mute{margin-top:8px}
}
.mute{margin-top:16px;background:none;border:0;color:var(--steel);cursor:pointer;text-decoration:underline}
.loader{position:absolute;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:16px;background:var(--deep);transition:opacity .5s}
.loader.done{opacity:0;pointer-events:none}
.loader-ring{width:64px;height:64px;border-radius:50%;border:4px solid rgba(255,255,255,.1);border-top-color:var(--gold);animation:roll 1s linear infinite}
.loader-text{font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
/* phones and tablets held upright: the whole game waits for the screen to be turned on its side */
.rotate-gate{position:fixed;inset:0;z-index:80;box-sizing:border-box;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 30%,#0C3354 0%,var(--deep) 70%);color:#FFFFFF;text-align:center}
.rotate-gate[hidden]{display:none}
.rotate-gate img{width:150px;height:auto}
.rotate-gate h2{margin:6px 0 0;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:.05em;text-transform:uppercase}
.rotate-gate p{margin:0;max-width:300px;color:var(--mist);font-size:16px;line-height:1.5}
.rotate-phone{width:104px;height:104px;color:var(--gold);animation:turnPhone 2.6s ease-in-out infinite}
@keyframes turnPhone{0%,22%{transform:rotate(0)}48%,82%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}

/* ---------- responsive */
@media (max-width:980px){
  .garage-stage{grid-template-columns:1fr;gap:12px}
  .wheel-hero{width:min(560px,100%)}
  .title-modes{grid-template-columns:1fr}
  .wheel-rail{grid-template-columns:repeat(3,1fr)}
  .results-body,.board-cols{grid-template-columns:1fr}
  .classify-card{grid-template-columns:1fr}
  .classify-shot img{max-height:34vh}
  .how-grid{grid-template-columns:1fr}
}
@media (max-height:560px){
  .screen{justify-content:flex-start;overflow-y:auto;touch-action:pan-y}
  .title-screen,.pause-screen,.player-screen,.how-screen{justify-content:center}
  .wheel-kicker,.garage .fine,.wcard em{display:none}
  .wheel-info h3{font-size:28px;margin-bottom:4px}
  .stat{grid-template-columns:110px 1fr 24px;font-size:13px}
  .classify-shot img{max-height:none;height:100%}
  .classify-card{max-height:94vh}
  .garage{margin-top:52px;gap:10px}
  .pipe-grid{margin-top:58px}
  .garage-stage{grid-template-columns:minmax(220px,1fr) 1fr;gap:16px}
  .wheel-hero{width:100%}
  .job{padding:6px 12px}
  .job b{font-size:18px}
  .job span{font-size:13px}
  .title-modes{gap:10px;margin-bottom:10px}
  .mode{padding:10px 14px 12px}
  .mode b{font-size:19px}
  .mode span{font-size:13px}
  .wheel-info p{font-size:14px;margin-bottom:8px}
  .stats{gap:5px}
  .wcard{padding:6px}
  .wcard img,.wcard .mini-oem{width:40px;height:40px}
  .wheel-rail{grid-template-columns:repeat(6,1fr)}
  .title-logo{width:150px}
  .title-sub{margin-bottom:12px}
  .hud-brand img{width:70px}
  .osd-tl,.osd-rec{top:70px}
  .classify-card{grid-template-columns:1fr 1fr}
  .classify-body{padding:12px 14px}
  .classify-body h2{font-size:24px}
  .opt{padding:7px 10px;font-size:17px}
}
@media (max-width:560px){
  .hud-bottom{grid-template-columns:auto auto;}
  .track{grid-column:1 / -1;order:-1}
  .gauge{width:130px}
  .rig{width:min(300px,60vw)}
  .results{padding:18px}
  .results-head{grid-template-areas:"k" "t" "s" "m";grid-template-columns:1fr}
  .results-score{text-align:left}
  .bar{grid-template-columns:100px 1fr 54px}
}
.hud-mini{display:none}
/* phones held sideways: pedals in the bottom corners, LOG above the brake, readouts up top */
@media (max-height:560px){
  .app.is-touch .osd{display:none}
  .app.is-touch .gauge{display:none}
  .app.is-touch .hud-bottom{left:calc(max(16px,env(safe-area-inset-left)) + clamp(96px,17vw,150px));right:calc(max(16px,env(safe-area-inset-right)) + clamp(96px,17vw,150px));grid-template-columns:1fr 1.1fr;gap:10px;bottom:max(8px,env(safe-area-inset-bottom))}
  .app.is-touch .track{order:0;grid-column:auto}
  .app.is-touch .rig{width:auto}
  .app.is-touch .rig canvas{height:28vh}
  .app.is-touch .rig-grip{padding:2px 10px 4px}
  .app.is-touch .rig-top{font-size:12px;top:3px}
  .app.is-touch .coach{bottom:calc(28vh + 46px);font-size:15px;max-width:52vw}
  .app.is-touch .liftbtn{left:auto;right:max(16px,env(safe-area-inset-right));bottom:calc(44vh + 22px);width:clamp(76px,12vw,96px);height:clamp(76px,12vw,96px);margin-right:calc((clamp(96px,17vw,150px) - clamp(76px,12vw,96px)) / 2)}
  .app.is-touch .hud-mini{display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
  .app.is-touch .hud-mini b{color:#fff;font-size:18px;font-variant-numeric:tabular-nums}
  .mini-grip{display:inline-block;width:70px;height:7px;background:rgba(255,255,255,.12);margin-left:8px;position:relative;overflow:hidden}
  .mini-grip i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green),var(--gold) 70%,var(--bad))}
  .app.is-touch .hud-clock{padding:4px 20px 6px}
  .app.is-touch .hud-time{font-size:30px}
  .app.is-touch .hud-defects{padding:6px 12px}
  .app.is-touch .hud-count{font-size:28px}
  .app.is-touch .pedal{bottom:max(10px,env(safe-area-inset-bottom));width:clamp(96px,17vw,150px);height:44vh}
  .app.is-touch .logbtn{left:max(16px,env(safe-area-inset-left));transform:none;bottom:calc(44vh + 22px);width:clamp(76px,12vw,96px);height:clamp(76px,12vw,96px);margin-left:calc((clamp(96px,17vw,150px) - clamp(76px,12vw,96px)) / 2)}
  .app.is-touch .pausebtn{top:max(10px,env(safe-area-inset-top));right:auto;left:calc(max(14px,env(safe-area-inset-left)) + 84px)}
  .app.is-touch .slip{top:38%}
  .app.is-touch .toast{top:26%;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .title-logo,.title-ticker div{animation:none}
}

/* ---------- onboard view: riding on the rear deck. The crawler fills the bottom middle of the
   screen, so the side panel and the CCTV text go and the pipe map moves to the right corner. */
.onboard{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.app[data-view="onboard"]:is([data-screen="race"],[data-screen="pause"]) .onboard{display:block}
.app[data-view="onboard"] .osd,.app[data-view="onboard"] .rig{display:none}
.app[data-view="onboard"] .track{grid-column:3;width:clamp(260px,27vw,400px)}
.app[data-view="onboard"] .gauge{width:clamp(130px,13vw,180px)}
.app[data-view="onboard"] .coach{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + clamp(96px,14vh,130px))}
/* the camera view keeps only the CCTV lines an inspector needs */
#osd-title,#osd-wheels,#osd-clock{display:none}
@media (max-height:560px){
  .app.is-touch[data-view="onboard"] .hud-bottom{display:none}
  .app.is-touch[data-view="onboard"] .coach{top:auto;bottom:calc(44vh + 120px)}
}
/* the controls, shown during the countdown and the first seconds of a run */
.keys{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + clamp(84px,12vh,112px));transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;max-width:92vw;background:rgba(2,26,43,.82);border:1px solid var(--panel-edge);padding:7px 16px;font-family:"Barlow Condensed",sans-serif;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);opacity:0;transition:opacity .5s;pointer-events:none}
.keys.on{opacity:1}
.keys kbd{display:inline-block;min-width:22px;padding:1px 6px;margin-right:6px;border:1px solid rgba(255,255,255,.4);border-radius:3px;background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-weight:700;text-align:center}
.app.is-touch .keys{display:none}
.app[data-view="onboard"] .coach{top:calc(max(12px,env(safe-area-inset-top)) + clamp(196px,27vh,236px))}
/* the defect prompt under the clock */
.spot{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + clamp(84px,12vh,112px));transform:translateX(-50%);min-width:min(420px,88vw);max-width:92vw;display:grid;gap:2px;text-align:center;background:rgba(2,26,43,.9);border:1px solid var(--panel-edge);border-top:3px solid var(--steel);padding:8px 18px 10px;font-family:"Barlow Condensed",sans-serif;opacity:0;transition:opacity .2s;pointer-events:none;z-index:2;overflow:hidden}
.spot.on{opacity:1}
.spot b{font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.spot span{font-size:17px;color:var(--mist)}
.spot kbd{display:inline-block;padding:0 7px;border:1px solid rgba(255,255,255,.5);border-radius:3px;background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-weight:700}
.spot i{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--gold)}
.spot.spot-view{border-top-color:var(--gold)}
.spot.spot-view b{color:var(--gold)}
.spot.spot-view.on{animation:spotIn .3s ease}
.spot.spot-behind{border-top-color:var(--bad)}
.spot.spot-behind b{color:var(--bad)}
@keyframes spotIn{from{transform:translate(-50%,-6px) scale(.97)}}
.spot.on ~ .keys{opacity:0;transition:none}
.track-svg .mk-passed{fill:var(--bad)}
.app.is-touch .spot{top:calc(max(8px,env(safe-area-inset-top)) + 124px);min-width:0}
.app.is-touch .spot b{font-size:18px}
.app.is-touch .spot span{font-size:14px}
/* results fit the screen; where a small screen has to scroll, no scroll bar is drawn */
.results{gap:12px;padding:20px 26px;scrollbar-width:none}
.results::-webkit-scrollbar,.screen::-webkit-scrollbar{display:none}
.screen{scrollbar-width:none}
.results-save{margin-top:10px;padding-top:10px}
/* water on the camera lens (js/lens.js): the drops-only footage over the view in overlay blend */
.lens{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none;mix-blend-mode:overlay;opacity:0}
.app:is([data-screen="race"],[data-screen="pause"]) .lens{display:block}
.lens[data-tint="mud"]{filter:sepia(.75) saturate(1.7) hue-rotate(-12deg)}
.lens[data-tint="grease"]{filter:sepia(.6) saturate(2.2)}
/* music: the track's title and credit as it starts, and small credits on the title, pause and results */
.nowplaying{position:absolute;z-index:40;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;gap:1px;max-width:min(380px,70vw);background:rgba(2,26,43,.86);border-left:3px solid var(--gold);padding:7px 14px 8px;font-family:"Barlow Condensed",sans-serif;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.nowplaying.on{opacity:1;transform:none}
.nowplaying b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.nowplaying span{font-size:20px;font-weight:700;letter-spacing:.03em}
.nowplaying small{font-size:12px;color:var(--mist);letter-spacing:.04em}
.app[data-screen="race"] .nowplaying{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 104px)}
.credits{margin:8px 0 0;font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.05em;color:var(--steel);text-align:center}
.results .credits{text-align:left}
.results-actions{gap:8px;flex-wrap:nowrap}
.results-actions .btn{font-size:15px;padding:9px 14px;white-space:nowrap}
@media (max-width:980px){.results-actions{flex-wrap:wrap}}

/* ---------- phones held sideways
   Brian, October 30, on his phone: "rotated it it went landscape everything is off screen ... redo the mobile". A phone
   browser on its side leaves the page 320 to 380 px of height (the address bar takes the rest), so every screen is laid
   out for that: the title in two halves, the garage with the go button and the wheel strip always in view, long screens
   scrolling inside their panel with their buttons fixed below, and no now-playing card over the controls (the music
   credit stays on the title, pause and results screens). Notched phones keep clear of the notch through the safe areas. */
@media (max-height:500px) and (orientation:landscape){
  .screen{justify-content:safe center;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .screen-head{top:max(8px,env(safe-area-inset-top));gap:12px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  .screen-head h2{font-size:24px}
  .screen-head .step{font-size:12px}
  .back{width:38px;height:38px;font-size:24px}
  .nowplaying{display:none}
  .credits{font-size:10px;margin-top:6px}

  /* title: the name on the left, the two ways to play and the links on the right */
  .title-screen{justify-content:center}
  .title-wrap{flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px);width:100%;max-width:960px}
  .title-brand{flex:1 1 0;min-width:0}
  .title-menu{flex:1 1 0;min-width:0;max-width:380px;align-items:stretch}
  .title-logo{width:clamp(84px,15vh,120px);animation:none}
  .title-game{font-size:clamp(30px,6.4vw,58px);margin:8px 0 4px;flex-wrap:wrap;justify-content:center}
  .title-lede{font-size:clamp(15px,2.6vw,20px);margin:2px 0 0;line-height:1.15}
  .title-sub,.title-ticker{display:none}
  .title-modes{grid-template-columns:1fr;gap:8px;margin:0 0 8px}
  .mode{padding:8px 14px 9px;gap:2px}
  .mode b{font-size:18px}
  .mode span{font-size:12.5px}
  .title-actions{gap:8px;flex-wrap:nowrap}
  .title-actions .btn{flex:1;padding:9px 10px;font-size:16px}
  .title-player{margin-top:6px;font-size:12px;text-align:center;min-height:0}
  .title-player button{padding:9px 8px}

  /* how to play, player: the panel scrolls, its button stays in view */
  .how{max-height:100%;display:flex;flex-direction:column;padding:14px 18px;box-sizing:border-box}
  .how-body{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y}
  .how > .btn{align-self:flex-start;margin-top:8px;padding:9px 22px}
  .player{max-height:100%;overflow-y:auto;touch-action:pan-y;padding:14px 18px;box-sizing:border-box}
  .how h2,.player h2{font-size:24px;margin-bottom:4px}
  .how-grid{grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:8px 0;font-size:13px;line-height:1.4}
  .how-grid h3{font-size:16px}
  .how-keys{font-size:12px;line-height:1.4}
  .player p{font-size:13px;margin:0 0 8px}
  .player label{font-size:12px}
  .player input{padding:7px 10px;font-size:16px}

  /* garage: header, job line, the crawler beside the wheel's name, ratings and the go button, the wheel strip below */
  .garage-screen{justify-content:flex-start}
  .garage{margin-top:44px;gap:6px;width:100%;height:calc(100% - 44px);display:flex;flex-direction:column;min-height:0}
  .job{padding:4px 10px;flex-direction:row;align-items:baseline;gap:10px}
  .job b{font-size:15px;white-space:nowrap}
  .job span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .garage-stage{flex:1;min-height:0;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:stretch}
  .wheel-hero{height:100%;width:auto;max-width:44vw;aspect-ratio:16/10;justify-self:start}
  .wheel-photo{width:52px;padding:3px 3px 2px}
  .wheel-photo figcaption{display:none}
  .pose{font-size:11px;padding:4px 10px;min-height:32px}
  .wheel-info{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .wheel-info h3{font-size:22px;margin:0 0 2px}
  .wheel-info p{font-size:12px;line-height:1.35;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stats{gap:2px;margin:0 0 6px}
  .stat{grid-template-columns:92px 1fr 18px;gap:8px;font-size:11px}
  .wheel-info .row{margin-top:auto;gap:8px;flex-wrap:nowrap}
  .wheel-info .row .btn{padding:8px 14px;font-size:16px;white-space:nowrap}
  .wheel-rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex:0 0 auto}
  .wcard{padding:4px 4px 5px;gap:2px;flex-direction:row;justify-content:center}
  .wcard img,.wcard .mini-oem{width:28px;height:28px}
  .wcard span{font-size:12px}
  .wcard .best,.wcard .lock{display:none}
  .wcard .rec{font-size:9px;padding:0 2px;top:-1px}

  /* choose the main */
  .pipe-screen{justify-content:flex-start}
  .pipe-grid{margin-top:48px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px}
  .pcard img{aspect-ratio:16/6}
  .pcard .pc-body{padding:8px 12px 10px}
  .pcard .pc-body h3{font-size:20px;margin:0 0 2px}
  .pcard .pc-body p{display:none}
  .pcard .pc-meta{font-size:12px;gap:10px}
  .ghost-toggle{font-size:13px;margin-top:8px}

  /* leaderboard */
  .board{margin-top:46px;max-height:calc(100% - 50px);gap:8px}
  .board select,.seg button{padding:6px 10px;font-size:14px;min-height:34px}
  .board table{font-size:13px}

  /* results: the score and the buttons stay in view, the log and the comparison scroll between them */
  .results{height:100%;max-height:100%;box-sizing:border-box;padding:10px 16px;gap:8px;overflow:hidden}
  .results-head{gap:0 16px}
  .results-kicker{font-size:12px}
  .results-head h2{font-size:22px}
  .results-meta{font-size:12px}
  .results-score b{font-size:34px}
  .results-score span{font-size:11px}
  .results-body{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;grid-template-columns:1.25fr 1fr;gap:14px}
  .results h3{font-size:16px;margin-bottom:6px}
  .results-log ol{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:5px}
  .results-log li div{font-size:12px}
  .results-actions{gap:6px 8px;flex-wrap:wrap}
  .results-actions .btn{flex:1 1 auto;padding:8px 12px;font-size:15px;white-space:nowrap}

  /* pause and the dialogs */
  .pause .credits{display:none}
  .pause .mute{padding:8px 14px;margin-top:4px}
  .offer .panel,.offer-card{padding:14px 18px}
}
@media (max-height:360px) and (orientation:landscape){
  .wheel-info p{display:none}
  .title-logo{width:76px}
  .mode span{display:none}
}