:root {
  --accent: #ffd580;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
}

body {
  background:
              radial-gradient(900px 500px at 120% -20%, #123 0%, transparent 60%),
              linear-gradient(160deg, var(--bg-from), var(--bg-to));
}

.wrap{display:flex; justify-content:center; padding:16px 24px}
.frame{ width:min(100%,1100px); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06)); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 24px; display:flex; justify-content:center; border:1px solid rgba(255,255,255,.08)}
.board-card{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.panel{padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)); border-radius:var(--radius); border:1px solid rgba(255,255,255,.08)}
canvas{display:block; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.02)); border-radius:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 10px 30px rgba(0,0,0,.2);}

.hud{display:grid; gap:10px; min-width:220px}
.game-name{display:flex;justify-content:flex-end}
.game-title{font-weight:800; font-size:24px;}
.stats{display:grid; gap:10px}
.kv{display:flex; align-items:center; justify-content:space-between; font-variant-numeric: tabular-nums; padding:10px 12px;border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.kv .label{color:var(--muted)}
.buttons{display:flex; gap:10px; flex-wrap:wrap}
.buttons button{ appearance:none; border:0; cursor:pointer; padding:12px 14px; border-radius:12px; font-weight:700; letter-spacing:.3px;
      background:linear-gradient(180deg, var(--accent), rgba(0,0,0,.15)); color:#001018; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .06s ease-in-out }
.buttons button:hover{transform: translateY(-1px)}
.buttons button:active{transform: translateY(1px)}
.help{color:var(--muted); font-size:13px}

@media (pointer:coarse){
  header{display:none}
  .board-card{grid-template-columns:1fr}
  .hud{min-width:unset}
}