h1 { font-size: clamp(1.2rem, 4vw, 2rem); }

.sidebar { min-width: 110px; }
.panel-label { font-size: 0.55rem; }
.panel-val { font-size: 1.3rem; }

canvas#board { box-shadow: 0 0 20px rgba(0,245,255,0.15), inset 0 0 20px rgba(0,0,0,0.5); }
canvas#next  { display: block; }

.overlay-title { font-size: 1.2rem; }

.mobile-controls { flex-direction: column; }
.ctrl-row { display: flex; gap: 8px; }
.ctrl-btn { font-size: 1rem; width: 52px; height: 52px; }
.ctrl-btn.wide { width: 112px; }

/* ── Mobile portrait layout ───────────────────────────────── */
@media (max-width: 520px) {
  /* Hide non-essential elements to free vertical space */
  h1     { display: none; }
  .footer { display: none; }

  /* Shrink controls to 44px */
  .ctrl-btn      { width: 44px; height: 44px; font-size: 0.85rem; }
  .ctrl-btn.wide { width: 96px; }

  .sidebar { min-width: unset; }
  .sidebar canvas#next { width: 60px; height: 50px; }

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