:root{
  --bg:#1c1530;
  --panel:#241a3d;
  --panel2:#2d2049;
  --gold:#d9a441;
  --accentA:#c1443e;
  --accentB:#3e79c1;
  --green:#3f9d5c;
  --text:#f1ece0;
  --muted:#a49bb8;
  --border:#3c2f5c;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:radial-gradient(circle at 50% 0%, #2a2049, #120c1e 70%);
  color:var(--text);
  min-height:100vh;
  padding-bottom:40px;
}
header{
  text-align:center;
  padding:18px 12px 10px;
  border-bottom:2px solid var(--gold);
  background:linear-gradient(180deg, rgba(217,164,65,0.25), transparent);
}
header h1{margin:0; font-size:1.6em; letter-spacing:1px; color:var(--gold);}
header .sub{color:var(--muted); font-size:0.85em; margin-top:4px;}
.wrap{max-width:720px; margin:0 auto; padding:12px;}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.card h2{
  margin:0 0 10px;
  font-size:1.05em;
  color:var(--gold);
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
}
label{display:block; font-size:0.85em; color:var(--muted); margin:10px 0 4px;}
input[type=text], input[type=number], select{
  width:100%;
  padding:9px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-family:inherit;
  font-size:0.95em;
  margin-bottom:6px;
}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:11px 16px;
  font-size:0.95em;
  background:var(--accentB);
  color:#fff;
  margin:4px 4px 4px 0;
  transition:background .15s, transform .1s;
}
button:hover{opacity:0.9;}
button:active{transform:scale(0.97);}
button.secondary{background:var(--panel2); border:1px solid var(--border); color:var(--text);}
button.gold{background:var(--gold); color:#2a1e0f; font-weight:bold;}
button.green{background:var(--green);}
button:disabled{opacity:0.35; cursor:not-allowed;}
.row{display:flex; gap:8px; flex-wrap:wrap;}

.screen{display:none;}
.screen.active{display:block;}

.scoreboard{display:flex; gap:10px; justify-content:space-around;}
.score-item{flex:1; text-align:center; padding:8px; border-radius:9px; border:2px solid transparent;}
.score-item .name{font-size:0.85em; color:var(--muted);}
.score-item .points{font-size:1.5em; font-weight:bold; color:var(--gold);}
.score-item.active{background:rgba(217,164,65,0.1);}

.turn-card{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.turn-info{font-size:1em;}

.team-board{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin-bottom:14px;
}
.team-board.teamA{border-top:4px solid var(--accentA);}
.team-board.teamB{border-top:4px solid var(--accentB);}
.team-board h3{margin:0 0 8px; font-size:1em;}
.team-board .board-sub{font-size:0.78em; color:var(--muted); margin-bottom:10px;}
.board-head{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.board-head h3{margin:0;}
.turn-badge{
  display:inline-block; font-size:0.65em; background:var(--gold); color:#2a1e0f;
  padding:2px 8px; border-radius:10px; margin-left:6px; font-weight:bold; vertical-align:middle;
}
.board-collapsed-note{
  font-size:0.85em; color:var(--muted); font-style:italic; padding:10px 0;
}

.secret-box{
  background:var(--panel2);
  border:2px dashed var(--gold);
  border-radius:10px;
  padding:10px;
  margin-bottom:12px;
  text-align:center;
  cursor:pointer;
  font-size:0.85em;
  color:var(--muted);
}
.secret-box.revealed{
  cursor:default;
  border-style:solid;
}
.secret-reveal-content{display:flex; align-items:center; gap:10px; justify-content:center;}
.secret-reveal-content .mini-face{width:56px; height:56px;}

.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.filter-group{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
}
.filter-group .fg-label{font-size:0.72em; color:var(--muted); margin-bottom:4px;}
.filter-chip{
  display:inline-block;
  font-size:0.75em;
  padding:4px 9px;
  margin:2px 3px 2px 0;
  border-radius:14px;
  background:#3a2c5c;
  border:1px solid var(--border);
  cursor:pointer;
  color:var(--text);
  transition:background .12s, border-color .12s, color .12s, transform .08s;
}
.filter-chip:hover{background:#4a3a70; border-color:var(--gold);}
.filter-chip.crossed-out{
  background:transparent;
  color:#8a7a95;
  border-color:#5a2f38;
  text-decoration:line-through;
  opacity:0.65;
}
.filter-chip.crossed-out:hover{opacity:0.9;}
.filter-chip.reset{background:transparent; border:1px dashed var(--muted); color:var(--muted);}
.filters-hint{font-size:0.75em; color:var(--muted); margin-bottom:8px; font-style:italic;}

.char-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px,1fr));
  gap:8px;
}
.char-card{
  background:var(--panel2);
  border:2px solid var(--border);
  border-radius:9px;
  padding:5px;
  text-align:center;
  cursor:pointer;
  transition:opacity .15s, border-color .15s;
}
.char-card .face{width:100%; aspect-ratio:1/1;}
.char-card .cname{font-size:0.65em; margin-top:3px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.char-card.eliminated{opacity:0.18;}
.char-card.eliminated .face{filter:grayscale(1);}

.accuse-row{margin-top:10px;}

.log{max-height:220px; overflow-y:auto; font-size:0.85em;}
.log-entry{
  padding:7px 9px;
  border-left:3px solid var(--gold);
  margin-bottom:6px;
  background:var(--panel2);
  border-radius:0 7px 7px 0;
}

.modal-bg{
  display:none; position:fixed; inset:0; background:#0d0916;
  z-index:50; align-items:center; justify-content:center;
}
.modal-bg.active{display:flex;}
.modal{
  background:var(--panel); border:2px solid var(--gold); border-radius:12px;
  padding:20px; max-width:90%; width:380px; text-align:center;
}
.modal h3{margin-top:0; color:var(--gold);}
.modal .mini-face{width:110px; height:110px; margin:10px auto;}

small.hint{display:block; color:var(--muted); margin-top:4px; font-size:0.78em;}

.pick-sub{font-size:0.85em; color:var(--muted); margin-bottom:10px;}
.char-card.pick-selected{
  border-color:var(--gold);
  background:rgba(217,164,65,0.18);
  box-shadow:0 0 0 2px rgba(217,164,65,0.4);
}

#roundend-detail, #matchend-detail{text-align:center; margin:14px 0;}
.result-face{width:100px; height:100px; margin:10px auto;}
.final-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px; margin-bottom:8px; border-radius:9px;
  background:var(--panel2); border:1px solid var(--border);
}
.final-row.winner{border:2px solid var(--gold); background:rgba(217,164,65,0.12);}


/* ============================================================
   THÈME MODERNE "ARCADE NOCTURNE" — surcharge globale
   (injecté en fin de fichier : gagne la cascade sur les styles hérités)
   Accent signature : #5eead4
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0a0e1a;
  --panel:rgba(255,255,255,0.04);
  --panel2:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3bd;
  --dim:#626b86;
  --accent:#5eead4;
  --accent-soft:rgba(94,234,212,0.18);
  --gold:#5eead4;
  --green:#34d399;
  --green-light:#4ade80;
  --red:#fb7185;
  --panel-solid:#131a2c;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

body{
  font-family:var(--font-body) !important;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(94,234,212,0.14), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(167,139,250,0.10), transparent 70%),
    #0a0e1a !important;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh;
}

/* En-tête */
header{
  text-align:center;
  padding:calc(26px + env(safe-area-inset-top)) 16px 18px !important;
  border-bottom:1px solid var(--border) !important;
  background:transparent !important;
}
header h1{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-size:1.5rem !important;
  letter-spacing:-0.01em !important;
  color:var(--text) !important;
  display:inline-flex; align-items:center; gap:10px;
}
header .sub{color:var(--muted) !important; font-size:0.88rem !important; margin-top:6px !important;}

/* Cartes / panneaux : verre dépoli */
.card{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  padding:18px !important;
  margin-bottom:14px !important;
  box-shadow:0 8px 30px rgba(0,0,0,0.25) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.card h2{
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-size:1rem !important;
  letter-spacing:0.01em;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
  padding-bottom:10px !important;
  margin-bottom:12px !important;
}

label{color:var(--muted) !important; font-size:0.82rem !important; font-weight:500;}

/* Champs */
input[type=text], input[type=number], select, textarea{
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  background:rgba(0,0,0,0.25) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-size:0.95rem !important;
  transition:border-color .15s, background .15s;
}
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent) !important;
  background:rgba(0,0,0,0.35) !important;
}

