@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   JPO EPITECH — skin event éphémère (moteur jpo.js).
   CHARTE OFFICIELLE EPITECH : fond bleu #013afb dominant,
   texte blanc, accents vert fluo / orange / magenta.
   Le vert #00ff97 est FLUO : jamais en texte (fond/accent only).
   Anton pour les titres, IBM Plex Sans pour le corps,
   signature « _ » après les gros titres.
   TOUT est namespacé (#sec-jpo, #jpoStage, #hvJpo, #jpoClose,
   classes .jpo-*) pour NE RIEN casser dans le reste de l'app.
   ============================================================ */

/* Palette EPITECH partagée par l'écran plein ET le hero d'accueil. */
#sec-jpo, #hvJpo {
  --jpo-blue:#013afb; --jpo-white:#ffffff; --jpo-ink:#0A0A0A;
  --jpo-paper:#ffffff; --jpo-grey:#9db0ff; --jpo-grey2:#c3cffd;
  --jpo-magenta:#ff1ef7; --jpo-green:#00ff97; --jpo-orange:#ff5f3a;
  /* alias de compat (mêmes noms qu'avant → aucun sélecteur cassé) */
  --jpo-yellow:#ff5f3a; --jpo-cyan:#00ff97; --jpo-red:#ff5f3a;
  --jpo-violet:#013afb; --jpo-blue2:#013afb;
  --jpo-fd:'Anton',sans-serif; --jpo-fm:'IBM Plex Sans',sans-serif;
}

/* ---------- SPLASH DE BOOT EPIQUIZ (surcharge le splash HOMIES de brutal.css) ----------
   Scopé .splash-screen.epiquiz → n'affecte QUE le splash event. Chargé après brutal.css. */
