:root{--leaf:#7fd35b;--leaf-d:#2f7a3a;--sun:#ffc93c;--bark:#3a2616;--ink:#fff8e6;--panel:#122216db;--panel-b:#ffdc8c40;--blue:#5fc8ff;--orange:#ff9a2a;--purple:#d07bff;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);color:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#0d1a12;width:100%;height:100%;margin:0;overflow:hidden}#app{position:fixed;inset:0;overflow:hidden}#game{position:absolute;inset:0}#game canvas{width:100%;height:100%;display:block}[hidden]{display:none!important}#instructions,.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mono{font-variant-numeric:tabular-nums}#hud{pointer-events:none;text-shadow:0 2px #00000073;font-weight:800;position:absolute;inset:0}.hud-tl{left:calc(12px + var(--safe-l));top:calc(10px + var(--safe-t));align-items:flex-start;gap:10px;display:flex;position:absolute}.place{color:var(--sun);-webkit-text-stroke:2px #4a2a00;min-width:1.6em;font-size:clamp(40px,8vh,72px);font-style:italic;line-height:1}.place sup{vertical-align:.9em;margin-left:2px;font-size:.42em}.place.p1{color:#ffe066}.place.p2{color:#e8eef5}.place.p3{color:#f0a868}.place.low{color:#9fd3a0}.place.bump{animation:.35s ease-out bump}@keyframes bump{0%{transform:scale(1.35)}to{transform:scale(1)}}.hud-stack{flex-direction:column;gap:5px;margin-top:4px;display:flex}.chip{border:1px solid var(--panel-b);background:#0a180e9e;border-radius:999px;width:max-content;padding:3px 12px;font-size:clamp(13px,2.4vh,18px)}.chip.final{color:var(--sun);border-color:var(--sun)}.fruit{align-items:center;gap:6px;display:flex}.fruit i{background:radial-gradient(circle at 35% 35%, #fff4a0, var(--sun) 45%, #e07a10);border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #ffc83cb3}.fruit.max span{color:var(--sun)}.hud-tr{right:calc(12px + var(--safe-r));top:calc(10px + var(--safe-t));align-items:flex-start;gap:10px;display:flex;position:absolute}.item-slot{background:#0a180e9e;border:3px solid #ffdc8c8c;border-radius:16px;place-items:center;width:clamp(54px,11vh,76px);height:clamp(54px,11vh,76px);margin-right:104px;font-size:clamp(30px,6.5vh,46px);display:grid;position:relative}.item-slot.roulette #hud-item-icon{animation:80ms step-end infinite roul}@keyframes roul{50%{opacity:.55;transform:scale(.9)}}.item-slot.has{border-color:var(--sun);box-shadow:0 0 14px #ffc93c73}#hud-item-uses{font-size:14px;position:absolute;bottom:0;right:4px}#hud-map{width:clamp(90px,22vh,150px);height:clamp(90px,22vh,150px);position:absolute;top:calc(clamp(54px,11vh,76px) + 50px);right:0;overflow:visible}#hud-map-path{fill:none;stroke:#fff8e6cc;stroke-width:3.2px;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0009)}#hud-map-dots circle{stroke:#10200f;stroke-width:1px}#hud-map-dots circle.me{stroke:#fff;stroke-width:1.6px}.hud-bl{left:calc(14px + var(--safe-l));bottom:calc(12px + var(--safe-b));position:absolute}.speed b{font-size:clamp(26px,5.5vh,40px);font-style:italic}.speed small{opacity:.8;margin-left:4px;font-size:13px}.speed.boost b{color:var(--orange)}body.touch .hud-bl{left:50%;bottom:calc(6px + var(--safe-b));opacity:.85;transform:translate(-50%)}body.touch .item-slot{margin-right:124px}#hud-center{justify-items:center;gap:6px;display:grid;position:absolute;top:58%;left:50%;transform:translate(-50%)}.swing-meter{place-items:center;width:120px;height:120px;display:grid;position:relative}#hud-swing-arc{--a:0deg;--c:var(--leaf);background:conic-gradient(var(--c) var(--a), #ffffff1f var(--a));border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 50px,#000 51px);mask:radial-gradient(circle,#0000 50px,#000 51px)}#hud-swing-label{letter-spacing:1px;font-size:18px}.swing-meter.ready #hud-swing-arc{--a:360deg;--c:#7fd35b73;animation:.6s ease-in-out infinite alternate pulse}.swing-meter.g1 #hud-swing-arc{--c:var(--blue)}.swing-meter.g2 #hud-swing-arc{--c:var(--orange)}.swing-meter.g3 #hud-swing-arc{--c:var(--purple)}@keyframes pulse{to{opacity:.45;transform:scale(1.06)}}.cannon-cue{color:#fff;background:#00000059;border-radius:10px;padding:4px 16px;font-size:28px}.cannon-cue.wait{opacity:.5}.cannon-cue.now{background:var(--orange);animation:.12s infinite alternate pulse}.countdown{color:var(--sun);-webkit-text-stroke:3px #4a2a00;opacity:0;font-size:clamp(70px,20vh,170px);font-style:italic;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.countdown.show{animation:.9s ease-out forwards count}.countdown.go{color:var(--leaf)}@keyframes count{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}20%{opacity:1;transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(.9)}}#hud-pops{justify-items:center;gap:4px;display:grid;position:absolute;top:24%;left:50%;transform:translate(-50%)}.pop{white-space:nowrap;font-size:clamp(20px,4.6vh,34px);font-style:italic;animation:1.3s ease-out forwards pop}.pop.grade1{color:var(--blue)}.pop.grade2{color:var(--orange)}.pop.grade3{color:var(--purple);font-size:clamp(26px,6vh,44px)}.pop.perfect{color:var(--sun)}.pop.lap{color:#fff}.pop.final{color:var(--sun);font-size:clamp(28px,6vh,46px)}.pop.hint{color:var(--leaf);letter-spacing:1px;font-size:clamp(22px,5vh,38px);font-style:normal;animation:1.9s ease-out forwards hint}@keyframes hint{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.15)}14%{transform:scale(1)}22%,38%,54%{opacity:.25}30%,46%,62%,85%{opacity:1}to{opacity:0;transform:translateY(-18px)}}.pop.info{color:#e8f5e0;font-size:clamp(16px,3.4vh,24px)}.pop.bad{color:#ff7a6a}.pop.good{color:var(--leaf)}@keyframes pop{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.15)}25%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-18px)}}#touch{pointer-events:none;position:absolute;inset:0}#steer-zone{pointer-events:auto;touch-action:none;width:50%;position:absolute;top:18%;bottom:0;left:0}.zone-hint{left:calc(24px + var(--safe-l));bottom:calc(18px + var(--safe-b));opacity:.45;font-size:13px;font-weight:700;position:absolute}#stick{opacity:0;background:#0000001f;border:2px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .15s;position:absolute}#stick.on{opacity:1}#stick-knob{background:#fff8e68c;border-radius:50%;width:56px;height:56px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.touch-btns{right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));pointer-events:none;grid-template-rows:76px 76px;grid-template-columns:76px 76px 104px;gap:10px;display:grid;position:absolute}.tbtn{pointer-events:auto;touch-action:none;color:var(--ink);letter-spacing:.5px;background:#0c1e108c;border:3px solid #fff8e68c;border-radius:50%;min-width:64px;min-height:64px;font-family:inherit;font-size:13px;font-weight:800;line-height:1}.tbtn.down{background:#ffc93c8c;transform:scale(.94)}#btn-item{grid-area:1/1}#btn-swing{grid-area:1/2}#btn-brake{border-radius:38px;grid-area:2/1}#btn-gas{border-color:var(--leaf);grid-area:2/2}#btn-drift{border-color:var(--orange);grid-area:1/3/span 2;align-self:center;width:104px;height:104px;font-size:16px}#btn-swing.ready{border-color:var(--leaf);background:#50b43c8c;animation:.5s ease-in-out infinite alternate pulse}.corner-btns{right:calc(10px + var(--safe-r));top:calc(10px + var(--safe-t));z-index:5;gap:8px;display:flex;position:absolute}.icon-btn{border:1px solid var(--panel-b);width:44px;height:44px;color:var(--ink);cursor:pointer;background:#0a180e99;border-radius:12px;font-size:20px}body.touch .icon-btn{width:52px;height:52px}.screen{padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));z-index:4;touch-action:pan-y;place-items:center;display:grid;position:absolute;inset:0;overflow:auto}#title{background:radial-gradient(at 50% 30%,#0000 20%,#040e0699 80%)}.title-card{text-align:center}.logo{letter-spacing:1px;color:var(--sun);-webkit-text-stroke:3px #3d2200;text-shadow:0 6px #3d2200,0 10px 30px #00000080;margin:0;font-size:clamp(48px,13vh,110px);font-style:italic;line-height:.95}.logo span:last-child{color:var(--leaf)}.tag{text-shadow:0 2px 4px #000000b3;margin:10px 0 18px;font-size:clamp(14px,2.8vh,19px);font-weight:700}.menu{justify-items:center;gap:10px;display:grid}.btn{min-width:210px;min-height:48px;color:var(--ink);cursor:pointer;background:#18301ce0;border:2px solid #ffe6aa80;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:18px;font-weight:800;line-height:1;box-shadow:0 4px #00000059}.btn:hover,.btn:focus-visible{border-color:var(--sun);outline:none;transform:translateY(-1px)}.btn.primary{color:#3a2000;background:linear-gradient(#ffd45a,#f0a020);border-color:#fff0b0}.btn.ghost{background:#00000059}.best{text-shadow:0 2px 4px #000000b3;min-height:1.2em;margin:14px 0 4px;font-weight:700}.trophies{justify-content:center;gap:12px;font-size:14px;font-weight:700;display:flex}.trophies span{background:#0006;border-radius:999px;padding:4px 10px}.panel-left{background:linear-gradient(90deg,#0a1a0ef0 70%,#0a1a0e00);align-content:start;place-items:start;width:min(56%,620px);padding-right:60px;right:auto}.panel-left h2{color:var(--sun);margin:0 0 4px;font-size:clamp(22px,5vh,34px);font-style:italic}.panel-left h3{text-transform:uppercase;letter-spacing:2px;opacity:.75;margin:10px 0 6px;font-size:13px}.racer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;display:grid}.racer{text-align:left;color:var(--ink);cursor:pointer;font:inherit;background:#ffffff12;border:2px solid #0000;border-radius:12px;min-height:52px;padding:7px 9px}.racer b{font-size:15px;display:block}.racer small{opacity:.75;font-size:11px}.racer .sw{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:5px;display:inline-block}.racer[aria-pressed=true]{border-color:var(--sun);background:#ffc93c29}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{color:var(--ink);cursor:pointer;text-align:left;background:#ffffff14;border:2px solid #0000;border-radius:10px;min-height:44px;padding:8px 14px;font-family:inherit;font-size:15px;font-weight:700}.seg button small{opacity:.7;font-size:11px;font-weight:500;display:block}.seg button[aria-pressed=true]{border-color:var(--sun);background:#ffc93c29}.toggle{align-items:center;gap:8px;margin:12px 0 4px;font-size:14px;display:flex}.toggle input{width:20px;height:20px;accent-color:var(--sun)}.row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;display:flex}.panel-left .row{justify-content:flex-start}.panel-left .btn{min-width:130px}#racer-blurb{opacity:.85;min-height:1.2em;margin:6px 0 0;font-size:13px}.card{background:var(--panel);border:1px solid var(--panel-b);text-align:center;border-radius:20px;max-width:min(640px,100%);padding:20px 26px;box-shadow:0 20px 60px #00000080}.card.small{min-width:260px}.card h2{color:var(--sun);margin:0 0 12px;font-size:clamp(22px,5vh,32px);font-style:italic}.how ul{text-align:left;margin:0 0 16px;padding-left:18px;font-size:15px;line-height:1.45}.how li{margin-bottom:5px}.blue{color:var(--blue)}.orange{color:var(--orange)}table.res{border-collapse:collapse;min-width:min(420px,100%);margin:0 auto;font-size:clamp(13px,2.6vh,16px)}table.res td,table.res th{text-align:left;padding:3px 10px}table.res th{text-transform:uppercase;letter-spacing:1px;opacity:.7;font-size:11px}table.res tr.me{color:var(--sun);background:#ffc93c2e;font-weight:800}table.res td.num{text-align:right;font-variant-numeric:tabular-nums}#results-extra,#podium-score{margin:10px 0 0;font-weight:700}.score{color:var(--sun);font-size:22px}.trophy{font-size:64px;line-height:1}@media (height<=460px){.panel-left{width:min(60%,560px)}.racer{min-height:44px;padding:4px 7px}.racer small{display:none}.panel-left h3{margin:6px 0 4px}.btn{min-height:44px;font-size:16px}.card{padding:12px 18px}.how ul{font-size:13px}}@media (prefers-reduced-motion:reduce){.pop,.pop.hint,.countdown.show{animation-name:fade}.swing-meter.ready #hud-swing-arc,#btn-swing.ready,.cannon-cue.now{animation:none}}@keyframes fade{0%{opacity:0}20%,80%{opacity:1}to{opacity:0}}.screen button:focus,.screen input:focus,.screen select:focus{outline:3px solid var(--sun);outline-offset:3px}.is-paused .countdown,.is-paused .pop{animation-play-state:paused}