/* ============================================================================
   EVENT « L'HEURE DU CARNAGE » — la peau de l'event.
   ----------------------------------------------------------------------------
   PRINCIPE : on ne redessine AUCUNE brique. On bascule deux tokens sur le
   conteneur de l'event et les 833 usages de var(--paper)/var(--ink) dans
   proto.css + brutal.css suivent tout seuls. couple.css fait déjà pareil.
   Conséquence utile : les ombres dures suivent --ink, donc elles passent en
   CLAIR sur la nuit — la règle « jamais noir sur ombre noire » est respectée
   par construction, pas à la main.

   Un futur event = un nouveau bloc de tokens ici. Rien d'autre.

   Tout ce qui est propre à l'event est préfixé .cx-  (carnage event) : aucun
   risque de collision avec le CSS de l'app (leçon de .lab, qui portait un
   min-height:100vh et faisait exploser un bloc à 904px).
   ========================================================================== */

/* SPÉCIFICITÉ : eveil.css pose --ink sur #sec-eveil (un ID). Une simple classe
   perdait le duel et l'encre restait noire sur fond noir. On qualifie donc la
   peau avec l'id du conteneur — #sec-eveil.ev-carnage bat #sec-eveil. */
#sec-eveil.ev-carnage,
.ev-carnage{
  /* ── LA BASCULE ── */
  --paper:#161013;            /* le « papier » devient la nuit, teintée rouge */
  --ink:#FFF1E2;              /* l'encre devient claire → bordures + ombres claires */
  --gray:#4A3B40; --gray2:#241A1E;
  /* les accents du mode restent ceux du socle */
  --orange:#FF9F45; --red:#FF5252; --green:#5BE885; --yellow:#FFD600; --cyan:#5BD8E5;
  /* l'encre à poser SUR un accent (le seul endroit où il faut du sombre) */
  --on-accent:#160E11;

  position:relative; flex-direction:column;
  min-height:100%; font-family:var(--font-m); color:var(--ink);
  background:
    radial-gradient(120% 70% at 15% 0%, #3A1220 0%, transparent 60%),
    radial-gradient(100% 60% at 90% 100%, #2A0E18 0%, transparent 55%),
    linear-gradient(180deg,#161013,#0C0709);
  background-color:#120C0F;
}

/* la trame de points HOMIES, en clair sur la nuit */
.cx-grid{position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:15px 15px;}

/* ── BANDEAU : la marque du mode, comme en jeu ───────────────────────────── */
.cx-bar{position:relative;display:flex;align-items:center;gap:9px;padding:15px 16px 0;}
.cx-brand{font-family:var(--font-d);font-size:16px;letter-spacing:1.5px;
  display:flex;align-items:center;gap:7px;}
.cx-clock{margin-left:auto;font-family:var(--font-d);font-size:23px;line-height:1;
  border:var(--bd-strong) solid var(--ink);background:var(--yellow);color:var(--on-accent);
  box-shadow:4px 4px 0 var(--ink);padding:5px 11px 6px;min-width:52px;text-align:center;}
.cx-clock.hot{background:var(--red);}

/* ── TITRAGE ─────────────────────────────────────────────────────────────── */
.cx-head-z{position:relative;padding:16px 16px 0;}
/* 1.16 rognait encore l'accent des capitales (le Ç de « ÇA ») quand la
   ligne suivante est un bloc inversé. 1.26 laisse passer la cédille. */
.cx-h1{font-family:var(--font-d);font-size:33px;line-height:1.26;padding-top:10px;}
.cx-h1.sm{font-size:28px;}
/* le mot en bloc inversé : display:inline-block OBLIGATOIRE, sinon son fond
   recouvre la ligne du dessus (défaut vu sur « CHOISIS » et « LA TABLE »). */
.cx-h1 em{display:inline-block;font-style:normal;background:var(--red);
  color:var(--on-accent);padding:1px 10px 4px;box-shadow:5px 5px 0 var(--ink);}
.cx-h1 em.or{background:var(--orange);} .cx-h1 em.gr{background:var(--green);}
.cx-h1 em.ye{background:var(--yellow);}
.cx-h2{font-size:13px;font-weight:700;opacity:.88;margin-top:10px;letter-spacing:.3px;line-height:1.4;}

/* pastille d'état (verdict, étape, manche) */
.cx-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);
  font-size:13px;letter-spacing:1.5px;color:var(--on-accent);
  border:var(--bd) solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 12px;}
.cx-tag.gr{background:var(--green);} .cx-tag.rd{background:var(--red);}
.cx-tag.ye{background:var(--yellow);} .cx-tag.or{background:var(--orange);}

/* ── LA MAIN DE CARTES (phase POUVOIR) ──────────────────────────────────── */
.cx-hand{position:relative;flex:1;padding:20px 16px 4px;display:flex;flex-direction:column;
  justify-content:center;gap:13px;}
.cx-c .bd{display:flex;align-items:stretch;padding:0;overflow:hidden;background:var(--gray2);}
.cx-c .cx-emo{width:72px;flex-shrink:0;display:grid;place-items:center;font-size:38px;
  border-right:var(--bd) solid var(--ink);}
.cx-c .cx-in{flex:1;min-width:0;padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px;}
.cx-c .cx-hd{display:flex;align-items:center;gap:9px;}
.cx-c .cx-nm{font-family:var(--font-d);font-size:21px;letter-spacing:.5px;line-height:1.14;}
.cx-c .cx-fam{margin-left:auto;flex-shrink:0;font-family:var(--font-d);font-size:10px;
  letter-spacing:1.2px;border:2px solid var(--ink);padding:3px 7px;color:var(--on-accent);}
.cx-c .cx-fx{font-family:var(--font-d);font-size:13.5px;letter-spacing:.5px;line-height:1;
  align-self:flex-start;border:2.5px solid var(--ink);padding:4px 9px;color:var(--on-accent);}
.cx-c .cx-ds{font-size:13px;font-weight:600;line-height:1.4;opacity:.92;}

/* la famille se lit sur les pastilles, plus sur des cadres colorés */
.cx-c.atk   .cx-fam,.cx-c.atk   .cx-fx{background:var(--red);}
.cx-c.def   .cx-fam,.cx-c.def   .cx-fx{background:var(--green);}
.cx-c.boost .cx-fam,.cx-c.boost .cx-fx{background:var(--yellow);}
.cx-c .cx-emo{background:rgba(255,241,226,.05);}

/* ── L'ÉPREUVE ───────────────────────────────────────────────────────────── */
.cx-hud{position:relative;display:flex;align-items:center;gap:8px;padding:14px 16px 8px;}
.cx-hud .sp{flex:1;}
.cx-score{font-family:var(--font-d);font-size:14px;line-height:1;border:2.5px solid var(--ink);
  background:var(--gray2);box-shadow:3px 3px 0 var(--ink);padding:6px 9px;}
.cx-time{position:relative;margin:0 16px;height:14px;border:var(--bd) solid var(--ink);
  background:var(--gray2);box-shadow:4px 4px 0 var(--ink);overflow:hidden;}
.cx-time i{display:block;height:100%;background:
  repeating-linear-gradient(90deg,var(--orange) 0 9px,#C77524 9px 18px);}
.cx-q{position:relative;margin:18px 16px 0;}
.cx-q .bd{font-size:19px;line-height:1.25;text-align:center;padding:18px 14px;background:var(--gray2);}
.cx-ans{position:relative;padding:14px 16px 6px;display:flex;flex-direction:column;gap:11px;}
.cx-ans .opt .bd{background:var(--gray2);}
.cx-ans .opt.a .lbox{background:var(--magenta);color:var(--on-accent);}
.cx-ans .opt.b .lbox{background:var(--cyan);color:var(--on-accent);}
.cx-ans .opt.c .lbox{background:var(--yellow);color:var(--on-accent);}
.cx-ans .opt.d .lbox{background:var(--green);color:var(--on-accent);}
/* révélation */
.cx-ans .opt.ok .bd{background:#123B22;border-color:var(--green);}
.cx-ans .opt.no .bd{background:#3B1218;border-color:var(--red);}

/* ── LE VERDICT ──────────────────────────────────────────────────────────── */
.cx-fb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:20px;text-align:center;}
.cx-mark{width:96px;height:96px;border:6px solid var(--ink);display:grid;place-items:center;
  box-shadow:8px 8px 0 var(--ink);}
.cx-mark.ok{background:var(--green);} .cx-mark.no{background:var(--red);}
/* la coche et la croix sont TRACÉES, jamais le glyphe ✓ */
.cx-tick{width:44px;height:24px;border-left:9px solid var(--on-accent);
  border-bottom:9px solid var(--on-accent);transform:rotate(-45deg) translateY(-6px);}
.cx-cross{position:relative;width:44px;height:44px;}
.cx-cross::before,.cx-cross::after{content:'';position:absolute;top:50%;left:0;width:100%;
  height:9px;background:var(--on-accent);}
.cx-cross::before{transform:rotate(45deg);} .cx-cross::after{transform:rotate(-45deg);}
.cx-verdict{font-family:var(--font-d);font-size:30px;line-height:1.1;}
.cx-ansline{font-size:14px;font-weight:600;line-height:1.45;opacity:.9;}
.cx-ansline b{color:var(--yellow);}
.cx-pts{font-family:var(--font-d);font-size:52px;line-height:1;}
.cx-pts.up{color:var(--green);} .cx-pts.down{color:var(--red);}
.cx-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
.cx-chip{font-size:11.5px;font-weight:700;letter-spacing:.3px;border:2px solid var(--ink);
  padding:4px 8px;background:var(--gray2);}
.cx-chip.dn{background:var(--red);color:var(--on-accent);}
.cx-chip.up{background:var(--green);color:var(--on-accent);}

/* ── LA TABLE / LE CLASSEMENT ────────────────────────────────────────────── */
.cx-list{position:relative;padding:16px 16px 6px;display:flex;flex-direction:column;gap:9px;}
/* ACCUEIL : le contenu (titre + carte « ce qui se joue ») se centre dans
   l'espace laissé libre au-dessus des boutons — sinon, en plein écran, un grand
   vide s'ouvre entre la carte et le pied. */
.cx-amid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;}
.cx-amid .cx-list{padding-top:10px;padding-bottom:10px;}
.cx-r{position:relative;}
.cx-r .bd{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--gray2);}
.cx-r .cx-rk{font-family:var(--font-d);font-size:18px;min-width:24px;text-align:center;}
.cx-r .cx-av{width:36px;height:36px;flex-shrink:0;border:2.5px solid var(--ink);
  background:var(--gray);overflow:hidden;}
.cx-r .cx-av img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-r .cx-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.cx-r .cx-nk{font-family:var(--font-d);font-size:15px;letter-spacing:.3px;}
.cx-r .cx-nk small{opacity:.55;font-size:11px;}
.cx-hit{align-self:flex-start;font-size:10.5px;font-weight:700;line-height:1;
  border:2px solid var(--ink);padding:3px 6px;white-space:nowrap;color:var(--on-accent);}
.cx-hit.dn{background:var(--red);} .cx-hit.up{background:var(--green);} .cx-hit.sh{background:var(--cyan);}
.cx-mv{font-family:var(--font-d);font-size:12px;min-width:30px;text-align:right;}
.cx-mv.up{color:var(--green);} .cx-mv.dn{color:var(--red);} .cx-mv.eq{opacity:.35;}
.cx-sc{font-family:var(--font-d);font-size:17px;}
/* ta ligne : l'accent, jamais un fond noir */
.cx-r.me .bd{background:#3A2410;border-color:var(--orange);}
.cx-r.me::before{background:var(--orange);}
.cx-gap{text-align:center;font-family:var(--font-d);font-size:15px;letter-spacing:4px;opacity:.4;}

/* ── PIEDS D'ÉCRAN ───────────────────────────────────────────────────────── */
.cx-foot{position:relative;margin-top:auto;padding:10px 16px 22px;
  display:flex;flex-direction:column;gap:9px;}
.cx-hint{font-size:12.5px;font-weight:600;opacity:.85;text-align:center;line-height:1.4;}
.cx-hint b{opacity:1;color:var(--yellow);}
/* le CTA du socle : on ne change QUE la couleur de fond, jamais sa structure */
.ev-carnage .cta .bd{background:var(--orange);color:var(--on-accent);}
/* fantôme : le fond doit COUVRIR l'ombre claire, sinon on voit un bloc crème vide */
.ev-carnage .cta.gh .bd{background:var(--paper);color:var(--ink);}

/* ── « ONT RÉPONDU » : le composant de l'app, pas une invention ──────────── */
.cx-ghfoot{position:relative;display:flex;align-items:center;gap:9px;padding:8px 16px 0;}
.cx-ghfoot .gf-avas{display:flex;}
.cx-ghfoot .gf-av{width:28px;height:28px;border:2px solid var(--ink);overflow:hidden;
  background:var(--gray);margin-left:-9px;display:grid;place-items:center;font-size:15px;}
.cx-ghfoot .gf-av:first-child{margin-left:0;}
.cx-ghfoot .gf-txt{font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:1px;
  color:color-mix(in srgb, var(--ink) 60%, transparent);}
.cx-ghfoot .gf-dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  border:2px solid var(--ink);margin-left:auto;flex-shrink:0;}

/* ── GRILLES (cartes signature, cibles) ─────────────────────────────────── */
.cx-grid2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;}
.cx-pick .bd{padding:12px 10px 13px;display:flex;flex-direction:column;align-items:center;
  gap:7px;background:var(--gray2);text-align:center;}
.cx-pick .cx-pe{font-size:40px;line-height:1;}
.cx-pick .cx-pn{font-family:var(--font-d);font-size:16px;letter-spacing:.4px;}
.cx-pick .cx-pd{font-size:11px;font-weight:600;line-height:1.3;opacity:.8;}
.cx-pick.on .bd{background:#3A2410;border-color:var(--orange);}
.cx-pick.on::before{background:var(--orange);}
.cx-pick.off .bd{opacity:.42;}

/* ============================================================================
   SUITE — les briques des beats qui manquaient au parcours.
   Toujours la même règle : rien du socle n'est redéfini, tout est en .cx-.
   ========================================================================== */

/* ── LA RÈGLE EN 3 TEMPS (ouverture) ────────────────────────────────────── */
.cx-steps{display:flex;flex-direction:column;gap:10px;}
.cx-st{display:flex;align-items:flex-start;gap:11px;}
.cx-st .n{flex-shrink:0;font-family:var(--font-d);font-size:15px;line-height:1;
  background:var(--orange);color:var(--on-accent);border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);padding:5px 9px;}
.cx-st .t{font-size:13.5px;font-weight:700;line-height:1.35;padding-top:3px;}
.cx-st .t b{color:var(--yellow);}

/* ── LE COMPTE À REBOURS ────────────────────────────────────────────────── */
.cx-cd{font-family:var(--font-d);font-size:52px;line-height:1;}
.cx-cd small{font-size:19px;opacity:.5;}
.cx-lab{font-family:var(--font-d);font-size:12px;letter-spacing:2px;opacity:.6;}

/* ── LE BUTIN (Rewards) ─────────────────────────────────────────────────── */
.cx-prize .bd{display:flex;align-items:center;gap:11px;padding:10px 11px;background:var(--gray2);}
.cx-prize .cx-pl{flex-shrink:0;font-family:var(--font-d);font-size:14px;line-height:1;
  border:2.5px solid var(--ink);padding:5px 8px;color:var(--on-accent);min-width:42px;text-align:center;}
.cx-prize.g1 .cx-pl{background:var(--yellow);} .cx-prize.g2 .cx-pl{background:#DADADA;}
.cx-prize.g3 .cx-pl{background:var(--orange);} .cx-prize .cx-pl{background:var(--gray);color:var(--ink);}
.cx-prize.g1 .cx-pl,.cx-prize.g2 .cx-pl,.cx-prize.g3 .cx-pl{color:var(--on-accent);}
.cx-prize .cx-pw{flex:1;min-width:0;}
.cx-prize .cx-pw b{display:block;font-family:var(--font-d);font-size:15px;letter-spacing:.3px;}
.cx-prize .cx-pw span{font-size:11.5px;font-weight:600;opacity:.8;line-height:1.3;}
.cx-prize.g1 .bd{background:#3A2E10;border-color:var(--yellow);}
/* la vedette : le lot du 1ᵉʳ, avec son visuel */
.cx-star .bd{padding:0;overflow:hidden;background:var(--gray2);}
.cx-star .cx-img{height:150px;border-bottom:var(--bd) solid var(--ink);overflow:hidden;background:var(--gray);}
.cx-star .cx-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-star .cx-body{padding:12px;}

/* ── LA FILE (grille des joueurs présents) ──────────────────────────────── */
/* 3 colonnes : l'ombre dure déborde de 4 px à droite, la 3ᵉ tuile était
   coupée par le bord de l'écran. On lui laisse la place. */
.cx-ppl{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding-right:5px;}
.cx-pp{display:flex;flex-direction:column;align-items:center;gap:6px;}
.cx-pp .a{width:100%;aspect-ratio:1;border:var(--bd) solid var(--ink);background:var(--gray2);
  display:grid;place-items:center;font-size:30px;box-shadow:4px 4px 0 var(--ink);}
.cx-pp .n{font-family:var(--font-d);font-size:12px;letter-spacing:.3px;}
.cx-pp.hole .a{background:transparent;border-style:dashed;opacity:.45;font-size:20px;}
.cx-pp.hole .n{opacity:.4;}
.cx-fill{display:flex;align-items:baseline;gap:8px;}
.cx-fill .b{font-family:var(--font-d);font-size:44px;line-height:1;}
.cx-fill .s{font-family:var(--font-d);font-size:20px;opacity:.45;}

/* ── LE PAQUET COMPLET (GOD MODE) ───────────────────────────────────────── */
.cx-deck{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:470px;overflow-y:auto;
  padding:2px 2px 6px;}
.cx-dc .bd{padding:10px 8px 11px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--gray2);text-align:center;}
.cx-dc .e{font-size:28px;line-height:1;}
.cx-dc .n{font-family:var(--font-d);font-size:13px;letter-spacing:.3px;line-height:1.1;}
.cx-dc .f{font-size:9.5px;font-weight:700;border:2px solid var(--ink);padding:2px 5px;
  color:var(--on-accent);line-height:1;}
.cx-dc.atk .f{background:var(--red);} .cx-dc.def .f{background:var(--green);}
.cx-dc.boost .f{background:var(--yellow);}

/* ── LE BUZZER ──────────────────────────────────────────────────────────── */
.cx-buzz{width:200px;height:200px;border-radius:50%;border:7px solid var(--ink);
  background:var(--red);color:var(--on-accent);font-family:var(--font-d);font-size:34px;
  box-shadow:0 9px 0 var(--ink);display:grid;place-items:center;margin:0 auto;}
.cx-buzz.taken{background:var(--gray);color:var(--ink);font-size:20px;}

/* ── LE BON ORDRE ───────────────────────────────────────────────────────── */
.cx-slots{display:flex;flex-direction:column;gap:9px;}
.cx-slot{display:flex;align-items:center;gap:11px;border:var(--bd) solid var(--ink);
  background:var(--gray2);box-shadow:4px 4px 0 var(--ink);padding:10px 11px;}
.cx-slot .n{font-family:var(--font-d);font-size:16px;min-width:22px;}
.cx-slot .it{font-family:var(--font-d);font-size:15px;flex:1;}
.cx-slot.empty{border-style:dashed;background:transparent;box-shadow:none;opacity:.5;}
.cx-slot.ok{background:#123B22;border-color:var(--green);}
.cx-slot.no{background:#3B1218;border-color:var(--red);}
.cx-slot .was{font-size:10.5px;font-weight:700;opacity:.75;}
.cx-pool{display:flex;flex-wrap:wrap;gap:8px;}
.cx-pool .it{font-family:var(--font-d);font-size:14px;border:var(--bd) solid var(--ink);
  background:var(--gray2);box-shadow:3px 3px 0 var(--ink);padding:8px 11px;}

/* ── LE MÉDIA D'UNE QUESTION ────────────────────────────────────────────── */
.cx-media{margin:14px 16px 0;border:var(--bd) solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  overflow:hidden;background:var(--gray2);height:170px;}
.cx-media img{width:100%;height:100%;object-fit:contain;display:block;}

/* ── LE MINI-CLASSEMENT (sur le verdict) ────────────────────────────────── */
.cx-mini{display:flex;flex-direction:column;gap:6px;width:100%;}
.cx-mini .r{display:flex;align-items:center;gap:9px;border:2.5px solid var(--ink);
  background:var(--gray2);padding:6px 9px;font-size:12.5px;font-weight:700;}
.cx-mini .r .k{font-family:var(--font-d);font-size:14px;min-width:20px;}
.cx-mini .r .n{flex:1;text-align:left;}
.cx-mini .r .s{font-family:var(--font-d);font-size:14px;}
.cx-mini .r.me{background:#3A2410;border-color:var(--orange);}

/* ── LES PORTES (mobile only, pas de compte, heure finie) ───────────────── */
.cx-gate{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;padding:26px 22px;text-align:center;}
.cx-gate .em{font-size:58px;line-height:1;}
.cx-gate .t{font-family:var(--font-d);font-size:27px;line-height:1.12;}
.cx-gate .s{font-size:13.5px;font-weight:600;line-height:1.45;opacity:.85;}
.cx-gate .s b{color:var(--yellow);}

/* ── L'ÉLIMINATION ──────────────────────────────────────────────────────── */
.cx-out .em{font-size:66px;}
.cx-out .t{font-family:var(--font-d);font-size:32px;line-height:1.1;color:var(--red);}

/* ============================================================================
   LE SPLASH DE L'EVENT — même mécanisme que la peau : on ne refait PAS le
   splash, on rebascule son bloc de tokens. La structure (.sp-burst, .sp-decor,
   .sp-mid, .sp-bottom…) reste celle de screens/app/splash.html.
   ========================================================================== */
.splash-screen.sp-carnage{
  --sp-blue:#1A0A10;          /* le fond bleu du splash devient la nuit carnage */
  --si:#160E11;               /* encre à poser sur un accent */
  --sw:#FFF1E2;               /* le blanc se réchauffe */
  --sy:#FFD600; --sm:#FF5252; --sr:#FF9F45; --sc:#FF9F45;
  background-color:#150A0E; animation:none;
  background-image:
    radial-gradient(120% 70% at 20% 0%, #4A1526 0%, transparent 62%),
    radial-gradient(100% 60% at 85% 100%, #2A0E18 0%, transparent 58%);
}
/* LE TITRE — on garde le composant tel quel : Anton, l'ombre empilée sur 5
   couches, les animations de slam. On ne change que la TAILLE de la 1ʳᵉ ligne
   (« L'HEURE DU » ne rentre pas à 96 px) et la COULEUR de la 2ᵉ.
   Piège évité : poser un fond sur .l2 la rendait illisible, l'ombre noire du
   composant se superposant au bloc rouge. */
.splash-screen.sp-carnage .sp-title{line-height:1;}   /* .82 faisait chevaucher les 2 lignes */
.splash-screen.sp-carnage .sp-title .l1{font-size:min(12vw,48px);color:var(--sw);letter-spacing:3px;}
.splash-screen.sp-carnage .sp-title .l2{color:var(--sm);margin-top:2px;}
.splash-screen.sp-carnage .sp-live{background:var(--sm);color:var(--si);}
.splash-screen.sp-carnage .sp-bar{border-color:var(--sw);}
.splash-screen.sp-carnage .sp-bar i{background:var(--sr);}

/* ============================================================================
   BOUTONS BÂTIS SUR UN COMPOSANT DE BLOC.
   Les cartes et les options sont des <button> (sémantique tactile juste), mais
   un bouton se réduit à son contenu : les cartes .card sortaient écrasées en
   colonnes de 40 px. On leur rend le comportement de bloc du composant, sans
   toucher au composant lui-même.
   ========================================================================== */
.ev-carnage button.card,
.ev-carnage button.opt,
.ev-carnage button.cta{
  display:block; width:100%; text-align:left; font:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0; -webkit-tap-highlight-color:transparent;
}
.ev-carnage button.cta{ text-align:center; }
.ev-carnage button.card:active,
.ev-carnage button.opt:active{ transform:translate(2px,2px); }
/* une carte grisée quand elle n'est plus jouable */
.ev-carnage .cx-carte[disabled]{ opacity:.45; }
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte.chosen .bd{ border-color:var(--orange); }

/* Le ✕ de sortie vit en absolu en haut à droite (eveil.css) — il tombait pile
   sur le chrono. En peau carnage on le pose dans le bandeau, à gauche du
   chrono, et on lui donne l'allure du reste : bordure claire, ombre dure. */
.ev-carnage .ev-close{
  position:absolute; top:14px; right:14px; z-index:90; width:34px; height:34px;
  border:2.5px solid var(--ink); background:var(--gray2); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); font-size:15px; line-height:1; border-radius:0;
}
.ev-carnage .cx-bar{ padding-right:60px; }   /* le chrono ne passe jamais sous le ✕ */

/* ============================================================================
   .ev-lootpick — la classe est le HOOK DE CLIC du parcours (gestionnaire
   délégué de eveil.js), on la garde. Mais eveil.css lui impose sa boîte
   d'origine : `flex:1 1 118px; max-width:132px`. Résultat mesuré : des cartes
   de 132×278 px au lieu de 358×110. En peau carnage on lui rend une boîte
   neutre — c'est le composant .card qui décide, pas l'ancienne peau.
   ========================================================================== */
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte{
  flex:none; max-width:none; min-width:0; width:100%;
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
  transform:none; transition:none;
}
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte:hover,
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte:focus-visible{
  transform:none; background:none; box-shadow:none; outline:none;
}
/* dans le paquet complet (GOD MODE) c'est la grille qui donne la largeur */
.ev-carnage .cx-deck .ev-lootpick{ width:auto; }
/* les enfants du composant reprennent la main sur ceux de l'ancienne peau */
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte .cx-emo,
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte .cx-nm,
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte .cx-fx,
.ev-carnage .ev-lootpick, .ev-carnage .cx-carte .cx-ds{ color:inherit; }

/* ============================================================================
   LA CARTE DE L'EVENT SUR L'ACCUEIL.
   Elle vit dans le flux CRÈME de l'accueil : c'est le seul endroit où la peau
   sombre s'invite dans le design clair. Donc pas de bascule de tokens ici —
   un bloc sombre assumé, avec l'ombre dure claire du socle pour le détacher.
   ========================================================================== */
#hvEveil.eh-carnage{
  /* elle était COLLÉE à la carte joueur au-dessus : l'ombre dure déborde de
     6 px en bas et à droite, il faut donc de la marge des deux côtés. */
  display:block; position:relative; cursor:pointer; margin:14px 0 18px;
  -webkit-tap-highlight-color:transparent;
}
#hvEveil.eh-carnage::before{
  content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px;
  background:var(--ink, #0A0A0A);
}
#hvEveil.eh-carnage .ehc-bd{
  position:relative; border:4px solid var(--ink, #0A0A0A); padding:15px 16px 16px;
  color:#FFF1E2; overflow:hidden;
  background:
    radial-gradient(120% 80% at 12% 0%, #4A1526 0%, transparent 62%),
    linear-gradient(180deg,#1B1014,#0E0709);
}
#hvEveil.eh-carnage .ehc-top{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap;}
#hvEveil.eh-carnage .ehc-badge{
  font-family:var(--fd); font-size:11.5px; letter-spacing:1.5px; line-height:1;
  background:#FFD600; color:#160E11; border:2.5px solid #FFF1E2; padding:5px 9px;
  display:inline-flex; align-items:center; gap:6px;
}
#hvEveil.eh-carnage .ehc-badge.live{background:#FF5252;}
#hvEveil.eh-carnage .ehc-dot{
  width:8px;height:8px;border-radius:50%;background:#160E11;
  animation:ehcPulse 1s ease-in-out infinite alternate;
}
@keyframes ehcPulse{from{opacity:1}to{opacity:.25}}
#hvEveil.eh-carnage .ehc-when{font-size:11px;font-weight:700;opacity:.7;letter-spacing:.3px;}
#hvEveil.eh-carnage .ehc-t{font-family:var(--fd);font-size:30px;line-height:1.14;}
#hvEveil.eh-carnage .ehc-t em{
  font-style:normal; display:inline-block; background:#FF5252; color:#160E11;
  padding:1px 9px 3px; box-shadow:4px 4px 0 #FFF1E2;
}
#hvEveil.eh-carnage .ehc-s{font-size:12.5px;font-weight:600;line-height:1.4;opacity:.85;margin-top:10px;}
#hvEveil.eh-carnage .ehc-go{
  margin-top:13px; font-family:var(--fd); font-size:16px; letter-spacing:1.5px; text-align:center;
  background:#FF9F45; color:#160E11; border:3px solid #FFF1E2; box-shadow:4px 4px 0 #FFF1E2; padding:11px;
}
#hvEveil.eh-carnage .ehc-cd{margin-top:13px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
#hvEveil.eh-carnage .ehc-cd .l{font-family:var(--fd);font-size:10.5px;letter-spacing:2px;opacity:.6;}
#hvEveil.eh-carnage .ehc-cd .v{font-family:var(--fd);font-size:26px;line-height:1;color:#FFD600;}

/* ⚠ NE JAMAIS poser `display` sur #sec-eveil.ev-carnage : un id+classe bat
   `.sec:not(.active){display:none}` de app.css, et la section restait visible
   SOUS l'accueil (constaté : « je clique sur accueil, je scrolle, j'ai encore
   l'écran carnage »). On ne l'affiche donc QUE quand elle est active. */
#sec-eveil.ev-carnage.active{ display:flex; }
#sec-eveil.ev-carnage:not(.active){ display:none; }

/* ── ÉCRAN D'ANNONCE (la bascule) — il dure 1,7 s, il remplit le cadre ──── */
.cx-boom{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:18px;padding:26px 20px;}
.cx-boom-t{font-family:var(--font-d);font-size:52px;line-height:1.02;}
.cx-boom-t em{display:inline-block;font-style:normal;background:var(--red);color:var(--on-accent);
  padding:2px 12px 6px;box-shadow:7px 7px 0 var(--ink);}
.cx-boom-l{height:16px;border:var(--bd) solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,var(--orange) 8px 16px);}
.cx-boom-s{font-family:var(--font-d);font-size:13px;letter-spacing:2px;opacity:.7;}

/* ── DÉCOMPTE DE DÉPART ─────────────────────────────────────────────────── */
.cx-startcd{display:flex;align-items:center;gap:16px;}
.cx-startcd .n{font-family:var(--font-d);font-size:86px;line-height:.9;color:var(--orange);min-width:100px;}
.cx-startcd .l{font-family:var(--font-d);font-size:13px;letter-spacing:1.5px;line-height:1.5;opacity:.8;}

/* ── ÉTAT VIDE ──────────────────────────────────────────────────────────── */
.cx-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 18px;}
.cx-vide .e{font-size:54px;line-height:1;opacity:.5;}
.cx-vide .t{font-family:var(--font-d);font-size:24px;line-height:1.1;}
.cx-vide .s{font-size:13px;font-weight:600;line-height:1.45;opacity:.8;max-width:28ch;}
.cx-vide .s b{color:var(--yellow);}

/* l'avatar réel d'un joueur dans les tuiles et les lignes */
.ev-carnage .cx-pp .a .ava-emo,
.ev-carnage .cx-av .ava-emo{display:block;width:100%;height:100%;}
.ev-carnage .cx-pp .a .ava-emo img,
.ev-carnage .cx-av .ava-emo img{width:100%;height:100%;display:block;object-fit:cover;}
.ev-carnage .cx-pp .a{padding:0;overflow:hidden;}
.ev-carnage .gf-av .ava-emo{display:block;width:100%;height:100%;}
.ev-carnage .gf-av .ava-emo img{width:100%;height:100%;display:block;}
.ev-carnage .cx-emoji{display:grid;place-items:center;width:100%;height:100%;}

/* ============================================================================
   LE CADRAGE — la raison pour laquelle l'implémentation ne ressemblait pas aux
   maquettes. `.sec` (app.css) impose `padding: 22px 18px 30px` et
   `max-width: 780px`. Ça s'AJOUTAIT aux 16 px de la peau : espaces latéraux
   doublés, contenu tassé au centre. L'accueil règle ça en remettant le padding
   de .sec à zéro (`#sec-stats, #sec-defis, #sec-reglages { padding: 0 }`) —
   on fait pareil ici, et les écrans retrouvent le cadrage des maquettes.
   ========================================================================== */
#sec-eveil.ev-carnage{ padding:0; max-width:430px; }

/* ── SÉLECTEUR D'AVATAR SUR PLACE ────────────────────────────────────────────
   Même matière qu'à l'inscription : l'aperçu, les couleurs de fond, la grille
   de styles, un dé. Rien ne quitte l'écran de l'event — le détour par
   l'éditeur de profil était trop long.
   ========================================================================== */
/* ⚠ PAS de padding horizontal ici : ces blocs sont DANS .cx-hand, qui pose
   déjà 16 px. Le doubler décalait les tuiles à 32 px alors que le titre, les
   boutons et le reste sont à 16 — c'est le décalage gauche/droite constaté. */
.cx-moi{display:flex;align-items:center;gap:14px;}
.cx-moi-av{width:96px;height:96px;flex-shrink:0;border:var(--bd-strong) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);overflow:hidden;background:var(--gray2);}
.cx-moi-av .ava-emo,.cx-moi-av > *{display:block;width:100%;height:100%;}
.cx-moi-av img{width:100%;height:100%;display:block;object-fit:cover;}
.cx-moi-d{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.cx-moi-nk{font-family:var(--font-d);font-size:26px;letter-spacing:.5px;line-height:1;}

/* les couleurs remplissent la largeur restante, plus de bloc centré dans le vide */
.cx-avcols{display:flex;gap:7px;flex-wrap:wrap;}
.cx-avc{width:26px;height:26px;border:2.5px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);
  padding:0;cursor:pointer;flex:0 0 auto;}
