/* ============================================================
   JPO EPITECH — skin des ÉCRANS DE JEU côté JOUEUR (vue téléphone).
   Habille /play pendant une partie JPO : GET-READY, TRANSITION,
   QUESTION (tuiles Kahoot), FEEDBACK (juste/raté), CLASSEMENT
   PROVISOIRE, RÉSULTAT FINAL.

   Cohérent avec jpo.css / jpo-game.css : néo-brutaliste, Anton +
   IBM Plex Mono, angles droits, bordures noires 3/4px, ombres
   dures/colorées, rotations légères, branding EPITECH + dot LIVE.

   ⚠ ABSOLUMENT 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 en pseudo :
   le fonctionnement (tap réponses, chrono, scroll) reste intact.
   Mobile-first (tout est déjà en 100% de large).
   ============================================================ */

/* ---------- variables event (namespacées) — CHARTE OFFICIELLE EPITECH ----------
   On remappe l'ancienne palette néo-brutaliste vers la charte JPO :
     ink   = bleu Epitech #013AFB (fond dominant + bordures/texte sur carte claire)
     paper = blanc #FFFFFF        (surfaces claires + texte sur bleu)
     yellow/green = vert fluo #00FF97  (REMPLISSAGE only, texte foncé dessus)
     cyan/red/orange = orange #FF5F3A  ·  magenta/violet = magenta #FF1EF7
   ⚠ vert fluo = JAMAIS de texte : fond/accent, texte bleu ou blanc dessus. */
body.jpo-game {
  --jpg-paper:#FFFFFF; --jpg-ink:#013AFB; --jpg-grey:#04123F; --jpg-grey2:#E8ECFF;
  --jpg-magenta:#FF1EF7; --jpg-yellow:#00FF97; --jpg-cyan:#FF5F3A; --jpg-green:#00FF97;
  --jpg-red:#FF5F3A; --jpg-orange:#FF5F3A; --jpg-violet:#FF1EF7; --jpg-blue:#013AFB;
  /* teinte d'encre sombre pour les barres/HUD (contraste sur fond bleu) */
  --jpg-nav:#041038;
  --jpg-fd:'Anton',sans-serif; --jpg-fm:'IBM Plex Sans','IBM Plex Mono',monospace;
}

/* ---------- animations event ---------- */
@keyframes jpgLive {
  0%   { box-shadow:0 0 0 0 rgba(255,82,82,.55); }
  70%  { box-shadow:0 0 0 9px rgba(255,82,82,0); }
  100% { box-shadow:0 0 0 0 rgba(255,82,82,0); }
}
@keyframes jpgPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@keyframes jpgFloatA { 0%,100%{ transform:translateY(0) rotate(-12deg); } 50%{ transform:translateY(-14px) rotate(-6deg); } }
@keyframes jpgFloatB { 0%,100%{ transform:translateY(0) rotate(11deg); } 50%{ transform:translateY(-16px) rotate(16deg); } }
@keyframes jpgCountPop { 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  body.jpo-game .jpg-live-dot,
  body.jpo-game #screen-get-ready .emoji,
  body.jpo-game #screen-transition .trans-count { animation:none !important; }
}

/* ============================================================
   1) GET-READY — body.jpo-game #screen-get-ready
   « PRÉPARE-TOI » + décompte plein écran magenta -> décor event.
   ============================================================ */
body.jpo-game #screen-get-ready .full {
  position:relative;
  overflow:hidden;
  /* l'inline style background:var(--magenta) est battu par !important */
  background-color:var(--jpg-magenta) !important;
  background-image:
    radial-gradient(rgba(10,10,10,.14) 1.7px, transparent 1.7px),
    repeating-linear-gradient(45deg, rgba(10,10,10,.07) 0 14px, transparent 14px 40px) !important;
  background-size:20px 20px, auto !important;
  font-family:var(--jpg-fm);
  font-weight:700;
  gap:22px;
}
/* formes brutalistes flottantes (décor, jamais dans le flux) */
body.jpo-game #screen-get-ready .full::after {
  content:'';
  position:absolute; z-index:0; pointer-events:none;
  width:120px; height:120px; top:12%; right:-38px;
  border:5px solid rgba(91,216,229,.55);
  animation:jpgFloatA 6s ease-in-out infinite;
}
/* branding EPITECH · LIVE, en tête du bloc centré */
body.jpo-game #screen-get-ready .full::before {
  content:'⬤ EPITECH · JPO LIVE';
  order:-1; position:relative; z-index:2;
  align-self:center;
  font-family:var(--jpg-fd);
  font-size:14px; letter-spacing:2px;
  color:var(--jpg-red);
  background:var(--jpg-ink);
  border:3px solid var(--jpg-paper);
  box-shadow:4px 4px 0 rgba(10,10,10,.4);
  padding:7px 13px 6px;
  transform:rotate(-2deg);
}
body.jpo-game #screen-get-ready .ttl {
  position:relative; z-index:2;
  color:var(--jpg-paper);
  text-shadow:5px 5px 0 var(--jpg-ink);
  letter-spacing:2px;
}
/* le grand décompte : gros chiffre dans un cartouche brutaliste qui pulse */
body.jpo-game #screen-get-ready .emoji {
  position:relative; z-index:2;
  width:auto; min-width:132px; height:132px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--jpg-fd);
  font-size:88px !important; line-height:1;
  color:var(--jpg-ink) !important;
  background:var(--jpg-yellow);
  border:5px solid var(--jpg-ink);
  box-shadow:8px 8px 0 var(--jpg-ink);
  padding:0 22px;
  transform:rotate(-2deg);
  animation:jpgPulse 1s ease-in-out infinite;
}

/* ============================================================
   2) TRANSITION — body.jpo-game #screen-transition
   Reveal du type de manche + 3·2·1·GO.
   ============================================================ */
body.jpo-game #screen-transition .trans {
  position:relative;
  overflow:hidden;
  background-color:var(--jpg-ink);
  background-image:
    radial-gradient(rgba(255,254,247,.08) 1.6px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(255,254,247,.05) 0 14px, transparent 14px 40px);
  background-size:20px 20px, auto;
  color:var(--jpg-paper);
  font-family:var(--jpg-fm);
}
/* formes flottantes en décor */
body.jpo-game #screen-transition .trans::after {
  content:'';
  position:absolute; z-index:0; pointer-events:none;
  width:110px; height:110px; bottom:22%; left:-34px;
  border:5px solid rgba(255,214,0,.4);
  animation:jpgFloatB 7s ease-in-out infinite;
}
body.jpo-game #screen-transition .trans > * { position:relative; z-index:1; }
/* branding EPITECH · LIVE en tête */
body.jpo-game #screen-transition .trans-rounds::before {
  content:'⬤ EPITECH · JPO LIVE';
  position:absolute; top:-2px; left:0;
  font-family:var(--jpg-fd); font-size:12px; letter-spacing:1.5px;
  color:var(--jpg-red);
}
body.jpo-game #screen-transition .trans-rounds {
  position:relative; padding-top:26px;
}
body.jpo-game #screen-transition .trans-seg {
  border:2.5px solid var(--jpg-paper);
}
body.jpo-game #screen-transition .trans-seg.done { background:var(--jpg-magenta); border-color:var(--jpg-magenta); }
/* chips meta (manche / tag) en style event */
body.jpo-game #screen-transition .trans-mini {
  font-family:var(--jpg-fd);
  background:var(--jpg-yellow); color:var(--jpg-ink);
  border:2.5px solid var(--jpg-ink);
  box-shadow:3px 3px 0 var(--jpg-magenta);
}
body.jpo-game #screen-transition .trans-mini:nth-child(2) {
  background:var(--jpg-cyan);
}
/* label du type de manche : grosse carte inclinée */
body.jpo-game #screen-transition .trans-label {
  background:var(--jpg-paper); color:var(--jpg-ink);
  border:5px solid var(--jpg-ink);
  box-shadow:8px 8px 0 var(--jpg-magenta);
  letter-spacing:2.5px;
}
body.jpo-game #screen-transition .trans-sub,
body.jpo-game #screen-transition .trans-dep { color:var(--jpg-paper); }
body.jpo-game #screen-transition .trans-tick { color:var(--jpg-cyan); opacity:.9; }
/* le décompte 3·2·1 : cartouche brutaliste qui pulse */
body.jpo-game #screen-transition .trans-count {
  background:var(--jpg-yellow); color:var(--jpg-ink);
  border:5px solid var(--jpg-ink);
  box-shadow:7px 7px 0 var(--jpg-ink);
  animation:jpgCountPop .4s ease-out;
}
body.jpo-game #screen-transition .trans-count.go {
  background:var(--jpg-green);
}

/* ============================================================
   3) QUESTION — body.jpo-game #screen-question
   HUD + type-pill + q-card + tuiles de réponse Kahoot.
   ============================================================ */
/* fond de l'écran de jeu : crème avec grille de points discrète
   -> les tuiles colorées ressortent. */
body.jpo-game .q-screen {
  background-color:var(--jpg-paper);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.5px, transparent 1.5px);
  background-size:18px 18px;
}

/* ---- HUD (barre du haut : quitter / manche / chrono / score) ---- */
body.jpo-game .ghdr {
  background:var(--jpg-ink);
  border-bottom:4px solid var(--jpg-magenta);
  color:var(--jpg-paper);
}
/* EPITECH à gauche (après le bouton quitter) + dot LIVE à droite */
body.jpo-game .ghdr .close { order:-1; background:var(--jpg-red); color:var(--jpg-paper); border-color:var(--jpg-paper); }
body.jpo-game .ghdr::before {
  content:'EPITECH';
  font-family:var(--jpg-fd); font-size:13px; letter-spacing:.5px; line-height:1;
  color:var(--jpg-ink); background:var(--jpg-paper);
  border:2.5px solid var(--jpg-paper);
  box-shadow:2px 2px 0 var(--jpg-magenta);
  padding:5px 8px 4px;
  display:inline-flex; align-items:center;
  flex:0 0 auto;
}
body.jpo-game .ghdr::after {
  content:''; order:9;
  width:10px; height:10px; border-radius:50%;
  background:var(--jpg-red);
  animation:jpgLive 1.1s infinite;
  flex:0 0 auto; margin-left:2px;
}
body.jpo-game .ghdr .manche { background:var(--jpg-cyan); color:var(--jpg-ink); border-color:var(--jpg-ink); }
body.jpo-game .ghdr .timer  { background:var(--jpg-yellow); color:var(--jpg-ink); border-color:var(--jpg-ink); }
body.jpo-game .ghdr .timer.warn { background:var(--jpg-red); color:var(--jpg-paper); }
body.jpo-game .ghdr .score  { background:var(--jpg-green); color:var(--jpg-ink); border-color:var(--jpg-ink); }

/* ---- pastille de type (QUIZ / VRAI-FAUX…) ---- */
body.jpo-game .type-pill .bd {
  background:var(--jpg-magenta); color:var(--jpg-paper);
  border:3px solid var(--jpg-ink);
}

/* ---- carte question ---- */
body.jpo-game .q-card .bd {
  background:var(--jpg-paper); color:var(--jpg-ink);
  border:4px solid var(--jpg-ink);
}
body.jpo-game .q-card .sh { background:var(--jpg-magenta); }

/* ---- indice / média ---- */
body.jpo-game .mob-media .hint-m {
  background:var(--jpg-cyan); border:3px solid var(--jpg-ink);
}

/* ---- TUILES DE RÉPONSE — les 4 grosses tuiles Kahoot à taper ----
   couleurs franches magenta / cyan / jaune / vert, lettres A/B/C/D.
   On force le cycle de 4 couleurs quel que soit le nb d'options. */
body.jpo-game .answer-zone.options-col .opt .bd,
body.jpo-game .answer-zone .opt .bd {
  border:4px solid var(--jpg-ink);
  padding:18px 14px;
}
body.jpo-game .answer-zone .opt .sh { background:var(--jpg-ink); }

body.jpo-game .answer-zone .opt:nth-child(4n+1) .bd { background:var(--jpg-magenta); color:var(--jpg-paper); }
body.jpo-game .answer-zone .opt:nth-child(4n+2) .bd { background:var(--jpg-cyan);    color:var(--jpg-ink); }
body.jpo-game .answer-zone .opt:nth-child(4n+3) .bd { background:var(--jpg-yellow);  color:var(--jpg-ink); }
body.jpo-game .answer-zone .opt:nth-child(4n+4) .bd { background:var(--jpg-green);   color:var(--jpg-ink); }

