/* ════════════════════════════════════════════════════════════════════════
   HÔTE WEB / GRAND ÉCRAN (≥1024px) — CRÉER UNE PARTIE, TOUT sur UN écran
   3 zones en maçonnerie : PACKS (catalogue, scroll interne) · FORMAT (la règle,
   scroll interne) · CONFIG (niveau + temps + « TA PARTIE » + CRÉER). Les vrais
   nœuds sont DÉPLACÉS dans le cadre (js/host/17_web.js) → mêmes écouteurs,
   logique de création intacte. Mobile intact.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.host-page .hwframe {
    --paper:#FFFEF7; --ink:#0A0A0A; --magenta:#FF2E93; --yellow:#FFD600; --cyan:#5BD8E5;
    --green:#5BE885; --red:#FF5252; --purple:#9D4EDD; --bleu:#4D7CFF; --orange:#FF9F45;
    --fd:'Anton',sans-serif; --fb:'IBM Plex Mono',monospace; --bd:3px; --bdf:4px; --sh:5px;
    --card:#FFFEF7; --line:#0A0A0A; --mut:rgba(10,10,10,.55); --app:#F4EEDF;
    position:fixed; inset:0; z-index:1300; display:flex; flex-direction:column; padding:14px 24px 12px;
    font-family:var(--fb); color:var(--ink); font-synthesis:none;
    background:var(--app) radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1.4px,transparent 1.5px); background-size:22px 22px;
  }
  html[data-skin="neon"] body.host-page .hwframe, html[data-theme="abime"] body.host-page .hwframe {
    --paper:#160E1F; --app:#0E0814; --card:#221430; --line:#0A0A0A; --mut:#CFC3CE; color:#FFFEF7;
    background-image:repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px);
  }

  /* NAV */
  .hwframe .hwnav{ display:flex; align-items:center; gap:14px; flex:none; margin-bottom:14px; max-width:1620px; width:100%; margin-inline:auto; }
  .hwframe .hwlogo{ height:48px; }
  .hwframe .hwtitle{ font-family:var(--fd); font-size:24px; letter-spacing:1px; }
  html[data-skin="neon"] .hwframe .hwtitle{ color:#FFFEF7; }
  .hwframe .hwker{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1.4px; color:var(--mut); }
  .hwframe .hwsp{ flex:1; }
  .hwframe .hwclose{ font-family:var(--fd); font-size:20px; width:46px; height:46px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:3px 3px 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .hwframe .hwclose{ color:#FFFEF7; }

  /* CORPS : 3 colonnes */
  .hwframe .hwbody3{ flex:1; min-height:0; display:grid; grid-template-columns:1.35fr 1fr 320px; gap:14px; max-width:1620px; width:100%; margin-inline:auto; }

  /* panneaux (commun) */
  .hwframe .hwmain, .hwframe .hwcol{ min-width:0; border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); display:flex; flex-direction:column; overflow:hidden; }
  html[data-skin="neon"] .hwframe .hwmain{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwcol{ box-shadow:var(--sh) var(--sh) 0 var(--cyan); }
  .hwframe .hwmhd{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:var(--bd) solid var(--line); flex:none; }
  .hwframe .hwmhd .eyebrow{ font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.4px; color:var(--mut); }
  .hwframe .hwmhd .h{ font-family:var(--fd); font-size:20px; letter-spacing:.5px; }
  html[data-skin="neon"] .hwframe .hwmhd .h{ color:#FFFEF7; }
  .hwframe .hwcnt{ margin-left:auto; font-family:var(--fd); font-size:12px; letter-spacing:.5px; padding:5px 11px; background:var(--magenta); color:#FFFEF7; border:var(--bd) solid var(--line); box-shadow:2px 2px 0 var(--line); }

  /* PACKS */
  .hwframe .hwtabs{ display:flex; flex-wrap:wrap; gap:7px; padding:11px 14px; border-bottom:var(--bd) solid var(--line); flex:none; max-height:96px; overflow:auto; }
  .hwframe .hwgrid{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px; }
  .hwframe .hwgrid #packsCards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:12px; }
  .hwframe .hwtools{ display:flex; gap:10px; padding:0 14px 14px; flex:none; }
  .hwframe .hwtools > *{ flex:1; }

  /* FORMAT (#fmtGrid déplacé entier : cartes format + options + ex-temps) */
  .hwframe .hwfmt{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px; }
  /* FORMATS en cartes « MODE » (comme RAFALE/MAQUIS de l'accueil) : 2 par ligne.
     17_web.js construit une .fmtcard (clone du composant .modecard) par format
     et masque la .listcard d'origine, qui garde l'état et les écouteurs. */
  .hwframe .hwfmt #fmtGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; overflow:visible; height:auto; max-height:none; padding:0; align-content:start; }
  .hwframe .hwfmt #fmtGrid > .listcard{ display:none; }   /* l'original : masqué, conservé pour l'état/les écouteurs */
  /* la carte MODE */
  .hwframe .hwfmt #fmtGrid .fmtcard{ --cg:7px; position:relative; min-height:128px; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:14px; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:var(--cg); color:var(--ink); margin:0; }
  .hwframe .hwfmt #fmtGrid .fmtcard::before{ content:''; position:absolute; inset:0; opacity:.14; pointer-events:none; background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px); background-size:15px 15px; }
  .hwframe .hwfmt #fmtGrid .fmtcard > *{ position:relative; }
  .hwframe .hwfmt #fmtGrid .fmtcard .ghost{ position:absolute; right:-14px; bottom:-18px; opacity:.26; transform:rotate(-8deg); pointer-events:none; }
  .hwframe .hwfmt #fmtGrid .fmtcard .ghost img{ height:120px; width:auto; }
  /* le gros emoji en filigrane (.ghost) suffit comme la réf accueil ; on masque le petit carré */
  .hwframe .hwfmt #fmtGrid .fmtcard .tile{ display:none; }
  .hwframe .hwfmt #fmtGrid .fmtcard .nm{ font-family:var(--fd); font-size:21px; line-height:.95; }
  .hwframe .hwfmt #fmtGrid .fmtcard .d{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.4px; line-height:1.2; color:rgba(10,10,10,.62); }
  .hwframe .hwfmt #fmtGrid .fmtcard .go{ font-family:var(--fd); font-size:14px; letter-spacing:1.5px; padding:7px 16px; border:var(--bd) solid var(--ink); background:var(--ink); color:#FFFEF7; box-shadow:3px 3px 0 #FFFEF7; margin-top:auto; }
  .hwframe .hwfmt #fmtGrid .fmtcard .tag{ position:absolute; top:9px; right:9px; z-index:2; display:inline-flex; align-items:center; gap:4px; font-family:var(--fd); font-size:11px; letter-spacing:.8px; padding:4px 8px; border:2.5px solid var(--line); background:var(--yellow); color:var(--ink); box-shadow:3px 3px 0 var(--line); }
  .hwframe .hwfmt #fmtGrid .fmtcard .tag img{ height:14px; width:auto; }
  /* carte choisie : liseré épais + l'action devient une coche verte */
  .hwframe .hwfmt #fmtGrid .fmtcard.on{ border-width:var(--bdf); box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--line); }
  .hwframe .hwfmt #fmtGrid .fmtcard.on .go{ background:var(--green); color:var(--ink); box-shadow:3px 3px 0 var(--line); }
  /* verrouillé (prix) : ton grisé, mais le prix reste lisible dans le .tag */
  .hwframe .hwfmt #fmtGrid .fmtcard.locked{ background:#D9D3C4 !important; color:rgba(10,10,10,.6); }
  .hwframe .hwfmt #fmtGrid .fmtcard.locked .go{ background:var(--line); }
  /* réservé event / pas encore : recouvrement sombre + mot */
  .hwframe .hwfmt #fmtGrid .fmtcard.soon{ cursor:not-allowed; }
  .hwframe .hwfmt #fmtGrid .fmtcard.soon::after{ content:attr(data-soon); position:absolute; inset:0; display:grid; place-items:center; font-family:var(--fd); font-size:20px; letter-spacing:3px; color:#FFFEF7; background:rgba(10,10,10,.55); z-index:3; }
  /* couleur par format (reprise des accents emoji-box s2-cN) */
  .hwframe .hwfmt #fmtGrid .fmtcard.c1{ background:var(--green); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c2{ background:var(--yellow); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c3{ background:var(--purple); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c4{ background:var(--cyan); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c5{ background:var(--blue); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c6{ background:var(--orange); }
  .hwframe .hwfmt #fmtGrid .fmtcard.c7{ background:var(--red); }
  /* NÉON : fond sombre interdit avec ombre noire → ombre colorée (magenta) */
  html[data-skin="neon"] .hwframe .hwfmt #fmtGrid .fmtcard{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwfmt #fmtGrid .fmtcard.on{ box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwfmt #fmtGrid .fmtcard.locked{ background:#2A2036 !important; color:#9A8EA8; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwfmt #fmtGrid .fmtcard.locked .d{ color:#9A8EA8; }
  /* tout ce qui n'est pas une carte (séparateurs, sous-options soirée/équipes) reprend toute la largeur */
  .hwframe .hwfmt #fmtGrid > *:not(.fmtcard):not(.listcard){ grid-column:1 / -1; }
  .hwframe .hwfmt #fmtGrid #soireeOpts, .hwframe .hwfmt #fmtGrid #teamOpts{ grid-column:1 / -1; display:flex; flex-direction:column; gap:10px; }
  .hwframe .hwfmt #fmtGrid #soireeOpts .listcard, .hwframe .hwfmt #fmtGrid #teamOpts .listcard{ display:block; margin:0; }

  /* CONFIG : niveau + temps + TA PARTIE + CRÉER.
     ⚠ pas d'overflow ici : il coupait l'ombre brutaliste du bouton CRÉER. */
  .hwframe .hwcfg{ min-width:0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; overflow-x:visible; padding:0 8px 8px 0; }
  /* cartes LA SALLE (partie publique / présentateur / pari) dans la colonne étroite */
  .hwframe #hwSalleSlot{ display:flex; flex-direction:column; gap:9px; }
  .hwframe #hwSalleSlot .listcard{ transform:none !important; width:100%; margin:0; }
  .hwframe #hwSalleSlot .stack{ display:flex; flex-direction:column; gap:9px; margin:0; }
  .hwframe #hwSalleSlot .seg{ flex-wrap:wrap; }
  .hwframe .cfgblk{ border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:13px 14px; flex:none; }
  .hwframe .cfgblk.sum{ flex:0 0 auto; }   /* TA PARTIE remplit jusqu'au bouton : pas de trou */
  html[data-skin="neon"] .hwframe .cfgblk{ box-shadow:var(--sh) var(--sh) 0 var(--yellow); }
  .hwframe .hwsh{ font-family:var(--fd); font-size:13px; letter-spacing:1.3px; color:var(--mut); margin-bottom:11px; }
  html[data-skin="neon"] .hwframe .hwsh{ color:#CFC3CE; }
  .hwframe #hwDifSlot #difGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* TEMPS : 6 crans égaux sur une ligne, pas de « 60 » étiré sur une 2e rangée */
  .hwframe #hwTimeSlot #fmtTimes{ display:grid !important; grid-template-columns:repeat(6,1fr); gap:0; width:100%; max-width:none; }
  .hwframe #hwTimeSlot #fmtTimes .o{ flex:none !important; width:auto !important; min-width:0; padding:11px 0; text-align:center; font-family:var(--fd); font-size:15px; border-right:var(--bd) solid var(--line); }
  .hwframe #hwTimeSlot #fmtTimes .o:last-child{ border-right:0; }
  .hwframe .cfgblk.sum .hwsrow{ display:flex; align-items:center; padding:8px 0; border-bottom:2px dashed color-mix(in srgb,var(--ink) 18%,transparent); font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.5px; color:var(--mut); }
  .hwframe .cfgblk.sum .hwsrow:last-child{ border-bottom:0; }
  .hwframe .cfgblk.sum .hwsrow b{ margin-left:auto; font-family:var(--fd); font-size:15px; color:var(--ink); }
  html[data-skin="neon"] .hwframe .cfgblk.sum .hwsrow b{ color:#FFFEF7; }

  /* CRÉER LA SALLE — CTA brutaliste : bord épais 4px + ombre dure 6px décalée */
  .hwframe .hwcreate{ flex:none; margin-top:auto; position:sticky; bottom:0; z-index:2; font-family:var(--fd); font-size:24px; letter-spacing:.5px; padding:18px 16px; border:var(--bdf) solid var(--line); background:var(--green); color:var(--ink); box-shadow:6px 6px 0 0 var(--line); border-radius:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; transition:transform var(--dur-xs) var(--ease-out), box-shadow var(--dur-xs) var(--ease-out); }
  .hwframe .hwcreate:hover{ transform:translate(-1px,-1px); box-shadow:8px 8px 0 0 var(--line); }
  .hwframe .hwcreate:active{ transform:translate(6px,6px); box-shadow:0 0 0 0 var(--line); }
  .hwframe .hwcreate img{ height:28px; }
  /* VERROUILLÉ : tant que packs/format/niveau/temps ne sont pas tous choisis */
  .hwframe .hwcreate.locked{ background:#D9D3C4; color:var(--mut); box-shadow:4px 4px 0 0 var(--line); cursor:not-allowed; font-size:16px; }
  .hwframe .hwcreate.locked:hover{ transform:none; box-shadow:4px 4px 0 0 var(--line); }
  .hwframe .hwcreate.locked:active{ transform:none; box-shadow:4px 4px 0 0 var(--line); }
  .hwframe .hwcreate .hwlk{ display:none; }
  html[data-skin="neon"] .hwframe .hwcreate.locked{ background:#2A2036; color:#9A8EA8; box-shadow:4px 4px 0 0 var(--line); }
  html[data-skin="neon"] .hwframe .hwcreate{ box-shadow:6px 6px 0 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwcreate:hover{ box-shadow:8px 8px 0 0 var(--magenta); }
  html[data-skin="neon"] .hwframe .hwcreate:active{ box-shadow:0 0 0 0 var(--magenta); }

  /* tuiles : pas d'inclinaison, remplissent leur cellule */
  .hwframe .hwgrid .s2-pk, .hwframe .hwgrid .s2-pkg > *,
  .hwframe .hwfmt .listcard, .hwframe #hwDifSlot .s2-dif{ transform:none !important; width:100%; margin:0; }

  /* ════ LE SALON (lobby) — split 40/60 · fond BLANC · DÉMARRER intégré ════
     GAUCHE 40% : code + QR (rejoindre).  DROITE 60% : joueurs + bots + DÉMARRER.
     Un seul grand rectangle, bouton DÉMARRER à l'intérieur du panneau droit. */
  body.host-page .hwframe.hwlobby{ background:#FFFFFF; }
  html[data-skin="neon"] body.host-page .hwframe.hwlobby{ background:var(--app); background-image:none; }
  .hwframe.hwlobby .hwback{ font-family:var(--fd); font-size:15px; letter-spacing:1px; padding:9px 15px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:3px 3px 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .hwframe.hwlobby .hwback{ color:#FFFEF7; }
  .hwframe.hwlobby .hlbadges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .hwframe.hwlobby .hlbadges .jr-fpill, .hwframe.hwlobby .hlbadges .pill{ margin:0; }
  .hwframe.hwlobby .hlquit .pill.red{ margin:0; }

  /* un seul grand cadre : 40% | 60% */
  .hwframe.hwlobby .hlbody{ flex:1; min-height:0; display:grid; grid-template-columns:40% 60%; gap:0; max-width:1620px; width:100%; margin-inline:auto; border:var(--bdf) solid var(--line); background:#FFFFFF; box-shadow:var(--sh) var(--sh) 0 var(--line); overflow:hidden; }
  html[data-skin="neon"] .hwframe.hwlobby .hlbody{ background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .hwframe.hwlobby .hlcard{ min-width:0; display:flex; flex-direction:column; overflow:hidden; }

  /* ── GAUCHE 40% : code + QR, centrés sur fond BLANC */
  .hwframe.hwlobby .hljoin{ position:relative; padding:40px 24px; align-items:center; justify-content:space-evenly; text-align:center; gap:16px; border-right:var(--bdf) solid var(--line); background:#FFFFFF; }
  html[data-skin="neon"] .hwframe.hwlobby .hljoin{ background:var(--card); }
  .hwframe.hwlobby .hljlive{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fd); font-size:13px; letter-spacing:1.6px; color:var(--ink); background:var(--green); border:var(--bd) solid var(--line); padding:7px 14px; box-shadow:4px 4px 0 var(--line); }
  html[data-skin="neon"] .hwframe.hwlobby .hljlive{ color:var(--ink); }
  .hwframe.hwlobby .hljdot{ width:11px; height:11px; background:var(--red); border:2px solid var(--line); border-radius:50%; animation:hljpulse 1s steps(2) infinite; }
  @keyframes hljpulse{ 50%{ opacity:.25; } }
  .hwframe.hwlobby .hljkick{ font-family:var(--fd); font-size:18px; letter-spacing:2px; color:var(--magenta); }
  .hwframe.hwlobby .hljoinin{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; width:100%; }
  .hwframe.hwlobby .hljoinin .jr-clabel{ margin:0; font-size:13px; }
  .hwframe.hwlobby .hljoinin .jr-code{ margin:0; transform:scale(1.35); transform-origin:center; }
  .hwframe.hwlobby .hljoinin .jr-share{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:360px; }
  .hwframe.hwlobby .hljoinin .jr-share .jr-qr{ width:210px; height:210px; flex:none; }
  .hwframe.hwlobby .hljoinin .jr-share .jr-qr img{ width:100%; height:100%; object-fit:contain; }
  .hwframe.hwlobby .hljoinin .jr-share .mid{ text-align:center; width:100%; }
  .hwframe.hwlobby .hljoinin .jr-share .acts{ display:flex; justify-content:center; gap:10px; }
  /* COPIER LE LIEN / LE CODE : chacun sur UNE ligne */
  .hwframe.hwlobby .hljoinin .jr-share .acts .btn{ white-space:nowrap; flex:0 1 auto; }
  .hwframe.hwlobby .hljtag{ font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:1px; color:var(--mut); }

  /* ── DROITE 60% : entête magenta + joueurs + DÉMARRER intégré en pied */
  .hwframe.hwlobby .hlroom{ background:#FFFFFF; }
  html[data-skin="neon"] .hwframe.hwlobby .hlroom{ background:var(--card); }
  .hwframe.hwlobby .hlroomhd{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--magenta); color:#FFFEF7; border-bottom:var(--bdf) solid var(--line); flex:none; }
  .hwframe.hwlobby .hlroomhd .hwsh, .hwframe.hwlobby .hlroomhd .shead{ flex:1; margin:0; color:#FFFEF7; font-family:var(--fd); font-size:16px; letter-spacing:1.4px; }
  .hwframe.hwlobby .hlroomhd .shead .bar{ display:none; }
  .hwframe.hwlobby .hlbot{ flex:none; }
  .hwframe.hwlobby .hlinv{ flex:none; padding:10px 14px; border-bottom:3px solid var(--line); }
  .hwframe.hwlobby .hlinv:empty{ display:none; }
  .hwframe.hwlobby .hlinv .jr-none{ font-size:9px; }
  .hwframe.hwlobby .hlwall{ flex:1; min-height:0; overflow-y:auto; padding:14px; }
  .hwframe.hwlobby .hlwall .jr-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; align-content:start; }
  .hwframe.hwlobby .hlwall .jr-wall > *{ transform:none !important; margin:0; }
  .hwframe.hwlobby .hlwall .jr-wall .jr-pl.emp{ display:none; }   /* on ne montre QUE ceux qui sont là */

  /* pied DU PANNEAU DROIT : récap + DÉMARRER (fait partie du bloc) */
  .hwframe.hwlobby .hlroomfoot{ flex:none; display:flex; align-items:center; gap:14px; padding:12px 14px; border-top:var(--bdf) solid var(--line); background:#FFFFFF; }
  html[data-skin="neon"] .hwframe.hwlobby .hlroomfoot{ background:var(--card); }
  .hwframe.hwlobby .hlrecap{ flex:1; min-width:0; }
  .hwframe.hwlobby .hlrecap .rc{ margin:0; }
  .hwframe.hwlobby .hlcta{ flex:none; }
  .hwframe.hwlobby .hlcta .cta.go{ margin:0; min-width:300px; }

  /* ══════════════════════════════════════════════════════════════════════
     EN PARTIE — vue HÔTE / PRÉSENTATEUR (20_web.js déplace les vrais nœuds)
     QUESTION · VERDICT · CLASSEMENT · TRANSITION. Brutalist : rayon 0, ombres
     dures. NÉON : fond sombre → ombre COLORÉE (jamais noir sur noir).
     ══════════════════════════════════════════════════════════════════════ */

  /* ---- bandeau commun aux écrans de jeu ---- */
  .hwframe.hwq .hwnav, .hwframe.hwrev .hwnav, .hwframe.hwfb .hwnav{ max-width:1720px; margin-bottom:12px; }
  .hwframe.hwqlive, .hwframe .hwqlive{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fd); font-size:13px; letter-spacing:1.4px; color:var(--ink); background:var(--green); border:var(--bd) solid var(--line); padding:6px 13px; box-shadow:3px 3px 0 var(--line); }
  html[data-skin="neon"] .hwframe .hwqlive{ color:var(--ink); }
  .hwframe .hwqtype .type-pill{ transform:scale(1.15); transform-origin:left center; }
  .hwframe .hwqprog{ font-family:var(--fd); font-size:16px; letter-spacing:1px; padding:5px 12px; border:var(--bd) solid var(--line); background:var(--ink); color:var(--yellow); box-shadow:2px 2px 0 var(--line); }
  .hwframe .hwqscore{ font-family:var(--fd); font-size:16px; }
  .hwframe .hwqscore .nemoji{ height:20px; vertical-align:-4px; }
  .hwframe .hwqquit .x{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:var(--bd) solid var(--line); background:var(--card); box-shadow:2px 2px 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .hwframe .hwqquit .x{ box-shadow:2px 2px 0 var(--magenta); }

  /* ---- QUESTION ---- */
  .hwframe.hwq .hwqfuse{ max-width:1720px; width:100%; margin:0 auto 12px; flex:none; }
  .hwframe.hwq .hwqfuse .s2-fuse{ height:14px; border:var(--bdf) solid var(--line); background:var(--app); overflow:hidden; }
  .hwframe.hwq .hwqfuse .s2-fuse > i{ display:block; height:100%; background:var(--magenta); background-image:repeating-linear-gradient(45deg,rgba(255,254,247,.25) 0 7px,transparent 7px 14px); }
  .hwframe.hwq .hwqbody{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 340px; gap:16px; max-width:1720px; width:100%; margin:0 auto; }
  .hwframe.hwq .hwqmain{ min-width:0; display:flex; flex-direction:column; gap:14px; min-height:0; }
  .hwframe.hwq .hwqask{ position:relative; flex:none; }
  .hwframe.hwq .hwqask .sh{ position:absolute; inset:0; transform:translate(var(--sh),var(--sh)); background:var(--line); }
  .hwframe.hwq .hwqask .bd{ position:relative; border:var(--bdf) solid var(--line); background:var(--yellow); color:var(--ink); padding:20px 26px; font-family:var(--fd); font-size:clamp(26px,2.6vw,42px); line-height:1.02; letter-spacing:.5px; }
  html[data-skin="neon"] .hwframe.hwq .hwqask .sh{ background:var(--magenta); }
  .hwframe.hwq .hwqmedia{ flex:none; display:flex; justify-content:center; }
  .hwframe.hwq .hwqmedia:empty{ display:none; }
  .hwframe.hwq .hwqmedia img, .hwframe.hwq .hwqmedia .media, .hwframe.hwq .hwqmedia .four-grid{ max-height:300px; max-width:100%; width:auto; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); }
  .hwframe.hwq .hwqhud:empty{ display:none; }
  .hwframe.hwq .hwqhud{ flex:none; }
  .hwframe.hwq .hwqans{ flex:1; min-height:0; overflow:auto; display:flex; }
  /* #ansTiles est l'ENFANT du slot .hwqans (on déplace le vrai nœud) : on le cible directement */
  .hwframe.hwq #ansTiles{ flex:1; width:100%; min-height:0; }
  /* la grille de réponses QCM en grand : 2 colonnes, tuiles qui REMPLISSENT la zone (pas de trou) */
  .hwframe.hwq #ansTiles.answer-zone.options-col{ display:grid !important; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:16px; align-content:stretch; }
  .hwframe.hwq #ansTiles .opt{ margin:0; display:flex; min-height:0; }
  .hwframe.hwq #ansTiles .opt .bd{ min-height:96px; height:100%; width:100%; padding:18px 22px; gap:16px; }
  .hwframe.hwq #ansTiles .opt .lbox{ font-size:30px; width:54px; height:54px; }
  .hwframe.hwq #ansTiles .opt .text{ font-size:clamp(18px,1.7vw,26px); line-height:1.05; }
  /* modes à réponse texte / spéciaux : on ne force pas la grille, on centre */
  .hwframe.hwq #ansTiles:not(.options-col){ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }

  .hwframe.hwq .hwqside{ display:flex; flex-direction:column; gap:14px; min-height:0; }
  /* le chrono REMPLIT la colonne ; le panneau des répondants hugge son contenu en bas
     → plus de grande boîte blanche vide à droite */
  .hwframe.hwq .hwqclock{ flex:1 1 auto; min-height:0; border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:18px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  html[data-skin="neon"] .hwframe.hwq .hwqclock{ box-shadow:var(--sh) var(--sh) 0 var(--cyan); }
  .hwframe.hwq .hwqclock .v{ font-family:var(--fd); font-size:clamp(120px,13vw,200px); line-height:.82; color:var(--ink); }
  html[data-skin="neon"] .hwframe.hwq .hwqclock .v{ color:#FFFEF7; }
  .hwframe.hwq .hwqclock .v #ghTimer{ color:inherit; }
  .hwframe.hwq .hwqclock .v #ghTimer::before{ display:none !important; }   /* pas d'horloge tracée ici : juste le nombre */
  .hwframe.hwq .hwqclock .v #ghTimer.warn{ color:var(--red); }
  .hwframe.hwq .hwqclock .l{ font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:3px; color:var(--mut); margin-top:4px; }
  .hwframe.hwq .hwqfoot{ flex:0 0 auto; border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:16px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
  html[data-skin="neon"] .hwframe.hwq .hwqfoot{ box-shadow:var(--sh) var(--sh) 0 var(--yellow); }
  .hwframe.hwq .hwqfoot:has(#ghFoot:empty)::after{ content:'EN ATTENTE DES RÉPONSES…'; font-family:var(--fb); font-weight:700; font-size:12px; letter-spacing:1px; color:var(--mut); }
  .hwframe.hwq .hwqfoot #ghFoot:empty{ display:none; }
  .hwframe.hwq .hwqfoot .avs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
  .hwframe.hwq .hwqfoot .ct{ font-family:var(--fd); font-size:22px; letter-spacing:.5px; }
  html[data-skin="neon"] .hwframe.hwq .hwqfoot .ct{ color:#FFFEF7; }

  /* ---- VERDICT (le bloc .s2-fb déplacé tel quel, remis en flux et centré) ---- */
  .hwframe.hwfb .hwfbwrap{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; }
  .hwframe.hwfb .s2-fb{ position:static !important; inset:auto !important; width:100%; max-width:860px; height:auto; min-height:min(78vh,720px); border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); }
  html[data-skin="neon"] .hwframe.hwfb .s2-fb{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .hwframe.hwfb .s2-fb .ttl{ font-size:clamp(40px,5vw,72px); }
  .hwframe.hwfb .s2-fb .nemoji.big{ width:120px; height:120px; }

  /* ---- RÉVÉLATION / VERDICT HÔTE : l'histogramme A/B/C/D (maquette ④) ---- */
  .hwframe.hwvd .hwnav{ max-width:1720px; margin-inline:auto; width:100%; }
  .hwframe.hwvd .hwqlive{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fd); font-size:14px; letter-spacing:1.5px; }
  html[data-skin="neon"] .hwframe.hwvd .hwqlive{ color:#FFFEF7; }
  .hwframe.hwvd .ge-head{ flex:none; max-width:1720px; width:100%; margin:0 auto 18px; padding:16px 24px; background:var(--yellow); border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); text-align:center; }
  html[data-skin="neon"] .hwframe.hwvd .ge-head{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .hwframe.hwvd .ge-head .h1{ font-family:var(--fd); font-size:clamp(34px,3.6vw,56px); line-height:1.02; color:var(--ink); }
  .hwframe.hwvd .ge-head .h2{ font-family:var(--fb); font-weight:700; font-size:14px; letter-spacing:2px; color:rgba(10,10,10,.65); margin-top:5px; }
  .hwframe.hwvd .hwvdbody{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 360px; gap:26px; max-width:1720px; width:100%; margin:0 auto; }
  /* histogramme */
  .hwframe.hwvd .histo{ min-width:0; display:flex; align-items:flex-end; gap:22px; height:100%; }
  .hwframe.hwvd .hc{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
  .hwframe.hwvd .hc .cnt{ font-family:var(--fd); font-size:36px; line-height:1; margin-bottom:8px; flex:none; color:var(--ink); }
  html[data-skin="neon"] .hwframe.hwvd .hc .cnt{ color:#FFFEF7; }
  /* la zone des barres : flex:1 → la hauteur % de .bar se mesure sur cet espace, jamais sur toute la colonne (sinon la barre pleine déborde sur l'en-tête) */
  .hwframe.hwvd .hc .barwrap{ flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:flex-end; justify-content:center; }
  .hwframe.hwvd .hc .bar{ width:100%; flex:none; min-height:56px; max-height:100%; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line);
    position:relative; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:40px; color:var(--ink); }
  .hwframe.hwvd .hc.a .bar{ background:var(--yellow); }
  .hwframe.hwvd .hc.b .bar{ background:var(--purple); color:#FFFEF7; }
  .hwframe.hwvd .hc.c .bar{ background:var(--red); color:#FFFEF7; }
  .hwframe.hwvd .hc.d .bar{ background:var(--cyan); }
  .hwframe.hwvd .hc.good .bar{ background:var(--green); color:var(--ink); padding-top:44px; }
  .hwframe.hwvd .hc.good .bar::before{ content:''; position:absolute; top:0; left:0; right:0; height:38px; background:var(--line); }
  .hwframe.hwvd .hc.good .bar::after{ content:''; position:absolute; top:9px; left:50%; margin-left:-7px; width:13px; height:23px;
    border:solid var(--green); border-width:0 6px 6px 0; transform:rotate(42deg); }
  .hwframe.hwvd .hc:not(.good){ opacity:.62; }
  .hwframe.hwvd .hc .kk{ margin-top:10px; width:100%; flex:none; font-family:var(--fd); font-size:18px;
    border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); background:var(--card); color:inherit; padding:7px 8px; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html[data-skin="neon"] .hwframe.hwvd .hc .kk{ color:#FFFEF7; box-shadow:3px 3px 0 var(--cyan); }
  .hwframe.hwvd .hc.good .kk{ background:var(--green); color:var(--ink); box-shadow:3px 3px 0 var(--line); }
  /* colonne droite : bonne réponse + points */
  .hwframe.hwvd .rev-r{ display:flex; flex-direction:column; gap:18px; justify-content:center; min-width:0; }
  .hwframe.hwvd .rev-r .bloc{ border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); background:var(--card); padding:20px; }
  html[data-skin="neon"] .hwframe.hwvd .rev-r .bloc{ box-shadow:var(--sh) var(--sh) 0 var(--cyan); }
  .hwframe.hwvd .rev-r .bloc.vert{ background:var(--green); }
  html[data-skin="neon"] .hwframe.hwvd .rev-r .bloc.vert{ box-shadow:var(--sh) var(--sh) 0 var(--line); }
  .hwframe.hwvd .rev-r .t{ font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:2px; color:rgba(10,10,10,.6); }
  html[data-skin="neon"] .hwframe.hwvd .rev-r .bloc:not(.vert) .t{ color:var(--mut); }
  .hwframe.hwvd .rev-r .a{ font-family:var(--fd); font-size:clamp(28px,2.6vw,40px); margin-top:6px; color:var(--ink); line-height:1.02; }
  html[data-skin="neon"] .hwframe.hwvd .rev-r .bloc:not(.vert) .a{ color:#FFFEF7; }
  .hwframe.hwvd .rev-r .x{ font-family:var(--fb); font-weight:700; font-size:14px; line-height:1.6; margin-top:10px; color:var(--ink); }
  html[data-skin="neon"] .hwframe.hwvd .rev-r .bloc:not(.vert) .x{ color:#E8DFE8; }

  /* ---- CLASSEMENT ---- */
  .hwframe.hwrev .hwrevhd{ display:inline-flex; align-items:center; gap:14px; }
  .hwframe.hwrev .hwrevhd .s2-lbh{ display:inline-flex; align-items:center; gap:12px; margin:0; }
  .hwframe.hwrev .hwrevhd .s2-lbh .nemoji{ height:40px; }
  .hwframe.hwrev .hwrevhd .s2-lbh .t{ font-family:var(--fd); font-size:28px; letter-spacing:1px; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevhd .s2-lbh .t{ color:#FFFEF7; }
  .hwframe.hwrev .hwrevhd .s2-lbh .s{ font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:1px; color:var(--mut); }
  .hwframe.hwrev .hwrevtop .pill{ font-family:var(--fd); font-size:15px; }
  .hwframe.hwrev .hwrevbody{ flex:1; min-height:0; display:grid; grid-template-columns:380px 1fr; gap:16px; max-width:1720px; width:100%; margin:0 auto; }
  .hwframe.hwrev .hwrevside{ min-width:0; border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:16px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevside{ box-shadow:var(--sh) var(--sh) 0 var(--yellow); }
  .hwframe.hwrev .hwrevsh, .hwframe.hwrev .hwrevlh{ font-family:var(--fd); font-size:14px; letter-spacing:1.4px; color:var(--mut); flex:none; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevsh, html[data-skin="neon"] .hwframe.hwrev .hwrevlh{ color:#CFC3CE; }
  /* les 3 statcards remplissent toute la hauteur du panneau : plus de bloc vide dessous */
  .hwframe.hwrev .hwrevstats{ flex:1; min-height:0; display:flex; }
  .hwframe.hwrev .hwrevstats #lbHead{ flex:1; display:flex; flex-direction:column; min-height:0; }
  .hwframe.hwrev .hwrevstats .s2-grid3{ flex:1; display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:14px; min-height:0; }
  .hwframe.hwrev .hwrevstats .statcard{ padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .hwframe.hwrev .hwrevstats .statcard .v{ font-size:44px; color:var(--ink); }
  .hwframe.hwrev .hwrevstats .statcard .l{ color:rgba(10,10,10,.65); }
  /* NÉON : fond sombre interdit avec texte sombre → on garde les accents vifs,
     texte encre, ombre colorée. Lisible de loin. */
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard.a{ background:var(--yellow) !important; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard.b{ background:var(--green) !important; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard.c{ background:var(--cyan) !important; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard{ box-shadow:5px 5px 0 var(--magenta) !important; }
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard .v,
  html[data-skin="neon"] .hwframe.hwrev .hwrevstats .statcard .l{ color:var(--ink) !important; }
  /* titre ANCRÉ EN HAUT ; la liste REMPLIT toute la hauteur (lignes étirées, comme
     les statcards de gauche) → équilibré à 3 comme à 8 joueurs, scroll au-delà. */
  .hwframe.hwrev .hwrevlist{ min-width:0; display:flex; flex-direction:column; gap:12px; min-height:0; }
  .hwframe.hwrev .hwrevlh{ flex:none; }
  .hwframe.hwrev .hwrevscroll{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
  .hwframe.hwrev .hwrevscroll .s2-scroll{ flex:1; min-height:0; display:flex; flex-direction:column; width:100%; }
  .hwframe.hwrev .hwrevscroll .s2-top{ flex:1; min-height:0; display:grid; grid-auto-rows:1fr; align-content:stretch; gap:14px; width:100%; }
  .hwframe.hwrev .hwrevscroll .lbrow{ font-size:20px; padding:16px 14px; height:100%; min-height:72px; align-items:center; }
  .hwframe.hwrev .hwrevscroll .lbrow .avatar{ transform:scale(1.25); }
  .hwframe.hwrev .hwrevfoot{ display:flex; align-items:center; gap:16px; max-width:1720px; width:100%; margin:14px auto 0; flex:none; }
  .hwframe.hwrev .hwrevnext{ display:inline-flex; align-items:center; gap:10px; font-family:var(--fb); font-weight:700; font-size:12px; letter-spacing:1px; color:var(--mut); }
  .hwframe.hwrev .hwrevnext .pill{ font-family:var(--fd); font-size:15px; }
  .hwframe.hwrev .hwrevcta .btn{ margin:0; min-width:320px; font-size:20px; }
  /* NÉON : le CTA SUIVANT/PODIUM lisible — encre claire, ombre colorée (pas noir sur noir) */
  html[data-skin="neon"] .hwframe.hwrev .hwrevcta .btn{ background:var(--magenta); color:#FFFEF7; border-color:var(--line); box-shadow:5px 5px 0 var(--line); }

  /* ---- TRANSITION (panneau de manche OU plan de format, centré plein écran) ---- */
  .hwframe.hwtr{ align-items:center; justify-content:center; }
  .hwframe.hwtr .hwtrwrap{ width:100%; max-width:1000px; height:100%; display:flex; align-items:center; justify-content:center; }
  .hwframe.hwtr .s2-tr, .hwframe.hwtr #transFx, .hwframe.hwtr .s2-fx{ position:static !important; inset:auto !important; width:100%; max-width:860px; max-height:94vh; }

  /* ---- PODIUM / FIN DE PARTIE ---- */
  .hwframe.hwpod .hwpodmode .pill, .hwframe.hwpod .hwpodlabel .pill{ font-family:var(--fd); font-size:15px; }
  .hwframe.hwpod .hwpodbody{ flex:1; min-height:0; display:grid; grid-template-columns:1.25fr 1fr; gap:16px; max-width:1720px; width:100%; margin:0 auto; }
  /* GAUCHE : GG + vainqueur + les 3 marches, centrés et pleins */
  .hwframe.hwpod .hwpodleft{ min-width:0; border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; padding:28px 20px 0; overflow:auto; }
  html[data-skin="neon"] .hwframe.hwpod .hwpodleft{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .hwframe.hwpod .hwpodgg{ display:flex; align-items:center; gap:16px; margin:0; }
  .hwframe.hwpod .hwpodgg .nemoji{ height:52px; }
  .hwframe.hwpod .hwpodgg .t{ font-family:var(--fd); font-size:60px; letter-spacing:1px; line-height:.9; }
  html[data-skin="neon"] .hwframe.hwpod .hwpodgg .t{ color:#FFFEF7; }
  .hwframe.hwpod .hwpodwin{ font-family:var(--fd); font-size:28px; letter-spacing:.5px; text-align:center; margin:0; }
  html[data-skin="neon"] .hwframe.hwpod .hwpodwin{ color:#FFFEF7; }
  .hwframe.hwpod .hwpods2:empty{ display:none; }
  .hwframe.hwpod .hwpods2{ width:100%; max-width:560px; }
  /* les 3 marches 2·1·3, la 1re plus haute */
  .hwframe.hwpod .hwpodsteps{ width:100%; margin-top:auto; padding-bottom:6px; }   /* marches posées « au sol », en bas du panneau */
  .hwframe.hwpod .hwpodsteps .s2-pod{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; width:100%; max-width:620px; margin:0 auto; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card{ margin:0; width:100%; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card .bd{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px 16px; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card:nth-child(1) .bd{ min-height:clamp(340px,48vh,540px); }
  .hwframe.hwpod .hwpodsteps .s2-pod .card:nth-child(2) .bd{ min-height:clamp(440px,62vh,680px); }   /* le 1er, au milieu */
  .hwframe.hwpod .hwpodsteps .s2-pod .card:nth-child(3) .bd{ min-height:clamp(300px,42vh,460px); }
  .hwframe.hwpod .hwpodsteps .s2-pod .card .avatar{ transform:scale(1.4); margin:6px 0; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card .nm{ font-size:18px; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card .sc{ font-size:20px; }
  .hwframe.hwpod .hwpodsteps .s2-pod .card .rk.medal .nemoji{ height:44px; }
  /* DROITE : classement complet, remplit la colonne */
  .hwframe.hwpod .hwpodright{ min-width:0; display:flex; flex-direction:column; gap:12px; min-height:0; }
  .hwframe.hwpod .hwpodrh .s2-div{ margin:0; font-family:var(--fd); }
  .hwframe.hwpod .hwpodscroll{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
  /* le classement complet (grille 2 colonnes) REMPLIT la hauteur : lignes étirées, pas de trou en bas */
  .hwframe.hwpod .hwpodscroll #fullBoard{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; align-content:stretch; gap:12px; }
  .hwframe.hwpod .hwpodscroll #fullBoard .s2-sub{ grid-column:1 / -1; text-align:center; padding:6px 0 0; align-self:end; }
  .hwframe.hwpod .hwpodscroll .lbrow{ font-size:19px; padding:14px 14px; height:100%; align-items:center; margin:0; }
  .hwframe.hwpod .hwpodscroll .lbrow .avatar{ transform:scale(1.15); }
  /* PIED : PARTAGER + ACCUEIL */
  .hwframe.hwpod .hwpodfoot{ display:flex; gap:16px; justify-content:center; max-width:1720px; width:100%; margin:14px auto 0; flex:none; }
  .hwframe.hwpod .hwpodfoot .res-foot, .hwframe.hwpod .hwpodfoot .s2-two{ display:flex; gap:16px; margin:0; width:auto; }
  .hwframe.hwpod .hwpodfoot .btn{ margin:0; min-width:300px; font-size:18px; }
}

/* LE LOOK des écrans de jeu (salon, ≥1024px) : AFFICHE · NÉON · RISO */
@media (min-width:1024px){
  .hwframe .hllook{ display:flex; align-items:center; gap:0; flex:none; border:3px solid var(--ink,#0A0A0A); box-shadow:4px 4px 0 var(--ink,#0A0A0A); background:#FFFEF7; }
  .hwframe .hllook .k{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; letter-spacing:1.6px; padding:0 10px; }
  .hwframe .hllook button{ font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.5px; padding:8px 12px; border:0; border-left:3px solid #0A0A0A; background:#FFFEF7; color:#0A0A0A; cursor:pointer; }
  .hwframe .hllook button.on{ background:#FF2E93; color:#0A0A0A; }
}

/* PARTIE RAPIDE (≥1024) : l'écran du téléphone en grand, sur deux colonnes —
   à gauche le tirage (mode, dé, réglages, au programme), à droite les nouveaux
   formats ; CRÉER LA SALLE et COMPOSER en pied, côte à côte. Mêmes nœuds,
   mêmes écouteurs (15_quickstart.js). Le mobile ne change pas. */
@media (min-width:1024px){
  section#screen-rapide[data-s2] > .s2 { max-width:min(1320px,94vw); top:50% !important; bottom:auto !important; height:auto !important; max-height:94vh;
    transform:translateY(-50%); border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
  #screen-rapide .s2-scroll { flex:none !important; overflow:visible !important; }
  #screen-rapide .s2-scroll > * + * { margin-top:14px !important; }
  #screen-rapide .s2-scroll { display:block !important; column-count:2; column-gap:36px; column-fill:auto; padding:18px 28px !important; }
  #screen-rapide .s2-scroll > * { break-inside:avoid; }
  #screen-rapide .s2-scroll > #rapNeufsHd { break-before:column; margin-top:0 !important; }
  #screen-rapide .s2-scroll > #rapReroll { width:100%; }
  #screen-rapide .s2 > .stack:last-child { display:grid !important; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:center; column-gap:20px; padding:12px 28px 20px !important; }
  #screen-rapide .s2 > .stack:last-child > #rapConfigureSub { grid-column:2; }
  #screen-rapide .s2 > .stack:last-child > #rapCreate { grid-row:1 / span 2; }
}

/* RÉCAP, ÉDITEUR et tout écran saison 2 de l'hôte sans cadre web dédié (≥1024) :
   un panneau large au lieu de la colonne de 640 px (saison2-host.css), le
   contenu sur deux colonnes. Les écrans de jeu (DC) et CRÉER cachent ce .s2. */
@media (min-width:1024px){
  section.screen[data-s2]:is(#screen-recap, #screen-editor, #screen-format, #screen-niveau) > .s2 { max-width:min(1320px,94vw); }
  section.screen[data-s2]:is(#screen-recap, #screen-editor, #screen-format, #screen-niveau) > .s2 > .s2-scroll { display:block !important; column-count:2; column-gap:32px; padding:16px 26px !important; }
  section.screen[data-s2]:is(#screen-recap, #screen-editor, #screen-format, #screen-niveau) > .s2 > .s2-scroll > * { break-inside:avoid; margin-bottom:12px !important; }
}

/* GAGE (MODE SOIRÉE) sur ordinateur : la carte à l'échelle de l'écran, pas une colonne de téléphone */
@media (min-width:1024px){
  .gage-ov .go-in { max-width:min(1100px,92vw) !important; width:100%; margin:0 auto; justify-content:center; gap:clamp(18px,2vw,32px) !important; padding:40px 0 !important; }
  .gage-ov .go-hd { font-size:clamp(20px,1.6vw,30px) !important; }
  .gage-ov .go-lbl { font-size:clamp(13px,1vw,16px) !important; }
  .gage-ov .go-nm { font-size:clamp(64px,6vw,120px) !important; }
  .gage-ov .go-card { padding:clamp(24px,2.6vw,48px) !important; box-shadow:10px 10px 0 #000 !important; border-width:5px !important; }
  .gage-ov .go-em { font-size:clamp(56px,5vw,96px) !important; }
  .gage-ov .go-tx { font-size:clamp(34px,3.2vw,62px) !important; }
  .gage-ov .go-t { font-size:clamp(22px,1.8vw,34px) !important; }
  .gage-ov .go-bar { height:20px !important; }
  .gage-ov .go-body { margin-top:0 !important; }
  .gage-ov .go-mine .mv, .gage-ov .go-btn { font-size:clamp(28px,2.4vw,44px) !important; }
  .gage-ov .go-mine .ms { font-size:clamp(13px,1vw,17px) !important; }
}

/* CRÉER UNE PARTIE sur PC : le cadre 3 colonnes (17_web.js) n'est construit
   qu'après le chargement complet des scripts. Sur Render, l'écran TÉLÉPHONE
   (PACKS 1/4, tuiles grises) restait affiché plusieurs secondes avant de
   basculer. Tant que le cadre n'existe pas, on ne montre pas l'écran mobile :
   un simple CHARGEMENT à la place. */
@media (min-width: 1024px) {
  #screen-packs:not(:has(> .hwframe)) > .s2 { visibility: hidden; }
  #screen-packs:not(:has(> .hwframe))::after {
    content: 'CHARGEMENT…'; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg);
    font-family: var(--font-d, 'Anton', sans-serif); font-size: 28px; letter-spacing: 2px; color: #0A0A0A;
    background: #FFD600; border: 4px solid #0A0A0A; box-shadow: 6px 6px 0 #0A0A0A; padding: 10px 22px;
    animation: hw-load-pulse 1s ease-in-out infinite;
  }
  @keyframes hw-load-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
}

/* PACK VERROUILLÉ (grand écran) : le bouton « + AJOUTER » passait PAR-DESSUS le
   voile et coupait le prix (cadenas, pièce et prix empilés au milieu). Un pack
   qu'on ne possède pas ne s'ajoute pas : le bouton disparaît, le voile reprend
   le dessus et le prix tient sur une ligne, avec l'action. */
@media (min-width: 1024px) {
  .hwframe .s2-pk.locked .s2-more, .hwframe .s2-pk.locked .stepper { display: none !important; }
  .hwframe .s2-pk .lk { z-index: 3; flex-direction: row !important; flex-wrap: wrap; align-content: flex-end; justify-content: flex-end !important;
    gap: 6px 8px !important; padding: 12px 14px; font-size: 18px !important; letter-spacing: .5px !important; background: rgba(10,10,10,.55) !important; }
  .hwframe .s2-pk .lk .nemoji { width: 22px !important; height: 22px !important; }
  .hwframe .s2-pk .lk::after { content: 'DÉBLOQUER'; flex-basis: 100%; text-align: right; font-size: 12px; letter-spacing: 1.6px;
    color: #FFD600; }
  /* le nom et l'icône restent lisibles au-dessus du voile */
  .hwframe .s2-pk.locked > :is(.ic, .nm) { position: relative; z-index: 4; }
}