/* ============================================================
   JPO EPITECH — skin des ÉCRANS DE JEU côté HÔTE (vue projetée).
   Habille la partie « grand écran » d'une session JPO :
     • #screen-transition  (reveal du type de manche + 3·2·1·GO)
     • #screen-question     (question + tuiles A/B/C/D + chrono)
     • #screen-feedback     (CORRECT ! / FAUX !)
     • #screen-reveal       (classement entre manches)
     • #screen-podium       (podium final)

   VUE PROJETÉE → très gros textes lisibles de loin, contraste franc,
   fond sombre travaillé, ombres colorées, branding EPITECH + dot LIVE.

   Cohérent avec jpo.css / jpo-game.css : néo-brutaliste, Anton +
   IBM Plex Mono, angles droits, bordures noires/papier, ombres dures.

   ⚠ TOUT est scopé sous body.jpo-game — AUCUN sélecteur global,
   pour ne rien casser dans le jeu normal. On ne surcharge que
   couleurs / typo / tailles / espacements + décor (::before/::after).
   Le layout (flex, grille de réponses, chrono) reste intact.
   ============================================================ */

/* Typo charte Epitech : Anton (titres) + IBM Plex Sans (corps).
   @import en tête de fichier (obligatoire avant toute règle). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------- variables event, portées par chaque écran de jeu ---------- */
body.jpo-game #screen-transition,
body.jpo-game #screen-question,
body.jpo-game #screen-feedback,
body.jpo-game #screen-reveal,
body.jpo-game #screen-podium {
  /* CHARTE EPITECH : bleu #013afb dominant · blanc texte · accents vert(fond)/orange/magenta.
     On remappe les anciennes variables papier/magenta vers la palette officielle :
       ink  = bleu Epitech (fond dominant + texte sur surfaces claires + bordures)
       paper= blanc (surfaces claires + texte sur bleu)
       yellow/green = vert fluo #00ff97 (REMPLISSAGE only, texte foncé dessus)
       red/orange/cyan = orange #ff5f3a · magenta/violet = magenta #ff1ef7 */
  --jh-paper:#FFFFFF; --jh-ink:#013AFB; --jh-grey:#04123F; --jh-grey2:#E8ECFF;
  --jh-magenta:#FF1EF7; --jh-yellow:#00FF97; --jh-cyan:#FF5F3A; --jh-green:#00FF97;
  --jh-red:#FF5F3A; --jh-orange:#FF5F3A; --jh-violet:#FF1EF7; --jh-blue:#013AFB;
  --jh-fd:'Anton',sans-serif; --jh-fm:'IBM Plex Sans',sans-serif;
}

/* ---------- fond sombre « arcade » réutilisable (points + rayures) ---------- */
body.jpo-game #screen-transition,
body.jpo-game #screen-question .q-screen,
body.jpo-game #screen-reveal .lb-screen {
  background-color:var(--jh-ink);
  background-image:
    radial-gradient(rgba(255,254,247,.07) 1.6px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(255,254,247,.045) 0 14px, transparent 14px 40px);
  background-size:22px 22px, auto;
  color:var(--jh-paper);
}

/* ⚠ CHARTE : le moteur (07_gameplay.js) pose une couleur de MODE en inline sur
   #transPanel (ex. L'INTRUS = violet) + une classe .dark. On la NEUTRALISE pour
   garder le fond BLEU EPITECH sur l'écran de transition (priorité charte). */
body.jpo-game #screen-transition #transPanel,
body.jpo-game #screen-transition #transPanel.dark {
  background-color:var(--jh-ink) !important;    /* #013AFB */
  background-image:
    radial-gradient(rgba(255,255,255,.07) 1.6px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 40px) !important;
  background-size:22px 22px, auto !important;
  color:var(--jh-paper);
  max-width:100%;
  overflow-x:hidden;
}

/* ---------- animations event ---------- */
@keyframes jhPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,82,82,.6); }
  70%  { box-shadow:0 0 0 12px rgba(255,82,82,0); }
  100% { box-shadow:0 0 0 0 rgba(255,82,82,0); }
}
@keyframes jhBlink { 0%,100%{ opacity:1; } 50%{ opacity:.28; } }
@keyframes jhCtaPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
@keyframes jhFloatA { 0%,100%{ transform:translateY(0) rotate(-12deg); } 50%{ transform:translateY(-18px) rotate(-6deg); } }
@keyframes jhFloatB { 0%,100%{ transform:translateY(0) rotate(11deg); } 50%{ transform:translateY(-20px) rotate(16deg); } }
@keyframes jhGoPop { 0%{ transform:scale(.6); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
@keyframes jhWinGlow {
  0%,100%{ box-shadow:8px 8px 0 var(--jh-ink); }
  50%    { box-shadow:8px 8px 0 var(--jh-ink), 0 0 34px 4px rgba(255,214,0,.55); }
}
@keyframes jhCorrectGlow {
  0%,100%{ box-shadow:6px 6px 0 var(--jh-ink), 0 0 0 0 rgba(91,232,133,0); }
  50%    { box-shadow:6px 6px 0 var(--jh-ink), 0 0 26px 3px rgba(91,232,133,.7); }
}

/* petit wordmark EPITECH réutilisable (placeholder texte, pas le vrai logo) */
/* (appliqué via des ::before ci-dessous, valeurs répétées pour rester lisible) */

/* ============================================================
   1) TRANSITION — #screen-transition  (reveal manche + décompte)
   ============================================================ */
body.jpo-game #screen-transition .trans {
  position:relative;
  font-family:var(--jh-fm);
  font-weight:700;
  padding-top:calc(58px + env(safe-area-inset-top));   /* place pour le bandeau EPITECH */
  overflow:hidden;
}

/* (retiré : forme décorative qui débordait de l'écran) */
body.jpo-game #screen-transition .trans::after { content:none; display:none; }

/* bandeau de tête : wordmark EPITECH + badge LIVE · JPO 2026 */
body.jpo-game #screen-transition .trans::before {
  content:'EPITECH — LIVE · JPO 2026';
  position:absolute;
  top:calc(12px + env(safe-area-inset-top));
  left:22px; right:auto; max-width:calc(100% - 44px);
  z-index:3;
  display:inline-flex; align-items:center; gap:10px; width:max-content;
  font-family:var(--jh-fd);
  font-size:15px; letter-spacing:2px;
  color:var(--jh-ink);
  background:var(--jh-paper);
  border:3px solid var(--jh-paper);
  box-shadow:4px 4px 0 var(--jh-magenta);
  padding:8px 14px 7px;
  transform:rotate(-1.5deg);
  /* bannière FIXE (plus de clignotement qui la faisait disparaître) */
}

/* progression des manches — segments papier sur fond sombre */
body.jpo-game #screen-transition .trans-rounds { position:relative; z-index:2; }
body.jpo-game #screen-transition .trans-seg { border-color:var(--jh-paper); height:11px; }
body.jpo-game #screen-transition .trans-seg.done { background:var(--jh-cyan); border-color:var(--jh-paper); }

/* méta (MANCHE x/y + tag) — chips papier */
body.jpo-game #screen-transition .trans-meta { position:relative; z-index:2; }
body.jpo-game #screen-transition .trans-mini {
  font-family:var(--jh-fd);
  font-size:14px; letter-spacing:2px;
  background:var(--jh-ink);
  color:var(--jh-paper);
  border:3px solid var(--jh-paper);
  box-shadow:3px 3px 0 var(--jh-magenta);
  padding:6px 13px;
}
body.jpo-game #screen-transition #transTag {
  background:var(--jh-yellow); color:var(--jh-ink); border-color:var(--jh-ink);
  box-shadow:3px 3px 0 var(--jh-ink);
}

/* héros central */
body.jpo-game #screen-transition .trans-hero { position:relative; z-index:2; margin-top:14px; }
body.jpo-game #screen-transition .trans-emoji {
  font-size:clamp(96px, 18vw, 168px);
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.4));
}

/* NOM DU TYPE DE MANCHE — énorme, ombre magenta */
body.jpo-game #screen-transition .trans-label {
  margin-top:22px;
  font-size:clamp(46px, 12vw, 108px);
  letter-spacing:3px;
  line-height:.92;
  background:var(--jh-paper);
  color:var(--jh-ink);
  border:5px solid var(--jh-ink);
  box-shadow:10px 10px 0 var(--jh-magenta);
  padding:12px 28px;
  transform:rotate(-2deg);
}

body.jpo-game #screen-transition .trans-sub {
  color:var(--jh-paper);
  font-size:clamp(13px, 1.7vw, 20px);
  letter-spacing:1.5px;
  max-width:640px;
  opacity:.9;
}

/* bas : DÉPART DANS + gros compteur */
body.jpo-game #screen-transition .trans-bottom { position:relative; z-index:2; }
body.jpo-game #screen-transition .trans-dep {
  color:var(--jh-paper);
  font-size:clamp(16px, 2.4vw, 28px);
  letter-spacing:3px;
}
body.jpo-game #screen-transition .trans-tick { color:rgba(255,254,247,.65); opacity:1; }

/* le compteur 3·2·1 — carré géant papier, GO vert qui pop */
body.jpo-game #screen-transition .trans-count {
  width:clamp(110px, 20vw, 190px);
  height:clamp(110px, 20vw, 190px);
  border:6px solid var(--jh-ink);
  background:var(--jh-yellow);
  box-shadow:10px 10px 0 var(--jh-magenta);
  font-size:clamp(72px, 15vw, 130px);
  color:var(--jh-ink);
  animation:jhGoPop .5s ease;
}
body.jpo-game #screen-transition .trans-count.go {
  background:var(--jh-green);
  font-size:clamp(40px, 8vw, 72px);
  letter-spacing:3px;
  box-shadow:10px 10px 0 var(--jh-ink), 0 0 30px 4px rgba(91,232,133,.6);
}

/* si le moteur passe la carte en .dark : on garde tout lisible (fond déjà sombre) */
body.jpo-game #screen-transition .trans.dark .trans-label { background:var(--jh-paper); color:var(--jh-ink); }

/* ── FIX empilement : la carte type (ex. « ESTIMATION ») ne doit JAMAIS
   recouvrir la barre de progression du haut. La barre + la méta restent
   épinglées en haut (z-index au-dessus) ; le héros vit dans sa propre
   piste flex:1 centrée et se réduit au lieu de déborder vers le haut. */
body.jpo-game #screen-transition .trans-rounds { flex-shrink:0; z-index:5; margin-bottom:clamp(10px,2vh,18px); }
body.jpo-game #screen-transition .trans-meta { flex-shrink:0; }
body.jpo-game #screen-transition .trans-hero {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; margin-top:0; z-index:1; overflow:hidden;
}
body.jpo-game #screen-transition .trans-bottom { flex-shrink:0; }
body.jpo-game #screen-transition .trans-emoji { font-size:clamp(64px,11vw,120px); }
body.jpo-game #screen-transition .trans-label {
  margin-top:clamp(10px,1.6vh,20px); font-size:clamp(38px,9vw,84px); max-width:calc(100% - 24px);
}

/* ============================================================
   2) QUESTION — #screen-question  (question + tuiles + chrono)
   ============================================================ */
body.jpo-game #screen-question .q-screen {
  font-family:var(--jh-fm);
  font-weight:700;
}

/* ---------- header de jeu = barre sombre + branding EPITECH + LIVE ---------- */
body.jpo-game #screen-question .ghdr {
  position:relative;
  background:var(--jh-ink);
  border-bottom:4px solid var(--jh-magenta);
  padding:12px 16px;
  gap:10px;
  flex-wrap:wrap;
}

/* header ALLÉGÉ : plus de wordmark EPITECH ni de badge LIVE dans le header de jeu
   (ils surchargeaient la barre) — on garde fermer · manche · timer · score */
body.jpo-game #screen-question .ghdr::before,
body.jpo-game #screen-question .ghdr::after { content:none; display:none; }

/* boutons/chips du header en style event */
body.jpo-game #screen-question .ghdr .close {
  order:-3;
  background:var(--jh-red); color:var(--jh-paper);
  border-color:var(--jh-paper); box-shadow:3px 3px 0 var(--jh-magenta);
}
body.jpo-game #screen-question .ghdr .manche {
  background:var(--jh-paper); color:var(--jh-ink);
  border-color:var(--jh-paper); box-shadow:3px 3px 0 var(--jh-ink);
  font-size:16px; letter-spacing:1px;
}
body.jpo-game #screen-question .ghdr .timer {
  background:var(--jh-yellow); color:var(--jh-ink);
  border-color:var(--jh-paper); box-shadow:3px 3px 0 var(--jh-ink);
  font-size:20px; height:38px; padding:0 16px;
}
body.jpo-game #screen-question .ghdr .timer.warn {
  background:var(--jh-red); color:var(--jh-paper);
  animation:jhBlink .6s steps(1) infinite;
}
body.jpo-game #screen-question .ghdr .score {
  background:var(--jh-green); color:var(--jh-ink);
  border-color:var(--jh-paper); box-shadow:3px 3px 0 var(--jh-ink);
  font-size:20px; height:38px; padding:0 16px;
}

/* ---------- pastille du type de manche ---------- */
body.jpo-game #screen-question .type-pill {
  margin:16px 16px 6px;
  transform:rotate(-1.5deg);
}
body.jpo-game #screen-question .type-pill .sh { background:var(--jh-magenta); }
body.jpo-game #screen-question .type-pill .bd {
  border:3px solid var(--jh-ink);
  font-size:clamp(16px, 2vw, 24px);
  letter-spacing:2px;
  padding:9px 18px;
}

/* ---------- la QUESTION énorme ---------- */
body.jpo-game #screen-question .q-card { margin:10px 16px 14px; }
body.jpo-game #screen-question .q-card .sh { background:var(--jh-magenta); top:8px; left:8px; right:-8px; bottom:-8px; }
body.jpo-game #screen-question .q-card .bd {
  border:5px solid var(--jh-ink);
  background:var(--jh-yellow);
  color:var(--jh-ink);
  font-size:clamp(28px, 5.6vw, 62px);
  line-height:1.08;
  letter-spacing:.5px;
  padding:22px 24px;
}

/* ---------- TUILES DE RÉPONSE type Kahoot brutaliste ---------- */
/* (l'hôte rend des .opt c-yellow/c-violet/c-red/c-teal = A/B/C/D) */
body.jpo-game #screen-question .answer-zone { padding:16px; gap:14px; }

body.jpo-game #screen-question .opt .sh { top:7px; left:7px; right:-7px; bottom:-7px; }
body.jpo-game #screen-question .opt .bd {
  border:4px solid var(--jh-ink);
  padding:20px 20px;
  gap:18px;
}

/* palette EPITECH A/B/C/D — 4 accents distincts (magenta / orange / vert / blanc).
   vert = remplissage avec texte BLEU (jamais de texte vert). */
body.jpo-game #screen-question .opt.c-yellow .bd { background:var(--jh-magenta); color:var(--jh-paper); }
body.jpo-game #screen-question .opt.c-violet .bd { background:var(--jh-orange);  color:var(--jh-paper); }
body.jpo-game #screen-question .opt.c-red    .bd { background:var(--jh-green);   color:var(--jh-ink);   }
body.jpo-game #screen-question .opt.c-teal   .bd { background:var(--jh-paper);   color:var(--jh-ink);   }

/* lettre A/B/C/D : boîte noire, chiffre géant, contraste max */
body.jpo-game #screen-question .opt .letter-wrap .lsh { background:var(--jh-ink); }
body.jpo-game #screen-question .opt .letter-wrap .lbox {
  width:clamp(48px, 7vw, 66px);
  height:clamp(48px, 7vw, 66px);
  border:3px solid var(--jh-ink);
  background:var(--jh-ink);
  color:var(--jh-paper);
  font-size:clamp(26px, 4vw, 40px);
}
/* texte de réponse gros et lisible de loin */
body.jpo-game #screen-question .opt .text {
  font-size:clamp(20px, 3vw, 40px);
  line-height:1.1;
  letter-spacing:.5px;
}

/* compteur de répartition (si affiché sur une tuile) */
body.jpo-game #screen-question .opt .opt-count {
  margin-left:auto;
  font-family:var(--jh-fd);
  font-size:clamp(20px, 3vw, 34px);
  background:var(--jh-ink);
  color:var(--jh-paper);
  border:3px solid var(--jh-paper);
  padding:2px 14px;
  flex-shrink:0;
}

/* ---------- états de RÉVÉLATION sur les tuiles ---------- */
/* bonne réponse : VERT franc, halo, ✓ */
body.jpo-game #screen-question .opt.correct .bd {
  background:var(--jh-green) !important;
  color:var(--jh-ink) !important;
  border-width:5px;
}
body.jpo-game #screen-question .opt.correct {
  transform:scale(1.04);
  animation:jhCorrectGlow 1.1s ease-in-out infinite;
}
body.jpo-game #screen-question .opt.correct .ocheck {
  display:block;
  width:clamp(34px, 4vw, 44px); height:clamp(34px, 4vw, 44px);
  line-height:1;
  font-size:clamp(20px, 2.6vw, 28px);
  background:var(--jh-green);
  border:3px solid var(--jh-ink);
  box-shadow:3px 3px 0 var(--jh-ink);
}
/* mauvaises : grisées/rouges, retrait visuel */
body.jpo-game #screen-question .opt.wrong .bd {
  background:var(--jh-red) !important;
  color:var(--jh-paper) !important;
  border-width:5px;
}
body.jpo-game #screen-question .opt.wrong .ocheck {
  display:block; background:var(--jh-red); color:var(--jh-paper);
  border:3px solid var(--jh-ink);
}
body.jpo-game #screen-question .opt.faded { opacity:.28; }

/* ---------- footer « qui a répondu » ---------- */
body.jpo-game #screen-question .gh-foot {
  background:var(--jh-ink);
  border-top:4px solid var(--jh-magenta);
}
body.jpo-game #screen-question .gh-foot .gf-av { border-color:var(--jh-paper); }
body.jpo-game #screen-question .gh-foot .gf-txt {
  color:var(--jh-paper);
  font-size:clamp(12px, 1.4vw, 18px);
  letter-spacing:1.5px;
}
body.jpo-game #screen-question .gh-foot .gf-dot { background:var(--jh-green); border-color:var(--jh-paper); }

/* ============================================================
   3) FEEDBACK — #screen-feedback  (CORRECT ! / FAUX !)
   Skin léger : on garde vert/rouge plein écran, on ajoute le
   branding EPITECH et on grossit le verdict.
   ============================================================ */
body.jpo-game #screen-feedback .fb.ok { background:var(--jh-green); }
body.jpo-game #screen-feedback .fb.ko { background:var(--jh-red); }

/* badge EPITECH · JPO en tête du verdict */
body.jpo-game #screen-feedback .top-meta::after {
  content:'EPITECH · JPO 2026';
  margin-left:auto;
  align-self:center;
  font-family:var(--jh-fd);
  font-size:13px; letter-spacing:1.5px;
  background:var(--jh-ink); color:var(--jh-paper);
  border:3px solid var(--jh-paper);
  box-shadow:3px 3px 0 var(--jh-paper);
  padding:6px 11px 5px;
  transform:rotate(2deg);
}

/* verdict énorme */
body.jpo-game #screen-feedback .fb .hero .title-row .body {
  font-size:clamp(46px, 11vw, 84px);
  letter-spacing:6px;
}
body.jpo-game #screen-feedback .fb .hero .emoji {
  width:clamp(160px, 26vw, 240px);
  height:clamp(160px, 26vw, 240px);
  font-size:clamp(160px, 26vw, 240px);
}
body.jpo-game #screen-feedback .fb .answer-block .ans {
  font-size:clamp(26px, 5vw, 44px);
}
body.jpo-game #screen-feedback .fb .delta-row .val {
  font-size:clamp(60px, 14vw, 104px);
}

/* ============================================================
   4) RÉVÉLATION / CLASSEMENT — #screen-reveal
   ============================================================ */
body.jpo-game #screen-reveal .lb-screen {
  font-family:var(--jh-fm);
  font-weight:700;
  position:relative;
}

/* héros : branding EPITECH + LIVE au-dessus du titre CLASSEMENT */
body.jpo-game #screen-reveal .lb-hero { padding-top:calc(52px + env(safe-area-inset-top)); }
body.jpo-game #screen-reveal .lb-hero::before {
  content:'EPITECH — LIVE · JPO 2026';
  position:absolute;
  top:calc(12px + env(safe-area-inset-top));
  left:50%; transform:translateX(-50%) rotate(-1.5deg);
  display:flex; align-items:center; gap:9px;
  font-family:var(--jh-fd);
  font-size:14px; letter-spacing:2px;
  color:var(--jh-ink);
  background:var(--jh-paper);
  border:3px solid var(--jh-paper);
  box-shadow:4px 4px 0 var(--jh-magenta);
  padding:7px 13px 6px;
  animation:jhBlink 1.6s steps(1) infinite;
  white-space:nowrap;
}

body.jpo-game #screen-reveal .lb-emoji { width:clamp(54px, 8vw, 88px); height:clamp(54px, 8vw, 88px); }

/* titre CLASSEMENT géant */
body.jpo-game #screen-reveal .lb-title { transform:rotate(-2deg); }
body.jpo-game #screen-reveal .lb-title .sh { background:var(--jh-ink); }
body.jpo-game #screen-reveal .lb-title .body {
  background:var(--jh-yellow);
  color:var(--jh-ink);
  border:5px solid var(--jh-ink);
  font-size:clamp(28px, 6vw, 56px);
  letter-spacing:3px;
  padding:8px 24px;
}
body.jpo-game #screen-reveal .lb-sub {
  color:var(--jh-paper);
  opacity:.85;
  font-size:clamp(11px, 1.4vw, 16px);
  letter-spacing:2px;
}

/* lignes du classement — cartes papier sur fond sombre, gros */
body.jpo-game #screen-reveal .lb-row .sh { background:var(--jh-magenta); }
body.jpo-game #screen-reveal .lb-row .bd {
  background:var(--jh-paper);
  color:var(--jh-ink);
  border:3px solid var(--jh-ink);
  padding:12px 14px;
}
body.jpo-game #screen-reveal .lb-row.row-1st .bd { background:var(--jh-yellow); }
body.jpo-game #screen-reveal .lb-row.row-me .bd { border-color:var(--jh-magenta); border-width:4px; }
body.jpo-game #screen-reveal .lb-rank {
  background:var(--jh-ink); color:var(--jh-paper); border-color:var(--jh-ink);
  font-size:clamp(14px, 1.8vw, 22px);
}
body.jpo-game #screen-reveal .lb-row.row-1st .lb-rank,
body.jpo-game #screen-reveal .lb-row.row-me .lb-rank { background:var(--jh-magenta); color:var(--jh-paper); }
body.jpo-game #screen-reveal .lb-av { width:clamp(40px, 5vw, 56px); height:clamp(40px, 5vw, 56px); }
body.jpo-game #screen-reveal .lb-nm { font-size:clamp(16px, 2.4vw, 30px); letter-spacing:1px; }
body.jpo-game #screen-reveal .lb-delta { font-size:clamp(10px, 1.2vw, 14px); }
body.jpo-game #screen-reveal .lb-delta .gained { color:var(--jh-magenta); } /* jamais vert en texte */
body.jpo-game #screen-reveal .lb-total { font-size:clamp(22px, 3.4vw, 40px); }

/* bas : prochaine question + CTA magenta pulsant */
body.jpo-game #screen-reveal .lb-bottom {
  background:var(--jh-ink);
  border-top:4px solid var(--jh-magenta);
}
body.jpo-game #screen-reveal .lb-next-lbl { color:rgba(255,254,247,.7); }
body.jpo-game #screen-reveal .lb-next-pill {
  background:var(--jh-paper); color:var(--jh-ink);
  border-color:var(--jh-paper); box-shadow:2px 2px 0 var(--jh-magenta);
  font-size:clamp(13px, 1.6vw, 18px);
}
body.jpo-game #screen-reveal .lb-cta {
  background:var(--jh-magenta);
  color:var(--jh-paper);
  border:4px solid var(--jh-paper);
  box-shadow:6px 6px 0 var(--jh-ink);
  font-size:clamp(18px, 2.6vw, 28px);
  letter-spacing:2px;
  animation:jhCtaPulse 1.5s ease-in-out infinite;
}
body.jpo-game #screen-reveal .lb-cta.final {
  background:var(--jh-green); color:var(--jh-ink);
}

