/* ===== Trois colonnes : fiche à GAUCHE, questions au CENTRE, duel à DROITE.
   Le duel repassait sous la fiche dès qu'on descendait sous 1360px : les deux
   panneaux s'empilaient à gauche et l'écran penchait. Maintenant les trois
   colonnes tiennent dès qu'on quitte le mobile, chacune à sa place. ===== */
.game-layout{
  max-width:var(--wrap-large, 1760px); margin:0 auto;
  padding:clamp(14px,2.6vw,26px) clamp(12px,3vw,26px) 90px;
  display:grid; gap:clamp(14px,2.4vw,26px);
  align-items:start;
  /* mobile : la fiche, la question, puis le duel */
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"fiche" "stage" "duel";
}
.stage{ grid-area:stage; min-width:0; }
.sheet-col{ grid-area:fiche; min-width:0; }
.duel-col{ grid-area:duel; min-width:0; }

/* Ordinateur : les trois colonnes côte à côte, fiche à gauche, duel à droite. */
@media (min-width:900px){
  .game-layout{
    gap:clamp(12px,1.6vw,20px);
    grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,240px);
    grid-template-areas:"fiche stage duel";
  }
}
/* Écran large : on rend leur aisance aux deux panneaux latéraux. */
@media (min-width:1180px){
  .game-layout{
    grid-template-columns:minmax(0,384px) minmax(0,1fr) minmax(0,264px);
  }
}
@media (min-width:1440px){
  .game-layout{
    grid-template-columns:minmax(0,384px) minmax(0,1fr) minmax(0,320px);
  }
}

/* mini-HUD collant sur mobile */
.hud{
  display:none; position:sticky; top:0; z-index:20;
  gap:.5em; padding:.55em .8em; margin:-8px -12px 12px;
  background:rgba(11,11,18,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hud-i{ display:flex; align-items:center; gap:.35em; font-size:var(--fs-sm); font-weight:700; font-family:var(--f-title); }
.hud-i span{ color:var(--txt-3); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px){ .hud{ display:none; } }

/* --- sur ordinateur, la fiche défile dans sa propre colonne :
       la page elle-même ne bouge plus jamais pendant une partie --- */
@media (min-width:900px){
  .game-layout{ height:100dvh; overflow:hidden; padding-bottom:clamp(14px,2.6vw,26px); }
  .sheet-col{
    position:sticky; top:0; max-height:calc(100dvh - 2.6rem);
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .sheet-col::-webkit-scrollbar{ width:6px; }
  .duel-col{
    position:sticky; top:0; max-height:calc(100dvh - 2.6rem);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  }
  .duel-col::-webkit-scrollbar{ width:6px; }
  /* la carte du duel n'a plus besoin de sa marge : c'est une colonne à part */
  .duel-col .duel{ margin-top:0; }
  .stage{ max-height:calc(100dvh - 2.6rem); overflow-y:auto; overscroll-behavior:contain; }
  .stage::-webkit-scrollbar{ width:6px; }
}

/* fiche resserrée pour tenir dans un écran d'ordinateur */
@media (min-width:900px){
  .sheet-head{ padding:.95em 1.1em .8em; }
  .sheet-sec{ padding:.85em 1.1em; }
  .sheet-sec-t{ margin-bottom:.6em; }
  .stat-row{ padding:.1em 0; }
  .chart{ height:78px; }
  .sheet-meters{ padding:.15em 1.1em .75em; }
}

/* ===== Abandonner la carrière =====
   En haut à droite de l'écran de jeu, discret, avec confirmation :
   on ne perd pas vingt ans de carrière sur un clic mal placé. */
.quit-btn{
  position:fixed; top:clamp(10px,2vw,18px); right:clamp(10px,2vw,18px); z-index:250;
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em .9em; border-radius:var(--r-pill);
  background:rgba(255,59,92,.12); border:1px solid rgba(255,59,92,.42);
  color:#FF8DA1; font-family:var(--f-title); font-weight:700;
  font-size:.78rem; line-height:1; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.quit-btn::after{ content:'Quitter'; }
.quit-btn:hover{ background:rgba(255,59,92,.14); border-color:rgba(255,59,92,.45); color:var(--bad); }
.quit-btn:focus-visible{ outline:2px solid var(--txt-1); outline-offset:2px; }

.quit-veil{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:20px;
  background:rgba(6,6,12,.74); backdrop-filter:blur(8px);
}
.quit-veil.is-hidden{ display:none; }
.quit-box{
  width:min(400px,100%); padding:1.5em 1.4em 1.3em;
  border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-strong); box-shadow:var(--sh-2);
}
.quit-h{ font-family:var(--f-title); font-weight:900; font-size:1.3rem; margin:0 0 .4em; }
.quit-p{ font-size:var(--fs-sm); color:var(--txt-2); margin:0 0 1.2em; line-height:1.5; }
.quit-btns{ display:flex; gap:.6em; flex-wrap:wrap; }
.quit-btns .btn{ flex:1; min-width:140px; }
.btn--danger{
  background:linear-gradient(140deg,#FF5A73,#D32946); color:#fff;
  border:1px solid rgba(255,90,115,.5);
}
.btn--danger:hover{ filter:brightness(1.08); }

@media (max-width:520px){
  /* pas de largeur fixe : la pastille doit s'ajuster au mot « Quitter » */
  .quit-btn{ padding:.42em .7em; font-size:.72rem; gap:.35em; }
  .quit-btns .btn{ min-width:100%; }
}