:root{
  --void:#070505;
  --ink:#F4E4D2;
  --muted:#A8907E;
  --ochre:#E8A33D;
  --terra:#D2593A;
  --jade:#45C3A6;
  --cerise:#E8455F;
  --panel:rgba(17,12,10,.88);
  --line:#3A2A21;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--void);color:var(--ink);overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:rgba(232,69,95,.45);z-index:4}
#flash.run{animation:flash .45s ease-out}
@keyframes flash{from{opacity:1}to{opacity:0}}

/* ---- bannière de redémarrage : le moment social ---- */
#banniere{
  position:fixed;top:26%;left:50%;transform:translateX(-50%);z-index:6;opacity:1;
  text-align:center;pointer-events:none;text-shadow:0 4px 30px rgba(7,5,5,.95);
}
#banniere[hidden]{display:none}
/* L'animation ne touche qu'a l'echelle. La banniere est le moment le plus
   important du jeu : elle doit s'afficher meme si l'animation ne part pas. */
#banniere.run{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{
  from{transform:translateX(-50%) scale(.84)}
  to{transform:translateX(-50%) scale(1)}
}
.banniere-nom{font-size:clamp(38px,7vw,86px);font-weight:800;letter-spacing:-.03em;line-height:1}
.banniere-verbe{font-size:clamp(15px,2vw,22px);color:var(--ink);margin-top:8px;letter-spacing:.01em}
.banniere-compte{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.06em}

/* ---- HUD ---- */
#hud{
  position:fixed;top:14px;left:14px;font-family:var(--mono);font-size:13px;line-height:1.7;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  pointer-events:none;letter-spacing:.02em;z-index:3;
}
#hud b{color:var(--ochre);font-weight:500}
#hud .dim{color:var(--muted);font-size:11.5px}

/* ---- salon et tableau des chutes ---- */
#salon{
  position:fixed;bottom:14px;right:14px;min-width:210px;z-index:3;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-family:var(--mono);font-size:12px;
}
#salon[hidden]{display:none}
.salon-code{color:var(--muted);letter-spacing:.06em}
.salon-code b{color:var(--jade);font-size:15px;letter-spacing:.22em;font-weight:500}
.salon-essai{color:var(--muted);margin-bottom:8px}
.salon-essai b{color:var(--ochre);font-weight:500}
#score{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:8px}
.score-ligne{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:8px}
.score-ligne i{width:9px;height:9px;border-radius:50%;display:block}
.score-nom{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-ligne b{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.score-ligne.moi .score-nom{color:var(--ochre)}

/* ---- chat ---- */
#chat{position:fixed;bottom:60px;left:14px;width:min(420px,42vw);z-index:3;pointer-events:none}
#chat-log{
  display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:12px;line-height:1.5;
  max-height:180px;overflow:hidden;opacity:.25;transition:opacity .4s;
}
#chat-log.actif{opacity:1}
.chat-ligne{
  background:var(--panel);border-radius:6px;padding:3px 8px;width:fit-content;max-width:100%;
  color:#D9C3B0;word-break:break-word;
}
#chat-saisie{
  pointer-events:auto;margin-top:6px;width:100%;font-family:var(--mono);font-size:12px;
  background:var(--panel);border:1px solid var(--jade);border-radius:8px;padding:8px 10px;color:var(--ink);
}
#chat-saisie:focus{outline:none;border-color:var(--ochre)}
#chat-saisie[hidden]{display:none}

#keys{
  position:fixed;bottom:14px;left:14px;display:flex;flex-wrap:wrap;gap:14px;z-index:3;
  font-family:var(--mono);font-size:12px;color:var(--muted);pointer-events:none;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;
}
kbd{
  font-family:var(--mono);font-size:11px;color:var(--ink);background:#241a15;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-right:5px;
}

#hint{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);margin:0;max-width:560px;z-index:5;
  text-align:center;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ochre);
  background:var(--panel);border:1px solid var(--terra);border-radius:10px;padding:8px 14px;pointer-events:none;
}
#hint[hidden]{display:none}

/* ---- panneau de réglages ---- */
#panel{
  position:fixed;top:14px;right:14px;width:344px;max-height:calc(100vh - 28px);z-index:5;
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;font-family:var(--mono);font-size:12px;backdrop-filter:blur(8px);overflow:hidden;
}
#panel-toggle{
  all:unset;cursor:pointer;padding:9px 14px;color:var(--ochre);letter-spacing:.14em;
  text-transform:uppercase;font-size:11px;border-bottom:1px solid var(--line);
}
#panel.closed #panel-toggle::after{content:" · Tab";color:var(--muted)}
#panel-toggle:focus-visible{outline:2px solid var(--jade);outline-offset:-2px}
#panel.closed .panel-inner{display:none}
#panel.closed{width:auto}
#panel.closed #panel-toggle{border-bottom:0}
.panel-inner{overflow-y:auto;min-height:0;padding:10px 14px 14px}
.panel-body h3{
  margin:14px 0 6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra);font-weight:500;
}
.panel-body h3:first-child{margin-top:2px}
.row{display:grid;grid-template-columns:82px 1fr 58px;align-items:center;gap:8px;padding:3px 0}
.row .k{color:var(--muted)}
.row .v{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--ochre);height:20px;cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
#derived{margin:14px 0 10px;color:var(--jade);font-size:11.5px;line-height:1.5;word-break:break-word}
.panel-actions{display:flex;gap:8px}
.panel-actions button{
  all:unset;cursor:pointer;flex:1;text-align:center;padding:7px;border:1px solid var(--line);
  border-radius:7px;color:var(--ink);font-size:11px;
}
.panel-actions button:hover{border-color:var(--ochre);color:var(--ochre)}
.panel-actions button:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.mission{
  border:1px solid var(--terra);border-radius:9px;padding:10px 12px;margin-bottom:4px;
  background:rgba(210,89,58,.10);
}
.mission h3{margin:0 0 6px;color:var(--ochre)!important}
.mission ol{margin:0;padding-left:18px;color:#D9C3B0;line-height:1.55}
.mission li{margin-bottom:5px}
.mission b{color:var(--ink);font-weight:500}
.mission p{margin:6px 0 0;color:var(--muted);line-height:1.5}
#resume{
  all:unset;cursor:pointer;display:block;margin-top:8px;text-align:center;padding:9px;
  background:var(--jade);color:#08201c;border-radius:8px;font-size:11.5px;font-weight:600;
}
#resume kbd{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.25);color:#08201c;margin:0 0 0 4px}
#resume:hover{filter:brightness(1.08)}
#resume:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- écrans pleins (entrée, pause) ---- */
/* Flex + marge automatique plutot que grid centre : si la carte depasse la
   hauteur de la fenetre, elle reste entierement atteignable au defilement.
   Avec un centrage grid, le haut sortait de l'ecran et le bouton d'entree
   devenait incliquable sur un portable a ecran court. */
