/* ============================================================================
   SAISON 2 — LA TAUPE · LA TOUR · L'ARÈNE
   ----------------------------------------------------------------------------
   Les trois formats qui manquaient au jeu : la trahison, la coopération, le
   tournoi. Une seule feuille, chargée par /play ET /host : les deux pages
   affichent les mêmes composants (QZ.taupeHud, QZ.tourHtml, QZ.areneHud…).

   ⚠ On reste sur le THÈME DE BASE de l'app (crème + encre + les 4 couleurs).
   Pas de peau de saison : la saison 2, ce sont les formats, pas un reskin.
   ========================================================================== */

/* ---- briques communes ---------------------------------------------------- */
.tp-h {
  font-family: var(--fd); font-size: 12px; letter-spacing: 1.4px;
  margin: 16px 0 9px; display: flex; align-items: center; gap: 9px;
}
.tp-h i { font-family: var(--fb); font-style: normal; font-size: 9.5px; font-weight: 700; opacity: .55; }
.tp-h::after { content: ''; flex: 1; height: 3px; background: var(--ink); opacity: .18; }

.tp-note {
  font-family: var(--fb); font-size: 11px; font-weight: 600; line-height: 1.55;
  opacity: .72; margin-top: 9px;
}

.tp-chip {
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  font-family: var(--fd); font-size: 10px; letter-spacing: .8px; padding: 3px 7px 4px;
}

/* la barre d'objectif — sert à LA TAUPE (pot commun) */
.tp-bar {
  position: relative; height: 22px; border: var(--bd) solid var(--ink);
  background: var(--paper); overflow: hidden;
}
.tp-bar i { position: absolute; inset: 0 auto 0 0; background: var(--green); }
.tp-bar b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--fd); font-size: 10px; letter-spacing: 1px; color: var(--ink);
}

/* ---- 🕵️ LA TAUPE : le bandeau de question ------------------------------- */
.fmt-hud.taupe { display: block; }
.tp-hud { border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink); padding: 8px 10px 9px; }
.tp-hud-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tp-lbl { font-family: var(--fb); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; opacity: .6; }
.tp-moi {
  margin-left: auto; border: var(--bd) solid var(--ink); background: var(--purple); color: #fff;
  box-shadow: var(--sh) var(--sh) 0 var(--ink); font-family: var(--fd); font-size: 9.5px;
  letter-spacing: 1px; padding: 2px 6px 3px;
}
.tp-goal { font-family: var(--fd); font-size: 20px; line-height: 1; margin-bottom: 6px; white-space: nowrap; }
.tp-goal span { opacity: .45; font-size: 15px; }
.tp-goal.big { font-size: 30px; }
.tp-goalcard { border: var(--bd-strong) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink); padding: 12px 13px 14px; }

