/* ============================================================
   JPO EPITECH — skin du LOBBY (event éphémère).
   Habille le SALON hôte (#screen-lobby) + l'attente joueur
   (#screen-wait) à la CHARTE OFFICIELLE EPITECH :
     • fond DOMINANT bleu #013afb, texte blanc #ffffff
     • sur carte claire → texte bleu #013afb (jamais blanc sur blanc)
     • accents : vert #00ff97 (JAMAIS en texte), orange #ff5f3a,
       magenta #ff1ef7 (50% opacité OK en décor)
     • typo : Anton (titres) + IBM Plex Sans (corps)
     • signature « _ » après les titres
     • décor : carrés/rectangles blancs & bleus 50% + traits
       diagonaux blancs

   ⚠ TOUT est scopé sous body.jpo-game — AUCUN sélecteur global,
   pour ne rien casser dans le jeu normal.
   ============================================================ */

/* Typo charte Epitech — @import en TÊTE (obligatoire avant toute règle). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------- variables charte Epitech ---------- */
body.jpo-game #screen-lobby,
body.jpo-game #screen-wait {
  --ep-blue:#013afb;        /* fond dominant / texte sur fond clair */
  --ep-blue-d:#0126a8;      /* bleu profond (ombres, profondeur) */
  --ep-white:#ffffff;       /* texte sur fond bleu / cartes claires */
  --ep-green:#00ff97;       /* accent — JAMAIS en texte */
  --ep-orange:#ff5f3a;      /* accent */
  --ep-magenta:#ff1ef7;     /* accent (50% opacité en décor) */
  --ep-ink:#041038;         /* encre sur carte claire (variante bleu très foncé) */
  --ep-grey:#c9d2ff;        /* désactivé/atténué sur fond bleu */
  --jg-fd:'Anton',sans-serif;
  --jg-fb:'IBM Plex Sans',sans-serif;
}

/* ---------- animations event ---------- */
@keyframes jgPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,95,58,.55); }
  70%  { box-shadow:0 0 0 10px rgba(255,95,58,0); }
  100% { box-shadow:0 0 0 0 rgba(255,95,58,0); }
}
@keyframes jgCtaPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.02); } }
@keyframes jgFloatA { 0%,100%{ transform:translateY(0) rotate(-12deg); } 50%{ transform:translateY(-16px) rotate(-6deg); } }
@keyframes jgFloatB { 0%,100%{ transform:translateY(0) rotate(11deg); } 50%{ transform:translateY(-18px) rotate(16deg); } }

/* ============================================================
   LOBBY HÔTE — body.jpo-game #screen-lobby
   ============================================================ */

/* fond charte : bleu dominant + traits diagonaux blancs */
body.jpo-game #screen-lobby {
  position:relative;
  overflow:hidden;
  background-color:var(--ep-blue);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
  color:var(--ep-white);
  font-family:var(--jg-fb);
  font-weight:500;
}

/* décor : carrés blancs / bleus 50% flottants (derrière le contenu) */
body.jpo-game #screen-lobby::before,
body.jpo-game #screen-lobby::after {
  content:'';
  position:absolute;
  z-index:0;
  pointer-events:none;
}
body.jpo-game #screen-lobby::before {
  width:150px; height:150px;
  top:15%; right:-46px;
  background:rgba(255,255,255,.10);
  border:5px solid rgba(255,255,255,.25);
  animation:jgFloatA 6s ease-in-out infinite;
}
body.jpo-game #screen-lobby::after {
  width:100px; height:100px;
  bottom:15%; left:-30px;
  background:rgba(255,30,247,.18);
  border:5px solid rgba(255,255,255,.20);
  animation:jgFloatB 7.4s ease-in-out infinite;
}

/* le contenu passe au-dessus du décor */
body.jpo-game #screen-lobby .lobby-body,
body.jpo-game #screen-lobby .lobby-footer {
  position:relative;
  z-index:2;
  background:transparent;
}
body.jpo-game #screen-lobby .lobby-body { padding-bottom:22px; }