/* boîte-lettre A/B/C/D : contrastée, brutaliste */
body.jpo-game .answer-zone .opt .letter-wrap .lbox {
  background:var(--jpg-ink); color:var(--jpg-paper);
  border:2px solid var(--jpg-ink);
  font-family:var(--jpg-fd);
}
body.jpo-game .answer-zone .opt:nth-child(4n+1) .letter-wrap .lbox { background:var(--jpg-paper); color:var(--jpg-magenta); }
body.jpo-game .answer-zone .opt .letter-wrap .lsh { background:var(--jpg-ink); }
body.jpo-game .answer-zone .opt .text { font-family:var(--jpg-fd); }

/* état sélectionné / correct / raté : on garde le tampon ✓/✕ de base,
   on renforce juste la lisibilité event. */
body.jpo-game .answer-zone .opt.selected .bd { border-width:4px; outline:3px solid var(--jpg-ink); outline-offset:-9px; }
body.jpo-game .answer-zone .opt .ocheck { border:3px solid var(--jpg-ink); box-shadow:2px 2px 0 var(--jpg-ink); }
body.jpo-game .answer-zone .opt.correct .ocheck { background:var(--jpg-green); color:var(--jpg-ink); }
body.jpo-game .answer-zone .opt.wrong .ocheck { background:var(--jpg-red); color:var(--jpg-paper); }

/* pied "qui a répondu" */
body.jpo-game .gh-foot { border-top:3px solid var(--jpg-ink); background:var(--jpg-paper); }
body.jpo-game .gh-foot .gf-dot { background:var(--jpg-green); border:2px solid var(--jpg-ink); }

/* ============================================================
   4) FEEDBACK — body.jpo-game #screen-feedback
   État perso JUSTE (vert ✓) / RATÉ (rouge ✕) + points + série.
   ============================================================ */
body.jpo-game .fb.ok { background:var(--jpg-green); }
body.jpo-game .fb.ko { background:var(--jpg-red); }

/* branding EPITECH · LIVE dans le bandeau meta */
body.jpo-game .fb .top-meta { align-items:center; }
body.jpo-game .fb .top-meta::before {
  content:'⬤ EPITECH · JPO LIVE';
  font-family:var(--jpg-fd); font-size:11px; letter-spacing:1.5px;
  color:var(--jpg-ink);
  background:var(--jpg-paper);
  border:2.5px solid var(--jpg-ink);
  box-shadow:2px 2px 0 var(--jpg-ink);
  padding:5px 9px 4px;
  transform:rotate(-2deg);
  flex:0 0 auto;
}
body.jpo-game .fb.ko .top-meta::before { color:var(--jpg-ink); }
/* chip "Q x / y" */
body.jpo-game .fb .br-mini .body {
  background:var(--jpg-ink); color:var(--jpg-yellow);
  border:3px solid var(--jpg-ink);
}
/* titre JUSTE / RATÉ (déjà stylé fort dans brutal, on garde) */
/* carte des points : ombre colorée event */
body.jpo-game .fb .delta-row .br-cream .body {
  background:var(--jpg-paper);
  border:4px solid var(--jpg-ink);
  box-shadow:6px 6px 0 var(--jpg-ink);
}
body.jpo-game .fb.ok .delta-row .val { color:var(--jpg-ink); }
body.jpo-game .fb .answer-block .ans { font-family:var(--jpg-fd); }

/* ============================================================
   5) CLASSEMENT PROVISOIRE — body.jpo-game #screen-leaderboard
   Ma position mise en avant, ambiance JPO.
   ============================================================ */
body.jpo-game .lb-screen {
  background-color:var(--jpg-paper);
  background-image:radial-gradient(rgba(10,10,10,.06) 1.5px, transparent 1.5px);
  background-size:18px 18px;
}
/* bandeau du haut : sombre, branding EPITECH + dot LIVE */
body.jpo-game .lb-top {
  background:var(--jpg-ink);
  border-bottom:4px solid var(--jpg-magenta);
}
/* on remplace le wordmark "HOMIES" par EPITECH */
body.jpo-game .lb-brand { font-size:0; letter-spacing:0; }
body.jpo-game .lb-brand::before {
  content:'EPITECH';
  font-family:var(--jpg-fd); font-size:20px; letter-spacing:.5px;
  color:var(--jpg-ink); background:var(--jpg-paper);
  border:3px solid var(--jpg-paper);
  box-shadow:3px 3px 0 var(--jpg-magenta);
  padding:5px 9px 4px;
  display:inline-block;
  transform:rotate(-2deg);
}
body.jpo-game .lb-top .mute-btn {
  background:var(--jpg-paper); color:var(--jpg-ink);
  border:2.5px solid var(--jpg-paper);
}
body.jpo-game .lb-top .mute-btn.quit { background:var(--jpg-red); color:var(--jpg-paper); }
body.jpo-game .lb-manche {
  font-family:var(--jpg-fd);
  background:var(--jpg-yellow); color:var(--jpg-ink);
  border:3px solid var(--jpg-paper);
  box-shadow:3px 3px 0 var(--jpg-magenta);
}
/* dot LIVE dans le coin droit du bandeau */
body.jpo-game .lb-top-right::before {
  content:''; align-self:center;
  width:10px; height:10px; border-radius:50%;
  background:var(--jpg-red);
  animation:jpgLive 1.1s infinite;
  flex:0 0 auto;
}

/* titre "CLASSEMENT" */
body.jpo-game .lb-title .body { background:var(--jpg-yellow); color:var(--jpg-ink); border:4px solid var(--jpg-ink); }
body.jpo-game .lb-title { transform:rotate(-2deg); }

/* lignes du classement */
body.jpo-game .lb-row .sh { background:var(--jpg-ink); }
body.jpo-game .lb-row .bd { border:3px solid var(--jpg-ink); background:var(--jpg-paper); }
body.jpo-game .lb-row.row-1st .bd { background:var(--jpg-yellow); }
body.jpo-game .lb-rank { font-family:var(--jpg-fd); border:2px solid var(--jpg-ink); }
body.jpo-game .lb-row.row-1st .lb-rank { background:var(--jpg-yellow); color:var(--jpg-ink); }
body.jpo-game .lb-nm { font-family:var(--jpg-fd); }
body.jpo-game .lb-total { font-family:var(--jpg-fd); }

/* MA LIGNE mise en avant : magenta franc + ombre colorée + léger scale */
body.jpo-game .lb-row.row-me .bd {
  background:#FFE3F2;
  border:4px solid var(--jpg-magenta);
  box-shadow:5px 5px 0 var(--jpg-magenta);
}
body.jpo-game .lb-row.row-me { transform:scale(1.02); z-index:2; }
body.jpo-game .lb-row.row-me .lb-rank { background:var(--jpg-magenta); color:var(--jpg-paper); border-color:var(--jpg-ink); }

/* pied "en attente de l'hôte" */
body.jpo-game .lb-bottom { border-top:3px solid var(--jpg-ink); }
body.jpo-game .plb-wait {
  font-family:var(--jpg-fd);
  border:3px solid var(--jpg-ink);
  box-shadow:4px 4px 0 var(--jpg-magenta);
}
body.jpo-game .plb-dots span { background:var(--jpg-green); border:2px solid var(--jpg-ink); }

/* ============================================================
   6) RÉSULTAT FINAL — body.jpo-game #screen-over
   Mon rang final + score, badge JPO.
   ============================================================ */
body.jpo-game .res-screen {
  background-color:var(--jpg-paper);
  background-image:radial-gradient(rgba(10,10,10,.06) 1.5px, transparent 1.5px);
  background-size:18px 18px;
}
/* héros : bandeau jaune + badge EPITECH · JPO en tête */
body.jpo-game .res-hero {
  background:var(--jpg-yellow);
  border-bottom:4px solid var(--jpg-ink);
}
body.jpo-game .res-hero::before {
  content:'⬤ EPITECH · JPO 2026';
  display:inline-block;
  font-family:var(--jpg-fd); font-size:12px; letter-spacing:1.5px;
  color:var(--jpg-red);
  background:var(--jpg-ink);
  border:3px solid var(--jpg-ink);
  box-shadow:3px 3px 0 var(--jpg-magenta);
  padding:5px 11px 4px;
  transform:rotate(-2deg);
  margin-bottom:8px;
}
body.jpo-game .res-ggt { font-family:var(--jpg-fd); text-shadow:3px 3px 0 var(--jpg-magenta); }

/* podium */
body.jpo-game .podium .pod .bd { border:4px solid var(--jpg-ink); }
body.jpo-game .podium .pod .sh { background:var(--jpg-ink); }
body.jpo-game .podium .pod.gold .bd { background:var(--jpg-yellow); }
body.jpo-game .podium .pod.silver .bd { background:var(--jpg-grey2); }
body.jpo-game .podium .pod.bronze .bd { background:var(--jpg-orange); }
body.jpo-game .podium .pod .rk-num { font-family:var(--jpg-fd); }
body.jpo-game .podium .pod .psc { font-family:var(--jpg-fd); border:2.5px solid var(--jpg-ink); }

/* carte "TON RÉSULTAT" -> lue comme un BADGE JPO (sombre + accents) */
body.jpo-game .rewards-card .rc-bd {
  background:var(--jpg-ink); color:var(--jpg-paper);
  border:4px solid var(--jpg-ink);
  box-shadow:7px 7px 0 var(--jpg-magenta);
}
body.jpo-game .rewards-card .rc-ttl { color:var(--jpg-yellow); opacity:1; }
body.jpo-game .rewards-card .rc-pos { font-family:var(--jpg-fd); color:var(--jpg-paper); }
body.jpo-game .rewards-card .rc-msg { color:rgba(255,254,247,.85); }

/* classement complet */
body.jpo-game .res-list-title { font-family:var(--jpg-fd); }
body.jpo-game .player-result .sh { background:var(--jpg-ink); }
body.jpo-game .player-result .bd { border:3px solid var(--jpg-ink); background:var(--jpg-paper); }
body.jpo-game .player-result .rk,
body.jpo-game .player-result .nm,
body.jpo-game .player-result .sc { font-family:var(--jpg-fd); }
/* MA ligne mise en avant */
body.jpo-game .player-result.me .bd {
  background:#FFE3F2;
  border:4px solid var(--jpg-magenta);
  box-shadow:4px 4px 0 var(--jpg-magenta);
}

/* pied : boutons partager / retour */
body.jpo-game .res-foot { border-top:4px solid var(--jpg-ink); }
body.jpo-game .res-foot .btn.cyan { background:var(--jpg-cyan); color:var(--jpg-ink); border:4px solid var(--jpg-ink); box-shadow:5px 5px 0 var(--jpg-ink); }
body.jpo-game .res-foot .btn.yellow { background:var(--jpg-yellow); color:var(--jpg-ink); border:4px solid var(--jpg-ink); box-shadow:5px 5px 0 var(--jpg-ink); }

/* ============================================================
   Responsive : mobile-first, tout est déjà 100% de large.
   Sur grand écran on garde juste les tuiles bien grosses.
   (voir responsive.css pour le layout web/tablette global)
   ============================================================ */

/* ============================================================
   JPO EPITECH — ÉCRANS RÉSULTAT PERSO (⑤) & FIN + BADGE (⑦)
   Markup injecté par public/js/play/12_jpo.js quand body.jpo-game.
   Layout = maquettes validées (format-classique.html).
   Charte OFFICIELLE Epitech : fond bleu #013afb dominant, texte
   blanc, accents vert #00ff97 / orange #ff5f3a / magenta #ff1ef7.
   ⚠ VERT #00ff97 = FLUO → JAMAIS pour du texte : fond/accent seul,
   avec texte foncé (#013afb) ou blanc dessus.
   Typo : Anton (gros titres) + IBM Plex Sans (corps).
   TOUT est scopé sous body.jpo-game #screen-feedback / #screen-over.
   ============================================================ */
body.jpo-game #screen-feedback,
body.jpo-game #screen-over {
  --epi-blue:#013afb; --epi-white:#ffffff; --epi-green:#00ff97;
  --epi-orange:#ff5f3a; --epi-magenta:#ff1ef7; --epi-ink:#0A0A0A;
  --epi-fd:'Anton',sans-serif; --epi-fs:'IBM Plex Sans','IBM Plex Mono',sans-serif;
}

