:root{color-scheme:dark;--ink:#11232d;--road:#243943;--cyan:#61d3dd;--coral:#ff927c;--mint:#6eddb2;--gold:#ffd168;--paper:#e8f4f6;font:16px Nunito,system-ui,"Noto Sans",sans-serif;color:var(--paper);background:var(--ink)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;min-height:44px;border:2px solid #18313c;border-radius:11px;background:var(--paper);color:var(--ink);padding:8px 12px;font-weight:900}button{cursor:pointer;touch-action:none;box-shadow:0 3px 0 #07131b}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}[hidden]{display:none!important}.primary{background:var(--cyan)}#app{position:relative;height:100dvh;width:100vw;overflow:hidden}#world{width:100%;height:100%;display:block;outline:0;touch-action:none}header{position:absolute;top:max(8px,env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:center;background:#132430e8;border:1px solid #6d91a0;border-radius:12px;padding:7px 10px}header a{color:var(--cyan);font-size:23px;text-decoration:none}header div{flex:1;min-width:0}header strong{font-size:17px;line-height:1.1;display:block}header small{font-size:11px;display:block}header button{min-width:44px;font-size:13px;padding:7px}.hud{position:absolute;top:85px;left:12px;right:12px;display:flex;gap:12px;flex-wrap:wrap;pointer-events:none;font-size:13px;font-weight:900}.hud span{background:#142d39d9;padding:4px 8px;border-radius:7px}#combo{color:var(--gold)}#bankprompt{position:absolute;left:50%;top:126px;transform:translateX(-50%);color:var(--mint);font-weight:900;background:#102631d9;padding:5px 12px;border-radius:8px;max-width:90%;text-align:center}#minimap{position:absolute;right:12px;bottom:120px;width:126px;height:98px;border:1px solid #9db6c0;border-radius:9px;pointer-events:none;background:#152937cf}#callout{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-size:25px;font-weight:900;text-align:center;opacity:0;pointer-events:none;text-shadow:2px 3px #10232d;color:var(--gold)}#callout.visible{opacity:1}#controls{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:end;justify-content:space-between;gap:8px}#wheel{width:104px;height:104px;border-radius:50%;border:12px solid #6b93a6;background:#173746c7;box-shadow:0 4px 0 #081c29;touch-action:none;position:relative;flex-shrink:0}#wheel::before{content:"";position:absolute;left:34px;top:3px;bottom:3px;width:12px;background:#6b93a6;border-radius:7px}#wheel::after{content:"";position:absolute;left:3px;right:3px;top:35px;height:12px;background:#6b93a6;border-radius:7px}#wheelname{position:absolute;bottom:114px;left:0;max-width:160px;font-size:12px;font-weight:900;text-shadow:1px 2px var(--ink)}.pedals{display:flex;gap:6px;align-items:end}.pedals button{overflow-wrap:anywhere;white-space:normal;line-height:1.15;min-width:64px;min-height:64px;font-size:12px;max-width:88px}.pedals button[data-action=gas]{background:var(--mint)}.pedals button[data-action=hand]{background:var(--coral);padding:4px;font-size:11px}button.held{background:var(--gold)!important;transform:translateY(2px)}#tip{position:absolute;bottom:124px;left:12px;right:155px;padding:4px 7px;background:#132b37d9;border-radius:7px;max-height:36px;overflow:auto;font-size:11px}
dialog{border:2px solid #7a9cac;border-radius:18px;background:#132b38;color:var(--paper);width:min(95vw,520px);max-height:94dvh;overflow:auto;padding:20px;box-shadow:0 20px 80px #07131be6}dialog::backdrop{background:#06121dba;backdrop-filter:blur(3px)}dialog h1,dialog h2{margin:0 0 12px;font-weight:900;line-height:1.1}dialog h1{font-size:29px}dialog p,dialog li{line-height:1.45}dialog>button,.menucontent>button{display:block;width:100%;margin:8px 0}#menu{padding:0}.cover{height:174px;background:#27535f url('cover.webp') center/cover}.menucontent{padding:20px}.settings{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.settings button{font-size:12px;padding:8px}.settings select{max-width:162px}.settings [aria-pressed=false]{opacity:.5}#records{font-size:12px}.grids{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.grids button{font-size:12px;padding:8px 4px;min-height:68px}.grids small{display:block;color:#796235}.garage-row{display:flex;gap:12px;border:1px solid #527c90;border-radius:12px;margin:10px 0;padding:12px;align-items:center;background:#203e4c}.garage-row>div{flex:1;min-width:0}.garage-row h3{margin:0 0 5px;font-size:16px}.garage-row p{font-size:11px;margin:4px 0}.garage-row button{font-size:12px;max-width:135px}.car-icon{width:68px;height:68px;flex-shrink:0;background-image:url('assets/cars.webp');background-size:204px 136px;background-repeat:no-repeat}.tuning{display:flex;gap:8px;flex-wrap:wrap}.tuning button{font-size:12px;flex:1}.tuning p{font-size:11px;line-height:1.35;width:100%}#resultscore{font-size:26px;font-weight:900;color:var(--gold)}#resultnote{font-size:13px}
@media(max-width:420px){header{left:8px;right:8px;padding:6px 8px;gap:6px}header strong{font-size:14px}header small{font-size:10px}header button{font-size:11px;padding:5px}.hud{top:88px;left:9px;right:9px;gap:5px;font-size:11px}.hud span{padding:3px 6px}#bankprompt{top:145px;font-size:12px}#controls{left:10px;right:10px;gap:6px}#wheel{width:91px;height:91px;border-width:10px}#wheel::before{left:30px;top:2px;bottom:2px;width:11px}#wheel::after{top:30px;left:2px;right:2px;height:11px}#wheelname{bottom:101px;font-size:11px}.pedals{gap:4px}.pedals button{min-width:54px;max-width:65px;min-height:65px;padding:6px;font-size:11px}#minimap{bottom:114px;right:10px;width:104px;height:81px}#tip{bottom:143px;left:10px;right:123px;max-height:45px;font-size:10px}.cover{height:145px}.menucontent{padding:17px}dialog h1{font-size:25px}.grids{grid-template-columns:repeat(3,1fr)}.garage-row{padding:8px;gap:7px}.garage-row h3{font-size:14px}.garage-row button{max-width:100px;padding:6px}.car-icon{width:52px;height:52px;background-size:156px 104px}}
@media(max-height:460px) and (min-width:421px){header{top:6px;left:8px;right:8px;padding:4px 8px}header strong{font-size:14px}header small{font-size:10px}header button{font-size:11px}.hud{top:66px;font-size:10px;gap:5px}#bankprompt{top:99px;font-size:11px}#wheel{width:82px;height:82px;border-width:9px}#wheel::before{left:27px;top:2px;bottom:2px;width:10px}#wheel::after{top:27px;left:2px;right:2px;height:10px}#wheelname{bottom:90px;font-size:10px}.pedals button{min-height:50px;min-width:60px;font-size:10px}#minimap{bottom:81px;width:101px;height:78px}#tip{bottom:84px;font-size:10px;max-height:28px}.cover{height:99px}dialog{padding:17px}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}dialog::backdrop{backdrop-filter:none}}