:root{--cream:#f8f2e5;--metal:#e8e0ce;--ink:#233c3e;--teal:#147b78;--amber:#e7ad43;--coral:#e26b51;--line:#c9c3b4;font-family:"Bahnschrift","Aptos","Trebuchet MS",sans-serif;color:var(--ink);background:#ded7c8;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 10%,#fffcf3 0%,transparent 60%),repeating-linear-gradient(110deg,#e3dccd 0px,#e3dccd 2px,#e0d9ca 3px,#e0d9ca 5px);height:100dvh;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:9px;min-height:44px;padding:10px 15px}button:hover{filter:brightness(.97)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#game{max-width:1480px;height:100dvh;margin:auto;padding:18px 24px 8px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:10px;outline:none}.topbar,.brand,.top-actions,.dash,.controls,.steering,.pedals,.bottomline{display:flex;align-items:center}.topbar{justify-content:space-between;gap:8px}.brand{gap:12px}.brand-mark{font-style:italic;background:var(--ink);color:var(--cream);font-size:23px;padding:9px 10px;border-radius:5px;letter-spacing:-2px}.brand-mark span{font-size:11px;color:var(--amber);letter-spacing:0;display:inline-block;margin-left:4px}h1{font-weight:900;font-size:23px;letter-spacing:-.5px;margin:0}.brand p{margin:2px 0 0;font-size:10px;letter-spacing:2.5px}.top-actions{gap:6px}.top-actions button{background:#f8f2e5a8;font-size:12px}.dash{border-block:1px solid var(--line);padding:10px 3px;justify-content:space-between;gap:15px}.dash>div{display:grid;gap:2px}.dash span{font-size:10px;letter-spacing:1.6px;font-weight:700}.dash em{font-size:8px;font-style:normal;letter-spacing:.5px}.dash strong{font-size:27px;line-height:1;font-variant-numeric:tabular-nums}.dash small{font-size:13px;color:#516361}.speed{text-align:right}.stage{position:relative;min-height:0;border:1px solid #b8b4a5;border-radius:18px;overflow:hidden;background:#e9e2cf;box-shadow:0 6px 18px #2b3f3e18,inset 0 0 0 3px #fffcf570}canvas{display:block;width:100%;height:100%;touch-action:none}.track-message{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);background:#f9f4e9ed;color:#233c3e;border:1px solid #c7c7b9;border-radius:40px;max-width:calc(100% - 24px);padding:8px 16px;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:0 3px 8px #0001}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:24px;background:linear-gradient(90deg,#293c3d22,transparent 80%);overflow:auto}.panel{background:#fcf7ecef;border:1px solid #fff9ed;border-radius:16px;padding:25px 28px;max-width:430px;width:100%;box-shadow:0 18px 55px #233c3e29;backdrop-filter:blur(10px)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--teal);margin:0 0 10px}h2{font-size:51px;line-height:.99;letter-spacing:-2px;font-weight:900;margin:0 0 12px}.intro,.panel>p{font-size:13px;line-height:1.5}.intro{margin:0 0 19px}.cars{border:0;margin:0;padding:0;display:flex;gap:7px}.cars legend{font-size:12px;font-weight:800;margin-bottom:8px}.cars legend span{font-weight:400;color:#536460;margin-left:5px}.cars button{flex:1;font-size:11px;padding:9px 4px;display:grid;justify-items:center;gap:6px;border:1px solid #d7d2c6}.cars button[aria-pressed=true]{border:2px solid var(--teal);background:#e0eee5;padding:8px 3px}.mini-car{width:44px;height:21px;border-radius:8px 9px 6px 6px;background:var(--teal);display:block;position:relative;box-shadow:4px 4px 0 #233c3e26;border:2px solid #244345}.mini-car:before{content:"";position:absolute;background:#244345;width:14px;height:13px;left:11px;top:2px;border-inline:2px solid #f9f4dccc}.mini-car:after{content:"";position:absolute;width:7px;height:3px;background:#263c3d;left:5px;top:-4px;box-shadow:24px 0 #263c3d,0 21px #263c3d,24px 21px #263c3d}.amber{background:var(--amber)}.coral{background:var(--coral)}.assist{display:flex;gap:9px;align-items:center;margin:16px 0 0;font-size:13px;font-weight:700;cursor:pointer}.assist input{accent-color:var(--teal);width:19px;height:19px;margin:0}.assist small{display:block;color:#5c6860;font-size:11px;font-weight:400;margin-top:2px}.panel .instructions{font-size:11px;line-height:1.6;margin:13px 0}.start-actions{display:grid;grid-template-columns:1.15fr 1fr;gap:7px}.primary{background:var(--teal);color:#fffaf0;border-color:#126561;box-shadow:0 3px 0 #105b58}.secondary{background:#f5edde;border-color:#b9b9a9}.panel .fine{font-size:10px;color:#566761;margin:12px 0 0;text-align:center}.controls{justify-content:space-between;gap:18px}.steering,.pedals{gap:8px}.controls button{height:56px;min-width:98px;background:linear-gradient(#fffbf1,#e3dece);border-color:#b9b9aa;border-bottom:4px solid #9fa89d;letter-spacing:1px;font-size:12px;touch-action:none;user-select:none;-webkit-user-select:none}.controls button span{font-size:17px}.controls button[data-control=accel]{background:linear-gradient(#2b9188,#177873);color:#fff9eb;border-color:#1c6e67;border-bottom-color:#18554f;min-width:130px}.controls button[data-control=brake]{background:linear-gradient(#f7dcc7,#edc0a8)}.controls button.held{transform:translateY(2px);filter:brightness(.86);border-bottom-width:2px}.bottomline{font-size:9px;letter-spacing:1px;justify-content:space-between;color:#52615a}.bottomline a{color:#425952;letter-spacing:0}.compact{margin:auto;text-align:center;max-width:410px}.compact h2{font-size:41px}.compact button{display:block;width:100%;margin-top:11px}.text-button{border:0;background:transparent;text-decoration:underline}.result-time{font-size:52px;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--teal)}#lap-times{font-variant-numeric:tabular-nums}.compact p{color:#53615b}
@media(min-width:900px){.overlay:has(#garage:not([hidden])){padding-left:5%}}
@media(max-width:700px){#game{padding:max(8px,env(safe-area-inset-top)) 10px max(5px,env(safe-area-inset-bottom));gap:7px}h1{font-size:17px}.brand{gap:7px}.brand-mark{font-size:18px;padding:7px}.brand-mark span{font-size:9px}.brand p{font-size:8px;letter-spacing:1.5px}.top-actions button{padding:6px 9px;font-size:10px;min-height:38px}#fullscreen{display:none}.dash{padding:8px 2px;gap:5px}.dash strong{font-size:23px}.dash span{font-size:8px;letter-spacing:.6px}.dash em{display:block;font-size:7px}.dash small{font-size:11px}.stage{border-radius:12px}.overlay{padding:12px;align-items:center;justify-content:center;background:#314a4924}.panel{padding:21px 19px;max-width:355px}h2{font-size:44px}.intro{margin-bottom:13px}.panel .eyebrow{font-size:9px}.controls{gap:8px}.steering,.pedals{gap:5px;flex:1}.controls button{padding:7px;min-width:0;flex:1;height:61px;font-size:10px;letter-spacing:.3px}.controls button[data-control=accel]{min-width:0;flex:1.15}.controls button span{font-size:15px}.bottomline{font-size:7px;letter-spacing:.3px}.track-message{font-size:10px;bottom:9px;padding:7px 11px}.speed{display:none}}
@media(max-height:690px){#game{gap:5px;padding-top:6px}.topbar .brand-mark{padding:5px}.dash{padding:6px 2px}.dash strong{font-size:21px}.overlay{padding:8px}.panel{padding:13px 17px}.panel .eyebrow{margin-bottom:6px}h2{font-size:36px;margin-bottom:8px}.intro,.panel>p{font-size:11px}.intro{margin-bottom:11px}.cars button{min-height:53px;padding:6px 3px}.cars button[aria-pressed=true]{padding:5px 2px}.cars legend{margin-bottom:6px;font-size:11px}.assist{margin-top:10px;font-size:12px}.assist small{font-size:10px}.panel .instructions{font-size:10px;margin:9px 0}.panel .fine{margin-top:8px;font-size:9px}.start-actions button{font-size:12px;padding:8px;min-height:40px}.controls button{height:49px}.bottomline{font-size:7px}}
@media(max-width:350px){#game{padding-inline:7px}.brand-mark{display:none}h1{font-size:16px}.top-actions{gap:4px}.top-actions button{padding:5px 7px}.panel{padding:12px 13px}h2{font-size:34px}.intro br{display:none}.cars legend span{font-size:10px}.panel .instructions{font-size:9px}.start-actions button{font-size:11px}.bottomline span{max-width:210px}.dash strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}