/* signature Epitech : "_" accentué après les gros titres */
body.jpo-game #screen-feedback .epi-us,
body.jpo-game #screen-over .epi-us { color:var(--epi-magenta); margin-left:2px; }

/* dot LIVE (rouge -> ici accent orange pour rester lisible sur bleu) */
body.jpo-game #screen-feedback .live-dot {
  width:9px; height:9px; border-radius:50%; display:inline-block;
  background:var(--epi-orange); animation:jpgLive 1.1s infinite;
}

/* ══════════ ⑤ TON RÉSULTAT (#screen-feedback) ══════════ */
body.jpo-game #screen-feedback { padding:0; }
body.jpo-game #screen-feedback .res {
  flex:1; display:flex; flex-direction:column; min-height:0;
  background:var(--epi-blue); color:var(--epi-white);
  position:relative; overflow:hidden; font-family:var(--epi-fs);
}
/* décor Epitech : traits diagonaux blancs discrets */
body.jpo-game #screen-feedback .res .stripes {
  position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:repeating-linear-gradient(-45deg,#fff 0 14px,transparent 14px 42px);
}
/* carrés blancs/bleus 50% en fond (motif Epitech) */
body.jpo-game #screen-feedback .res::before {
  content:''; position:absolute; top:-30px; right:-30px; width:150px; height:150px;
  background:rgba(255,255,255,.10); transform:rotate(18deg); pointer-events:none;
}
body.jpo-game #screen-feedback .res-in {
  position:relative; z-index:2; flex:1; overflow-y:auto;
  padding:26px 18px 18px; text-align:center; display:flex; flex-direction:column;
}
body.jpo-game #screen-feedback .res-stamp {
  display:inline-block; font-family:var(--epi-fd); font-size:11px; letter-spacing:2px;
  background:var(--epi-white); color:var(--epi-blue); border:3px solid var(--epi-ink);
  padding:5px 12px; transform:rotate(-3deg); margin:0 auto 16px;
}
body.jpo-game #screen-feedback .res-em {
  width:96px; height:96px; margin:0 auto 12px; border:4px solid var(--epi-ink);
  background:var(--epi-white); display:flex; align-items:center; justify-content:center;
  transform:rotate(4deg); box-shadow:7px 7px 0 var(--epi-ink);
}
body.jpo-game #screen-feedback .res-em img { width:72px; height:72px; }
/* verdict = bloc accent (jamais de texte vert : sur bloc vert, texte bleu) */
body.jpo-game #screen-feedback .res-verdict {
  display:inline-block; align-self:center; font-family:var(--epi-fd);
  font-size:34px; line-height:.95; letter-spacing:1px; padding:8px 16px;
  border:4px solid var(--epi-ink); box-shadow:6px 6px 0 var(--epi-ink); margin-top:2px;
}
body.jpo-game #screen-feedback .res.ok .res-verdict { background:var(--epi-green); color:var(--epi-blue); }
body.jpo-game #screen-feedback .res.ko .res-verdict { background:var(--epi-orange); color:var(--epi-white); }
body.jpo-game #screen-feedback .res.neutral .res-verdict { background:var(--epi-magenta); color:var(--epi-white); }
body.jpo-game #screen-feedback .res-verdict .epi-us { color:inherit; opacity:.55; }
body.jpo-game #screen-feedback .res-plus {
  font-family:var(--epi-fd); font-size:60px; line-height:.85; letter-spacing:1px;
  color:var(--epi-white); text-shadow:5px 5px 0 var(--epi-ink); margin:14px 0 2px;
}
/* carte "ta position grimpe" */
body.jpo-game #screen-feedback .move-card {
  margin:18px 0 0; border:4px solid var(--epi-ink); background:var(--epi-white);
  color:var(--epi-ink); padding:12px 13px; box-shadow:6px 6px 0 var(--epi-ink);
}
body.jpo-game #screen-feedback .move-card .mt {
  font-family:var(--epi-fd); font-size:12px; letter-spacing:1px; margin-bottom:11px;
  display:flex; align-items:center; justify-content:center; gap:7px; color:var(--epi-blue);
}
body.jpo-game #screen-feedback .move-card .mt .em { width:18px; height:18px; display:inline-flex; }
body.jpo-game #screen-feedback .move-card .mt .em img { width:100%; height:100%; }
body.jpo-game #screen-feedback .move-row { display:flex; align-items:center; justify-content:center; gap:12px; }
body.jpo-game #screen-feedback .rank-chip { text-align:center; }
body.jpo-game #screen-feedback .rank-chip .r {
  font-family:var(--epi-fd); font-size:34px; line-height:.9; border:4px solid var(--epi-ink);
  padding:6px 12px; box-shadow:4px 4px 0 var(--epi-ink);
}
body.jpo-game #screen-feedback .rank-chip.old .r { background:#dfe4ff; color:rgba(1,58,251,.55); }
body.jpo-game #screen-feedback .rank-chip.new .r { background:var(--epi-green); color:var(--epi-blue); }
body.jpo-game #screen-feedback .rank-chip .c { font-size:8.5px; font-weight:700; letter-spacing:.5px; margin-top:5px; color:rgba(1,58,251,.65); }
body.jpo-game #screen-feedback .move-arrow { font-family:var(--epi-fd); font-size:32px; color:var(--epi-magenta); text-shadow:2px 2px 0 var(--epi-ink); }
/* série */
body.jpo-game #screen-feedback .streak {
  margin:16px auto 0; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--epi-fd); font-size:14px; letter-spacing:1px; align-self:center;
  background:var(--epi-magenta); color:var(--epi-white); border:3px solid var(--epi-ink);
  padding:7px 13px; box-shadow:4px 4px 0 var(--epi-ink); transform:rotate(-1deg);
}
body.jpo-game #screen-feedback .streak .em { width:22px; height:22px; }
body.jpo-game #screen-feedback .streak .em img { width:100%; height:100%; }
body.jpo-game #screen-feedback .res-foot {
  padding:12px 16px 16px; border-top:4px solid var(--epi-ink);
  background:rgba(255,255,255,.08); flex-shrink:0; position:relative; z-index:2;
}
body.jpo-game #screen-feedback .res-wait {
  text-align:center; font-family:var(--epi-fd); font-size:12px; letter-spacing:1px;
  color:var(--epi-white); display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ══════════ ⑦ FIN + BADGE (#screen-over) ══════════ */
body.jpo-game #screen-over { padding:0; }
body.jpo-game #screen-over .end {
  flex:1; position:relative; display:flex; flex-direction:column; min-height:0;
  background:var(--epi-blue); color:var(--epi-white); overflow:hidden; font-family:var(--epi-fs);
}
/* confettis Epitech : carrés blancs / verts / magenta / orange */
body.jpo-game #screen-over .end .confetti {
  position:absolute; inset:0; pointer-events:none; opacity:.32;
  background-image:
    radial-gradient(circle,var(--epi-white) 3px,transparent 4px),
    radial-gradient(circle,var(--epi-green) 3px,transparent 4px),
    radial-gradient(circle,var(--epi-magenta) 3px,transparent 4px),
    radial-gradient(circle,var(--epi-orange) 3px,transparent 4px);
  background-size:70px 70px,90px 90px,60px 60px,110px 110px;
  background-position:0 0,30px 40px,50px 10px,10px 60px;
}
body.jpo-game #screen-over .end-inner {
  position:relative; z-index:2; flex:1; overflow-y:auto; padding:22px 16px 18px; text-align:center;
}
body.jpo-game #screen-over .end-stamp {
  display:inline-block; font-family:var(--epi-fd); font-size:12px; letter-spacing:2px;
  background:var(--epi-white); color:var(--epi-blue); border:3px solid var(--epi-ink);
  padding:6px 13px; transform:rotate(-3deg); margin-bottom:12px; box-shadow:4px 4px 0 var(--epi-ink);
}
body.jpo-game #screen-over .end-emoji {
  width:108px; height:108px; margin:2px auto 8px; border:4px solid var(--epi-ink);
  background:var(--epi-white); display:flex; align-items:center; justify-content:center;
  transform:rotate(4deg); box-shadow:8px 8px 0 var(--epi-ink);
}
body.jpo-game #screen-over .end-emoji img { width:84px; height:84px; }
body.jpo-game #screen-over .end-title {
  font-family:var(--epi-fd); font-size:42px; line-height:.88; letter-spacing:1px;
  color:var(--epi-white); text-shadow:4px 4px 0 var(--epi-ink);
}
body.jpo-game #screen-over .end-title .epi-us { color:var(--epi-magenta); }
body.jpo-game #screen-over .end-sub { font-size:12px; font-weight:600; margin-top:10px; color:var(--epi-white); line-height:1.5; }
/* highlight = accent vert avec texte bleu (jamais texte vert) */
body.jpo-game #screen-over .end-sub b { background:var(--epi-green); color:var(--epi-blue); padding:1px 6px; border:2px solid var(--epi-ink); font-weight:700; }

/* podium final */
body.jpo-game #screen-over .final-pod { position:relative; margin:18px 4px 0; }
body.jpo-game #screen-over .final-pod::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--epi-ink); }
body.jpo-game #screen-over .final-pod .body { position:relative; border:4px solid var(--epi-ink); background:var(--epi-white); padding:13px 12px; }
body.jpo-game #screen-over .fp-row {
  display:flex; align-items:center; gap:10px; border:3px solid var(--epi-ink);
  padding:8px 10px; box-shadow:3px 3px 0 var(--epi-ink); margin-bottom:9px; color:var(--epi-ink);
}
body.jpo-game #screen-over .fp-row:last-child { margin-bottom:0; }
body.jpo-game #screen-over .fp-row.p1 { background:var(--epi-green); color:var(--epi-blue); }
body.jpo-game #screen-over .fp-row.p2 { background:var(--epi-magenta); color:var(--epi-white); }
body.jpo-game #screen-over .fp-row.p3 { background:var(--epi-orange); color:var(--epi-white); }
body.jpo-game #screen-over .fp-row.me { outline:3px solid var(--epi-blue); outline-offset:2px; }
body.jpo-game #screen-over .fp-row .fp-av { flex-shrink:0; width:34px; height:34px; display:block; border:2.5px solid var(--epi-ink); background:var(--epi-white); overflow:hidden; }
body.jpo-game #screen-over .fp-row .fp-av .ava-emo,
body.jpo-game #screen-over .fp-row .fp-av img { width:34px; height:34px; display:block; }
body.jpo-game #screen-over .fp-row .pos { font-family:var(--epi-fd); font-size:20px; width:22px; flex-shrink:0; }
body.jpo-game #screen-over .fp-row .nm { font-family:var(--epi-fd); font-size:16px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.jpo-game #screen-over .fp-row .crown { font-size:16px; }
body.jpo-game #screen-over .fp-row .sc { margin-left:auto; font-family:var(--epi-fd); font-size:19px; }

/* carte badge JPO (à montrer au stand) */
body.jpo-game #screen-over .badge-card { position:relative; margin:18px 4px 0; text-align:left; }
body.jpo-game #screen-over .badge-card::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--epi-green); }
body.jpo-game #screen-over .badge-card .body { position:relative; border:4px solid var(--epi-white); background:var(--epi-ink); color:var(--epi-white); padding:15px 14px; display:flex; gap:13px; align-items:center; }
body.jpo-game #screen-over .badge-card .be { width:58px; height:58px; flex-shrink:0; border:3px solid var(--epi-green); display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); }
body.jpo-game #screen-over .badge-card .be img { width:46px; height:46px; }
body.jpo-game #screen-over .badge-card .bt { font-family:var(--epi-fd); font-size:15px; letter-spacing:.5px; color:var(--epi-white); line-height:1.05; }
body.jpo-game #screen-over .badge-card .bd { font-size:10.5px; font-weight:600; color:rgba(255,255,255,.82); margin-top:5px; line-height:1.45; }

