/* Shared phone layout for every brain game.
 *
 * Why this file exists: each game carries its own <style>, so the same fix was being
 * pasted per game. Measured on iPhone 14 (390x664), the chrome above the board — the
 * back link, the sound toggles, Help — was taking roughly 180px, more than a quarter of
 * the screen, before the game even started. That is what pushed cards, letter grids and
 * action buttons below the fold across a dozen games.
 *
 * This file only reclaims that space. Anything game-specific (a pinned action row, a
 * scrollable bid grid) stays in that game's own <style>, where it can be reasoned about
 * next to the markup it applies to.
 */
@media (max-width: 700px) {
  /* The crumb was a full-width button at 19px. It is a way back, not a call to action. */
  .crumbs { margin: 4px 0 6px !important; }
  .crumbs a { font-size: 15px !important; padding: 7px 14px !important; }

  /* Sound/music/help toggles: three chips that were each claiming a row. */
  .snd { font-size: 14px !important; padding: 7px 12px !important; min-height: 0 !important; }

  /* Tighten the page gutter — on a 390px screen every 8px is a card column. */
  .wrap { padding-left: 12px !important; padding-right: 12px !important; }

  /* Stat strips (Pieces / Swaps / Best, scores, timers) sit above the board and were
     sized for a desktop row. */
  .stats, .statrow, .gstats { gap: 8px !important; font-size: 14px !important; }
}