*{box-sizing:border-box}:root{--cream:#fff5df;--green:#173e32;--orange:#ff9654;--yellow:#ffce68;font-family:'Segoe UI',Arial,sans-serif;color:var(--cream);background:#12392e;font-synthesis:none}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:none}button:focus-visible,a:focus-visible{outline:3px solid #ffce68;outline-offset:4px}[hidden]{display:none!important}#arcade{height:100svh;display:flex;flex-direction:column;max-width:1600px;margin:auto;background:#143f32;box-shadow:0 0 120px #061f19}header{flex-shrink:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 30px;border-bottom:1px solid #ffffff12;background:#133b30;font-size:10px;font-weight:800;letter-spacing:2px}header a{text-decoration:none;color:var(--cream);font-size:23px;font-weight:950;letter-spacing:-2px;line-height:.8}header a span{display:block;font-size:7px;letter-spacing:2px;margin-top:6px}header>div{display:flex;align-items:center;gap:22px}header .live{font-size:8px;color:#b9c9a9;border-left:1px solid #ffffff2e;padding-left:22px;letter-spacing:1.6px}header .live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:7px;box-shadow:0 0 12px #ff965466}header button{border:1px solid #8aab8955;background:#ffffff08;color:#e9edcf;font-size:9px;font-weight:800;padding:10px 13px;border-radius:5px;letter-spacing:1px}#track{flex:1;min-height:0;position:relative;overflow:hidden;background:#c9d4bd}canvas{display:block;width:100%;height:100%}#track::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 95px #15382b33;z-index:1}#hud{position:absolute;z-index:4;top:22px;left:24px;right:24px;display:flex;align-items:flex-start;gap:8px;pointer-events:none}#hud>div{min-width:112px;background:#fff6e6ed;color:#234b3c;border:1px solid #ffffffe6;border-radius:9px;padding:11px 15px;box-shadow:0 5px 18px #0c382128;backdrop-filter:blur(12px)}small{display:block;font-size:8px;letter-spacing:1.5px;font-weight:850;color:#677e66;white-space:nowrap}#hud strong{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-weight:500;font-style:italic;font-size:32px;line-height:1.1;letter-spacing:.5px;font-variant-numeric:tabular-nums;margin-top:6px}#hud>div:nth-child(3) strong{color:#d77043}#hud>div:nth-child(4){background:#214b3ee8;color:var(--cream);border-color:#74917c}#hud>div:nth-child(4) small{color:#c2d3b2}#hud button{margin-left:auto;background:#173f32e8;color:#fff5df;pointer-events:auto;border:1px solid #a6b99a66;border-radius:9px;padding:15px 18px;font-size:18px}#message{position:absolute;z-index:4;top:120px;left:50%;transform:translateX(-50%);max-width:88%;padding:9px 15px;background:#173e32eb;border:1px solid #f3e7bd44;border-radius:30px;color:#fff4cf;font-size:12px;letter-spacing:.3px;font-weight:800;text-align:center;pointer-events:none;box-shadow:0 5px 20px #123b3220}#message:empty{display:none}.panel{z-index:5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));padding:30px;background:#fff4df;color:#24493a;border:1px solid #fff9e8;border-radius:16px;box-shadow:0 20px 90px #062c3166;text-align:center;max-height:calc(100% - 24px);overflow:auto;scrollbar-width:thin}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:#638473}.version{color:#f9ad72;border:1px solid #e2f1c93b;letter-spacing:1px;font-size:8px;padding:4px 6px;border-radius:3px;margin-left:9px}#menu{top:0;bottom:0;left:0;transform:none;width:100%;max-height:none;border:0;border-radius:0;background:linear-gradient(90deg,#0a3029f5 0%,#103a2ded 28%,#103a2d77 48%,#15382b00 72%);box-shadow:none;text-align:left;overflow:auto;padding:clamp(20px,4vh,44px) clamp(24px,5vw,65px);display:flex;flex-direction:column;justify-content:center;color:var(--cream)}#menu>*{width:min(390px,44%);flex-shrink:0}#menu .eyebrow{color:#b6c9a8}h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(80px,10vw,142px);font-style:italic;line-height:.82;letter-spacing:-3px;margin:24px 0 0;transform:skewX(-4deg);text-shadow:0 5px 0 #062d2522;font-weight:900}h1 em{color:var(--orange);font-style:inherit}h1>span{display:block;font-family:'Segoe UI',Arial,sans-serif;font-size:9px;letter-spacing:2px;line-height:1.5;margin-top:19px;transform:skewX(4deg);font-weight:800;color:#f4e5c0}#menu .intro{font-size:12px;line-height:1.65;color:#d2dec2;margin:19px 0 22px}.label{font-size:8px;letter-spacing:1.6px;color:#b1c5ab;font-weight:850;margin-bottom:10px}#loads{display:flex;gap:7px}#loads button{flex:1;min-width:0;background:#ffffff06;color:#bbcfb1;border:1px solid #bad4b23a;border-radius:8px;padding:13px 9px;text-align:left;font-size:7px;font-weight:900;letter-spacing:.9px;transition:background .15s,border-color .15s}#loads button:hover{background:#ffffff12;border-color:#d5e6bd8a}#loads button.selected{border-color:var(--orange);background:#ff96541c;box-shadow:inset 0 0 0 1px var(--orange);color:#ffc69a}#loads strong{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;color:var(--cream);font-size:25px;letter-spacing:0;margin:8px 0}#loads span{font-size:9px;letter-spacing:.4px;font-weight:500}.primary{width:100%;border:0;border-radius:7px;padding:16px 19px;margin-top:13px;background:var(--orange);color:#173e32;font-size:13px;letter-spacing:1.4px;font-weight:950;box-shadow:0 4px 0 #ad5a36,0 7px 24px #09271d22;transition:filter .15s,transform .15s}.primary span{float:right;font-size:20px;line-height:16px}.primary:hover{filter:brightness(1.12);transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #ad5a36}#menu .help{font-size:9px;line-height:1.8;color:#9db89f;margin:17px 0 0}.help kbd{font:700 9px 'Segoe UI',sans-serif;display:inline-block;border:1px solid #bdd5b14d;border-radius:3px;padding:0 4px;color:#e0e8c7;margin-right:3px}#menu #best{font-size:9px;letter-spacing:1.2px;color:#e6cc8e;margin:17px 0 0;border-top:1px solid #d8e9bf21;padding-top:13px}h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:500;font-style:italic;font-size:46px;letter-spacing:-1px;line-height:1.05;margin:16px 0;color:#234e3c}.panel>p{font-size:12px;line-height:1.6}.secondary{background:none;border:0;padding:16px 5px 0;color:#597861;font-size:9px;font-weight:850;letter-spacing:1px}#receipt{background:#fffdf0;color:#3e5847;border-top:1px dashed #9cb091;border-bottom:1px dashed #9cb091;margin-top:18px;padding:12px 5px;font:12px/1.8 'Courier New',monospace;text-align:left}#receipt div{display:flex;justify-content:space-between}#receipt .total{border-top:1px dashed #9cb091;margin-top:8px;padding-top:8px;font-weight:900;font-size:15px}.route{position:absolute;bottom:20px;left:26px;right:26px;z-index:3;display:flex;align-items:center;gap:12px;pointer-events:none;color:#f7f5d9;font-size:8px;letter-spacing:1.5px;font-weight:800;text-shadow:0 1px 3px #174d3c}.route .rail{height:4px;flex:1;border-radius:8px;background:#174d3c55;box-shadow:0 0 0 1px #fff5df33;overflow:hidden}#route-progress{height:100%;width:0;background:#ffcb67;border-radius:8px}#track:has(#menu:not([hidden])) .route{display:none}footer{height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:9px 28px;gap:12px;border-top:1px solid #ffffff0b}footer strong{font-size:10px;letter-spacing:2px;font-weight:900}footer span{display:block;font-size:8px;color:#a8bd9a;margin-top:4px}.desktop-hint{letter-spacing:1px}.controls{display:flex;gap:9px}.controls button{user-select:none;-webkit-user-select:none;width:62px;height:47px;background:linear-gradient(#35624b,#24503e);color:#fff4dc;border:1px solid #a8c19666;border-bottom:3px solid #0c2f25;border-radius:10px;font-weight:900;box-shadow:0 3px 10px #0a291e33}.controls button:active,.controls button.down{background:var(--orange);color:#173e32}#brake{font-size:9px;letter-spacing:1px}
@media(min-width:800px) and (pointer:fine){.controls{display:none}}
@media(max-width:650px){header{height:46px;padding:0 17px}header>div{font-size:9px;letter-spacing:1.4px}header .live{display:none}header button{padding:8px;font-size:7px}header a{font-size:20px}footer{height:70px;padding:9px 15px}footer>div:first-child{max-width:120px}footer span{line-height:1.5}.desktop-hint{display:none}.controls button{width:52px;height:47px}#menu{justify-content:flex-end;padding:24px 23px;background:linear-gradient(0deg,#0a3029fc 0%,#0d352df5 51%,#10392d70 75%,#10392d00 100%)}#menu>*{width:100%;max-width:390px}h1{font-size:78px;margin:14px 0 0;line-height:.92;letter-spacing:-2px}h1 br{display:none}h1 em{margin-left:8px}h1>span{font-size:8px;letter-spacing:1.4px;margin-top:9px}#menu .intro{font-size:11px;margin:12px 0 16px}.eyebrow{font-size:8px;letter-spacing:1.4px}#loads strong{font-size:23px}#loads button{padding:11px 8px}.primary{padding:14px 17px}#menu .help{margin-top:13px;font-size:9px}#menu #best{margin-top:10px;padding-top:10px;font-size:8px}#hud{left:10px;right:10px;top:12px;gap:5px;flex-wrap:wrap}#hud>div{padding:9px 10px;min-width:0;flex:1}#hud strong{font-size:25px;margin-top:5px}small{font-size:6px;letter-spacing:1px}#hud button{padding:11px 12px;font-size:15px}#message{top:100px;max-width:95%;width:max-content;font-size:10px;padding:8px 12px}.route{bottom:14px;left:15px;right:15px;font-size:7px;gap:8px}.panel{padding:23px}h2{font-size:39px}}
@media(max-height:740px) and (min-width:651px){#menu{padding:20px 40px}h1{font-size:96px;margin-top:17px}h1>span{margin-top:13px}#menu .intro{margin:14px 0 16px;font-size:11px}#loads button{padding:10px 8px}#loads strong{font-size:22px;margin:6px 0}#menu .help{margin-top:12px}#menu #best{margin-top:12px;padding-top:10px}header{height:50px}footer{height:48px}}
@media(max-height:640px){#menu{justify-content:flex-start;padding-block:18px}h1{font-size:66px;margin-top:11px}h1>span{margin-top:9px}#menu .intro{font-size:10px;margin:10px 0 12px}.label{font-size:7px;margin-bottom:7px}#loads button{padding:8px}#loads strong{font-size:20px;margin:5px 0}.primary{padding:12px;margin-top:10px}#menu .help{font-size:8px;margin-top:10px}#menu #best{margin-top:9px;padding-top:8px;font-size:8px}header{height:42px}footer{height:52px}.panel{padding:18px}h2{font-size:32px;margin:10px 0}#receipt{font-size:11px;line-height:1.6;margin-top:12px}.panel>p{font-size:11px}}
@media(max-height:450px){#menu>*{width:min(390px,52%)}#menu{padding:13px 26px}h1{font-size:52px;line-height:.9;margin-top:9px}h1 br{display:none}h1 em{margin-left:8px}h1>span,#menu .help,#menu #best{display:none}#menu .intro{margin:9px 0;font-size:10px}#loads strong{display:inline-block;font-family:inherit;font-weight:850;font-size:12px;margin:0 4px}#loads button{font-size:6px;padding:10px 5px}#loads span{display:none}header{height:34px}footer{height:40px}.controls button{height:30px}#hud{top:10px}#hud>div{padding:7px 10px;min-width:85px}#hud strong{font-size:23px}#message{top:85px}.route{bottom:9px}.panel{max-height:calc(100% - 12px);padding:14px}#receipt{line-height:1.4;font-size:10px}.secondary{padding-top:11px}h2{font-size:27px}.eyebrow{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}h1{transform:none}}
/* A separate pace selector allows steering and speed changes together on touch. */
#speed-control{position:absolute;z-index:4;right:25px;bottom:44px;display:flex;align-items:center;gap:10px;padding:7px;background:#173e32ee;color:var(--cream);border:1px solid #fff4dc55;border-radius:12px;box-shadow:0 5px 20px #173e322b;backdrop-filter:blur(12px)}#speed-control button{width:44px;height:44px;flex-shrink:0;border:1px solid #d5e5bf55;border-radius:8px;background:#ffffff0c;color:var(--cream);font-size:25px;font-weight:800;line-height:1}#speed-control button:active{background:var(--orange);color:var(--green)}#speed-control button:disabled{opacity:.3;cursor:default}.speed-readout{text-align:center;min-width:74px}.speed-readout small{font-size:6px;letter-spacing:1.5px;color:#b7cdac}.speed-readout strong{display:block;font-size:11px;letter-spacing:1px;font-weight:900;line-height:1.5;color:var(--cream)}.speed-bars{display:flex;gap:3px;justify-content:center;margin-top:2px}.speed-bars i{width:17px;height:3px;border-radius:2px;background:#66856b}.speed-bars i:first-child,#speed-control[data-gear="1"] .speed-bars i:nth-child(2),#speed-control[data-gear="2"] .speed-bars i{background:var(--yellow)}#speed-control[data-gear="2"] .speed-readout strong{color:#ffb075}
@media(max-width:650px){#speed-control{right:14px;bottom:37px;gap:7px;padding:6px}#speed-control button{width:42px;height:42px}.speed-readout{min-width:67px}}
@media(max-height:450px){#speed-control{right:15px;bottom:31px;padding:4px;gap:5px}#speed-control button{width:36px;height:35px}.speed-readout{min-width:65px}}
@media(max-width:650px){#speed-control button{width:44px;height:44px}}
/* Keep score fractions readable in the narrower website iframe. */
#hud strong{white-space:nowrap}
@media(max-width:350px){#hud>div{padding:8px 7px}#hud strong{font-size:21px}#hud small{font-size:5.5px;letter-spacing:.7px}#hud button{padding:10px}#message{font-size:9px}}
/* Older WebViews may not support svh: keep a working height before using it. */
#arcade{height:100%;height:100vh;height:100svh}
#startup-warning,.startup-warning{position:fixed;z-index:30;bottom:14px;left:5%;width:90%;padding:16px 18px;border:2px solid #ffba75;border-radius:9px;background:#173e32;color:#fff5df;font:700 13px/1.6 'Segoe UI',Arial,sans-serif;box-shadow:0 6px 30px #0b292955}

/* Game gestures belong to the cart, including long holds on text buttons. */
#game,.controls,.controls *,#speed-control,#speed-control *{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;
}
#game{cursor:grab}#game.is-dragging{cursor:grabbing}