/* ============================================================
   5) PODIUM FINAL — #screen-podium  (ambiance victoire Epitech)
   ============================================================ */
body.jpo-game #screen-podium .res-screen {
  background-color:var(--jh-ink);
  background-image:
    radial-gradient(rgba(255,254,247,.07) 1.6px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(255,254,247,.045) 0 14px, transparent 14px 40px);
  background-size:22px 22px, auto;
  color:var(--jh-paper);
  font-family:var(--jh-fm);
  font-weight:700;
  position:relative;
}

/* héros : bandeau sombre + branding EPITECH + GG énorme */
body.jpo-game #screen-podium .res-hero {
  background:var(--jh-ink);
  border-bottom:4px solid var(--jh-magenta);
  padding-top:calc(50px + env(safe-area-inset-top));
}
body.jpo-game #screen-podium .res-hero::before {
  content:'EPITECH · JPO 2026';
  position:absolute;
  top:calc(12px + env(safe-area-inset-top));
  left:50%; transform:translateX(-50%) rotate(-1.5deg);
  font-family:var(--jh-fd);
  font-size:14px; letter-spacing:2px;
  color:var(--jh-ink);
  background:var(--jh-paper);
  border:3px solid var(--jh-paper);
  box-shadow:4px 4px 0 var(--jh-magenta);
  padding:7px 13px 6px;
  white-space:nowrap;
}
body.jpo-game #screen-podium .res-label { color:var(--jh-paper); opacity:.7; letter-spacing:4px; }
body.jpo-game #screen-podium .res-gge { width:clamp(38px, 5vw, 60px); height:clamp(38px, 5vw, 60px); }
body.jpo-game #screen-podium .res-ggt {
  color:var(--jh-paper);              /* blanc (jamais de texte vert) */
  font-size:clamp(48px, 12vw, 104px);
  text-shadow:5px 5px 0 var(--jh-magenta);
  line-height:.95;
}
body.jpo-game #screen-podium .res-winner {
  color:var(--jh-paper);
  font-size:clamp(14px, 2vw, 24px);
  letter-spacing:2px;
}

/* podium : marches à ombres colorées, or qui rayonne */
body.jpo-game #screen-podium .pod .sh { background:var(--jh-ink); }
body.jpo-game #screen-podium .pod .bd { border:5px solid var(--jh-ink); }
body.jpo-game #screen-podium .pod.gold .bd {
  background:var(--jh-yellow);
  animation:jhWinGlow 1.8s ease-in-out infinite;
}
body.jpo-game #screen-podium .pod.silver .bd { background:var(--jh-grey2); }
body.jpo-game #screen-podium .pod.bronze .bd { background:var(--jh-orange); }
body.jpo-game #screen-podium .pod .ava { border-color:var(--jh-ink); }
body.jpo-game #screen-podium .pod .rk-num { font-size:clamp(30px, 5vw, 52px); color:var(--jh-ink); }
body.jpo-game #screen-podium .pod .pname { font-size:clamp(13px, 1.8vw, 22px); color:var(--jh-ink); }
body.jpo-game #screen-podium .pod .psc {
  background:var(--jh-ink); color:var(--jh-paper);
  border-color:var(--jh-ink); box-shadow:2px 2px 0 var(--jh-magenta);
  font-size:clamp(16px, 2.2vw, 26px);
}

/* classement complet sous le podium — cartes papier lisibles sur fond sombre */
body.jpo-game #screen-podium .res-list-title { color:rgba(255,254,247,.8); letter-spacing:3px; }
body.jpo-game #screen-podium .player-result .sh { background:var(--jh-magenta); }
body.jpo-game #screen-podium .player-result .bd {
  background:var(--jh-paper); color:var(--jh-ink); border-color:var(--jh-ink);
}
body.jpo-game #screen-podium .player-result.me .bd { background:var(--jh-yellow); border-color:var(--jh-magenta); }
body.jpo-game #screen-podium .player-result .rk { font-size:clamp(18px, 2.4vw, 28px); }
body.jpo-game #screen-podium .player-result .nm { font-size:clamp(15px, 2vw, 24px); }
body.jpo-game #screen-podium .player-result .sc { font-size:clamp(16px, 2.2vw, 26px); }

/* pied : boutons event */
body.jpo-game #screen-podium .res-foot {
  background:var(--jh-ink);
  border-top:4px solid var(--jh-magenta);
}
body.jpo-game #screen-podium .res-foot .btn.cyan {
  background:var(--jh-cyan); color:var(--jh-ink);
  border:4px solid var(--jh-paper); box-shadow:5px 5px 0 var(--jh-ink);
}
body.jpo-game #screen-podium .res-foot .btn.green {
  background:var(--jh-green); color:var(--jh-ink);
  border:4px solid var(--jh-paper); box-shadow:5px 5px 0 var(--jh-ink);
}

/* ============================================================
   Grands écrans (projection) : on peut aérer davantage.
   min-width uniquement — ne touche jamais le rendu mobile de base.
   ============================================================ */
@media (min-width:900px) {
  body.jpo-game #screen-question .answer-zone { padding:22px clamp(22px, 5vw, 80px); gap:18px; }
  body.jpo-game #screen-question .q-card { margin:14px clamp(22px, 5vw, 80px) 16px; }
  body.jpo-game #screen-reveal .lb-list,
  body.jpo-game #screen-podium .res-scroll { max-width:920px; }
}

/* ============================================================
   GRAND ÉCRAN JPO — calques bespoke (11_jpo.js)
   Markup fidèle aux maquettes, CHARTE OFFICIELLE EPITECH :
     fond bleu #013afb dominant · texte blanc · Anton + Plex Sans
     accents  vert fluo #00ff97 (fond only) · orange #ff5f3a · magenta #ff1ef7
   ⚠ vert fluo #00ff97 = JAMAIS de texte (fond/accent, texte foncé dessus).
   Tout scopé body.jpo-game #screen-reveal/#screen-podium .jge-cover.
   ============================================================ */
/* le calque plein écran se positionne PAR RAPPORT au #screen-* (qui, actif,
   occupe toute la zone de jeu) — d'où position:relative sur le parent. */
body.jpo-game #screen-reveal.active,
body.jpo-game #screen-podium.active,
body.jpo-game #screen-transition.active,
body.jpo-game #screen-question.active { position:relative; }

body.jpo-game #screen-reveal .jge-cover,
body.jpo-game #screen-podium .jge-cover,
body.jpo-game #screen-transition .jge-cover,
body.jpo-game #screen-question .jge-cover {
  --e-blue:#013afb; --e-white:#ffffff; --e-green:#00ff97;
  --e-orange:#ff5f3a; --e-magenta:#ff1ef7;
  --e-ink:#04123f;              /* texte foncé sur remplissages clairs/fluo */
  --e-ft:'Anton',sans-serif; --e-fb:'IBM Plex Sans',sans-serif;
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--e-blue); color:var(--e-white);
  font-family:var(--e-fb); font-weight:500;
}
/* décor : traits diagonaux blancs + carrés translucides (motif Epitech) */
body.jpo-game #screen-reveal .jge-cover::before,
body.jpo-game #screen-podium .jge-cover::before,
body.jpo-game #screen-question .jge-cover::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 34px),
    linear-gradient(115deg, rgba(255,255,255,.07) 0 40%, transparent 40%);
  background-size:auto, 60% 100%; background-position:0 0, right top; background-repeat:repeat, no-repeat;
}
body.jpo-game #screen-reveal .jge-cover > *,
body.jpo-game #screen-podium .jge-cover > *,
body.jpo-game #screen-question .jge-cover > * { position:relative; z-index:1; }

/* ---------- bannière commune ---------- */
body.jpo-game .jge-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(10px,1.4vw,18px) clamp(16px,2.2vw,30px);
  background:rgba(255,255,255,.09);
  border-bottom:3px solid rgba(255,255,255,.85); flex-shrink:0;
}
body.jpo-game .jge-lft { display:flex; align-items:center; gap:clamp(8px,1vw,14px); flex-wrap:wrap; }
body.jpo-game .jge-brand { font-family:var(--e-ft); font-size:clamp(18px,2.2vw,30px); letter-spacing:2px; color:var(--e-white); }
body.jpo-game .jge-chip {
  font-family:var(--e-ft); font-size:clamp(11px,1.2vw,16px); letter-spacing:1.5px;
  background:var(--e-magenta); color:var(--e-white); padding:3px 10px; transform:rotate(-2deg);
}
body.jpo-game .jge-tag { font-family:var(--e-ft); font-size:clamp(11px,1.2vw,16px); letter-spacing:2px; color:rgba(255,255,255,.8); }
body.jpo-game .jge-live { display:flex; align-items:center; gap:9px; font-size:clamp(11px,1.2vw,17px); font-weight:700; letter-spacing:1px; color:var(--e-white); }
body.jpo-game .jge-dot { width:11px; height:11px; border-radius:50%; background:var(--e-orange); animation:jhBlink 1s steps(1) infinite; }

/* ════════ ④ RÉVÉLATION ════════ */
/* MOBILE-FIRST : colonnes EMPILÉES (téléphone) — rien ne déborde en largeur.
   La disposition 2 colonnes (projection) est rétablie en @media(min-width:900px). */
body.jpo-game #screen-reveal .jge-rev { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
body.jpo-game #screen-reveal .jge-rev-l {
  flex:none; display:flex; flex-direction:column; min-height:0;
  padding:clamp(14px,2vw,30px) clamp(16px,2.4vw,34px);
  border-bottom:3px solid rgba(255,255,255,.35);
}
body.jpo-game #screen-reveal .jge-rev-qtag { font-family:var(--e-ft); font-size:clamp(11px,1.3vw,18px); letter-spacing:2px; color:rgba(255,255,255,.72); }
body.jpo-game #screen-reveal .jge-rev-q {
  font-family:var(--e-ft); font-size:clamp(24px,3.6vw,58px); line-height:1.04; letter-spacing:.5px;
  margin:6px 0 clamp(16px,2vw,30px); color:var(--e-white);
}
body.jpo-game #screen-reveal .jge-histo { flex:1; display:flex; align-items:flex-end; gap:clamp(10px,1.6vw,26px); min-height:clamp(200px,40vh,300px); padding-bottom:4px; }
body.jpo-game #screen-reveal .jge-hcol { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
body.jpo-game #screen-reveal .jge-cnt { font-family:var(--e-ft); font-size:clamp(22px,3vw,48px); line-height:1; margin-bottom:6px; color:var(--e-white); }
body.jpo-game #screen-reveal .jge-hbar {
  position:relative; width:100%;
  display:flex; align-items:flex-start; justify-content:center; padding-top:10px;
  border:3px solid var(--e-white); box-shadow:6px 6px 0 rgba(0,0,0,.35);
  transition:height .5s cubic-bezier(.2,.8,.2,1);
}
body.jpo-game #screen-reveal .jge-hcol.miss .jge-hbar { background:rgba(255,255,255,.28); }
body.jpo-game #screen-reveal .jge-hcol.good .jge-hbar { background:var(--e-green); border-color:var(--e-white); }
body.jpo-game #screen-reveal .jge-hk { font-family:var(--e-ft); font-size:clamp(24px,3.4vw,52px); }
body.jpo-game #screen-reveal .jge-hcol.miss .jge-hk { color:var(--e-white); }
body.jpo-game #screen-reveal .jge-hcol.good .jge-hk { color:var(--e-ink); }
body.jpo-game #screen-reveal .jge-goodbadge {
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:clamp(34px,3.4vw,50px); height:clamp(34px,3.4vw,50px);
  background:var(--e-green); border:3px solid var(--e-white); box-shadow:3px 3px 0 rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
body.jpo-game #screen-reveal .jge-goodbadge img { width:70%; height:70%; }
body.jpo-game #screen-reveal .jge-miss { position:absolute; top:6px; left:8px; font-family:var(--e-ft); font-size:clamp(16px,1.8vw,26px); color:var(--e-orange); }
body.jpo-game #screen-reveal .jge-kk {
  margin-top:8px; font-family:var(--e-fb); font-weight:700; font-size:clamp(12px,1.3vw,18px);
  text-align:center; color:rgba(255,255,255,.9); line-height:1.15;
  max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* modes sans QCM : solution en grand */
body.jpo-game #screen-reveal .jge-solublock { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
body.jpo-game #screen-reveal .jge-solu-k { font-family:var(--e-ft); font-size:clamp(14px,1.6vw,22px); letter-spacing:3px; color:rgba(255,255,255,.7); }
body.jpo-game #screen-reveal .jge-solu-a {
  font-family:var(--e-ft); font-size:clamp(32px,5vw,80px); line-height:1.05; margin-top:10px;
  color:var(--e-ink); background:var(--e-green); border:4px solid var(--e-white); box-shadow:8px 8px 0 rgba(0,0,0,.4);
  padding:14px 26px;
}

/* panneau droit révélation */
body.jpo-game #screen-reveal .jge-rev-r {
  width:100%; flex-shrink:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.6vw,22px);
  padding:clamp(14px,2vw,30px); background:rgba(255,255,255,.06);
}
body.jpo-game #screen-reveal .jge-good { background:var(--e-green); border:4px solid var(--e-white); box-shadow:8px 8px 0 rgba(0,0,0,.4); padding:clamp(14px,1.8vw,26px); color:var(--e-ink); }
body.jpo-game #screen-reveal .jge-good-t { font-family:var(--e-ft); font-size:clamp(13px,1.5vw,22px); letter-spacing:2px; display:flex; align-items:center; gap:9px; }
body.jpo-game #screen-reveal .jge-good-t img { width:1.4em; height:1.4em; }
body.jpo-game #screen-reveal .jge-good-a { font-family:var(--e-ft); font-size:clamp(24px,3vw,48px); line-height:1.02; margin-top:8px; letter-spacing:.5px; }
body.jpo-game #screen-reveal .jge-pts { background:rgba(255,255,255,.1); border:3px solid var(--e-white); padding:clamp(12px,1.6vw,22px); color:var(--e-white); }
body.jpo-game #screen-reveal .jge-pts-t { font-family:var(--e-ft); font-size:clamp(12px,1.4vw,20px); letter-spacing:1.5px; display:flex; align-items:center; gap:9px; color:var(--e-white); }
body.jpo-game #screen-reveal .jge-pts-t img { width:1.4em; height:1.4em; }
body.jpo-game #screen-reveal .jge-pts-d { font-size:clamp(12px,1.3vw,19px); font-weight:500; line-height:1.5; margin-top:9px; color:rgba(255,255,255,.9); }
body.jpo-game #screen-reveal .jge-pts-d b { background:var(--e-orange); color:var(--e-white); padding:1px 7px; }

/* ════════ ⑥ CLASSEMENT  &  podiums ════════ */
/* MOBILE-FIRST : podium + tableau EMPILÉS (téléphone). 2 colonnes en min-width:900px. */
body.jpo-game #screen-reveal .jge-cls { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
body.jpo-game #screen-reveal .jge-cls-l {
  width:100%; flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(44px,7vw,56px) clamp(14px,2vw,28px) clamp(14px,2vw,28px); border-bottom:3px solid rgba(255,255,255,.35); position:relative;
}
body.jpo-game #screen-reveal .jge-clt { position:absolute; top:clamp(14px,2vw,26px); left:0; right:0; text-align:center; font-family:var(--e-ft); font-size:clamp(14px,1.6vw,24px); letter-spacing:2px; color:var(--e-white); }

/* podium partagé (classement + final) */
body.jpo-game .jge-podium { display:flex; align-items:flex-end; gap:clamp(8px,1.4vw,20px); justify-content:center; }
body.jpo-game .jge-pod { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
body.jpo-game .jge-pod.empty { visibility:hidden; }
body.jpo-game .jge-av { position:relative; }
body.jpo-game .jge-av .avatar-box, body.jpo-game .jge-av img { width:clamp(52px,6.5vw,92px); height:clamp(52px,6.5vw,92px); border:4px solid var(--e-white); box-shadow:4px 4px 0 rgba(0,0,0,.4); background:var(--e-white); }
body.jpo-game .jge-medal { position:absolute; top:-10px; right:-8px; font-size:clamp(14px,1.5vw,22px); line-height:1; z-index:3; transform:rotate(10deg); }
body.jpo-game .jge-medal img { width:1em; height:1em; display:block; }
body.jpo-game .jge-crown { font-size:clamp(30px,3.6vw,56px); line-height:1; margin-bottom:2px; }
body.jpo-game .jge-crown img { width:1em; height:1em; }
body.jpo-game .jge-pnm { font-family:var(--e-ft); font-size:clamp(14px,1.7vw,26px); letter-spacing:.5px; margin-top:8px; color:var(--e-white); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.jpo-game .jge-psc { font-family:var(--e-ft); font-size:clamp(15px,1.8vw,28px); background:var(--e-white); color:var(--e-blue); border:3px solid var(--e-blue); padding:1px 10px; margin-top:3px; }
body.jpo-game .jge-block {
  width:100%; border:4px solid var(--e-white); border-bottom:none; display:flex; align-items:flex-start; justify-content:center;
  font-family:var(--e-ft); font-size:clamp(26px,3.4vw,52px); padding-top:10px; margin-top:10px;
}
body.jpo-game .jge-pod.p1 .jge-block { background:var(--e-green);  color:var(--e-ink);   height:clamp(90px,15vw,180px); }
body.jpo-game .jge-pod.p2 .jge-block { background:var(--e-white);  color:var(--e-blue);  height:clamp(64px,11vw,130px); }
body.jpo-game .jge-pod.p3 .jge-block { background:var(--e-orange); color:var(--e-white); height:clamp(46px,8vw,96px); }
body.jpo-game .jge-pod.me .jge-pnm { color:var(--e-green); }
body.jpo-game .jge-pod.me .jge-av img, body.jpo-game .jge-pod.me .jge-av .avatar-box { border-color:var(--e-magenta); box-shadow:4px 4px 0 var(--e-magenta); }

/* tableau de droite */
body.jpo-game #screen-reveal .jge-cls-r { flex:none; display:flex; flex-direction:column; min-height:0; padding:clamp(14px,2vw,28px) clamp(16px,2.2vw,32px); gap:clamp(7px,1vw,12px); }
body.jpo-game #screen-reveal .jge-cls-rh { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
body.jpo-game #screen-reveal .jge-cls-t { font-family:var(--e-ft); font-size:clamp(15px,1.8vw,26px); letter-spacing:1.5px; color:var(--e-white); }
body.jpo-game #screen-reveal .jge-cls-q { font-family:var(--e-ft); font-size:clamp(11px,1.2vw,17px); letter-spacing:1px; background:var(--e-white); color:var(--e-blue); padding:3px 10px; }
body.jpo-game .jge-lrow {
  display:flex; align-items:center; gap:clamp(9px,1.2vw,16px);
  border:3px solid var(--e-white); background:rgba(255,255,255,.1); padding:clamp(7px,1vw,13px) clamp(10px,1.4vw,18px);
}
body.jpo-game .jge-lrow.you { background:var(--e-magenta); border-color:var(--e-white); }
body.jpo-game .jge-pos { font-family:var(--e-ft); font-size:clamp(18px,2.2vw,32px); width:clamp(24px,3vw,44px); flex-shrink:0; color:var(--e-white); }
body.jpo-game .jge-lav .avatar-box, body.jpo-game .jge-lav img { width:clamp(32px,3.6vw,52px); height:clamp(32px,3.6vw,52px); border:3px solid var(--e-white); background:var(--e-white); flex-shrink:0; }
body.jpo-game .jge-lnm { font-family:var(--e-ft); font-size:clamp(15px,1.9vw,28px); letter-spacing:.5px; color:var(--e-white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.jpo-game .jge-mv { font-size:clamp(10px,1.1vw,15px); font-weight:700; letter-spacing:.5px; border:2px solid var(--e-white); padding:1px 6px; flex-shrink:0; }
body.jpo-game .jge-mv.up { background:var(--e-green); color:var(--e-ink); }
body.jpo-game .jge-mv.down { background:var(--e-orange); color:var(--e-white); }
body.jpo-game .jge-mv.same { background:rgba(255,255,255,.25); color:var(--e-white); }
body.jpo-game .jge-mv.new { background:var(--e-white); color:var(--e-blue); }
body.jpo-game .jge-lsc { margin-left:auto; font-family:var(--e-ft); font-size:clamp(17px,2.1vw,32px); color:var(--e-white); }
body.jpo-game .jge-gap { font-size:clamp(10px,1.1vw,15px); font-weight:700; color:rgba(255,255,255,.6); flex-shrink:0; }
body.jpo-game .jge-lrow.you .jge-gap { color:rgba(255,255,255,.85); }
body.jpo-game #screen-reveal .jge-tense {
  margin-top:auto; text-align:center; font-family:var(--e-ft); font-size:clamp(13px,1.5vw,22px); letter-spacing:1px;
  background:var(--e-green); color:var(--e-ink); border:3px solid var(--e-white); padding:clamp(7px,1vw,13px) clamp(12px,1.6vw,20px);
  display:flex; align-items:center; justify-content:center; gap:9px;
}
body.jpo-game #screen-reveal .jge-tense img { width:1.3em; height:1.3em; }
body.jpo-game #screen-reveal .jge-cd { color:var(--e-ink); opacity:.8; }

/* ════════ ⑦ PODIUM FINAL ════════ */
body.jpo-game #screen-podium .jge-fin { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; padding:clamp(14px,2vw,30px) clamp(16px,3vw,46px) clamp(20px,3vw,40px); gap:clamp(14px,2vw,26px); }
body.jpo-game #screen-podium .jge-fin-hero { text-align:center; }
body.jpo-game #screen-podium .jge-fin-stamp {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--e-ft); font-size:clamp(13px,1.5vw,22px); letter-spacing:2px;
  background:var(--e-magenta); color:var(--e-white); padding:6px 15px; transform:rotate(-1.5deg);
}
body.jpo-game #screen-podium .jge-fin-stamp img { width:1.3em; height:1.3em; }
body.jpo-game #screen-podium .jge-fin-win { font-family:var(--e-ft); font-size:clamp(34px,6vw,96px); line-height:.94; letter-spacing:1px; color:var(--e-white); margin-top:clamp(8px,1.4vw,18px); }
body.jpo-game #screen-podium .jge-fin-sub { font-size:clamp(13px,1.6vw,24px); font-weight:700; letter-spacing:1.5px; color:var(--e-green); margin-top:8px; }
body.jpo-game #screen-podium .jge-podium-fin { margin-top:clamp(6px,1vw,14px); }
body.jpo-game #screen-podium .jge-podium-fin .jge-av .avatar-box, body.jpo-game #screen-podium .jge-podium-fin .jge-av img { width:clamp(58px,7vw,110px); height:clamp(58px,7vw,110px); }
body.jpo-game #screen-podium .jge-fin-list { display:flex; flex-direction:column; gap:clamp(7px,1vw,12px); max-width:920px; width:100%; margin:0 auto; }
body.jpo-game .jge-frow { display:flex; align-items:center; gap:clamp(9px,1.2vw,16px); border:3px solid var(--e-white); background:rgba(255,255,255,.1); padding:clamp(7px,1vw,13px) clamp(10px,1.4vw,18px); }
body.jpo-game .jge-frow.you { background:var(--e-magenta); }

/* PROJECTION LARGE (≥900px) : on rétablit les 2 colonnes côte à côte.
   En dessous (téléphone), tout reste empilé sur 1 colonne — cf. règles de base. */
@media (min-width:900px) {
  /* révélation : histogramme à gauche · bonne réponse/points à droite */
  body.jpo-game #screen-reveal .jge-rev { flex-direction:row; overflow:hidden; }
  body.jpo-game #screen-reveal .jge-rev-l {
    flex:1; border-right:3px solid rgba(255,255,255,.35); border-bottom:none;
  }
  body.jpo-game #screen-reveal .jge-histo { min-height:0; }
  body.jpo-game #screen-reveal .jge-rev-r { width:clamp(260px,32vw,460px); flex-shrink:0; }

  /* classement : podium à gauche · tableau à droite */
  body.jpo-game #screen-reveal .jge-cls { flex-direction:row; overflow:hidden; }
  body.jpo-game #screen-reveal .jge-cls-l {
    width:clamp(300px,36vw,520px); flex-shrink:0; justify-content:flex-end;
    padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) 0;
    border-right:3px solid rgba(255,255,255,.35); border-bottom:none;
  }
  body.jpo-game #screen-reveal .jge-cls-r { flex:1; }
}

