/* Brick Breaker — page chrome around the canvas.
   The canvas paints itself (see game.js); everything here is the frame, the HUD and the
   overlay. Colours come from the branding tokens so the page follows site light/dark, while
   the PLAYFIELD follows the game's own skin — those are two different things on purpose:
   a player can want a light page and a retro green screen. */

/* The overlay used to fill #bb-wrap, which also contains the mode and control buttons — so
   the start screen sat on top of them and they could not be clicked until the game began.
   The overlay belongs to the playfield, so the playfield gets its own positioned box and the
   buttons live outside it. */
#bb-stage {
  position: relative;
  display: block;
  max-width: 100%;
}

#bb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

#bb-canvas {
  display: block;
  border-radius: 10px;
  background: #0d1117;
  /* Without this the browser treats a bat drag as a page scroll and the game is unplayable
     on a phone — the single most common mobile-canvas bug. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  max-width: 100%;
}

html[data-bb-skin="retro"] #bb-canvas {
  border-radius: 4px;
  /* The dark bezel is what sells the handheld, and it is generic hardware styling —
     no maker's shape, badge or button layout is copied. */
  box-shadow: 0 0 0 8px #1d2a12, 0 0 0 11px #2c3d1c, 0 8px 22px rgba(0, 0, 0, 0.35);
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- HUD */

/* The canvas paints its own scoreboard, which is part of both skins. This copy exists so
   a screen reader has something to read — a <canvas> announces nothing — so it is removed
   from the visual flow rather than deleted. Painting both stacked the numbers twice and
   pushed the bat below the fold on a phone. */
#bb-hud {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--text-muted);
}

#bb-hud strong {
  color: var(--heading);
  font-weight: 700;
}

/* ---------------------------------------------------------------- controls */

#bb-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#bb-controls button {
  /* 44px minimum on the short side — a control smaller than a fingertip is a control
     people mis-tap, and these sit directly under a game they are playing with a thumb. */
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#bb-controls button:hover { border-color: var(--accent); }
#bb-controls button:active { transform: translateY(1px); }
#bb-controls button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- toast */

#bb-toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--heading);
  color: var(--surface);
  font-weight: 700;
  font-size: 0.85rem;
  pointer-events: none;
  animation: bb-pop 0.18s ease-out;
}

@keyframes bb-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------------------------------------------------------- overlay */

/* An id selector setting `display` beats the browser's own `[hidden] { display: none }`,
   so without this rule the overlay stays on screen after it is dismissed and silently eats
   every tap aimed at the playfield — the game looks started and responds to nothing. */
#bb-overlay[hidden],
#bb-toast[hidden] { display: none !important; }

#bb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.82);
  backdrop-filter: blur(3px);
  z-index: 3;
}

#bb-over-title {
  margin: 0;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  /* Fixed light text because the scrim behind it is always dark, in every theme and both
     skins. Pairing the foreground with the actual background beats inheriting a token that
     could resolve to dark-on-dark. */
  color: #ffffff;
}

#bb-over-sub {
  margin: 0;
  color: #c6d0dd;
  font-size: 0.95rem;
}

#bb-over-btn {
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-on-bg, #0d1117);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

#bb-over-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  #bb-toast { animation: none; }
  #bb-controls button { transition: none; }
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 600px) {
  #bb-wrap { gap: 8px; }
  #bb-hud { font-size: 0.82rem; gap: 4px 10px; }
  #bb-controls button { flex: 1 1 auto; padding: 0 12px; font-size: 0.9rem; }
  #bb-over-sub { font-size: 0.88rem; }
  /* The bezel eats real width on a narrow phone, where the playfield needs every pixel. */
  html[data-bb-skin="retro"] #bb-canvas {
    box-shadow: 0 0 0 5px #1d2a12, 0 0 0 7px #2c3d1c, 0 6px 16px rgba(0, 0, 0, 0.35);
  }
}

/* ---------------------------------------------------------------- modes */

/* Three modes get real buttons rather than a select, because the two extra ones are the
   reason to use this page over the ten others ranking for the same term — burying them in
   a dropdown hides the only thing that is different about it. */
#bb-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#bb-modes button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

#bb-modes button.is-on {
  background: var(--accent);
  /* Paired with the background it sits on, never a generic text token. */
  color: var(--accent-on-bg, #0d1117);
  border-color: var(--accent);
}

#bb-modes button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#bb-streak {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--success, #2f9e44);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
}

#bb-streak[hidden] { display: none !important; }

#bb-mode-note {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}