.cx-avc.on{border-width:4px;box-shadow:3px 3px 0 var(--orange);}

.cx-avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding-bottom:4px;}
.cx-avs{padding:0;border:var(--bd) solid var(--ink);background:var(--gray2);
  box-shadow:3px 3px 0 var(--ink);overflow:hidden;aspect-ratio:1;cursor:pointer;}
.cx-avs .ava-emo,.cx-avs > *{display:block;width:100%;height:100%;}
.cx-avs img{width:100%;height:100%;display:block;}
.cx-avs.on{border-color:var(--orange);box-shadow:3px 3px 0 var(--orange);}
.cx-avs:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}

/* ── RAPPORT DE MANCHE : qui t'a attaqué, avec quoi ──────────────────────────
   Le vrai mode a son écran (creport) mais son CSS vit dans play.css, non
   chargé sur l'app. On le rebâtit ici, avec les mêmes données serveur.
   ========================================================================== */
.cx-rap .bd{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--gray2);}
.cx-rap-e{font-size:30px;line-height:1;flex-shrink:0;width:42px;text-align:center;}
.cx-rap-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cx-rap-tx b{font-family:var(--font-d);font-size:16px;letter-spacing:.3px;font-weight:400;}
.cx-rap-tx span{font-size:11.5px;font-weight:700;opacity:.7;}
.cx-rap-amt{font-family:var(--font-d);font-size:17px;flex-shrink:0;padding:4px 8px;
  border:2.5px solid var(--ink);color:var(--on-accent);}