/* pied de fin : CTA */
body.jpo-game #screen-over .end-foot {
  padding:12px 16px 16px; border-top:4px solid var(--epi-ink);
  background:rgba(255,255,255,.08); flex-shrink:0; position:relative; z-index:2;
}
body.jpo-game #screen-over .end-foot .cta { position:relative; display:block; text-decoration:none; cursor:pointer; }
body.jpo-game #screen-over .end-foot .cta::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--epi-ink); }
body.jpo-game #screen-over .end-foot .cta .body {
  position:relative; border:4px solid var(--epi-ink); background:var(--epi-green); color:var(--epi-blue);
  padding:15px; font-family:var(--epi-fd); font-size:18px; letter-spacing:2px; text-align:center;
}
body.jpo-game #screen-over .end-foot .cta.ghost { margin-top:10px; }
body.jpo-game #screen-over .end-foot .cta.ghost .body { background:var(--epi-white); color:var(--epi-blue); font-size:14px; }

/* ============================================================
   💣 LA BOMBE (JOUEUR) — habillage FIDÈLE au prototype
   design-prototypes/p2-jpo/format-bombe.html (états 3 / 5 / 6).
   ⚠ PALETTE DU PROTOTYPE (PAS la charte bleue) — scopée body.jbombe
   pour ne rien faire fuiter dans les autres modes JPO. On habille le
   rendu moteur EXISTANT (#screen-question.jbomb*, #fmtHud.bomb,
   .bombe-wait, .bomb-flash, #screen-eliminated) + on injecte le
   feedback ⑤ (#screen-feedback .jbf) et la fin ⑥ (#screen-over .jbfin).
   ============================================================ */
body.jpo-game.jbombe {
  --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;
  --bp-fd:'Anton',sans-serif; --bp-fm:'IBM Plex Mono','IBM Plex Sans',monospace;
}
@keyframes jbBurn   { to { background-position:32px 0; } }
@keyframes jbBoom   { 0%{ transform:scale(.7) rotate(-4deg);} 60%{ transform:scale(1.12) rotate(4deg);} 100%{ transform:scale(1) rotate(0);} }
@keyframes jbPulse  { 0%,100%{ transform:rotate(-1deg) scale(1); } 50%{ transform:rotate(-1deg) scale(1.04); } }
@keyframes jbJitter { 0%{ transform:translateY(0) rotate(-4deg);} 100%{ transform:translateY(-2px) rotate(4deg);} }

/* fond de l'écran question = papier pointillé du prototype */
body.jpo-game.jbombe #screen-question.jbomb .q-screen {
  background-color:var(--bp-gris);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
/* HUD (barre du haut) : ink + manche rouge */
body.jpo-game.jbombe #screen-question.jbomb .ghdr { background:var(--bp-ink); border-bottom:4px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .ghdr::before { color:var(--bp-ink); background:var(--bp-paper); border-color:var(--bp-paper); box-shadow:2px 2px 0 var(--bp-magenta); }
body.jpo-game.jbombe #screen-question.jbomb .ghdr .manche { background:var(--bp-rouge); color:#fff; border-color:var(--bp-paper); }
body.jpo-game.jbombe #screen-question.jbomb .ghdr .timer { background:var(--bp-jaune); color:var(--bp-ink); border-color:var(--bp-paper); }
body.jpo-game.jbombe #screen-question.jbomb .ghdr .timer.warn { background:var(--bp-rouge); color:#fff; }
body.jpo-game.jbombe #screen-question.jbomb .ghdr .score { background:var(--bp-vert); color:var(--bp-ink); border-color:var(--bp-paper); }

/* pastille de type + question */
body.jpo-game.jbombe #screen-question.jbomb .type-pill .bd { background:var(--bp-rouge); color:#fff; border:3px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .type-pill .sh { background:var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .q-card .bd { background:var(--bp-paper); color:var(--bp-ink); border:4px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .q-card .sh { background:var(--bp-cyan); }

/* tag pulsant « LA BOMBE EST CHEZ TOI ! » (état 3, porteur) */
body.jpo-game.jbombe #screen-question .jbomb-cry {
  margin:8px 14px 2px; display:inline-flex; flex-direction:column; align-items:center; gap:3px; align-self:flex-start;
  text-align:center; font-family:var(--bp-fd);
  background:var(--bp-rouge); color:var(--bp-paper);
  border:3px solid var(--bp-ink); box-shadow:3px 3px 0 var(--bp-ink);
  padding:8px 14px; transform:rotate(-1deg); animation:jbPulse 1s ease-in-out infinite;
}
body.jpo-game.jbombe #screen-question .jbomb-cry .jbc-em { width:22px; height:22px; display:inline-flex; }
body.jpo-game.jbombe #screen-question .jbomb-cry .jbc-em img { width:100%; height:100%; }
body.jpo-game.jbombe #screen-question .jbomb-cry .jbc-big { font-size:18px; letter-spacing:1.5px; line-height:1; }
body.jpo-game.jbombe #screen-question .jbomb-cry .jbc-sub { font-family:var(--bp-fm); font-weight:700; font-size:10px; letter-spacing:1px; }

/* HUD bombe : mèche qui brûle (barre pleine largeur) + rangée survivants */
body.jpo-game.jbombe #fmtHud.bomb { flex-direction:column; align-items:stretch; gap:9px; margin:6px 14px 13px; }
body.jpo-game.jbombe #fmtHud.bomb .bomb-fuse {
  position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:repeating-linear-gradient(45deg,var(--bp-rouge) 0 7px,var(--bp-orange) 7px 12px);
  background-size:32px 32px; animation:jbBurn .5s linear infinite;
  border:3px solid var(--bp-ink); color:var(--bp-paper);
  font-family:var(--bp-fd); padding:9px 12px; box-shadow:3px 3px 0 var(--bp-ink);
}
body.jpo-game.jbombe #fmtHud.bomb .bomb-fuse .noto { width:22px; height:22px; }
body.jpo-game.jbombe #fmtHud.bomb .bomb-fuse b { font-size:24px; min-width:22px; }
body.jpo-game.jbombe #fmtHud.bomb .fmt-grid { justify-content:center; gap:9px; flex-wrap:wrap; }
body.jpo-game.jbombe #fmtHud.bomb .fmt-sav {
  width:42px; height:42px; border:3px solid var(--bp-ink);
  background:var(--bp-paper); box-shadow:2px 2px 0 var(--bp-ink); overflow:visible;
}
body.jpo-game.jbombe #fmtHud.bomb .fmt-sav.holder {
  outline:none; border-color:var(--bp-ink);
  box-shadow:0 0 0 3px var(--bp-jaune), 2px 2px 0 var(--bp-ink); transform:scale(1.08);
}
body.jpo-game.jbombe #fmtHud.bomb .fmt-sav.me { border-color:var(--bp-magenta); box-shadow:0 0 0 2px var(--bp-paper), 2px 2px 0 var(--bp-ink); }
body.jpo-game.jbombe #fmtHud.bomb .fmt-sav.dead { filter:grayscale(1) opacity(.42); }
body.jpo-game.jbombe #fmtHud.bomb .fmt-sav .bomb-lives {
  background:var(--bp-paper); border:2px solid var(--bp-ink);
  color:var(--bp-rouge); font-family:var(--bp-fd); font-size:9px; padding:1px 4px;
}

/* 4 tuiles Kahoot — palette EXACTE du prototype (magenta/cyan/jaune/vert) */
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt .bd { border:3px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt .sh { background:var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt:nth-child(4n+1) .bd { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt:nth-child(4n+2) .bd { background:var(--bp-cyan);    color:var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt:nth-child(4n+3) .bd { background:var(--bp-jaune);   color:var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt:nth-child(4n+4) .bd { background:var(--bp-vert);    color:var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt .letter-wrap .lbox { background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt:nth-child(4n+1) .letter-wrap .lbox { color:var(--bp-magenta); }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt.correct .bd { background:var(--bp-vert) !important; color:var(--bp-ink) !important; }
body.jpo-game.jbombe #screen-question.jbomb .answer-zone .opt.wrong .bd { background:var(--bp-rouge) !important; color:var(--bp-paper) !important; }

/* carte « AU TOUR DE X » (spectateur du tour) */
body.jpo-game.jbombe .bombe-wait .sh { background:var(--bp-magenta); }
body.jpo-game.jbombe .bombe-wait .bd {
  background:var(--bp-jaune); color:var(--bp-ink);
  border:4px solid var(--bp-ink); font-family:var(--bp-fd); letter-spacing:.5px;
}
body.jpo-game.jbombe .bombe-wait .bd b { color:var(--bp-magenta); }

/* 💥 explosion plein écran (flash + emoji) */
body.jpo-game.jbombe .bomb-flash { background:rgba(255,159,69,.30); }
body.jpo-game.jbombe .bomb-flash.me { background:rgba(255,46,147,.44); }
body.jpo-game.jbombe .bomb-flash .noto { animation:jbBoom .6s ease-out; }

/* écran ÉLIMINÉ — « TU AS EXPLOSÉ » (spectateur grisé) */
body.jpo-game.jbombe #screen-eliminated .elim-screen {
  background-color:var(--bp-rouge);
  background-image:
    radial-gradient(rgba(10,10,10,.12) 1.6px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(10,10,10,.06) 0 14px, transparent 14px 40px);
  background-size:20px 20px, auto;
  color:var(--bp-paper);
}
body.jpo-game.jbombe #screen-eliminated .elim-emoji { filter:grayscale(.4) drop-shadow(4px 4px 0 rgba(10,10,10,.5)); }
body.jpo-game.jbombe #screen-eliminated .elim-title .body {
  background:var(--bp-ink); color:var(--bp-jaune);
  border:5px solid var(--bp-paper); font-family:var(--bp-fd);
}
body.jpo-game.jbombe #screen-eliminated .elim-title .sh { background:var(--bp-ink); }
body.jpo-game.jbombe #screen-eliminated .elim-sub { color:var(--bp-paper); font-family:var(--bp-fd); letter-spacing:1px; }
body.jpo-game.jbombe #screen-eliminated .elim-rank .br-cream .body {
  background:var(--bp-paper); color:var(--bp-ink);
  border:3px solid var(--bp-ink); font-family:var(--bp-fd);
}
body.jpo-game.jbombe #screen-eliminated .elim-rank .br-cream .body b { color:var(--bp-magenta); }
body.jpo-game.jbombe #screen-eliminated .elim-watch { color:rgba(255,254,247,.85); font-weight:700; }

/* ══════════ ⑤ TON ÉTAT (feedback bombe · #screen-feedback .jbf) ══════════ */
body.jpo-game.jbombe #screen-feedback { padding:0; }
body.jpo-game.jbombe #screen-feedback .jbf {
  flex:1; display:flex; flex-direction:column; min-height:0; position:relative; overflow:hidden;
  background:var(--bp-paper); color:var(--bp-ink); font-family:var(--bp-fm);
}
body.jpo-game.jbombe #screen-feedback .jbf-confetti {
  position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:
    radial-gradient(circle,var(--bp-magenta) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-cyan) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-jaune) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-vert) 3px,transparent 4px);
  background-size:70px 70px,90px 90px,60px 60px,110px 110px;
  background-position:0 0,30px 40px,50px 10px,10px 60px;
}
body.jpo-game.jbombe #screen-feedback .jbf-in { position:relative; z-index:2; flex:1; overflow-y:auto; padding:26px 20px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; }
body.jpo-game.jbombe #screen-feedback .jbf-stamp { display:inline-block; font-family:var(--bp-fd); font-size:12px; letter-spacing:2px; background:var(--bp-ink); color:var(--bp-jaune); border:3px solid var(--bp-ink); padding:6px 13px; transform:rotate(-3deg); margin-bottom:18px; }
body.jpo-game.jbombe #screen-feedback .jbf-emoji { width:118px; height:118px; border:4px solid var(--bp-ink); background:var(--bp-paper); display:flex; align-items:center; justify-content:center; transform:rotate(4deg); margin-bottom:18px; }
body.jpo-game.jbombe #screen-feedback .jbf-emoji.win { box-shadow:7px 7px 0 var(--bp-vert); }
body.jpo-game.jbombe #screen-feedback .jbf-emoji.lose { box-shadow:7px 7px 0 var(--bp-rouge); }
body.jpo-game.jbombe #screen-feedback .jbf-emoji img { width:90px; height:90px; }
body.jpo-game.jbombe #screen-feedback .jbf-big { font-family:var(--bp-fd); font-size:32px; line-height:.96; letter-spacing:.5px; }
body.jpo-game.jbombe #screen-feedback .jbf-big .g { color:var(--bp-vert); -webkit-text-stroke:1.5px var(--bp-ink); }
body.jpo-game.jbombe #screen-feedback .jbf-big .r { color:var(--bp-rouge); -webkit-text-stroke:1.5px var(--bp-ink); }
body.jpo-game.jbombe #screen-feedback .jbf-sub { font-size:12.5px; font-weight:700; color:rgba(10,10,10,.72); line-height:1.55; margin:12px 0 18px; }
body.jpo-game.jbombe #screen-feedback .jbf-lives { width:100%; position:relative; margin-top:2px; border:3px solid var(--bp-ink); background:var(--bp-paper); padding:14px; box-shadow:5px 5px 0 var(--bp-ink); }
body.jpo-game.jbombe #screen-feedback .jbf-lives-lab { font-family:var(--bp-fd); font-size:12px; letter-spacing:1.5px; margin-bottom:10px; }
body.jpo-game.jbombe #screen-feedback .jbf-lives-row { display:flex; align-items:center; justify-content:center; gap:10px; }
body.jpo-game.jbombe #screen-feedback .jbf-lives-row img { width:36px; height:36px; }
body.jpo-game.jbombe #screen-feedback .jbf-lives-row img.dead { filter:grayscale(1) opacity(.3); }
body.jpo-game.jbombe #screen-feedback .jbf-note { width:100%; margin-top:16px; border:3px dashed var(--bp-ink); background:rgba(91,216,229,.28); padding:11px 12px; font-size:11px; font-weight:700; line-height:1.5; text-align:left; }
body.jpo-game.jbombe #screen-feedback .jbf-note b { font-family:var(--bp-fd); letter-spacing:1px; }
body.jpo-game.jbombe #screen-feedback .jbf-foot { padding:12px 16px 16px; border-top:3px solid var(--bp-ink); background:var(--bp-paper); flex-shrink:0; position:relative; z-index:2; }
body.jpo-game.jbombe #screen-feedback .jbf-wait { text-align:center; font-family:var(--bp-fd); font-size:12px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:8px; }
body.jpo-game.jbombe #screen-feedback .jbf-wait .live-dot { width:9px; height:9px; border-radius:50%; background:var(--bp-rouge); animation:jpgLive 1.1s infinite; }

