/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  #house-col { display: none; }
}

@media (max-width: 720px) {
  html { height: auto; }
  body { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
  #app { height: auto; min-height: 100vh; }
  #main { flex: none; flex-direction: column; overflow: visible; min-height: 0; }
  #game-col { overflow-y: visible; padding: 20px 16px; }
  #sidebar {
    width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  #house-col {
    display: block;
    width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  #house-preview-btn { max-width: 300px; margin: 0 auto; }

  /* Topbar: compact the rigid items (logo/coins/account) and let #xp-wrap
     actually shrink (its desktop min-width made it overflow #tb-level and
     paint under the coin counter on narrow screens). */
  #topbar { gap: 10px; padding: 8px 12px; }
  #tb-logo { width: 36px; height: 36px; }
  #tb-level { gap: 6px; }
  #xp-wrap { max-width: 140px; min-width: 0; }
  #tb-lvl b { font-size: 14px; }
  #tb-coins { font-size: 15px; }
  #tb-auth { margin-left: 0; }
  .tb-auth-btn { padding: 5px 8px; font-size: 12px; }
  .tb-account { max-width: 90px; }

  /* Domain progress: one long nowrap line otherwise forces horizontal
     overflow — wrap it on its own full-width row under the selects. */
  /* Each select on its own row whatever it contains, and two lines reserved for
     the progress line (filled after the data loads) — no layout shift on load. */
  .mb-select { flex: 1 1 100%; width: auto; }
  /* Stacked layout: the shop/house sit BELOW the card — hold roughly a card's
     height while loading so they don't jump down when it appears (CLS). */
  #loading-msg { min-height: 380px; box-sizing: border-box; }
  .mb-next { white-space: normal; flex-basis: 100%; margin-left: 0; line-height: 1.7; min-height: 5.1em; font-size: 12px; }  /* 3 lines reserved */
  /* ≥ 12px on phones (legibility; Lighthouse 'font-size'). */
  .si-desc, .q-prompt { font-size: 12px; }
  .q-text { font-size: 21px; }
  #card { padding: 20px; max-width: none; }
  #combo-widget .c-word { display: none; }
}