#lobby,#pause{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  overflow-y:auto;padding:16px;background:rgba(7,5,5,.82);
  backdrop-filter:blur(6px);z-index:10;
}
#lobby[hidden],#pause[hidden]{display:none}
.card{width:min(470px,92vw);margin:auto;padding:30px 32px;text-align:left;flex-shrink:0}
.card .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ochre);margin:0 0 12px;
}
.card h1{font-size:clamp(28px,4.5vw,40px);margin:0 0 14px;letter-spacing:-.02em;line-height:1.05}
.card h1 b{color:var(--jade);letter-spacing:.16em;font-weight:700}
.card p{margin:0 0 12px;line-height:1.6;color:#E3D0BE}
.card .small{font-size:14px;color:var(--muted)}
.lien{font-family:var(--mono);font-size:12px;color:var(--jade);word-break:break-all}

.champ{display:block;margin-bottom:12px}
.champ span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.champ input{
  width:100%;font-family:var(--mono);font-size:15px;padding:11px 13px;color:var(--ink);
  background:rgba(36,26,21,.85);border:1px solid var(--line);border-radius:9px;
}
.champ input:focus{outline:none;border-color:var(--ochre)}
#code{text-transform:uppercase;letter-spacing:.3em}
#lobby-erreur{color:var(--cerise);font-size:13px;margin:0 0 12px}
#lobby-erreur[hidden]{display:none}

.lobby-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.lobby-actions button{
  all:unset;cursor:pointer;padding:12px 22px;border-radius:9px;font-weight:600;font-size:15px;
  background:var(--jade);color:#08201c;text-align:center;
}
.lobby-actions button.secondaire{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500}
.lobby-actions button:hover{filter:brightness(1.1)}
.lobby-actions button.secondaire:hover{border-color:var(--ochre);color:var(--ochre);filter:none}
.lobby-actions button:disabled{opacity:.45;cursor:default}
.lobby-actions button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  #flash.run{animation-duration:.01s}
  #banniere.run{animation:none}
}

/* Ecrans courts : on resserre pour que le bouton d'entree reste visible. */
@media (max-height:620px){
  .card{padding:18px 22px}
  .card h1{font-size:26px;margin-bottom:8px}
  .card p{margin-bottom:8px;font-size:14px}
  .card .small{display:none}
  .champ{margin-bottom:8px}
  .champ input{padding:8px 11px;font-size:14px}
  .lobby-actions button{padding:10px 18px;font-size:14px}
}

/* choix a trois etats dans le panneau de réglages */
.choix{margin-top:14px}
.choix-boutons{display:flex;gap:6px;margin-top:2px}
.choix-boutons button{
  all:unset;cursor:pointer;flex:1;text-align:center;padding:6px 4px;border:1px solid var(--line);
  border-radius:7px;color:var(--muted);font-size:11px;
}
.choix-boutons button:hover{border-color:var(--ochre);color:var(--ochre)}
.choix-boutons button.actif{background:var(--ochre);border-color:var(--ochre);color:#1B1008;font-weight:500}
.choix-boutons button:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.choix-aide{margin:7px 0 0;color:var(--muted);font-size:10.5px;line-height:1.45}

/* ---- carte de palier et écran de franchissement ---- */
#carte-niveau{
  position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:6;text-align:center;
  pointer-events:none;text-shadow:0 3px 24px rgba(7,5,5,.95);
}
#carte-niveau[hidden]{display:none}
.carte-rang{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:8px;
}
.carte-nom{font-size:clamp(28px,5vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.carte-indice{margin-top:10px;font-size:15px;color:#E3D0BE;font-style:italic}

#franchi{
  position:fixed;top:26%;left:50%;transform:translateX(-50%);z-index:6;text-align:center;
  pointer-events:none;text-shadow:0 4px 30px rgba(7,5,5,.95);
}
#franchi[hidden]{display:none}
.franchi-titre{
  font-size:clamp(34px,6vw,74px);font-weight:800;letter-spacing:.02em;line-height:1;color:var(--jade);
}
.franchi-nom{font-size:clamp(15px,2vw,22px);margin-top:10px;color:var(--ink)}
.franchi-compte{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.06em}

.salon-palier{color:var(--muted)}
.salon-palier b{color:var(--jade);font-weight:500}
#palier-nom{color:var(--ink)}