/* ============================================================
   host-responsive.css — Adaptation WEB & TABLETTE des écrans HÔTE.
   Même règle d'or que responsive.css : QUE des @media (min-width).
   Le host de base (téléphone qui anime la partie) n'est JAMAIS
   modifié — un écran < 720px ne voit aucune de ces règles.
   Chargé en DERNIER dans host.html pour surcharger proprement.
   host.css est en desktop-first (base étroite + @media max-width) :
   sa "base" est une colonne centrée ~560-720px, d'où l'immense vide
   sur grand écran. On l'élargit et on densifie ici.
   Breakpoints : 720px (tablette), 1024px (desktop), 1440px (large).
   ============================================================ */

/* ---------- TABLETTE (≥ 720px) : on desserre un peu ---------- */
@media (min-width: 720px) {
  #screen-format .cr-wrap, #screen-recap .cr-wrap, #screen-niveau .cr-wrap,
  .cr-foot, .cr-prog { max-width: 700px; }
  .lobby-body { max-width: 720px; }
}

/* ============================================================
   DESKTOP (≥ 1024px) — on remplit l'écran
   ============================================================ */
@media (min-width: 1024px) {

  /* ---------- FLUX CRÉATION (niveau / format / récap) ---------- */
  #screen-format .cr-wrap, #screen-recap .cr-wrap, #screen-niveau .cr-wrap,
  .cr-foot, .cr-prog { max-width: 1000px; }
  /* niveau : 6 difficultés → 3 colonnes ; format : 9 formats → 3 colonnes */
  .dif2-grid, .fmt2-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---------- PACKS (plein écran → on cadre + densifie) ---------- */
  #screen-packs .body-scroll,
  #screen-packs .cf-top,
  #screen-packs .cf-footer,
  #screen-packs .pk-tabs {
    max-width: 1120px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

  /* ---------- LOBBY (salon) ----------
     Colonne centrée confortable (pas des barres ultra-larges vides) :
     code + QR restent lisibles, le mur de joueurs se remplit en grille. */
  .lobby-body { max-width: 820px; }
  .lobby-footer .lcta { max-width: 820px; margin-inline: auto; }
  /* mur de joueurs : grille qui remplit la largeur au lieu d'une colonne */
  .players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
  }

  /* ---------- QUESTION (écran de jeu « grand écran ») ---------- */
  #screen-question .type-pill,
  #screen-question .q-card,
  #screen-question .present-media,
  #screen-question .answer-zone,
  #screen-question .gh-foot {
    max-width: 1180px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
  }
  /* question plus grande, comme un vrai grand écran */
  #screen-question .q-card .bd { font-size: 34px; line-height: 1.18; }
  /* réponses en grille 2×2 qui remplit la largeur */
  #screen-question .answer-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
  }
  #screen-question .answer-zone .opt .bd { font-size: 22px; }

  /* ---------- REVEAL / CLASSEMENT INTERMÉDIAIRE ---------- */
  .lb-hero, .lb-list, .lb-bottom {
    max-width: 940px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .lb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }

  /* ---------- PODIUM (fin de partie) ---------- */
  .res-hero, .res-scroll, .res-foot {
    max-width: 1040px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- GRAND ÉCRAN (≥ 1440px) : un cran de plus ---------- */
@media (min-width: 1440px) {
  #screen-question .type-pill,
  #screen-question .q-card,
  #screen-question .present-media,
  #screen-question .answer-zone,
  #screen-question .gh-foot { max-width: 1320px; }
  #screen-question .q-card .bd { font-size: 40px; }
}