/* Compact quiz layout for phones (2026-10-10): thinner top bar + shorter question header so all
   4 answer cards sit above the sticky bottom ad (includes/ads.php bfg_ad('banner', true)).
   Loaded last on question.php and play.php; desktop (>=800px) is untouched. */
@media (max-width: 799px) {
  body.bfg-question > .container, body.bfg-play > .container { padding-top: 8px !important; padding-bottom: 12px !important; margin-top: 0 !important; }

  body.bfg-question .topbar, body.bfg-play .topbar { padding: 5px 8px !important; gap: 10px !important; margin-bottom: 8px !important; border-radius: 14px !important; }
  body.bfg-question .back-btn, body.bfg-play .back-btn { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
  body.bfg-question .back-btn svg, body.bfg-play .back-btn svg { width: 15px; height: 15px; }
  body.bfg-question .progress-bar-wrap, body.bfg-play .progress-bar-wrap { height: 5px !important; margin: 0 4px !important; }
  body.bfg-question .counter, body.bfg-play .counter { padding: 4px 8px !important; font-size: 12px !important; border-radius: 9px !important; gap: 4px; }
  body.bfg-question .counter svg, body.bfg-play .counter svg { width: 12px; height: 12px; }

  body.bfg-question .question-hero, body.bfg-play .question-hero { padding: 20px 16px 21px !important; }
  body.bfg-question .question-spark, body.bfg-play .question-spark { display: none !important; }
  body.bfg-question .question-text, body.bfg-play .question-text { font-size: clamp(19px, 5.2vw, 24px) !important; line-height: 1.2 !important; margin: 0 auto 4px !important; }
  body.bfg-question .choose-label, body.bfg-play .choose-label { font-size: 11px !important; }

  body.bfg-question .options-grid, body.bfg-play .options-grid { padding: 12px !important; gap: 10px !important; }
  body.bfg-question .option-card, body.bfg-play .option-card { min-height: 0 !important; padding: 6px 6px 8px !important; gap: 5px !important; border-radius: 16px !important; }
  /* image shrinks on short screens so both rows of cards stay above the ~63px sticky ad */
  body.bfg-question .opt-img, body.bfg-play .opt-img {
    max-height: clamp(64px, calc((100vh - 284px) / 2 - 44px), 130px) !important;
    max-height: clamp(64px, calc((100dvh - 284px) / 2 - 44px), 130px) !important;
    border-radius: 11px !important;
  }
  body.bfg-question .opt-label, body.bfg-play .opt-label { font-size: 13px; line-height: 1.2; }
}