/* ===========================================================
   Breakout — game-specific styles only.
   Chrome (body, h1, button, #status, .hint, .score-box) all
   come from shared.css. Colours use shared tokens so the game
   tracks light / dark mode automatically.
   =========================================================== */

/* Tighten the vertical rhythm a little versus the shared default. */
body { gap: 14px; }

/* Row of Score / Lives / Best chips. */
.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Playfield wrapper — clamps width and keeps the canvas centred. */
#stage {
  width: 100%;
  max-width: 400px;          /* canvas is taller than wide      */
  display: flex;
  justify-content: center;
}

/* The canvas itself. Internal resolution is fixed (set in HTML/JS);
   CSS just scales it responsively while preserving aspect ratio. */
#board {
  width: 100%;
  height: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px var(--shadow);
  touch-action: none;        /* let us handle drags ourselves   */
  display: block;
  cursor: pointer;
}

/* On-screen direction pad for phones / focus-less iframes. */
#pad {
  display: flex;
  gap: 16px;
}
.pad-btn {
  width: 84px;
  padding: 14px 0;
  font-size: 1.4rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px var(--shadow);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.pad-btn:hover { background: var(--surface-3); opacity: 1; }
.pad-btn:active { background: var(--accent); color: var(--accent-text); }

/* On a narrow phone, keep everything comfortably in view. */
@media (max-width: 420px) {
  .pad-btn { width: 40%; }
}