/* ══════════ ⑥ SURVIVANTS (fin bombe · #screen-over .jbfin) ══════════ */
body.jpo-game.jbombe #screen-over { padding:0; }
body.jpo-game.jbombe #screen-over .jbfin { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; background:var(--bp-paper); color:var(--bp-ink); font-family:var(--bp-fm); }
body.jpo-game.jbombe #screen-over .jbfin-hero { background:var(--bp-ink); color:var(--bp-paper); padding:22px 18px 20px; text-align:center; position:relative; overflow:hidden; }
body.jpo-game.jbombe #screen-over .jbfin-scan { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px); }
body.jpo-game.jbombe #screen-over .jbfin-kick { position:relative; z-index:2; font-family:var(--bp-fd); font-size:12px; letter-spacing:3px; color:var(--bp-jaune); margin-bottom:12px; }
body.jpo-game.jbombe #screen-over .jbfin-emoji { position:relative; z-index:2; width:96px; height:96px; margin:0 auto 8px; border:4px solid var(--bp-jaune); background:rgba(255,214,0,.1); display:flex; align-items:center; justify-content:center; transform:rotate(-4deg); box-shadow:6px 6px 0 rgba(255,214,0,.3); }
body.jpo-game.jbombe #screen-over .jbfin-emoji img { width:74px; height:74px; }
body.jpo-game.jbombe #screen-over .jbfin-title { position:relative; z-index:2; font-family:var(--bp-fd); font-size:30px; line-height:.95; letter-spacing:1px; color:var(--bp-jaune); }
body.jpo-game.jbombe #screen-over .jbfin-sub { position:relative; z-index:2; font-size:11.5px; font-weight:700; color:rgba(255,254,247,.75); margin-top:8px; line-height:1.5; }
body.jpo-game.jbombe #screen-over .jbfin-badge { position:relative; margin:20px 16px 0; }
body.jpo-game.jbombe #screen-over .jbfin-badge::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--bp-rouge); }
body.jpo-game.jbombe #screen-over .jbfin-badge .body { position:relative; border:4px solid var(--bp-ink); background:var(--bp-ink); color:var(--bp-paper); padding:16px 14px; display:flex; gap:14px; align-items:center; }
body.jpo-game.jbombe #screen-over .jbfin-badge .be { width:60px; height:60px; flex-shrink:0; border:3px solid var(--bp-jaune); display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); }
body.jpo-game.jbombe #screen-over .jbfin-badge .be img { width:48px; height:48px; }
body.jpo-game.jbombe #screen-over .jbfin-badge .bt { font-family:var(--bp-fd); font-size:16px; letter-spacing:1px; color:var(--bp-jaune); }
body.jpo-game.jbombe #screen-over .jbfin-badge .bd { font-size:10.5px; font-weight:700; color:rgba(255,254,247,.8); margin-top:5px; line-height:1.45; }
body.jpo-game.jbombe #screen-over .jbfin-rank-t { font-family:var(--bp-fd); font-size:15px; letter-spacing:1.5px; margin:22px 16px 12px; display:flex; align-items:center; gap:9px; }
body.jpo-game.jbombe #screen-over .jbfin-rank-t img { width:20px; height:20px; }
body.jpo-game.jbombe #screen-over .jbfin-rank-t::after { content:''; flex:1; height:3px; background:var(--bp-ink); }
body.jpo-game.jbombe #screen-over .jbfin-rank { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
body.jpo-game.jbombe #screen-over .jbr-row { display:flex; align-items:center; gap:11px; border:3px solid var(--bp-ink); background:var(--bp-paper); padding:9px 11px; box-shadow:3px 3px 0 var(--bp-ink); }
body.jpo-game.jbombe #screen-over .jbr-row.gold { background:var(--bp-jaune); }
body.jpo-game.jbombe #screen-over .jbr-row.gold .jbr-k::after { content:' 🥇'; }
body.jpo-game.jbombe #screen-over .jbr-row.me { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jbombe #screen-over .jbr-row.out { opacity:.6; }
body.jpo-game.jbombe #screen-over .jbr-k { font-family:var(--bp-fd); font-size:18px; width:24px; text-align:center; flex-shrink:0; }
body.jpo-game.jbombe #screen-over .jbr-av { width:38px; height:38px; flex-shrink:0; border:2.5px solid var(--bp-ink); background:var(--bp-paper); overflow:hidden; }
body.jpo-game.jbombe #screen-over .jbr-av .ava-emo, body.jpo-game.jbombe #screen-over .jbr-av img { width:100%; height:100%; display:block; }
body.jpo-game.jbombe #screen-over .jbr-nm { flex:1; min-width:0; font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.jpo-game.jbombe #screen-over .jbr-you { display:inline-block; font-family:var(--bp-fd); font-size:8.5px; letter-spacing:1px; background:var(--bp-ink); color:var(--bp-jaune); padding:1px 6px; margin-left:6px; }
body.jpo-game.jbombe #screen-over .jbr-lv { display:flex; gap:2px; flex-shrink:0; }
body.jpo-game.jbombe #screen-over .jbr-lv img { width:16px; height:16px; }
body.jpo-game.jbombe #screen-over .jbr-lv img.dead { filter:grayscale(1) opacity(.3); }
body.jpo-game.jbombe #screen-over .jbfin-foot { padding:16px; margin-top:20px; border-top:3px solid var(--bp-ink); }
body.jpo-game.jbombe #screen-over .jbfin-foot .cta { position:relative; display:block; text-decoration:none; cursor:pointer; }
body.jpo-game.jbombe #screen-over .jbfin-foot .cta::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--bp-ink); }
body.jpo-game.jbombe #screen-over .jbfin-foot .cta .body { position:relative; border:4px solid var(--bp-ink); background:var(--bp-magenta); color:var(--bp-paper); padding:15px; font-family:var(--bp-fd); font-size:16px; letter-spacing:2px; text-align:center; }
body.jpo-game.jbombe #screen-over .jbfin-foot .cta.ghost { margin-top:10px; }
body.jpo-game.jbombe #screen-over .jbfin-foot .cta.ghost .body { background:var(--bp-paper); color:var(--bp-ink); font-size:14px; }

/* ============================================================
   🌊 LA PISCINE (joueur) — habillage cyan-sur-ink par-dessus le
   rendu moteur. Fidèle à design-prototypes/p2-jpo/mode2-piscine.html
   (état 4 + révélation + fin). On restyle #screen-question.jpisc
   (HUD injecté #jpiscHud, scène #jpiscScene, tuiles réponse) et on
   repeint #screen-feedback / #screen-eliminated / #screen-over.
   Tout scopé body.jpo-game.jpiscine.
   ============================================================ */
body.jpo-game.jpiscine {
  --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;
  --bp-fd:'Anton',sans-serif; --bp-fm:'IBM Plex Mono','IBM Plex Sans',monospace;
}
@keyframes jpiscLive { 50%{ opacity:.25; } }
@keyframes jpiscSink { 0%{ transform:translateY(-14px) scale(.85); opacity:0; } 60%{ transform:translateY(4px) scale(1.05); opacity:1; } 100%{ transform:translateY(0) scale(1); } }

/* les blocs injectés n'existent QUE sous une manche piscine active */
body.jpo-game.jpiscine #screen-question:not(.jpisc) .jpisc-hud,
body.jpo-game.jpiscine #screen-question:not(.jpisc) .jpisc-scene { display:none; }

/* ── écran question ── */
body.jpo-game.jpiscine #screen-question.jpisc .q-screen {
  background-color:var(--bp-gris);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
body.jpo-game.jpiscine #screen-question.jpisc .ghdr { background:var(--bp-ink); border-bottom:4px solid var(--bp-cyan); }
body.jpo-game.jpiscine #screen-question.jpisc .ghdr .close { background:var(--bp-rouge); color:var(--bp-paper); border:2px solid var(--bp-paper); }
body.jpo-game.jpiscine #screen-question.jpisc .ghdr .manche { color:var(--bp-paper); font-family:var(--bp-fd); letter-spacing:1px; }
body.jpo-game.jpiscine #screen-question.jpisc .ghdr .timer { background:var(--bp-jaune); color:var(--bp-ink); border:2px solid var(--bp-paper); font-family:var(--bp-fd); }
body.jpo-game.jpiscine #screen-question.jpisc .ghdr .score { display:none; }
/* pas de type-pill ni de HUD battle en piscine */
body.jpo-game.jpiscine #screen-question.jpisc .type-pill,
body.jpo-game.jpiscine #screen-question.jpisc .fmt-hud { display:none !important; }

