h1 { font-size: clamp(1rem, 4vw, 1.8rem); }

.wrapper   { gap: 14px; }
.game-area { gap: 14px; }
.sidebar   { gap: 12px; }
.panel     { padding: 8px 10px; gap: 4px; }
.overlay   { gap: 14px; background: rgba(5,5,16,0.88); }

.ctrl-btn { font-size: 1.4rem; width: 70px; height: 70px; }

/* ── Mobile portrait layout ───────────────────────────────── */
@media (max-width: 520px) {
  h1      { display: none; }
  .footer { display: none; }

  .ctrl-btn { width: 60px; height: 60px; font-size: 1.2rem; }

  /* dvh excludes browser chrome — prevents bottom button cutoff */
  canvas#board {
    height: min(52dvh, 560px);
    width:  calc(min(52dvh, 560px) * 400 / 560);
  }
}