/* =========================================================
   7TH ROOM ACADEMY — SECTION JEUX
   ---------------------------------------------------------
   Feuille commune aux trois jeux et à la page Jeux.
   Tout est préfixé « jx- » : rien ne peut fuir vers les
   cours, les ateliers ou les avatars.

   PENSÉE POUR DES TABLETTES DE 2020
   · aucune ombre animée, aucun filtre en boucle
   · transform et opacity uniquement pour les animations
   · surfaces tactiles de 64 px minimum
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

.jx{
  --jx-fond:   #0a0c14;
  --jx-carte:  rgba(255,255,255,.055);
  --jx-bord:   rgba(255,255,255,.14);
  --jx-texte:  #ffffff;
  --jx-doux:   #b4b8ce;
  --jx-vert:   #9BE34A;
  --jx-cyan:   #29E4C2;
  --jx-jaune:  #FFD34E;
  --jx-rose:   #FD5A9A;
  --jx-violet: #A37BFF;
  --jx-orange: #FF7549;
  --jx-titre:  'Montserrat', -apple-system, "Segoe UI", Roboto, sans-serif;
  --jx-corps:  'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;

  margin:0; min-height:100vh;
  font-family:var(--jx-corps); color:var(--jx-texte);
  background:
    radial-gradient(900px 520px at 10% -6%, rgba(163,123,255,.22), transparent 62%),
    radial-gradient(760px 480px at 92% 104%, rgba(41,228,194,.16), transparent 60%),
    var(--jx-fond);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.jx *{ box-sizing:border-box; }

/* =========================================================
   1. LA PAGE JEUX
   ========================================================= */
.jx-page{ max-width:1060px; margin:0 auto; padding:30px 20px 80px; }

.jx-retour{
  display:inline-block; margin-bottom:22px;
  color:var(--jx-doux); text-decoration:none; font-size:15px; font-weight:600;
}
.jx-retour:hover{ color:var(--jx-cyan); }

.jx-hero{ margin-bottom:34px; }
.jx-eyebrow{
  display:inline-block; padding:7px 17px; border-radius:999px; margin-bottom:16px;
  background:rgba(155,227,74,.14); border:1px solid rgba(155,227,74,.42);
  color:var(--jx-vert); font-size:11px; font-weight:800; letter-spacing:2.4px;
  text-transform:uppercase;
}
.jx-hero h1{
  font-family:var(--jx-titre); font-weight:900; font-style:italic;
  font-size:clamp(34px,7vw,66px); line-height:1; letter-spacing:-2px; margin:0 0 14px;
}
.jx-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--jx-vert),var(--jx-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jx-hero p{ margin:0; max-width:640px; color:var(--jx-doux); font-size:17px; line-height:1.6; }

.jx-cartes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }

.jx-carte{
  display:flex; flex-direction:column;
  border-radius:22px; overflow:hidden;
  border:2px solid var(--jx-bord); background:var(--jx-carte);
}
.jx-carte-haut{ padding:26px 24px 22px; }
.jx-carte .jx-emo{ font-size:44px; display:block; margin-bottom:12px; }
.jx-carte h2{
  font-family:var(--jx-titre); font-weight:900; font-style:italic;
  font-size:25px; letter-spacing:-.6px; margin:0 0 8px;
}
.jx-carte .jx-sous{
  font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:12px;
}
.jx-carte p{ margin:0 0 6px; color:var(--jx-doux); font-size:14.5px; line-height:1.6; }
.jx-carte .jx-cmd{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:rgba(0,0,0,.28); font-size:13px; color:var(--jx-doux); line-height:1.6;
}
.jx-carte .jx-cmd b{ color:var(--jx-texte); }

.jx-carte.g1{ border-color:rgba(255,211,78,.42); }
.jx-carte.g1 .jx-sous{ color:var(--jx-jaune); }
.jx-carte.g2{ border-color:rgba(253,90,154,.42); }
.jx-carte.g2 .jx-sous{ color:var(--jx-rose); }
.jx-carte.g3{ border-color:rgba(41,228,194,.42); }
.jx-carte.g3 .jx-sous{ color:var(--jx-cyan); }