/* HUD injecté : vies + difficulté */
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-hud {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:8px 14px 0; padding:9px 12px; border:3px solid var(--bp-ink);
  background:var(--bp-bleu); color:var(--bp-paper); box-shadow:4px 4px 0 var(--bp-ink);
}
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-lives { display:flex; gap:4px; align-items:center; }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-lives img { width:22px; height:22px; }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-lives img.gone { filter:grayscale(1) brightness(.5); opacity:.4; }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-diff { display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-dl { font-family:var(--bp-fd); font-size:11px; letter-spacing:1px; }
body.jpo-game.jpiscine .jpisc-dseg { display:flex; gap:4px; }
body.jpo-game.jpiscine .jpisc-dseg i { width:20px; height:11px; border:2px solid var(--bp-paper); background:transparent; display:block; }
body.jpo-game.jpiscine .jpisc-dseg i.l1 { background:var(--bp-vert); }
body.jpo-game.jpiscine .jpisc-dseg i.l2 { background:var(--bp-jaune); }
body.jpo-game.jpiscine .jpisc-dseg i.l3 { background:var(--bp-orange); }
body.jpo-game.jpiscine .jpisc-dseg i.l4 { background:var(--bp-rouge); }
body.jpo-game.jpiscine .jpisc-dseg i.l5 { background:var(--bp-magenta); }

/* scène "LA PISCINE MONTE" */
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene {
  margin:14px 14px 0; padding:12px 14px; border:3px solid var(--bp-ink);
  background:var(--bp-ink); color:var(--bp-paper); position:relative;
  box-shadow:5px 5px 0 var(--bp-cyan); font-size:12px; line-height:1.5; font-family:var(--bp-fm);
}
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene.out { box-shadow:5px 5px 0 var(--bp-rouge); }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene .jpisc-tg {
  position:absolute; top:-12px; left:12px; background:var(--bp-cyan); color:var(--bp-ink);
  font-family:var(--bp-fd); font-size:10px; letter-spacing:1.5px; padding:3px 8px; border:2px solid var(--bp-paper);
}
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene .jpisc-tg.out { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene img { width:20px; height:20px; vertical-align:-.28em; }
body.jpo-game.jpiscine #screen-question.jpisc .jpisc-scene b.hl { color:var(--bp-cyan); }

/* question + tuiles réponse (flux moteur intact, on restyle) */
body.jpo-game.jpiscine #screen-question.jpisc .q-card .bd { background:var(--bp-jaune); color:var(--bp-ink); border:4px solid var(--bp-ink); font-family:var(--bp-fd); }
body.jpo-game.jpiscine #screen-question.jpisc .q-card .sh { background:var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt .bd { border:3px solid var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt .sh { background:var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt:nth-child(4n+1) .bd { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt:nth-child(4n+2) .bd { background:var(--bp-cyan); color:var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt:nth-child(4n+3) .bd { background:var(--bp-jaune); color:var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt:nth-child(4n+4) .bd { background:var(--bp-vert); color:var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt .letter-wrap .lbox { background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-ink); }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt.correct .bd { background:var(--bp-vert) !important; color:var(--bp-ink) !important; }
body.jpo-game.jpiscine #screen-question.jpisc .answer-zone .opt.wrong .bd { background:var(--bp-rouge) !important; color:var(--bp-paper) !important; }
/* spectateur (sorti du bassin) */
body.jpo-game.jpiscine #screen-question.jpisc.jpisc-spec .answer-zone { opacity:.5; pointer-events:none; }
body.jpo-game.jpiscine #screen-question.jpisc .spectator-strip { background:var(--bp-rouge); color:var(--bp-paper); border:3px solid var(--bp-ink); font-family:var(--bp-fd); letter-spacing:1px; box-shadow:3px 3px 0 var(--bp-ink); }

/* ── RÉSULTAT JOUEUR : SURVIE / −1 VIE / NOYADE ──
   Un SEUL template (.jpisc-sink), partagé par #screen-feedback (survie/−1 vie)
   et #screen-eliminated (noyade). Seuls la couleur d'accent + le texte changent.
   Layout centré, contenu court, cœurs TOUJOURS visibles (❤ pleins, .gone grisés). */
body.jpo-game.jpiscine #screen-feedback,
body.jpo-game.jpiscine #screen-eliminated { padding:0; }
/* Univers PISCINE = fond ENCRE + rayures cyan (comme .ge/.porte du proto),
   verdict porté par une BANNIÈRE colorée (vert survie / orange −1 vie /
   rouge noyade) → distinct des autres modes (pas d'aplat plein écran). */
body.jpo-game.jpiscine .jpisc-sink { position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; background:var(--bp-ink); color:var(--bp-paper); font-family:var(--bp-fm); }
body.jpo-game.jpiscine .jpisc-sink-wash { position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(115deg,rgba(91,216,229,.10) 0 20px,transparent 20px 40px); }
body.jpo-game.jpiscine .jpisc-sink-in { position:relative; z-index:2; flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:15px; padding:30px 22px; }
body.jpo-game.jpiscine .jpisc-sink-tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--bp-fd); font-size:11px; letter-spacing:2px; background:var(--bp-cyan); color:var(--bp-ink); border:2px solid var(--bp-paper); padding:4px 12px; }
body.jpo-game.jpiscine .jpisc-sink-tag img { width:16px; height:16px; }
body.jpo-game.jpiscine .jpisc-sink-em { width:118px; height:118px; flex-shrink:0; border:4px solid var(--bp-paper); background:var(--bp-paper); display:flex; align-items:center; justify-content:center; box-shadow:7px 7px 0 var(--bp-cyan); animation:jpiscSink .7s ease-out; }
body.jpo-game.jpiscine .jpisc-sink.hurt .jpisc-sink-em { box-shadow:7px 7px 0 var(--bp-orange); }
body.jpo-game.jpiscine .jpisc-sink.coule .jpisc-sink-em { box-shadow:7px 7px 0 var(--bp-rouge); }
body.jpo-game.jpiscine .jpisc-sink-em img { width:78px; height:78px; }
body.jpo-game.jpiscine .jpisc-sink-banner { font-family:var(--bp-fd); font-size:40px; line-height:.92; letter-spacing:1px; border:4px solid var(--bp-paper); padding:8px 18px; box-shadow:6px 6px 0 rgba(0,0,0,.45); }
body.jpo-game.jpiscine .jpisc-sink.win .jpisc-sink-banner { background:var(--bp-vert); color:var(--bp-ink); }
body.jpo-game.jpiscine .jpisc-sink.hurt .jpisc-sink-banner { background:var(--bp-orange); color:var(--bp-ink); }
body.jpo-game.jpiscine .jpisc-sink.coule .jpisc-sink-banner { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jpiscine .jpisc-sink-sub { font-size:12.5px; font-weight:700; color:rgba(255,254,247,.8); line-height:1.5; max-width:300px; }
body.jpo-game.jpiscine .jpisc-sink-lives { display:flex; align-items:center; justify-content:center; gap:8px; min-height:32px; }
body.jpo-game.jpiscine .jpisc-sink-lives .jpisc-heart { width:32px; height:32px; }
body.jpo-game.jpiscine .jpisc-sink-lives .jpisc-heart.gone { filter:grayscale(1) brightness(.5); opacity:.4; }
body.jpo-game.jpiscine .jpisc-sink-alive { display:inline-flex; align-items:center; gap:8px; background:var(--bp-paper); color:var(--bp-ink); border:3px solid var(--bp-cyan); padding:9px 15px; font-family:var(--bp-fd); font-size:15px; letter-spacing:1px; }
body.jpo-game.jpiscine .jpisc-sink-alive img { width:22px; height:22px; }
body.jpo-game.jpiscine .jpisc-sink-alive b { color:var(--bp-bleu); font-size:20px; }
body.jpo-game.jpiscine .jpisc-sink-watch { font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--bp-cyan); display:inline-flex; align-items:center; gap:8px; }
body.jpo-game.jpiscine .jpisc-sink-watch .live-dot { width:9px; height:9px; border-radius:50%; background:var(--bp-cyan); animation:jpiscLive 1.1s infinite; }

/* ── fin de partie (#screen-over) ── */
body.jpo-game.jpiscine #screen-over .jpisc-end { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; background:var(--bp-cyan); color:var(--bp-ink); font-family:var(--bp-fm); }
body.jpo-game.jpiscine #screen-over .jpisc-end-hero { text-align:center; padding:22px 20px 14px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-kick { display:inline-block; font-family:var(--bp-fd); font-size:12px; letter-spacing:2px; background:var(--bp-ink); color:var(--bp-cyan); border:3px solid var(--bp-ink); padding:5px 12px; transform:rotate(-2deg); }
body.jpo-game.jpiscine #screen-over .jpisc-end-em { width:100px; height:100px; margin:14px auto 0; border:4px solid var(--bp-ink); background:var(--bp-paper); display:flex; align-items:center; justify-content:center; box-shadow:6px 6px 0 var(--bp-ink); }
body.jpo-game.jpiscine #screen-over .jpisc-end-em img { width:64px; height:64px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-title { font-family:var(--bp-fd); font-size:38px; line-height:.95; letter-spacing:1px; margin-top:12px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-sub { font-size:12px; font-weight:700; line-height:1.5; margin-top:8px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-sub b { font-family:var(--bp-fd); }
body.jpo-game.jpiscine #screen-over .jpisc-end-badge { margin:4px 16px 0; display:flex; align-items:center; gap:12px; border:3px solid var(--bp-ink); background:var(--bp-ink); color:var(--bp-paper); padding:12px; box-shadow:5px 5px 0 var(--bp-magenta); }
body.jpo-game.jpiscine #screen-over .jpisc-end-badge .be { width:48px; height:48px; flex-shrink:0; border:3px solid var(--bp-paper); background:var(--bp-cyan); display:flex; align-items:center; justify-content:center; }
body.jpo-game.jpiscine #screen-over .jpisc-end-badge .be img { width:32px; height:32px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-badge .bt { font-family:var(--bp-fd); font-size:14px; letter-spacing:.5px; color:var(--bp-jaune); }
body.jpo-game.jpiscine #screen-over .jpisc-end-badge .bd { font-size:11px; font-weight:600; line-height:1.4; margin-top:3px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-rank-t { margin:16px 16px 8px; font-family:var(--bp-fd); font-size:13px; letter-spacing:1px; display:flex; align-items:center; gap:6px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-rank-t img { width:20px; height:20px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-rank { margin:0 16px; display:flex; flex-direction:column; gap:6px; }
body.jpo-game.jpiscine #screen-over .jpisc-fr { display:flex; align-items:center; gap:10px; background:var(--bp-paper); border:3px solid var(--bp-ink); padding:7px 10px; box-shadow:3px 3px 0 var(--bp-ink); }
body.jpo-game.jpiscine #screen-over .jpisc-fr.gold { background:var(--bp-jaune); }
body.jpo-game.jpiscine #screen-over .jpisc-fr.me { border-color:var(--bp-magenta); box-shadow:3px 3px 0 var(--bp-magenta); }
body.jpo-game.jpiscine #screen-over .jpisc-fr.out { opacity:.6; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .k { font-family:var(--bp-fd); font-size:18px; width:26px; flex-shrink:0; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .av { width:34px; height:34px; flex-shrink:0; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .av .ava-emo { width:100%; height:100%; display:block; border:2px solid var(--bp-ink); overflow:hidden; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .av .ava-emo img { width:100%; height:100%; object-fit:cover; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .nm { flex:1; font-family:var(--bp-fd); font-size:14px; letter-spacing:.5px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .nm .you { font-family:var(--bp-fm); font-size:9px; background:var(--bp-magenta); color:var(--bp-paper); border:2px solid var(--bp-ink); padding:1px 5px; }
body.jpo-game.jpiscine #screen-over .jpisc-fr .et { font-family:var(--bp-fd); font-size:11px; letter-spacing:1px; color:var(--bp-ink); background:var(--bp-gris2); border:2px solid var(--bp-ink); padding:2px 6px; white-space:nowrap; }
body.jpo-game.jpiscine #screen-over .jpisc-fr.out .et { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jpiscine #screen-over .jpisc-end-foot { margin-top:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
body.jpo-game.jpiscine #screen-over .jpisc-end-foot .cta { position:relative; display:block; text-decoration:none; cursor:pointer; }
body.jpo-game.jpiscine #screen-over .jpisc-end-foot .cta::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--bp-ink); }
body.jpo-game.jpiscine #screen-over .jpisc-end-foot .cta .body { position:relative; border:4px solid var(--bp-ink); background:var(--bp-magenta); color:var(--bp-paper); padding:15px; font-family:var(--bp-fd); font-size:16px; letter-spacing:2px; text-align:center; }
body.jpo-game.jpiscine #screen-over .jpisc-end-foot .cta.ghost .body { background:var(--bp-paper); color:var(--bp-ink); font-size:14px; }

/* ============================================================
   🔔 LE BUZZER (joueur) — buzz-first RELAIS
   Fidèle à design-prototypes/p2-jpo/format-buzzer.html (états 2/4).
   PALETTE DU PROTOTYPE (papier/magenta) scopée body.jpo-game.jbuzzer.
   On ne touche qu'à #screen-question.jbz .answer-zone (BUZZ / tuiles /
   attente) + #screen-feedback (résultat). Le flux de réponse reste intact.
   ============================================================ */
body.jpo-game.jbuzzer {
  --bz-paper:#FFFEF7; --bz-ink:#0A0A0A; --bz-magenta:#FF2E93; --bz-yellow:#FFD600;
  --bz-cyan:#5BD8E5; --bz-green:#5BE885; --bz-red:#FF5252;
  --bz-fd:'Anton',sans-serif; --bz-fm:'IBM Plex Sans',sans-serif;
}