/* ---------- bandeau de tête : ‹ retour · LOGO EPITECH centré · ✕ fermer ---------- */
body.jpo-game #screen-lobby .lobby-top {
  position:sticky;          /* header FIXE pendant le scroll du lobby */
  top:0;
  z-index:10;
  background:var(--ep-ink);
  border-bottom:3px solid var(--ep-white);
  padding:10px 12px;
  gap:10px;
  justify-content:flex-start;
}
/* garantit que c'est bien .lobby-body qui défile (le header reste collé en haut) */
body.jpo-game #screen-lobby .lobby-body { overflow-y:auto; }

/* titre « LE SALON » MASQUÉ : la maquette n'a que ‹ / logo / ✕ */
body.jpo-game #screen-lobby .lobby-top .page-title {
  font-size:0 !important;
  color:transparent !important;
  flex:0 0 0;
  width:0;
  padding:0;
  margin:0;
  overflow:hidden;
}
body.jpo-game #screen-lobby .lobby-top .page-title::before,
body.jpo-game #screen-lobby .lobby-top .page-title::after { content:none; display:none; }

/* VRAI logo Epitech (blanc) CENTRÉ + ombre noire dure */
body.jpo-game #screen-lobby .lobby-top::after {
  content:'';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:120px; height:24px;
  background:url('/logos/EPITECH-LOGO-BLANC-2025.png') no-repeat center/contain;
  filter:drop-shadow(3px 3px 0 #0A0A0A);
  pointer-events:none;
  z-index:1;
}

/* ordre : ‹ retour à GAUCHE, ✕ fermer poussé à DROITE */
body.jpo-game #screen-lobby .lobby-top .back-btn { order:0; }
body.jpo-game #screen-lobby .lobby-top .page-title { order:1; }
body.jpo-game #screen-lobby .lobby-top .lobby-close {
  order:2;
  margin-left:auto;
  display:flex !important;   /* ré-affiche le ✕ (masqué par le jeu normal) */
}

/* ‹ et ✕ = MÊME carré blanc bordé blanc, glyphe bleu centré */
body.jpo-game #screen-lobby .lobby-top .back-btn,
body.jpo-game #screen-lobby .lobby-top .lobby-close {
  position:relative;
  z-index:2;
  background:var(--ep-white);
  color:var(--ep-blue);
  border:3px solid var(--ep-white);
  border-radius:0;
  font-family:var(--jg-fb);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- CODE CARD : le PIN ÉNORME & central ---------- */
body.jpo-game #screen-lobby .code-card {
  margin:24px 16px 0;
}
body.jpo-game #screen-lobby .code-card::before {
  top:9px; left:9px; right:-9px; bottom:-9px;
  background:var(--ep-green);
}
/* carte claire : fond blanc, texte bleu partout */
body.jpo-game #screen-lobby .code-card .body {
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:4px solid #0A0A0A;
  background:var(--ep-white);
  padding:22px 18px 24px;
}
body.jpo-game #screen-lobby .code-card .left {
  width:100%;
  text-align:center;
}
body.jpo-game #screen-lobby .cc-lbl {
  font-family:var(--jg-fd);
  font-size:14px;
  letter-spacing:3px;
  color:var(--ep-blue);
  text-transform:uppercase;
}
/* signature « _ » après le libellé */
body.jpo-game #screen-lobby .cc-lbl::after {
  content:'_';
  color:var(--ep-magenta);
  margin-left:2px;
}
body.jpo-game #screen-lobby .code-big {
  font-family:var(--jg-fd);
  /* géant mais borné : ne déborde jamais la carte (mobile-first) */
  font-size:clamp(44px, 14vw, 92px);
  line-height:.9;
  letter-spacing:2px;
  color:var(--ep-blue);
  text-shadow:4px 4px 0 var(--ep-green);
  margin-top:4px;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.jpo-game #screen-lobby .cc-sub {
  font-family:var(--jg-fb);
  font-weight:600;
  font-size:12px;
  letter-spacing:.5px;
  color:var(--ep-blue);
  opacity:.8;
  margin-top:8px;
}