/* Boutons */
button{
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  border-radius:12px !important;
  padding:12px 18px !important;
  font-size:0.92rem !important;
  letter-spacing:0.01em;
  background:var(--panel2) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  transition:transform .12s, background .18s, border-color .18s, box-shadow .18s !important;
}
button:hover{background:var(--surface-2) !important; border-color:var(--border-2) !important;}
button:active{transform:scale(0.97);}
button.secondary{background:var(--panel2) !important; border:1px solid var(--border) !important; color:var(--text) !important;}
button.secondary:hover{background:rgba(255,255,255,0.10) !important;}

/* Bouton principal (gold/g_primary) : dégradé signature */
button.gold, button.green{
  background:linear-gradient(120deg, #5eead4, #99f6e4) !important;
  color:#07121e !important;
  border:none !important;
  font-weight:700 !important;
  box-shadow:0 6px 20px rgba(94,234,212,0.35) !important;
}
button.gold:hover, button.green:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(94,234,212,0.35) !important;
}
button:disabled{opacity:0.4 !important; cursor:not-allowed; transform:none !important; box-shadow:none !important; filter:none !important;}

/* Modales : verre + arrondi */
.modal-bg{background:rgba(6,10,20,0.72) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.modal{
  background:var(--panel-solid) !important;
  border:1px solid var(--border-2) !important;
  border-radius:22px !important;
  box-shadow:0 24px 70px rgba(0,0,0,0.5) !important;
}
.modal h3{font-family:var(--font-display) !important; color:var(--text) !important;}
.rules-body b{color:var(--accent) !important;}

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

.hint, small.hint{color:var(--dim) !important;}

/* Logo dans le titre + bouton retour au hub */
.game-logo{width:30px; height:30px; color:var(--accent); filter:drop-shadow(0 2px 8px var(--accent));}
header{position:relative;}
.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(--panel); border:1px solid var(--border);
  color:var(--muted); transition:color .15s, border-color .15s, background .15s;
}
.home-btn:hover{color:var(--accent); border-color:var(--accent);}
.home-btn svg{width:20px; height:20px;}