/* le tableau des soupçons */
.tp-sus { display: flex; flex-direction: column; gap: 8px; }
.tp-s {
  display: flex; align-items: center; gap: 9px;
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  padding: 7px 10px 8px;
}
.tp-s.hot { background: #FFE2E2; box-shadow: var(--sh) var(--sh) 0 var(--red); }
.tp-s-av { width: 34px; height: 34px; flex: 0 0 auto; display: block; }
.tp-s-av.big { width: 58px; height: 58px; }
.tp-s-av > * { width: 100%; height: 100%; font-size: 22px; }
.tp-s-tx { flex: 1; min-width: 0; }
.tp-s-tx b { display: block; font-family: var(--fd); font-size: 14px; letter-spacing: .3px; }
.tp-s-tx i { display: block; font-family: var(--fb); font-style: normal; font-size: 9.5px; font-weight: 600; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-g { width: 54px; height: 11px; border: var(--bd) solid var(--ink); flex: 0 0 auto; background: var(--paper); }
.tp-g i { display: block; height: 100%; background: var(--red); }

/* CHAQUE INDICE EST LE BOUTON DE VOTE : une seule liste, on lit et on vote au
   même endroit. Deux blocs séparés mettaient le vote sous la ligne de
   flottaison — on ne le trouvait pas dans les 20 secondes. */
.tp-s.tp-cli { width: 100%; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
/* APPUI (brandbook) : translate(+bord) et ombre à 0 — le bouton s'enfonce. */
.tp-s.tp-cli:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--ink); }
.tp-s.vote { background: var(--yellow); box-shadow: var(--sh) var(--sh) 0 var(--red); border-color: var(--ink); }
.tp-s.moi { opacity: .72; }
/* le compteur de voix, au bout de la ligne */
.tp-voix {
  flex: 0 0 auto; min-width: 26px; text-align: center;
  border: var(--bd) solid var(--ink); background: var(--paper);
  font-family: var(--fd); font-size: 13px; padding: 2px 5px 3px;
}
.tp-voix.on { background: var(--magenta); color: var(--paper); }
.tp-goalcard.compact { padding: 9px 11px 11px; }
/* l'ombre dure de la pastille déborde de --sh : sans cette réserve, elle
   retombait sur la barre d'objectif juste en dessous. */
.tp-goalcard.compact .tp-hud-top { margin-bottom: calc(7px + var(--sh)); }
/* la pastille au BOUT de la ligne, pas collée au libellé */
.tp-goalcard .tp-hud-top .tp-lbl { flex: 1; min-width: 0; }
.tp-goalcard .tp-hud-top .tp-chip { flex: 0 0 auto; margin-left: auto; }

/* QUAND TOMBE LE PROCHAIN VOTE — la cadence, écrite. Elle est fixe (toutes les
   TAUPE_PAR_MANCHE manches) mais rien ne le disait : ça passait pour du
   hasard. */
.tp-quand {
  margin-top: 7px; font-family: var(--fd); font-size: 9.5px; letter-spacing: 1.3px;
  opacity: .62;
}
.tp-quand.now { opacity: 1; color: var(--magenta); }

/* le verdict de fin */
.tp-verdict { border: var(--bd-strong) solid var(--ink); box-shadow: var(--sh-cta) var(--sh-cta) 0 var(--ink); padding: 14px; background: var(--paper); }
.tp-verdict.ok { background: var(--green); }
.tp-verdict.ko { background: var(--red); color: #fff; }
.tp-vd-stamp {
  display: inline-block; border: var(--bd-strong) solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--sh) var(--sh) 0 var(--ink); font-family: var(--fd); font-size: 22px; letter-spacing: 1px;
  padding: 7px 14px 9px; transform: rotate(-3deg); margin-bottom: 14px;
}
.tp-vd-who { display: flex; align-items: center; gap: 12px; }
.tp-vd-who i { display: block; font-family: var(--fb); font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; opacity: .7; }
.tp-vd-who b { display: block; font-family: var(--fd); font-size: 26px; line-height: 1.1; }
.tp-vd-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tp-vd-lines div { font-family: var(--fb); font-size: 11px; font-weight: 700; opacity: .75; }
.tp-vd-lines div.on { opacity: 1; }
/* sur le fond rouge (la taupe gagne), du blanc à 60 % devenait illisible */
.tp-verdict.ko .tp-vd-lines div { opacity: .9; }
.tp-verdict.ko .tp-vd-who i { opacity: .85; }

/* ---- 🏗️ LA TOUR --------------------------------------------------------- */
.fmt-hud.tour { display: block; }
.tr-hud {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  padding: 7px 10px 8px;
}
.tr-et { font-family: var(--fd); font-size: 12px; letter-spacing: 1px; }
.tr-et b { font-size: 18px; }
.tr-fis { font-family: var(--fd); font-size: 14px; letter-spacing: 2px; color: var(--red); }
.tr-fis i { font-family: var(--fb); font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 1px; color: var(--ink); opacity: .55; }
.tr-who {
  margin-left: auto; border: var(--bd) solid var(--ink); background: var(--cyan);
  box-shadow: var(--sh) var(--sh) 0 var(--ink); font-family: var(--fd); font-size: 10px;
  letter-spacing: .8px; padding: 3px 7px 4px; white-space: nowrap;
}
.tr-who.moi { background: var(--yellow); box-shadow: var(--sh) var(--sh) 0 var(--red); }

/* La tour se lit de HAUT en BAS : l'étage le plus haut en premier, le plus
   large en bas — pyramide inversée, comme la maquette. tourEtat() renvoie déjà
   les étages du plus récent au plus ancien, donc PAS de column-reverse ici :
   les deux inversions se seraient annulées et la tour serait sortie à l'envers. */
/* LA TOUR, d'après la maquette ENCRE & NÉON : des blocs bruts numérotés qui
   RÉTRÉCISSENT en montant, l'étage du haut penché avec ses traits de choc, et
   le record de la bande en pointillés au-dessus — l'objectif reste visible. */
.tr-rec { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 12px; }
.tr-rec .ln { flex: 0 0 40px; border-top: 3px dashed var(--ink); opacity: .45; }
.tr-rec .tx { font-family: var(--fb); font-weight: 700; font-size: 8.5px; letter-spacing: .8px; opacity: .6; }

/* ⚠ LE TROU AU MILIEU DE L'ÉCRAN. Edwin, capture à l'appui : avec trois
   étages, la tour faisait 100 px et laissait 300 px de blanc. Elle part
   maintenant du SOL et occupe la place libre, quel que soit le nombre
   d'étages — comme sur la maquette validée (s28 § 3). */
.tr-twrwrap { position: relative; padding-top: 4px; flex: 1; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end; }
.tr-twr { display: flex; flex-direction: column; align-items: center; width: 100%; }
.tr-fl {
  height: 34px; margin-top: -3px; box-sizing: border-box;
  border: var(--bd) solid var(--ink); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 10.5px; letter-spacing: .8px; color: #0A0A0A;
  white-space: nowrap; overflow: hidden;
}
.tr-fl.clair { color: var(--paper); }
.tr-fl.crack { background: var(--red); color: var(--paper); }
.tr-fl.ghost { background: transparent; border-style: dashed; box-shadow: none; opacity: .5; color: var(--ink); }
/* l'étage du haut TREMBLE : penché, avec ses traits de choc */
.tr-fl.top { transform: rotate(-3deg); position: relative; z-index: 2; margin-bottom: 5px; font-size: 13px; }
.tr-fl.top::before, .tr-fl.top::after {
  content: ''; position: absolute; top: -11px; width: 14px; height: 3px; background: var(--ink);
}
.tr-fl.top::before { left: -19px; transform: rotate(-32deg); }
.tr-fl.top::after { right: -19px; transform: rotate(32deg); }
/* le sol */
.tr-gnd { width: 100%; height: 15px; margin-top: -3px; background: var(--ink); border: var(--bd) solid var(--ink); box-shadow: var(--sh) var(--sh) 0 var(--cyan); }
/* l'étage courant, en étiquette penchée à gauche */
/* ⚠ L'étiquette était posée à 34 px du haut du bloc. Depuis que la tour
   « monte du sol », le bloc fait toute la hauteur : l'étiquette flottait
   seule au milieu du vide. Elle vit maintenant DANS la pile, juste au-dessus
   du dernier étage posé — là où on la cherche. */
.tr-etq {
  align-self: flex-start; margin: 0 0 -4px 2px; z-index: 5; transform: rotate(-3deg);
  font-family: var(--fd); font-size: 14px; letter-spacing: .5px;
  background: var(--yellow); color: #0A0A0A; border: var(--bd) solid var(--ink);
  box-shadow: var(--sh) var(--sh) 0 var(--ink); padding: 5px 9px 6px;
}

/* la jauge de fissures : des segments qu'on compte, pas un pourcentage */
.tr-fiss { margin-top: 16px; border: var(--bd-strong) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink); padding: 10px 12px 12px; }
.tr-fiss .l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--fd); font-size: 12.5px; letter-spacing: .5px; }
.tr-fiss .l .r { font-family: var(--fb); font-weight: 700; font-size: 8px; opacity: .6; text-align: right; }
.tr-fiss .segs { display: flex; gap: 6px; margin-top: 9px; }
.tr-fiss .sg { flex: 1; height: 14px; border: var(--bd) solid var(--ink); background: transparent; }
.tr-fiss .sg.on { background: var(--red); }