/* CORRECTIF #2 : on retire copier / partager / QR (pas nécessaires ici) */
body.jpo-game #screen-lobby .cc-actions { display:none !important; }

/* ---------- INVITER MES POTES : masqué en JPO ---------- */
body.jpo-game #screen-lobby .lobby-invite { display:none !important; }

/* ---------- QR (si affiché ailleurs) ---------- */
body.jpo-game #screen-lobby .lobby-qr {
  border:4px solid #0A0A0A;
  background:var(--ep-white);
  box-shadow:6px 6px 0 var(--ep-magenta);
}
/* badge « SCANNE-MOI » magenta, bordure noire, ombre noire */
body.jpo-game #screen-lobby .lobby-qr .qr-badge {
  background:var(--ep-magenta);
  color:var(--ep-white);
  border:3px solid #0A0A0A;
  box-shadow:3px 3px 0 #0A0A0A;
}
body.jpo-game #screen-lobby .lobby-qr .qr-txt { color:var(--ep-blue); }

/* ---------- CONFIG (mode + nb questions) — boîtes blanches bordées noir ---------- */
body.jpo-game #screen-lobby .config-chip .body {
  border:3px solid #0A0A0A;
  background:var(--ep-white);
  color:var(--ep-ink);
  font-family:var(--jg-fd);
  box-shadow:3px 3px 0 #0A0A0A;
}
body.jpo-game #screen-lobby .config-chip .body,
body.jpo-game #screen-lobby .config-chip .body * { color:var(--ep-ink); }

/* ---------- SECTION JOUEURS ---------- */
/* titres de section : blancs sur fond bleu + signature « _ » */
body.jpo-game #screen-lobby .section-title {
  margin:26px 16px 14px;
  color:var(--ep-white);
  font-family:var(--jg-fd);
}
body.jpo-game #screen-lobby .section-title,
body.jpo-game #screen-lobby .section-title * { color:var(--ep-white); }
body.jpo-game #screen-lobby .section-title .st-lbl::after,
body.jpo-game #screen-lobby .section-title > span:first-child::after {
  content:'_';
  color:var(--ep-green);
  margin-left:2px;
}

/* sticker « JOUEURS » : carte blanche bordée noir, texte bleu */
body.jpo-game #screen-lobby .st-sticker .body {
  border:3px solid #0A0A0A;
  background:var(--ep-white);
  color:var(--ep-blue);
  font-family:var(--jg-fd);
  box-shadow:3px 3px 0 #0A0A0A;
}
body.jpo-game #screen-lobby .st-sticker .body,
body.jpo-game #screen-lobby .st-sticker .body * { color:var(--ep-blue); }
/* compteur : accent vert en FOND, texte encre dessus (vert jamais en texte) */
body.jpo-game #screen-lobby .st-sticker.st-count .body {
  background:var(--ep-green);
  color:var(--ep-ink);
  font-family:var(--jg-fd);
  font-size:15px;
  padding:5px 14px;
  border:3px solid #0A0A0A;
  box-shadow:3px 3px 0 #0A0A0A;
}
body.jpo-game #screen-lobby .st-sticker.st-count .body,
body.jpo-game #screen-lobby .st-sticker.st-count .body * { color:var(--ep-ink); }

/* ---------- MUR DE JOUEURS ---------- */
body.jpo-game #screen-lobby .player-row::before { background:var(--ep-blue-d); }
/* carte joueur : fond blanc, bordure noire, texte encre (jamais blanc sur blanc) */
body.jpo-game #screen-lobby .player-row .body {
  border:3px solid #0A0A0A;
  background:var(--ep-white);
  color:var(--ep-ink);
  box-shadow:4px 4px 0 #0A0A0A;
}
/* premier arrivé : accent vert en FOND, texte foncé */
body.jpo-game #screen-lobby .player-row.first .body {
  background:var(--ep-green);
  color:var(--ep-ink);
}
body.jpo-game #screen-lobby .player-row.first .body .pr-name,
body.jpo-game #screen-lobby .player-row.first .body .pr-name * { color:var(--ep-ink) !important; }
/* nom du joueur : bat les pseudos colorés blancs (invisibles sur carte claire) */
body.jpo-game #screen-lobby .pr-name,
body.jpo-game #screen-lobby .pr-name * {
  font-family:var(--jg-fd);
  color:var(--ep-ink) !important;
}
body.jpo-game #screen-lobby .pr-desc,
body.jpo-game #screen-lobby .pr-flag,
body.jpo-game #screen-lobby .pr-xp2,
body.jpo-game #screen-lobby .dl-lv { color:var(--ep-blue); }
/* slots « EN ATTENTE… » : bleu atténué mais LISIBLE sur carte claire */
body.jpo-game #screen-lobby .pr-ph {
  color:var(--ep-blue);
  opacity:.55;
  font-family:var(--jg-fb);
  font-style:italic;
}
body.jpo-game #screen-lobby .pr-badge {
  background:var(--ep-blue);
  color:var(--ep-white);
  border:2px solid var(--ep-blue);
}

