/* ============================================================
   responsive.css — Adaptation WEB & TABLETTE.
   Règle d'or : ce fichier n'utilise QUE des @media (min-width).
   Le CSS mobile de base (PWA installée sur téléphone) n'est JAMAIS
   modifié — un téléphone (largeur < 720px) ne voit aucune de ces
   règles. Chargé en DERNIER pour surcharger proprement.
   Breakpoints : 720px (tablette), 1024px (desktop), 1440px (large).
   ============================================================ */

/* ============================================================
   TABLETTE & + (≥ 720px)
   Le contenu ne s'étire plus en pleine largeur : on le CENTRE dans
   une colonne confortable. La topbar reste une barre pleine largeur
   mais son contenu s'aligne sur la colonne ; la bottom-nav centre
   ses onglets.
   ============================================================ */
@media (min-width: 720px) {

  /* ---- SHELL ACCUEIL (index.html › body.home-page) ---- */
  body.home-page main.home-wrap {
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
  }
  body.home-page .topbar {
    padding-inline: max(20px, calc((100% - 720px) / 2));
  }
  body.home-page .bottom-nav {
    padding-inline: max(0px, calc((100% - 560px) / 2));
  }
  /* sections bridées à 430px (pensées « téléphone ») -> largeur de la colonne */
  #sec-stats, #sec-defis, #sec-reglages { max-width: none; }

  /* ---- JEU JOUEUR (play.html › body.dotted-bg) ---- */
  body.dotted-bg .q-screen {
    max-width: 660px;
    margin-inline: auto;
    width: 100%;
  }
  body.dotted-bg .topbar {
    padding-inline: max(18px, calc((100% - 660px) / 2));
  }
}

/* ============================================================
   DESKTOP (≥ 1024px) — VRAI TABLEAU DE BORD WEB
   Ici on ne « centre pas une colonne mobile » : on restructure.
   • La bottom-nav devient un RAIL VERTICAL à gauche.
   • Header pleine largeur en haut.
   • Contenu à droite du rail, en grille (cartes à taille maîtrisée,
     parties récentes en grille qui remplit l'espace).
   ============================================================ */
@media (min-width: 1024px) {

  /* ---------- RAIL DE NAVIGATION (ex bottom-nav) ---------- */
  body.home-page .bottom-nav {
    top: 60px; left: 0; bottom: 0;
    width: 214px; height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 18px 12px;
    border-top: 0;
    border-right: 4px solid var(--ink);
  }
  body.home-page .bottom-nav .nav-item { width: 100%; flex: 0 0 auto; }
  body.home-page .bottom-nav .nav-inner {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    width: 100%;
  }
  body.home-page .bottom-nav .nav-item .ico,
  body.home-page .bottom-nav .nav-item .ico img { width: 22px; height: 22px; }
  body.home-page .bottom-nav .nav-item .lbl { font-size: 13px; letter-spacing: .5px; }

  /* ---------- HEADER pleine largeur ---------- */
  body.home-page .topbar { padding-inline: 26px; }

  /* ---------- ZONE DE CONTENU (à droite du rail) ----------
     main est un flex-item qui, en width:auto, se rétrécit à son
     contenu (~660px) et laisse un immense vide à droite. On lui
     donne une largeur EXPLICITE pour qu'il remplisse toute la zone
     à droite du rail ; le contenu interne se recentre ensuite via
     max-width + margin-inline:auto. */
  body.home-page main.home-wrap {
    margin-left: 214px;
    box-sizing: border-box;
    width: calc(100% - 214px);
    max-width: none;
    padding: 10px 44px 64px;
  }
  /* la vue active se cadre dans une largeur de tableau de bord */
  #sec-accueil .home-v4 .body-scroll,
  #sec-defis, #sec-stats, #sec-classement, #sec-historique, #sec-reglages,
  #sec-profil, #sec-rangs {
    max-width: 1120px;
    margin-inline: auto;
  }

  /* ---- BANDEAU BIENVENUE : nom à gauche, winrate à droite ---- */
  #sec-accueil .bienvenue { align-items: center; }
  #sec-accueil .bienvenue .name { font-size: 60px; line-height: 62px; }

  /* ---- CRÉER / REJOINDRE : cartes à TAILLE MAÎTRISÉE (plus étirées) ---- */
  #sec-accueil .cta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 330px));
    justify-content: start;
    gap: 22px;
  }

  /* ---- ENCORE CHAUD : parties récentes en GRILLE qui remplit la largeur ---- */
  #sec-accueil .recent-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    overflow: visible;
  }
  #sec-accueil .recent-row .recent-card { flex: initial; width: auto; }

  /* ---- STATS : 3 tuiles à taille maîtrisée ---- */
  #sec-accueil .stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 250px));
    justify-content: start;
    gap: 16px;
  }

  /* ---- DÉFIS : cartes en grille 2 colonnes ---- */
  #sec-defis .ds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    align-items: start;
  }

  /* ---------- JEU JOUEUR (body.dotted-bg, PAS de rail) ---------- */
  body.dotted-bg .q-screen { max-width: 720px; }
  body.dotted-bg .topbar { padding-inline: max(24px, calc((100% - 720px) / 2)); }
  body.dotted-bg .q-card .bd { font-size: 25px; line-height: 1.2; }
  body.dotted-bg .answer-zone .opt .bd { padding: 15px 14px; font-size: 17px; }
  body.dotted-bg .answer-zone .text-ans { font-size: 17px; padding: 14px 16px; }
  body.dotted-bg .answer-zone .btn.block { font-size: 18px; }
}

