*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0c14;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;color:#e8ecf5;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

#jeu,#hud{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}

/* ---------------- Menu ---------------- */
.ecran{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#1b2340 0%,#0a0c14 60%);
  z-index:10;padding:18px;overflow:auto}
.ecran.cache{display:none}

.panneau{width:min(460px,100%);background:rgba(20,24,40,.72);
  border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:26px 28px 22px;
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px)}

header{text-align:center;margin-bottom:20px}
h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:.16em;
  background:linear-gradient(96deg,#7ee8ff,#a78bfa 45%,#ff9ecd);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sous{font-size:13px;color:#9aa6c4;margin-top:6px}
.sous b{color:#cfd8ee}

.solo{display:block}

#apercu{width:100%;aspect-ratio:1/1.02;display:block;border-radius:16px;
  background:linear-gradient(180deg,#243056,#141a2e);
  border:1px solid rgba(255,255,255,.08)}
.apercu-info{margin:10px 0 18px;text-align:center;font-size:12px;color:#8e9ab8;
  min-height:34px;line-height:1.45}

label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.11em;
  color:#7f8bab;margin:0 0 6px}

input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  color:#eef2ff;border-radius:11px;padding:11px 13px;font-size:14px;outline:none;
  font-family:inherit;transition:border-color .15s,background .15s}
input:focus{border-color:#7c8cff;background:rgba(124,140,255,.10)}

button{cursor:pointer;font-family:inherit}

.principal{width:100%;margin-top:18px;padding:15px;border:0;border-radius:14px;
  font-size:17px;font-weight:800;letter-spacing:.14em;color:#0a0f1e;
  background:linear-gradient(96deg,#7ee8ff,#a78bfa 50%,#ff9ecd);
  box-shadow:0 12px 34px rgba(124,140,255,.34);transition:.18s}
.principal:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(124,140,255,.5)}

.aide{margin-top:12px;font-size:11.5px;color:#78849f;text-align:center;line-height:1.7}
.aide b{color:#a9b5d4}

/* ---------------- En jeu ---------------- */
#btnMenu{position:fixed;top:14px;right:14px;z-index:6;width:42px;height:42px;
  border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(16,20,34,.55);color:#fff;font-size:19px;backdrop-filter:blur(8px);display:none}
#btnMenu.on{display:block}

/* ---------------- Tchat ----------------
   Discret par défaut : le journal s'efface tout seul et la barre de saisie
   reste en retrait tant qu'on ne parle pas. Elle s'allume à la frappe. */
#tchat{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:6;width:min(340px,calc(100vw - 32px));display:none;flex-direction:column;gap:7px}
#tchat.on{display:flex}

#tchatLog{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  pointer-events:none;overscroll-behavior:contain}
#tchatLog div{max-width:100%;font-size:12.5px;line-height:1.4;padding:5px 11px;
  border-radius:12px;background:rgba(12,16,28,.52);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px);color:#dfe6f7;word-break:break-word;
  animation:tchatEntre .22s ease-out;transition:opacity .8s}
#tchatLog div.pale{opacity:.3}
#tchatLog b{color:#9fb2ff;font-weight:700;margin-right:5px}
@keyframes tchatEntre{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Tchat fermé : le journal n'est qu'un fil de dernières répliques posé sur le
   jeu. L'historique est toujours là, simplement hors de vue. */
#tchat:not(.actif) #tchatLog>div:not(.recent){display:none}

/* Tchat ouvert : un vrai panneau. Tout l'historique, plein contraste (on vient
   justement de l'ouvrir pour le lire) et le défilement pour remonter. La
   hauteur est bornée pour ne jamais manger l'écran de jeu. */
#tchat.actif #tchatLog{pointer-events:auto;overflow-y:auto;align-self:stretch;
  max-height:min(38vh,270px);padding:8px;border-radius:14px;
  background:rgba(8,11,20,.6);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
#tchat.actif #tchatLog>div{opacity:1;background:rgba(255,255,255,.05);
  border-color:transparent;backdrop-filter:none}
/* Repasser de `display:none` à visible relance l'animation d'entrée : sans
   cette coupure, tout l'historique se re-jouerait en cascade à chaque
   ouverture. Les messages encore `recent`, eux, n'ont jamais été masqués — ils
   gardent leur animation, qui sert à l'arrivée d'une nouvelle réplique. */
#tchat.actif #tchatLog>div:not(.recent){animation:none}
#tchat.actif #tchatLog:empty{display:none}
#tchatLog{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
#tchatLog::-webkit-scrollbar{width:7px}
#tchatLog::-webkit-scrollbar-track{background:transparent}
#tchatLog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
#tchatLog::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}

#tchatSaisie{font-size:13px;padding:8px 12px;border-radius:12px;
  background:rgba(12,16,28,.4);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);opacity:.45;transition:opacity .18s,border-color .18s,background .18s}
