*{box-sizing:border-box}html,body{height:100%;margin:0}
:root{
  --bg:#0f172a; --fg:#e5e7eb; --accent:#f59e0b; --accent-2:#fbbf24;
  --card:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
body{
  background: radial-gradient(1000px 600px at 50% -20%, #1f2937 0%, #0b1222 60%), var(--bg);
  color:var(--fg);
  font: 500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  display:grid; place-items:center;
}
.wrap{position:relative; width:min(96vw, 520px);}
#game{width:100%; height:auto; display:block; border:1px solid var(--stroke); background: linear-gradient(#7ec9ff, #b8ecff 40%, #c7f7ff 50%, #92e3ff 65%, #52d3ff 80%, #25b6ff 100%); border-radius:12px; box-shadow:var(--shadow);}
.hud{position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:10px; pointer-events:none}
.hud .score{margin-right:auto; font-weight:800; font-size:40px; text-shadow:0 2px 0 rgba(0,0,0,.25)}
.hud .best{opacity:.8; font-weight:700}
.hud .btn{pointer-events:auto; background:var(--card); border:1px solid var(--stroke); color:var(--fg); padding:6px 10px; border-radius:8px; cursor:pointer}
.overlay{position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45);}
.panel{background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:22px; width:min(92%, 420px); text-align:center; box-shadow:var(--shadow)}
.panel h1{margin:0 0 8px; font-size:34px; letter-spacing:.3px}
.panel h1 span{color:var(--accent)}
.panel .actions{margin:12px 0 4px}
.panel .cta{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#111827; font-weight:900; border:none; padding:12px 18px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow)}
.panel .tiny{opacity:.8; font-size:13px; margin-top:8px}
code{background:rgba(0,0,0,.3); padding:2px 6px; border-radius:6px}
@media (max-width:520px){ .hud .score{font-size:34px} }