/* Mobile-first override voor smalle schermen. Alle component-files
   houden de desktop/tablet styling; deze file overschrijft selectief. */

@media (max-width: 500px) {
  .container     { padding: 24px 16px 40px; }
  /* Home-screen compacter aan onderkant op mobiel (geen ongewenste witruimte). */
  #home-screen .container { padding-bottom: 20px; }
  /* Home-header compacter op smal scherm. */
  .home-header   { padding: 10px 14px; min-height: 48px; }
  .home-header-brand-text { font-size: 18px; }
  .account-pill  { padding: 6px 12px; font-size: 13px; max-width: 140px; }
  .form          { padding: 22px 18px; }

  .game-header { padding: 10px 14px; gap: 8px; }
  .kid-badge   { font-size: 15px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  /* Pill mag inkrimpen + ellipsis op mobiel. max-width:100% (i.p.v. 32vw)
     zodat 'ie NOOIT breder wordt dan de flex-gekrompen kid-badge — anders
     overlapt een lange boek-titel het scoreboard. */
  .groep-pill  { max-width: 100%; font-size: 11px; }
  .scoreboard  { gap: 14px; }
  .score-value { font-size: 22px; }

  .game-main   { padding: 16px 10px 24px; }
  .status-area { margin-top: 16px; gap: 10px; }
  .mic-indicator { width: 68px; height: 68px; }
  .mic-icon      { width: 30px; height: 30px; }
  .word-stage    { padding: 24px 16px; min-height: 120px; }
  .status-text   { font-size: 18px; }

  body.mode-sentences .word-stage {
    padding: 24px 16px;
    min-height: 140px;
  }
  .word.word-sentence {
    font-size: clamp(22px, 6vw, 38px);
    line-height: 1.3;
  }

  .btn-large { font-size: 20px; padding: 14px 28px; }
  /* Mobiel: Pauze + Stop als ronde SVG-icon knoppen naast elkaar. Tekst-label
     verbergen, SVG-icoon tonen, perfect tap-target (42×42 = boven 44px Apple-
     gids met box-shadow grow). Tap-feedback via :active scale-down. */
  .game-actions {
    flex-direction: row;
    gap: 8px;
  }
  .game-actions .btn-pause,
  .game-actions .btn-stop {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 150ms ease, box-shadow 150ms ease;
    font-size: 0;   /* kill any inherited text-sizing zodat alleen SVG telt */
  }
  .game-actions .btn-pause:active,
  .game-actions .btn-stop:active {
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  .game-actions .btn-pause .btn-label,
  .game-actions .btn-stop  .btn-label { display: none; }
  .game-actions .btn-pause .btn-icon,
  .game-actions .btn-stop  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  /* SVG inherit color van de button (currentColor in svg fill). */
}