/* =========================================================
   2. LES BOUTONS — gros, tactiles, lisibles
   ========================================================= */
.jx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:15px 26px; border-radius:16px; cursor:pointer;
  border:2px solid var(--jx-bord); background:rgba(255,255,255,.06);
  color:var(--jx-texte); font-family:var(--jx-corps); font-size:16px; font-weight:700;
  text-decoration:none; text-align:center;
  touch-action:manipulation; user-select:none;
  transition:background .15s, border-color .15s, transform .1s;
}
.jx-btn:active{ transform:scale(.97); }
.jx-btn:disabled{ opacity:.35; }
.jx-btn-jouer{
  width:100%; min-height:64px; border-radius:0; border:none;
  font-family:var(--jx-titre); font-weight:900; font-style:italic;
  font-size:19px; letter-spacing:1px; color:#08110a;
  background:linear-gradient(100deg,var(--jx-vert),var(--jx-cyan));
}
.jx-carte.g2 .jx-btn-jouer{ background:linear-gradient(100deg,var(--jx-rose),var(--jx-violet)); color:#fff; }
.jx-carte.g3 .jx-btn-jouer{ background:linear-gradient(100deg,var(--jx-cyan),var(--jx-jaune)); color:#08110a; }

/* =========================================================
   3. LES CLASSEMENTS
   ========================================================= */
.jx-classement{ padding:0 24px 22px; }
.jx-cl-titre{
  font-size:11px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--jx-doux); margin:4px 0 12px;
}
.jx-cl-ligne{
  display:grid; grid-template-columns:28px 1fr auto; gap:12px;
  align-items:center; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07); font-size:14.5px;
}
.jx-cl-ligne:last-child{ border-bottom:none; }
.jx-cl-rang{ font-family:var(--jx-titre); font-weight:900; color:var(--jx-doux); text-align:center; }
.jx-cl-ligne:nth-child(1) .jx-cl-rang{ color:var(--jx-jaune); }
.jx-cl-nom{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jx-cl-nom small{ display:block; font-weight:400; color:var(--jx-doux); font-size:12px; }
.jx-cl-score{ font-variant-numeric:tabular-nums; font-weight:800; }
.jx-cl-vide{ color:var(--jx-doux); font-size:14px; padding:8px 0; }

/* =========================================================
   4. LE CADRE D'UN JEU
   ========================================================= */
.jx-jeu{
  position:fixed; inset:0; display:flex; flex-direction:column;
  overflow:hidden; touch-action:none;   /* la page ne défile pas en jouant */
}
.jx-barre{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--jx-bord);
  background:rgba(0,0,0,.35);
}
.jx-barre .jx-titre-jeu{
  font-family:var(--jx-titre); font-weight:900; font-style:italic;
  font-size:15px; letter-spacing:.4px; white-space:nowrap;
}
.jx-barre .jx-espace{ flex:1 1 auto; }
.jx-info{
  font-size:13px; font-weight:700; color:var(--jx-doux);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.jx-mini{
  min-height:42px; min-width:42px; padding:8px 12px; border-radius:11px;
  border:1px solid var(--jx-bord); background:rgba(255,255,255,.06);
  color:var(--jx-doux); font-family:inherit; font-size:15px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  touch-action:manipulation;
}
.jx-mini:active{ transform:scale(.94); }

.jx-scene{ flex:1 1 auto; position:relative; overflow:hidden; }
.jx-scene canvas{ display:block; width:100%; height:100%; touch-action:none; }

/* =========================================================
   5. LES COMMANDES TACTILES
   ========================================================= */
.jx-pad{
  flex:0 0 auto; display:flex; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.4); border-top:1px solid var(--jx-bord);
}
.jx-touche{
  flex:1 1 0; min-height:74px; border-radius:18px;
  border:2px solid var(--jx-bord); background:rgba(255,255,255,.07);
  color:var(--jx-texte); font-family:var(--jx-titre); font-weight:900;
  font-size:16px; letter-spacing:1px; cursor:pointer;
  touch-action:manipulation; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.jx-touche small{ font-family:var(--jx-corps); font-weight:600; font-size:11px; color:var(--jx-doux); letter-spacing:0; }
.jx-touche:active,
.jx-touche.on{ background:rgba(255,255,255,.2); border-color:#fff; }
.jx-touche.c1{ border-color:rgba(155,227,74,.5); }
.jx-touche.c2{ border-color:rgba(255,211,78,.5); }
.jx-touche.c3{ border-color:rgba(253,90,154,.5); }

/* =========================================================
   6. LES VOILES : pause, fin de partie, pseudo
   ========================================================= */
.jx-voile{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(10,12,20,.9);
  overflow-y:auto;
}
.jx-voile.jx-off{ display:none; }
.jx-boite{
  width:100%; max-width:440px; text-align:center;
  padding:30px 26px; border-radius:22px;
  border:2px solid var(--jx-bord); background:#11141f;
}
.jx-boite h2{
  font-family:var(--jx-titre); font-weight:900; font-style:italic;
  font-size:clamp(26px,6vw,40px); margin:0 0 10px; letter-spacing:-1px;
}
.jx-boite p{ color:var(--jx-doux); font-size:15px; line-height:1.6; margin:0 0 16px; }
.jx-boite .jx-gros{
  font-family:var(--jx-titre); font-weight:900;
  font-size:clamp(44px,12vw,72px); line-height:1; margin:10px 0;
  color:var(--jx-jaune); font-variant-numeric:tabular-nums;
}
.jx-boite input[type=text]{
  width:100%; padding:16px 18px; border-radius:14px; margin-bottom:12px;
  border:2px solid var(--jx-bord); background:rgba(255,255,255,.06);
  color:var(--jx-texte); font-family:var(--jx-titre); font-weight:800;
  font-size:22px; letter-spacing:2px; text-align:center; text-transform:uppercase;
}
.jx-boite input:focus{ outline:none; border-color:var(--jx-cyan); }
.jx-boite .jx-rang{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.jx-boite .jx-rang .jx-btn{ flex:1 1 130px; }
.jx-note{ font-size:12.5px; color:var(--jx-doux); margin-top:14px; line-height:1.55; }
.jx-msg{ font-size:14px; margin-top:10px; min-height:20px; }
.jx-msg.err{ color:var(--jx-rose); }
.jx-msg.ok{ color:var(--jx-vert); }

/* =========================================================
   7. PAYSAGE CONSEILLÉ — suggéré, jamais imposé
   ========================================================= */
.jx-tourne{
  display:none;
  padding:12px 16px; margin:0; text-align:center;
  background:rgba(255,211,78,.14); border-bottom:1px solid rgba(255,211,78,.4);
  color:var(--jx-jaune); font-size:13.5px; font-weight:700;
}
@media (orientation:portrait) and (max-width:900px){
  .jx-tourne.jx-conseil{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  .jx-btn:active, .jx-mini:active, .jx-touche:active{ transform:none; }
}

/* =========================================================
   8. AJOUT — COMMANDES ET APPAREILS (téléphone, tablette, PC)
   Seulement dans le cadre d'un jeu (.jx-jeu) : le reste du
   site garde son zoom et son défilement normaux.
   ========================================================= */
html:has(.jx-jeu), body:has(.jx-jeu){ overscroll-behavior:none; }
.jx-jeu{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.jx-scene, .jx-pad, .jx-touche{ touch-action:none; }
.jx-touche{ -webkit-user-select:none; -webkit-touch-callout:none; min-height:60px; }
.jx-barre{ padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
.jx-barre:first-of-type{ padding-top:max(10px, env(safe-area-inset-top)); }
.jx-pad{ padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
.jx-voile input, .jx-voile textarea{ touch-action:manipulation; -webkit-user-select:text; user-select:text; }
/* Téléphone à l'horizontale : on rend de la hauteur au terrain */
@media (orientation:landscape) and (max-height:500px){
  .jx-barre{ padding-top:4px; padding-bottom:4px; }
  .jx-mini{ min-height:38px; min-width:38px; padding:4px 10px; }
  .jx-touche{ min-height:56px; }
  .jx-pad{ padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
  .jx-tourne{ display:none !important; }
}
/* PC sans écran tactile : pas de boutons à l'écran, le clavier suffit */
html.jx-souris .jx-pad{ display:none; }