.cx-rap-amt.dn{background:var(--red);} .cx-rap-amt.up{background:var(--green);}
.cx-rap-amt.sh{background:var(--cyan);font-size:12px;}

/* ============================================================================
   LE FOND DE L'EVENT — peint sur le BODY, pas sur la seule section.
   `main` est en display:block : le `flex:1` de .sec ne s'applique pas et son
   `min-height:100%` ne se résout pas (hauteur du parent non définie). La
   section s'arrêtait donc 12 px au-dessus de la nav, laissant une bande crème.
   En peignant le body, il ne peut plus y avoir de trou, quelle que soit la
   hauteur du contenu.
   ========================================================================== */
body.carnage-on{
  background:
    radial-gradient(120% 55% at 15% 0%, #3A1220 0%, transparent 60%),
    radial-gradient(100% 45% at 90% 100%, #2A0E18 0%, transparent 55%),
    linear-gradient(180deg,#161013,#0C0709) !important;
  background-color:#120C0F !important;
  background-attachment:fixed;
}
/* la section devient transparente : c'est le body qui porte le décor */
#sec-eveil.ev-carnage{ background:none; }
/* la nav du bas reste lisible sur la nuit */
body.carnage-on .bottom-nav{ border-top-color:var(--ink, #0A0A0A); }

/* ── LE CHOIX DE CIBLE ───────────────────────────────────────────────────── */
.ev-carnage button.cx-cible{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  background:none;border:0;padding:0;margin:0;-webkit-tap-highlight-color:transparent;}
.ev-carnage .cx-cible:active{transform:translate(2px,2px);}
.ev-carnage .cx-cible.on .bd{background:#3A2410;border-color:var(--orange);}
.ev-carnage .cx-cible[disabled]{opacity:.45;}

/* un avatar-IMAGE possédé (boutique, lot d'event) dans le sélecteur et les listes */
.cx-avimg{width:100%;height:100%;display:block;object-fit:cover;}
.cx-avs.spe{border-color:var(--yellow);box-shadow:3px 3px 0 var(--yellow);}
.cx-avs.spe.on{border-color:var(--orange);box-shadow:3px 3px 0 var(--orange);}

/* Les réponses portent .cx-rep (et plus .ev-qopt) : eveil.css imposait à
   .ev-qopt son propre padding, son fond et une bordure de 1 px, ce qui
   écrasait le composant .opt du socle — les cartes de réponse ne
   ressemblaient plus à la maquette. */
.ev-carnage .cx-rep.ok .bd{background:#123B22;border-color:var(--green);}
.ev-carnage .cx-rep.no .bd{background:#3B1218;border-color:var(--red);}
.ev-carnage .cx-rep[disabled]{opacity:.62;}
.ev-carnage .cx-rep.sel .bd{border-color:var(--orange);}

/* ── « ÇA COMMENCE » — nouvelle interface ────────────────────────────────────
   L'ancienne empilait un gros chiffre, deux lignes de texte et une grille de
   joueurs qui débordait — et qui répétait l'écran de file. Ici le décompte
   tient l'écran, les joueurs deviennent une frise d'avatars qui se
   chevauchent, et la règle tient sur une ligne.
   ========================================================================== */
.cx-go{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:24px 18px;text-align:center;}
.cx-go-tag{margin-bottom:2px;}
.cx-go-n{font-family:var(--font-d);font-size:150px;line-height:.82;color:var(--orange);
  text-shadow:7px 7px 0 var(--ink);}
.cx-go-t{font-family:var(--font-d);font-size:34px;line-height:1;letter-spacing:1px;}
.cx-frise{display:flex;justify-content:center;padding-left:11px;}
.cx-frise-a{width:44px;height:44px;flex-shrink:0;border:3px solid var(--ink);
  background:var(--gray2);overflow:hidden;margin-left:-11px;display:grid;place-items:center;font-size:22px;}
.cx-frise-a .ava-emo,.cx-frise-a > *{display:block;width:100%;height:100%;}
.cx-frise-a img{width:100%;height:100%;display:block;object-fit:cover;}
.cx-go-r{font-size:13px;font-weight:700;opacity:.85;}
.cx-go-r b{color:var(--yellow);}

/* ============================================================================
   LA BASCULE — « L'IMPACT ».
   Reprend la mise en scène du splash web validé (design-mockups/s31-splash-web-a) :
   le titre TOMBE et s'écrase, l'écran encaisse, deux ondes de choc partent du
   point d'impact et les stickers sont PROJETÉS du centre vers les bords.
   Différence avec le splash : pas de GSAP (il n'est chargé que sur desktop) —
   tout est en CSS, donc ça marche sur téléphone.
   Et surtout : FOND SATURÉ. Mes essais précédents étaient sombre sur sombre,
   rien ne ressortait.
   ========================================================================== */
.cx-imp{
  --ink:#0A0A0A; --paper:#FFFEF7; --jaune:#FFD600; --cyan:#5BD8E5; --vert:#5BE885;
  position:absolute; inset:0; overflow:hidden; background:#FF5252;
  background-image:radial-gradient(rgba(0,0,0,.16) 1.3px, transparent 1.3px);
  background-size:15px 15px;
  animation:cxSecousse .5s cubic-bezier(.36,.07,.19,.97) .5s both;
}
@keyframes cxSecousse{
  10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-8px,2px)} 40%,60%{transform:translate(8px,-1px)}
  100%{transform:none}
}
/* les ondes de choc, au moment de l'écrasement */
.cx-imp .onde{position:absolute;left:50%;top:47%;width:180px;height:180px;margin:-90px 0 0 -90px;
  border:7px solid var(--ink);border-radius:50%;opacity:0;
  animation:cxOnde 1.1s cubic-bezier(.2,.8,.3,1) .5s both;}
.cx-imp .onde.b2{border-color:var(--jaune);border-width:6px;animation-delay:.62s;}
@keyframes cxOnde{0%{transform:scale(.15);opacity:1}70%{opacity:.35}100%{transform:scale(4.6);opacity:0}}
/* les stickers PROJETÉS du centre vers les bords */
/* Les stickers sont posés en ABSOLU dans les bandes libres mesurées
   (150-319 et 515-667) : les déduire du centre les faisait tomber sur le
   titre et sur la barre à chaque changement de composition. La projection
   part du centre via --fx/--fy, propre à chaque sticker. */
.cx-imp .chip{position:absolute;width:74px;height:74px;
  display:grid;place-items:center;font-size:36px;border:4px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);opacity:0;
  animation:cxProj .5s cubic-bezier(.2,1.3,.35,1) .52s both;}
@keyframes cxProj{
  from{transform:translate(var(--fx,0),var(--fy,0)) rotate(0) scale(.2);opacity:0}
  to{transform:rotate(var(--rot,0deg));opacity:1}
}
.cx-imp .chip.j{background:var(--jaune);} .cx-imp .chip.c{background:var(--cyan);}
.cx-imp .chip.v{background:var(--vert);}  .cx-imp .chip.p{background:var(--paper);}
/* le titre : il tombe, puis s'écrase */
.cx-imp .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;z-index:3;}
.cx-imp .live{font-family:var(--font-d);font-size:14px;letter-spacing:3px;color:var(--ink);
  background:var(--jaune);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  padding:7px 15px;display:inline-flex;align-items:center;gap:8px;opacity:0;
  animation:cxApp .3s ease .78s both;}
.cx-imp .live i{width:9px;height:9px;border-radius:50%;background:var(--ink);
  animation:cxClign 1s steps(2,end) infinite;}
@keyframes cxClign{50%{opacity:.2}}
.cx-imp .t{text-align:center;line-height:1;}
.cx-imp .l1{font-family:var(--font-d);font-size:44px;letter-spacing:2px;color:var(--paper);
  text-shadow:7px 7px 0 var(--ink);animation:cxTombe .5s cubic-bezier(.55,0,.9,.4) both;}
.cx-imp .l2{font-family:var(--font-d);font-size:76px;color:var(--jaune);margin-top:20px;
  text-shadow:9px 9px 0 var(--ink);animation:cxTombe .5s cubic-bezier(.55,0,.9,.4) .1s both;}
@keyframes cxTombe{from{transform:translateY(-380px) scale(1.35);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}}
.cx-imp .tuiles{display:flex;gap:12px;opacity:0;animation:cxApp .3s ease .86s both;}
.cx-imp .tuile{width:70px;height:70px;display:grid;place-items:center;font-size:34px;
  border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);}
@keyframes cxApp{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
.cx-imp .bas{position:absolute;left:24px;right:24px;bottom:42px;z-index:4;opacity:0;
  animation:cxApp .3s ease .94s both;}
.cx-imp .barre{height:20px;border:4px solid var(--ink);background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);overflow:hidden;}
.cx-imp .barre i{display:block;height:100%;width:0;background:var(--ink);
  animation:cxCharge 1.1s linear .96s forwards;}
@keyframes cxCharge{to{width:100%}}
.cx-imp .chg{margin-top:12px;text-align:center;font-family:var(--font-d);font-size:13px;
  letter-spacing:3px;color:var(--paper);}

/* La BASCULE occupe tout l'écran le temps de l'annonce (2,6 s) : un écran
   d'annonce coincé entre le header et la nav oblige à sacrifier des éléments
   pour que ça rentre — c'est ce qui m'avait fait retirer les tuiles. */
body.carnage-plein .topbar,
body.carnage-plein .bottom-nav{ display:none !important; }
body.carnage-plein #sec-eveil.ev-carnage{
  position:fixed !important; inset:0 !important; z-index:1200 !important;
  /* on garde la largeur d'un téléphone et on centre : sur une tablette l'event
     s'étirait sur toute la dalle. margin:auto centre un élément fixé dont
     left et right valent 0 et dont la largeur est bornée. */
  max-width:430px !important; margin:0 auto !important;
  /* encoche et barre d'accueil : sans ça le ✕ passe sous l'encoche en haut
     et le pied de page sous l'indicateur en bas. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  flex-direction:column;
}
/* Plus de header ni de nav : c'est la SCÈNE qui porte le défilement (avant,
   c'était `main`, qui n'est plus dans le flux). Hauteur définie → `flex:1` sur
   le décor fonctionne enfin, sans hauteur calculée à la main. */
body.carnage-plein #sec-eveil.ev-carnage #eveilStage{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
/* le décor n'a plus besoin de deviner la place des barres */
body.carnage-plein .cx-hero.large{ min-height:0; }
/* et le verdict n'a plus de bande à couvrir : la nav n'est plus là */
body.carnage-plein .cx-verdict-a{ inset:0; }
body.carnage-plein .cx-va-bot{ margin-bottom:0; }

/* ── LE BUTIN : on MONTRE les lots ───────────────────────────────────────────
   Deux natures seulement : avatar animé (carré) et bannière animée (format
   couverture). Pas de thème, pas d'« au choix » — on annonce ce qu'on donne.
   ========================================================================== */
.cx-ban{position:relative;height:104px;overflow:hidden;border-bottom:var(--bd) solid var(--ink);}
.cx-ban img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-ban-l{position:absolute;left:8px;bottom:8px;font-family:var(--font-d);font-size:10px;
  letter-spacing:1.5px;background:var(--ink);color:var(--paper);padding:3px 7px;}
.cx-star-b{display:flex;gap:12px;padding:12px;align-items:flex-start;}
.cx-star-av{position:relative;width:96px;height:96px;flex-shrink:0;
  border:var(--bd) solid var(--ink);box-shadow:4px 4px 0 var(--ink);overflow:hidden;}
.cx-star-av img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-star-l{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-d);font-size:8.5px;
  letter-spacing:.8px;background:var(--ink);color:var(--paper);text-align:center;padding:2px 0;}
.cx-star-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.cx-star-tx .cx-pl{align-self:flex-start;}
.cx-star-tx b{font-family:var(--font-d);font-size:17px;letter-spacing:.3px;line-height:1.15;font-weight:400;}
.cx-star-tx span{font-size:13px;font-weight:700;color:var(--yellow);}
/* la vignette du lot sur les lignes de podium et les paliers */
.cx-pv{width:52px;height:52px;flex-shrink:0;border:2.5px solid var(--ink);overflow:hidden;background:var(--gray);}
.cx-pv.wide{width:76px;height:38px;}
.cx-pv img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── L'ACCUEIL : ce qui se joue, montré et pas décrit ────────────────────── */
.cx-teaser .bd{padding:0;overflow:hidden;background:var(--gray2);}
.cx-teaser-b{position:relative;height:92px;overflow:hidden;border-bottom:var(--bd) solid var(--ink);}
.cx-teaser-b img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-teaser-l{position:absolute;left:8px;top:8px;font-family:var(--font-d);font-size:10px;
  letter-spacing:1.5px;background:var(--yellow);color:var(--on-accent);
  border:2px solid var(--ink);padding:3px 7px;}
.cx-teaser-r{display:flex;gap:11px;padding:11px;align-items:center;}
.cx-teaser-av{width:64px;height:64px;flex-shrink:0;border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);overflow:hidden;}
.cx-teaser-av img{width:100%;height:100%;object-fit:cover;display:block;}
.cx-teaser-tx{flex:1;min-width:0;}
.cx-teaser-tx b{display:block;font-family:var(--font-d);font-size:15px;line-height:1.15;font-weight:400;}
.cx-teaser-tx span{display:block;font-size:12px;font-weight:700;color:var(--yellow);margin-top:5px;}

/* ============================================================================
   ÇA COMMENCE / TRANSITION — structure de l'écran de raid de L'ÉVEIL, en HOMIES.
   Accroche fine · titre en blocs pleins · sous-titre · le média aux deux tiers ·
   le minuteur seul et centré · deux fiches.
   Le média est tiré au hasard à chaque partie : vidéo (boucle 3 s, muette) ou
   GIF. Gojo est exclu du vivier — c'est le lot du 1ᵉʳ.
   ========================================================================== */
/* ⚠ PAS de min-height en % : le conteneur de l'event n'a pas de hauteur
   définie dans l'app (contrairement à la maquette, fixée à 844 px), donc le
   pourcentage ne se résout pas et le hero s'effondre à zéro. Valeur absolue. */
.cx-hero{position:relative;flex:1 1 auto;min-height:372px;overflow:hidden;}
/* écran de manche sans fiches : le décor occupe tout ce qui reste sous le
   compteur (header 74 + bande nav 84 + pastille ~96). */
.cx-hero.large{min-height:calc(100dvh - 254px);}
.cx-fiches:empty{display:none;}
.cx-hero img,.cx-hero video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;display:block;}
.cx-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(12,7,9,.90) 0%, rgba(12,7,9,.42) 34%, rgba(12,7,9,.20) 62%, rgba(12,7,9,.86) 100%);}
.cx-hero-head{position:absolute;left:0;right:0;top:0;padding:16px 18px 0;text-align:center;}
.cx-kick{font-family:var(--font-d);font-size:12px;letter-spacing:4px;color:var(--red);}
/* le titre en DEUX BLOCS pleins : en texte simple il devenait illisible dès que
   l'image était claire, et l'inline-block recouvrait la ligne du dessus. */
