:root {
--road: #222;
--lane: #bbb;
--car: #28a745;
--enemy: #dc3545;
--coin: #f0c419;
--ui: #0ea5e9;
--bg: #0b1020;
--text: #f8fafc;
}
* { box-sizing: border-box; }
html, body {
margin: 0; height: 100%; background: radial-gradient(100% 100% at 50% 0%, #121a34, var(--bg));
color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}
.wrap { display:flex; align-items:center; justify-content:center; height:100%; padding:16px; }
.gameShell { position:relative; width:min(420px, 100%); aspect-ratio: 9/16; border-radius:24px; box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.06);
overflow:hidden; background:#111; }
canvas { width:100%; height:100%; display:block; background: var(--road); }
.hud { position:absolute; inset:0; pointer-events:none; }
.topBar { position:absolute; top:8px; left:8px; right:8px; display:flex; gap:8px; justify-content:space-between; align-items:center; }
.pill { pointer-events:auto; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.1); color:var(--text); padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.btn { cursor:pointer; user-select:none; transition:.2s transform ease; }
.btn:active { transform: translateY(1px) scale(.98); }
.centerOverlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.card { pointer-events:auto; width:86%; max-width:360px; background: rgba(10,14,30,.9); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:20px; text-align:center; box-shadow: 0 10px 40px rgba(0,0,0,.5); }


h1 { margin:0 0 8px; font-size:22px; }
p { margin:4px 0; opacity:.9; }
.actions { display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.primary { background: linear-gradient(135deg, #22c55e, #16a34a); border:none; padding:10px 16px; color:white; border-radius:12px; font-weight:700; cursor:pointer; }
.secondary { background: transparent; border:1px solid rgba(255,255,255,.2); color:#e2e8f0; padding:10px 16px; border-radius:12px; cursor:pointer; }
.touchCtrls { position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:space-between; padding:0 14px; gap:14px; }
.padBtn { pointer-events:auto; flex:1; padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); text-align:center; font-weight:800; }
.muted { opacity:.7 }
@media (hover:hover) { .padBtn { display:none; } }