: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)}
[data-theme='light'] .frame{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)); border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 30px rgba(15,23,42,.12)}
.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)}
[data-theme='light'] .panel{ background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); border:1px solid rgba(15,23,42,.08)}
canvas{display:block; border-radius:14px;}
[data-theme='dark'] canvas{ background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 10px 30px rgba(0,0,0,.2);}
[data-theme='light'] canvas{ background:linear-gradient(180deg, #e4f1ff, #f6fbff); box-shadow: inset 0 0 0 1px rgba(15,23,42,.08), inset 0 12px 30px rgba(15,23,42,.1);}
.mobile-title{display:none}

.hud{display:grid; gap:10px; min-width:240px}
.game-name{display:flex;justify-content:flex-end}
.game-title{display:flex;justify-content:flex-end;gap:6px;margin-bottom:14px}
.game-title .t-block{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  font-weight:800;font-size:18px;color:#0f172a;background:linear-gradient(180deg, rgba(255,255,255,.9), var(--bg,#94a3b8));
  border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35);
  transform:translateY(60px) rotate(-5deg);opacity:0;
  animation:rise .55s ease-out forwards, float 3s ease-in-out infinite; animation-delay:calc(var(--i)*0.06s),calc(var(--i)*0.06s + .5s)}
.game-title .t-block::after{content:"";position:absolute;inset:6px; border-radius:6px; border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.2), transparent 60%);
}
[data-theme='dark'] .game-title .t-block{color:#0b1220; box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.18)}
[data-theme='dark'] .game-title .t-block::after{border-color:rgba(255,255,255,.18)}
.game-title .t-block .letter{position:relative;z-index:1; text-shadow:0 1px 0 rgba(255,255,255,.6)}
@keyframes rise{to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.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)}
[data-theme='light'] .kv{ background:rgba(148,163,184,.12); border:1px solid rgba(15,23,42,.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}
.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}
.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)}}
.pulse{animation:pulse .55s ease}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.25)}70%{transform:scale(0.95)}100%{transform:scale(1)}}
@media (max-width: 768px){
  header{display:none}
  .board-card{grid-template-columns:1fr}
  .hud{min-width:unset}
  .legend{display:none}
  .mobile-title{display:block;padding:12px 16px}
  .mobile-title .game-title{justify-content:center}
  .hud .game-name{display:none}
  .buttons{justify-content:center;flex-wrap:nowrap}
  canvas{width:100%;height:auto}
}