.splash-screen.epiquiz {
  background:#013afb;
  background-image:radial-gradient(rgba(255,255,255,.16) 2px, transparent 2px);
  background-size:24px 24px;
}
.splash-screen.epiquiz::before { background:#00ff97; border-color:#0A0A0A; } /* bandeau vert fluo */
.splash-screen.epiquiz .splash-epi {
  position:relative; z-index:2; height:30px; width:auto;
  filter:drop-shadow(3px 3px 0 #0A0A0A);
  animation:splash-fade .8s .2s ease both;
}
.splash-screen.epiquiz .splash-logo::before { background:#0A0A0A; }
.splash-screen.epiquiz .splash-logo .body { background:#ff1ef7; color:#fff; border-color:#0A0A0A; letter-spacing:4px; }
.splash-screen.epiquiz .splash-sub { background:#fff; color:#013afb; border-color:#0A0A0A; }
.splash-screen.epiquiz .splash-deco { border-color:#0A0A0A; box-shadow:5px 5px 0 #0A0A0A; }
.splash-screen.epiquiz .splash-deco.d1 { background:#ff5f3a; }
.splash-screen.epiquiz .splash-deco.d2 { background:#00ff97; }
.splash-screen.epiquiz .splash-deco.d3 { background:#fff; }
.splash-screen.epiquiz .splash-deco.d4 { background:#ff1ef7; }

/* ---------- ONBOARDING EPIQUIZ (surcharge .ob-* d'app.css) ----------
   Scopé .ob-screen.epiquiz. Vert #00ff97 = accent/fond only, jamais en texte. */
.ob-screen.epiquiz {
  background:#013afb;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);
  background-size:20px 20px;
  color:#fff;
}
.ob-screen.epiquiz .ob-epi { height:24px; width:auto; display:block; filter:drop-shadow(2px 2px 0 #0A0A0A); }
.ob-screen.epiquiz .ob-tag { background:#00ff97; color:#0A0A0A; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-title { color:#fff; text-shadow:3px 3px 0 #0A0A0A; }
.ob-screen.epiquiz .ob-sub { color:#c3cffd; }
.ob-screen.epiquiz .ob-sub b { background:#00ff97; border-color:#0A0A0A; color:#0A0A0A; }
.ob-screen.epiquiz .ob-lbl { color:#fff; }
.ob-screen.epiquiz .ob-shuffle { background:#fff; color:#013afb; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-dice { background:#ff1ef7; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-grid { background:#fff; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-tile.sel { outline-color:#00ff97; }
.ob-screen.epiquiz .ob-nick { background:#fff; color:#0A0A0A; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-nick:focus { box-shadow:4px 4px 0 #00ff97; }
.ob-screen.epiquiz .ob-note { color:#c3cffd; }
.ob-screen.epiquiz .ob-go { background:#00ff97; color:#0A0A0A; border-color:#0A0A0A; }
.ob-screen.epiquiz .ob-import { color:#c3cffd; }

/* ---------- ACCUEIL EPIQUIZ : logo EPITECH + immersion (pas de barre de nav) ----------
   Sur le serveur event, on retire la nav du bas → immersion. jpo.css chargé
   après home.css → cette règle gagne sans !important. */
body.home-page .app-brand::before { display:none; } /* retire l'ombre du pill magenta */
body.home-page .app-brand .app-brand-epi { height:22px; width:auto; display:block; }
body.home-page .bottom-nav { display:none; }
/* la nav retirée laissait un espace réservé en bas du scroll → on le récupère */
body.home-page .home-v4 .body-scroll { padding-bottom:26px; }

/* accueil EPIQUIZ : fond BLEU Epitech (on masque le canvas étoilé HOMIES) */
body.home-page { background:#013afb !important; background-image:radial-gradient(rgba(255,255,255,.10) 1.6px, transparent 1.6px) !important; background-size:22px 22px !important; }
body.home-page .hv-bg { display:none !important; }
body.home-page .home-v4 { color:#fff; }

/* cartes INFOS event (remplacent Créer/Rejoindre) */
.home-v4 .jpoh-info-row { display:flex; gap:12px; padding:16px 4px 4px; }
.home-v4 .jpoh-info { flex:1; border:4px solid #0A0A0A; box-shadow:5px 5px 0 #0A0A0A; background:#fff; color:#0A0A0A; padding:13px 12px; display:flex; flex-direction:column; gap:2px; }
.home-v4 .jpoh-info.green { background:#00ff97; }
.home-v4 .jpoh-info .ie { font-size:26px; line-height:1; }
.home-v4 .jpoh-info .it { font-family:'Anton',sans-serif; font-size:19px; letter-spacing:.02em; margin-top:4px; }
.home-v4 .jpoh-info .is { font-size:11px; color:#333; }

/* accueil EPIQUIZ : on retire les résidus HOMIES (win rate, rang, stats, mix, récents)
   pour ne garder que BIENVENUE + hero JPO + Créer/Rejoindre. !important pour battre
   les display inline posés par renderHome(). */
body.home-page .winrate-card,
body.home-page .rank-pill,
body.home-page .stats-row,
body.home-page #hvEvent,
body.home-page #hvRecentHead,
body.home-page #hvRecent { display:none !important; }

/* ---------- REJOINDRE : rappel du perso (profil déjà créé à l'onboarding) ---------- */
.jpo-join .jpo-id-recap { display:flex; align-items:center; gap:12px; border:4px solid var(--jpo-ink); box-shadow:6px 6px 0 var(--jpo-ink); background:#fff; color:var(--jpo-ink); padding:10px 12px; }
.jpo-join .jpo-id-ava { width:52px; height:52px; flex:0 0 auto; border:3px solid var(--jpo-ink); overflow:hidden; }
.jpo-join .jpo-id-ava > * { width:100%; height:100%; display:block; }
.jpo-join .jpo-id-txt { flex:1 1 auto; min-width:0; }
.jpo-join .jpo-id-nick { font-family:var(--jpo-fd); font-size:19px; line-height:1; }
.jpo-join .jpo-id-sub { font-size:11px; color:#555; margin-top:3px; }
.jpo-join .jpo-id-edit { flex:0 0 auto; font-family:var(--jpo-fd); font-size:12px; letter-spacing:.04em; background:var(--jpo-blue); color:#fff; border:3px solid var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-ink); padding:8px 12px; cursor:pointer; }
.jpo-join .jpo-id-edit:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--jpo-ink); }

/* ---------- écran plein #sec-jpo (au-dessus de la nav) ---------- */
#sec-jpo.sec { position:fixed; inset:0; z-index:2000; display:none; padding:0; margin:0; max-width:none; }
#sec-jpo.sec.active { display:block; }

#jpoStage {
  position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column;
  background:var(--jpo-blue); color:var(--jpo-white);
  font-family:var(--jpo-fm); font-weight:500; -webkit-font-smoothing:antialiased;
}
#jpoStage .jpo-screen { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; }

#jpoClose {
  display:none;   /* le ✕/‹ est désormais rendu DANS le header de chaque écran (taille unifiée) */
  position:absolute; top:calc(10px + env(safe-area-inset-top)); left:12px; z-index:60;
  width:40px; height:40px; border:3px solid var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue);
  font-family:var(--jpo-fd); font-size:18px; line-height:1; box-shadow:3px 3px 0 var(--jpo-ink); cursor:pointer;
}
#jpoClose:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--jpo-ink); }

/* zones défilables : le contenu remplit et scrolle si trop haut */
#jpoStage .jpo-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
#jpoStage .jpo-scroll::-webkit-scrollbar { width:0; }

/* ---------- emoji Noto ---------- */
.jpo-emo { width:1em; height:1em; vertical-align:middle; object-fit:contain; max-width:100%; }

/* ---------- wordmark EPITECH (placeholder) ---------- */
.jpo-epitech { font-family:var(--jpo-fd); text-transform:uppercase; letter-spacing:-.02em; display:inline-flex; align-items:center; line-height:1; }
.jpo-epitech .jpo-wm { background:var(--jpo-white); color:var(--jpo-blue); padding:5px 10px 4px; font-size:26px; letter-spacing:.01em; }
.jpo-epitech .jpo-sq { width:14px; height:14px; background:var(--jpo-green); border:3px solid var(--jpo-white); margin-left:7px; transform:rotate(8deg); }
.jpo-epitech.inv .jpo-wm { background:var(--jpo-blue); color:var(--jpo-white); border:3px solid var(--jpo-white); }
.jpo-epitech.big .jpo-wm { font-size:40px; padding:7px 14px 6px; }
.jpo-epitech.big .jpo-sq { width:20px; height:20px; margin-left:10px; }
.jpo-epitech.rot-1 { transform:rotate(-1.5deg); }

/* ---------- logo EPITECH officiel (img) — ombre noire dure, taille réduite ---------- */
.jpo-epi-logo { height:22px; width:auto; display:block; filter:drop-shadow(3px 3px 0 var(--jpo-ink)); }
.jpo-epi-logo.hv { height:30px; }   /* hero d'accueil : logo un peu plus grand */
.jpo-epi-logo.big { height:54px; }  /* écran CODE / flash glitch : grand logo */

/* ---------- décor de scène partagé (traits diagonaux + points + 2 carrés) ---------- */
.jpo-stage-deco { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px),
    radial-gradient(rgba(255,255,255,.10) 1.6px, transparent 1.6px);
  background-size:auto, 20px 20px; }
.jpo-sqd { position:absolute; }
.jpo-sqd.a { width:150px; height:150px; top:16%; right:-46px; background:rgba(255,255,255,.08); border:5px solid rgba(255,255,255,.22); transform:rotate(6deg); }
.jpo-sqd.b { width:110px; height:110px; bottom:14%; left:-34px; background:rgba(255,30,247,.20); border:5px solid rgba(255,255,255,.18); transform:rotate(-8deg); }

/* ---------- CTA générique ---------- */
.jpo-cta {
  font-family:var(--jpo-fd); text-transform:uppercase; letter-spacing:.05em; font-size:20px;
  background:var(--jpo-magenta); color:var(--jpo-white); border:4px solid var(--jpo-ink);
  box-shadow:6px 6px 0 var(--jpo-ink); padding:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:100%;
}
.jpo-cta .jpo-emo { width:26px; height:26px; }
.jpo-cta:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--jpo-ink); }
.jpo-cta.cyan { background:var(--jpo-green); color:var(--jpo-ink); }
.jpo-cta-block { margin-top:22px; }

/* ---------- point LIVE qui pulse ---------- */
.jpo-live-dot { width:10px; height:10px; border-radius:50%; background:var(--jpo-orange);
  box-shadow:0 0 0 3px rgba(255,95,58,.35); animation:jpoPulse 1.1s infinite; flex:0 0 auto; }
@keyframes jpoPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,95,58,.55); }
  70%  { box-shadow:0 0 0 9px rgba(255,95,58,0); }
  100% { box-shadow:0 0 0 0 rgba(255,95,58,0); }
}
@keyframes jpoPulseW {
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow:0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- décor Epitech partagé (carrés/traits blancs sur bleu) ---------- */
.jpo-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px); background-size:18px 18px; }
.jpo-dots.dark { background-image:radial-gradient(rgba(255,255,255,.10) 1.6px, transparent 1.6px); }
.jpo-stripes { position:absolute; inset:-25%; background:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 14px, transparent 14px 36px); }
.jpo-stripes.dark { background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 36px); }
.jpo-shape { position:absolute; border:4px solid rgba(255,255,255,.5); }
.jpo-deco-em { position:absolute; opacity:.16; }
@keyframes jpoFloatA { 0%,100%{ transform:translateY(0) rotate(-12deg); } 50%{ transform:translateY(-13px) rotate(-7deg); } }
@keyframes jpoFloatB { 0%,100%{ transform:translateY(0) rotate(11deg); } 50%{ transform:translateY(-15px) rotate(15deg); } }
@keyframes jpoFloatC { 0%,100%{ transform:translate(0,0) rotate(6deg); } 50%{ transform:translate(7px,-9px) rotate(1deg); } }
.jpo-float-a { animation:jpoFloatA 4.2s ease-in-out infinite; }
.jpo-float-b { animation:jpoFloatB 5.1s ease-in-out infinite; }
.jpo-float-c { animation:jpoFloatC 3.6s ease-in-out infinite; }
@keyframes jpoCtaPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }
@keyframes jpoMarquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   HERO d'accueil (#hvJpo) — "JPO EN DIRECT"
   ============================================================ */
#hvJpo {
  position:relative; overflow:hidden; cursor:pointer; margin-bottom:18px; display:block; max-width:100%;
  border:4px solid var(--jpo-white); background:var(--jpo-blue); color:var(--jpo-white);
  box-shadow:7px 7px 0 var(--jpo-magenta), 13px 13px 0 var(--jpo-ink);
  transform:rotate(-1deg); font-family:var(--jpo-fm); font-weight:500;
}
#hvJpo:active { transform:rotate(-1deg) translate(2px,2px); }
.jpo-mega-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.jpo-mega-deco .jpo-emo { position:absolute; opacity:.9; }
.jpo-mega-deco .jpo-float-a { width:70px; top:-8px; right:-6px; }
.jpo-mega-deco .jpo-float-b { width:54px; bottom:6px; right:14px; }
.jpo-mega-deco .jpo-float-c { width:46px; top:80px; left:-6px; }
.jpo-mega-body { position:relative; z-index:2; padding:16px 15px 18px; }
.jpo-mega-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; flex-wrap:wrap; }
.jpo-mega-live { display:inline-flex; align-items:center; gap:7px; font-family:var(--jpo-fd); font-size:12px; letter-spacing:.08em;
  background:var(--jpo-orange); color:var(--jpo-white); border:2px solid var(--jpo-white); padding:4px 9px; transform:rotate(2deg); }
.jpo-mega-live .jpo-live-dot { background:var(--jpo-white); box-shadow:0 0 0 3px rgba(255,255,255,.35); animation:jpoPulseW 1.1s infinite; }
.jpo-mega-title { font-family:var(--jpo-fd); font-size:37px; line-height:.9; letter-spacing:.02em; text-shadow:4px 4px 0 var(--jpo-magenta); margin-bottom:4px; word-break:break-word; }
.jpo-mega-title .cy { color:var(--jpo-green); }
.jpo-mega-title::after { content:'_'; color:var(--jpo-green); }
.jpo-mega-tags { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0 15px; }
.jpo-tag-chip { font-family:var(--jpo-fd); font-size:12px; letter-spacing:.03em; border:3px solid var(--jpo-ink); padding:6px 10px;
  box-shadow:3px 3px 0 var(--jpo-ink); color:var(--jpo-ink); display:inline-flex; align-items:center; gap:6px; }
.jpo-tag-chip .jpo-emo { width:16px; height:16px; }
.jpo-tag-chip.yellow { background:var(--jpo-orange); color:var(--jpo-white); transform:rotate(-2deg); }
.jpo-tag-chip.cyan { background:var(--jpo-green); color:var(--jpo-ink); transform:rotate(1.5deg); }
.jpo-mega-cta { width:100%; max-width:100%; font-family:var(--jpo-fd); font-size:22px; letter-spacing:.04em; background:var(--jpo-magenta); color:var(--jpo-white);
  border:4px solid var(--jpo-white); padding:14px; box-shadow:5px 5px 0 var(--jpo-white); animation:jpoCtaPulse 1.5s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center; gap:10px; }
.jpo-mega-cta .jpo-emo { width:24px; height:24px; }

/* ============================================================
   1) ÉCRAN CODE
   ============================================================ */
.jpo-code-scroll { padding:calc(24px + env(safe-area-inset-top)) 20px 26px; background:var(--jpo-blue); color:var(--jpo-white); }
.jpo-code-top { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.jpo-code-cadenas { width:58px; height:58px; }
.jpo-code-title { font-family:var(--jpo-fd); font-size:26px; letter-spacing:.02em; line-height:1; }
.jpo-code-title::after { content:'_'; color:var(--jpo-green); }
.jpo-locks { display:flex; flex-direction:column; gap:9px; margin:20px 0; }
.jpo-lock-chip { display:flex; align-items:center; gap:10px; border:3px solid var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue);
  box-shadow:4px 4px 0 var(--jpo-ink); padding:10px 13px; font-size:12px; }
.jpo-lock-chip.ok { background:var(--jpo-green); color:var(--jpo-ink); }
.jpo-lock-chip.ko { background:var(--jpo-orange); color:var(--jpo-white); }
.jpo-lock-chip .jpo-emo { width:26px; height:26px; flex:0 0 auto; }
.jpo-lock-chip .jpo-lc-t { font-family:var(--jpo-fd); font-size:13px; letter-spacing:.03em; line-height:1; }
.jpo-lock-chip .jpo-lc-s { font-size:10px; margin-top:3px; opacity:.85; }
.jpo-code-lbl { font-family:var(--jpo-fd); font-size:13px; letter-spacing:.1em; margin-bottom:9px; }
.jpo-code-field { border:4px solid var(--jpo-ink); box-shadow:6px 6px 0 var(--jpo-ink); background:var(--jpo-white); }
.jpo-code-input { width:100%; max-width:100%; border:0; outline:0; background:transparent; text-align:center;
  font-family:var(--jpo-fd); font-size:34px; letter-spacing:.14em; padding:16px 10px; color:var(--jpo-blue); text-transform:uppercase; }
.jpo-code-input::placeholder { color:var(--jpo-grey); letter-spacing:.1em; }
.jpo-code-err { min-height:18px; margin-top:12px; text-align:center; font-size:12px; color:var(--jpo-orange); font-weight:700; }
.jpo-code-help { font-size:11px; opacity:.8; text-align:center; margin-top:14px; line-height:1.5; }
.jpo-shake { animation:jpoShake .38s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes jpoShake {
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-7px); } 40%,60%{ transform:translateX(7px); }
}

/* ============================================================
   2) GLITCH (transition ~1.3s) — reste sombre/parasité (voulu),
      mais atterrit sur du bleu Epitech.
   ============================================================ */
.jpo-glitch { background:var(--jpo-ink); }
.jpo-glitch-scene { position:absolute; inset:0; overflow:hidden; background:var(--jpo-ink); }
.jpo-glitch-shake { position:absolute; inset:0; }
.jpo-glitch-under { position:absolute; inset:0; padding:22px 16px; opacity:.30; filter:grayscale(.4) contrast(1.1); }
.jpo-gu-brand { font-family:var(--jpo-fd); font-size:20px; background:var(--jpo-white); color:var(--jpo-blue); display:inline-block; padding:3px 9px; margin-bottom:12px; }
.jpo-gu-row { height:56px; border:3px solid var(--jpo-white); margin-bottom:12px; display:flex; align-items:center; gap:10px; padding:0 12px; color:var(--jpo-white); }
.jpo-gu-row .jpo-gu-sq { width:40px; height:40px; border:3px solid var(--jpo-white); flex:0 0 auto; }
.jpo-gu-row .jpo-gu-ln { font-family:var(--jpo-fd); font-size:16px; }

.jpo-glitch-scan { position:absolute; inset:0; pointer-events:none; z-index:4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 2px, transparent 2px 4px); opacity:.55; }
.jpo-glitch-noise { position:absolute; inset:-40%; z-index:3; pointer-events:none; opacity:.14; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.jpo-glitch-bands { position:absolute; inset:0; z-index:2; pointer-events:none; }
.jpo-band { position:absolute; left:0; right:0; height:0; opacity:0; }
.jpo-band.b1 { top:22%; height:34px; background:var(--jpo-magenta); mix-blend-mode:screen; }
.jpo-band.b2 { top:48%; height:20px; background:var(--jpo-green); mix-blend-mode:screen; }
.jpo-band.b3 { top:66%; height:44px; background:var(--jpo-blue); mix-blend-mode:screen; }
.jpo-band.b4 { top:80%; height:14px; background:var(--jpo-orange); mix-blend-mode:screen; }

.jpo-glitch-term { position:absolute; left:16px; right:16px; top:14%; z-index:5; font-family:var(--jpo-fm); font-weight:600; }
.jpo-glitch-term .jpo-line { color:var(--jpo-white); font-size:14px; letter-spacing:.02em; margin-bottom:8px; opacity:0;
  text-shadow:0 0 6px var(--jpo-green), 1px 0 var(--jpo-magenta); }
.jpo-glitch-term .jpo-line.done { color:var(--jpo-white); text-shadow:0 0 8px var(--jpo-green); }

.jpo-glitch-title { position:absolute; top:40%; left:0; right:0; z-index:6; text-align:center;
  font-family:var(--jpo-fd); font-size:92px; letter-spacing:.08em; color:var(--jpo-white); opacity:0; }
.jpo-glitch-title::before, .jpo-glitch-title::after { content:attr(data-text); position:absolute; left:0; right:0; top:0; }
.jpo-glitch-title::before { color:var(--jpo-magenta); mix-blend-mode:screen; }
.jpo-glitch-title::after { color:var(--jpo-green); mix-blend-mode:screen; }

.jpo-glitch-flash { position:absolute; inset:0; z-index:8; background:var(--jpo-blue); color:var(--jpo-white); opacity:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px; }
.jpo-gf-jpo { font-family:var(--jpo-fd); font-size:96px; line-height:.9; letter-spacing:.06em; text-shadow:5px 5px 0 var(--jpo-ink); }
.jpo-gf-sub { font-family:var(--jpo-fd); font-size:15px; letter-spacing:.1em; background:var(--jpo-green); color:var(--jpo-ink); padding:6px 12px; border:2px solid var(--jpo-white); }

/* animations : ne tournent que pendant .jpo-glitching */
.jpo-glitching .jpo-glitch-shake { animation:jpoJitter .55s steps(1) 2 both, jpoFlicker 1.4s linear both; }
.jpo-glitching .jpo-glitch-noise { animation:jpoNoiseShift .18s steps(2) infinite; }
.jpo-glitching .jpo-band { animation:jpoBandSlide 1.35s steps(1) both; }
.jpo-glitching .jpo-band.b1 { animation-delay:.05s; }
.jpo-glitching .jpo-band.b2 { animation-delay:.22s; }
.jpo-glitching .jpo-band.b3 { animation-delay:.12s; }
.jpo-glitching .jpo-band.b4 { animation-delay:.30s; }
.jpo-glitching .jpo-glitch-term .jpo-line.l1 { animation:jpoLineIn .3s steps(1) .10s both; }
.jpo-glitching .jpo-glitch-term .jpo-line.l2 { animation:jpoLineIn .3s steps(1) .50s both; }
.jpo-glitching .jpo-glitch-term .jpo-line.l3 { animation:jpoLineIn .3s steps(1) .90s both; }
.jpo-glitching .jpo-glitch-title { animation:jpoTitleGlitch .8s steps(1) .55s both; }
.jpo-glitching .jpo-glitch-title::before { animation:jpoSplitR .28s steps(2) .55s 3 both; }
.jpo-glitching .jpo-glitch-title::after { animation:jpoSplitC .28s steps(2) .55s 3 both; }
.jpo-glitching .jpo-glitch-flash { animation:jpoFlashReveal 1.5s ease both; }

@keyframes jpoJitter {
  0%{ transform:translate(0,0) skewX(0); } 12%{ transform:translate(-4px,2px) skewX(4deg); }
  24%{ transform:translate(5px,-3px) skewX(-5deg); } 36%{ transform:translate(-6px,1px) skewX(3deg); }
  48%{ transform:translate(4px,4px) skewX(-2deg); } 60%{ transform:translate(-3px,-4px) skewX(6deg); }
  72%{ transform:translate(6px,1px) skewX(-4deg); } 84%{ transform:translate(-2px,3px) skewX(2deg); }
  100%{ transform:translate(0,0) skewX(0); }
}
@keyframes jpoFlicker {
  0%,100%{ opacity:1; } 4%{ opacity:.35; } 8%{ opacity:1; } 14%{ opacity:.7; } 20%{ opacity:1; }
  42%{ opacity:.5; } 46%{ opacity:1; } 70%{ opacity:.8; } 74%{ opacity:1; }
}
@keyframes jpoNoiseShift { 0%{ transform:translate(0,0); } 50%{ transform:translate(-12px,8px); } 100%{ transform:translate(10px,-6px); } }
@keyframes jpoBandSlide {
  0%{ opacity:0; transform:translateX(0); } 10%{ opacity:.85; transform:translateX(-40%); }
  20%{ transform:translateX(30%); } 32%{ transform:translateX(-18%); } 46%{ transform:translateX(22%); }
  60%{ opacity:.85; transform:translateX(-8%); } 74%{ opacity:.5; transform:translateX(0); } 100%{ opacity:0; transform:translateX(0); }
}
@keyframes jpoLineIn { 0%{ opacity:0; transform:translateX(-6px); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes jpoTitleGlitch {
  0%{ opacity:0; } 10%{ opacity:1; transform:translate(-4px,2px); } 25%{ transform:translate(5px,-2px); }
  40%{ transform:translate(-3px,1px); } 55%{ transform:translate(2px,0); } 100%{ opacity:1; transform:translate(0,0); }
}
@keyframes jpoSplitR { 0%,100%{ transform:translate(-4px,2px); } 50%{ transform:translate(-8px,-2px); } }
@keyframes jpoSplitC { 0%,100%{ transform:translate(4px,-2px); } 50%{ transform:translate(8px,3px); } }
@keyframes jpoFlashReveal {
  0%,72%{ opacity:0; }
  74%{ opacity:1; background:var(--jpo-white); }
  77%{ opacity:0; }
  80%{ opacity:1; background:var(--jpo-green); }
  83%{ opacity:0; }
  86%{ opacity:1; background:var(--jpo-white); }
  89%{ opacity:1; background:var(--jpo-blue); }
  100%{ opacity:1; background:var(--jpo-blue); }
}

/* ============================================================
   3) SPLASH JPO
   ============================================================ */
.jpo-splash-scene { position:absolute; inset:0; background:var(--jpo-blue); overflow:hidden; display:flex; flex-direction:column; }
.jpo-splash-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.jpo-splash-deco .jpo-shape.s1 { width:110px; height:110px; top:40px; left:-34px; border-color:rgba(255,255,255,.5); transform:rotate(16deg); }
.jpo-splash-deco .jpo-shape.s2 { width:80px; height:80px; bottom:120px; right:-24px; border-color:rgba(255,30,247,.5); transform:rotate(-12deg); }
.jpo-splash-deco .jpo-shape.s3 { width:52px; height:52px; top:120px; right:26px; border-color:rgba(0,255,151,.5); transform:rotate(24deg); }
.jpo-splash-deco .e1 { width:56px; top:70px; right:8px; }
.jpo-splash-deco .e2 { width:48px; bottom:150px; left:10px; }
.jpo-splash-deco .e3 { width:44px; bottom:200px; right:20px; }
.jpo-splash-scan { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 2px, transparent 2px 4px); }
.jpo-splash-scene.jpo-playing .jpo-splash-scan { animation:jpoScanFade 1.7s ease-out forwards; }
@keyframes jpoScanFade { 0%{ opacity:.5; } 100%{ opacity:0; } }
.jpo-splash-content { position:relative; z-index:3; flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:13px; padding:24px 22px; text-align:center; overflow-y:auto; overflow-x:hidden; }
.jpo-splash-badge { font-family:var(--jpo-fd); font-size:13px; letter-spacing:.14em; background:var(--jpo-green); color:var(--jpo-ink);
  border:3px solid var(--jpo-ink); box-shadow:4px 4px 0 var(--jpo-ink); padding:5px 13px; transform:rotate(-3deg); }
.jpo-splash-logo-row { display:flex; align-items:center; gap:10px; }
.jpo-splash-logo { position:relative; display:inline-block; font-family:var(--jpo-fd); font-size:52px; letter-spacing:.01em; color:var(--jpo-white); text-shadow:3px 3px 0 var(--jpo-ink); }
.jpo-splash-logo::before, .jpo-splash-logo::after { content:attr(data-text); position:absolute; left:0; top:0; text-shadow:none; opacity:0; }
.jpo-splash-scene.jpo-playing .jpo-splash-logo::before { color:var(--jpo-magenta); animation:jpoResidR 1.5s steps(2) 1 both; }
.jpo-splash-scene.jpo-playing .jpo-splash-logo::after { color:var(--jpo-green); animation:jpoResidC 1.5s steps(2) 1 both; }
@keyframes jpoResidR { 0%{ transform:translate(-9px,3px); opacity:.9; } 35%{ transform:translate(-5px,-2px); opacity:.8; } 70%{ transform:translate(-2px,1px); opacity:.4; } 100%{ transform:translate(0,0); opacity:0; } }
@keyframes jpoResidC { 0%{ transform:translate(9px,-3px); opacity:.9; } 35%{ transform:translate(5px,2px); opacity:.8; } 70%{ transform:translate(2px,-1px); opacity:.4; } 100%{ transform:translate(0,0); opacity:0; } }
.jpo-splash-sq { width:22px; height:22px; background:var(--jpo-magenta); border:3px solid var(--jpo-white); transform:rotate(8deg); }
.jpo-splash-mascot { width:104px; height:104px; }
.jpo-splash-welcome { font-family:var(--jpo-fd); font-size:33px; line-height:.94; color:var(--jpo-white); text-shadow:4px 4px 0 var(--jpo-ink); margin-top:2px; word-break:break-word; }
.jpo-splash-welcome::after { content:'_'; color:var(--jpo-green); }
.jpo-splash-sub { font-size:12px; color:rgba(255,255,255,.85); letter-spacing:.05em; font-weight:600; }
.jpo-splash-stats { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.jpo-sstat { background:var(--jpo-white); color:var(--jpo-blue); border:3px solid var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-ink); padding:6px 10px; min-width:70px; }
.jpo-sstat:nth-child(2) { transform:rotate(-2deg); }
.jpo-sstat:nth-child(3) { transform:rotate(2deg); }
.jpo-sstat .v { font-family:var(--jpo-fd); font-size:20px; line-height:1; }
.jpo-sstat .l { font-size:8px; letter-spacing:.05em; color:#4a5aa8; margin-top:2px; }
.jpo-splash-scene .jpo-cta-wrap { position:relative; z-index:3; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:3px solid var(--jpo-white); background:var(--jpo-blue); flex:0 0 auto; }

/* ============================================================
   4) HUB (arcade)
   ============================================================ */
.jpo-hub { background:var(--jpo-blue); }
.jpo-hub-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.jpo-hub-deco .h1 { width:60px; top:200px; right:-8px; }
.jpo-hub-deco .h2 { width:48px; top:430px; left:-6px; }
.jpo-hub-deco .h3 { width:44px; bottom:60px; right:12px; }
.jpo-hub-head { position:relative; z-index:2; background:var(--jpo-ink); color:var(--jpo-white);
  padding:calc(11px + env(safe-area-inset-top)) 14px 11px 60px; display:flex; align-items:center; gap:10px; border-bottom:3px solid var(--jpo-white); }
.jpo-hub-head .jpo-epi-logo { margin-left:auto; }
.jpo-hub-livebar { position:relative; z-index:2; display:flex; align-items:center; gap:9px; background:var(--jpo-magenta); color:var(--jpo-white);
  border-bottom:3px solid var(--jpo-ink); padding:7px 13px; font-family:var(--jpo-fd); font-size:11px; letter-spacing:.04em; flex-wrap:wrap; }
.jpo-hub-livebar .jpo-seg { display:inline-flex; align-items:center; gap:5px; }
.jpo-hub-livebar .jpo-seg .jpo-emo { width:14px; height:14px; }
.jpo-hub-livebar .jpo-sep { opacity:.45; }
.jpo-hub-livebar .jpo-live-dot { background:var(--jpo-white); box-shadow:0 0 0 3px rgba(255,255,255,.35); animation:jpoPulseW 1.1s infinite; }

.jpo-ticker { position:relative; z-index:2; overflow:hidden; border-bottom:3px solid var(--jpo-white); background:var(--jpo-ink); color:var(--jpo-white); }
.jpo-ticker .jpo-track { display:inline-flex; white-space:nowrap; animation:jpoMarquee 13s linear infinite; will-change:transform; }
.jpo-ticker .jpo-track span { padding:7px 16px; font-family:var(--jpo-fd); font-size:11.5px; letter-spacing:.06em; display:inline-flex; align-items:center; gap:7px; }
.jpo-ticker .jpo-track span em { color:var(--jpo-green); font-style:normal; }
.jpo-ticker .jpo-track .jpo-emo { width:16px; height:16px; }

.jpo-hub-scroll { position:relative; z-index:2; padding:14px 14px calc(18px + env(safe-area-inset-bottom)); background:transparent; display:flex; flex-direction:column; }
.jpo-hub-hello { font-family:var(--jpo-fd); font-size:24px; letter-spacing:.02em; line-height:1; margin:2px 2px 14px; color:var(--jpo-white); flex:0 0 auto; }
.jpo-hub-hello .mg { color:var(--jpo-magenta); }
.jpo-hub-hello::after { content:'_'; color:var(--jpo-green); }

/* CRÉER (magenta) / REJOINDRE (orange) = grandes cartes qui remplissent l'écran.
   Bordure blanche + double ombre encre pour détacher du fond bleu, gros emoji
   animé en bas à droite, logo + rôle en haut, gros titre, chips boîte blanche. */
.jpo-choices { display:flex; flex-direction:column; gap:16px; flex:1 1 auto; min-height:0; }
.jpo-choice { position:relative; cursor:pointer; overflow:hidden; flex:1 1 0; min-height:0;
  border:4px solid var(--jpo-white); box-shadow:6px 6px 0 var(--jpo-ink), 11px 11px 0 rgba(0,0,0,.35);
  transition:transform .08s ease; }
.jpo-choice:active { transform:translate(2px,2px); }
.jpo-choice.create { background:var(--jpo-magenta); color:var(--jpo-white); }
.jpo-choice.join   { background:var(--jpo-orange);  color:var(--jpo-white); }
/* IDENTIFICATION HÔTE / JOUEUR PAR LA TAILLE D'ÉCRAN :
   • mobile (≤700px) → seulement REJOINDRE (le visiteur est JOUEUR)
   • tablette / PC (≥701px) → CRÉER + REJOINDRE (peut être HÔTE = grand écran) */
@media (max-width:700px) {
  #jpoStage .jpo-choice.create { display:none; }
}
.jpo-card-deco { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, transparent 2px 24px); }
.jpo-choice .jpo-bgem { position:absolute; right:-10px; bottom:-14px; z-index:1; pointer-events:none;
  width:clamp(140px,50%,220px); height:auto; opacity:.92; transform:rotate(-6deg); }
.jpo-card-in { position:relative; z-index:2; height:100%; padding:16px 15px; display:flex; flex-direction:column; gap:12px; }
.jpo-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.jpo-card-role { display:inline-flex; align-items:center; gap:6px; font-family:var(--jpo-fd); font-size:11px; letter-spacing:.06em;
  background:var(--jpo-ink); color:var(--jpo-white); border:2px solid var(--jpo-white); padding:4px 9px; }
.jpo-card-ttl { font-family:var(--jpo-fd); font-size:clamp(32px,9.5vw,46px); line-height:.9; letter-spacing:.01em;
  color:var(--jpo-white); text-shadow:4px 4px 0 var(--jpo-ink); }
.jpo-card-ttl .cy, .jpo-card-ttl::after { color:var(--jpo-green); }
.jpo-card-ttl::after { content:'_'; }
.jpo-card-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.jpo-card-chip { font-family:var(--jpo-fd); font-size:12px; letter-spacing:.03em; border:3px solid var(--jpo-ink);
  padding:6px 10px; box-shadow:3px 3px 0 var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue); }

.jpo-hub-sec { font-family:var(--jpo-fd); font-size:14px; letter-spacing:.04em; margin:22px 0 12px; display:inline-flex; align-items:center; gap:8px;
  background:var(--jpo-ink); color:var(--jpo-white); padding:6px 11px; box-shadow:4px 4px 0 var(--jpo-magenta); }
.jpo-hub-sec .jpo-emo { width:18px; height:18px; }
.jpo-hub-sec.cy { box-shadow:4px 4px 0 var(--jpo-green); }
.jpo-hub-sec.gr { box-shadow:4px 4px 0 var(--jpo-orange); }

/* titre + sous-titre d'écran (CHOISIS LE MODE) */
.jpo-scr-ttl { font-family:var(--jpo-fd); font-size:25px; letter-spacing:.02em; color:var(--jpo-white); line-height:1; margin:2px 0 3px; }
.jpo-scr-ttl::after { content:'_'; color:var(--jpo-green); }
.jpo-scr-sub { font-size:12px; font-weight:600; color:#cdd8ff; margin:0 0 14px; line-height:1.4; }

.jpo-omodes { display:flex; flex-direction:column; gap:11px; }
.jpo-otx { flex:1; min-width:0; }
.jpo-omode { position:relative; border:4px solid var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue); box-shadow:5px 5px 0 var(--jpo-ink); padding:11px 12px; display:flex; align-items:center; gap:12px; }
.jpo-oem { width:50px; height:50px; flex:0 0 auto; border:3px solid var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden; transform:rotate(-4deg); }
.jpo-oem .jpo-emo { width:38px; height:38px; }
.jpo-on { font-family:var(--jpo-fd); font-size:18px; letter-spacing:.02em; line-height:1; }
.jpo-op { font-size:10px; color:#4a5aa8; margin-top:4px; line-height:1.3; }
.jpo-otag { margin-left:auto; flex:0 0 auto; align-self:flex-start; font-family:var(--jpo-fd); font-size:9px; letter-spacing:.04em; padding:3px 7px; border:2px solid var(--jpo-ink); box-shadow:2px 2px 0 var(--jpo-ink); }
.jpo-omode.o-buzzer .jpo-oem { background:var(--jpo-green); } .jpo-omode.o-buzzer .jpo-otag { background:var(--jpo-green); color:var(--jpo-ink); }
.jpo-omode.o-bombe .jpo-oem { background:var(--jpo-orange); } .jpo-omode.o-bombe .jpo-otag { background:var(--jpo-orange); color:var(--jpo-white); }
.jpo-omode.o-teams .jpo-oem { background:var(--jpo-blue); } .jpo-omode.o-teams .jpo-otag { background:var(--jpo-blue); color:var(--jpo-white); }
.jpo-omode.o-piscine .jpo-oem { background:var(--jpo-green); } .jpo-omode.o-piscine .jpo-otag { background:var(--jpo-green); color:var(--jpo-ink); }
.jpo-omode.o-classique .jpo-oem { background:var(--jpo-magenta); } .jpo-omode.o-classique .jpo-otag { background:var(--jpo-magenta); color:var(--jpo-white); }
.jpo-omode.o-marathon .jpo-oem { background:var(--jpo-orange); } .jpo-omode.o-marathon .jpo-otag { background:var(--jpo-orange); color:var(--jpo-white); }
.jpo-omode.o-wager .jpo-oem { background:var(--jpo-magenta); } .jpo-omode.o-wager .jpo-otag { background:var(--jpo-magenta); color:var(--jpo-white); }

.jpo-badges-band { display:flex; gap:11px; overflow-x:auto; padding:2px 0 6px; }
.jpo-badges-band::-webkit-scrollbar { height:0; }
.jpo-badge-mini { flex:0 0 auto; width:76px; text-align:center; }
.jpo-badge-mini .jpo-bi { width:58px; height:58px; margin:0 auto 6px; border:3px solid var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-green);
  background:var(--jpo-white); display:flex; align-items:center; justify-content:center; position:relative; transform:rotate(-3deg); }
.jpo-badge-mini .jpo-bi .jpo-emo { width:40px; height:40px; }
.jpo-badge-mini.locked .jpo-bi { box-shadow:3px 3px 0 var(--jpo-ink); }
.jpo-badge-mini.locked .jpo-bi .jpo-emo { filter:grayscale(1); opacity:.45; }
.jpo-badge-mini.locked .jpo-bi::after { content:'🔒'; position:absolute; right:-8px; bottom:-8px; font-size:16px; background:var(--jpo-white);
  border:2px solid var(--jpo-ink); width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.jpo-badge-mini .jpo-bn { font-family:var(--jpo-fm); font-weight:600; font-size:8.5px; line-height:1.2; letter-spacing:.02em; color:var(--jpo-white); }

/* ============================================================
   5) REJOINDRE JPO (skin event)
   ============================================================ */
.jpo-join { background:var(--jpo-blue); }
.jpo-join-head { display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px; border-bottom:3px solid var(--jpo-white); background:var(--jpo-ink); color:var(--jpo-white); flex:0 0 auto; }
.jpo-back { font-family:var(--jpo-fm); font-weight:700; font-size:26px; line-height:1; border:3px solid var(--jpo-white); background:var(--jpo-white); color:var(--jpo-blue); box-shadow:3px 3px 0 var(--jpo-ink); width:36px; height:36px; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.jpo-back.jpo-x { font-size:18px; }   /* ✕ un peu plus petit que le chevron ‹ */
.jpo-back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--jpo-ink); }
.jpo-role { margin-left:auto; font-family:var(--jpo-fd); font-size:13px; background:var(--jpo-green); color:var(--jpo-ink); padding:4px 9px; box-shadow:3px 3px 0 var(--jpo-ink); }
.jpo-join-head .jpo-head-logo { margin-left:auto; display:inline-flex; align-items:center; }

.jpo-join-scroll { position:relative; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); background:var(--jpo-blue); color:var(--jpo-white); }
.jpo-scan-soft { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px); opacity:.8; }
.jpo-join-scroll > * { position:relative; z-index:1; }
.jpo-ev-band { display:flex; align-items:center; gap:8px; background:var(--jpo-ink); color:var(--jpo-white); border:3px solid var(--jpo-white);
  box-shadow:4px 4px 0 var(--jpo-magenta); padding:8px 11px; margin-bottom:14px; transform:rotate(-1deg); }
.jpo-ev-band .jpo-emo { width:22px; height:22px; }
.jpo-ev-band .jpo-em { font-family:var(--jpo-fd); font-size:14px; letter-spacing:.04em; }
.jpo-ev-band .jpo-em .mg { color:var(--jpo-magenta); }
.jpo-ev-band .jpo-live-dot { margin-left:auto; }
.jpo-rgb-title { position:relative; display:inline-block; font-family:var(--jpo-fd); font-size:26px; letter-spacing:.02em; color:var(--jpo-white); line-height:1; }
.jpo-rgb-title::before, .jpo-rgb-title::after { content:attr(data-text); position:absolute; left:0; top:0; overflow:hidden; pointer-events:none; }
.jpo-rgb-title::before { color:var(--jpo-magenta); animation:jpoRgbA 3.2s steps(2) infinite; opacity:.85; }
.jpo-rgb-title::after { color:var(--jpo-green); animation:jpoRgbB 3.2s steps(2) infinite; opacity:.85; }
@keyframes jpoRgbA { 0%,90%,100%{ transform:translate(-2px,0); clip-path:inset(0 0 60% 0); } 93%{ transform:translate(-5px,1px); } 96%{ transform:translate(-1px,-1px); clip-path:inset(40% 0 0 0); } }
@keyframes jpoRgbB { 0%,90%,100%{ transform:translate(2px,0); clip-path:inset(55% 0 0 0); } 93%{ transform:translate(5px,-1px); } 96%{ transform:translate(1px,1px); clip-path:inset(0 0 45% 0); } }
.jpo-join-note { font-size:11px; color:rgba(255,255,255,.8); line-height:1.4; margin-top:6px; }
.jpo-field-lbl { font-family:var(--jpo-fd); font-size:12px; letter-spacing:.1em; margin:16px 0 8px; display:flex; align-items:center; gap:7px; }
.jpo-field-lbl .jpo-emo { width:18px; height:18px; }
.jpo-pin-field { border:4px solid var(--jpo-ink); box-shadow:6px 6px 0 var(--jpo-ink); background:var(--jpo-magenta); }
.jpo-pin-input { width:100%; max-width:100%; border:0; outline:0; background:transparent; text-align:center; color:var(--jpo-white);
  font-family:var(--jpo-fd); font-size:44px; letter-spacing:.16em; padding:16px 10px; }
.jpo-pin-input::placeholder { color:rgba(255,255,255,.55); }
.jpo-pseudo-field { border:4px solid var(--jpo-ink); box-shadow:5px 5px 0 var(--jpo-ink); background:var(--jpo-white); }
.jpo-pseudo-input { width:100%; max-width:100%; border:0; outline:0; background:transparent; color:var(--jpo-blue); text-transform:uppercase;
  font-family:var(--jpo-fd); font-size:22px; letter-spacing:.02em; padding:12px 14px; }
.jpo-pseudo-input::placeholder { color:var(--jpo-grey); }
.jpo-mini-note { font-size:10px; color:rgba(255,255,255,.75); margin-top:14px; text-align:center; line-height:1.5; }

/* titre REJOINDRE net (remplace l'ancien RGB glitché) */
.jpo-join-ttl { font-family:var(--jpo-fd); font-size:38px; line-height:.95; letter-spacing:.02em; color:var(--jpo-white); margin:2px 0 0; }
.jpo-join-ttl::after { content:'_'; color:var(--jpo-green); }

/* ② Sélecteur d'avatar inline (TON PERSONNAGE) — skin brutalist JPO */
.jpo-ava-card { background:var(--jpo-white); border:4px solid var(--jpo-ink); box-shadow:5px 5px 0 var(--jpo-ink); padding:12px; }
.jpo-ava-top { display:flex; gap:12px; align-items:stretch; }
.jpo-ava-prev { width:74px; height:74px; flex:0 0 auto; border:3px solid var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-ink); overflow:hidden; font-size:46px; background:var(--jpo-white); }
.jpo-ava-prev .ava-emo { width:100%; height:100%; border:0; }
.jpo-ava-rnd { flex:1; border:3px solid var(--jpo-ink); background:var(--jpo-green); color:var(--jpo-ink); box-shadow:3px 3px 0 var(--jpo-ink);
  font-family:var(--jpo-fd); font-size:15px; letter-spacing:.03em; padding:10px 12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.jpo-ava-rnd .jpo-emo { width:20px; height:20px; }
.jpo-ava-rnd:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--jpo-ink); }
.jpo-ava-colors { display:flex; gap:7px; margin-top:11px; flex-wrap:wrap; }
.jpo-sw { width:30px; height:30px; flex:0 0 auto; border:3px solid var(--jpo-ink); padding:0; cursor:pointer; }
.jpo-sw.sel { box-shadow:0 0 0 3px var(--jpo-magenta); }
.jpo-ava-faces { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.jpo-face { width:52px; height:52px; flex:0 0 auto; border:3px solid var(--jpo-ink); background:var(--jpo-white); padding:0; overflow:hidden; cursor:pointer; font-size:30px; }
.jpo-face .ava-emo { width:100%; height:100%; border:0; }
.jpo-face.sel { box-shadow:0 0 0 3px var(--jpo-magenta); }

/* ① CARTE HUB REJOINDRE (mobile) — remplie : plus de grand vide orange */
.jpo-joincard { justify-content:space-between; gap:10px; }
.jpo-joincard-head { display:flex; flex-direction:column; gap:11px; }
.jpo-joincard-head .jpo-card-chips { margin-top:2px; }
.jpo-joincard-accroche { font-family:var(--jpo-fm); font-weight:600; font-size:13px; line-height:1.45; color:rgba(255,255,255,.94); }
.jpo-card-chip.dark { background:var(--jpo-ink); color:var(--jpo-white); border-color:var(--jpo-white); }
.jpo-joincard-target { text-align:center; line-height:0; }
.jpo-joincard-target .jpo-emo { width:clamp(84px,28vw,128px); height:clamp(84px,28vw,128px); }
.jpo-joincard-cta { display:flex; align-items:center; justify-content:center; gap:9px; font-family:var(--jpo-fd); font-size:21px; letter-spacing:.04em;
  background:var(--jpo-ink); color:var(--jpo-white); border:4px solid var(--jpo-white); box-shadow:6px 6px 0 rgba(0,0,0,.35); padding:14px; }
.jpo-joincard-cta .jpo-emo { width:24px; height:24px; }

/* ============================================================
   Responsive / grands écrans — on garde le contenu centré et lisible.
   (mobile-first : tout est déjà en 100% de large)
   ============================================================ */
@media (min-width:560px) {
  #jpoStage .jpo-scroll { padding-left:max(24px, calc((100% - 520px) / 2)); padding-right:max(24px, calc((100% - 520px) / 2)); }
  #jpoStage .jpo-splash-content { max-width:520px; margin:0 auto; }
}

/* ============================================================
   ÉCRAN CONFIG (création JPO : nb questions + timer) — charte Epitech
   ============================================================ */
.jpo-cta.magenta { background:var(--jpo-magenta); color:var(--jpo-white); }
.jpo-cfg-mode { display:flex; align-items:center; gap:13px; border:4px solid var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue); box-shadow:6px 6px 0 var(--jpo-green); padding:13px; margin:4px 0 6px; max-width:100%; }
.jpo-cfg-mode .jpo-oem { width:50px; height:50px; flex-shrink:0; border:3px solid var(--jpo-ink); background:var(--jpo-green); display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--jpo-ink); transform:rotate(-4deg); }
.jpo-cfg-mode .jpo-oem .jpo-emo { width:32px; height:32px; }
.jpo-cfg-mode .jpo-on { font-family:var(--jpo-fd); font-size:20px; letter-spacing:1px; color:var(--jpo-blue); }
.jpo-cfg-mode .jpo-op { font-family:var(--jpo-fm); font-weight:500; font-size:11px; color:#4a5aa8; }
.jpo-cfg-mode .jpo-otag { margin-left:auto; align-self:center; }
/* couleur de la boîte-emoji + tag selon le mode sélectionné */
.jpo-cfg-mode.o-buzzer .jpo-oem, .jpo-cfg-mode.o-piscine .jpo-oem { background:var(--jpo-green); }
.jpo-cfg-mode.o-bombe .jpo-oem, .jpo-cfg-mode.o-marathon .jpo-oem { background:var(--jpo-orange); }
.jpo-cfg-mode.o-teams .jpo-oem { background:var(--jpo-blue); }
.jpo-cfg-mode.o-classique .jpo-oem, .jpo-cfg-mode.o-wager .jpo-oem { background:var(--jpo-magenta); }
.jpo-cfg-mode.o-buzzer .jpo-otag, .jpo-cfg-mode.o-piscine .jpo-otag { background:var(--jpo-green); color:var(--jpo-ink); }
.jpo-cfg-mode.o-bombe .jpo-otag, .jpo-cfg-mode.o-marathon .jpo-otag { background:var(--jpo-orange); color:var(--jpo-white); }
.jpo-cfg-mode.o-teams .jpo-otag { background:var(--jpo-blue); color:var(--jpo-white); }
.jpo-cfg-mode.o-classique .jpo-otag, .jpo-cfg-mode.o-wager .jpo-otag { background:var(--jpo-magenta); color:var(--jpo-white); }
/* chips alignées en grille 4 colonnes égales */
.jpo-cfg-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:2px 0 6px; }
.jpo-cfg-chip { font-family:var(--jpo-fd); font-size:20px; text-align:center; padding:15px 4px; border:3px solid var(--jpo-ink); background:var(--jpo-white); color:var(--jpo-blue); box-shadow:4px 4px 0 var(--jpo-ink); cursor:pointer; }
.jpo-cfg-chip.on { background:var(--jpo-magenta); color:var(--jpo-white); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--jpo-ink); }
.jpo-cfg-note { font-family:var(--jpo-fm); font-weight:500; font-size:12px; color:rgba(255,255,255,.85); margin:14px 0 2px; display:flex; align-items:center; gap:7px; }
.jpo-cfg-note .jpo-emo { width:16px; height:16px; }

/* ============================================================
   ADAPTATIONS GRANDS ÉCRANS (hôte = PC / grand écran + joueur web)
   -----------------------------------------------------------------
   RÈGLE PROJET : la base mobile (PWA installée) reste INTOUCHÉE.
   TOUT ce qui suit vit UNIQUEMENT dans des @media (min-width:…).
   Les écrans CRÉER / CONFIG / REJOINDRE partagent la classe de
   scène .jpo-join et le conteneur .jpo-join-scroll : on les
   distingue par leur contenu via :has(...) pour caler chaque
   largeur/grille indépendamment.
   ============================================================ */
@media (min-width:760px) {
  /* HÔTE = PC / GRAND ÉCRAN : sections LARGES + éléments AGRANDIS (lisibles de loin).
     Tailles en clamp(vw) → montent avec l'écran. Le REJOINDRE (joueur = mobile) reste compact. */

  /* --- 1) HUB « BIENVENUE À LA JPO » : 2 grandes cartes côte à côte --- */
  #jpoStage .jpo-hub-scroll {
    padding-left:max(32px, calc((100% - min(94vw, 1500px)) / 2));
    padding-right:max(32px, calc((100% - min(94vw, 1500px)) / 2));
  }
  #jpoStage .jpo-hub-scroll .jpo-choices { flex:0 0 auto; flex-direction:row; align-items:stretch; gap:clamp(22px,2.4vw,40px); }
  #jpoStage .jpo-hub-scroll .jpo-choice { flex:1 1 0; min-height:min(62vh, 500px); }
  #jpoStage .jpo-hub-scroll .jpo-card-ttl { font-size:clamp(34px, 3.6vw, 64px); }
  #jpoStage .jpo-hub-scroll .jpo-bgem { width:clamp(120px,15vw,240px); height:clamp(120px,15vw,240px); }

  /* --- 2) CHOISIS LE MODE : grille 2×2 LARGE, cartes GRANDES --- */
  #jpoStage .jpo-join-scroll:has(.jpo-omodes) {
    padding-left:max(32px, calc((100% - min(92vw, 1280px)) / 2));
    padding-right:max(32px, calc((100% - min(92vw, 1280px)) / 2));
  }
  .jpo-omodes { display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(18px,2vw,28px); }
  .jpo-omode { min-width:0; padding:clamp(20px,2.2vw,34px) clamp(22px,2.4vw,36px); gap:clamp(16px,1.6vw,26px); box-shadow:8px 8px 0 var(--jpo-ink); }
  .jpo-omode .jpo-oem { width:clamp(72px,7vw,108px); height:clamp(72px,7vw,108px); }
  .jpo-omode .jpo-oem .jpo-emo { width:72%; height:72%; }
  .jpo-omode .jpo-on { font-size:clamp(24px,2.4vw,42px); line-height:1.05; }
  .jpo-omode .jpo-op { font-size:clamp(13px,1.1vw,19px); margin-top:4px; }
  .jpo-omode .jpo-otag { font-size:clamp(11px,1vw,15px); padding:5px 11px; }
  .jpo-omode .jpo-oarr { font-size:clamp(26px,2.4vw,44px); }

  /* --- 3) CONFIG : conteneur large + chips GRANDES --- */
  #jpoStage .jpo-join-scroll:has(.jpo-cfg-chips) {
    padding-left:max(32px, calc((100% - min(84vw, 1000px)) / 2));
    padding-right:max(32px, calc((100% - min(84vw, 1000px)) / 2));
  }
  .jpo-cfg-chips { gap:clamp(12px,1.4vw,20px); }
  .jpo-cfg-chip { font-size:clamp(22px,2.2vw,38px); padding:clamp(18px,2vw,30px) 6px; }

  /* --- 4) REJOINDRE (joueur = mobile) : reste une colonne compacte, ne s'étire pas --- */
  #jpoStage .jpo-join-scroll:has(.jpo-pin-field) {
    padding-left:max(24px, calc((100% - 560px) / 2));
    padding-right:max(24px, calc((100% - 560px) / 2));
  }
}