#tchat.actif #tchatSaisie{opacity:1;background:rgba(20,26,44,.75);
  border-color:#7c8cff;box-shadow:0 10px 30px rgba(124,140,255,.28)}

/* Sur mobile, la barre de saisie ne doit pas passer sous les commandes. */
@media (pointer:coarse){#tchat{bottom:calc(112px + env(safe-area-inset-bottom));width:min(280px,60vw)}}

#tactile{position:fixed;inset:auto 0 0 0;z-index:5;display:none;
  justify-content:space-between;padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
#tactile.on{display:flex}
/* Le pad de droite porte trois boutons depuis la grimpe : on resserre
   l'écart plutôt que de rétrécir les cibles, qui doivent rester au doigt. */
#tactile .pad{display:flex;gap:14px;align-items:center}
#tactile .pad:last-child{gap:10px}
#tactile button{width:74px;height:74px;border-radius:50%;font-size:26px;
  border:1px solid rgba(255,255,255,.18);background:rgba(20,26,44,.5);
  color:#fff;backdrop-filter:blur(6px)}
#tactile .saut{width:88px;height:88px;background:rgba(124,140,255,.32)}
#tactile button:active{background:rgba(124,140,255,.55)}

/* ---------------- Équipe ----------------
   Posé en haut au centre, sous la barre de progression : c'est là que se
   lisent déjà les autres joueurs, et la question les concerne. Volontairement
   PAS un modal plein écran — les autres continuent de jouer pendant qu'on
   répond, et se faire figer l'écran par la porte de quelqu'un d'autre serait
   une interruption qu'on n'a pas demandée. */
#equipe{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:8;
  display:none;flex-direction:column;align-items:center;gap:8px;
  min-width:260px;max-width:min(420px,92vw);padding:16px 20px;
  border-radius:18px;background:rgba(12,16,28,.88);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:center}
#equipe.on{display:flex}
#equipeTitre{font-size:16px;font-weight:700;color:#fff;margin:0}
#equipeSous{font-size:12px;color:#8e9ab8;margin:0;line-height:1.5}
#equipeSous:empty{display:none}

#equipeListe{list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:4px}
#equipeListe:empty{display:none}
#equipeListe li{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;padding:5px 10px;border-radius:9px;
  background:rgba(255,255,255,.05);color:#cfd8ee}
#equipeListe .rep{font-size:11px;font-weight:700}
#equipeListe .ok{color:#8cfabe}
#equipeListe .non{color:#ff9d9d}
#equipeListe .attente{color:#8e9ab8}

#equipeBoutons{display:flex;gap:10px;margin-top:2px}
#equipeBoutons button{padding:9px 18px;border-radius:12px;font-size:13.5px;
  font-weight:700;cursor:pointer;color:#e7ecff;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  transition:transform .12s,background .14s}
#equipeBoutons button:hover{transform:scale(1.05);background:rgba(255,255,255,.13)}
#equipeBoutons .oui{background:rgba(124,140,255,.42);border-color:#7c8cff}
#equipeBoutons .oui:hover{background:rgba(124,140,255,.6)}

/* Les pseudos invitables : une ligne par joueur, un bouton par ligne. */
#equipeListe li.candidat{background:rgba(255,255,255,.03)}
#equipeListe button{padding:4px 12px;border-radius:8px;font-size:11.5px;
  font-weight:700;cursor:pointer;color:#e7ecff;
  border:1px solid rgba(124,140,255,.5);background:rgba(124,140,255,.3)}
#equipeListe button:hover{background:rgba(124,140,255,.55)}
#equipeListe button:disabled{cursor:default;opacity:.45;
  border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}

/* Sur mobile, le panneau descend sous la barre du haut et se resserre. */
@media (pointer:coarse){#equipe{top:56px;padding:13px 16px;min-width:0}}

/* ---------------- Énigmes ----------------
   Celle-ci EST modale : elle prend les flèches, et l'on met le personnage
   en sommeil le temps qu'elle dure (cf. `saisieBloquee`). La laisser
   transparente inviterait à jouer des deux mains à la fois. */
#enigme{position:fixed;inset:0;z-index:12;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(6,8,16,.72);backdrop-filter:blur(6px)}
#enigme.on{display:flex}
#enigme .cadre{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 24px;border-radius:20px;background:#141a2c;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.6);
  max-width:min(460px,94vw);max-height:92vh;overflow:auto}
#enigmeTitre{margin:0;font-size:17px;font-weight:800;color:#fff}
#enigmeRegle{margin:0;font-size:12px;color:#8e9ab8;text-align:center;line-height:1.5}
#enigmePied{display:flex;align-items:center;gap:14px;margin-top:4px}
#enigmeEtat{font-size:12px;font-weight:700;color:#8cfabe}
#enigmeFermer{padding:8px 18px;border-radius:11px;font-size:13px;font-weight:700;
  cursor:pointer;color:#e7ecff;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07)}