/* champ éventuel (input) : carte claire, texte bleu, placeholder lisible */
body.jpo-game #screen-lobby input,
body.jpo-game #screen-lobby input[type="text"] {
  background:var(--ep-white);
  color:var(--ep-blue);
  border:3px solid var(--ep-blue);
  font-family:var(--jg-fb);
}
body.jpo-game #screen-lobby input::placeholder { color:var(--ep-blue); opacity:.5; }

/* bouton AJOUTER UN BOT : carte claire, bordure noire, texte bleu */
body.jpo-game #screen-lobby .lcta-bot .body {
  border:3px solid #0A0A0A;
  background:var(--ep-white);
  color:var(--ep-blue);
  font-family:var(--jg-fd);
  box-shadow:4px 4px 0 #0A0A0A;
}
body.jpo-game #screen-lobby .lcta-bot .body,
body.jpo-game #screen-lobby .lcta-bot .body * { color:var(--ep-blue); }

/* ---------- FOOTER : DÉMARRER en accent ---------- */
body.jpo-game #screen-lobby .lobby-footer {
  background:var(--ep-blue-d);
  border-top:4px solid var(--ep-green);
}
/* ombre noire dure (pseudo décalé) */
body.jpo-game #screen-lobby .lcta-start::before { background:#0A0A0A; }
/* actif : gros bouton MAGENTA, bordure blanche, texte blanc, ombre noire */
body.jpo-game #screen-lobby .lcta-start .body {
  border:4px solid var(--ep-white);
  background:var(--ep-magenta);
  color:var(--ep-white);
  font-family:var(--jg-fd);
  font-size:22px;
  letter-spacing:1.5px;
  padding:16px;
}
body.jpo-game #screen-lobby .lcta-start .body,
body.jpo-game #screen-lobby .lcta-start .body * { color:var(--ep-white); }
body.jpo-game #screen-lobby .lcta-start:not([data-disabled="true"]) .body {
  animation:jgCtaPulse 1.5s ease-in-out infinite;
}
/* désactivé : gris clair, texte bleu foncé lisible */
body.jpo-game #screen-lobby .lcta-start[data-disabled="true"] .body {
  background:var(--ep-grey);
  color:var(--ep-blue-d);
  opacity:.8;
}
body.jpo-game #screen-lobby .lcta-start[data-disabled="true"] .body,
body.jpo-game #screen-lobby .lcta-start[data-disabled="true"] .body * { color:var(--ep-blue-d); }

/* ============================================================
   ATTENTE JOUEUR — body.jpo-game #screen-wait
   ============================================================ */

body.jpo-game #screen-wait .full {
  position:relative;
  background-color:var(--ep-blue) !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px) !important;
  color:var(--ep-white);
  font-family:var(--jg-fb);
  font-weight:500;
  gap:14px;
}

/* branding EPITECH · JPO en tête (premier enfant flex) — bloc blanc, texte bleu */
body.jpo-game #screen-wait .full::before {
  content:'EPITECH · JPO 2026';
  order:-1;
  align-self:center;
  font-family:var(--jg-fd);
  font-size:16px;
  letter-spacing:2px;
  background:var(--ep-white);
  color:var(--ep-blue);
  box-shadow:4px 4px 0 var(--ep-green);
  padding:7px 14px 6px;
}

