/* ============================================================
   PETIT BAC — Multijoueur
   Thème "arcade nocturne" (accent ambré), cohérent avec le hub.
   ============================================================ */
:root{
  --bg:#0a0e1a;
  --surface:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3bd;
  --dim:#626b86;
  --accent:#fbbf24;
  --accent-2:#fcd34d;
  --success:#34d399;
  --info:#38bdf8;
  --danger:#fb7185;
  --panel-solid:#131a2c;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Garantit que l'attribut HTML "hidden" masque vraiment un élément, même si
   une règle plus bas lui donne un display explicite (.modal est en flex).
   Une feuille d'auteur l'emporte toujours sur le [hidden]{display:none} du
   navigateur : sans ce garde-fou, le panneau de vote resterait affiché en
   permanence et bloquerait toute la page. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(251,191,36,0.13), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(94,234,212,0.07), transparent 70%),
    var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ===== Intégration iOS (Dynamic Island / status bar + home indicator) =====
   Bandeaux « verre dépoli » fixés dans les zones sûres : le contenu qui
   défile dessous est flouté proprement au lieu de passer brutalement sous
   l'encoche en haut ou la barre d'accueil en bas. Invisibles là où les
   insets valent 0 (bureau, Android sans encoche). */
body::before, body::after{
  content:""; position:fixed; left:0; right:0; z-index:60; pointer-events:none;
  background:rgba(0,0,0,0.18);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
}
body::before{ top:0; height:env(safe-area-inset-top); }
body::after{ bottom:0; height:env(safe-area-inset-bottom); }
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(251,191,36,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,191,36,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}
.bg-glow{position:fixed; inset:0; z-index:0; pointer-events:none;}

/* ---------- Header ---------- */
.app-header{
  position:relative; z-index:1;
  text-align:center;
  padding:calc(26px + env(safe-area-inset-top)) 16px 18px;
  border-bottom:1px solid var(--line);
}
.app-header h1{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  letter-spacing:-0.01em;
  display:inline-flex; align-items:center; gap:10px;
}
.game-logo{width:30px; height:30px; color:var(--accent); filter:drop-shadow(0 2px 8px var(--accent));}
.home-btn{
  position:absolute; left:16px; top:calc(24px + env(safe-area-inset-top));
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--surface); border:1px solid var(--line);
  color:var(--muted); transition:color .15s, border-color .15s;
}
.home-btn:hover{color:var(--accent); border-color:var(--accent);}
.home-btn svg{width:20px; height:20px;}

/* ---------- Layout ---------- */
.wrap{position:relative; z-index:1; max-width:560px; margin:0 auto; padding:16px;}
.screen{display:none;}
.screen.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:18px; margin-bottom:14px;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.card h2{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}

label{display:block; font-size:0.82rem; color:var(--muted); font-weight:500; margin:12px 0 5px;}
input[type=text], input[type=number], select{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,0.25);
  color:var(--text); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color .15s, background .15s;
}
input:focus, select:focus{outline:none; border-color:var(--accent); background:rgba(0,0,0,0.35);}

button{
  font-family:var(--font-body); font-weight:600; cursor:pointer;
  border-radius:12px; padding:13px 18px; font-size:0.95rem;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  transition:transform .12s, background .18s, border-color .18s, box-shadow .18s, filter .18s;
  margin-top:12px;
}
button:active{transform:scale(0.98);}
button.primary{
  width:100%;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#3a2c05; border:none; font-weight:700;
  box-shadow:0 6px 20px rgba(251,191,36,0.32);
}
button.primary:hover{filter:brightness(1.06); transform:translateY(-2px);}
button.ghost{background:transparent; border:1px solid var(--line-2); color:var(--muted);}
button.ghost:hover{background:var(--surface); color:var(--text);}
button:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; filter:none;}

.hint{font-size:0.8rem; color:var(--dim); margin-top:10px; line-height:1.5;}

/* ---------- Séparateur "ou" ---------- */
.or-sep{display:flex; align-items:center; gap:12px; margin:6px 2px 18px; color:var(--dim);}
.or-sep::before, .or-sep::after{content:""; flex:1; height:1px; background:var(--line);}
.or-sep span{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em;}