/* zone de réponse (phase OPEN + attente + déjà tenté) */
body.jpo-game.jbuzzer #screen-question.jbz .answer-zone.jbz-zone {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px 18px; text-align:center;
}
body.jpo-game.jbuzzer #screen-question.jbz .jbz-hint {
  font-family:var(--bz-fd); font-size:clamp(22px,7vw,32px); line-height:1; letter-spacing:.5px; color:var(--bz-ink);
}
body.jpo-game.jbuzzer #screen-question.jbz .jbz-hint span { color:var(--bz-magenta); }

/* le gros bouton BUZZ (rouge, pulsant, halo) */
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz {
  position:relative; width:clamp(180px,58vw,240px); height:clamp(180px,58vw,240px); border-radius:50%;
  background:var(--bz-red); border:6px solid var(--bz-ink); box-shadow:0 10px 0 #B22222, 10px 18px 0 var(--bz-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  animation:jbzPulse 1.3s ease-in-out infinite; padding:0;
}
@keyframes jbzPulse { 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-6px) scale(1.02);} }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz .jbz-ring {
  position:absolute; inset:-6px; border-radius:50%; border:6px solid var(--bz-red); animation:jbzRipple 1.6s ease-out infinite; opacity:0;
}
@keyframes jbzRipple { 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.35); opacity:0;} }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz .jbz-bell { width:clamp(64px,20vw,86px); height:clamp(64px,20vw,86px); }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz .jbz-txt { font-family:var(--bz-fd); font-size:clamp(34px,11vw,44px); color:var(--bz-paper); letter-spacing:2px; text-shadow:2px 2px 0 rgba(0,0,0,.35); }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz.sent { animation:none; transform:translateY(6px) scale(.97); box-shadow:0 4px 0 #B22222, 4px 8px 0 var(--bz-ink); }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-buzz.sent .jbz-ring { display:none; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-sub { font-size:clamp(12px,3.4vw,14px); font-weight:600; color:#555; max-width:280px; line-height:1.4; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-reopen {
  background:var(--bz-yellow); border:3px solid var(--bz-ink); box-shadow:4px 4px 0 var(--bz-ink); padding:9px 14px;
  font-family:var(--bz-fd); font-size:clamp(14px,4vw,18px); color:var(--bz-ink); letter-spacing:.5px; line-height:1.15;
}

/* attente « X A LA MAIN » + déjà tenté */
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait,
body.jpo-game.jbuzzer #screen-question.jbz .jbz-done {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; text-align:center;
}
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-em,
body.jpo-game.jbuzzer #screen-question.jbz .jbz-done-em { width:80px; height:80px; display:inline-flex; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-em .noto, body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-em img,
body.jpo-game.jbuzzer #screen-question.jbz .jbz-done-em .noto, body.jpo-game.jbuzzer #screen-question.jbz .jbz-done-em img { width:100%; height:100%; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-t,
body.jpo-game.jbuzzer #screen-question.jbz .jbz-done-t { font-family:var(--bz-fd); font-size:clamp(20px,6vw,28px); color:var(--bz-ink); line-height:1.05; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-t b { color:var(--bz-magenta); }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-wait-s,
body.jpo-game.jbuzzer #screen-question.jbz .jbz-done-s { font-size:clamp(12px,3.4vw,14px); font-weight:600; color:#555; max-width:280px; line-height:1.4; }

/* moi = buzzeur : bandeau « À TOI » au-dessus des tuiles existantes */
body.jpo-game.jbuzzer #screen-question.jbz .answer-zone.jbz-answer { gap:12px; }
body.jpo-game.jbuzzer #screen-question.jbz .jbz-yourturn {
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  background:var(--bz-magenta); color:var(--bz-paper); border:3px solid var(--bz-ink); box-shadow:3px 3px 0 var(--bz-ink);
  padding:7px 16px; font-family:var(--bz-fd); font-size:clamp(15px,4.4vw,20px); letter-spacing:1px;
}
body.jpo-game.jbuzzer #screen-question.jbz .jbz-yourturn .noto { width:22px; height:22px; }

/* ⑤ résultat perso (feedback) */
body.jpo-game.jbuzzer #screen-feedback { padding:0; }
/* Univers BUZZER = plateau télé : fond PAPIER, verdict en PASTILLE
   (vert « ok » / rouge raté / cyan neutre), points en chip JAUNE,
   accents magenta → distinct des autres (pas d'aplat plein écran). */
body.jpo-game.jbuzzer #screen-feedback .jbz-res {
  position:relative; width:100%; min-height:100%; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--bz-paper); color:var(--bz-ink); font-family:var(--bz-fm); font-weight:600;
}
body.jpo-game.jbuzzer #screen-feedback .jbz-res-in { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:28px 22px; text-align:center; }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-stamp {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--bz-fd); font-size:13px; letter-spacing:2px;
  background:var(--bz-magenta); color:var(--bz-paper); border:3px solid var(--bz-ink); box-shadow:3px 3px 0 var(--bz-ink);
  padding:5px 13px; transform:rotate(-1.5deg);
}
body.jpo-game.jbuzzer #screen-feedback .jbz-res-stamp img { width:18px; height:18px; }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-em { width:92px; height:92px; }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-em img { width:100%; height:100%; }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-chip {
  font-family:var(--bz-fd); font-size:clamp(28px,8.5vw,40px); line-height:1; letter-spacing:.5px;
  border:4px solid var(--bz-ink); box-shadow:5px 5px 0 var(--bz-ink); padding:8px 18px; transform:rotate(-1deg);
}
body.jpo-game.jbuzzer #screen-feedback .jbz-res.win .jbz-res-chip { background:var(--bz-green); color:var(--bz-ink); }
body.jpo-game.jbuzzer #screen-feedback .jbz-res.lose .jbz-res-chip { background:var(--bz-red); color:var(--bz-paper); }
body.jpo-game.jbuzzer #screen-feedback .jbz-res.neutral .jbz-res-chip { background:var(--bz-cyan); color:var(--bz-ink); }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-plus {
  font-family:var(--bz-fd); font-size:clamp(24px,7vw,34px); background:var(--bz-yellow); color:var(--bz-ink);
  border:3px solid var(--bz-ink); box-shadow:4px 4px 0 var(--bz-ink); padding:4px 16px; transform:rotate(2deg);
}
body.jpo-game.jbuzzer #screen-feedback .jbz-res-sub { font-size:clamp(13px,3.8vw,15px); line-height:1.45; max-width:20em; color:#333; }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-sub b { font-weight:800; color:var(--bz-ink); }
body.jpo-game.jbuzzer #screen-feedback .jbz-res-foot {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; flex-shrink:0;
  border-top:3px solid var(--bz-ink); background:var(--bz-paper); font-family:var(--bz-fd); font-size:12px; letter-spacing:1.5px;
}
body.jpo-game.jbuzzer #screen-feedback .jbz-res-foot .live-dot { width:9px; height:9px; border-radius:50%; background:var(--bz-magenta); animation:jbzPulse 1.1s infinite; }

/* ============================================================
   📄 LE CLASSIQUE (JOUEUR) — habillage PAPIER (12_jpo.js)
   Fidèle à design-prototypes/p2-jpo/format-classique.html (③ ⑤ ⑦).
   PALETTE DU PROTOTYPE (--bp-*, PAS la charte bleue) scopée
   body.jpo-game.jclassique pour ne rien faire fuiter ailleurs.
   ③ = restyle du rendu moteur #screen-question (flux réponse INTACT).
   ⑤ #screen-feedback .jgc-res · ⑦ #screen-over .jgc-end (injectés).
   ============================================================ */
body.jpo-game.jclassique {
  --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;
  --bp-fd:'Anton',sans-serif; --bp-fm:'IBM Plex Mono','IBM Plex Sans',monospace;
}
@keyframes jgcLive { 50%{ opacity:.25; } }
@keyframes jgcPop { 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }

/* ════════ ③ RÉPONDRE — restyle papier de #screen-question ════════ */
body.jpo-game.jclassique #screen-question .q-screen {
  background-color:var(--bp-gris);
  background-image:radial-gradient(rgba(10,10,10,.07) 1.5px, transparent 1.5px);
  background-size:18px 18px;
}
body.jpo-game.jclassique #screen-question .ghdr { background:var(--bp-ink); border-bottom:4px solid var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .ghdr .close { background:var(--bp-rouge); color:var(--bp-paper); border:2px solid var(--bp-paper); }
body.jpo-game.jclassique #screen-question .ghdr .manche { background:var(--bp-cyan); color:var(--bp-ink); border-color:var(--bp-paper); font-family:var(--bp-fd); }
body.jpo-game.jclassique #screen-question .ghdr .timer { background:var(--bp-jaune); color:var(--bp-ink); border-color:var(--bp-paper); font-family:var(--bp-fd); }
body.jpo-game.jclassique #screen-question .ghdr .timer.warn { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .ghdr .score { background:var(--bp-vert); color:var(--bp-ink); border-color:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .type-pill .bd { background:var(--bp-magenta); color:var(--bp-paper); border:3px solid var(--bp-ink); }
body.jpo-game.jclassique #screen-question .type-pill .sh { background:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .q-card .bd { background:var(--bp-paper); color:var(--bp-ink); border:4px solid var(--bp-ink); }
body.jpo-game.jclassique #screen-question .q-card .sh { background:var(--bp-magenta); }
body.jpo-game.jclassique #screen-question .mob-media .hint-m { background:var(--bp-cyan); border:3px solid var(--bp-ink); }

/* 4 tuiles Kahoot — palette EXACTE du prototype (magenta/cyan/jaune/vert) */
body.jpo-game.jclassique #screen-question .answer-zone .opt .bd { border:4px solid var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt .sh { background:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt:nth-child(4n+1) .bd { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .answer-zone .opt:nth-child(4n+2) .bd { background:var(--bp-cyan); color:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt:nth-child(4n+3) .bd { background:var(--bp-jaune); color:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt:nth-child(4n+4) .bd { background:var(--bp-vert); color:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt .letter-wrap .lbox { background:var(--bp-paper); color:var(--bp-ink); border:2px solid var(--bp-ink); font-family:var(--bp-fd); }
body.jpo-game.jclassique #screen-question .answer-zone .opt:nth-child(4n+1) .letter-wrap .lbox { color:var(--bp-magenta); }
body.jpo-game.jclassique #screen-question .answer-zone .opt .letter-wrap .lsh { background:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt .text { font-family:var(--bp-fd); }
body.jpo-game.jclassique #screen-question .answer-zone .opt.selected .bd { outline:3px solid var(--bp-ink); outline-offset:-9px; }
body.jpo-game.jclassique #screen-question .answer-zone .opt .ocheck { border:3px solid var(--bp-ink); box-shadow:2px 2px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt.correct .bd { background:var(--bp-vert) !important; color:var(--bp-ink) !important; }
body.jpo-game.jclassique #screen-question .answer-zone .opt.correct .ocheck { background:var(--bp-vert); color:var(--bp-ink); }
body.jpo-game.jclassique #screen-question .answer-zone .opt.wrong .bd { background:var(--bp-rouge) !important; color:var(--bp-paper) !important; }
body.jpo-game.jclassique #screen-question .answer-zone .opt.wrong .ocheck { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .gh-foot { border-top:3px solid var(--bp-ink); background:var(--bp-paper); }
body.jpo-game.jclassique #screen-question .gh-foot .gf-dot { background:var(--bp-vert); border:2px solid var(--bp-ink); }

/* ════════ ⑤ TON RÉSULTAT (#screen-feedback .jgc-res) ════════ */
body.jpo-game.jclassique #screen-feedback { padding:0; }
body.jpo-game.jclassique #screen-feedback .jgc-res {
  flex:1; display:flex; flex-direction:column; min-height:0; position:relative; overflow:hidden;
  background:var(--bp-vert); color:var(--bp-ink); font-family:var(--bp-fm);
}
body.jpo-game.jclassique #screen-feedback .jgc-res.miss { background:var(--bp-rouge); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-feedback .jgc-res.neutral { background:var(--bp-cyan); color:var(--bp-ink); }
body.jpo-game.jclassique #screen-feedback .jgc-res-stripes {
  position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:repeating-linear-gradient(-45deg,var(--bp-ink) 0 14px,transparent 14px 42px);
}
body.jpo-game.jclassique #screen-feedback .jgc-res-in {
  position:relative; z-index:2; flex:1; overflow-y:auto; padding:26px 18px 18px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
