:root {
  --fond: #0b1020;
  --panneau: #182238;
  --panneau2: #212d48;
  --bord: #34446a;
  --texte: #eef2ff;
  --gris: #9aa7c4;
  --accent: #3ad1c8;
  --rouge: #e63946;
  --jaune: #ffd23f;
  --vert: #3ad16b;
  --police: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font-family: var(--police); overflow: hidden; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button { font-family: inherit; }
h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.petit { font-size: 12px; color: var(--gris); }
.erreur { color: #ff8a8a; min-height: 1.2em; }

.btn { background: var(--accent); color: #062028; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.btn.gros { padding: 13px 18px; font-size: 18px; }
.btn.petit { padding: 4px 8px; font-size: 12px; }
.btn.secondaire { background: var(--panneau2); color: var(--texte); border: 1px solid var(--bord); }
.btn.rouge { background: var(--rouge); color: #fff; }
.btn.actif { background: var(--jaune); color: #222; }

.panneau { background: var(--panneau); border: 2px solid var(--bord); border-radius: 16px; padding: 16px; }
.ecran { position: fixed; inset: 0; }

/* ---------- accueil ---------- */
#ecran-accueil { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: radial-gradient(ellipse at top, #1b2a4a, #070a14 70%); }
.etoiles { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff8, transparent), radial-gradient(1px 1px at 30% 70%, #fff6, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff8, transparent), radial-gradient(1px 1px at 85% 80%, #fff6, transparent), radial-gradient(1px 1px at 50% 50%, #fff5, transparent), radial-gradient(1.5px 1.5px at 92% 12%, #fff7, transparent); }
.titre { font-size: clamp(38px, 8vw, 72px); margin: 0; letter-spacing: 3px; text-shadow: 0 4px 0 #000, 0 0 30px #3ad1c855; position: relative; }
.titre span { color: var(--vert); }
.sous-titre { color: var(--gris); margin: 4px 0 18px; position: relative; }
.accueil-grille { display: grid; grid-template-columns: minmax(280px, 380px) minmax(280px, 380px); gap: 16px; position: relative; }
.actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.actions hr { width: 100%; border: 0; border-top: 1px solid var(--bord); }
.ligne-rejoindre { display: flex; gap: 8px; }
.ligne-rejoindre input { flex: 1; min-width: 0; text-transform: uppercase; font-size: 20px; letter-spacing: 4px; text-align: center; }
input { background: #0d1426; color: var(--texte); border: 2px solid var(--bord); border-radius: 10px; padding: 9px 10px; font-family: inherit; font-size: 15px; }
input:focus { outline: none; border-color: var(--accent); }
.aide { font-size: 12px; color: var(--gris); margin: 0; line-height: 1.5; }
.invitation { background: #3ad1c822; border: 1px solid var(--accent); border-radius: 10px; padding: 8px; margin: 0; text-align: center; }
@media (max-width: 720px) {
  #ecran-accueil { justify-content: flex-start; }
  .accueil-grille { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 420px; }
}
.accueil-grille > * { min-width: 0; }

/* ---------- éditeur de personnage ---------- */
.editeur { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.editeur canvas.apercu { width: 120px; height: 150px; align-self: center; }
.editeur .nuancier { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.editeur .nuance { aspect-ratio: 1; border-radius: 50%; border: 3px solid #0006; cursor: pointer; padding: 0; }
.editeur .nuance.choisie { border-color: #fff; transform: scale(1.12); }
.editeur .nuance:disabled { opacity: .25; cursor: not-allowed; }
.editeur .selecteur { display: flex; align-items: center; gap: 8px; }
.editeur .selecteur span { flex: 1; text-align: center; font-weight: 700; }
.editeur .selecteur .lbl { flex: 0 0 64px; text-align: left; color: var(--gris); font-weight: 400; font-size: 13px; }
.editeur .selecteur button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--panneau2); color: var(--texte); font-size: 18px; cursor: pointer; }

/* ---------- lobby ---------- */
#ecran-lobby { display: flex; flex-direction: column; padding: 12px; gap: 12px; overflow-y: auto; background: radial-gradient(ellipse at top, #1b2a4a, #070a14 70%); }
.lobby-entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lobby-entete > div:first-child { margin-right: auto; }
.code { font-size: 32px; font-weight: 900; letter-spacing: 6px; color: var(--jaune); }
.lobby-grille { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.lobby-grille > .panneau { min-height: 0; overflow: auto; display: flex; flex-direction: column; }
@media (max-width: 1100px) { .lobby-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lobby-grille { grid-template-columns: 1fr; } }
.lobby-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; flex: 1; align-content: start; }
.carte-joueur { background: var(--panneau2); border-radius: 12px; padding: 6px; text-align: center; font-size: 13px; position: relative; }
.carte-joueur canvas { width: 60px; height: 76px; display: block; margin: 0 auto; }
.carte-joueur .hote { position: absolute; top: 2px; right: 6px; }
.lobby-etat { margin: 10px 0; color: var(--gris); text-align: center; }
.parametres { display: flex; flex-direction: column; gap: 6px; }
.param { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; background: var(--panneau2); padding: 5px 8px; border-radius: 8px; }
.param .ctrl { display: flex; align-items: center; gap: 6px; }
.param .ctrl button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--bord); color: #fff; cursor: pointer; font-weight: 900; }
.param .val { min-width: 64px; text-align: center; font-weight: 800; color: var(--jaune); }

/* ---------- chat ---------- */
.chat-panneau { display: flex; flex-direction: column; min-height: 0; }
.chat-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding-right: 4px; }
.chat-msg { background: var(--panneau2); padding: 6px 8px; border-radius: 10px; font-size: 14px; word-wrap: break-word; }
.chat-msg b { margin-right: 4px; }
.chat-msg.systeme { background: transparent; color: var(--gris); font-style: italic; font-size: 12px; padding: 0 4px; }
.chat-msg.mort { opacity: .75; border: 1px dashed var(--gris); }
.chat-msg.moi { background: #2a3b5e; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; }

/* ---------- jeu ---------- */
#ecran-jeu { background: #000; touch-action: none; }
#canvas-jeu { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud-haut-gauche { position: absolute; top: 10px; left: 10px; width: min(300px, 46vw); pointer-events: none; }
.barre-taches { display: flex; align-items: center; gap: 6px; background: #000a; padding: 5px; border-radius: 8px; }
.barre-label { font-weight: 900; font-size: 12px; }
.barre { flex: 1; height: 16px; background: #233; border: 2px solid #000; border-radius: 4px; overflow: hidden; }
#barre-rempli { height: 100%; width: 0; background: linear-gradient(#55e36f, #2faa45); transition: width .4s; }
.liste-taches { margin-top: 6px; background: #000a; border-radius: 8px; padding: 6px 8px; font-size: 13px; line-height: 1.45; pointer-events: auto; max-height: 50vh; overflow-y: auto; }
.liste-taches .t.faite { color: var(--vert); }
.liste-taches .t.sabotage { color: #ff6b6b; font-weight: 800; animation: clignote 1s infinite; }
.liste-taches .imp { color: #ff8a8a; margin-bottom: 4px; font-weight: 800; }
@keyframes clignote { 50% { opacity: .4; } }
.hud-haut-droite { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#minimap { width: 120px; height: 254px; border-radius: 10px; border: 2px solid #ffffff55; background: #050810; cursor: pointer; }
.zone-nom { background: #000a; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 800; }
.hud-bas-droite { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 70vw; }
.action { width: 86px; height: 86px; border-radius: 18px; border: 3px solid #fff4; background: #1b2438dd; color: #fff; font-weight: 900; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; cursor: pointer; text-transform: uppercase; }
.action span { font-size: 34px; line-height: 1; }
.action i { font-style: normal; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action kbd { position: absolute; top: 3px; left: 5px; font-size: 10px; opacity: .6; font-family: inherit; }
.action:disabled { opacity: .35; cursor: default; }
.action.rouge:not(:disabled) { border-color: var(--rouge); background: #5a1420dd; }
.action:not(:disabled):hover { border-color: #fff; }
.action .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #000a; border-radius: 15px; }
.action .cd:empty { display: none; }
.alerte-sabotage { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #a0101ccc; border: 2px solid #ff6b6b; padding: 8px 16px; border-radius: 10px; font-weight: 900; animation: clignote 1s infinite; text-align: center; pointer-events: none; }
.panneau-trappe { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.info-fantome { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: #000a; padding: 6px 12px; border-radius: 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.joystick { position: absolute; left: 24px; bottom: 24px; width: 130px; height: 130px; border-radius: 50%; background: #ffffff18; border: 2px solid #ffffff44; touch-action: none; }
.joystick .manette { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: #ffffff66; }

.panneau-admin { position: absolute; left: 10px; bottom: 10px; width: 290px; max-height: 45vh; overflow-y: auto; background: #0d1426ee; border: 2px solid var(--jaune); border-radius: 12px; padding: 10px; font-size: 13px; }
.panneau-admin h3 { margin: 4px 0 6px; font-size: 14px; color: var(--jaune); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.panneau-admin .grille { display: flex; flex-wrap: wrap; gap: 4px; }
.panneau-admin .mj { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 2px 0; border-bottom: 1px solid #ffffff10; }
.panneau-admin.replie .contenu { display: none; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; background: #000c; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 10px; }
.fermer { background: var(--rouge); color: #fff; border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 18px; cursor: pointer; font-weight: 900; }
.role-boite { text-align: center; }
#role-titre { font-size: clamp(44px, 10vw, 96px); font-weight: 900; letter-spacing: 4px; text-shadow: 0 0 30px currentColor; }
#role-texte { font-size: 20px; margin: 10px 0 20px; }
.role-persos { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.role-persos canvas { width: 80px; height: 100px; }

.minijeu { background: var(--panneau); border: 3px solid var(--bord); border-radius: 18px; padding: 12px; width: min(820px, 96vw); max-height: 96vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; position: relative; }
.minijeu-entete { display: flex; justify-content: space-between; align-items: center; }
.minijeu-entete h3 { margin: 0; }
.minijeu-zone { display: flex; justify-content: center; flex-shrink: 0; }
.mj-canvas { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; touch-action: none; display: block; max-width: calc(70vh * 4 / 3); }
.minijeu-message { margin: 0; min-height: 1.4em; text-align: center; font-weight: 700; }
.minijeu-message.ok { color: var(--vert); }
.minijeu-message.erreur { color: #ff8a8a; }
.minijeu-bravo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 6vw, 56px); font-weight: 900; color: var(--vert); background: #000a; border-radius: 16px; text-shadow: 0 3px 0 #000; animation: zoom .4s; }
@keyframes zoom { from { transform: scale(.6); opacity: 0; } }

.mj-bar, .mj-pizza { display: grid; grid-template-columns: 180px 1fr; grid-template-areas: "recette centre" "ing ing" "act act"; gap: 10px; width: 100%; }
.mj-bar canvas.mj-verre { grid-area: centre; justify-self: center; height: 220px; }
.mj-pizza-centre { grid-area: centre; display: flex; justify-content: center; }
.mj-pizza-centre .mj-canvas { max-height: 34vh; max-width: calc(34vh * 1.2); }
.mj-recette { grid-area: recette; background: #f4ecd8; color: #3a2a1a; border-radius: 10px; padding: 10px; font-size: 14px; }
.mj-recette-titre { font-weight: 900; font-size: 17px; margin-bottom: 6px; }
.mj-ligne { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #0002; }
.mj-ligne.fait { color: #1d8a3a; text-decoration: line-through; }
.mj-ligne.trop { color: #c0392b; }
.mj-ingredients { grid-area: ing; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.mj-ingredients.desactive { opacity: .3; pointer-events: none; }
.mj-ing { background: var(--panneau2); color: var(--texte); border: 2px solid var(--c); border-radius: 10px; padding: 4px; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.mj-ing span { font-size: 22px; color: var(--c); }
.mj-ing:active { transform: scale(.95); }
.mj-actions { grid-area: act; display: flex; justify-content: center; gap: 10px; }
@media (max-width: 600px) { .mj-bar, .mj-pizza { grid-template-columns: 1fr; grid-template-areas: "recette" "centre" "ing" "act"; } }

.carte-grande { position: relative; height: 92vh; display: flex; flex-direction: column; align-items: center; }
.carte-grande canvas { height: calc(92vh - 30px); aspect-ratio: 2670 / 5640; border-radius: 12px; border: 2px solid #fff5; }
.carte-grande .fermer { position: absolute; top: -6px; right: -40px; }

.menu-sabotage, .menu-test { display: flex; flex-direction: column; gap: 10px; width: min(360px, 92vw); }
.choix-role { display: flex; gap: 16px; justify-content: center; }

.alerte { flex-direction: column; background: radial-gradient(#a0101c, #2a0006); }
.alerte-texte { font-size: clamp(40px, 9vw, 90px); font-weight: 900; color: #fff; text-shadow: 0 5px 0 #000; text-align: center; animation: zoom .5s; }

.reunion { background: #9fb8d1; color: #10203a; border: 6px solid #3a5070; border-radius: 22px; width: min(1000px, 98vw); height: min(680px, 96vh); display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.reunion-entete { display: flex; justify-content: space-between; align-items: center; }
.reunion-entete h2 { font-size: 24px; margin: 0; }
.reunion-temps { font-weight: 900; font-size: 18px; }
.reunion-corps { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; min-height: 0; }
@media (max-width: 700px) { .reunion-corps { grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; } }
.reunion-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; align-content: start; overflow-y: auto; }
.reunion .chat-panneau { background: #e8f0f8; border-radius: 12px; padding: 8px; }
.reunion .chat-msg { background: #fff; color: #10203a; }
.reunion .chat-msg.moi { background: #d7ecff; }
.reunion .chat-msg.systeme { background: transparent; color: #4a5a7a; }
.vote-carte { background: #e8f0f8; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; position: relative; border: 3px solid transparent; min-height: 66px; }
.vote-carte canvas { width: 44px; height: 56px; flex: 0 0 auto; }
.vote-carte .nom { font-weight: 900; flex: 1; }
.vote-carte.mort { opacity: .45; cursor: default; filter: grayscale(.6); }
.vote-carte.selection { border-color: #2d5be3; }
.vote-carte .badge { font-size: 11px; background: #2d5be3; color: #fff; border-radius: 6px; padding: 1px 5px; }
.vote-carte .megaphone { position: absolute; top: 2px; right: 6px; }
.vote-carte .confirmer { display: flex; gap: 4px; }
.vote-carte .confirmer button { width: 34px; height: 34px; border-radius: 50%; border: 0; font-size: 17px; cursor: pointer; }
.vote-carte .votes-recus { display: flex; gap: 2px; flex-wrap: wrap; }
.vote-carte .votes-recus i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #000; display: inline-block; }
.reunion-pied { display: flex; gap: 12px; align-items: center; }

#ov-ejection { background: #02030a; flex-direction: column; }
#canvas-ejection { position: absolute; inset: 0; width: 100%; height: 100%; }
.ejection-texte { position: relative; font-size: clamp(22px, 4vw, 40px); font-weight: 900; text-align: center; white-space: pre-line; min-height: 2.6em; }
.ejection-votes { position: relative; margin-top: 18px; font-size: 13px; color: var(--gris); max-width: 600px; text-align: center; }

.fin { text-align: center; }
#fin-titre { font-size: clamp(50px, 11vw, 110px); margin: 0; letter-spacing: 5px; text-shadow: 0 0 40px currentColor; }
.fin-roles { margin: 16px auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 700px; }
.fin-roles span { background: var(--panneau2); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.fin-boutons { display: flex; gap: 10px; justify-content: center; }

.chat-fantome { width: min(420px, 94vw); height: min(500px, 80vh); }
.chat-fantome h2 { justify-content: space-between; }

.toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); background: #000d; border: 2px solid var(--accent); padding: 10px 16px; border-radius: 12px; font-weight: 800; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 50; text-align: center; }
.toast.visible { opacity: 1; }

@media (max-width: 600px), (max-height: 500px) {
  .liste-taches { font-size: 11px; max-height: 26vh; }
  #minimap { width: 80px; height: 169px; }
  .action { width: 64px; height: 64px; font-size: 9px; border-radius: 14px; }
  .action span { font-size: 24px; }
  .action kbd { display: none; }
  .panneau-admin { width: 220px; }
  .mj-ingredients { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

.cameras { background: #10151f; border: 4px solid #3a4558; border-radius: 18px; padding: 12px; width: min(1100px, 96vw); display: flex; flex-direction: column; gap: 10px; }
.cameras-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.flux { position: relative; background: #000; border: 3px solid #222; border-radius: 10px; overflow: hidden; }
.flux canvas { width: 100%; aspect-ratio: 3 / 2; display: block; }
.flux .etiquette { position: absolute; left: 8px; top: 6px; font-weight: 900; font-size: 13px; color: #bfe9ff; text-shadow: 0 1px 2px #000; }
.flux .rec { position: absolute; right: 10px; top: 6px; color: #ff3b3b; font-weight: 900; font-size: 13px; animation: clignote 1s infinite; }