.cx-htitle{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.cx-htitle .a{font-family:var(--font-d);font-size:50px;line-height:1;background:var(--ink);
  color:var(--paper);padding:4px 14px 8px;box-shadow:5px 5px 0 var(--paper);}
.cx-htitle .b{font-family:var(--font-d);font-size:50px;line-height:1;background:var(--red);
  color:var(--on-accent);padding:4px 12px 8px;box-shadow:5px 5px 0 var(--ink);}
.cx-hsub{margin-top:9px;font-family:var(--font-d);font-size:12.5px;letter-spacing:1.5px;}
.cx-hsub b{color:var(--yellow);}

/* le minuteur : seul, centré, en bloc */
.cx-gcd{flex:0 0 auto;display:flex;justify-content:center;padding:13px 16px 2px;}
/* posé SUR le décor (manches sans fiches) : dans le tiers bas, pas au ras du bord */
.cx-gcd.pose{position:absolute;left:0;right:0;bottom:13%;padding:0;z-index:3;}
.cx-gcd .n{font-family:var(--font-d);font-size:52px;line-height:1;color:var(--on-accent);
  background:var(--orange);border:var(--bd-strong) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);padding:6px 20px 10px;min-width:86px;text-align:center;}

/* les deux fiches — pas de liseré coloré : la couleur reste sur le nom */
.cx-fiches{flex:0 0 auto;padding:11px 16px 14px;display:flex;flex-direction:column;gap:9px;}
.cx-fiche{display:flex;gap:11px;border:var(--bd) solid var(--ink);background:var(--gray2);
  box-shadow:5px 5px 0 var(--ink);padding:10px 11px;}
