:root {
  --bg: var(--ui-bg);
  --bg-soft: var(--ui-bg-soft);
  --surface: var(--ui-surface);
  --border: var(--ui-border);
  --text: var(--ui-text);
 }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; color: var(--text); font-family: "Sora", "Segoe UI", sans-serif; background: linear-gradient(145deg, var(--bg), var(--bg-soft)); }
.layout { width: min(760px, calc(100% - 1rem)); display: grid; gap: 1rem; }
.top, .game-panel { border: 1px solid var(--border); background: var(--surface); border-radius: 18px; padding: 0.9rem; }
.top { display: grid; gap: 0.45rem; }
h1,#stats,#highscore{margin:0;} #highscore{color:#bfdbfe;font-size:.95rem}
.game-panel{display:grid;gap:.8rem;justify-items:center}
canvas{width:min(90vw,480px);height:auto;border-radius:12px;border:1px solid var(--border);background:#041021}
button{border:1px solid rgba(56,189,248,.5);border-radius:999px;background:rgba(56,189,248,.15);color:var(--text);padding:.5rem .9rem;cursor:pointer}