/* ============================================================
   💣 GRAND ÉCRAN · LA BOMBE — mise en scène FIDÈLE au prototype
   design-prototypes/p2-jpo/format-bombe.html (états 2 / 4 / 6).
   ⚠ PALETTE DU PROTOTYPE (PAS la charte bleue Epitech) — activée
   uniquement sous body.jbombe pour ne rien faire fuiter ailleurs.
   Calque .jge-cover.jgb-cover sur #screen-question / #screen-podium
   / #screen-transition. Néobrutalisme : bords noirs épais, ombres
   dures Npx Npx 0. Gros et lisible de loin.
   ============================================================ */
body.jpo-game.jbombe, body.jpo-game.jclassique, body.jpo-game.jdefi, body.jpo-game.jpiscine, body.jpo-game.jbuzzer {
  --bp-paper:#FFFEF7; --bp-ink:#0A0A0A; --bp-gris:#C8C8C8; --bp-gris2:#E8E8E8;
  --bp-magenta:#FF2E93; --bp-jaune:#FFD600; --bp-cyan:#5BD8E5; --bp-vert:#5BE885;
  --bp-rouge:#FF5252; --bp-orange:#FF9F45; --bp-violet:#9D4EDD; --bp-bleu:#4D7CFF;
}
@keyframes jgbShake { 0%,100%{ transform:rotate(-3deg) translate(0,0);} 25%{ transform:rotate(-1deg) translate(2px,-2px);} 75%{ transform:rotate(-5deg) translate(-2px,2px);} }
@keyframes jgbSpin { to{ transform:rotate(360deg);} }
@keyframes jgbPop  { 0%{ transform:scale(.9) rotate(-3deg);} 100%{ transform:scale(1.07) rotate(3deg);} }
@keyframes jgbBlink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
@keyframes jgbCapPass { 0%{ transform:translateX(-50%) rotate(-1.5deg) scale(1);} 40%{ transform:translateX(-50%) rotate(-1.5deg) scale(1.16);} 100%{ transform:translateX(-50%) rotate(-1.5deg) scale(1);} }

/* le calque bombe : fond PAPIER pointillé (on neutralise le fond bleu
   + le décor rayé Epitech du .jge-cover) */
body.jpo-game.jbombe #screen-transition .jge-cover,
body.jpo-game.jbombe #screen-podium .jge-cover,
body.jpo-game.jbombe #screen-question .jge-cover {
  background:var(--bp-gris);
  color:var(--bp-ink);
  font-family:'IBM Plex Mono','IBM Plex Sans',monospace; font-weight:500;
}
body.jpo-game.jbombe #screen-transition .jge-cover::before,
body.jpo-game.jbombe #screen-podium .jge-cover::before,
body.jpo-game.jbombe #screen-question .jge-cover::before {
  background-image:radial-gradient(rgba(10,10,10,.07) 1.6px, transparent 1.6px) !important;
  background-size:22px 22px !important; background-position:0 0 !important; background-repeat:repeat !important;
}

/* ── barre de tête (ink) ── */
body.jpo-game.jbombe .jgb-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0;
  background:var(--bp-ink); color:var(--bp-paper);
  padding:clamp(9px,1.3vw,16px) clamp(16px,2.2vw,28px); border-bottom:4px solid var(--bp-ink);
}
body.jpo-game.jbombe .jgb-bar-l { display:flex; align-items:center; gap:clamp(8px,1.2vw,14px); flex-wrap:wrap; min-width:0; }
body.jpo-game.jbombe .jgb-brand { font-family:'Anton',sans-serif; font-size:clamp(18px,2.2vw,32px); letter-spacing:2px; color:var(--bp-jaune); }
body.jpo-game.jbombe .jgb-mode { font-weight:700; font-size:clamp(10px,1.2vw,16px); letter-spacing:2px; color:rgba(255,254,247,.72); }
body.jpo-game.jbombe .jgb-bar-r { display:flex; align-items:center; gap:clamp(8px,1.2vw,16px); flex-shrink:0; }
body.jpo-game.jbombe .jgb-live {
  display:inline-flex; align-items:center; gap:7px; background:var(--bp-rouge); color:#fff;
  border:2px solid #fff; padding:2px 10px; font-family:'Anton',sans-serif; font-size:clamp(10px,1.2vw,16px); letter-spacing:1.5px;
}
body.jpo-game.jbombe .jgb-livedot { width:9px; height:9px; border-radius:50%; background:#fff; animation:jgbBlink 1s steps(1) infinite; }
body.jpo-game.jbombe .jgb-meche { font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); letter-spacing:1.5px; color:var(--bp-paper); }
body.jpo-game.jbombe .jgb-meche b { color:var(--bp-jaune); }

/* corps papier */
body.jpo-game.jbombe .jgb-body { flex:1; position:relative; min-height:0; overflow:hidden; }

/* scène : conteneur du cercle — décalé sous la question pour ne pas masquer les joueurs */
body.jpo-game.jbombe #screen-question .jgb-stage { position:absolute; inset:clamp(150px,23vh,230px) 0 0 0; }

/* QUESTION + réponses en bandeau haut (au-dessus du cercle) */
body.jpo-game.jbombe #screen-question .jgb-qwrap {
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1vw,12px);
  padding:clamp(10px,1.6vw,22px) clamp(12px,2vw,26px) 0; pointer-events:none;
}
body.jpo-game.jbombe #screen-question .jgb-q {
  font-family:'Anton',sans-serif; font-size:clamp(18px,2.5vw,38px); line-height:1.05; text-align:center;
  color:var(--bp-ink); background:var(--bp-paper);
  border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-ink);
  padding:clamp(8px,1.2vw,16px) clamp(14px,2vw,30px); max-width:90%;
}
body.jpo-game.jbombe #screen-question .jgb-opts { display:flex; gap:clamp(6px,1vw,12px); flex-wrap:wrap; justify-content:center; max-width:94%; }
body.jpo-game.jbombe #screen-question .jgb-opt {
  display:flex; align-items:center; gap:8px; font-size:clamp(12px,1.35vw,20px); font-weight:700;
  background:var(--bp-paper); color:var(--bp-ink); border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink);
  padding:clamp(5px,.7vw,9px) clamp(9px,1.2vw,15px);
}
body.jpo-game.jbombe #screen-question .jgb-opt-l { font-family:'Anton',sans-serif; background:var(--bp-ink); color:var(--bp-paper); padding:1px 9px; }

/* bombe + mèche au centre */
body.jpo-game.jbombe #screen-question .jgb-center {
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center;
}
body.jpo-game.jbombe #screen-question .jgb-fuse-track {
  position:relative; width:clamp(150px,20vw,280px); height:clamp(12px,1.4vw,18px);
  border:3px solid var(--bp-ink); background:var(--bp-paper);
  overflow:visible; margin-bottom:clamp(10px,1.4vw,18px);
}
body.jpo-game.jbombe #screen-question .jgb-fuse-fill {
  position:absolute; top:0; bottom:0; left:0; width:100%;
  background:repeating-linear-gradient(45deg,var(--bp-rouge) 0 7px,var(--bp-orange) 7px 12px);
  transition:width .12s linear;
}
body.jpo-game.jbombe #screen-question .jgb-fuse-track.hot { border-color:var(--bp-rouge); animation:jgbBlink .5s steps(1) infinite; }
body.jpo-game.jbombe #screen-question .jgb-flame {
  position:absolute; top:50%; width:clamp(26px,3vw,44px); height:clamp(26px,3vw,44px);
  transform:translate(-50%,-50%); transition:left .12s linear; filter:drop-shadow(0 0 6px rgba(255,82,82,.8));
}
body.jpo-game.jbombe #screen-question .jgb-bomb {
  width:clamp(96px,12vw,150px); height:clamp(96px,12vw,150px);
  border:4px solid var(--bp-ink); background:var(--bp-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:6px 6px 0 var(--bp-rouge); transform:rotate(-3deg); animation:jgbShake .5s ease-in-out infinite;
}
body.jpo-game.jbombe #screen-question .jgb-bomb img { width:78%; height:78%; }

/* légende "C'EST À X !" */
body.jpo-game.jbombe #screen-question .jgb-caption {
  position:absolute; bottom:clamp(10px,1.6vw,22px); left:50%; transform:translateX(-50%) rotate(-1.5deg);
  z-index:5; display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:'Anton',sans-serif; font-size:clamp(18px,2.4vw,40px); letter-spacing:2px;
  color:var(--bp-jaune); background:var(--bp-ink); border:3px solid var(--bp-jaune);
  box-shadow:5px 5px 0 var(--bp-magenta); padding:clamp(6px,1vw,12px) clamp(14px,2.2vw,30px);
}
body.jpo-game.jbombe #screen-question .jgb-caption img { width:1.2em; height:1.2em; }
body.jpo-game.jbombe #screen-question .jgb-caption.pass { animation:jgbCapPass .4s ease; }

/* joueurs en cercle */
body.jpo-game.jbombe #screen-question .jgb-p {
  position:absolute; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:2px; width:clamp(70px,8vw,120px);
}
body.jpo-game.jbombe #screen-question .jgb-pav {
  position:relative; width:clamp(46px,5vw,80px); height:clamp(46px,5vw,80px);
  border:3px solid var(--bp-ink); background:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jbombe #screen-question .jgb-pav .ava-emo,
body.jpo-game.jbombe #screen-question .jgb-pav img { width:100%; height:100%; display:block; }
body.jpo-game.jbombe #screen-question .jgb-hasbomb {
  position:absolute; top:-16px; right:-14px; width:clamp(26px,2.8vw,42px); height:clamp(26px,2.8vw,42px);
  transform:rotate(8deg); z-index:4;
}
body.jpo-game.jbombe #screen-question .jgb-hasbomb img { width:100%; height:100%; }
body.jpo-game.jbombe #screen-question .jgb-pn {
  font-family:'Anton',sans-serif; font-size:clamp(11px,1.2vw,18px); letter-spacing:.5px; color:var(--bp-ink);
  background:var(--bp-paper); border:1.5px solid var(--bp-ink); padding:0 6px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.jpo-game.jbombe #screen-question .jgb-lives { display:flex; gap:1px; align-items:center; }
body.jpo-game.jbombe #screen-question .jgb-hh { width:clamp(12px,1.3vw,18px); height:clamp(12px,1.3vw,18px); display:inline-flex; }
body.jpo-game.jbombe #screen-question .jgb-hh img { width:100%; height:100%; }
body.jpo-game.jbombe #screen-question .jgb-hh.dead { filter:grayscale(1) opacity(.35); }
/* holder surligné (jaune + scale + bombe) */
body.jpo-game.jbombe #screen-question .jgb-p.holder { z-index:6; }
body.jpo-game.jbombe #screen-question .jgb-p.holder .jgb-pav {
  border-width:4px; box-shadow:0 0 0 4px var(--bp-jaune), 4px 4px 0 var(--bp-ink); transform:scale(1.14);
}
body.jpo-game.jbombe #screen-question .jgb-p.holder .jgb-pn { background:var(--bp-jaune); }
body.jpo-game.jbombe #screen-question .jgb-p.dead { filter:grayscale(1) opacity(.4); }

/* ════ 💥 EXPLOSION plein écran (état 4) ════ */
body.jpo-game.jbombe #screen-question .jgb-boom {
  position:absolute; inset:0; z-index:30; display:none; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; background:var(--bp-rouge);
}
body.jpo-game.jbombe #screen-question .jgb-boom-rays {
  position:absolute; inset:-20%;
  background:repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,214,0,.55) 0 9deg, transparent 9deg 18deg);
  animation:jgbSpin 8s linear infinite;
}
body.jpo-game.jbombe #screen-question .jgb-boom-em {
  position:relative; z-index:2; width:clamp(130px,18vw,220px); height:clamp(130px,18vw,220px);
  animation:jgbPop .6s ease-out infinite alternate;
}
body.jpo-game.jbombe #screen-question .jgb-boom-title {
  position:relative; z-index:2; text-align:center; font-family:'Anton',sans-serif;
  font-size:clamp(34px,6vw,80px); line-height:.95; letter-spacing:1px;
  color:var(--bp-paper); -webkit-text-stroke:2px var(--bp-ink); margin-top:6px;
}
body.jpo-game.jbombe #screen-question .jgb-boom-card {
  position:relative; z-index:2; margin-top:clamp(12px,2vw,24px); display:flex; align-items:center; gap:14px;
  background:var(--bp-ink); border:4px solid var(--bp-jaune); box-shadow:6px 6px 0 rgba(0,0,0,.35);
  padding:clamp(10px,1.4vw,18px) clamp(14px,2vw,26px); transform:rotate(-1.5deg);
}
body.jpo-game.jbombe #screen-question .jgb-boom-av { width:clamp(48px,5vw,72px); height:clamp(48px,5vw,72px); border:3px solid var(--bp-jaune); background:var(--bp-paper); display:block; }
body.jpo-game.jbombe #screen-question .jgb-boom-av .ava-emo,
body.jpo-game.jbombe #screen-question .jgb-boom-av img { width:100%; height:100%; display:block; }
body.jpo-game.jbombe #screen-question .jgb-boom-nm { font-family:'Anton',sans-serif; font-size:clamp(20px,2.6vw,40px); letter-spacing:1px; color:var(--bp-jaune); }
body.jpo-game.jbombe #screen-question .jgb-boom-life { display:flex; align-items:center; gap:6px; font-weight:700; font-size:clamp(12px,1.4vw,20px); letter-spacing:.5px; color:var(--bp-paper); margin-top:4px; }
body.jpo-game.jbombe #screen-question .jgb-boom-life .jgb-hh { width:clamp(16px,1.8vw,26px); height:clamp(16px,1.8vw,26px); display:inline-flex; }
body.jpo-game.jbombe #screen-question .jgb-boom-life .jgb-hh img { width:100%; height:100%; }
body.jpo-game.jbombe #screen-question .jgb-boom-life .jgb-hh.dead { filter:grayscale(1) opacity(.35); }

/* ════ transition initiale (pas de get-ready violet) ════ */
body.jpo-game.jbombe #screen-transition .jgb-pre {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,2.5vw,34px);
}
body.jpo-game.jbombe #screen-transition .jgb-bomb-pre { animation:jgbShake .5s ease-in-out infinite; }
body.jpo-game.jbombe #screen-transition .jgb-pre-title {
  font-family:'Anton',sans-serif; font-size:clamp(28px,5vw,72px); letter-spacing:2px; text-align:center;
  color:var(--bp-ink); background:var(--bp-jaune); border:5px solid var(--bp-ink);
  box-shadow:8px 8px 0 var(--bp-magenta); padding:12px 26px; transform:rotate(-2deg);
}

/* ════ état 6 : LES SURVIVANTS (grand écran) ════ */
body.jpo-game.jbombe #screen-podium .jgb-fin {
  flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto;
  padding:clamp(14px,2vw,28px) clamp(16px,3vw,48px) clamp(20px,3vw,40px); gap:clamp(12px,2vw,22px);
}
body.jpo-game.jbombe #screen-podium .jgb-fin-hero { text-align:center; }
body.jpo-game.jbombe #screen-podium .jgb-fin-kick { font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); letter-spacing:2px; color:var(--bp-magenta); }
body.jpo-game.jbombe #screen-podium .jgb-fin-emoji {
  width:clamp(70px,8vw,110px); height:clamp(70px,8vw,110px); margin:clamp(8px,1.2vw,16px) auto;
  border:4px solid var(--bp-ink); background:var(--bp-jaune); display:flex; align-items:center; justify-content:center;
  transform:rotate(-4deg); box-shadow:6px 6px 0 var(--bp-magenta);
}
body.jpo-game.jbombe #screen-podium .jgb-fin-emoji img { width:76%; height:76%; }
body.jpo-game.jbombe #screen-podium .jgb-fin-title { font-family:'Anton',sans-serif; font-size:clamp(36px,7vw,104px); line-height:.92; letter-spacing:2px; color:var(--bp-ink); }
body.jpo-game.jbombe #screen-podium .jgb-fin-sub { font-weight:700; font-size:clamp(12px,1.4vw,20px); margin-top:8px; color:rgba(10,10,10,.65); }
body.jpo-game.jbombe #screen-podium .jgb-rank { display:flex; flex-direction:column; gap:clamp(7px,1vw,12px); max-width:920px; width:100%; margin:0 auto; }
body.jpo-game.jbombe .jgb-rk {
  display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); max-width:100%; min-width:0;
  border:3px solid var(--bp-ink); background:var(--bp-paper); padding:clamp(8px,1vw,13px) clamp(11px,1.5vw,18px); box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jbombe .jgb-rk.gold { background:var(--bp-jaune); }
body.jpo-game.jbombe .jgb-rk.me { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jbombe .jgb-rk.out { opacity:.6; }
body.jpo-game.jbombe .jgb-rk-n { font-family:'Anton',sans-serif; font-size:clamp(18px,2.2vw,32px); width:clamp(26px,3vw,44px); text-align:center; flex-shrink:0; }
body.jpo-game.jbombe .jgb-rk.gold .jgb-rk-n::after { content:' 🥇'; }
body.jpo-game.jbombe .jgb-rk-av { width:clamp(38px,4vw,56px); height:clamp(38px,4vw,56px); flex-shrink:0; border:2.5px solid var(--bp-ink); background:var(--bp-paper); }
body.jpo-game.jbombe .jgb-rk-av .ava-emo, body.jpo-game.jbombe .jgb-rk-av img { width:100%; height:100%; display:block; }
body.jpo-game.jbombe .jgb-rk-nm { flex:1; min-width:0; font-family:'Anton',sans-serif; font-size:clamp(15px,1.9vw,28px); letter-spacing:.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.jpo-game.jbombe .jgb-rk-lv { display:flex; gap:2px; flex-shrink:0; align-items:center; }
body.jpo-game.jbombe .jgb-rk-lv .jgb-hh { width:clamp(15px,1.6vw,22px); height:clamp(15px,1.6vw,22px); display:inline-flex; }
body.jpo-game.jbombe .jgb-rk-lv .jgb-hh img { width:100%; height:100%; }
body.jpo-game.jbombe .jgb-rk-lv .jgb-hh.dead { filter:grayscale(1) opacity(.3); }

/* ============================================================
   SÉCURITÉ RESPONSIVE (HÔTE) — aucun débordement horizontal, jamais.
   Les calques .jge-cover / .jgb-cover sont déjà overflow:hidden ; on
   verrouille en plus les <section> écran + le classement/podium.
   ============================================================ */
body.jpo-game #screen-transition,
body.jpo-game #screen-question,
body.jpo-game #screen-feedback,
body.jpo-game #screen-reveal,
body.jpo-game #screen-podium { max-width:100%; overflow-x:hidden; }
body.jpo-game #screen-question .q-screen,
body.jpo-game #screen-reveal .lb-screen,
body.jpo-game #screen-podium .res-screen,
body.jpo-game #screen-feedback .fb { max-width:100%; overflow-x:hidden; }
/* le podium bespoke et ses lignes tiennent dans la largeur (avatars/noms fluides) */
body.jpo-game .jge-podium,
body.jpo-game .jge-fin-list { max-width:100%; }
body.jpo-game .jge-pnm,
body.jpo-game .jge-lnm { min-width:0; }
body.jpo-game .jge-lrow,
body.jpo-game .jge-frow { max-width:100%; min-width:0; }
body.jpo-game .jge-lnm { flex:1; }

/* ============================================================
   💣 SALON LA BOMBE (grand écran · état 1 du prototype)
   Recompose #screen-lobby en 2 colonnes : barre ink en tête,
   panneau rouge gauche (PIN géant + verrous), panneau papier
   droit (cercle d'avatars autour de la bombe). Restyle only :
   #addBotBtn / #startBtn / #lobbyBack / #lobbyClose gardent leurs
   handlers. Tout scopé body.jpo-game.jbombe #screen-lobby.
   ============================================================ */
body.jpo-game.jbombe #screen-lobby.active {
  display:flex; flex-direction:column; height:100%;
  background:var(--bp-gris);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.6px, transparent 1.6px);
  background-size:22px 22px;
  font-family:'IBM Plex Mono','IBM Plex Sans',monospace; color:var(--bp-ink);
}
body.jpo-game.jbombe #screen-lobby .lobby-body {
  flex:1; min-height:0; display:grid;
  grid-template-columns:minmax(240px,320px) 1fr;
  grid-template-rows:auto auto 1fr auto;
  gap:0; padding:0; margin:0; overflow:hidden; max-width:100%;
}
/* éléments non montrés par le prototype */
body.jpo-game.jbombe #screen-lobby .lobby-invite,
body.jpo-game.jbombe #screen-lobby .lobby-qr,
body.jpo-game.jbombe #screen-lobby .config-row,
body.jpo-game.jbombe #screen-lobby .code-card .cc-actions,
body.jpo-game.jbombe #screen-lobby .code-card .cc-lbl,
body.jpo-game.jbombe #screen-lobby .code-card .cc-sub { display:none !important; }
/* FIX : neutralise les pseudos VERTS du skin bleu qui remplissaient le panneau rouge */
body.jpo-game.jbombe #screen-lobby .code-card::before,
body.jpo-game.jbombe #screen-lobby .code-card::after { content:none !important; display:none !important; background:none !important; }
body.jpo-game.jbombe #screen-lobby .code-card { background:var(--bp-rouge) !important; }
body.jpo-game.jbombe #screen-lobby .code-big { text-shadow:none !important; }
body.jpo-game.jbombe #screen-lobby .jbl-join,
body.jpo-game.jbombe #screen-lobby .jbl-locks,
body.jpo-game.jbombe #screen-lobby .code-card .body { position:relative; z-index:2; }

/* ── barre ink en tête ── */
body.jpo-game.jbombe #screen-lobby .lobby-top {
  grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:12px; margin:0;
  background:var(--bp-ink); color:var(--bp-paper); padding:9px 18px; border-bottom:4px solid var(--bp-ink);
}
body.jpo-game.jbombe #screen-lobby .lobby-top .back-btn {
  order:0; flex-shrink:0; width:32px; height:32px; padding:0; line-height:1;
  background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-paper); box-shadow:none;
}
body.jpo-game.jbombe #screen-lobby .lobby-top .lobby-close { order:3; background:var(--bp-rouge); color:#fff; }
body.jpo-game.jbombe #screen-lobby .lobby-top .page-title {
  order:1; display:inline-flex !important; align-items:baseline; gap:8px; flex-wrap:nowrap;
  font-size:initial; letter-spacing:0; color:var(--bp-paper);
  margin:0; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
body.jpo-game.jbombe #screen-lobby .lobby-top .page-title::before,
body.jpo-game.jbombe #screen-lobby .lobby-top .page-title::after { content:none !important; display:none !important; }
body.jpo-game.jbombe #screen-lobby .lobby-top .page-title .jbl-brand {
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,28px); letter-spacing:2px; color:var(--bp-jaune); white-space:nowrap;
}
body.jpo-game.jbombe #screen-lobby .lobby-top .page-title .jbl-mode {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(9px,1.1vw,14px);
  letter-spacing:2px; color:rgba(255,254,247,.7); white-space:nowrap;
}
body.jpo-game.jbombe #screen-lobby .lobby-top::after { content:none; display:none; }
body.jpo-game.jbombe #screen-lobby .lobby-top .jbl-live {
  order:2; margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap;
  background:var(--bp-rouge); color:#fff; border:2px solid #fff; padding:3px 10px;
  font-family:'Anton',sans-serif; font-size:clamp(10px,1.2vw,15px); letter-spacing:1.5px;
}
body.jpo-game.jbombe #screen-lobby .lobby-top .jbl-live .jbl-dot {
  width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0;
  animation:jgbBlink 1s steps(1) infinite;   /* SEUL le point clignote */
}