.cx-fiche .pic{width:46px;height:46px;flex-shrink:0;border:2.5px solid var(--ink);
  overflow:hidden;background:var(--gray);display:grid;place-items:center;font-size:26px;}
.cx-fiche .pic .nemoji{width:100%;height:100%;display:block;object-fit:contain;
  padding:5px;box-sizing:border-box;}
.cx-fiche .tx{flex:1;min-width:0;}
.cx-fiche .who{font-family:var(--font-d);font-size:12px;letter-spacing:2px;margin-bottom:3px;}
.cx-fiche.r .who{color:var(--red);} .cx-fiche.y .who{color:var(--yellow);}
.cx-fiche .sp{font-size:12.5px;font-weight:600;line-height:1.42;}
.cx-fiche .sp b{color:var(--yellow);}

/* ============================================================================
   LE VERDICT — « LE COUP ».
   Fond SATURÉ (vert réussi / rouge raté), la langue du splash validé, et le
   score en héros. L'emoji est celui de la partie classique : 🔥 CORRECT,
   💀 FAUX, ⚠️ TROP TARD (cf. la table E de content.js) — même vocabulaire
   partout dans l'app.
   ⚠ Ce bloc peint sa PROPRE couleur : il ne suit pas les tokens sombres de
   l'event, c'est voulu — le verdict doit frapper.
   ========================================================================== */