/* les contributions : l'avatar d'abord, on reconnaît ses potes sans lire */
.tr-contrib .tr-c { display: flex; align-items: center; gap: 9px; }
.tr-contrib .tr-c + .tr-c { margin-top: 8px; }
.tr-contrib .tr-c .av { width: 30px; height: 30px; flex: none; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tr-contrib .tr-c .av > * { width: 100%; height: 100%; display: block; }
.tr-contrib .tr-c .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-contrib .tr-c .nm { width: 72px; flex: none; font-family: var(--fd); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-contrib .tr-c .bar { flex: 1; height: 15px; border: 3px solid var(--ink); background: var(--paper); }
.tr-contrib .tr-c .bar i { display: block; height: 100%; background: var(--green); }
.tr-contrib .tr-c .n { flex: none; width: 28px; text-align: right; font-family: var(--fd); font-size: 13px; color: var(--magenta); }

/* le rappel de la règle du mode */
.tr-coop { margin-top: 14px; border: var(--bd-strong) solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--cyan); padding: 11px 13px 13px; }
.tr-coop b { display: block; font-family: var(--fd); font-size: 14px; letter-spacing: .5px; }
.tr-coop span { display: block; font-family: var(--fb); font-weight: 700; font-size: 9px; letter-spacing: .8px; opacity: .8; margin-top: 4px; }

/* ---- ⚔️ L'ARÈNE --------------------------------------------------------- */
.fmt-hud.arene { display: block; }
.ar-hud.out {
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  padding: 7px 10px 8px; font-family: var(--fd); font-size: 11px; letter-spacing: 1px; text-align: center;
}
.ar-brk { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.ar-col { display: flex; flex-direction: column; gap: 8px; justify-content: space-around; flex: 1; min-width: 104px; }
.ar-m {
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  font-family: var(--fd); font-size: 10.5px; line-height: 1.5; padding: 6px 8px 7px;
}
.ar-m .w { color: var(--ink); }
.ar-m s { opacity: .45; }
.ar-m.now { background: var(--yellow); box-shadow: var(--sh) var(--sh) 0 var(--red); }

.ar-regle { border: var(--bd-strong) solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--red); padding: 12px 13px 14px; }
.ar-regle i { display: block; font-family: var(--fb); font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; opacity: .7; }
.ar-regle b { display: block; font-family: var(--fd); font-size: 17px; letter-spacing: .5px; margin: 5px 0 7px; }
.ar-regle span { font-family: var(--fb); font-size: 11px; font-weight: 600; line-height: 1.55; opacity: .85; }

.ar-bets { display: flex; flex-direction: column; gap: 9px; }
.ar-bet {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  padding: 8px 10px 9px; cursor: pointer; font: inherit; color: var(--ink);
}
.ar-bet:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--ink); }
.ar-bet.mine { background: var(--yellow); box-shadow: var(--sh) var(--sh) 0 var(--red); }
.ar-cote {
  border: var(--bd) solid var(--ink); background: var(--cyan); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  font-family: var(--fd); font-size: 10px; letter-spacing: .8px; padding: 3px 7px 4px; white-space: nowrap;
}

