: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:.9rem}.top{display:grid;gap:.45rem}
h1,#status,#highscore{margin:0}#highscore{color:#bfdbfe;font-size:.95rem}
.game-panel{display:grid;gap:.8rem;justify-items:center}
.pads{display:grid;grid-template-columns:repeat(2,120px);gap:.6rem}
.pad{width:120px;height:120px;border-radius:14px;border:1px solid var(--border);cursor:pointer;transition:transform .12s ease,filter .12s ease}
.pad[data-pad="0"]{background:#0ea5e9}.pad[data-pad="1"]{background:#22c55e}.pad[data-pad="2"]{background:#f97316}.pad[data-pad="3"]{background:#a855f7}
.pad.active{filter:brightness(1.5);transform:scale(1.04)}
#startBtn{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}