:root{color-scheme:dark;--bg:#1b2521;--panel:#26322b;--line:#ffffff18;--cream:#f2e4c8;--muted:#9cae9b;--orange:#f4a66a;--mint:#bddd9e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:'Avenir Next','Segoe UI',sans-serif;background-image:linear-gradient(135deg,#39463233,transparent 50%)}header{height:76px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 4%}.logo{text-decoration:none;color:var(--cream);display:flex;gap:12px;align-items:center;font:bold 18px monospace;letter-spacing:2px}.logo-mark{display:grid;place-items:center;width:36px;height:38px;background:var(--orange);color:var(--bg);font-size:16px;box-shadow:4px 4px #0003}.logo small{display:block;font:8px monospace;letter-spacing:2px;color:var(--muted);margin-top:5px}.toolbar{display:flex;gap:10px;align-items:center}.edition{font:9px monospace;color:var(--muted);letter-spacing:1px;margin-right:18px}button{cursor:pointer;color:var(--cream);background:#ffffff05;border:1px solid #ffffff25;font:10px monospace;letter-spacing:1px;padding:11px 14px;box-shadow:2px 2px #0002}button:hover{border-color:var(--orange);background:#f4a66a15}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}main{display:grid;grid-template-columns:minmax(150px,220px) minmax(260px,480px) minmax(150px,210px);gap:36px;justify-content:center;margin:30px auto 20px;padding:0 4%;max-width:1250px}.eyebrow{font:9px monospace;color:var(--orange);letter-spacing:1.8px;margin:0 0 18px}.brief{padding-top:20px}h1{font-size:39px;line-height:1.12;letter-spacing:-1.5px;margin:0 0 18px}h2{font-size:19px;margin:0 0 24px}.lede{color:var(--muted);font-size:13px;line-height:1.8;margin-bottom:35px}.stat{border-top:1px solid var(--line);padding:17px 0}.stat strong{font:24px monospace}label{font:8px monospace;letter-spacing:1.2px;display:block;color:var(--muted);margin-bottom:8px}.instructions{margin-top:25px;display:grid;gap:14px;font:8px monospace;color:var(--muted)}kbd{font:9px monospace;color:var(--cream);padding:4px 6px;background:#354036;border:1px solid #63745c;margin-right:5px}.note{font-size:11px;line-height:1.8;color:var(--muted);margin-top:28px}.cabinet{border:1px solid #7a85624d;box-shadow:8px 8px #101b1644;align-self:start;background:#202a24}.top-hud{display:flex;justify-content:space-between;padding:14px 17px;border-bottom:2px solid #0c171b}.top-hud strong{font:17px monospace}.top-hud .tokens{font-size:13px;color:#c2b4ea}.viewport{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.scene-label{position:absolute;left:14px;right:14px;top:13px;display:flex;justify-content:space-between;font:8px monospace;color:#eef4cf;text-shadow:1px 1px #1a3621;background:#17332166;padding:6px;pointer-events:none}.bottom-hud{display:flex;gap:25px;align-items:center;padding:15px 17px;border-top:2px solid #0c171b}.speed{display:flex;align-items:baseline;gap:6px}.speed strong{font:25px monospace;color:var(--orange)}.speed span{font:8px monospace;color:var(--muted)}.fuel{flex:1}.fuel label{display:flex;justify-content:space-between;gap:7px}.fuel label span{color:var(--orange);letter-spacing:0}.meter{height:8px;background:#101b16;position:relative}.meter:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 2px),#202a24 calc(20% - 2px),#202a24 20%)}.meter i{display:block;height:100%;background:var(--orange)}.garage{padding-top:20px}.next{padding:18px;background:#ffffff04;border:1px solid var(--line);margin-bottom:20px}.next strong{font:26px monospace;color:var(--mint)}.next p{font-size:10px;line-height:1.7;color:var(--muted);margin-bottom:0}.upgrade-list{font:11px/1.8 monospace;color:var(--muted);min-height:100px}.badge{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--cream);font-size:9px}.badge b{color:var(--orange)}.shield{font:10px monospace;color:#c2b4ea;margin-bottom:15px}.legend{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}.legend p{font-size:10px;line-height:1.7;color:var(--muted);display:flex;gap:10px}.legend p span{font:bold 17px monospace}.star{color:#f7dc72}.rescue{color:#c2b4ea}.hazard{color:var(--orange)}footer{margin:22px 4%;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;color:#7a8e7c;font:8px monospace;letter-spacing:1px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:#15251bba;backdrop-filter:blur(2px)}.hidden{display:none}.panel{text-align:center;width:100%}.panel h2{font-size:36px;line-height:1.08;letter-spacing:-1px;margin:12px 0 18px}.panel h2 em{font-style:normal;color:var(--orange)}.panel p{font-size:12px;line-height:1.8;color:#c7d4b6;margin:0 0 22px}.panel .primary{background:var(--orange);color:#2c291d;border:0;padding:16px 24px;font-weight:bold}.panel .secondary{display:block;margin:12px auto}.panel .hint{font:8px/1.8 monospace;color:#a4b997;margin-top:19px}.panel .eyebrow{font-size:8px}.cards{display:grid;gap:10px}.card{text-align:left;background:#263a2ce8;padding:14px;display:grid;grid-template-columns:35px 1fr;gap:12px;align-items:center;min-height:85px;letter-spacing:0}.card .icon{font:bold 23px monospace;color:var(--orange)}.card b{display:block;font-size:12px;margin-bottom:6px}.card p{font:10px/1.5 sans-serif;margin:0;color:#bdceb4}.card small{font:8px monospace;color:var(--orange);display:block;margin-top:7px}.summary{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.summary strong{font:21px monospace;color:var(--orange)}.toast{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);color:var(--cream);background:#1c3127e8;padding:10px;font:10px monospace;white-space:nowrap;opacity:0;pointer-events:none;border:1px solid #a6c68a}.toast.visible{opacity:1}@media(min-width:1100px){main{grid-template-columns:220px minmax(260px,440px) 210px}}@media(max-width:950px){main{gap:22px;grid-template-columns:150px minmax(260px,440px)}.garage{display:none}.edition{display:none}h1{font-size:30px}}@media(max-width:620px){header{height:62px;padding:0 3%}.logo{font-size:14px}.logo small{font-size:6px}.logo-mark{width:29px;height:32px}.toolbar{gap:5px}button{padding:9px;font-size:8px}main{display:block;margin:15px auto;padding:0 3%;max-width:460px}.brief{display:none}.top-hud{padding:12px}.top-hud strong{font-size:15px}.top-hud .tokens{font-size:11px}.panel h2{font-size:30px}.overlay{padding:18px}footer span:last-child{display:none}.bottom-hud{padding:13px}.scene-label{font-size:7px}}
@media(min-width:621px){main{grid-template-columns:minmax(150px,210px) min(440px,max(260px,calc((100dvh - 280px)*2/3))) minmax(150px,200px)}}
@media(min-width:621px) and (max-width:950px){main{grid-template-columns:150px min(440px,max(260px,calc((100dvh - 280px)*2/3)))}}
@media(max-height:800px) and (min-width:621px){header{height:64px}main{margin-top:16px;margin-bottom:12px;gap:28px}.brief,.garage{padding-top:12px}.eyebrow{margin-bottom:13px}h1{font-size:30px}.lede{margin-bottom:20px}.stat{padding:12px 0}.stat strong{font-size:21px}.instructions{margin-top:18px;gap:12px}.note{margin-top:18px}.panel h2{font-size:29px;margin:9px 0 13px}.panel p{font-size:11px;margin-bottom:16px}.card{padding:10px;min-height:72px}.cards{gap:7px}.panel .eyebrow{font-size:7px;margin-bottom:10px}.panel .hint{font-size:7px;margin-top:14px}.top-hud{padding:12px}.top-hud strong{font-size:15px}.top-hud .tokens{font-size:11px}.bottom-hud{padding:12px}.speed strong{font-size:21px}footer{margin-top:15px;padding-top:12px}}
.compact-run{display:none}@media(max-width:950px){.compact-run{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--line);font:7px/1.6 monospace;color:var(--muted)}#upgradesCompact{width:100%;color:var(--orange)}#nextCompact{color:var(--mint)}}
@media(min-width:621px) and (max-width:950px){main{grid-template-columns:150px min(440px,max(240px,calc((100dvh - 325px)*2/3)))}}
.overlay{overflow-y:auto;align-items:safe center}.overlay .card p{margin:0;font:10px/1.45 sans-serif}.overlay .card small{margin-top:5px}.overlay.upgrade{padding:14px}.overlay.upgrade .eyebrow{margin-bottom:8px}.overlay.upgrade h2{font-size:27px;margin:6px 0 12px}.overlay.upgrade .panel>p{margin-bottom:14px;font-size:10px}.overlay.upgrade .card{grid-template-columns:25px 1fr;gap:8px;padding:11px}.overlay.upgrade .cards{gap:8px}
.touch-controls,.touch-hint{display:none}.overlay{z-index:2}.toast{z-index:1}
@media(max-width:950px){
  .touch-controls{position:absolute;left:12px;right:12px;bottom:14px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;user-select:none;-webkit-user-select:none}
  .touch-controls button{pointer-events:auto;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;min-height:48px;padding:10px 6px;background:#213027e8;border:2px solid #d4d4aa91;box-shadow:3px 3px #13251bad;font:bold 10px monospace;letter-spacing:.6px;color:#f2e4c8}
  .touch-pedals{display:grid;gap:8px;width:72px}.touch-pedals [data-touch=boost]{background:#bd7343eb;color:#fff2cf;border-color:#ffd5a2}
  .touch-pedals small{display:block;font:7px monospace;margin-top:3px}.touch-steering{display:flex;gap:8px}.touch-steering button{width:52px;height:56px;font-size:19px}
  .touch-controls button.held{background:#bddd9e;color:#1b2521;border-color:#eff5d0;box-shadow:1px 1px #13251b;transform:translate(2px,2px)}
  .touch-controls button:disabled{opacity:.4;cursor:default}.touch-hint{display:block}.keyboard-hint{display:none}.toast{bottom:135px}
}
.fullscreen-exit,.focus-actions button{display:none}.focus-actions{display:flex;align-items:center;gap:8px}.focused{overflow:hidden}.focused>header,.focused .brief,.focused .garage,.focused>footer{display:none}.focused main{display:block;padding:0;margin:0;max-width:none}
.cabinet.in-focus{position:fixed;inset:0;z-index:10;width:100%;height:100dvh;margin:0;border:0;box-shadow:none;display:flex;flex-direction:column;background:#1b2521;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.in-focus .top-hud,.in-focus .bottom-hud,.in-focus .compact-run{flex-shrink:0}.in-focus .top-hud{gap:10px}.in-focus .viewport{flex:1;min-height:0;aspect-ratio:auto;width:100%;background:#627d40}.in-focus canvas{object-fit:contain}.in-focus .overlay{max-width:480px;left:50%;right:auto;width:100%;transform:translateX(-50%)}.in-focus .fullscreen-exit{display:block;padding:9px;font-size:9px;align-self:center}.in-focus .compact-run{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 14px;border-top:1px solid var(--line);font:8px monospace;color:var(--muted)}.in-focus .focus-actions button{display:block;padding:7px;font-size:8px}.in-focus #upgradesCompact{color:var(--orange);width:100%}
@media(max-width:950px){.keyboard-controls{display:none}.toolbar{gap:4px}.toolbar button{padding:8px 6px;font-size:7px}.in-focus .keyboard-controls{display:none}.in-focus .top-hud{padding:10px}.in-focus .top-hud strong{font-size:13px}.in-focus .top-hud label{font-size:7px}.in-focus .top-hud .tokens{font-size:11px}}
@media(max-width:380px){.logo small{display:none}.logo{font-size:12px;letter-spacing:1px}.logo-mark{width:25px;height:29px}.logo{gap:7px}}