/* ---- l'ossature des écrans de phase (vote / pari) ------------------------ */
/* Même structure que les autres écrans plein écran du jeu : un en-tête fixe,
   un corps qui défile. Sans le corps scrollable, le tableau des soupçons à
   8 joueurs passe sous le bord de l'écran et on ne peut plus voter. */
/* ⚠ PAS de position:absolute ici. `section.screen` n'est pas positionné : un
   inset:0 remontait au viewport, donc l'écran passait SOUS l'en-tête de la page
   et son titre disparaissait. On se comporte comme .q-screen / .join-screen —
   un enfant flex qui prend la place restante et défile à l'intérieur. */
.s2-screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
}
.s2-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 11px;
  border-bottom: 3px solid var(--ink);
}
.s2-ttl { font-family: var(--fd); font-size: 20px; letter-spacing: .6px; flex: 1; }
.s2-cd {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border: var(--bd) solid var(--ink); background: var(--yellow); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  font-family: var(--fd); font-size: 19px; font-variant-numeric: tabular-nums;
}
.s2-cd.hot { background: var(--red); color: var(--paper); }
/* ⚠ LES BLOCS DE L'ÉCRAN DE VOTE SE TOUCHAIENT. Edwin : « là-bas aussi les
   éléments sont collés, il faut corriger les espaces ». Cet écran n'est pas
   scopé `[data-s2]` — il n'héritait donc d'AUCUNE des deux règles de rythme du
   socle, et chaque bloc portait (ou pas) sa propre marge à la main : la carte
   d'objectif et la règle jaune étaient soudées, ombre comprise.
   Une colonne, un seul écart, l'ombre réservée : 12 px vus partout. */