/* ---------- Code de salon ---------- */
.code-input{text-transform:uppercase; letter-spacing:0.4em; font-family:var(--font-display); font-size:1.3rem; text-align:center;}
.code-card{text-align:center;}
.code-label{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted); margin-bottom:8px;}
.code-display{
  font-family:var(--font-display); font-weight:700; font-size:3rem;
  letter-spacing:0.35em; text-indent:0.35em;
  color:var(--accent); text-shadow:0 0 24px rgba(251,191,36,0.5);
}
.count-badge{
  font-family:var(--font-display); font-size:0.8rem; color:var(--accent);
  background:rgba(251,191,36,0.14); border:1px solid rgba(251,191,36,0.3);
  border-radius:20px; padding:2px 10px; margin-left:auto;
}

/* ---------- Liste joueurs (lobby) ---------- */
#players-list{display:flex; flex-direction:column;}
.player-row{
  display:flex; align-items:center; gap:8px; padding:9px 4px;
  border-top:1px solid var(--line);
}
.player-row:first-child{border-top:none;}
.pr-dot{width:8px; height:8px; border-radius:50%; background:var(--success); flex:none;}
.pr-dot.off{background:#5a637d;}
.pr-name{flex:1; font-size:0.95rem;}
.tag-host, .tag-you, .tag-off{
  font-size:0.68rem; font-weight:600; padding:1px 7px; border-radius:10px; margin-left:4px;
}
.tag-host{background:rgba(251,191,36,0.15); color:var(--accent);}
.tag-you{background:rgba(56,189,248,0.16); color:var(--info);}
.tag-off{background:rgba(148,163,184,0.15); color:#94a3b8;}
.kick-btn{
  flex:none; width:30px; height:30px; margin:0; padding:0;
  border-radius:8px; font-size:0.9rem; line-height:1;
  background:rgba(251,113,133,0.12); border:1px solid rgba(251,113,133,0.3);
  color:var(--danger);
}
.kick-btn:hover{background:rgba(251,113,133,0.22);}

/* ---------- Sélecteur de catégories ---------- */
.cat-count{
  font-family:var(--font-display); font-size:0.75rem; color:var(--accent);
  background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.28);
  border-radius:20px; padding:1px 9px; margin-left:6px;
}
.cat-picker{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.cat-chip{
  font-size:0.83rem; padding:8px 13px; border-radius:20px; cursor:pointer;
  background:rgba(0,0,0,0.25); border:1px solid var(--line); color:var(--muted);
  transition:all .15s; user-select:none;
}
.cat-chip.on{
  background:rgba(251,191,36,0.16); border-color:rgba(251,191,36,0.5); color:var(--accent);
}
.cat-chip:active{transform:scale(0.95);}

.settings-summary{display:flex; flex-wrap:wrap; gap:8px;}
.sum-chip{
  font-size:0.8rem; color:var(--muted);
  background:rgba(255,255,255,0.05); border:1px solid var(--line);
  border-radius:20px; padding:5px 12px;
}

.lobby-actions{margin-top:4px;}
.lobby-actions .ghost{width:100%;}
.waiting-note{text-align:center;}

/* ---------- Entête de manche ---------- */
.round-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.round-badge{
  font-family:var(--font-display); font-size:0.9rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:6px 14px;
}
.round-badge b{color:var(--accent);}
.round-letter-mini{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--accent); background:rgba(251,191,36,0.12);
  border:1px solid rgba(251,191,36,0.35); border-radius:12px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Carte de tour générique ---------- */
.turn-card{text-align:center;}
.turn-role{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem;
  margin-bottom:10px;
}

/* ---------- Phase saisie ---------- */
.letter-hero{
  display:flex; flex-direction:column; align-items:center; margin-bottom:10px;
}
.letter-label{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--muted);}
.letter-big{
  font-family:var(--font-display); font-weight:700; font-size:4.5rem; line-height:1;
  color:var(--accent); text-shadow:0 0 34px rgba(251,191,36,0.5);
}
.timer{
  font-family:var(--font-display); font-weight:700; font-size:2.2rem; line-height:1;
  color:var(--text); margin-bottom:14px;
}
.timer.low{color:var(--danger); animation:pulse .5s infinite alternate;}
@keyframes pulse{from{opacity:0.6;} to{opacity:1;}}

#answers-form{display:flex; flex-direction:column; gap:10px; margin-bottom:6px; text-align:left;}
.answer-field{display:flex; flex-direction:column; gap:4px;}
.answer-field label{margin:0 0 2px;}
.answer-field .af-label{
  display:flex; align-items:center; gap:6px;
  font-size:0.8rem; color:var(--muted); font-weight:500;
}
.answer-input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,0.28);
  color:var(--text); font-size:1rem;
}
.answer-input.filled{border-color:rgba(251,191,36,0.45);}
.stop-btn{margin-top:16px;}
.fill-status{font-size:0.82rem; color:var(--muted); margin-top:12px; text-align:center;}

