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; }

.dpad      { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ctrl-row-h { display: flex; gap: 4px; }

@media (max-width: 520px) {
  h1, .footer { display: none; }

  .wrapper   { gap: 8px; padding: 12px 12px max(12px, env(safe-area-inset-bottom, 12px)); }
  .game-area { gap: 8px; }

  /* Square canvas: remaining vertical space after nav + sidebar + dpad + paddings */
  canvas#board {
    width:  min(calc(100vw - 24px), calc(100dvh - 286px));
    height: min(calc(100vw - 24px), calc(100dvh - 286px));
  }

  /* Compact stats row below canvas */
  .sidebar .panel {
    flex: 1 0 60px;
    min-width: 60px;
    max-width: none;
    padding: 3px 6px;
    gap: 0;
  }
  .sidebar .panel-val   { font-size: 0.9rem; }
  .sidebar .panel-label { font-size: 0.42rem; }
  .sidebar .btn {
    width: auto !important;
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.48rem;
  }

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