/* ── panneau rouge gauche ── */
body.jpo-game.jbombe #screen-lobby .code-card {
  grid-column:1; grid-row:2/5; margin:0; padding:20px 16px; border:none; border-right:4px solid var(--bp-ink);
  background:var(--bp-rouge); color:var(--bp-paper); box-shadow:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
body.jpo-game.jbombe #screen-lobby .code-card .body,
body.jpo-game.jbombe #screen-lobby .code-card .left {
  display:flex; flex-direction:column; align-items:center; background:none; border:none; box-shadow:none; padding:0; margin:0;
}
body.jpo-game.jbombe #screen-lobby .code-big {
  background:var(--bp-paper); color:var(--bp-ink); border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-jaune);
  padding:10px 18px; font-family:'Anton',sans-serif; font-size:clamp(34px,5vw,60px); letter-spacing:5px; line-height:1;
}
body.jpo-game.jbombe #screen-lobby .jbl-join {
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,15px); letter-spacing:2px;
}
body.jpo-game.jbombe #screen-lobby .jbl-site {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(11px,1.3vw,15px); letter-spacing:1px;
  background:var(--bp-ink); color:var(--bp-jaune); border:2px solid var(--bp-ink); padding:3px 10px;
}
body.jpo-game.jbombe #screen-lobby .jbl-pinlbl { font-size:clamp(11px,1.3vw,15px); letter-spacing:3px; margin-top:4px; }
body.jpo-game.jbombe #screen-lobby .jbl-locks { display:flex; flex-direction:column; gap:7px; width:100%; max-width:260px; }
body.jpo-game.jbombe #screen-lobby .jbl-lock {
  display:flex; align-items:center; gap:8px; font-size:clamp(9px,1.1vw,12px); font-weight:700; letter-spacing:.5px;
  background:rgba(255,254,247,.14); border:2px solid var(--bp-paper); padding:6px 9px;
}
body.jpo-game.jbombe #screen-lobby .jbl-lock .ic { font-size:1.2em; }

/* ── panneau papier droit : header + cercle ── */
body.jpo-game.jbombe #screen-lobby .section-title {
  grid-column:2; grid-row:2; margin:0; padding:14px 18px 4px; border:none; background:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.jpo-game.jbombe #screen-lobby .section-title .st-sticker:not(.st-count) { transform:none; }
body.jpo-game.jbombe #screen-lobby .section-title .st-sticker:not(.st-count)::before { content:none !important; display:none !important; }
body.jpo-game.jbombe #screen-lobby .section-title .st-sticker:not(.st-count) .body {
  background:none !important; border:none !important; box-shadow:none !important; padding:0; margin:0;
  font-family:'Anton',sans-serif; font-size:clamp(15px,1.8vw,24px); letter-spacing:1px; color:var(--bp-ink);
}
body.jpo-game.jbombe #screen-lobby .section-title .st-count { background:none; border:none; box-shadow:none; }
body.jpo-game.jbombe #screen-lobby .section-title .st-count .body {
  font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,20px); letter-spacing:1px;
  background:var(--bp-vert); color:var(--bp-ink); border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink); padding:3px 11px;
}
body.jpo-game.jbombe #screen-lobby .section-title .st-count .body::before { content:'👥 '; }

body.jpo-game.jbombe #screen-lobby #playersWall {
  grid-column:2; grid-row:3; position:relative; display:block; margin:0; padding:0; overflow:visible;
  /* stage CARRÉ centré → le cercle (rayon 40%) est bien rond (pas une ellipse aplatie) */
  align-self:center; justify-self:center;
  width:min(52vw, 62vh); height:min(52vw, 62vh); max-width:100%;
}
body.jpo-game.jbombe #screen-lobby .jbl-bomb {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-4deg);
  width:clamp(70px,8vw,110px); height:clamp(70px,8vw,110px);
  border:4px solid var(--bp-ink); background:var(--bp-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:5px 5px 0 var(--bp-rouge); z-index:2;
}
body.jpo-game.jbombe #screen-lobby .jbl-bomb .noto { width:74%; height:74%; }
body.jpo-game.jbombe #screen-lobby .jbl-btag {
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:'Anton',sans-serif; font-size:clamp(8px,1vw,11px); letter-spacing:1px; white-space:nowrap;
  background:var(--bp-jaune); color:var(--bp-ink); border:2px solid var(--bp-ink); padding:2px 6px;
}
body.jpo-game.jbombe #screen-lobby .jbl-orb {
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:2px; width:clamp(60px,7vw,86px);
}
body.jpo-game.jbombe #screen-lobby .jbl-oav {
  position:relative; width:clamp(40px,4.5vw,60px); height:clamp(40px,4.5vw,60px);
  border:3px solid var(--bp-ink); background:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jbombe #screen-lobby .jbl-oav .ava-emo,
body.jpo-game.jbombe #screen-lobby .jbl-oav img { width:100%; height:100%; display:block; }
body.jpo-game.jbombe #screen-lobby .jbl-oav.r1 { transform:rotate(-4deg); }
body.jpo-game.jbombe #screen-lobby .jbl-oav.r2 { transform:rotate(3deg); }
body.jpo-game.jbombe #screen-lobby .jbl-oav.r3 { transform:rotate(-2deg); }
/* DENSITÉ : avatars/noms rétrécissent quand la foule grandit (2 → ~45 joueurs) */
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="l"] .jbl-orb { width:clamp(48px,5vw,64px); }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="l"] .jbl-oav { width:clamp(30px,3.3vw,44px); height:clamp(30px,3.3vw,44px); }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="l"] .jbl-on { font-size:clamp(8px,.9vw,11px); }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="xl"] .jbl-orb { width:clamp(34px,3.6vw,48px); }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="xl"] .jbl-oav { width:clamp(24px,2.5vw,34px); height:clamp(24px,2.5vw,34px); box-shadow:2px 2px 0 var(--bp-ink); }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="xl"] .jbl-on { font-size:clamp(7px,.75vw,9px); padding:0 3px; }
body.jpo-game.jbombe #screen-lobby #playersWall[data-dense="xl"] .jbl-rm { width:15px; height:15px; font-size:9px; }
body.jpo-game.jbombe #screen-lobby .jbl-on {
  font-family:'Anton',sans-serif; font-size:clamp(9px,1.1vw,14px); letter-spacing:.5px; color:var(--bp-ink);
  background:var(--bp-paper); border:1.5px solid var(--bp-ink); padding:0 5px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.jpo-game.jbombe #screen-lobby .jbl-orb.fresh .jbl-oav { box-shadow:3px 3px 0 var(--bp-magenta); }
body.jpo-game.jbombe #screen-lobby .jbl-orb.fresh .jbl-on { color:var(--bp-magenta); }
body.jpo-game.jbombe #screen-lobby .jbl-rm {
  position:absolute; top:-8px; right:-8px; width:20px; height:20px; z-index:5; padding:0; line-height:1; cursor:pointer;
  background:var(--bp-paper); border:2px solid var(--bp-ink); color:var(--bp-ink); font-size:11px;
}

/* ── AJOUTER UN BOT (panneau droit) ── */
body.jpo-game.jbombe #screen-lobby #addBotBtn {
  grid-column:2; grid-row:4; margin:0 18px 12px; align-self:end; justify-self:start;
  position:relative; cursor:pointer; display:inline-block;
}
body.jpo-game.jbombe #screen-lobby #addBotBtn::before { display:none; }
body.jpo-game.jbombe #screen-lobby #addBotBtn .body {
  border:3px solid var(--bp-ink); background:var(--bp-jaune); color:var(--bp-ink); box-shadow:4px 4px 0 var(--bp-ink);
  font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,17px); letter-spacing:1px; padding:9px 14px;
  display:flex; align-items:center; gap:8px;
}
body.jpo-game.jbombe #screen-lobby #addBotBtn .noto { width:1.2em; height:1.2em; }

/* ── pied : LANCER ── */
body.jpo-game.jbombe #screen-lobby .lobby-footer {
  flex-shrink:0; background:var(--bp-ink); border-top:4px solid var(--bp-ink); padding:12px 18px; margin:0;
}
body.jpo-game.jbombe #screen-lobby #startBtn { position:relative; cursor:pointer; display:block; }
body.jpo-game.jbombe #screen-lobby #startBtn::before { display:none; }
body.jpo-game.jbombe #screen-lobby #startBtn .body {
  border:4px solid var(--bp-paper); background:var(--bp-magenta); color:var(--bp-paper); box-shadow:6px 6px 0 var(--bp-jaune);
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,24px); letter-spacing:2px; padding:14px; text-align:center;
}
body.jpo-game.jbombe #screen-lobby #startBtn[data-disabled="true"] { opacity:.5; }

/* ============================================================
   🎓 SALONS JPO — CLASSIQUE / DÉFI / PISCINE (grand écran · état 1)
   Même technique que LA BOMBE : recompose le DOM plat de
   #screen-lobby en 2 colonnes (barre ink en tête, panneau PIN à
   gauche, zone joueurs à droite). Restyle only — handlers intacts.
   Tout scopé body.jpo-game.<mode> #screen-lobby.
   ============================================================ */
/* ── SHELL COMMUN (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby.active,
body.jpo-game.jdefi #screen-lobby.active,
body.jpo-game.jpiscine #screen-lobby.active {
  display:flex; flex-direction:column; height:100%;
  font-family:'IBM Plex Mono','IBM Plex Sans',monospace; color:var(--bp-ink);
}
body.jpo-game.jclassique #screen-lobby.active,
body.jpo-game.jdefi #screen-lobby.active {
  background:var(--bp-gris);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.6px, transparent 1.6px);
  background-size:20px 20px;
}
body.jpo-game.jpiscine #screen-lobby.active {
  background:var(--bp-ink); color:var(--bp-paper);
  background-image:repeating-linear-gradient(115deg, rgba(91,216,229,.06) 0 20px, transparent 20px 40px);
}
body.jpo-game.jclassique #screen-lobby .lobby-body,
body.jpo-game.jdefi #screen-lobby .lobby-body,
body.jpo-game.jpiscine #screen-lobby .lobby-body {
  flex:1; min-height:0; display:grid; grid-template-rows:auto auto 1fr auto;
  gap:0; padding:0; margin:0; overflow:hidden; max-width:100%;
}
body.jpo-game.jclassique #screen-lobby .lobby-body { grid-template-columns:minmax(300px,1.35fr) minmax(280px,1fr); }
body.jpo-game.jdefi #screen-lobby .lobby-body { grid-template-columns:minmax(280px,.85fr) 1fr; }
body.jpo-game.jpiscine #screen-lobby .lobby-body { grid-template-columns:minmax(230px,290px) 1fr; }
/* éléments non montrés par les maquettes */
body.jpo-game.jclassique #screen-lobby .lobby-invite,
body.jpo-game.jclassique #screen-lobby .lobby-qr,
body.jpo-game.jclassique #screen-lobby .config-row,
body.jpo-game.jclassique #screen-lobby .code-card .cc-actions,
body.jpo-game.jclassique #screen-lobby .code-card .cc-lbl,
body.jpo-game.jclassique #screen-lobby .code-card .cc-sub,
body.jpo-game.jdefi #screen-lobby .lobby-invite,
body.jpo-game.jdefi #screen-lobby .lobby-qr,
body.jpo-game.jdefi #screen-lobby .config-row,
body.jpo-game.jdefi #screen-lobby .code-card .cc-actions,
body.jpo-game.jdefi #screen-lobby .code-card .cc-lbl,
body.jpo-game.jdefi #screen-lobby .code-card .cc-sub,
body.jpo-game.jpiscine #screen-lobby .lobby-invite,
body.jpo-game.jpiscine #screen-lobby .lobby-qr,
body.jpo-game.jpiscine #screen-lobby .config-row,
body.jpo-game.jpiscine #screen-lobby .code-card .cc-actions,
body.jpo-game.jpiscine #screen-lobby .code-card .cc-lbl,
body.jpo-game.jpiscine #screen-lobby .code-card .cc-sub { display:none !important; }
/* neutralise les pseudos VERTS du skin bleu de base + l'ombre du PIN */
body.jpo-game.jclassique #screen-lobby .code-card::before,
body.jpo-game.jclassique #screen-lobby .code-card::after,
body.jpo-game.jdefi #screen-lobby .code-card::before,
body.jpo-game.jdefi #screen-lobby .code-card::after,
body.jpo-game.jpiscine #screen-lobby .code-card::before,
body.jpo-game.jpiscine #screen-lobby .code-card::after { content:none !important; display:none !important; background:none !important; }
body.jpo-game.jclassique #screen-lobby .code-big,
body.jpo-game.jdefi #screen-lobby .code-big,
body.jpo-game.jpiscine #screen-lobby .code-big { text-shadow:none !important; }

/* ── BARRE INK EN TÊTE (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby .lobby-top,
body.jpo-game.jdefi #screen-lobby .lobby-top,
body.jpo-game.jpiscine #screen-lobby .lobby-top {
  grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:12px; margin:0;
  background:var(--bp-ink); color:var(--bp-paper); padding:9px 18px; border-bottom:4px solid var(--bp-ink);
}
body.jpo-game.jclassique #screen-lobby .lobby-top .back-btn,
body.jpo-game.jdefi #screen-lobby .lobby-top .back-btn,
body.jpo-game.jpiscine #screen-lobby .lobby-top .back-btn {
  order:0; flex-shrink:0; width:32px; height:32px; padding:0; line-height:1;
  background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-paper); box-shadow:none;
}
body.jpo-game.jclassique #screen-lobby .lobby-top .lobby-close,
body.jpo-game.jdefi #screen-lobby .lobby-top .lobby-close,
body.jpo-game.jpiscine #screen-lobby .lobby-top .lobby-close { order:3; background:var(--bp-rouge); color:#fff; }
body.jpo-game.jclassique #screen-lobby .lobby-top .page-title,
body.jpo-game.jdefi #screen-lobby .lobby-top .page-title,
body.jpo-game.jpiscine #screen-lobby .lobby-top .page-title {
  order:1; display:inline-flex !important; align-items:baseline; gap:8px; flex-wrap:nowrap;
  font-size:initial; letter-spacing:0; color:var(--bp-paper);
  margin:0; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
body.jpo-game.jclassique #screen-lobby .lobby-top .page-title::before,
body.jpo-game.jclassique #screen-lobby .lobby-top .page-title::after,
body.jpo-game.jdefi #screen-lobby .lobby-top .page-title::before,
body.jpo-game.jdefi #screen-lobby .lobby-top .page-title::after,
body.jpo-game.jpiscine #screen-lobby .lobby-top .page-title::before,
body.jpo-game.jpiscine #screen-lobby .lobby-top .page-title::after { content:none !important; display:none !important; }
body.jpo-game.jclassique #screen-lobby .lobby-top .page-title .jbl-brand,
body.jpo-game.jdefi #screen-lobby .lobby-top .page-title .jbl-brand,
body.jpo-game.jpiscine #screen-lobby .lobby-top .page-title .jbl-brand {
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,28px); letter-spacing:2px; color:var(--bp-jaune); white-space:nowrap;
}
body.jpo-game.jclassique #screen-lobby .lobby-top .page-title .jbl-mode,
body.jpo-game.jdefi #screen-lobby .lobby-top .page-title .jbl-mode,
body.jpo-game.jpiscine #screen-lobby .lobby-top .page-title .jbl-mode {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(9px,1.1vw,14px);
  letter-spacing:2px; color:rgba(255,254,247,.7); white-space:nowrap;
}
body.jpo-game.jclassique #screen-lobby .lobby-top::after,
body.jpo-game.jdefi #screen-lobby .lobby-top::after,
body.jpo-game.jpiscine #screen-lobby .lobby-top::after { content:none; display:none; }
body.jpo-game.jclassique #screen-lobby .lobby-top .jbl-live,
body.jpo-game.jdefi #screen-lobby .lobby-top .jbl-live,
body.jpo-game.jpiscine #screen-lobby .lobby-top .jbl-live {
  order:2; margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap;
  color:#fff; border:2px solid #fff; padding:3px 10px;
  font-family:'Anton',sans-serif; font-size:clamp(10px,1.2vw,15px); letter-spacing:1.5px;
}
body.jpo-game.jclassique #screen-lobby .lobby-top .jbl-live { background:var(--bp-magenta); }
body.jpo-game.jdefi #screen-lobby .lobby-top .jbl-live { background:var(--bp-magenta); }
body.jpo-game.jpiscine #screen-lobby .lobby-top .jbl-live { background:var(--bp-rouge); }
body.jpo-game.jclassique #screen-lobby .lobby-top .jbl-live .jbl-dot,
body.jpo-game.jdefi #screen-lobby .lobby-top .jbl-live .jbl-dot,
body.jpo-game.jpiscine #screen-lobby .lobby-top .jbl-live .jbl-dot {
  width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0;
  animation:jgbBlink 1s steps(1) infinite;   /* SEUL le point clignote */
}

/* ── PANNEAU PIN À GAUCHE (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby .code-card,
body.jpo-game.jdefi #screen-lobby .code-card,
body.jpo-game.jpiscine #screen-lobby .code-card {
  grid-column:1; grid-row:2/5; margin:0; padding:22px 18px; border:none; border-right:4px solid var(--bp-ink);
  box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
body.jpo-game.jclassique #screen-lobby .code-card { background:var(--bp-gris2) !important; }
body.jpo-game.jdefi #screen-lobby .code-card {
  background:var(--bp-gris2) !important;
  background-image:radial-gradient(rgba(10,10,10,.09) 1.6px, transparent 1.6px); background-size:18px 18px;
}
body.jpo-game.jpiscine #screen-lobby .code-card { background:var(--bp-ink) !important; color:var(--bp-paper); border-right-color:var(--bp-paper); }
body.jpo-game.jclassique #screen-lobby .code-card .body,
body.jpo-game.jclassique #screen-lobby .code-card .left,
body.jpo-game.jdefi #screen-lobby .code-card .body,
body.jpo-game.jdefi #screen-lobby .code-card .left,
body.jpo-game.jpiscine #screen-lobby .code-card .body,
body.jpo-game.jpiscine #screen-lobby .code-card .left {
  display:flex; flex-direction:column; align-items:center; background:none; border:none; box-shadow:none; padding:0; margin:0;
}
/* le PIN géant */
body.jpo-game.jclassique #screen-lobby .code-big,
body.jpo-game.jdefi #screen-lobby .code-big,
body.jpo-game.jpiscine #screen-lobby .code-big {
  background:var(--bp-paper); color:var(--bp-ink); border:4px solid var(--bp-ink); box-shadow:7px 7px 0 var(--bp-cyan);
  padding:8px 18px 6px; font-family:'Anton',sans-serif; font-size:clamp(38px,6vw,72px); letter-spacing:6px; line-height:.92; margin-top:6px;
}
body.jpo-game.jpiscine #screen-lobby .code-big { border-color:var(--bp-paper); }
body.jpo-game.jclassique #screen-lobby .jpl-pinlbl,
body.jpo-game.jdefi #screen-lobby .jpl-pinlbl {
  font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,14px); letter-spacing:6px; color:rgba(10,10,10,.5);
}
body.jpo-game.jpiscine #screen-lobby .jpl-pinlbl {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(9px,1.1vw,12px); letter-spacing:2px; color:var(--bp-cyan); text-align:center;
}
body.jpo-game.jclassique #screen-lobby .jpl-kick,
body.jpo-game.jdefi #screen-lobby .jpl-kick {
  font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,15px); letter-spacing:2px; color:var(--bp-magenta); text-align:center;
}
body.jpo-game.jdefi #screen-lobby .jpl-lead {
  font-size:clamp(9px,1.1vw,12px); font-weight:700; line-height:1.45; text-align:center; color:rgba(10,10,10,.7); max-width:260px;
}
body.jpo-game.jclassique #screen-lobby .jpl-joinline,
body.jpo-game.jdefi #screen-lobby .jpl-joinline {
  display:flex; align-items:center; gap:8px; font-size:clamp(10px,1.2vw,13px); font-weight:700;
}
body.jpo-game.jclassique #screen-lobby .jpl-joinline b,
body.jpo-game.jdefi #screen-lobby .jpl-joinline b {
  background:var(--bp-jaune); border:2.5px solid var(--bp-ink); padding:3px 9px; font-family:'Anton',sans-serif; letter-spacing:.5px;
}
body.jpo-game.jclassique #screen-lobby .jpl-locknote,
body.jpo-game.jdefi #screen-lobby .jpl-locknote {
  border:2px dashed var(--bp-ink); background:var(--bp-paper); padding:8px 11px; margin-top:6px;
  font-size:clamp(8px,1vw,10px); font-weight:700; line-height:1.45; max-width:270px; text-align:center; color:rgba(10,10,10,.72);
}
/* PISCINE : chip « plongeurs prêts » + verrous */
body.jpo-game.jpiscine #screen-lobby .jpl-piscine-extra { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
body.jpo-game.jpiscine #screen-lobby .jpl-chip {
  display:inline-flex; align-items:center; gap:10px; background:var(--bp-cyan); color:var(--bp-ink);
  border:3px solid var(--bp-paper); box-shadow:4px 4px 0 rgba(0,0,0,.5); padding:6px 14px;
}
body.jpo-game.jpiscine #screen-lobby .jpl-chip .jpl-count { font-family:'Anton',sans-serif; font-size:clamp(26px,3.4vw,40px); line-height:1; }
body.jpo-game.jpiscine #screen-lobby .jpl-chip .noto,
body.jpo-game.jpiscine #screen-lobby .jpl-chip img { width:clamp(22px,2.4vw,30px); height:clamp(22px,2.4vw,30px); }
body.jpo-game.jpiscine #screen-lobby .jpl-chip .jpl-chiplbl { font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,15px); letter-spacing:1px; line-height:1.05; }
body.jpo-game.jpiscine #screen-lobby .jpl-locks { display:flex; flex-direction:column; gap:8px; width:100%; max-width:270px; }
body.jpo-game.jpiscine #screen-lobby .jpl-lock {
  display:flex; align-items:center; gap:8px; font-size:clamp(8px,1vw,11px); font-weight:700; line-height:1.35;
  background:rgba(255,254,247,.06); border:2px solid var(--bp-paper); padding:7px 9px; color:rgba(255,254,247,.85);
}
body.jpo-game.jpiscine #screen-lobby .jpl-lock .ic { font-size:1.2em; flex-shrink:0; }