.emergency-inline{margin-top:6px;}
.emergency-inline .ghost{width:100%; border-color:rgba(251,113,133,0.3); color:var(--danger);}

/* ---------- Phase revue ---------- */
.review-intro .turn-role{margin-bottom:6px;}
.rev-letter, .review-intro .rev-letter{
  color:var(--accent); font-family:var(--font-display); font-weight:700;
}
#review-grid{padding:8px;}
.rev-cat{border-top:1px solid var(--line); padding:12px 6px;}
.rev-cat:first-child{border-top:none;}
.rev-cat-label{
  font-family:var(--font-display); font-weight:600; font-size:0.9rem;
  color:var(--text); margin-bottom:8px;
}
.rev-cells{display:flex; flex-direction:column; gap:6px;}
.rev-cell{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px;
  background:rgba(0,0,0,0.22); border:1px solid var(--line);
  transition:border-color .15s, background .15s;
}
.rev-cell.can-contest{cursor:pointer;}
.rev-cell.can-contest:active{transform:scale(0.99);}
.rc-who{font-size:0.8rem; color:var(--muted); width:74px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rc-answer{flex:1; font-size:0.95rem; font-weight:500; word-break:break-word;}
.rc-pts{
  font-family:var(--font-display); font-weight:700; font-size:0.95rem;
  flex:none; min-width:34px; text-align:right;
}
.rev-cell.st-unique{border-color:rgba(52,211,153,0.4); background:rgba(52,211,153,0.08);}
.rev-cell.st-unique .rc-pts{color:var(--success);}
.rev-cell.st-shared{border-color:rgba(56,189,248,0.35); background:rgba(56,189,248,0.07);}
.rev-cell.st-shared .rc-pts{color:var(--info);}
.rev-cell.st-empty{opacity:0.5;}
.rev-cell.st-empty .rc-answer{font-style:italic; color:var(--dim);}
.rev-cell.st-wrongletter .rc-answer{text-decoration:line-through; color:var(--muted);}
.rev-cell.st-wrongletter .rc-pts, .rev-cell.st-empty .rc-pts{color:var(--dim);}
.rev-cell.st-contested{border-color:rgba(251,113,133,0.45); background:rgba(251,113,133,0.08);}
.rev-cell.st-contested .rc-answer{text-decoration:line-through; color:var(--danger);}
.rev-cell.st-contested .rc-pts{color:var(--danger);}
/* Mon propre vote, distingué par verdict : on doit savoir ce qu'on a voté
   sans rouvrir le panneau. */
.rev-cell.vote-annuler{box-shadow:inset 0 0 0 2px rgba(251,113,133,0.6);}
.rev-cell.vote-demi{box-shadow:inset 0 0 0 2px rgba(251,191,36,0.6);}

/* Réponse ramenée à 1 point par vote : ni verte ni barrée, elle a son
   propre repère pour qu'on comprenne pourquoi elle ne vaut qu'un point. */
.rev-cell.st-halved{border-color:rgba(251,191,36,0.45); background:rgba(251,191,36,0.08);}
.rev-cell.st-halved .rc-pts{color:var(--accent);}
.rc-flag{
  font-size:0.66rem; font-weight:600; padding:1px 6px; border-radius:8px; flex:none;
  background:rgba(251,113,133,0.15); color:var(--danger);
}
.rc-half{
  font-size:0.66rem; font-weight:600; padding:1px 6px; border-radius:8px; flex:none;
  background:rgba(251,191,36,0.16); color:var(--accent);
}
.rc-mine{
  font-size:0.62rem; font-weight:700; padding:1px 6px; border-radius:8px; flex:none;
  background:rgba(56,189,248,0.16); color:var(--info);
}

.mini-scores{display:flex; flex-direction:column; gap:6px;}
.ms-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:10px; background:rgba(0,0,0,0.2);
}
.ms-rank{font-family:var(--font-display); font-weight:700; color:var(--dim); width:20px; text-align:center;}
.ms-name{flex:1; font-size:0.92rem;}
.ms-name .tag-you{margin-left:6px;}
.ms-delta{font-size:0.78rem; color:var(--success); font-family:var(--font-display);}
.ms-score{font-family:var(--font-display); font-weight:700; font-size:1.15rem;}