/* boîte mode + titre : carte claire, texte bleu */
body.jpo-game #screen-wait .wait-ginfo {
  border:4px solid var(--ep-blue);
  background:var(--ep-white);
  color:var(--ep-blue);
  box-shadow:5px 5px 0 var(--ep-green);
}
body.jpo-game #screen-wait .wait-ginfo,
body.jpo-game #screen-wait .wait-ginfo * { color:var(--ep-blue); }

/* titre "TU ES DANS LA PLACE !" : blanc sur fond bleu + signature « _ » */
body.jpo-game #screen-wait .ttl {
  color:var(--ep-white);
  text-shadow:4px 4px 0 var(--ep-magenta);
  letter-spacing:1px;
  font-family:var(--jg-fd);
}
body.jpo-game #screen-wait .ttl::after {
  content:'_';
  color:var(--ep-green);
  margin-left:2px;
}

/* mon avatar */
body.jpo-game #screen-wait .wait-you .ava-emo {
  border:4px solid var(--ep-white);
  box-shadow:6px 6px 0 var(--ep-magenta);
}
/* mon pseudo : bloc blanc, texte bleu */
body.jpo-game #screen-wait .wait-you .wy-name {
  font-family:var(--jg-fd);
  background:var(--ep-white);
  color:var(--ep-blue);
  border:3px solid var(--ep-blue);
  box-shadow:4px 4px 0 var(--ep-blue-d);
}
body.jpo-game #screen-wait .wait-you .wy-name,
body.jpo-game #screen-wait .wait-you .wy-name * { color:var(--ep-blue) !important; }

/* état d'attente + dot LIVE animé : bloc bleu foncé, texte blanc */
body.jpo-game #screen-wait .wait-state {
  background:var(--ep-blue-d);
  color:var(--ep-white);
  border:3px solid var(--ep-white);
  box-shadow:4px 4px 0 var(--ep-magenta);
  font-family:var(--jg-fd);
}
body.jpo-game #screen-wait .wait-state,
body.jpo-game #screen-wait .wait-state * { color:var(--ep-white); }
body.jpo-game #screen-wait .wait-state::before {
  content:'';
  width:11px; height:11px;
  border-radius:50%;
  background:var(--ep-orange);
  animation:jgPulse 1.1s infinite;
  flex:0 0 auto;
}

body.jpo-game #screen-wait .wait-room-h {
  color:var(--ep-white);
  opacity:.85;
}

/* boutons bas (profil / inviter) — charte Epitech */
body.jpo-game #screen-wait .btn.yellow {
  background:var(--ep-white);
  color:var(--ep-blue);
  border:3px solid var(--ep-white);
  box-shadow:4px 4px 0 var(--ep-blue-d);
}
body.jpo-game #screen-wait .btn.yellow,
body.jpo-game #screen-wait .btn.yellow * { color:var(--ep-blue); }
body.jpo-game #screen-wait .btn.magenta {
  background:var(--ep-orange);
  color:var(--ep-white);
  border:3px solid var(--ep-white);
  box-shadow:4px 4px 0 var(--ep-blue-d);
}
body.jpo-game #screen-wait .btn.magenta,
body.jpo-game #screen-wait .btn.magenta * { color:var(--ep-white); }

/* ---------- RESPONSIVE : mobile-first, rien ne déborde ---------- */
body.jpo-game #screen-lobby,
body.jpo-game #screen-wait .full { max-width:100%; }
body.jpo-game #screen-lobby .code-card,
body.jpo-game #screen-lobby .code-card .body,
body.jpo-game #screen-lobby .code-big { max-width:100%; overflow-wrap:anywhere; }

@media (max-width:380px) {
  body.jpo-game #screen-lobby .lobby-top::after { font-size:11px; padding:4px 8px 3px; }
  body.jpo-game #screen-lobby .code-big { font-size:clamp(40px, 13vw, 72px); }
  body.jpo-game #screen-lobby .lcta-start .body { font-size:20px; padding:14px; }
}