/* ── TITRE DE SECTION (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby .section-title,
body.jpo-game.jdefi #screen-lobby .section-title,
body.jpo-game.jpiscine #screen-lobby .section-title {
  grid-column:2; grid-row:2; margin:0; padding:14px 18px 4px; border:none; background:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.jpo-game.jclassique #screen-lobby .section-title .st-sticker:not(.st-count),
body.jpo-game.jdefi #screen-lobby .section-title .st-sticker:not(.st-count),
body.jpo-game.jpiscine #screen-lobby .section-title .st-sticker:not(.st-count) { transform:none; }
body.jpo-game.jclassique #screen-lobby .section-title .st-sticker:not(.st-count)::before,
body.jpo-game.jdefi #screen-lobby .section-title .st-sticker:not(.st-count)::before,
body.jpo-game.jpiscine #screen-lobby .section-title .st-sticker:not(.st-count)::before { content:none !important; display:none !important; }
body.jpo-game.jclassique #screen-lobby .section-title .st-sticker:not(.st-count) .body,
body.jpo-game.jdefi #screen-lobby .section-title .st-sticker:not(.st-count) .body,
body.jpo-game.jpiscine #screen-lobby .section-title .st-sticker:not(.st-count) .body {
  background:none !important; border:none !important; box-shadow:none !important; padding:0; margin:0;
  font-family:'Anton',sans-serif; font-size:clamp(14px,1.8vw,22px); letter-spacing:1px;
}
body.jpo-game.jclassique #screen-lobby .section-title .st-sticker:not(.st-count) .body,
body.jpo-game.jdefi #screen-lobby .section-title .st-sticker:not(.st-count) .body { color:var(--bp-ink); }
body.jpo-game.jpiscine #screen-lobby .section-title .st-sticker:not(.st-count) .body { color:var(--bp-paper); }
body.jpo-game.jclassique #screen-lobby .section-title .st-count,
body.jpo-game.jdefi #screen-lobby .section-title .st-count,
body.jpo-game.jpiscine #screen-lobby .section-title .st-count { background:none; border:none; box-shadow:none; }
body.jpo-game.jclassique #screen-lobby .section-title .st-count .body,
body.jpo-game.jdefi #screen-lobby .section-title .st-count .body,
body.jpo-game.jpiscine #screen-lobby .section-title .st-count .body {
  font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,20px); letter-spacing:1px;
  color:var(--bp-ink); border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink); padding:3px 12px;
}
body.jpo-game.jclassique #screen-lobby .section-title .st-count .body { background:var(--bp-magenta); color:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-ink); }
body.jpo-game.jdefi #screen-lobby .section-title .st-count .body { background:var(--bp-vert); }
body.jpo-game.jpiscine #screen-lobby .section-title .st-count .body { background:var(--bp-cyan); border-color:var(--bp-paper); box-shadow:3px 3px 0 rgba(0,0,0,.5); }

/* ── ZONE JOUEURS (grille) — CLASSIQUE + DÉFI ── */
body.jpo-game.jclassique #screen-lobby #playersWall,
body.jpo-game.jdefi #screen-lobby #playersWall {
  grid-column:2; grid-row:3; margin:0; padding:6px 18px 4px; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(58px,6vw,78px),1fr)); gap:clamp(7px,1vw,12px); align-content:start;
}
body.jpo-game.jclassique #screen-lobby #playersWall[data-dense="l"],
body.jpo-game.jdefi #screen-lobby #playersWall[data-dense="l"] { grid-template-columns:repeat(auto-fill, minmax(clamp(48px,5vw,64px),1fr)); }
body.jpo-game.jclassique #screen-lobby #playersWall[data-dense="xl"],
body.jpo-game.jdefi #screen-lobby #playersWall[data-dense="xl"] { grid-template-columns:repeat(auto-fill, minmax(clamp(38px,4vw,52px),1fr)); gap:clamp(5px,.7vw,8px); }
body.jpo-game.jclassique #screen-lobby .jpl-cell,
body.jpo-game.jdefi #screen-lobby .jpl-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
body.jpo-game.jclassique #screen-lobby .jpl-av,
body.jpo-game.jdefi #screen-lobby .jpl-av {
  position:relative; width:100%; max-width:56px; aspect-ratio:1/1;
  border:3px solid var(--bp-ink); background:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jclassique #screen-lobby .jpl-av .ava-emo,
body.jpo-game.jclassique #screen-lobby .jpl-av img,
body.jpo-game.jdefi #screen-lobby .jpl-av .ava-emo,
body.jpo-game.jdefi #screen-lobby .jpl-av img { width:100%; height:100%; display:block; }
body.jpo-game.jclassique #screen-lobby .jpl-av.r1,
body.jpo-game.jdefi #screen-lobby .jpl-av.r1 { transform:rotate(-3deg); }
body.jpo-game.jclassique #screen-lobby .jpl-av.r2,
body.jpo-game.jdefi #screen-lobby .jpl-av.r2 { transform:rotate(2deg); }
body.jpo-game.jclassique #screen-lobby .jpl-av.r3,
body.jpo-game.jdefi #screen-lobby .jpl-av.r3 { transform:rotate(-2deg); }
body.jpo-game.jclassique #screen-lobby .jpl-nm,
body.jpo-game.jdefi #screen-lobby .jpl-nm {
  font-size:clamp(7px,.85vw,10px); font-weight:700; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--bp-ink);
}
body.jpo-game.jclassique #screen-lobby #playersWall[data-dense="xl"] .jpl-nm,
body.jpo-game.jdefi #screen-lobby #playersWall[data-dense="xl"] .jpl-nm { font-size:clamp(6px,.7vw,8px); }
body.jpo-game.jclassique #screen-lobby .jpl-cell.fresh .jpl-av,
body.jpo-game.jdefi #screen-lobby .jpl-cell.fresh .jpl-av { box-shadow:3px 3px 0 var(--bp-magenta); }
body.jpo-game.jclassique #screen-lobby .jpl-cell.fresh .jpl-nm,
body.jpo-game.jdefi #screen-lobby .jpl-cell.fresh .jpl-nm { color:var(--bp-magenta); }

/* ── ZONE JOUEURS (mur) — PISCINE ── */
body.jpo-game.jpiscine #screen-lobby #playersWall {
  grid-column:2; grid-row:3; margin:0; padding:6px 18px 4px; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(40px,4.4vw,58px),1fr)); gap:clamp(4px,.6vw,7px); align-content:start;
}
body.jpo-game.jpiscine #screen-lobby #playersWall[data-dense="l"] { grid-template-columns:repeat(auto-fill, minmax(clamp(34px,3.6vw,48px),1fr)); }
body.jpo-game.jpiscine #screen-lobby #playersWall[data-dense="xl"] { grid-template-columns:repeat(auto-fill, minmax(clamp(28px,3vw,40px),1fr)); gap:clamp(3px,.4vw,5px); }
body.jpo-game.jpiscine #screen-lobby .jpl-pawn {
  position:relative; aspect-ratio:1/1; border:2px solid var(--bp-ink); background:var(--bp-paper); box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
body.jpo-game.jpiscine #screen-lobby .jpl-pawn .ava-emo,
body.jpo-game.jpiscine #screen-lobby .jpl-pawn img { width:100%; height:100%; object-fit:cover; display:block; }
body.jpo-game.jpiscine #screen-lobby .jpl-pawn.fresh { box-shadow:2px 2px 0 var(--bp-cyan); border-color:var(--bp-cyan); }
body.jpo-game.jpiscine #screen-lobby .jpl-pawn .jpl-pn {
  position:absolute; left:0; right:0; bottom:0; font-size:clamp(5px,.65vw,8px); font-weight:700; line-height:1.1;
  background:rgba(10,10,10,.72); color:var(--bp-paper); padding:1px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
body.jpo-game.jpiscine #screen-lobby #playersWall[data-dense="xl"] .jpl-pawn .jpl-pn { display:none; }
body.jpo-game.jpiscine #screen-lobby .jpl-pawn.pending {
  border:2px dashed rgba(255,254,247,.4); box-shadow:none;
  background:repeating-linear-gradient(45deg, rgba(255,254,247,.05) 0 5px, transparent 5px 10px);
}
body.jpo-game.jpiscine #screen-lobby .jpl-pawn.pending::after {
  content:'?'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; color:rgba(255,254,247,.4); font-size:clamp(10px,1.2vw,16px);
}

/* ── bouton ✕ retirer un bot / ✏️ éditer l'hôte (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby .jpl-rm,
body.jpo-game.jdefi #screen-lobby .jpl-rm,
body.jpo-game.jpiscine #screen-lobby .jpl-rm {
  position:absolute; top:-8px; right:-8px; width:20px; height:20px; z-index:5; padding:0; line-height:1; cursor:pointer;
  background:var(--bp-paper); border:2px solid var(--bp-ink); color:var(--bp-ink); font-size:11px;
}
body.jpo-game.jpiscine #screen-lobby .jpl-pawn .jpl-rm { top:-6px; right:-6px; width:16px; height:16px; font-size:9px; }
body.jpo-game.jpiscine #screen-lobby #playersWall[data-dense="xl"] .jpl-rm { width:13px; height:13px; font-size:8px; }

/* ── état vide (0 joueur) — CLASSIQUE + DÉFI ── */
body.jpo-game.jclassique #screen-lobby .jpl-empty,
body.jpo-game.jdefi #screen-lobby .jpl-empty {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px 12px; text-align:center;
  border:3px dashed var(--bp-ink); background:var(--bp-paper);
}
body.jpo-game.jclassique #screen-lobby .jpl-empty .jpl-emt,
body.jpo-game.jdefi #screen-lobby .jpl-empty .jpl-emt { font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,18px); letter-spacing:1px; }
body.jpo-game.jclassique #screen-lobby .jpl-empty .jpl-ems,
body.jpo-game.jdefi #screen-lobby .jpl-empty .jpl-ems { font-size:clamp(9px,1.1vw,12px); font-weight:700; color:rgba(10,10,10,.6); }

/* ── AJOUTER UN BOT (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby #addBotBtn,
body.jpo-game.jdefi #screen-lobby #addBotBtn,
body.jpo-game.jpiscine #screen-lobby #addBotBtn {
  grid-column:2; grid-row:4; margin:0 18px 12px; align-self:end; justify-self:start;
  position:relative; cursor:pointer; display:inline-block;
}
body.jpo-game.jclassique #screen-lobby #addBotBtn::before,
body.jpo-game.jdefi #screen-lobby #addBotBtn::before,
body.jpo-game.jpiscine #screen-lobby #addBotBtn::before { display:none; }
body.jpo-game.jclassique #screen-lobby #addBotBtn .body,
body.jpo-game.jdefi #screen-lobby #addBotBtn .body,
body.jpo-game.jpiscine #screen-lobby #addBotBtn .body {
  border:3px solid var(--bp-ink); color:var(--bp-ink); box-shadow:4px 4px 0 var(--bp-ink);
  font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,16px); letter-spacing:1px; padding:8px 13px;
  display:flex; align-items:center; gap:8px;
}
body.jpo-game.jclassique #screen-lobby #addBotBtn .body { background:var(--bp-jaune); }
body.jpo-game.jdefi #screen-lobby #addBotBtn .body { background:var(--bp-jaune); }
body.jpo-game.jpiscine #screen-lobby #addBotBtn .body { background:var(--bp-cyan); border-color:var(--bp-paper); box-shadow:4px 4px 0 rgba(0,0,0,.5); }
body.jpo-game.jclassique #screen-lobby #addBotBtn .noto,
body.jpo-game.jdefi #screen-lobby #addBotBtn .noto,
body.jpo-game.jpiscine #screen-lobby #addBotBtn .noto { width:1.2em; height:1.2em; }

/* ── PIED : LANCER (les 3 modes) ── */
body.jpo-game.jclassique #screen-lobby .lobby-footer,
body.jpo-game.jdefi #screen-lobby .lobby-footer,
body.jpo-game.jpiscine #screen-lobby .lobby-footer {
  flex-shrink:0; background:var(--bp-ink); border-top:4px solid var(--bp-ink); padding:12px 18px; margin:0;
}
body.jpo-game.jpiscine #screen-lobby .lobby-footer { border-top-color:var(--bp-paper); }
body.jpo-game.jclassique #screen-lobby #startBtn,
body.jpo-game.jdefi #screen-lobby #startBtn,
body.jpo-game.jpiscine #screen-lobby #startBtn { position:relative; cursor:pointer; display:block; }
body.jpo-game.jclassique #screen-lobby #startBtn::before,
body.jpo-game.jdefi #screen-lobby #startBtn::before,
body.jpo-game.jpiscine #screen-lobby #startBtn::before { display:none; }
body.jpo-game.jclassique #screen-lobby #startBtn .body,
body.jpo-game.jdefi #screen-lobby #startBtn .body,
body.jpo-game.jpiscine #screen-lobby #startBtn .body {
  border:4px solid var(--bp-paper); color:var(--bp-paper);
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,24px); letter-spacing:2px; padding:14px; text-align:center;
}
body.jpo-game.jclassique #screen-lobby #startBtn .body { background:var(--bp-magenta); box-shadow:6px 6px 0 var(--bp-jaune); }
body.jpo-game.jdefi #screen-lobby #startBtn .body { background:var(--bp-magenta); box-shadow:6px 6px 0 var(--bp-cyan); }
body.jpo-game.jpiscine #screen-lobby #startBtn .body { background:var(--bp-cyan); color:var(--bp-ink); box-shadow:6px 6px 0 var(--bp-magenta); }
body.jpo-game.jclassique #screen-lobby #startBtn[data-disabled="true"],
body.jpo-game.jdefi #screen-lobby #startBtn[data-disabled="true"],
body.jpo-game.jpiscine #screen-lobby #startBtn[data-disabled="true"] { opacity:.5; }

/* ============================================================
   🌊 GRAND ÉCRAN · LA PISCINE (survie)  — bespoke JPO
   Fidèle à design-prototypes/p2-jpo/mode2-piscine.html (états 3/5/6/7).
   Calque .jge-cover.jgp-cover sur #screen-question / #screen-reveal /
   #screen-podium / #screen-transition. Palette CYAN sur INK, mur qui
   se vide. Tout scopé body.jpo-game.jpiscine … .jgp-cover.
   ============================================================ */
@keyframes jgpSink { 0%{ transform:scale(1); } 55%{ transform:scale(.82) translateY(6px); } 100%{ transform:scale(1) translateY(0); } }
@keyframes jgpPulseLow { 50%{ transform:scale(1.07); } }
@keyframes jgpBlink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* ── neutralise le fond bleu Epitech : ink + rayures cyan ── */
body.jpo-game.jpiscine #screen-question .jge-cover.jgp-cover,
body.jpo-game.jpiscine #screen-reveal .jge-cover.jgp-cover,
body.jpo-game.jpiscine #screen-podium .jge-cover.jgp-cover,
body.jpo-game.jpiscine #screen-transition .jge-cover.jgp-cover {
  background:var(--bp-ink); color:var(--bp-paper);
  font-family:'IBM Plex Mono','IBM Plex Sans',monospace; font-weight:600;
  height:100%; display:flex; flex-direction:column;   /* remplit toute la hauteur du #screen-* */
}
body.jpo-game.jpiscine #screen-question .jge-cover.jgp-cover::before,
body.jpo-game.jpiscine #screen-reveal .jge-cover.jgp-cover::before,
body.jpo-game.jpiscine #screen-podium .jge-cover.jgp-cover::before,
body.jpo-game.jpiscine #screen-transition .jge-cover.jgp-cover::before {
  background-image:repeating-linear-gradient(115deg, rgba(91,216,229,.07) 0 20px, transparent 20px 40px) !important;
  background-size:auto !important; background-position:0 0 !important; background-repeat:repeat !important;
}