/* ============================================================
   GRAND ÉCRAN (≥ 1440px) — on laisse le tableau de bord respirer
   mais on plafonne la largeur de contenu pour rester lisible.
   ============================================================ */
@media (min-width: 1440px) {
  #sec-accueil .home-v4 .body-scroll,
  #sec-defis, #sec-stats, #sec-classement, #sec-historique, #sec-reglages,
  #sec-profil, #sec-rangs { max-width: 1200px; }
}

/* ============================================================
   PHASE 2 — DENSITÉ PAR ÉCRAN
   Le mobile empile en 1 (parfois 2) colonne(s) ; sur tablette/desktop
   ces listes et grilles doivent REMPLIR la largeur disponible plutôt
   que rester une colonne étroite perdue au milieu du tableau de bord.
   Toujours en @media (min-width) — le mobile de base ne change pas.
   ============================================================ */

/* ---- TABLETTE (≥ 720px) : les listes mono-colonne passent en 2 ---- */
@media (min-width: 720px) {
  /* Classement : lignes de rang côte à côte */
  #sec-classement .cl-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Historique : cartes de partie en 2 colonnes */
  #sec-historique .hlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }
  /* Mes Quiz : cartes en 2 colonnes */
  #sec-quiz .quiz-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  /* Réglages : les catégories en 2 colonnes */
  #sec-reglages .cat-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
}

/* ---- DESKTOP (≥ 1024px) : on densifie pour remplir ~1120px ---- */
@media (min-width: 1024px) {

  /* STATS ------------------------------------------------------ */
  /* CUMUL : 4 tuiles alignées ; la carte PRÉCISION (grid-column:1/-1)
     s'étire alors sur toute la largeur automatiquement. */
  #sec-stats .stats { grid-template-columns: repeat(4, 1fr); }
  /* Par mode & par catégorie : autant de colonnes que la place permet */
  #sec-stats .modes-row {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
  /* Badges : petite grille dense */
  #sec-stats .badges-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* PROFIL ----------------------------------------------------- */
  /* 6 statcards sur une seule ligne */
  #sec-profil .pf2-stats { grid-template-columns: repeat(6, 1fr); }
  /* Stats par mode : 4 colonnes */
  #sec-profil .mgrid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  /* Derniers badges : grille dense */
  #sec-profil .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* CLASSEMENT : liste sur 2 colonnes (les lignes sont larges) --- */
  #sec-classement .cl-list { grid-template-columns: 1fr 1fr; }

  /* HISTORIQUE : reste en 2 colonnes (lignes larges) ------------ */

  /* BOUTIQUE : la grille d'articles remplit la largeur ---------- */
  #sec-credits .shop {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  /* DÉFIS : 3 colonnes sur grand tableau de bord --------------- */
  #sec-defis .ds { grid-template-columns: repeat(3, 1fr); }

  /* RANGS : l'échelle (timeline verticale) reste une colonne mais
     on la recentre pour ne pas la coller au bord gauche. */
  #sec-rangs .ladder,
  #sec-rangs .now { max-width: 560px; margin-inline: auto; }
}

/* ---- GRAND ÉCRAN (≥ 1440px) : un cran de densité en plus ---- */
@media (min-width: 1440px) {
  #sec-credits .shop {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}