#enigmeFermer:hover{background:rgba(255,255,255,.14)}

/* --- le dédale --- */
.lab{position:relative;display:grid;
  grid-template-columns:repeat(var(--n),1fr);
  width:min(340px,80vw);aspect-ratio:1;
  background:rgba(0,0,0,.3);border-radius:10px}
.lab .case{border-style:solid;border-color:#66739b;box-sizing:border-box}
.lab .case.sortie{background:rgba(140,250,190,.22)}
.lab .jeton{position:absolute;width:52%;height:52%;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,#ffe9a8,#f0b429);
  box-shadow:0 0 10px rgba(255,200,90,.8);
  /* La case fait 100%/n : le jeton doit tenir dedans, d'où le calc. */
  width:calc(100% / var(--n) * .52);height:calc(100% / var(--n) * .52);
  transition:left .09s,top .09s}
.lab .jeton.gagne{background:radial-gradient(circle,#d8ffe9,#3ddc84);
  box-shadow:0 0 18px rgba(90,250,170,.9)}

/* --- les sceaux --- */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  width:min(320px,80vw)}
.mem .dalle{aspect-ratio:1;border-radius:11px;cursor:pointer;
  font-size:24px;color:transparent;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);
  transition:background .16s,transform .12s,color .1s}
.mem .dalle:hover{transform:scale(1.05)}
.mem .dalle.vue{color:#fff;background:rgba(124,140,255,.4)}
.mem .dalle.prise{color:#0d1120;background:#8cfabe;cursor:default;transform:none}

/* --- les fioles --- */
.fioles{display:flex;gap:12px;align-items:flex-end;justify-content:center;
  width:min(380px,84vw);padding:6px 0}
.fiole{display:flex;flex-direction:column;width:44px;padding:4px;gap:3px;
  cursor:pointer;border-radius:0 0 14px 14px;
  border:2px solid rgba(255,255,255,.22);border-top:0;
  background:rgba(255,255,255,.04);transition:transform .12s,border-color .14s}
.fiole:hover{border-color:rgba(255,255,255,.45)}
.fiole.choisie{transform:translateY(-10px);border-color:#ffd98a}
.fiole .dose{height:26px;border-radius:4px;background:transparent}
button.rejouer{margin-top:2px;padding:6px 14px;border-radius:10px;font-size:12px;
  cursor:pointer;color:#cfd8ee;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06)}

/* ---------------- Personnalisation ----------------
   Un gros bouton au bas de l'écran, et son panneau qui se déplie au-dessus.
   Il vit hors du menu : changer de couleur ne doit pas demander de quitter
   la partie, ni même de s'arrêter de courir. */
#perso{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:7;
  display:none;flex-direction:column;align-items:center;gap:10px}
#perso.on{display:flex}

#btnPerso{display:flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:18px;font-size:16px;font-weight:700;
  letter-spacing:.2px;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(124,140,255,.62),rgba(84,98,220,.62));
  backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(10,14,30,.45);
  transition:transform .12s,box-shadow .18s,background .18s}
#btnPerso span{font-size:20px;line-height:1}
#btnPerso:hover{background:linear-gradient(180deg,rgba(140,156,255,.75),rgba(96,110,235,.75))}
#btnPerso:active{transform:translateY(2px)}
#perso.ouvert #btnPerso{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12))}

#persoPanneau{display:none;flex-direction:column;gap:12px;
  padding:16px 18px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);background:rgba(14,18,32,.82);
  backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(6,8,18,.55);
  animation:persoEntre .18s ease-out}
#perso.ouvert #persoPanneau{display:flex}
@keyframes persoEntre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

#perso .rangee{display:flex;align-items:center;gap:12px}
#perso .titre{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(220,228,250,.5);width:62px;flex:none}
#perso .choix{display:flex;flex-wrap:wrap;gap:8px;max-width:min(74vw,340px)}

#perso .pastille{width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.16);padding:0;
  transition:transform .12s,border-color .14s}
#perso .pastille:hover{transform:scale(1.12)}
#perso .pastille.actif{border-color:#fff;box-shadow:0 0 0 3px rgba(124,140,255,.55)}

#perso .moue{min-width:44px;height:34px;border-radius:12px;cursor:pointer;
  font-size:17px;line-height:1;color:#e7ecff;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  transition:transform .12s,border-color .14s,background .14s}
#perso .moue:hover{transform:scale(1.08);background:rgba(255,255,255,.12)}
#perso .moue.actif{border-color:#fff;background:rgba(124,140,255,.42)}

/* Sur mobile, le bouton se range au-dessus des commandes tactiles. */
@media (pointer:coarse){#perso{bottom:calc(120px + env(safe-area-inset-bottom))}}