/* ---------- Zone hôte ---------- */
.emergency-card{border-color:rgba(251,113,133,0.25);}
.emergency-card #btn-host-skip{width:100%; border-color:rgba(251,113,133,0.35); color:var(--danger);}
.emergency-card #btn-host-skip:hover{background:rgba(251,113,133,0.1);}

/* ---------- Fin de partie ---------- */
.end-card{text-align:center;}
.trophy{color:var(--accent); width:64px; height:64px; margin:0 auto 12px; filter:drop-shadow(0 4px 16px rgba(251,191,36,0.4));}
.trophy svg{width:100%; height:100%;}
.end-card h2{border:none; justify-content:center; font-size:1.4rem; display:block; margin-bottom:18px;}
#final-scores{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.final-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:14px;
  background:rgba(0,0,0,0.22); border:1px solid var(--line);
}
.final-row.first{border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.08);}
.fr-rank{font-family:var(--font-display); font-weight:700; color:var(--dim); width:22px; text-align:center;}
.final-row.first .fr-rank{color:var(--accent);}
.fr-name{flex:1; text-align:left; font-family:var(--font-display); font-weight:600;}
.fr-score{font-family:var(--font-display); font-weight:700; font-size:1.3rem;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%, 20px);
  background:var(--panel-solid); border:1px solid var(--line-2);
  color:var(--text); font-size:0.9rem; font-weight:500;
  padding:12px 20px; border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:100; max-width:90%; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

*::-webkit-scrollbar{width:8px; height:8px;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12); border-radius:8px;}

/* ---------- Bouton d'action destructrice (arrêt de partie, hôte) ---------- */
.danger-btn{
  width:100%; margin-top:10px;
  border-color:rgba(251,113,133,0.45) !important;
  color:var(--danger) !important;
}
.danger-btn:hover{ background:rgba(251,113,133,0.12) !important; color:#fff !important; }


/* ---------- Panneau de vote (correction) ---------- */
.modal{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
.modal-backdrop{position:absolute; inset:0; background:rgba(3,7,18,0.86);}
.modal-box{
  position:relative; z-index:1; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:20px 20px 0 0;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
}
.modal-close{
  position:absolute; top:10px; right:12px; margin:0;
  width:34px; height:34px; padding:0; border-radius:50%;
  background:var(--surface-2); color:var(--muted); font-size:1.3rem; line-height:1;
}
.vote-titre{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  text-align:center; word-break:break-word; padding:0 34px;
}
.vote-sous{
  text-align:center; font-size:0.76rem; color:var(--dim);
  margin:4px 0 16px;
}
.vote-opt{
  display:block; width:100%; text-align:left; margin-bottom:10px;
  padding:14px; border-radius:14px;
  background:rgba(0,0,0,0.25); border:1px solid var(--line-2);
}
.vote-opt b{display:block; font-family:var(--font-display); font-size:0.98rem; margin-bottom:4px;}
.vote-opt span{display:block; font-size:0.76rem; color:var(--dim); line-height:1.45;}
.vote-opt .vote-cnt{margin-top:6px; font-size:0.72rem; color:var(--muted); font-weight:600;}
#vote-annuler.on{border-color:var(--danger); background:rgba(251,113,133,0.12);}
#vote-annuler.on b{color:var(--danger);}
#vote-demi.on{border-color:var(--accent); background:rgba(251,191,36,0.12);}
#vote-demi.on b{color:var(--accent);}
.center{text-align:center;}