body.jpo-game.jclassique #screen-feedback .jgc-res-stamp {
  display:inline-block; font-family:var(--bp-fd); font-size:11px; letter-spacing:2px;
  background:var(--bp-ink); color:var(--bp-paper); border:3px solid var(--bp-paper);
  padding:5px 12px; transform:rotate(-3deg); margin:0 auto 16px;
}
body.jpo-game.jclassique #screen-feedback .jgc-res-em {
  width:96px; height:96px; margin:0 auto 10px; border:4px solid var(--bp-ink); background:var(--bp-paper);
  display:flex; align-items:center; justify-content:center; transform:rotate(4deg); box-shadow:7px 7px 0 var(--bp-ink);
  animation:jgcPop .5s ease-out;
}
body.jpo-game.jclassique #screen-feedback .jgc-res-em img { width:72px; height:72px; }
body.jpo-game.jclassique #screen-feedback .jgc-res-verdict {
  font-family:var(--bp-fd); font-size:40px; line-height:.9; letter-spacing:1px; color:var(--bp-ink); text-shadow:4px 4px 0 var(--bp-paper); margin-top:6px;
}
body.jpo-game.jclassique #screen-feedback .jgc-res.miss .jgc-res-verdict { color:var(--bp-paper); text-shadow:4px 4px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-feedback .jgc-res-plus {
  font-family:var(--bp-fd); font-size:60px; line-height:.85; letter-spacing:1px; color:var(--bp-paper); text-shadow:5px 5px 0 var(--bp-ink); margin:10px 0 2px;
}
body.jpo-game.jclassique #screen-feedback .jgc-move { width:100%; max-width:340px; margin:18px auto 0; border:4px solid var(--bp-ink); background:var(--bp-paper); color:var(--bp-ink); padding:12px 13px; box-shadow:6px 6px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-feedback .jgc-move-t { font-family:var(--bp-fd); font-size:12px; letter-spacing:1px; margin-bottom:11px; display:flex; align-items:center; justify-content:center; gap:7px; }
body.jpo-game.jclassique #screen-feedback .jgc-em { width:18px; height:18px; display:inline-flex; }
body.jpo-game.jclassique #screen-feedback .jgc-em img { width:100%; height:100%; }
body.jpo-game.jclassique #screen-feedback .jgc-move-row { display:flex; align-items:center; justify-content:center; gap:12px; }
body.jpo-game.jclassique #screen-feedback .jgc-mchip { text-align:center; }
body.jpo-game.jclassique #screen-feedback .jgc-mchip .r { font-family:var(--bp-fd); font-size:34px; line-height:.9; border:4px solid var(--bp-ink); padding:6px 12px; box-shadow:4px 4px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-feedback .jgc-mchip.old .r { background:var(--bp-gris2); color:rgba(10,10,10,.5); }
body.jpo-game.jclassique #screen-feedback .jgc-mchip.new .r { background:var(--bp-jaune); }
body.jpo-game.jclassique #screen-feedback .jgc-mchip .c { font-size:8.5px; font-weight:700; letter-spacing:.5px; margin-top:5px; color:rgba(10,10,10,.6); }
body.jpo-game.jclassique #screen-feedback .jgc-move-arrow { font-family:var(--bp-fd); font-size:32px; color:var(--bp-vert); text-shadow:2px 2px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-feedback .jgc-streak {
  margin:16px auto 0; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--bp-fd); font-size:14px; letter-spacing:1px;
  background:var(--bp-ink); color:var(--bp-jaune); border:3px solid var(--bp-ink); padding:7px 13px; box-shadow:4px 4px 0 var(--bp-magenta); transform:rotate(-1deg);
}
body.jpo-game.jclassique #screen-feedback .jgc-res-foot {
  padding:12px 16px 16px; border-top:4px solid var(--bp-ink); background:rgba(10,10,10,.06); flex-shrink:0; position:relative; z-index:2;
}
body.jpo-game.jclassique #screen-feedback .jgc-res.miss .jgc-res-foot { background:rgba(10,10,10,.14); }
body.jpo-game.jclassique #screen-feedback .jgc-res-wait { text-align:center; font-family:var(--bp-fd); font-size:12px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:8px; }
body.jpo-game.jclassique #screen-feedback .jgc-dot { width:9px; height:9px; border-radius:50%; background:currentColor; display:inline-block; animation:jgcLive 1.1s infinite; }

/* ════════ ⑦ FIN + BADGE (#screen-over .jgc-end) ════════ */
body.jpo-game.jclassique #screen-over { padding:0; }
body.jpo-game.jclassique #screen-over .jgc-end {
  flex:1; position:relative; display:flex; flex-direction:column; min-height:0;
  background:var(--bp-magenta); color:var(--bp-paper); overflow:hidden; font-family:var(--bp-fm);
}
body.jpo-game.jclassique #screen-over .jgc-confetti {
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:
    radial-gradient(circle,var(--bp-jaune) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-cyan) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-paper) 3px,transparent 4px),
    radial-gradient(circle,var(--bp-ink) 3px,transparent 4px);
  background-size:70px 70px,90px 90px,60px 60px,110px 110px;
  background-position:0 0,30px 40px,50px 10px,10px 60px;
}
body.jpo-game.jclassique #screen-over .jgc-end-in { position:relative; z-index:2; flex:1; overflow-y:auto; padding:22px 16px 18px; text-align:center; }
body.jpo-game.jclassique #screen-over .jgc-end-stamp {
  display:inline-block; font-family:var(--bp-fd); font-size:12px; letter-spacing:2px;
  background:var(--bp-ink); color:var(--bp-jaune); border:3px solid var(--bp-ink); padding:6px 13px; transform:rotate(-3deg); margin-bottom:12px; box-shadow:4px 4px 0 rgba(255,214,0,.4);
}
body.jpo-game.jclassique #screen-over .jgc-end-em {
  width:108px; height:108px; margin:2px auto 8px; border:4px solid var(--bp-ink); background:var(--bp-paper);
  display:flex; align-items:center; justify-content:center; transform:rotate(4deg); box-shadow:8px 8px 0 var(--bp-ink);
}
body.jpo-game.jclassique #screen-over .jgc-end-em img { width:84px; height:84px; }
body.jpo-game.jclassique #screen-over .jgc-end-title { font-family:var(--bp-fd); font-size:42px; line-height:.88; letter-spacing:1px; color:var(--bp-paper); text-shadow:4px 4px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-over .jgc-end-sub { font-size:12px; font-weight:600; margin-top:10px; color:var(--bp-paper); line-height:1.5; }
body.jpo-game.jclassique #screen-over .jgc-end-sub b { background:var(--bp-jaune); color:var(--bp-ink); padding:1px 6px; border:2px solid var(--bp-ink); font-weight:700; }
body.jpo-game.jclassique #screen-over .jgc-final-pod { position:relative; margin:18px 4px 0; border:4px solid var(--bp-ink); background:var(--bp-paper); padding:13px 12px; box-shadow:6px 6px 0 var(--bp-ink); }
body.jpo-game.jclassique #screen-over .jgc-fp {
  display:flex; align-items:center; gap:10px; border:3px solid var(--bp-ink); padding:8px 10px; box-shadow:3px 3px 0 var(--bp-ink); margin-bottom:9px; color:var(--bp-ink);
}
body.jpo-game.jclassique #screen-over .jgc-fp:last-child { margin-bottom:0; }
body.jpo-game.jclassique #screen-over .jgc-fp.p1 { background:var(--bp-jaune); }
body.jpo-game.jclassique #screen-over .jgc-fp.p2 { background:var(--bp-cyan); }
body.jpo-game.jclassique #screen-over .jgc-fp.p3 { background:var(--bp-orange); }
body.jpo-game.jclassique #screen-over .jgc-fp.me { outline:3px solid var(--bp-magenta); outline-offset:2px; }
body.jpo-game.jclassique #screen-over .jgc-fp-pos { font-family:var(--bp-fd); font-size:20px; width:22px; flex-shrink:0; }
body.jpo-game.jclassique #screen-over .jgc-fp-av { flex-shrink:0; width:34px; height:34px; display:block; border:2.5px solid var(--bp-ink); background:var(--bp-paper); overflow:hidden; }
body.jpo-game.jclassique #screen-over .jgc-fp-av .ava-emo, body.jpo-game.jclassique #screen-over .jgc-fp-av img { width:34px; height:34px; display:block; }
body.jpo-game.jclassique #screen-over .jgc-fp-nm { font-family:var(--bp-fd); font-size:16px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
body.jpo-game.jclassique #screen-over .jgc-fp-crown { font-size:16px; }
body.jpo-game.jclassique #screen-over .jgc-fp-sc { margin-left:auto; font-family:var(--bp-fd); font-size:19px; }
body.jpo-game.jclassique #screen-over .jgc-badge { position:relative; margin:18px 4px 0; text-align:left; border:4px solid var(--bp-ink); background:var(--bp-ink); color:var(--bp-paper); padding:15px 14px; display:flex; gap:13px; align-items:center; box-shadow:6px 6px 0 var(--bp-jaune); }
body.jpo-game.jclassique #screen-over .jgc-badge .be { width:58px; height:58px; flex-shrink:0; border:3px solid var(--bp-jaune); display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); }
body.jpo-game.jclassique #screen-over .jgc-badge .be img { width:46px; height:46px; }
body.jpo-game.jclassique #screen-over .jgc-badge .bt { font-family:var(--bp-fd); font-size:15px; letter-spacing:.5px; color:var(--bp-jaune); line-height:1.05; }
body.jpo-game.jclassique #screen-over .jgc-badge .bd { font-size:10.5px; font-weight:600; color:rgba(255,254,247,.82); margin-top:5px; line-height:1.45; }
body.jpo-game.jclassique #screen-over .jgc-end-foot { padding:12px 16px 16px; border-top:4px solid var(--bp-ink); background:rgba(10,10,10,.08); flex-shrink:0; position:relative; z-index:2; }
body.jpo-game.jclassique #screen-over .jgc-cta { position:relative; display:block; text-decoration:none; cursor:pointer; }
body.jpo-game.jclassique #screen-over .jgc-cta::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--bp-ink); }
body.jpo-game.jclassique #screen-over .jgc-cta .body { position:relative; border:4px solid var(--bp-ink); background:var(--bp-jaune); color:var(--bp-ink); padding:15px; font-family:var(--bp-fd); font-size:18px; letter-spacing:2px; text-align:center; }
body.jpo-game.jclassique #screen-over .jgc-cta.ghost { margin-top:10px; }
body.jpo-game.jclassique #screen-over .jgc-cta.ghost .body { background:var(--bp-paper); color:var(--bp-ink); font-size:14px; }

/* ────────────────────────────────────────────────────────────
   📸 BOUTON « PARTAGER MON RÉSULTAT » (fin de partie JPO)
   Injecté en tête du pied de chaque écran de fin par 12_jpo.js.
   Style néo-brutaliste, accent par mode (contraste avec le CTA
   « stand » déjà présent). Génère la carte via QZ.shareJpo.
   ──────────────────────────────────────────────────────────── */
body.jpo-game #screen-over .jpo-share-btn {
  position:relative; display:block; width:100%; margin:0 0 10px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  border:4px solid var(--bp-ink, #0A0A0A);
  background:var(--bp-magenta, #FF2E93); color:var(--bp-paper, #FFFEF7);
  font-family:var(--bp-fd, 'Anton', sans-serif); font-size:16px; letter-spacing:2px; text-align:center;
  padding:15px; box-shadow:6px 6px 0 var(--bp-ink, #0A0A0A);
}
body.jpo-game #screen-over .jpo-share-btn:active {
  transform:translate(3px,3px); box-shadow:3px 3px 0 var(--bp-ink, #0A0A0A);
}
body.jpo-game.jbombe    #screen-over .jpo-share-btn { background:var(--bp-jaune); color:var(--bp-ink); }
body.jpo-game.jpiscine  #screen-over .jpo-share-btn { background:var(--bp-cyan);  color:var(--bp-ink); }
body.jpo-game.jbuzzer   #screen-over .jpo-share-btn { background:var(--bp-magenta); color:var(--bp-paper); }
body.jpo-game.jclassique #screen-over .jpo-share-btn { background:var(--bp-cyan); color:var(--bp-ink); }