:root { color-scheme:dark; --ink:#e9f0f5; --muted:#a2b0bd; --gold:#eebf54; --red:#e04b52; --blue:#398ad8; --navy:#071827; }
* { box-sizing:border-box } html,body,#game { margin:0;width:100%;height:100%;overflow:hidden } body { font-family:var(--wc-font-sans,Inter,Arial,sans-serif);background:#080d15;color:var(--ink) }
button,input { font:inherit } a { color:var(--gold) } button { cursor:pointer }
#game { position:relative } #view,#view canvas { width:100%;height:100%;display:block }
.hud { position:absolute;z-index:2;left:0;right:0;display:flex;align-items:center;pointer-events:none;text-shadow:0 1px 6px #000 }
.top { top:0;min-height:72px;padding:12px 24px;gap:30px;background:linear-gradient(#080d15d9,#080d1500) }
.brand { display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none;color:var(--ink);font-size:24px;font-weight:900;pointer-events:auto }
.brand img { width:72px;height:40px;object-fit:contain }.gold { color:var(--gold) }
.score { display:flex;align-items:baseline;gap:10px }.score small { font-size:13px;font-weight:900;letter-spacing:.14em }.score b { font-size:32px;font-variant-numeric:tabular-nums }.red small{color:var(--red)}.blue small{color:var(--blue)}
.time { display:flex;flex-direction:column;align-items:center;min-width:88px }.time b { font-size:35px;line-height:1;font-variant-numeric:tabular-nums }.time small { color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.12em }
.hud-button { pointer-events:auto;background:#172233a8;color:var(--ink);border:1px solid #71808c85;border-radius:7px;padding:7px 12px;font-size:18px }
.bottom { bottom:0;min-height:76px;padding:10px 24px;justify-content:space-between;gap:16px;background:linear-gradient(#080d1500,#080d15ef) }.bottom>div:first-child{display:flex;flex-direction:column}.bottom small{color:var(--gold);font-size:11px;letter-spacing:.15em}.bottom b{font-size:22px}.bottom #hubState{font-size:13px;color:#6ed6a1;font-weight:800}.hud-actions{display:flex;gap:22px}.hud-actions span{font-size:11px;color:var(--muted);display:flex;flex-direction:column;align-items:center}.hud-actions b{font-size:13px;color:var(--ink)}
#notice { position:absolute;z-index:2;left:50%;bottom:95px;transform:translateX(-50%);padding:8px 14px;border:1px solid #6a7d8b80;background:#071827d9;border-radius:5px;font-size:13px;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none }#notice.visible{opacity:1}
.overlay { position:absolute;z-index:5;inset:0;background:#050a13d9;display:grid;place-items:center;padding:18px;overflow:auto }.overlay.hidden{display:none}.card{width:min(520px,100%);padding:30px;border:1px solid #8396a351;background:linear-gradient(145deg,#11243a,#0b1728);box-shadow:0 25px 80px #0008;border-radius:12px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--gold)}h1{font-size:60px;letter-spacing:-.06em;margin:8px 0 0;line-height:1;color:var(--gold)}p{color:var(--muted);line-height:1.5}.setup{margin:23px 0;border-top:1px solid #ffffff22;padding-top:15px}.setup h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}.setup label{display:block;font-size:13px;color:var(--muted);margin:11px 0}.setup strong{float:right;color:var(--ink)}.setup input{display:block;width:100%;accent-color:var(--gold);margin:9px 0}.buttons{display:flex;gap:10px;align-items:center}.buttons button,.buttons a{border:1px solid var(--gold);background:var(--gold);padding:12px 16px;border-radius:5px;color:#0a1725;font-weight:900;text-decoration:none;font-size:13px}.buttons a{background:transparent;color:var(--gold)}.fine{font-size:11px;margin:19px 0 0}.fine a{color:var(--gold)}#report{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}#report div{background:#ffffff0a;padding:14px;border:1px solid #ffffff18;border-radius:5px}#report small{display:block;color:var(--muted);font-size:11px}#report b{font-size:25px}
.cad-chooser{font-size:12px;color:var(--muted)}.cad-chooser input{display:block;margin:6px 0;color:var(--ink);font-size:11px}.cad-status{font-size:11px;color:var(--muted);margin:4px 0 15px}
.clear-cad{background:none;border:0;color:var(--gold);font-size:11px;margin:-5px 0 14px;padding:0;text-decoration:underline}
.cad-input{display:flex;gap:8px;align-items:end;margin:13px 0}.cad-input label{flex:1;font-size:11px;color:var(--muted);min-width:0}.cad-input input{display:block;width:100%;background:#081827;border:1px solid #506475;color:var(--ink);padding:8px;border-radius:5px;margin-top:5px;font-size:11px}.cad-input button{background:var(--gold);color:#071827;border:0;border-radius:5px;padding:9px;font-size:10px;font-weight:900;white-space:nowrap}.cad-input button:disabled{opacity:.6}
.buttons button:disabled{opacity:.5;cursor:wait}
.setup{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:7px}.setup h2{grid-column:1/-1}.setup label{margin:0}.card{max-height:calc(100vh - 36px);overflow:auto}
@media(max-width:480px){.setup{grid-template-columns:1fr}}
.touch-controls{display:none;position:absolute;z-index:3;left:10px;right:10px;bottom:100px;justify-content:space-between;align-items:end;pointer-events:none}.touch-controls button{pointer-events:auto;touch-action:none;background:#14253bd9;border:1px solid #a1b9c3aa;border-radius:8px;color:var(--ink);min-width:44px;min-height:44px;font-size:17px;font-weight:900}.touch-drive{text-align:center}.touch-drive>div,.touch-actions>div{display:flex;gap:4px}.touch-drive>button{margin-bottom:4px}.touch-actions{display:grid;grid-template-columns:repeat(2,auto);gap:4px}.touch-actions button[data-key="shift"],.touch-actions button[data-key=" "]{font-size:10px}.touch-controls button:active,.touch-controls button.pressed{background:var(--gold);color:#071827}
@media(pointer:coarse){.touch-controls{display:flex}.hud-actions{display:none}}
@media(max-width:700px){.top{padding:8px;gap:10px}.brand img{width:45px}.brand{font-size:15px}.score{gap:3px}.score b{font-size:22px}.score small{font-size:9px}.time{min-width:55px}.time b{font-size:25px}.hud-button{padding:3px 7px}.bottom{padding:8px;align-items:flex-end}.hud-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}.hud-actions span{font-size:8px}.hud-actions b{font-size:10px}.card{padding:18px}h1{font-size:44px}}