:root {
  --accent: #9ef0ff;
  --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);}

html[data-theme='light'] #board {
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1));
}
.hud{display:grid; gap:10px; min-width:220px}
.game-name{display:flex;justify-content:flex-end}
.game-title{display:flex;justify-content:flex-end;gap:4px;margin-bottom:14px}
.game-title .t-block{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--c);color:#001018;font-weight:800;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.3);transform:translateY(-40px);opacity:0;animation:drop .4s ease forwards}
.game-title .t-block:nth-child(n){animation-delay:calc(var(--i)*0.07s)}
@keyframes drop{to{transform:translateY(0);opacity:1}}
.stats-next{display:flex; gap:10px; align-items:stretch}
.stats{display:grid; gap:10px; flex:1}
.panel.next{display:flex; flex-direction:column; min-width:120px}
.panel.next canvas{flex:1; width:100%; height:100%}
.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)}
.panel>.label{color:var(--muted); margin-bottom:8px; text-align:left}
.kv div:last-child{display:inline-block}
.buttons{display:flex; gap:10px; flex-wrap:wrap}
.hud .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 }
.hud .buttons button:hover{transform: translateY(-1px)} .hud .buttons button:active{transform: translateY(1px)} .hud .buttons button.secondary{background:linear-gradient(180deg,#cfd7ff,#b7c4ff); color:#0d1229}
.help{color:var(--muted); font-size:13px}
.legend{display:flex; flex-direction:column; gap:8px}
.legend div{display:flex; align-items:center; gap:6px}
.legend kbd{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 8px; border-radius:8px; box-shadow:inset 0 -1px rgba(0,0,0,.2)}
.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.glow{filter: drop-shadow(0 0 18px rgba(158,240,255,.6));}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent)}

/* Inline touch controls (mobile) */
.touch-inline{ display:none; margin-top:12px; }
.touch-inline .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tbtn{ user-select:none; -webkit-user-select:none; touch-action:manipulation; padding:12px 10px; border-radius:12px; font-weight:800; letter-spacing:.3px; border:0; cursor:pointer; background:linear-gradient(180deg, var(--accent), rgba(0,0,0,.12)); color:#001018; box-shadow:0 6px 18px rgba(0,0,0,.30); white-space:nowrap }

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