/* Le fond descend SOUS la nav (z-index 60, elle recouvre le débord) : `main`
   réserve 84px pour une nav qui en fait 72 → une bande de 12px de fond de page
   restait visible entre le bas de la section et la nav. Invisible sur les écrans
   sombres, criante sous un verdict vert ou rouge. */
.cx-verdict-a{position:absolute;inset:0 0 -40px 0;display:flex;flex-direction:column;z-index:5;
  background-image:radial-gradient(rgba(0,0,0,.16) 1.3px,transparent 1.3px);background-size:15px 15px;}
.cx-verdict-a.ok{background-color:#5BE885;} .cx-verdict-a.no{background-color:#FF5252;}
.cx-va-top{padding:18px 18px 0;display:flex;justify-content:center;}
.cx-va-chip{font-family:var(--font-d);font-size:12px;letter-spacing:2px;color:#160E11;
  background:#FFFEF7;border:3px solid #0A0A0A;box-shadow:4px 4px 0 #0A0A0A;padding:6px 12px;}
.cx-va-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.cx-va-emo{width:96px;height:96px;}
.cx-va-emo .nemoji{width:100%;height:100%;display:block;object-fit:contain;}
.cx-va-pts{font-family:var(--font-d);font-size:112px;line-height:.85;color:#0A0A0A;
  text-shadow:7px 7px 0 #FFFEF7;}
.cx-va-verdict{font-family:var(--font-d);font-size:32px;line-height:1;background:#0A0A0A;
  color:#FFFEF7;padding:6px 16px 10px;box-shadow:6px 6px 0 #FFFEF7;margin-top:8px;}
.cx-va-ans{margin-top:14px;text-align:center;font-size:14px;font-weight:700;color:#160E11;
  line-height:1.45;padding:0 24px;}
.cx-va-ans b{background:#0A0A0A;color:#FFFEF7;padding:2px 7px;}
.cx-va-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:14px 18px 0;}
.cx-va-c{font-family:var(--font-d);font-size:11.5px;letter-spacing:1px;color:#160E11;
  background:#FFFEF7;border:2.5px solid #0A0A0A;box-shadow:3px 3px 0 #0A0A0A;padding:5px 9px;}
.cx-va-bot{padding:14px 18px 20px;margin-bottom:40px;}   /* compense le débord : le bouton reste au-dessus de la nav */
.cx-va-next{background:#0A0A0A;color:#FFFEF7;border:4px solid #FFFEF7;padding:13px;text-align:center;
  font-family:var(--font-d);font-size:15px;letter-spacing:1.5px;}
.cx-va-next b{color:#FFD600;}

/* ── ANNONCE IN-APP DE L'EVENT ───────────────────────────────────────────────
   Popup montrée à TOUT LE MONDE qui ouvre l'app (installée ou non, compte ou
   non). Se pose PAR-DESSUS l'app entière (pas dans #sec-eveil) → elle porte ses
   propres couleurs, sans dépendre de la peau de la section. */
.cx-an-ov{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(8,5,6,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s;}
.cx-an-ov.show{opacity:1;}
.cx-an-card{position:relative;width:100%;max-width:360px;box-sizing:border-box;
  background:radial-gradient(120% 80% at 15% 0%,#3A1220 0%,transparent 60%),linear-gradient(180deg,#1B1014,#0C0709);
  border:4px solid #FFF1E2;box-shadow:9px 9px 0 rgba(0,0,0,.55);
  padding:24px 22px 22px;color:#FFF1E2;font-family:'IBM Plex Mono',ui-monospace,monospace;
  transform:translateY(10px) scale(.98);transition:transform .2s;}
.cx-an-ov.show .cx-an-card{transform:none;}
.cx-an-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:3px solid #FFF1E2;
  background:transparent;color:#FFF1E2;font-size:15px;line-height:1;cursor:pointer;}
.cx-an-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Anton',sans-serif;
  font-size:12px;letter-spacing:2px;background:#FF5252;color:#160E11;padding:5px 11px;
  box-shadow:3px 3px 0 #FFF1E2;}
.cx-an-badge .dot{width:8px;height:8px;border-radius:50%;background:#160E11;
  animation:cxAnBlink 1s steps(1) infinite;}
@keyframes cxAnBlink{50%{opacity:.25;}}
.cx-an-kicker{margin-top:14px;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:3px;color:#FF9F45;}
.cx-an-title{margin-top:5px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.cx-an-title .a{font-family:'Anton',sans-serif;font-size:46px;line-height:.9;background:#FFF1E2;
  color:#160E11;padding:3px 12px 6px;box-shadow:5px 5px 0 rgba(0,0,0,.4);}
.cx-an-title .b{font-family:'Anton',sans-serif;font-size:46px;line-height:.9;background:#FF5252;
  color:#160E11;padding:3px 12px 6px;box-shadow:5px 5px 0 #FFF1E2;}
.cx-an-cd{margin-top:16px;font-family:'Anton',sans-serif;font-size:34px;letter-spacing:2px;color:#FFD600;
  line-height:1;}
.cx-an-sub{margin-top:14px;font-size:13.5px;line-height:1.5;color:#F4E5D6;}
.cx-an-cta{margin-top:20px;width:100%;box-sizing:border-box;border:0;cursor:pointer;
  background:#FF9F45;color:#160E11;font-family:'Anton',sans-serif;font-size:19px;letter-spacing:1px;
  padding:15px;box-shadow:5px 5px 0 #FFF1E2;}
.cx-an-cta:active{transform:translate(2px,2px);box-shadow:3px 3px 0 #FFF1E2;}