.s2-screen .s2-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip;
  display: flex; flex-direction: column; gap: calc(12px + var(--sh));
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
}
/* …et plus personne ne rajoute la sienne par-dessus */
.s2-screen .s2-scroll > * { margin-top: 0; margin-bottom: 0; }
.s2-screen .s2-scroll > .tp-h { margin: 0; }
.s2-screen .s2-scroll > .tp-note { margin-top: 0; }
body .s2-screen .s2-scroll > .tp-regle { margin-bottom: 0; }

/* ---- 🕵️ « TU ES LA TAUPE » : l'annonce, une seule fois, au départ -------- */
.tp-reveal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 30px 26px; text-align: center;
  background: var(--cyan); color: var(--ink);
  animation: tpIn .34s ease both;
}
.tp-reveal.moi { background: var(--purple); color: #FFFEF7; }
.tp-reveal.out { animation: tpOut .4s ease both; }
@keyframes tpIn  { from { opacity: 0; transform: scale(.94); } }
@keyframes tpOut { to   { opacity: 0; transform: scale(1.04); } }
.tp-r-em {
  width: 124px; height: 124px; display: grid; place-items: center;
  border: var(--bd-strong) solid currentColor; box-shadow: var(--sh-cta) var(--sh-cta) 0 currentColor;
}
.tp-r-em img { width: 74px; height: 74px; }
.tp-r-nm { font-family: var(--fd); font-size: 38px; line-height: 1.1; letter-spacing: 1px; }
.tp-r-tx { font-family: var(--fb); font-size: 13px; font-weight: 600; line-height: 1.6; max-width: 300px; opacity: .9; }

/* le verdict de format, posé au-dessus du classement de fin de partie */
.over-s2 { display: block; margin: 0 0 18px; }
.over-s2:empty { display: none; }

/* LA TOUR : quand c'est le tour d'un autre, le bandeau n'est PAS une
   élimination — il ne doit donc pas être rouge comme celui de BATTLE. */
.spectator-strip.tour { background: var(--cyan); color: var(--ink); }

/* LA RÈGLE DU VOTE, écrite noir sur blanc. Avant, « tu peux changer d'avis »
   était une note grise en bas de page : on ne savait pas si on votait une fois
   ou autant qu'on voulait, donc on n'osait pas voter. */
body .tp-regle {
  border: var(--bd-strong) solid var(--ink); background: var(--yellow); color: var(--ink);
  box-shadow: var(--sh) var(--sh) 0 var(--ink); padding: 11px 13px 13px; margin-bottom: 11px;
}
/* ⚠ seulement le <b> DIRECT : la règle passe le style de titre à tous les <b>,
   y compris ceux qui mettent un mot en gras dans la phrase — on lisait
   « Tu peux / CHANGER D'AVIS AUTANT DE FOIS QUE TU VEUX / , maintenant… ». */
body .tp-regle > b { display: block; font-family: var(--fd); font-size: 15px; letter-spacing: .5px; }
body .tp-regle span { display: block; font-family: var(--fb); font-size: 11px; font-weight: 600; line-height: 1.55; margin-top: 6px; }
body .tp-regle span b { font-family: inherit; font-size: inherit; display: inline; font-weight: 800; }
/* ⚠ LA RÈGLE, UNE SEULE FOIS. Edwin : « la carte qui explique un peu qu'on
   peut voter, tu peux l'afficher une fois, après pas besoin ». Elle était
   répétée à CHAQUE vote — trois fois dans une partie de dix questions — et
   poussait la liste des suspects sous la ligne de flottaison. Dès le 2ᵉ vote,
   il ne reste que l'appel à l'action, qui, lui, change (« TU ACCUSES X »). */
body .tp-regle.court { padding: 9px 13px 11px; }
body .tp-regle.court > b { font-size: 17px; }

/* le rappel « une taupe vous freine » pour ceux qui n'en sont pas */
.tp-moi.sus { background: var(--yellow); color: var(--ink); }

/* les contributions, en mini-barres : tout le monde pose des étages, personne
   n'est un poids mort (maquette ENCRE & NÉON). */
.tr-contrib { display: flex; flex-direction: column; gap: 8px; }
.tr-c { display: flex; align-items: center; gap: 9px; }
.tr-c .nm { font-family: var(--fd); font-size: 11.5px; letter-spacing: .3px; width: 78px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-c .bar { flex: 1; height: 15px; border: var(--bd) solid var(--ink); background: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--ink); }
.tr-c .bar i { display: block; height: 100%; background: var(--green); border-right: 2.5px solid var(--ink); }
.tr-c .n { font-family: var(--fd); font-size: 13px; color: var(--magenta); width: 30px; text-align: right; }

/* ── LA TOUR : l'écran de manche occupe toute la hauteur ──────────────────
   `#plbList` est une colonne flex : pour que la tour puisse « monter du sol »,
   il faut que la colonne prenne la hauteur du conteneur qui défile. Sans ça,
   `flex:1` sur .tr-twrwrap n'avait rien à étirer. */
[data-s2] #plbList:has(.tr-twrwrap),
[data-s2] #leaderboard:has(.tr-twrwrap) { min-height: 100%; }
[data-s2] .s2-scroll:has(#plbList .tr-twrwrap) { display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════════════════════════════
   ⚔️ L'ARÈNE — le bracket, le duel, les paris
   D'après la maquette validée (s28 § 3 → brandnew/drafts/s2-modes-refonte).
   Edwin : « on ne comprend pas pourquoi on n'a plus l'affichage précédent,
   il y a un gros vide, les éléments sont trop longs, c'est moche ».
   ════════════════════════════════════════════════════════════════════════ */
.ar-brk { border: var(--bd-strong) solid var(--ink); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  background: var(--paper); padding: 11px 8px; }
.ar-brkt { display: flex; justify-content: space-between; align-items: stretch; gap: 6px;
  min-height: 118px; overflow-x: auto; scrollbar-width: none; }
.ar-brkt::-webkit-scrollbar { display: none; }
.ar-c { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; flex: 1; min-width: 74px; }
.ar-c.f { flex: 0 0 auto; justify-content: center; align-items: center; gap: 5px; min-width: 62px; }
.ar-c.f .nemoji { width: 26px; height: 26px; }
.ar-ct { font-family: var(--fb); font-weight: 800; font-size: 7.5px; letter-spacing: 1.1px;
  opacity: .55; text-align: center; }
.ar-pr { position: relative; padding-right: 8px; display: flex; flex-direction: column; gap: 5px; }
.ar-pr::after { content: ''; position: absolute; right: 0; top: 11px; bottom: 11px; width: 6px;
  border: 3px solid var(--ink); border-left: 0; }
.ar-chip { display: flex; align-items: center; gap: 4px; border: 3px solid var(--ink);
  background: var(--paper); box-shadow: 2px 2px 0 var(--ink); padding: 3px 5px;
  font-family: var(--fd); font-size: 9.5px; letter-spacing: .2px; color: var(--ink);
  white-space: nowrap; overflow: hidden; }
.ar-chip .n2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-chip b { font-weight: normal; }
.ar-chip.win { background: var(--green); }
.ar-chip.out { opacity: .45; }
.ar-chip.out .n2 { text-decoration: line-through; }
.ar-ftag { font-family: var(--fd); font-size: 9.5px; background: var(--magenta); color: var(--paper);
  border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 3px 6px; transform: rotate(-4deg); }
.ar-flive { font-family: var(--fb); font-weight: 800; font-size: 7.5px; letter-spacing: .8px; color: var(--magenta); text-align: center; }

/* le duel en cours : deux têtes qui se regardent */
.ar-vs { position: relative; margin-top: 18px; border: var(--bd-strong) solid var(--ink);
  box-shadow: var(--sh) var(--sh) 0 var(--ink); background: var(--paper);
  padding: 22px 10px 13px; display: flex; align-items: flex-start; justify-content: space-evenly; }
.ar-vs .dtag { position: absolute; top: -12px; left: 12px; transform: rotate(-3deg);
  font-family: var(--fd); font-size: 10px; background: var(--yellow); color: #0A0A0A;
  border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 3px 8px; white-space: nowrap; }
.ar-vs .vsb { align-self: center; font-family: var(--fd); font-size: 22px; background: var(--magenta);
  color: var(--paper); border: var(--bd-strong) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 5px 10px; transform: rotate(-7deg); }
.ar-fter { width: 104px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ar-fter .big { width: 62px; height: 62px; overflow: hidden; border: var(--bd-strong) solid var(--ink);
  box-shadow: 4px 4px 0 var(--magenta); background: var(--paper); display: block; }
.ar-fter .big > *, .ar-fter .big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-fter.l .big { transform: rotate(-3deg); } .ar-fter.r .big { transform: rotate(3deg); }
.ar-fter .nm { font-family: var(--fd); font-size: 13px; margin-top: 8px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-fter .sc { font-family: var(--fd); font-size: 24px; line-height: 1; color: var(--magenta); margin-top: 3px; }
.ar-fter .lb { font-family: var(--fb); font-weight: 700; font-size: 7.5px; letter-spacing: .8px; opacity: .6; margin-top: 2px; }

/* les paris des éliminés : deux colonnes, deux totaux */
.ar-bets { margin-top: 16px; border: var(--bd-strong) solid var(--ink); box-shadow: var(--sh) var(--sh) 0 var(--magenta);
  background: var(--ink); color: var(--paper); padding: 12px 13px; }
.ar-bets .bh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ar-bets .bh .t { font-family: var(--fd); font-size: 13px; letter-spacing: .8px; color: var(--yellow); white-space: nowrap; }
.ar-bets .bh .s { font-family: var(--fb); font-weight: 700; font-size: 7.5px; text-align: right; opacity: .78; }
.ar-bcols { display: flex; gap: 11px; margin-top: 11px; }
.ar-bdiv { width: 3px; background: #4A4A4A; flex: none; }
.ar-bcol { flex: 1; min-width: 0; }
.ar-bcol .tt { font-family: var(--fd); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-brow { display: flex; align-items: center; gap: 7px; margin-top: 7px;
  font-family: var(--fb); font-weight: 700; font-size: 9.5px; white-space: nowrap; }
.ar-brow .av { width: 24px; height: 24px; flex: none; overflow: hidden; border: 2px solid var(--paper); }
.ar-brow .av > *, .ar-brow .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-btot { font-family: var(--fd); font-size: 13px; color: var(--yellow); margin-top: 9px; }