/* ── bannière ── (GRAND ÉCRAN ≈1920px : tailles élevées, échelle vw) */
body.jpo-game.jpiscine .jgp-cover .jgp-banner {
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.5vw,28px);
  padding:clamp(10px,1.1vw,22px) clamp(16px,2vw,40px);
  background:var(--bp-ink); border-bottom:5px solid var(--bp-cyan); position:relative; z-index:3;
}
body.jpo-game.jpiscine .jgp-cover .jgp-b-l { display:flex; align-items:center; gap:clamp(8px,1vw,18px); flex-wrap:wrap; }
body.jpo-game.jpiscine .jgp-cover .jgp-manche { font-family:'Anton',sans-serif; font-size:clamp(22px,2.4vw,52px); letter-spacing:2px; color:var(--bp-paper); }
body.jpo-game.jpiscine .jgp-cover .jgp-badge { font-family:'Anton',sans-serif; font-size:clamp(18px,2vw,44px); letter-spacing:1px; background:var(--bp-cyan); color:var(--bp-ink); border:3px solid var(--bp-paper); padding:3px 14px; }
body.jpo-game.jpiscine .jgp-cover .jgp-badge.elim { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jpiscine .jgp-cover .jgp-badge.finale { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jpiscine .jgp-cover .jgp-niv { display:inline-flex; flex-direction:column; gap:7px; align-items:flex-start; }
body.jpo-game.jpiscine .jgp-cover .jgp-nl { font-family:'Anton',sans-serif; font-size:clamp(14px,1.5vw,30px); letter-spacing:1.5px; color:var(--bp-cyan); }
body.jpo-game.jpiscine .jgp-cover .jgp-niv.n3 .jgp-nl { color:var(--bp-orange); }
body.jpo-game.jpiscine .jgp-cover .jgp-niv.n4 .jgp-nl { color:var(--bp-rouge); }
body.jpo-game.jpiscine .jgp-cover .jgp-niv.n5 .jgp-nl { color:var(--bp-magenta); }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg { display:flex; gap:5px; }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i { width:clamp(22px,2vw,44px); height:clamp(12px,1.1vw,22px); border:2px solid var(--bp-paper); background:transparent; display:block; }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i.l1 { background:var(--bp-vert); }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i.l2 { background:var(--bp-jaune); }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i.l3 { background:var(--bp-orange); }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i.l4 { background:var(--bp-rouge); }
body.jpo-game.jpiscine .jgp-cover .jgp-dseg i.l5 { background:var(--bp-magenta); }
body.jpo-game.jpiscine .jgp-cover .jgp-hostlab { font-family:'Anton',sans-serif; font-size:clamp(13px,1.3vw,26px); letter-spacing:2px; color:var(--bp-cyan); border:2px solid var(--bp-cyan); padding:5px 13px; white-space:nowrap; }

/* ── corps 2 colonnes ── */
body.jpo-game.jpiscine .jgp-cover .jgp-body { flex:1; display:flex; gap:clamp(18px,2.2vw,48px); padding:clamp(16px,1.8vw,40px) clamp(18px,2.2vw,48px); overflow:hidden; position:relative; z-index:2; min-height:0; }
body.jpo-game.jpiscine .jgp-cover .jgp-left { width:clamp(340px,44%,820px); flex-shrink:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.6vw,30px); min-height:0; overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-right { flex:1; display:flex; flex-direction:column; min-height:0; }
body.jpo-game.jpiscine .jgp-cover .jgp-qhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(8px,1vw,20px); gap:14px; }
body.jpo-game.jpiscine .jgp-cover .jgp-cat { font-family:'Anton',sans-serif; font-size:clamp(15px,1.4vw,30px); letter-spacing:1.5px; color:var(--bp-cyan); display:inline-flex; align-items:center; gap:8px; }
body.jpo-game.jpiscine .jgp-cover .jgp-cat img { width:clamp(26px,2vw,48px); height:clamp(26px,2vw,48px); }
body.jpo-game.jpiscine .jgp-cover .jgp-chrono { font-family:'Anton',sans-serif; font-size:clamp(34px,3.6vw,84px); line-height:1; background:var(--bp-jaune); color:var(--bp-ink); border:4px solid var(--bp-paper); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:6px 18px; }
body.jpo-game.jpiscine .jgp-cover .jgp-chrono.low { background:var(--bp-rouge); color:var(--bp-paper); animation:jgpPulseLow .7s ease-in-out infinite; }
body.jpo-game.jpiscine .jgp-cover .jgp-q { font-family:'Anton',sans-serif; font-size:clamp(26px,3vw,72px); line-height:1.04; letter-spacing:.5px; text-transform:uppercase; }
body.jpo-game.jpiscine .jgp-cover .jgp-q.sm { font-size:clamp(20px,2.2vw,48px); }

/* ── tuiles kahoot (remplissent la moitié gauche) ── */
body.jpo-game.jpiscine .jgp-cover .jgp-tiles { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.1vw,22px); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile { display:flex; align-items:center; gap:clamp(9px,1vw,20px); padding:clamp(12px,1.2vw,26px); border:4px solid var(--bp-ink); background:var(--bp-paper); color:var(--bp-ink); box-shadow:5px 5px 0 rgba(0,0,0,.5); font-size:clamp(16px,1.7vw,38px); line-height:1.1; }
body.jpo-game.jpiscine .jgp-cover .jgp-tile .jgp-tk { width:clamp(38px,3.4vw,78px); height:clamp(38px,3.4vw,78px); flex-shrink:0; border:3px solid var(--bp-ink); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:clamp(22px,2.2vw,48px); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.ta .jgp-tk { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.tb .jgp-tk { background:var(--bp-cyan); color:var(--bp-ink); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.tc .jgp-tk { background:var(--bp-jaune); color:var(--bp-ink); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.td .jgp-tk { background:var(--bp-vert); color:var(--bp-ink); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile .jgp-tt { flex:1; }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.good { background:var(--bp-vert); }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.good .jgp-tend { margin-left:auto; }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.good .jgp-tend img { width:clamp(24px,2vw,44px); height:clamp(24px,2vw,44px); display:block; }
body.jpo-game.jpiscine .jgp-cover .jgp-tile.dim { opacity:.42; }

/* ── mur d'avatars ── */
body.jpo-game.jpiscine .jgp-cover .jgp-wall-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(8px,.9vw,18px); gap:14px; }
body.jpo-game.jpiscine .jgp-cover .jgp-wh-t { font-family:'Anton',sans-serif; font-size:clamp(16px,1.6vw,34px); letter-spacing:1.5px; }
body.jpo-game.jpiscine .jgp-cover .jgp-wall-head img { width:clamp(28px,2.2vw,48px); height:clamp(28px,2.2vw,48px); }
body.jpo-game.jpiscine .jgp-cover .jgp-count { font-family:'Anton',sans-serif; font-size:clamp(22px,2.2vw,50px); letter-spacing:1px; background:var(--bp-cyan); color:var(--bp-ink); border:3px solid var(--bp-paper); box-shadow:4px 4px 0 rgba(0,0,0,.5); padding:4px 16px; white-space:nowrap; }
/* mur : colonnes de largeur FIXE (auto-fill) centrées sur les 2 axes → peu de
   joueurs = tuiles regroupées au centre (pas de bande vide) ; beaucoup = pack
   automatique jusqu'à ~48. Chaque pion prend la largeur de sa colonne. */
body.jpo-game.jpiscine .jgp-cover .jgp-wall { flex:1; min-height:0; display:grid; grid-template-columns:repeat(auto-fill, clamp(52px,5vw,138px)); grid-auto-rows:clamp(52px,5vw,138px); justify-content:center; align-content:center; gap:clamp(6px,.7vw,14px); overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn { position:relative; aspect-ratio:1/1; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn .ava-emo { width:100%; height:100%; display:block; border:3px solid var(--bp-ink); box-shadow:3px 3px 0 rgba(0,0,0,.55); overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn .ava-emo img { width:100%; height:100%; object-fit:cover; display:block; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn.me .ava-emo { border-color:var(--bp-cyan); box-shadow:0 0 0 2px var(--bp-cyan), 2px 2px 0 rgba(0,0,0,.55); }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn.out .ava-emo { filter:grayscale(1) brightness(.7); opacity:.38; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn.out::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg, transparent calc(50% - 2px), var(--bp-rouge) calc(50% - 2px), var(--bp-rouge) calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(-45deg, transparent calc(50% - 2px), var(--bp-rouge) calc(50% - 2px), var(--bp-rouge) calc(50% + 2px), transparent calc(50% + 2px)); }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn.just { animation:jgpSink .6s ease-out; }
body.jpo-game.jpiscine .jgp-cover .jgp-pawn.just::after { box-shadow:0 0 0 2px var(--bp-rouge); }

/* ── état 5 : ÉLIMINATION (colonne gauche) ── */
body.jpo-game.jpiscine .jgp-cover .jgp-elim-l { align-items:flex-start; justify-content:center; }
body.jpo-game.jpiscine .jgp-cover .jgp-drain { font-family:'Anton',sans-serif; font-size:clamp(40px,4.6vw,104px); line-height:.9; letter-spacing:1px; color:var(--bp-rouge); }
body.jpo-game.jpiscine .jgp-cover .jgp-surv-chip { display:inline-flex; align-items:center; gap:14px; margin-top:clamp(12px,1.5vw,28px); background:var(--bp-cyan); color:var(--bp-ink); border:4px solid var(--bp-paper); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:10px 20px; font-family:'Anton',sans-serif; }
body.jpo-game.jpiscine .jgp-cover .jgp-surv-chip .n { font-size:clamp(40px,4vw,96px); line-height:1; }
body.jpo-game.jpiscine .jgp-cover .jgp-surv-chip .l { font-size:clamp(15px,1.4vw,30px); letter-spacing:1px; line-height:1; }
body.jpo-game.jpiscine .jgp-cover .jgp-elimcount { display:flex; align-items:center; gap:12px; margin-top:clamp(12px,1.3vw,26px); font-size:clamp(15px,1.5vw,32px); }
body.jpo-game.jpiscine .jgp-cover .jgp-elimcount img { width:clamp(30px,2.4vw,54px); height:clamp(30px,2.4vw,54px); }
body.jpo-game.jpiscine .jgp-cover .jgp-elimcount b { color:var(--bp-rouge); font-family:'Anton',sans-serif; letter-spacing:.5px; }
body.jpo-game.jpiscine .jgp-cover .jgp-good-lab { font-family:'Anton',sans-serif; font-size:clamp(14px,1.4vw,30px); letter-spacing:1.5px; color:var(--bp-vert); margin:clamp(14px,1.8vw,34px) 0 clamp(8px,.9vw,18px); display:inline-flex; align-items:center; gap:8px; }
body.jpo-game.jpiscine .jgp-cover .jgp-good-lab img { width:clamp(22px,1.8vw,42px); height:clamp(22px,1.8vw,42px); }
body.jpo-game.jpiscine .jgp-cover .jgp-elim-l .jgp-tiles { width:100%; }
body.jpo-game.jpiscine .jgp-cover .jgp-elim-l .jgp-tile { font-size:clamp(14px,1.4vw,30px); padding:clamp(9px,1vw,20px); }

/* ── vies (cœurs) ── */
body.jpo-game.jpiscine .jgp-cover .jgp-hh { font-size:clamp(20px,2vw,44px); }
body.jpo-game.jpiscine .jgp-cover .jgp-hh img { width:1em; height:1em; vertical-align:-.12em; }
body.jpo-game.jpiscine .jgp-cover .jgp-hh.dead img { filter:grayscale(1) brightness(.5); opacity:.4; }

/* ── état 6 : FINALE ── */
body.jpo-game.jpiscine .jgp-cover .jgp-finale { flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,2vw,44px); }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-title { font-family:'Anton',sans-serif; font-size:clamp(26px,3vw,64px); letter-spacing:2px; display:flex; align-items:center; gap:18px; text-align:center; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-title img { width:clamp(34px,2.8vw,60px); height:clamp(34px,2.8vw,60px); }
body.jpo-game.jpiscine .jgp-cover .jgp-finalists { display:flex; gap:clamp(20px,2.4vw,56px); align-items:flex-end; justify-content:center; flex-wrap:wrap; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin { text-align:center; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-av .ava-emo { width:clamp(96px,9vw,220px); height:clamp(96px,9vw,220px); display:inline-block; border:5px solid var(--bp-paper); box-shadow:8px 8px 0 var(--bp-cyan); overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-av .ava-emo img { width:100%; height:100%; object-fit:cover; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-nm { font-family:'Anton',sans-serif; font-size:clamp(18px,1.7vw,38px); letter-spacing:1px; margin-top:12px; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-hp { display:flex; gap:5px; justify-content:center; margin-top:6px; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-q { width:100%; max-width:min(1000px,82%); }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-q .jgp-tiles { margin-top:10px; }

/* ── état 7 : SURVIVANTS (podium) ── */
body.jpo-game.jpiscine .jgp-cover .jgp-fin-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(18px,2.2vw,48px); gap:clamp(16px,1.8vw,40px); overflow:hidden; position:relative; z-index:2; min-height:0; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-hero { font-family:'Anton',sans-serif; font-size:clamp(24px,2.4vw,56px); letter-spacing:1px; text-align:center; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-hero img { width:clamp(34px,2.6vw,58px); height:clamp(34px,2.6vw,58px); }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-hero b { color:var(--bp-cyan); }
body.jpo-game.jpiscine .jgp-cover .jgp-podium { display:flex; align-items:flex-end; justify-content:center; gap:clamp(12px,1.6vw,36px); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod { display:flex; flex-direction:column; align-items:center; width:clamp(120px,13vw,300px); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod.empty { visibility:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-av .ava-emo { width:clamp(72px,7vw,160px); height:clamp(72px,7vw,160px); display:inline-block; border:4px solid var(--bp-ink); box-shadow:4px 4px 0 var(--bp-ink); overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-av .ava-emo img { width:100%; height:100%; object-fit:cover; }
body.jpo-game.jpiscine .jgp-cover .jgp-pod.win .jgp-pod-av .ava-emo { border-color:var(--bp-jaune); box-shadow:6px 6px 0 var(--bp-magenta); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-nm { font-family:'Anton',sans-serif; font-size:clamp(16px,1.5vw,34px); letter-spacing:1px; margin:10px 0 6px; text-align:center; }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-bar { width:100%; border:4px solid var(--bp-ink); box-shadow:5px 5px 0 var(--bp-ink); display:flex; flex-direction:column; align-items:center; padding-top:12px; background:var(--bp-gris2); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-bar .r { font-family:'Anton',sans-serif; font-size:clamp(34px,3vw,76px); line-height:1; color:var(--bp-ink); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod-bar img { width:clamp(30px,2.2vw,52px); height:clamp(30px,2.2vw,52px); margin-top:5px; }
body.jpo-game.jpiscine .jgp-cover .jgp-pod.p1 .jgp-pod-bar { height:clamp(120px,12vw,260px); background:var(--bp-jaune); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod.p2 .jgp-pod-bar { height:clamp(90px,9vw,190px); background:var(--bp-gris2); }
body.jpo-game.jpiscine .jgp-cover .jgp-pod.p3 .jgp-pod-bar { height:clamp(70px,7vw,150px); background:var(--bp-orange); }
body.jpo-game.jpiscine .jgp-cover .jgp-fin-list { width:100%; max-width:min(1000px,88%); display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:0; }
body.jpo-game.jpiscine .jgp-cover .jgp-frow { display:flex; align-items:center; gap:14px; background:rgba(255,254,247,.06); border:2px solid rgba(255,254,247,.25); padding:8px 16px; }
body.jpo-game.jpiscine .jgp-cover .jgp-frow.me { border-color:var(--bp-cyan); background:rgba(91,216,229,.12); }
body.jpo-game.jpiscine .jgp-cover .jgp-frow.out { opacity:.55; }
body.jpo-game.jpiscine .jgp-cover .jgp-pos { font-family:'Anton',sans-serif; font-size:clamp(18px,1.5vw,36px); width:clamp(30px,2.4vw,54px); flex-shrink:0; color:var(--bp-cyan); }
body.jpo-game.jpiscine .jgp-cover .jgp-frav .ava-emo { width:clamp(38px,2.8vw,64px); height:clamp(38px,2.8vw,64px); display:inline-block; border:3px solid var(--bp-ink); overflow:hidden; }
body.jpo-game.jpiscine .jgp-cover .jgp-frav .ava-emo img { width:100%; height:100%; object-fit:cover; }
body.jpo-game.jpiscine .jgp-cover .jgp-frnm { flex:1; font-family:'Anton',sans-serif; font-size:clamp(16px,1.4vw,32px); letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.jpo-game.jpiscine .jgp-cover .jgp-fret { font-size:clamp(12px,1vw,22px); letter-spacing:1px; color:rgba(255,254,247,.6); white-space:nowrap; }
body.jpo-game.jpiscine .jgp-cover .jgp-frow.out .jgp-fret { color:var(--bp-rouge); }

/* ── transition : PRÊTS À PLONGER ── */
body.jpo-game.jpiscine .jgp-cover .jgp-pre { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,1.8vw,40px); text-align:center; padding:clamp(24px,3vw,60px); position:relative; z-index:2; }
body.jpo-game.jpiscine .jgp-cover .jgp-pre-wave img { width:clamp(100px,10vw,240px); height:clamp(100px,10vw,240px); transform:rotate(-6deg); }
body.jpo-game.jpiscine .jgp-cover .jgp-pre-title { font-family:'Anton',sans-serif; font-size:clamp(40px,5vw,120px); letter-spacing:2px; color:var(--bp-cyan); }
body.jpo-game.jpiscine .jgp-cover .jgp-pre-sub { font-size:clamp(15px,1.5vw,36px); max-width:min(1000px,80%); line-height:1.5; color:rgba(255,254,247,.82); letter-spacing:.5px; }

/* ===== FIX lobbies JPO (classique / défi / piscine) =========================
   • PIN tenu sur UNE ligne (plus de "DCMATS" coupé/débordant)
   • déco pivotée du skin bleu de base neutralisée (plus de carte inclinée coupée)
   • bandeau ink avec une hauteur mini (barre bien droite, LIVE calé dedans) */
body.jpo-game.jclassique #screen-lobby::before, body.jpo-game.jclassique #screen-lobby::after,
body.jpo-game.jdefi #screen-lobby::before,      body.jpo-game.jdefi #screen-lobby::after,
body.jpo-game.jpiscine #screen-lobby::before,   body.jpo-game.jpiscine #screen-lobby::after { content:none !important; display:none !important; }
body.jpo-game.jclassique #screen-lobby .code-big,
body.jpo-game.jdefi #screen-lobby .code-big,
body.jpo-game.jpiscine #screen-lobby .code-big {
  font-size:clamp(24px,3.2vw,44px) !important; letter-spacing:3px !important;
  white-space:nowrap !important; max-width:100%; padding:8px 16px 6px !important;
}
body.jpo-game.jclassique #screen-lobby .lobby-top,
body.jpo-game.jdefi #screen-lobby .lobby-top,
body.jpo-game.jpiscine #screen-lobby .lobby-top { min-height:46px; }

/* ============================================================
   🔔 BUZZER JPO — SALON (grand écran, état 1 du prototype)
   Markup identique à CLASSIQUE/DÉFI (renderJpoGrid → .jpl-cell) : on
   recompose #screen-lobby en 2 colonnes (barre ink + PIN à gauche, mur
   d'avatars à droite). Accent MAGENTA (identité buzzer). Palette --bp-*.
   Tout scopé body.jpo-game.jbuzzer #screen-lobby.
   ============================================================ */
body.jpo-game.jbuzzer #screen-lobby.active {
  display:grid; grid-template-columns:minmax(280px,1.1fr) 1.6fr; grid-template-rows:auto auto 1fr auto;
  padding:0; gap:0; background:var(--bp-paper); overflow:hidden;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-body {
  display:contents;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-invite,
body.jpo-game.jbuzzer #screen-lobby .lobby-qr,
body.jpo-game.jbuzzer #screen-lobby .config-row,
body.jpo-game.jbuzzer #screen-lobby .code-card .cc-actions,
body.jpo-game.jbuzzer #screen-lobby .code-card .cc-lbl,
body.jpo-game.jbuzzer #screen-lobby .code-card .cc-sub { display:none !important; }
body.jpo-game.jbuzzer #screen-lobby .code-card::before,
body.jpo-game.jbuzzer #screen-lobby .code-card::after { content:none !important; display:none !important; background:none !important; }
body.jpo-game.jbuzzer #screen-lobby .code-big { text-shadow:none !important; }

/* barre ink en tête */
body.jpo-game.jbuzzer #screen-lobby .lobby-top {
  grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:12px; margin:0; min-height:46px;
  background:var(--bp-ink); color:var(--bp-paper); padding:9px 18px; border-bottom:4px solid var(--bp-ink);
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top .back-btn {
  order:0; flex-shrink:0; width:32px; height:32px; padding:0; line-height:1;
  background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-paper); box-shadow:none;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top .lobby-close { order:3; background:var(--bp-rouge); color:#fff; }
body.jpo-game.jbuzzer #screen-lobby .lobby-top .page-title {
  order:1; display:inline-flex !important; align-items:baseline; gap:8px; flex-wrap:nowrap;
  font-size:initial; letter-spacing:0; color:var(--bp-paper);
  margin:0; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top .page-title::before,
body.jpo-game.jbuzzer #screen-lobby .lobby-top .page-title::after { content:none !important; display:none !important; }
body.jpo-game.jbuzzer #screen-lobby .lobby-top .page-title .jbl-brand {
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,28px); letter-spacing:2px; color:var(--bp-jaune); white-space:nowrap;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top .page-title .jbl-mode {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(9px,1.1vw,14px);
  letter-spacing:2px; color:rgba(255,254,247,.7); white-space:nowrap;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top::after { content:none; display:none; }
body.jpo-game.jbuzzer #screen-lobby .lobby-top .jbl-live {
  order:2; margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap;
  color:#fff; border:2px solid #fff; padding:3px 10px; background:var(--bp-magenta);
  font-family:'Anton',sans-serif; font-size:clamp(10px,1.2vw,15px); letter-spacing:1.5px;
}
body.jpo-game.jbuzzer #screen-lobby .lobby-top .jbl-live .jbl-dot {
  width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0;
  animation:jgbBlink 1s steps(1) infinite;
}

/* panneau PIN à gauche */
body.jpo-game.jbuzzer #screen-lobby .code-card {
  grid-column:1; grid-row:2/5; margin:0; padding:22px 18px; border:none; border-right:4px solid var(--bp-ink);
  box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--bp-gris2) !important;
}
body.jpo-game.jbuzzer #screen-lobby .code-card .body,
body.jpo-game.jbuzzer #screen-lobby .code-card .left {
  display:flex; flex-direction:column; align-items:center; background:none; border:none; box-shadow:none; padding:0; margin:0;
}
body.jpo-game.jbuzzer #screen-lobby .code-big {
  background:var(--bp-jaune); color:var(--bp-ink); border:4px solid var(--bp-ink); box-shadow:7px 7px 0 var(--bp-magenta);
  padding:8px 18px 6px; font-family:'Anton',sans-serif; font-size:clamp(38px,6vw,72px); letter-spacing:6px; line-height:.92; margin-top:6px;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-pinlbl {
  font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,14px); letter-spacing:6px; color:rgba(10,10,10,.5);
}
body.jpo-game.jbuzzer #screen-lobby .jpl-kick {
  font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,15px); letter-spacing:2px; color:var(--bp-magenta); text-align:center;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-joinline {
  display:flex; align-items:center; gap:8px; font-size:clamp(10px,1.2vw,13px); font-weight:700;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-joinline b {
  background:var(--bp-cyan); border:2.5px solid var(--bp-ink); padding:3px 9px; font-family:'Anton',sans-serif; letter-spacing:.5px;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-locknote {
  border:2px dashed var(--bp-ink); background:var(--bp-paper); padding:8px 11px; margin-top:6px;
  font-size:clamp(8px,1vw,10px); font-weight:700; line-height:1.45; max-width:270px; text-align:center; color:rgba(10,10,10,.72);
}

/* titre de section */
body.jpo-game.jbuzzer #screen-lobby .section-title {
  grid-column:2; grid-row:2; margin:0; padding:14px 18px 4px; border:none; background:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.jpo-game.jbuzzer #screen-lobby .section-title .st-sticker:not(.st-count) { transform:none; }
body.jpo-game.jbuzzer #screen-lobby .section-title .st-sticker:not(.st-count)::before { content:none !important; display:none !important; }
body.jpo-game.jbuzzer #screen-lobby .section-title .st-sticker:not(.st-count) .body {
  background:none !important; border:none !important; box-shadow:none !important; padding:0; margin:0; color:var(--bp-ink);
  font-family:'Anton',sans-serif; font-size:clamp(14px,1.8vw,22px); letter-spacing:1px;
}
body.jpo-game.jbuzzer #screen-lobby .section-title .st-count { background:none; border:none; box-shadow:none; }
body.jpo-game.jbuzzer #screen-lobby .section-title .st-count .body {
  font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,20px); letter-spacing:1px;
  background:var(--bp-magenta); color:var(--bp-paper); border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink); padding:3px 12px;
}

/* mur d'avatars (grille) */
body.jpo-game.jbuzzer #screen-lobby #playersWall {
  grid-column:2; grid-row:3; margin:0; padding:6px 18px 4px; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(58px,6vw,78px),1fr)); gap:clamp(7px,1vw,12px); align-content:start;
}
body.jpo-game.jbuzzer #screen-lobby #playersWall[data-dense="l"] { grid-template-columns:repeat(auto-fill, minmax(clamp(48px,5vw,64px),1fr)); }
body.jpo-game.jbuzzer #screen-lobby #playersWall[data-dense="xl"] { grid-template-columns:repeat(auto-fill, minmax(clamp(38px,4vw,52px),1fr)); gap:clamp(5px,.7vw,8px); }
body.jpo-game.jbuzzer #screen-lobby .jpl-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
body.jpo-game.jbuzzer #screen-lobby .jpl-av {
  position:relative; width:100%; max-width:56px; aspect-ratio:1/1;
  border:3px solid var(--bp-ink); background:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-magenta);
}
body.jpo-game.jbuzzer #screen-lobby .jpl-av .ava-emo,
body.jpo-game.jbuzzer #screen-lobby .jpl-av img { width:100%; height:100%; display:block; }
body.jpo-game.jbuzzer #screen-lobby .jpl-av.r1 { transform:rotate(-3deg); }
body.jpo-game.jbuzzer #screen-lobby .jpl-av.r2 { transform:rotate(2deg); }
body.jpo-game.jbuzzer #screen-lobby .jpl-av.r3 { transform:rotate(-1.5deg); }
body.jpo-game.jbuzzer #screen-lobby .jpl-nm {
  font-family:'Anton',sans-serif; font-size:clamp(9px,1vw,12px); letter-spacing:.5px; color:var(--bp-ink);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-cell.fresh .jpl-av { animation:jgbPop .3s ease; }
body.jpo-game.jbuzzer #screen-lobby .jpl-rm {
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; padding:0; line-height:1; font-size:11px;
  background:var(--bp-rouge); color:#fff; border:2px solid var(--bp-ink); box-shadow:none; border-radius:0;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-empty {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:30px 14px; text-align:center;
}
body.jpo-game.jbuzzer #screen-lobby .jpl-empty .jpl-emt { font-family:'Anton',sans-serif; font-size:clamp(15px,2vw,24px); color:var(--bp-magenta); letter-spacing:1px; }
body.jpo-game.jbuzzer #screen-lobby .jpl-empty .jpl-ems { font-size:clamp(10px,1.2vw,13px); font-weight:700; color:rgba(10,10,10,.6); }
@keyframes jgbPop { from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* la barre d'actions (LANCER / +BOT) reste dessous, pleine largeur */
body.jpo-game.jbuzzer #screen-lobby .lobby-actions,
body.jpo-game.jbuzzer #screen-lobby .lobby-cta { grid-column:1/-1; grid-row:4; }

/* ============================================================
   🔔 BUZZER JPO — EN JEU (grand écran, états 3/5)
   Calque .jge-cover.jgz-cover sur #screen-question / #screen-reveal /
   #screen-transition. Base bleue Epitech (--e-* héritées de .jge-cover)
   + accent magenta buzzer. GROS, lisible de loin.
   ============================================================ */
body.jpo-game.jbuzzer .jgz-cover { padding:0; }
body.jpo-game.jbuzzer .jgz-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(10px,1.4vw,18px) clamp(16px,2.2vw,30px);
  background:rgba(255,255,255,.09); border-bottom:3px solid rgba(255,255,255,.85); flex-shrink:0;
}
body.jpo-game.jbuzzer .jgz-bar-l { display:flex; align-items:baseline; gap:clamp(8px,1vw,14px); flex-wrap:wrap; }
body.jpo-game.jbuzzer .jgz-brand { font-family:var(--e-ft); font-size:clamp(18px,2.2vw,30px); letter-spacing:2px; color:var(--e-white); }
body.jpo-game.jbuzzer .jgz-mode { font-family:var(--e-fb); font-weight:700; font-size:clamp(11px,1.3vw,17px); letter-spacing:1.5px; color:rgba(255,255,255,.72); }
body.jpo-game.jbuzzer .jgz-live { display:inline-flex; align-items:center; gap:8px; font-family:var(--e-ft); letter-spacing:1.5px; font-size:clamp(11px,1.2vw,16px); color:#fff; }
body.jpo-game.jbuzzer .jgz-livedot { width:12px; height:12px; border-radius:50%; background:var(--e-orange); box-shadow:0 0 0 3px rgba(255,95,58,.35); animation:jgzPulse 1.1s infinite; }
@keyframes jgzPulse { 0%{ box-shadow:0 0 0 0 rgba(255,95,58,.55);} 70%{ box-shadow:0 0 0 10px rgba(255,95,58,0);} 100%{ box-shadow:0 0 0 0 rgba(255,95,58,0);} }

body.jpo-game.jbuzzer .jgz-body {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,26px); padding:clamp(18px,3vw,44px); text-align:center; min-height:0;
}
body.jpo-game.jbuzzer .jgz-q {
  font-family:var(--e-ft); font-size:clamp(28px,4.4vw,64px); line-height:1.02; letter-spacing:.5px; color:var(--e-white); max-width:15em;
}
body.jpo-game.jbuzzer .jgz-q.sm { font-size:clamp(20px,2.8vw,40px); }
body.jpo-game.jbuzzer .jgz-wait {
  display:inline-flex; align-items:center; gap:14px; background:var(--e-magenta); color:#fff;
  border:4px solid #fff; box-shadow:8px 8px 0 rgba(0,0,0,.25); padding:12px 28px;
  font-family:var(--e-ft); font-size:clamp(20px,3vw,42px); letter-spacing:2px;
}
body.jpo-game.jbuzzer .jgz-wait .jgz-bell { display:inline-flex; }
body.jpo-game.jbuzzer .jgz-wait .jgz-bell .noto, body.jpo-game.jbuzzer .jgz-wait .jgz-bell img { width:clamp(30px,3.4vw,52px); height:clamp(30px,3.4vw,52px); }
body.jpo-game.jbuzzer .jgz-reopen {
  display:inline-flex; align-items:center; gap:10px; background:var(--e-orange); color:#fff;
  border:4px solid #fff; padding:10px 22px; font-family:var(--e-ft); font-size:clamp(16px,2.2vw,30px); letter-spacing:1px;
}

/* tuiles de référence A/B/C/D */
body.jpo-game.jbuzzer .jgz-tiles { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,18px); width:100%; max-width:900px; }
body.jpo-game.jbuzzer .jgz-tile {
  display:flex; align-items:center; gap:clamp(10px,1.2vw,16px); padding:clamp(12px,1.5vw,20px);
  border:4px solid #fff; box-shadow:6px 6px 0 rgba(0,0,0,.25); color:#fff;
  font-family:var(--e-fb); font-weight:700; font-size:clamp(16px,2vw,28px); min-height:clamp(56px,7vw,90px); text-align:left;
}
body.jpo-game.jbuzzer .jgz-tile .jgz-tk {
  font-family:var(--e-ft); font-size:clamp(20px,2.4vw,34px); width:clamp(34px,3.6vw,52px); height:clamp(34px,3.6vw,52px); flex:0 0 auto;
  background:#fff; color:var(--e-ink); border:3px solid var(--e-ink); display:flex; align-items:center; justify-content:center;
}
body.jpo-game.jbuzzer .jgz-tile .jgz-tt { flex:1 1 auto; }
body.jpo-game.jbuzzer .jgz-tile .jgz-tm { margin-left:auto; font-family:var(--e-ft); font-size:clamp(22px,2.6vw,38px); }
body.jpo-game.jbuzzer .jgz-tile.ta { background:var(--e-magenta); }
body.jpo-game.jbuzzer .jgz-tile.tb { background:var(--e-orange); }
body.jpo-game.jbuzzer .jgz-tile.tc { background:var(--e-blue); border-color:#fff; }
body.jpo-game.jbuzzer .jgz-tile.td { background:#7A28FF; }
body.jpo-game.jbuzzer .jgz-tile.good { background:var(--e-green); color:var(--e-ink); }
body.jpo-game.jbuzzer .jgz-tile.good .jgz-tk { background:var(--e-ink); color:var(--e-green); border-color:#fff; }
body.jpo-game.jbuzzer .jgz-tile.miss { opacity:.4; }

/* takeover « X A BUZZÉ ! » */
body.jpo-game.jbuzzer .jgz-take { justify-content:center; }
body.jpo-game.jbuzzer .jgz-banner {
  display:inline-flex; align-items:center; gap:16px; background:var(--e-magenta); color:#fff;
  border:5px solid #fff; box-shadow:10px 10px 0 rgba(0,0,0,.3); padding:14px 30px;
  font-family:var(--e-ft); font-size:clamp(28px,4vw,58px); letter-spacing:1px; transform:rotate(-1.5deg);
  animation:jgzSlam .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes jgzSlam { from{ transform:scale(1.4) rotate(-1.5deg); opacity:0; } to{ transform:scale(1) rotate(-1.5deg); opacity:1; } }
body.jpo-game.jbuzzer .jgz-banner img { width:clamp(40px,4.4vw,66px); height:clamp(40px,4.4vw,66px); }
body.jpo-game.jbuzzer .jgz-bigav {
  width:clamp(96px,12vw,150px); height:clamp(96px,12vw,150px); border:5px solid #fff; box-shadow:8px 8px 0 var(--e-magenta); background:#fff;
}
body.jpo-game.jbuzzer .jgz-bigav .ava-emo, body.jpo-game.jbuzzer .jgz-bigav img { width:100%; height:100%; display:block; }
body.jpo-game.jbuzzer .jgz-take-sub { font-family:var(--e-fb); font-weight:600; font-size:clamp(14px,1.6vw,22px); color:rgba(255,255,255,.85); }
body.jpo-game.jbuzzer .jgz-frozen { display:flex; gap:12px; opacity:.4; }
body.jpo-game.jbuzzer .jgz-frozen .jgz-fav { width:clamp(44px,4.6vw,60px); height:clamp(44px,4.6vw,60px); border:3px solid #fff; filter:grayscale(1); }
body.jpo-game.jbuzzer .jgz-frozen .jgz-fav .ava-emo, body.jpo-game.jbuzzer .jgz-frozen .jgz-fav img { width:100%; height:100%; display:block; }

/* révélation */
body.jpo-game.jbuzzer .jgz-revhead { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
body.jpo-game.jbuzzer .jgz-revhead img { width:clamp(40px,4.4vw,64px); height:clamp(40px,4.4vw,64px); }
body.jpo-game.jbuzzer .jgz-ok {
  background:var(--e-green); color:var(--e-ink); border:4px solid #fff; box-shadow:6px 6px 0 rgba(0,0,0,.25);
  padding:8px 22px; font-family:var(--e-ft); font-size:clamp(22px,3vw,44px); letter-spacing:1px;
}
body.jpo-game.jbuzzer .jgz-pts {
  background:var(--e-magenta); color:#fff; border:4px solid #fff; padding:8px 18px;
  font-family:var(--e-ft); font-size:clamp(16px,2.2vw,30px); letter-spacing:1px;
}
body.jpo-game.jbuzzer .jgz-pts.miss { background:var(--e-orange); }

/* transition sobre */
body.jpo-game.jbuzzer .jgz-pre { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:40px; }
body.jpo-game.jbuzzer .jgz-pre-bell img { width:clamp(70px,9vw,120px); height:clamp(70px,9vw,120px); }
body.jpo-game.jbuzzer .jgz-pre-title { font-family:var(--e-ft); font-size:clamp(30px,5vw,68px); letter-spacing:1px; color:#fff; }
body.jpo-game.jbuzzer .jgz-pre-sub { font-family:var(--e-fb); font-weight:600; font-size:clamp(14px,1.8vw,24px); color:rgba(255,255,255,.8); max-width:22em; }

/* ============================================================
   📄 GRAND ÉCRAN · CLASSIQUE — calque bespoke PAPIER (11_jpo.js)
   FIDÈLE à design-prototypes/p2-jpo/format-classique.html (② ④ ⑥ ⑦).
   Calque .jge-cover.jgc-cover sur #screen-question / #screen-reveal /
   #screen-podium. Palette PAPIER (--bp-*), néobrutalisme : bords ink
   épais, ombres dures Npx Npx 0. Gros & lisible de loin (projection).
   ============================================================ */
@keyframes jgcBlink { 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* le calque : fond papier pointillé (neutralise le bleu + le décor Epitech) */
body.jpo-game.jclassique #screen-question .jge-cover.jgc-cover,
body.jpo-game.jclassique #screen-reveal .jge-cover.jgc-cover,
body.jpo-game.jclassique #screen-podium .jge-cover.jgc-cover {
  background:var(--bp-gris);
  color:var(--bp-ink);
  font-family:'IBM Plex Mono','IBM Plex Sans',monospace; font-weight:500;
}
body.jpo-game.jclassique #screen-question .jge-cover.jgc-cover::before,
body.jpo-game.jclassique #screen-reveal .jge-cover.jgc-cover::before,
body.jpo-game.jclassique #screen-podium .jge-cover.jgc-cover::before {
  background-image:radial-gradient(rgba(10,10,10,.07) 1.6px, transparent 1.6px) !important;
  background-size:22px 22px !important; background-position:0 0 !important; background-repeat:repeat !important;
}

/* bannière ink (on réutilise .jge-banner, on repasse en papier) */
body.jpo-game.jclassique .jgc-cover .jge-banner { background:var(--bp-ink); border-bottom:4px solid var(--bp-ink); }
body.jpo-game.jclassique .jgc-cover .jge-brand { color:var(--bp-jaune); }
body.jpo-game.jclassique .jgc-cover .jge-chip { background:var(--bp-magenta); color:var(--bp-paper); border:2px solid var(--bp-paper); }
body.jpo-game.jclassique .jgc-cover .jge-tag { color:rgba(255,254,247,.8); }
body.jpo-game.jclassique .jgc-cover .jge-live { color:var(--bp-paper); }
body.jpo-game.jclassique .jgc-cover .jge-dot { background:var(--bp-rouge); animation:jgcBlink 1s steps(1) infinite; }

/* ════════ ② QUESTION ════════ */
body.jpo-game.jclassique .jgc-q { flex:1; display:flex; flex-direction:column; min-height:0; }
body.jpo-game.jclassique .jgc-q-top {
  display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); flex-wrap:wrap;
  padding:clamp(10px,1.6vw,20px) clamp(16px,2.4vw,34px);
  background:var(--bp-jaune); border-bottom:4px solid var(--bp-ink); flex-shrink:0;
}
body.jpo-game.jclassique .jgc-q-tag {
  font-family:'Anton',sans-serif; font-size:clamp(12px,1.5vw,22px); letter-spacing:2px;
  background:var(--bp-ink); color:var(--bp-jaune); padding:3px 11px; flex-shrink:0;
}
body.jpo-game.jclassique .jgc-q-txt {
  font-family:'Anton',sans-serif; font-size:clamp(24px,3.4vw,56px); line-height:1.02; letter-spacing:.5px; color:var(--bp-ink);
}
body.jpo-game.jclassique .jgc-q-body {
  flex:1; display:flex; flex-direction:column; min-height:0;
  padding:clamp(14px,2vw,28px) clamp(16px,2.4vw,34px); gap:clamp(14px,2vw,26px);
}
body.jpo-game.jclassique .jgc-main { flex:1; display:flex; flex-direction:column; min-height:0; gap:clamp(10px,1.5vw,20px); }
body.jpo-game.jclassique .jgc-tiles {
  flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:clamp(12px,1.8vw,24px); min-height:0;
}
/* média projeté (image / 4 images / rébus / emoji) */
body.jpo-game.jclassique .jgc-media { flex:0 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; }
body.jpo-game.jclassique .jgc-media img, body.jpo-game.jclassique .jgc-media .four-grid, body.jpo-game.jclassique .jgc-media canvas {
  max-width:100%; max-height:clamp(180px,42vh,460px); border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-ink); object-fit:contain; background:var(--bp-paper);
}
body.jpo-game.jclassique .jgc-media .noto { font-size:clamp(48px,7vw,120px); }
/* types à saisie (estimation, ordre, anagramme…) : prompt centré + rappel tél */
body.jpo-game.jclassique .jgc-prompt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px); min-height:0; }
body.jpo-game.jclassique .jgc-est-range {
  font-family:'Anton',sans-serif; font-size:clamp(20px,2.6vw,44px); letter-spacing:.5px;
  background:var(--bp-jaune); border:4px solid var(--bp-ink); box-shadow:5px 5px 0 var(--bp-ink); padding:8px 20px;
}
body.jpo-game.jclassique .jgc-est-range b { color:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-phone-hint {
  display:inline-flex; align-items:center; gap:12px; font-family:'Anton',sans-serif; font-size:clamp(18px,2.4vw,40px); letter-spacing:1px;
  background:var(--bp-magenta); color:var(--bp-paper); border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-ink); padding:12px 24px;
}
body.jpo-game.jclassique .jgc-phone-hint img, body.jpo-game.jclassique .jgc-phone-hint .noto { width:1.2em; height:1.2em; }
body.jpo-game.jclassique .jgc-gt { position:relative; min-height:clamp(70px,12vh,150px); }
body.jpo-game.jclassique .jgc-gt::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--bp-ink); }
body.jpo-game.jclassique .jgc-gt-b {
  position:relative; height:100%; border:4px solid var(--bp-ink);
  display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); padding:0 clamp(14px,2vw,26px);
}
body.jpo-game.jclassique .jgc-gt-k {
  font-family:'Anton',sans-serif; font-size:clamp(26px,3.2vw,54px);
  width:clamp(44px,4.6vw,80px); height:clamp(44px,4.6vw,80px); flex-shrink:0;
  border:3px solid var(--bp-ink); display:flex; align-items:center; justify-content:center;
  background:var(--bp-paper); color:var(--bp-ink);
}
body.jpo-game.jclassique .jgc-gt-l { font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,34px); letter-spacing:.5px; line-height:1.05; }
body.jpo-game.jclassique .jgc-gt.a .jgc-gt-b { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jclassique .jgc-gt.a .jgc-gt-k { background:var(--bp-ink); color:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-gt.b .jgc-gt-b { background:var(--bp-cyan); color:var(--bp-ink); }
body.jpo-game.jclassique .jgc-gt.c .jgc-gt-b { background:var(--bp-jaune); color:var(--bp-ink); }
body.jpo-game.jclassique .jgc-gt.d .jgc-gt-b { background:var(--bp-vert); color:var(--bp-ink); }

/* colonne latérale : chrono + compteur live (empilée sous les tuiles en mobile) */
body.jpo-game.jclassique .jgc-side {
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vw,30px); flex-shrink:0;
}
body.jpo-game.jclassique .jgc-cd-lbl { display:none; font-family:'Anton',sans-serif; font-size:clamp(9px,1vw,14px); letter-spacing:2px; color:rgba(10,10,10,.55); }
body.jpo-game.jclassique .jgc-chrono {
  position:relative; width:clamp(90px,9vw,150px); height:clamp(90px,9vw,150px); flex-shrink:0; border-radius:50%;
  border:5px solid var(--bp-ink); background:var(--bp-jaune);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:6px 6px 0 var(--bp-ink);
  --sweep:0turn;
}
body.jpo-game.jclassique .jgc-chrono::after {
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(rgba(10,10,10,.8) 0turn, rgba(10,10,10,.8) var(--sweep), transparent var(--sweep));
}
body.jpo-game.jclassique .jgc-chrono.low { background:var(--bp-rouge); }
body.jpo-game.jclassique .jgc-chrono-num {
  position:relative; z-index:2; font-family:'Anton',sans-serif; font-size:clamp(34px,3.6vw,60px); line-height:1;
  width:66%; height:66%; border-radius:50%; background:var(--bp-paper); border:4px solid var(--bp-ink);
  display:flex; align-items:center; justify-content:center;
}
body.jpo-game.jclassique .jgc-answered {
  border:4px solid var(--bp-ink); background:var(--bp-paper); box-shadow:5px 5px 0 var(--bp-ink);
  padding:clamp(9px,1.2vw,16px) clamp(12px,1.6vw,22px); text-align:center; min-width:clamp(120px,14vw,220px);
}
body.jpo-game.jclassique .jgc-ans-big { font-family:'Anton',sans-serif; font-size:clamp(26px,3.4vw,56px); line-height:.95; }
body.jpo-game.jclassique .jgc-ans-big b { color:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-ans-lbl { font-family:'Anton',sans-serif; font-size:clamp(9px,1vw,15px); letter-spacing:1px; color:rgba(10,10,10,.6); margin-top:3px; }
/* avatars des répondants (apparaissent au fil des réponses) */
body.jpo-game.jclassique .jgc-ans-avs { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin-top:8px; min-height:clamp(24px,2.6vw,40px); }
body.jpo-game.jclassique .jgc-ans-av { display:inline-block; margin-left:-6px; }
body.jpo-game.jclassique .jgc-ans-av:first-child { margin-left:0; }
body.jpo-game.jclassique .jgc-ans-av .avatar-box, body.jpo-game.jclassique .jgc-ans-av img, body.jpo-game.jclassique .jgc-ans-av .ava-emo {
  width:clamp(24px,2.6vw,40px); height:clamp(24px,2.6vw,40px); border:2.5px solid var(--bp-ink); background:var(--bp-paper); box-shadow:2px 2px 0 var(--bp-ink); overflow:hidden; display:block; border-radius:2px;
}
body.jpo-game.jclassique .jgc-ans-more { font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); margin-left:6px; color:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-ans-bar { height:clamp(10px,1.1vw,16px); border:2.5px solid var(--bp-ink); margin-top:8px; background:var(--bp-gris2); overflow:hidden; }
body.jpo-game.jclassique .jgc-ans-bar i {
  display:block; height:100%; width:0%; background:var(--bp-magenta);
  background-image:repeating-linear-gradient(45deg,rgba(255,254,247,.22) 0 6px,transparent 6px 12px);
  transition:width .4s ease;
}

/* ════════ ④ RÉVÉLATION (histogramme) ════════ */
body.jpo-game.jclassique .jgc-rev { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
body.jpo-game.jclassique .jgc-rev-l {
  flex:1; display:flex; flex-direction:column; min-height:0;
  padding:clamp(14px,2vw,30px) clamp(16px,2.4vw,34px); border-bottom:4px solid var(--bp-ink);
}
body.jpo-game.jclassique .jgc-rev-qtag { font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,18px); letter-spacing:2px; color:rgba(10,10,10,.55); }
body.jpo-game.jclassique .jgc-rev-q { font-family:'Anton',sans-serif; font-size:clamp(22px,3vw,52px); line-height:1.04; letter-spacing:.5px; margin:6px 0 clamp(14px,2vw,26px); color:var(--bp-ink); }
body.jpo-game.jclassique .jgc-histo { flex:1; display:flex; align-items:flex-end; gap:clamp(10px,1.6vw,26px); min-height:clamp(180px,36vh,320px); padding-bottom:4px; }
body.jpo-game.jclassique .jgc-hcol { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
body.jpo-game.jclassique .jgc-cnt { font-family:'Anton',sans-serif; font-size:clamp(22px,3vw,48px); line-height:1; margin-bottom:6px; }
body.jpo-game.jclassique .jgc-hbar {
  position:relative; width:100%; display:flex; align-items:flex-start; justify-content:center; padding-top:10px;
  border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-ink);
  transition:height .5s cubic-bezier(.2,.8,.2,1);
}
body.jpo-game.jclassique .jgc-hcol.a .jgc-hbar { background:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-hcol.b .jgc-hbar { background:var(--bp-cyan); }
body.jpo-game.jclassique .jgc-hcol.c .jgc-hbar { background:var(--bp-jaune); }
body.jpo-game.jclassique .jgc-hcol.d .jgc-hbar { background:var(--bp-vert); }
body.jpo-game.jclassique .jgc-hcol.good .jgc-hbar { background:var(--bp-vert); }
body.jpo-game.jclassique .jgc-hcol.miss .jgc-hbar { opacity:.55; }
body.jpo-game.jclassique .jgc-hk { font-family:'Anton',sans-serif; font-size:clamp(22px,3vw,50px); color:var(--bp-ink); }
body.jpo-game.jclassique .jgc-hcol.a .jgc-hk { color:var(--bp-paper); }
body.jpo-game.jclassique .jgc-goodbadge {
  position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:clamp(34px,3.4vw,52px); height:clamp(34px,3.4vw,52px);
  background:var(--bp-vert); border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink);
  display:flex; align-items:center; justify-content:center;
}
body.jpo-game.jclassique .jgc-goodbadge img, body.jpo-game.jclassique .jgc-goodbadge .noto { width:70%; height:70%; }
body.jpo-game.jclassique .jgc-hmiss { position:absolute; top:6px; left:8px; font-family:'Anton',sans-serif; font-size:clamp(14px,1.6vw,24px); color:var(--bp-rouge); }
body.jpo-game.jclassique .jgc-kk { margin-top:6px; font-family:'Anton',sans-serif; font-size:clamp(11px,1.3vw,18px); letter-spacing:.5px; text-align:center; line-height:1.1; }
body.jpo-game.jclassique .jgc-solu { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
body.jpo-game.jclassique .jgc-solu-k { font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); letter-spacing:2px; color:rgba(10,10,10,.55); }
body.jpo-game.jclassique .jgc-solu-a {
  font-family:'Anton',sans-serif; font-size:clamp(28px,4vw,72px); line-height:1.02; text-align:center;
  background:var(--bp-vert); border:4px solid var(--bp-ink); box-shadow:6px 6px 0 var(--bp-ink); padding:12px 24px;
}
body.jpo-game.jclassique .jgc-rev-r {
  flex:none; display:flex; flex-direction:column; gap:clamp(12px,1.6vw,22px);
  padding:clamp(14px,2vw,26px) clamp(16px,2.4vw,34px); background:var(--bp-gris2);
}
body.jpo-game.jclassique .jgc-good { position:relative; border:5px solid var(--bp-ink); background:var(--bp-vert); box-shadow:6px 6px 0 var(--bp-ink); padding:clamp(14px,1.8vw,26px); color:var(--bp-ink); }
body.jpo-game.jclassique .jgc-good-t { font-family:'Anton',sans-serif; font-size:clamp(13px,1.5vw,22px); letter-spacing:2px; display:flex; align-items:center; gap:9px; }
body.jpo-game.jclassique .jgc-good-t img, body.jpo-game.jclassique .jgc-good-t .noto { width:1.4em; height:1.4em; }
body.jpo-game.jclassique .jgc-good-a { font-family:'Anton',sans-serif; font-size:clamp(22px,2.8vw,46px); line-height:1.02; margin-top:8px; letter-spacing:.5px; }
body.jpo-game.jclassique .jgc-pts { border:4px solid var(--bp-ink); background:var(--bp-ink); color:var(--bp-paper); padding:clamp(12px,1.6vw,22px); box-shadow:6px 6px 0 var(--bp-magenta); }
body.jpo-game.jclassique .jgc-pts-t { font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); letter-spacing:1.5px; display:flex; align-items:center; gap:9px; color:var(--bp-jaune); }
body.jpo-game.jclassique .jgc-pts-t img, body.jpo-game.jclassique .jgc-pts-t .noto { width:1.4em; height:1.4em; }
body.jpo-game.jclassique .jgc-pts-d { font-size:clamp(12px,1.3vw,19px); font-weight:600; line-height:1.5; margin-top:9px; color:rgba(255,254,247,.88); }
body.jpo-game.jclassique .jgc-pts-d b { background:var(--bp-jaune); color:var(--bp-ink); padding:1px 7px; border:2px solid var(--bp-ink); }

/* ════════ ⑥ CLASSEMENT (podium du moment + tableau) ════════ */
body.jpo-game.jclassique .jgc-cls { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
body.jpo-game.jclassique .jgc-cls-l {
  flex:none; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) 0; border-bottom:4px solid var(--bp-ink); background:var(--bp-gris2); position:relative;
}
body.jpo-game.jclassique .jgc-clt { text-align:center; font-family:'Anton',sans-serif; font-size:clamp(12px,1.5vw,22px); letter-spacing:2px; color:var(--bp-magenta); margin-bottom:clamp(10px,1.4vw,18px); }
body.jpo-game.jclassique .jgc-podium { display:flex; align-items:flex-end; gap:clamp(8px,1.4vw,20px); justify-content:center; }
body.jpo-game.jclassique .jgc-pod { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
body.jpo-game.jclassique .jgc-pod.empty { visibility:hidden; }
body.jpo-game.jclassique .jgc-pod-av { position:relative; }
body.jpo-game.jclassique .jgc-pod-av .avatar-box, body.jpo-game.jclassique .jgc-pod-av img, body.jpo-game.jclassique .jgc-pod-av .ava-emo {
  width:clamp(40px,4.6vw,72px); height:clamp(40px,4.6vw,72px); border:4px solid var(--bp-ink); background:var(--bp-paper); box-shadow:3px 3px 0 var(--bp-ink); overflow:hidden; display:block;
}
/* médailles = petits badges d'angle (jamais l'emoji géant capté par la règle .jgc-pod-av img) */
body.jpo-game.jclassique .jgc-medal { position:absolute; top:-10px; right:-8px; font-size:clamp(13px,1.4vw,20px); line-height:1; transform:rotate(10deg); z-index:3; }
body.jpo-game.jclassique .jgc-medal img { width:1em !important; height:1em !important; }
body.jpo-game.jclassique .jgc-pod-nm { font-family:'Anton',sans-serif; font-size:clamp(12px,1.5vw,24px); letter-spacing:.5px; margin-top:8px; max-width:clamp(80px,10vw,150px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
body.jpo-game.jclassique .jgc-pod-sc { font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,26px); background:var(--bp-paper); border:2.5px solid var(--bp-ink); padding:1px 9px; margin-top:3px; }
body.jpo-game.jclassique .jgc-block {
  width:100%; border:4px solid var(--bp-ink); border-bottom:none; display:flex; align-items:flex-start; justify-content:center;
  font-family:'Anton',sans-serif; font-size:clamp(24px,3vw,52px); color:var(--bp-ink); padding-top:8px; margin-top:8px;
}
body.jpo-game.jclassique .jgc-pod.p1 .jgc-block { background:var(--bp-jaune); height:clamp(90px,15vw,180px); }
body.jpo-game.jclassique .jgc-pod.p2 .jgc-block { background:var(--bp-cyan); height:clamp(64px,11vw,130px); }
body.jpo-game.jclassique .jgc-pod.p3 .jgc-block { background:var(--bp-orange); height:clamp(46px,8vw,96px); }
body.jpo-game.jclassique .jgc-pod.me .jgc-pod-nm { color:var(--bp-magenta); }
body.jpo-game.jclassique .jgc-pod.me .jgc-pod-av .avatar-box, body.jpo-game.jclassique .jgc-pod.me .jgc-pod-av img, body.jpo-game.jclassique .jgc-pod.me .jgc-pod-av .ava-emo { border-color:var(--bp-magenta); box-shadow:3px 3px 0 var(--bp-magenta); }
body.jpo-game.jclassique .jgc-crown { position:absolute; top:-34px; left:50%; transform:translateX(-50%); font-size:clamp(26px,3vw,44px); z-index:3; }

body.jpo-game.jclassique .jgc-cls-r { flex:1; display:flex; flex-direction:column; min-height:0; padding:clamp(14px,2vw,28px) clamp(16px,2.2vw,32px); gap:clamp(7px,1vw,12px); }
body.jpo-game.jclassique .jgc-cls-rh { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; gap:10px; }
body.jpo-game.jclassique .jgc-cls-t { font-family:'Anton',sans-serif; font-size:clamp(15px,1.8vw,28px); letter-spacing:1.5px; }
body.jpo-game.jclassique .jgc-cls-q { font-family:'Anton',sans-serif; font-size:clamp(10px,1.2vw,17px); letter-spacing:1px; background:var(--bp-ink); color:var(--bp-jaune); padding:3px 10px; flex-shrink:0; }
body.jpo-game.jclassique .jgc-lrow, body.jpo-game.jclassique .jgc-frow {
  display:flex; align-items:center; gap:clamp(9px,1.2vw,16px); border:3px solid var(--bp-ink); background:var(--bp-paper);
  padding:clamp(6px,.9vw,11px) clamp(10px,1.4vw,16px); box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jclassique .jgc-pos { font-family:'Anton',sans-serif; font-size:clamp(15px,1.8vw,28px); width:clamp(24px,2.4vw,40px); flex-shrink:0; }
body.jpo-game.jclassique .jgc-lav .avatar-box, body.jpo-game.jclassique .jgc-lav img, body.jpo-game.jclassique .jgc-lav .ava-emo { width:clamp(30px,3vw,48px); height:clamp(30px,3vw,48px); border:2.5px solid var(--bp-ink); background:var(--bp-paper); flex-shrink:0; overflow:hidden; display:block; }
body.jpo-game.jclassique .jgc-lnm { font-family:'Anton',sans-serif; font-size:clamp(14px,1.7vw,28px); letter-spacing:.5px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.jpo-game.jclassique .jgc-mv { font-size:clamp(8px,1vw,13px); font-weight:700; letter-spacing:.5px; border:2px solid var(--bp-ink); padding:1px 6px; flex-shrink:0; }
body.jpo-game.jclassique .jgc-mv.up { background:var(--bp-vert); }
body.jpo-game.jclassique .jgc-mv.down { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jclassique .jgc-mv.same { background:var(--bp-gris2); }
body.jpo-game.jclassique .jgc-mv.new { background:var(--bp-jaune); }
body.jpo-game.jclassique .jgc-lsc { margin-left:auto; font-family:'Anton',sans-serif; font-size:clamp(16px,1.9vw,30px); }
body.jpo-game.jclassique .jgc-gap { font-size:clamp(8px,1vw,13px); font-weight:700; color:rgba(10,10,10,.5); flex-shrink:0; }
body.jpo-game.jclassique .jgc-lrow.you, body.jpo-game.jclassique .jgc-frow.you { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jclassique .jgc-lrow.you .jgc-gap { color:rgba(255,254,247,.8); }
body.jpo-game.jclassique .jgc-tense {
  margin-top:auto; align-self:center; text-align:center; font-family:'Anton',sans-serif; font-size:clamp(12px,1.4vw,20px); letter-spacing:1px;
  background:var(--bp-jaune); border:3px solid var(--bp-ink); padding:6px 14px; box-shadow:3px 3px 0 var(--bp-ink);
  display:inline-flex; gap:8px; align-items:center;
}
body.jpo-game.jclassique .jgc-tense img, body.jpo-game.jclassique .jgc-tense .noto { width:1.3em; height:1.3em; }

/* ════════ ⑦ PODIUM FINAL ════════ */
body.jpo-game.jclassique .jgc-fin { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; padding:clamp(14px,2vw,30px) clamp(16px,3vw,46px) clamp(20px,3vw,40px); gap:clamp(14px,2vw,26px); align-items:center; }
body.jpo-game.jclassique .jgc-fin-hero { text-align:center; }
body.jpo-game.jclassique .jgc-fin-stamp { display:inline-flex; align-items:center; gap:9px; font-family:'Anton',sans-serif; font-size:clamp(12px,1.5vw,22px); letter-spacing:2px; background:var(--bp-ink); color:var(--bp-jaune); border:3px solid var(--bp-ink); padding:6px 14px; transform:rotate(-2deg); }
body.jpo-game.jclassique .jgc-fin-stamp img, body.jpo-game.jclassique .jgc-fin-stamp .noto { width:1.3em; height:1.3em; }
body.jpo-game.jclassique .jgc-fin-win { font-family:'Anton',sans-serif; font-size:clamp(34px,6vw,96px); line-height:.94; letter-spacing:1px; color:var(--bp-ink); margin-top:clamp(8px,1.4vw,18px); }
body.jpo-game.jclassique .jgc-fin-sub { font-family:'Anton',sans-serif; font-size:clamp(13px,1.6vw,24px); letter-spacing:1.5px; color:var(--bp-magenta); margin-top:8px; }
body.jpo-game.jclassique .jgc-podium-fin { width:100%; max-width:920px; margin-top:clamp(6px,1vw,14px); }
body.jpo-game.jclassique .jgc-podium-fin .jgc-pod-av .avatar-box, body.jpo-game.jclassique .jgc-podium-fin .jgc-pod-av img, body.jpo-game.jclassique .jgc-podium-fin .jgc-pod-av .ava-emo { width:clamp(48px,5.4vw,84px); height:clamp(48px,5.4vw,84px); }
body.jpo-game.jclassique .jgc-fin-list { display:flex; flex-direction:column; gap:clamp(7px,1vw,12px); max-width:920px; width:100%; margin:0 auto; }

/* projection : 2 colonnes pour révélation & classement */
@media (min-width:900px) {
  body.jpo-game.jclassique .jgc-q-body { flex-direction:row; }
  body.jpo-game.jclassique .jgc-side { flex-direction:column; width:clamp(160px,16vw,260px); }
  body.jpo-game.jclassique .jgc-cd-lbl { display:block; }
  body.jpo-game.jclassique .jgc-answered { width:100%; }

  body.jpo-game.jclassique .jgc-rev { flex-direction:row; overflow:hidden; }
  body.jpo-game.jclassique .jgc-rev-l { border-bottom:none; border-right:4px solid var(--bp-ink); }
  body.jpo-game.jclassique .jgc-rev-r { width:clamp(280px,32vw,480px); flex-shrink:0; justify-content:center; }

  body.jpo-game.jclassique .jgc-cls { flex-direction:row; overflow:hidden; }
  body.jpo-game.jclassique .jgc-cls-l { border-bottom:none; border-right:4px solid var(--bp-ink); width:clamp(300px,34vw,520px); flex-shrink:0; }
  body.jpo-game.jclassique .jgc-cls-r { flex:1; }
}

/* ════════════════════════════════════════════════════════════
   🚩 TEAMS (ROUGE vs BLEU) — GRAND ÉCRAN
   Répartition (lobby) + Score de guerre (question) + Manche gagnée
   (reveal) + Podium collectif (over). ROUGE/BLEU = couleurs SÉMANTIQUES
   d'équipe (rouge/bleu francs), posées sur le bleu Epitech.
   FIDÈLE à design-prototypes/p2-jpo/format-teams.html.
   ============================================================ */
body.jpo-game #screen-question .jgt-cover,
body.jpo-game #screen-reveal .jgt-cover,
body.jpo-game #screen-podium .jgt-cover { --tr:#FF5252; --tb:#4D7CFF; }

/* ---------- ① RÉPARTITION (lobby, #playersWall) ---------- */
/* ── LOBBY TEAMS = GRAND ÉCRAN PAYSAGE (répartition ROUGE | PIN+VS | BLEU) ──
   On masque le chrome portrait (code-card, QR, invite, chips, titre JOUEURS)
   et on fait remplir la répartition en plein écran. */
body.jpo-game.jteams #screen-lobby .code-card,
body.jpo-game.jteams #screen-lobby .lobby-invite,
body.jpo-game.jteams #screen-lobby .lobby-qr,
body.jpo-game.jteams #screen-lobby .config-row,
body.jpo-game.jteams #screen-lobby .section-title { display:none !important; }
body.jpo-game.jteams #screen-lobby .lobby-body {
  max-width:none; width:100%; display:flex; flex-direction:column; min-height:0;
  padding:clamp(10px,1.4vw,20px) clamp(14px,2vw,30px);
}
body.jpo-game.jteams #screen-lobby .players-grid {
  flex:1; display:block; max-width:none; width:100%; padding:0; margin:0; min-height:0;
}
body.jpo-game.jteams #screen-lobby .jgt-lobby {
  display:flex; gap:clamp(12px,1.6vw,24px); align-items:stretch; width:100%; height:100%; min-height:clamp(360px,58vh,640px);
  --tr:#FF5252; --tb:#4D7CFF;
}
/* colonne centrale : kicker + PIN géant + VS + compteurs + note */
body.jpo-game.jteams #screen-lobby .jgt-kicker { font-family:var(--jh-fd); font-size:clamp(11px,1.1vw,15px); letter-spacing:2px; color:#00FF97; }
body.jpo-game.jteams #screen-lobby .jgt-pin { width:100%; border:4px solid #04123f; background:#fff; box-shadow:6px 6px 0 #04123f; padding:clamp(8px,1vw,14px) clamp(10px,1.2vw,16px); text-align:center; }
body.jpo-game.jteams #screen-lobby .jgt-pin-lbl { font-family:var(--jh-fd); font-size:clamp(9px,.9vw,12px); letter-spacing:4px; color:rgba(4,18,63,.55); }
body.jpo-game.jteams #screen-lobby .jgt-pin-num { font-family:var(--jh-fd); font-size:clamp(30px,3.6vw,58px); letter-spacing:3px; line-height:1; color:#013afb; }
body.jpo-game.jteams #screen-lobby .jgt-note { font-size:clamp(9px,.9vw,12px); font-weight:700; line-height:1.4; text-align:center; color:#fff; border:2px dashed rgba(255,255,255,.55); padding:clamp(6px,.7vw,10px); }
body.jpo-game.jteams #screen-lobby .jgt-col {
  flex:1; min-width:0; border:4px solid #fff; box-shadow:7px 7px 0 rgba(0,0,0,.32);
  display:flex; flex-direction:column; padding:clamp(10px,1.3vw,16px);
}
body.jpo-game.jteams #screen-lobby .jgt-col.r { background:var(--tr); }
body.jpo-game.jteams #screen-lobby .jgt-col.b { background:var(--tb); }
body.jpo-game.jteams #screen-lobby .jgt-col-h { display:flex; align-items:center; gap:9px; margin-bottom:11px; color:#fff; }
body.jpo-game.jteams #screen-lobby .jgt-col-h .em { width:clamp(24px,2.4vw,36px); height:clamp(24px,2.4vw,36px); }
body.jpo-game.jteams #screen-lobby .jgt-col-h .em img { width:100%; height:100%; }
body.jpo-game.jteams #screen-lobby .jgt-col-h .t { font-family:var(--jh-fd); font-size:clamp(20px,2.6vw,38px); letter-spacing:2px; }
body.jpo-game.jteams #screen-lobby .jgt-col-h .n { margin-left:auto; font-family:var(--jh-fd); font-size:clamp(18px,2.2vw,32px); background:#fff; color:#04123f; border:3px solid #04123f; padding:1px 12px; box-shadow:3px 3px 0 rgba(0,0,0,.3); }
body.jpo-game.jteams #screen-lobby .jgt-grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,.8vw,11px); align-content:start; }
body.jpo-game.jteams #screen-lobby[data-dense] .jgt-grid,
body.jpo-game.jteams #screen-lobby .jgt-grid { grid-template-columns:repeat(auto-fill,minmax(clamp(48px,5vw,74px),1fr)); }
body.jpo-game.jteams #screen-lobby .jgt-pawn { position:relative; text-align:center; }
body.jpo-game.jteams #screen-lobby .jgt-pawn .ava-box,
body.jpo-game.jteams #screen-lobby .jgt-pawn img { width:100%; max-width:clamp(44px,4.6vw,66px); }
body.jpo-game.jteams #screen-lobby .jgt-pawn.fresh { animation:jhPop .5s ease-out; }
body.jpo-game.jteams #screen-lobby .jgt-pn { display:block; font-size:clamp(8px,.85vw,12px); font-weight:700; color:#fff; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.jpo-game.jteams #screen-lobby .jgt-rm { position:absolute; top:-6px; right:-4px; width:20px; height:20px; border:2px solid #04123f; background:#fff; color:#FF5252; font-family:var(--jh-fd); border-radius:0; cursor:pointer; line-height:1; }
body.jpo-game.jteams #screen-lobby .jgt-col-empty { grid-column:1/-1; font-size:clamp(10px,1.1vw,14px); font-weight:700; color:rgba(255,255,255,.85); padding:14px 4px; }
body.jpo-game.jteams #screen-lobby .jgt-mid { flex:0 0 clamp(120px,15vw,220px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,1.4vw,18px); }
body.jpo-game.jteams #screen-lobby .jgt-vs { font-family:var(--jh-fd); font-size:clamp(30px,4vw,64px); letter-spacing:2px; color:#00FF97; background:#04123f; border:4px solid #00FF97; padding:2px 16px; transform:rotate(-3deg); box-shadow:5px 5px 0 var(--tr); }
body.jpo-game.jteams #screen-lobby .jgt-hc { display:flex; gap:8px; width:100%; }
body.jpo-game.jteams #screen-lobby .jgt-hc .hc { flex:1; text-align:center; border:3px solid #fff; padding:6px 3px; box-shadow:3px 3px 0 rgba(0,0,0,.3); }
body.jpo-game.jteams #screen-lobby .jgt-hc .hc.r { background:var(--tr); color:#fff; }
body.jpo-game.jteams #screen-lobby .jgt-hc .hc.b { background:var(--tb); color:#fff; }
body.jpo-game.jteams #screen-lobby .jgt-hc .v { font-family:var(--jh-fd); font-size:clamp(20px,2.4vw,34px); line-height:1; }
body.jpo-game.jteams #screen-lobby .jgt-hc .l { font-size:clamp(7px,.8vw,10px); font-weight:700; letter-spacing:1px; margin-top:2px; }
body.jpo-game.jteams #screen-lobby .jgt-note { font-size:clamp(8px,.9vw,12px); font-weight:600; line-height:1.4; color:rgba(255,255,255,.82); text-align:center; border:2px dashed rgba(255,255,255,.5); padding:7px 8px; }

/* ---------- ③ SCORE DE GUERRE (question cover) ---------- */
body.jpo-game #screen-question .jgt-cover .jgt-war { flex:1; display:flex; flex-direction:column; min-height:0; }
body.jpo-game #screen-question .jgt-cover .jgt-q { padding:clamp(10px,1.5vw,20px) clamp(16px,2.4vw,34px); border-bottom:3px solid rgba(255,255,255,.6); background:rgba(0,0,0,.14); position:relative; }
body.jpo-game #screen-question .jgt-cover .jgt-qtag { font-family:var(--jh-fd); font-size:clamp(11px,1.3vw,18px); letter-spacing:2px; color:rgba(255,255,255,.75); }
body.jpo-game #screen-question .jgt-cover .jgt-chrono { position:absolute; top:clamp(8px,1.2vw,16px); right:clamp(16px,2.4vw,34px); font-family:var(--jh-fd); font-size:clamp(22px,2.8vw,44px); color:#00FF97; }
body.jpo-game #screen-question .jgt-cover .jgt-chrono.hot { color:#FF5F3A; animation:jhBlink 1s steps(1) infinite; }
body.jpo-game #screen-question .jgt-cover .jgt-qtx { font-family:var(--jh-fd); font-size:clamp(24px,3.4vw,56px); line-height:1.04; letter-spacing:.5px; margin-top:4px; }
body.jpo-game #screen-question .jgt-cover .jgt-bararea { flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.8vw,26px); padding:clamp(16px,2.6vw,40px) clamp(18px,3vw,54px); }
body.jpo-game #screen-question .jgt-cover .jgt-heads { display:flex; justify-content:space-between; align-items:flex-end; }
body.jpo-game #screen-question .jgt-cover .jgt-side { display:flex; align-items:center; gap:clamp(8px,1.2vw,16px); }
body.jpo-game #screen-question .jgt-cover .jgt-side.b { flex-direction:row-reverse; text-align:right; }
body.jpo-game #screen-question .jgt-cover .jgt-side .em { width:clamp(30px,3.2vw,52px); height:clamp(30px,3.2vw,52px); }
body.jpo-game #screen-question .jgt-cover .jgt-side .em img { width:100%; height:100%; }
body.jpo-game #screen-question .jgt-cover .jgt-side .nm { font-family:var(--jh-fd); font-size:clamp(18px,2.4vw,38px); letter-spacing:2px; }
body.jpo-game #screen-question .jgt-cover .jgt-side.r .nm { color:var(--tr); }
body.jpo-game #screen-question .jgt-cover .jgt-side.b .nm { color:var(--tb); }
body.jpo-game #screen-question .jgt-cover .jgt-side .sc { font-family:var(--jh-fd); font-size:clamp(28px,3.6vw,58px); line-height:1; color:#fff; }
body.jpo-game #screen-question .jgt-cover .jgt-bar { position:relative; height:clamp(60px,8vw,120px); border:5px solid #fff; display:flex; overflow:hidden; box-shadow:9px 9px 0 rgba(0,0,0,.4); background:var(--tb); }
body.jpo-game #screen-question .jgt-cover .jgt-side-r { background:var(--tr); background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 9px,transparent 9px 18px); transition:width .6s cubic-bezier(.2,.8,.2,1); position:relative; flex-shrink:0; }
body.jpo-game #screen-question .jgt-cover .jgt-side-b { flex:1; background:var(--tb); background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 9px,transparent 9px 18px); position:relative; }
body.jpo-game #screen-question .jgt-cover .jgt-bar .pc { position:absolute; top:50%; transform:translateY(-50%); font-family:var(--jh-fd); font-size:clamp(24px,3vw,48px); color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
body.jpo-game #screen-question .jgt-cover .jgt-bar .pc.l { left:clamp(10px,1.4vw,22px); }
body.jpo-game #screen-question .jgt-cover .jgt-bar .pc.r { right:clamp(10px,1.4vw,22px); }
body.jpo-game #screen-question .jgt-cover .jgt-midline { position:absolute; top:-6px; bottom:-6px; left:50%; transform:translateX(-50%); width:4px; background:#fff; opacity:.4; z-index:3; }
body.jpo-game #screen-question .jgt-cover .jgt-front { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; font-family:var(--jh-fd); font-size:clamp(13px,1.5vw,22px); background:#00FF97; color:#04123f; border:3px solid #04123f; padding:4px 12px; box-shadow:3px 3px 0 rgba(0,0,0,.3); white-space:nowrap; }
body.jpo-game #screen-question .jgt-cover .jgt-tense { align-self:center; font-family:var(--jh-fd); font-size:clamp(15px,1.9vw,30px); letter-spacing:1.5px; display:inline-flex; gap:10px; align-items:center; background:#04123f; color:#00FF97; border:3px solid #00FF97; padding:6px 16px; box-shadow:4px 4px 0 var(--tr); transform:rotate(-1deg); }
body.jpo-game #screen-question .jgt-cover .jgt-tense .em { width:clamp(20px,2vw,30px); height:clamp(20px,2vw,30px); }
body.jpo-game #screen-question .jgt-cover .jgt-tense .em img { width:100%; height:100%; }

/* ---------- ⑤ MANCHE GAGNÉE (reveal cover) ---------- */
body.jpo-game #screen-reveal .jgt-cover .jgt-won { flex:1; display:flex; min-height:0; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-l { flex:1; padding:clamp(16px,2.4vw,36px); display:flex; flex-direction:column; justify-content:center; border-right:4px solid #fff; position:relative; overflow:hidden; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-l.r { background:var(--tr); }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-l.b { background:var(--tb); }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-l.draw { background:#04123f; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-tag { align-self:flex-start; font-family:var(--jh-fd); font-size:clamp(11px,1.3vw,18px); letter-spacing:2px; background:#04123f; color:#fff; border:3px solid #fff; padding:4px 12px; transform:rotate(-2deg); }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-title { font-family:var(--jh-fd); font-size:clamp(34px,5vw,84px); line-height:.9; letter-spacing:1px; color:#fff; text-shadow:5px 5px 0 rgba(0,0,0,.4); margin:clamp(10px,1.4vw,18px) 0 6px; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-sub { font-size:clamp(12px,1.4vw,20px); font-weight:700; color:#fff; line-height:1.4; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-sub b { background:#00FF97; color:#04123f; padding:1px 6px; }
body.jpo-game #screen-reveal .jgt-cover .jgt-won-r { width:44%; flex-shrink:0; padding:clamp(16px,2.4vw,34px); display:flex; flex-direction:column; justify-content:center; background:rgba(255,255,255,.08); }
body.jpo-game #screen-reveal .jgt-cover .jgt-rt { font-family:var(--jh-fd); font-size:clamp(13px,1.5vw,22px); letter-spacing:1.5px; text-align:center; margin-bottom:clamp(12px,1.6vw,22px); color:#fff; }
body.jpo-game #screen-reveal .jgt-cover .jgt-swing { border:4px solid #fff; background:rgba(0,0,0,.18); box-shadow:6px 6px 0 rgba(0,0,0,.3); padding:clamp(12px,1.6vw,20px); }
body.jpo-game #screen-reveal .jgt-cover .jgt-row { margin-bottom:clamp(12px,1.5vw,18px); }
body.jpo-game #screen-reveal .jgt-cover .jgt-row:last-child { margin-bottom:0; }
body.jpo-game #screen-reveal .jgt-cover .jgt-lab { display:flex; justify-content:space-between; align-items:center; font-family:var(--jh-fd); font-size:clamp(14px,1.7vw,26px); letter-spacing:1px; margin-bottom:5px; color:#fff; }
body.jpo-game #screen-reveal .jgt-cover .jgt-track { height:clamp(20px,2.6vw,38px); border:3px solid #fff; background:rgba(255,255,255,.16); position:relative; overflow:hidden; }
body.jpo-game #screen-reveal .jgt-cover .jgt-track .fill { height:100%; background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 7px,transparent 7px 14px); transition:width .8s cubic-bezier(.2,.7,.3,1); }
body.jpo-game #screen-reveal .jgt-cover .jgt-track .fill.r { background-color:var(--tr); }
body.jpo-game #screen-reveal .jgt-cover .jgt-track .fill.b { background-color:var(--tb); }
body.jpo-game #screen-reveal .jgt-cover .jgt-gained { display:inline-block; margin-top:6px; font-family:var(--jh-fd); font-size:clamp(13px,1.5vw,22px); background:#00FF97; color:#04123f; border:2.5px solid #04123f; padding:2px 10px; box-shadow:2px 2px 0 rgba(0,0,0,.3); }
body.jpo-game #screen-reveal .jgt-cover .jgt-flip { text-align:center; margin-top:clamp(12px,1.6vw,20px); font-family:var(--jh-fd); font-size:clamp(15px,1.8vw,28px); letter-spacing:1px; color:#00FF97; }

/* ---------- ⑥ PODIUM COLLECTIF (over cover) ---------- */
body.jpo-game #screen-podium .jgt-cover .jgt-end,
body.jpo-game #screen-reveal .jgt-cover .jgt-end,
body.jpo-game #screen-over .jgt-cover .jgt-end { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(18px,3vw,50px); gap:clamp(10px,1.4vw,20px); }
body.jpo-game .jgt-cover .jgt-end-em { width:clamp(90px,10vw,150px); height:clamp(90px,10vw,150px); border:4px solid #fff; background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; transform:rotate(3deg); box-shadow:8px 8px 0 rgba(0,0,0,.4); }
body.jpo-game .jgt-cover .jgt-end-em img { width:78%; height:78%; }
body.jpo-game .jgt-cover .jgt-end-title { font-family:var(--jh-fd); font-size:clamp(36px,5.4vw,92px); line-height:.92; letter-spacing:1px; color:#fff; text-shadow:5px 5px 0 rgba(0,0,0,.4); }
body.jpo-game .jgt-cover .jgt-end-sub { font-size:clamp(13px,1.5vw,22px); font-weight:700; color:#fff; line-height:1.5; max-width:70%; }
body.jpo-game .jgt-cover .jgt-end-sub b { background:#00FF97; color:#04123f; padding:1px 6px; }
body.jpo-game .jgt-cover .jgt-final { width:min(680px,86%); display:flex; flex-direction:column; gap:clamp(8px,1vw,14px); margin-top:clamp(6px,1vw,12px); }
body.jpo-game .jgt-cover .jgt-fs-row { display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); border:4px solid #fff; padding:clamp(9px,1.2vw,16px) clamp(12px,1.6vw,22px); box-shadow:4px 4px 0 rgba(0,0,0,.35); }
body.jpo-game .jgt-cover .jgt-fs-row.r { background:var(--tr); color:#fff; }
body.jpo-game .jgt-cover .jgt-fs-row.b { background:var(--tb); color:#fff; }
body.jpo-game .jgt-cover .jgt-fs-row:not(.win) { opacity:.9; }
body.jpo-game .jgt-cover .jgt-fs-row .em { width:clamp(28px,3vw,46px); height:clamp(28px,3vw,46px); flex-shrink:0; }
body.jpo-game .jgt-cover .jgt-fs-row .em img { width:100%; height:100%; }
body.jpo-game .jgt-cover .jgt-fs-row .nm { font-family:var(--jh-fd); font-size:clamp(20px,2.6vw,40px); letter-spacing:1.5px; }
body.jpo-game .jgt-cover .jgt-fs-row .crown { font-size:clamp(18px,2vw,32px); }
body.jpo-game .jgt-cover .jgt-fs-row .sc { margin-left:auto; font-family:var(--jh-fd); font-size:clamp(24px,3vw,50px); }