:root {
  --accent: #8ef6b6;
  --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);}
.mobile-title{display:none}

.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:2px;margin-bottom:14px}
.game-title .t-bird{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  font-weight:800;font-size:16px;color:var(--text);background:#fbbf24;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.3);
  transform:translateY(60px);opacity:0;
  animation:fly .5s ease-out forwards, float 3s ease-in-out infinite;
  animation-delay:calc(var(--i)*0.08s),calc(var(--i)*0.08s + .5s)}
.game-title .t-bird::before,
.game-title .t-bird::after{content:"";position:absolute;top:8px;width:14px;height:9px;background:#fff;border-radius:50%;
  animation:flap 1s ease-in-out infinite}
.game-title .t-bird::before{right:100%;transform-origin:100% 50%}
.game-title .t-bird::after{left:100%;transform-origin:0 50%}
.game-title .t-letter{display:flex;align-items:center;font-weight:800;font-size:20px;color:var(--text);
  transform:translateY(60px);opacity:0;
  animation:fly .5s ease-out forwards, float 3s ease-in-out infinite;
  animation-delay:calc(var(--i)*0.08s),calc(var(--i)*0.08s + .5s)}
.game-title .space{display:block;width:12px}
@keyframes fly{to{transform:translateY(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes flap{0%,100%{transform:rotate(0deg)}50%{transform:rotate(25deg)}}
.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)}
  .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)}}
@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}
}