@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;1,400&display=swap');

:root {
  --noir:      #000000;
  --noir2:     #060306;
  --noir3:     #0a050a;
  --rouge:     #8b0000;
  --rouge2:    #c41a00;
  --rouge3:    #ff2200;
  --parch:     #d4a855;
  --parch2:    #b8904a;
  --parch3:    #8a6530;
  --parch4:    #5a3f1a;
  --sang:      #6b0000;
  --sang2:     #a00000;
  --bord:      rgba(180,100,20,.18);
  --bord2:     rgba(180,100,20,.38);
  --bord-r:    rgba(140,0,0,.35);
}

/* ── Reset & Base ── */
* { box-sizing:border-box; margin:0; padding:0; }

html { height:100%; }

body {
  font-family: 'Cinzel', serif;
  background:
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(80,3,2,.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 25% at 50% 0%,   rgba(60,2,1,.12) 0%, transparent 55%),
    var(--noir);
  color: var(--parch);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── Fond rouge brumeux global ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,   rgba(120,0,0,.22) 0%, transparent 60%),
    radial-gradient(ellipse 80%  40% at 20% 50%,   rgba(80,0,0,.12)  0%, transparent 55%),
    radial-gradient(ellipse 80%  40% at 80% 50%,   rgba(80,0,0,.12)  0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 100%,  rgba(60,0,0,.18)  0%, transparent 60%);
  pointer-events: none;
}

/* ── Texture grain parchemin ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
  pointer-events: none;
}

#app { min-height:100vh; position:relative; z-index:1; }

/* ── Vues ── */

@media (min-width: 700px) {
  
}

/* Canvas étoiles/brume */
#stars {
  position: fixed; top:0; left:0;
  width:100%; height:100%;
  pointer-events: none; z-index: 0; opacity: .5;
}

/* ═══════════════════════════════════════════════════
   ARBRES MAUDITS — SVG inline via pseudo-éléments
═══════════════════════════════════════════════════ */


@media (min-width: 700px) {
  
}

/* Brume rouge au sol */


/* ═══════════════════════════════════════════════════
   LOBBY
═══════════════════════════════════════════════════ */

#vLobby {
  background: var(--noir);
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.lobby-inner {
  text-align: center;
  padding: 2rem 1.5rem 2rem;
  position: relative; z-index: 10;
}

.lobby-title {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: clamp(2.2rem, 9vw, 3.8rem);
  color: var(--parch);
  text-shadow:
    0 0 40px rgba(180,0,0,.5),
    0 2px 4px rgba(0,0,0,.8);
  line-height: 1.1; margin-bottom: .4rem;
}

.lobby-sub {
  font-family: 'Cinzel', serif; font-size: .58rem;
  letter-spacing: .5em; color: var(--parch3);
  text-transform: uppercase; margin-bottom: .5rem;
}

.lobby-sep {
  width: 120px; height: 1px;
  background: linear-gradient(to right, transparent, var(--parch3), transparent);
  margin: .8rem auto 1.8rem;
}

.lobby-desc {
  font-family: 'Crimson Text', serif; font-style: italic;
  font-size: .95rem; color: var(--parch3); margin-bottom: 2.2rem;
}

.lobby-btn {
  display: flex; width: 100%; max-width: 280px;
  margin: .45rem auto;
  /* Parchemin brûlé */
  background: linear-gradient(135deg,
    rgba(30,15,5,.92) 0%,
    rgba(20,10,3,.95) 40%,
    rgba(25,12,4,.92) 100%);
  border: 1px solid var(--bord2);
  /* Bord brûlé simulé */
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(180,120,40,.1),
    0 2px 12px rgba(0,0,0,.7);
  color: var(--parch2);
  font-family: 'Cinzel', serif; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 1.5rem; cursor: pointer;
  border-radius: 1px; transition: all .3s;
  align-items: center; gap: .7rem; justify-content: center;
  position: relative; overflow: hidden;
}

/* Effet parchemin sur les boutons */
.lobby-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none; border-radius: inherit;
}

.lobby-btn:hover {
  background: linear-gradient(135deg,
    rgba(50,20,5,.95) 0%,
    rgba(35,15,4,.98) 100%);
  border-color: var(--rouge);
  box-shadow:
    inset 0 0 30px rgba(100,0,0,.3),
    0 4px 20px rgba(100,0,0,.25);
  color: var(--parch);
}

.lobby-btn .ico { font-size: 1rem; color: var(--parch3); }

/* ═══════════════════════════════════════════════════
   MJ — HEADER & TABS
═══════════════════════════════════════════════════ */

#vMJ {
  background: var(--noir);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}
.mj-body { padding: 0; }

.mj-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.97);
  border-bottom: 1px solid var(--bord);
  padding: .5rem .8rem;
  display: flex; align-items: center; gap: .5rem;
  backdrop-filter: blur(12px);
  /* Lueur rouge subtile en haut */
  box-shadow: 0 1px 0 rgba(100,0,0,.2), 0 4px 20px rgba(0,0,0,.8);
}

.mj-back { font-size: 1rem; padding: .3rem .6rem; }

.mj-header-center {
  flex:1; display:flex; align-items:center;
  justify-content:center; gap:.5rem;
}

.mj-phase-badge {
  font-family: 'Cinzel', serif; font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 1px;
  background: rgba(15,5,5,.9);
  border: 1px solid var(--bord-r);
  color: var(--parch3); transition: all .4s;
}
.mj-phase-badge.night { background:rgba(3,3,15,.9); border-color:rgba(50,50,120,.4); color:#9999dd; }
.mj-phase-badge.day   { background:rgba(20,10,3,.9); border-color:rgba(140,100,20,.4); color:var(--parch2); }
.mj-phase-badge.vote  { background:rgba(25,3,3,.9); border-color:rgba(150,20,10,.5); color:var(--rouge2); animation:pulse .9s ease-in-out infinite; }

.mj-round-badge { font-family:'Cinzel',serif; font-size:.55rem; color:var(--parch4); letter-spacing:.1em; }

.mj-header-actions { display:flex; gap:.2rem; }

.mj-icon-btn {
  background: transparent; border: 1px solid var(--bord);
  color: var(--parch3); padding: .3rem .5rem; font-size: .75rem;
  border-radius: 1px; transition: all .2s;
}
.mj-icon-btn:hover { border-color:var(--bord2); color:var(--parch); }
.mj-icon-btn.mj-danger:hover { color:var(--rouge2); border-color:var(--rouge); }

/* Barre d'onglets */
.mj-tabs {
  display: flex;
  background: rgba(2,1,2,.97);
  border-bottom: 1px solid var(--bord);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.mj-tab {
  flex:1; background:transparent;
  border:none; border-bottom:2px solid transparent;
  color: var(--parch4);
  font-family:'Cinzel',serif; font-size:.57rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem .2rem; cursor:pointer;
  transition:all .25s; border-radius:0; opacity:.6;
}
.mj-tab:hover { color:var(--parch3); opacity:.85; }
.mj-tab.active { color:var(--parch2); border-bottom-color:var(--rouge); opacity:1; }

/* Contenu onglets */
.mj-tab-content { display:none; padding:.5rem .7rem; padding-bottom:80px; } .mj-tab-content.active { display:block; position:relative; z-index:10; }

/* ═══════════════════════════════════════════════════
   PANELS — PARCHEMIN BRÛLÉ
═══════════════════════════════════════════════════ */

.panel {
  /* Fond parchemin sombre */
  background: linear-gradient(160deg,
    rgba(18,8,3,.88) 0%,
    rgba(12,5,2,.92) 60%,
    rgba(15,7,2,.88) 100%);
  border: 1px solid var(--bord);
  border-radius: 1px;
  overflow: hidden; margin-bottom: .45rem;
  position: relative;
  /* Ombre profonde */
  box-shadow: 0 2px 16px rgba(0,0,0,.7), inset 0 0 30px rgba(0,0,0,.3);
}

/* Bord gauche rouge sang */
.panel::before {
  content: '';
  position: absolute; left:0; top:0; bottom:0; width:2px;
  background: linear-gradient(to bottom, transparent, rgba(140,0,0,.5), transparent);
}

/* Texture parchemin dans panel */
.panel::after {
  content: '';
  position: absolute; inset:0; pointer-events:none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
}

.panel-head {
  background: rgba(0,0,0,.6);
  border-bottom: 1px solid var(--bord);
  padding: .45rem .8rem .45rem 1rem;
  font-family: 'Cinzel', serif;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--parch3);
  display: flex; align-items: center; gap: .4rem;
}

.phi { color: var(--rouge); font-size: .85rem; }
.panel-body { padding: .55rem .8rem .55rem 1rem; }
.panel-empty { opacity:.35; font-size:.75rem; font-family:'Crimson Text',serif; font-style:italic; text-align:center; padding:.5rem 0; }
.panel-head-btn { margin-left:auto; font-size:.55rem; padding:.15rem .4rem; letter-spacing:.1em; }

/* ═══════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════ */

button {
  font-family: 'Cinzel', serif;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(18,8,3,.85) 0%, rgba(12,5,2,.9) 100%);
  border: 1px solid var(--bord);
  color: var(--parch3);
  padding: .45rem .8rem; cursor: pointer;
  border-radius: 1px; transition: all .22s;
  box-shadow: inset 0 0 15px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.5);
}
button:hover {
  background: linear-gradient(135deg, rgba(35,10,3,.9) 0%, rgba(25,8,2,.95) 100%);
  border-color: var(--rouge); color: var(--parch2);
  box-shadow: inset 0 0 20px rgba(80,0,0,.2), 0 2px 8px rgba(0,0,0,.6);
}
button.danger {
  border-color: var(--sang2); color: var(--parch2);
  background: linear-gradient(135deg, rgba(25,4,4,.88) 0%, rgba(18,3,3,.92) 100%);
}
button.danger:hover { border-color:var(--rouge2); color:var(--parch); }
button.ghost { background:transparent; border-color:var(--bord); color:var(--parch4); box-shadow:none; }
button.ghost:hover { border-color:var(--bord2); color:var(--parch3); background:rgba(10,5,2,.3); }

/* ═══════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════ */

input, textarea {
  font-family: 'Crimson Text', serif; font-style: italic;
  background: rgba(5,2,0,.8);
  border: 1px solid var(--bord);
  color: var(--parch);
  padding: .45rem .7rem; border-radius: 1px;
  width: 100%; font-size: .95rem; outline: none;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
  transition: border-color .2s;
}
input:focus, textarea:focus { border-color: var(--rouge); box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(100,0,0,.2); }
input::placeholder, textarea::placeholder { color: var(--parch4); opacity: .6; }

/* ═══════════════════════════════════════════════════
   PLAYER LIST
═══════════════════════════════════════════════════ */

.player-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem 0;
  border-bottom: 1px solid rgba(180,100,20,.06);
  font-size: .78rem;
}
.player-row.dead { opacity:.28; text-decoration:line-through; }
.player-name { flex:1; color:var(--parch); }
.player-role { font-size:.62rem; color:var(--parch3); font-family:'Cinzel',serif; letter-spacing:.08em; }
.wolf-tag { color:var(--rouge2) !important; }
.lover-tag { color:#cc7788; }
.p-btn { padding:.2rem .5rem; font-size:.58rem; }

/* ═══════════════════════════════════════════════════
   CARD GRID
═══════════════════════════════════════════════════ */

.card-item {
  display:flex; align-items:center; gap:.45rem;
  background: rgba(8,3,1,.6);
  border: 1px solid var(--bord);
  padding: .3rem .6rem; border-radius:1px; margin-bottom:.2rem;
  font-size:.72rem; color:var(--parch2);
}
.card-item-name { flex:1; font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.08em; }
.card-cnt { color:var(--parch); font-weight:600; min-width:18px; text-align:center; }
.card-adj { padding:.1rem .4rem; font-size:.7rem; }

/* ═══════════════════════════════════════════════════
   PHASES — MJ
═══════════════════════════════════════════════════ */

.mj-phase-strip { display:flex; gap:.4rem; margin-bottom:.5rem; }
.phase-pill {
  flex:1; padding:.6rem .4rem;
  font-family:'Cinzel',serif; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:1px; border:1px solid; cursor:pointer; transition:all .25s;
}
.phase-pill.night { background:rgba(2,2,15,.8); border-color:rgba(40,40,100,.4); color:#8888cc; }
.phase-pill.night:hover { border-color:rgba(80,80,180,.5); color:#bbbbff; box-shadow:0 0 12px rgba(40,40,100,.15); }
.phase-pill.day   { background:rgba(15,8,2,.8); border-color:rgba(140,100,20,.35); color:var(--parch2); }
.phase-pill.day:hover { border-color:var(--parch3); color:var(--parch); }
.phase-pill.vote  { background:rgba(18,2,2,.8); border-color:rgba(120,10,10,.45); color:var(--rouge2); }
.phase-pill.vote:hover { border-color:var(--rouge2); color:var(--rouge3); box-shadow:0 0 12px rgba(100,0,0,.2); }

/* Vote */
.vote-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.28rem; }
.vote-name { flex:1; font-size:.75rem; color:var(--parch2); }
.vote-bar { flex:2; height:3px; background:rgba(180,100,20,.08); border-radius:0; }
.vote-fill { height:100%; background:var(--rouge); border-radius:0; transition:width .4s; }
.vote-cnt { font-size:.7rem; color:var(--parch3); min-width:20px; text-align:right; }

.vote-timer-display {
  font-family:'UnifrakturMaguntia',serif;
  font-size:2.2rem; color:var(--parch);
  text-align:center; padding:.4rem;
  border:1px solid var(--bord-r);
  background:rgba(8,0,0,.8);
  margin-bottom:.4rem; border-radius:1px;
  text-shadow: 0 0 20px rgba(200,0,0,.3);
}
.vote-timer-display.urgent { color:var(--rouge2); animation:pulse .8s ease-in-out infinite; text-shadow:0 0 30px rgba(200,0,0,.5); }

/* Élim */
.elim-grid { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.elim-btn { font-size:.62rem; padding:.4rem; text-align:center; }
.elim-btn:hover { border-color:var(--rouge); color:var(--parch); }

/* Stats */
.stat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; margin-bottom:.5rem; }
.stat-box {
  background:rgba(8,3,1,.7); border:1px solid var(--bord);
  padding:.5rem .3rem; text-align:center; border-radius:1px;
}
.stat-val { font-family:'UnifrakturMaguntia',serif; font-size:1.6rem; color:var(--parch); text-shadow:0 0 15px rgba(200,100,0,.2); }
.stat-lbl { font-family:'Cinzel',serif; font-size:.55rem; color:var(--parch4); letter-spacing:.1em; }

/* Log */
.log-entry { display:flex; gap:.4rem; padding:.22rem 0; border-bottom:1px solid rgba(180,100,20,.05); }
.log-ts { font-size:.55rem; color:var(--parch4); font-family:'Cinzel',serif; white-space:nowrap; }
.log-msg { font-size:.68rem; color:var(--parch3); }

/* ═══════════════════════════════════════════════════
   VUE JOUEUR
═══════════════════════════════════════════════════ */

#vPlayer { background:var(--noir); padding:0; position:relative; z-index:5; }

.player-header {
  background: rgba(0,0,0,.97);
  border-bottom: 1px solid var(--bord);
  padding: .8rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  backdrop-filter: blur(12px);
  position: sticky; top:0; z-index:50;
  box-shadow: 0 4px 20px rgba(0,0,0,.8);
}
.player-header h2 { font-family:'UnifrakturMaguntia',serif; font-size:1.2rem; color:var(--parch); flex:1; }
.player-body { padding:1rem; display:flex; flex-direction:column; gap:.7rem; position:relative; z-index:10; }

/* Join */
.join-card {
  background: linear-gradient(160deg, rgba(18,8,3,.92) 0%, rgba(10,4,1,.96) 100%);
  border: 1px solid var(--bord2);
  border-radius: 1px;
  padding: 1.5rem 1rem; text-align:center;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 4px 24px rgba(0,0,0,.8);
  position: relative; overflow: hidden;
}
.join-card::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events:none;
}
.join-title { font-family:'UnifrakturMaguntia',serif; font-size:2rem; color:var(--parch); margin-bottom:.3rem; line-height:1.2; text-shadow:0 0 30px rgba(150,80,0,.25); }
.join-sep { width:60px; height:1px; background:linear-gradient(to right,transparent,var(--parch3),transparent); margin:.6rem auto .8rem; }
.join-sub { font-family:'Crimson Text',serif; font-style:italic; font-size:.88rem; color:var(--parch3); margin-bottom:1rem; }
.join-btn { width:100%; margin-top:.5rem; }

/* Carte rôle */
.role-card {
  background: linear-gradient(160deg, rgba(15,6,2,.9) 0%, rgba(8,3,1,.95) 100%);
  border: 1px solid var(--bord2);
  border-radius: 1px;
  overflow: hidden; cursor: pointer; min-height:160px;
  display: flex; align-items:center; justify-content:center;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.7);
  flex-direction: column;
  width: 100%;
}
.role-card::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.05'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}
.role-card-front { text-align:center; padding:1.5rem 1rem; position:relative; z-index:1; }
.role-mystery { font-family:'UnifrakturMaguntia',serif; font-size:2.8rem; color:var(--parch3); opacity:.5; text-shadow:0 0 20px rgba(180,100,0,.2); }
.role-tap { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.2em; color:var(--parch4); margin-top:.5rem; }
.role-card-back { padding:1rem; display:none; overflow-y:auto; position:relative; z-index:1; }
.role-card-back h2 { font-family:'UnifrakturMaguntia',serif; font-size:1.9rem; color:var(--parch); margin-bottom:.4rem; text-shadow:0 0 20px rgba(150,80,0,.2); }
.role-card-back .role-d { font-family:'Crimson Text',serif; font-style:italic; font-size:.88rem; color:var(--parch2); margin-bottom:.5rem; line-height:1.6; }
.role-card-back .role-p { font-size:.7rem; color:var(--parch3); font-family:'Cinzel',serif; border-left:2px solid var(--rouge); padding-left:.5rem; line-height:1.5; }

/* Phase joueur */
.phase-display {
  background: rgba(5,2,0,.8);
  border: 1px solid var(--bord);
  border-radius: 1px; padding:.6rem 1rem;
  text-align:center; font-family:'Cinzel',serif;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--parch3);
}
.phase-display.night { border-color:rgba(40,40,100,.4); color:#8888cc; background:rgba(2,2,15,.85); }
.phase-display.day   { border-color:rgba(140,100,20,.35); color:var(--parch2); }
.phase-display.vote  { border-color:rgba(130,10,10,.45); color:var(--rouge2); animation:pulse 1.5s ease-in-out infinite; }

/* Survivants */
.alive-section { background:rgba(5,2,0,.7); border:1px solid var(--bord); border-radius:1px; padding:.6rem .8rem; }
.alive-title { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.18em; color:var(--parch3); margin-bottom:.4rem; text-transform:uppercase; }
.alive-names { display:flex; flex-wrap:wrap; gap:.3rem; }
.alive-chip { background:rgba(8,3,1,.7); border:1px solid var(--bord); color:var(--parch4); font-family:'Cinzel',serif; font-size:.6rem; padding:.15rem .4rem; border-radius:1px; }
.alive-chip.me { border-color:var(--rouge); color:var(--parch2); }

/* Vote joueur */
.vote-card { background:rgba(12,2,2,.8); border:1px solid var(--bord-r); border-radius:1px; padding:.8rem; }
.vote-title { font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.2em; color:var(--parch2); margin-bottom:.6rem; text-transform:uppercase; }
.vote-btns-grid { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.vote-target { padding:.5rem; font-size:.65rem; text-align:center; }

/* Annonce */
.ann-preview { background:rgba(5,2,0,.7); border:1px solid var(--bord); border-left:2px solid var(--rouge); padding:.45rem .7rem; font-family:'Crimson Text',serif; font-style:italic; font-size:.88rem; color:var(--parch3); border-radius:0 1px 1px 0; min-height:2rem; }

/* Mort */
.dead-banner { background:rgba(25,2,2,.9); border:1px solid var(--sang2); padding:1rem; text-align:center; border-radius:1px; box-shadow:inset 0 0 20px rgba(100,0,0,.3); }
.dead-banner .dead-title { font-family:'UnifrakturMaguntia',serif; font-size:1.4rem; color:var(--parch); text-shadow:0 0 20px rgba(200,0,0,.4); }
.dead-banner .dead-sub { font-family:'Crimson Text',serif; font-style:italic; font-size:.8rem; color:var(--parch3); margin-top:.2rem; }

/* ═══════════════════════════════════════════════════
   PROJECTEUR TV
═══════════════════════════════════════════════════ */

#vScreen {
  background: var(--noir);
  align-items:center; justify-content:center;
  text-align:center; position:relative; min-height:100vh; overflow:hidden;
}

/* Lueur rouge centre du projecteur */
#vScreen::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(100,0,0,.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(60,0,0,.22) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}

#vScreen > div {
  position:relative; z-index:10;
  padding:2rem 1.5rem 14rem;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; min-height:100vh;
}

.sc-phase { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.45em; text-transform:uppercase; color:var(--parch4); margin-bottom:.8rem; }
.sc-title { font-family:'UnifrakturMaguntia',serif; font-size:clamp(2.8rem,10vw,5rem); color:var(--parch); line-height:1.05; margin-bottom:.6rem; text-shadow:0 0 40px rgba(180,100,0,.15); }
.sc-sub { font-family:'Crimson Text',serif; font-style:italic; font-size:1.15rem; color:var(--parch3); margin-bottom:.8rem; }
.sc-ann { font-family:'Cinzel',serif; font-size:.95rem; color:var(--parch2); letter-spacing:.06em; max-width:600px; margin:.4rem auto; }
.sc-timer { font-family:'UnifrakturMaguntia',serif; font-size:clamp(4.5rem,20vw,9rem); color:var(--parch); display:none; line-height:1; text-shadow:0 0 60px rgba(200,80,0,.2); }
.sc-timer.urgent { color:var(--rouge2); animation:pulse .8s ease-in-out infinite; text-shadow:0 0 80px rgba(200,0,0,.5); }
.sc-elim { display:none; }
.sc-elim h2 { font-family:'UnifrakturMaguntia',serif; font-size:3rem; color:var(--parch); text-shadow:0 0 40px rgba(180,80,0,.25); }
.sc-elim p { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.2em; color:var(--parch3); margin-top:.4rem; }
.sc-players { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; margin-top:1.2rem; max-width:600px; }
.sc-dot { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.06em; padding:.25rem .55rem; border-radius:1px; border:1px solid var(--bord); color:var(--parch4); background:rgba(8,3,1,.7); }
.sc-dot.dead { opacity:.18; text-decoration:line-through; }
.sc-fs { position:absolute; top:.8rem; right:.8rem; background:transparent; border:1px solid var(--bord); color:var(--parch4); font-size:.6rem; padding:.3rem .6rem; }

/* ═══════════════════════════════════════════════════
   MODALES
═══════════════════════════════════════════════════ */

.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.94); z-index:200;
  align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.modal-overlay.on { display:flex; }
.modal-box {
  background: linear-gradient(160deg, rgba(18,8,3,.97) 0%, rgba(10,4,1,.99) 100%);
  border: 1px solid var(--bord2);
  border-radius: 1px; padding:1.2rem;
  width:90%; max-width:320px; max-height:80vh; overflow-y:auto;
  position:relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 8px 40px rgba(0,0,0,.9);
}
.modal-box::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,transparent,var(--rouge),transparent); }
.modal-title { font-family:'UnifrakturMaguntia',serif; font-size:1.4rem; color:var(--parch); border-bottom:1px solid var(--bord); padding-bottom:.4rem; margin-bottom:.7rem; text-shadow:0 0 20px rgba(150,80,0,.2); }

/* Thème */
.theme-btn { flex:1; min-width:80px; font-family:'Cinzel',serif; font-size:.58rem; letter-spacing:.08em; padding:.4rem .4rem; border-radius:1px; cursor:pointer; transition:all .2s; }
.theme-btn.active { border-color:var(--rouge) !important; color:var(--parch) !important; }

/* ═══════════════════════════════════════════════════
   ATTENTE JOUEUR
═══════════════════════════════════════════════════ */

.wolf-svg { animation:wolfFloat 4s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(150,0,0,.4)); }
@keyframes wolfFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.moon-pulse { animation:moonPulse 3s ease-in-out infinite; transform-origin:100px 55px; }
@keyframes moonPulse { 0%,100%{opacity:.85;} 50%{opacity:1;} }
.wolf-eye { animation:eyeGlow 2s ease-in-out infinite; }
@keyframes eyeGlow { 0%,100%{opacity:.6;} 50%{opacity:1; filter:drop-shadow(0 0 6px #ff2200);} }
.wolf-tail-anim { animation:tailWag 1.8s ease-in-out infinite; transform-origin:144px 148px; }
@keyframes tailWag { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(7deg);} 75%{transform:rotate(-7deg);} }
.w-dot { width:7px; height:7px; border-radius:50%; background:var(--parch3); animation:dotPulse 1.4s ease-in-out infinite; }
.w-dot:nth-child(2){animation-delay:.2s;} .w-dot:nth-child(3){animation-delay:.4s;}
@keyframes dotPulse { 0%,80%,100%{transform:scale(.6);opacity:.3;} 40%{transform:scale(1.2);opacity:1;} }
#howlText { transition:opacity .5s; }

/* ═══════════════════════════════════════════════════
   ANIMATIONS GLOBALES
═══════════════════════════════════════════════════ */

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* Overlay transition */
.phase-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.95); align-items:center; justify-content:center; flex-direction:column; backdrop-filter:blur(10px); }
.phase-overlay.in { display:flex; animation:overlayIn .4s ease forwards; }
.phase-overlay.out { animation:overlayOut .6s ease forwards; }
@keyframes overlayIn  { from{opacity:0;} to{opacity:1;} }
@keyframes overlayOut { from{opacity:1;} to{opacity:0;} }
.phase-overlay-content { text-align:center; }
.phase-overlay-ico { font-size:4rem; display:block; margin-bottom:.6rem; animation:overlayPulse 1s ease infinite; }
@keyframes overlayPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
.phase-overlay-label { font-family:'UnifrakturMaguntia',serif; font-size:2.4rem; color:var(--parch); text-shadow:0 0 30px rgba(180,100,0,.3); animation:overlaySlide .5s ease forwards; }
@keyframes overlaySlide { from{transform:translateY(14px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.phase-overlay-night .phase-overlay-label { color:#8888cc; text-shadow:0 0 30px rgba(80,80,200,.3); }
.phase-overlay-day   .phase-overlay-label { color:var(--parch2); }
.phase-overlay-vote  .phase-overlay-label { color:var(--rouge2); text-shadow:0 0 30px rgba(200,0,0,.4); }

/* ═══════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════ */

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--noir); }
::-webkit-scrollbar-thumb { background:var(--rouge); opacity:.5; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile / Tablette / Desktop
   Breakpoints :
     < 600px   → mobile (état de base)
     600-900px → tablette
     > 900px   → desktop
═══════════════════════════════════════════════════ */

/* ── TABLETTE (≥ 600px) ── */
@media (min-width: 600px) {

  /* Typos légèrement plus grandes */
  body { font-size: 1.05rem; }

  /* Lobby — boutons plus larges */
  .lobby-inner { padding: 3rem 2rem 18rem; }
  .lobby-title { font-size: clamp(2.8rem, 6vw, 4rem); }
  .lobby-btn   { max-width: 360px; padding: 1rem 2rem; font-size: .75rem; }

  /* MJ — grille 2 colonnes pour les panels */
  .mj-tab-content { padding: .6rem 1rem; padding-bottom: 4rem; }

  /* Onglet Prépa : joueurs à gauche, composition à droite */
  #tab-prep {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    align-items: start;
  }
  #tab-prep.active { display: grid; }

  /* Onglet Nuit : séquence | élimination en 2 col */
  #tab-nuit { display: none; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
  #tab-nuit.active { display: grid; }

  /* Phase strip pleine largeur sur 2 col */
  #tab-nuit .mj-phase-strip { grid-column: 1 / -1; }
  #tab-nuit #nightSequencePanel { grid-column: 1; }
  #tab-nuit #potionsPanel { grid-column: 1; }
  #tab-nuit .panel:has(#elimBtns) { grid-column: 2; grid-row: 2; }
  #tab-nuit .panel:has(#annInput) { grid-column: 2; grid-row: 3; }

  /* Vote : timer + tally à gauche, élim à droite */
  #tab-vote { display: none; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
  #tab-vote.active { display: grid; }
  #tab-vote .panel:first-child { grid-column: 1; }
  #tab-vote .panel:nth-child(2) { grid-column: 1; }
  #tab-vote .panel:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  #tab-vote .panel:nth-child(4) { grid-column: 2; }

  /* Stats : 2 colonnes */
  #tab-info { display: none; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
  #tab-info.active { display: grid; }
  #tab-info .panel:first-child  { grid-column: 1; }
  #tab-info .panel:nth-child(2) { grid-column: 2; }
  #tab-info .panel:nth-child(3) { grid-column: 1; }
  #tab-info .panel:nth-child(4) { grid-column: 2; }

  /* Grille cartes composition : 5 colonnes */
  

  /* Modales plus larges */
  .modal-box { max-width: 420px; padding: 1.5rem; }

  /* Projecteur : dots en 2 rangées max */
  .sc-players { max-width: 800px; }
  .sc-dot { font-size: .7rem; padding: .3rem .7rem; }

  /* Header MJ : plus d'espace */
  .mj-header { padding: .6rem 1.2rem; }
  .mj-icon-btn { padding: .35rem .7rem; font-size: .8rem; }
  .mj-tab { font-size: .65rem; padding: .6rem .4rem; }

  /* Tabs sticky visibles */
  .mj-tabs { top: 52px; }
}

/* ── DESKTOP (≥ 900px) ── */
@media (min-width: 900px) {

  /* MJ — sidebar fixe gauche + contenu principal */
  #vMJ { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto auto 1fr; }

  .mj-header {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: .7rem 1.5rem;
  }

  .mj-tabs {
    grid-column: 2;
    grid-row: 2;
    top: 0; position: static;
    border-left: 1px solid var(--bord);
  }

  /* Sidebar gauche : joueurs + composition permanents */
  

  /* Contenu onglets à droite */
  .mj-tab-content {
    grid-column: 2;
    grid-row: 3;
    padding: .8rem 1.2rem;
    padding-bottom: 2rem;
  }

  /* Sur desktop l'onglet Prépa n'a plus la liste joueurs (elle est dans la sidebar) */
  #tab-prep { grid-template-columns: 1fr; }

  /* Grille onglet Nuit : 3 colonnes sur desktop */
  #tab-nuit { grid-template-columns: 1fr 1fr 1fr; }
  #tab-nuit .panel:has(#annInput) { grid-column: 3; grid-row: 2; }

  /* Grille cartes composition : 6 colonnes sur desktop */
  

  /* Modales bien centrées */
  .modal-box { max-width: 480px; }
  .modal-overlay { align-items: center; }

  /* Lobby desktop */
  .lobby-inner { padding: 4rem 3rem 14rem; max-width: 600px; margin: 0 auto; }
  .lobby-title { font-size: clamp(3rem, 5vw, 4.5rem); }
  .lobby-btn { max-width: 400px; font-size: .8rem; padding: 1.1rem 2rem; }

  /* Vue joueur desktop — centré, max-width */
  #vPlayer .player-body {
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem 0 14rem;
  }

  /* Projecteur TV — typos encore plus grandes */
  .sc-title { font-size: clamp(4rem, 8vw, 6rem); }
  .sc-timer { font-size: clamp(6rem, 20vw, 12rem); }
  .sc-ann   { font-size: 1.2rem; max-width: 800px; }
  .sc-dot   { font-size: .8rem; padding: .35rem .9rem; }
  .sc-players { max-width: 1000px; }

  /* Panel head legibility */
  .panel-head { font-size: .7rem; padding: .5rem 1rem .5rem 1.2rem; }
  .panel-body { padding: .7rem 1rem .7rem 1.2rem; }

  /* MJ icon buttons */
  .mj-icon-btn { padding: .4rem .8rem; font-size: .85rem; }
  .mj-round-badge { font-size: .65rem; }
  .mj-phase-badge { font-size: .68rem; padding: .25rem .8rem; }

  /* Elim grid 3 colonnes */
  .elim-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* Timer de vote plus grand */
  .vote-timer-display { font-size: 3rem; }

  /* Stat boxes */
  .stat-val { font-size: 2rem; }

  /* Header MJ */
  .mj-header h2 { font-size: 1.5rem; }
}

/* ── LARGE DESKTOP (≥ 1200px) ── */
@media (min-width: 1200px) {

  #vMJ { grid-template-columns: 320px 1fr; }

  

  

  /* Onglet nuit : 4 colonnes */
  #tab-nuit { grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* Projecteur */
  .sc-title { font-size: 7rem; }
  .sc-timer { font-size: 14rem; }
}

/* ── SIDEBAR MJ (structure HTML à injecter via JS) ── */


@media (min-width: 900px) {
  
  /* Sur desktop, cacher les joueurs de l'onglet Prépa (ils sont dans la sidebar) */
  #tab-prep > .panel:has(#playerList) { display: none; }
}

/* ── TOUCH TARGETS — zones cliquables min 44px ── */
@media (pointer: coarse) {
  button { min-height: 36px; }
  .mj-tab { min-height: 40px; }
  .elim-btn { min-height: 44px; }
  .vote-target { min-height: 44px; }
  .lobby-btn { min-height: 52px; }
  .cctrl button { min-height: 28px; min-width: 28px; }
  .phase-pill { min-height: 44px; }
}

/* ── PAYSAGE MOBILE (landscape smartphone) ── */
@media (max-width: 900px) and (orientation: landscape) {
  .lobby-inner { padding: 1.5rem 2rem 10rem; }
  .lobby-title { font-size: 2.2rem; }
  .mj-tab-content { padding-bottom: 6rem; }
  .player-body { padding-bottom: 8rem; }
  }

/* ── PRINT ── */
@media print {
  #stars, .mj-tabs, .mj-header-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 1px solid #ccc; box-shadow: none; background: #fff; }
}

/* ── PIN MJ ── */
.pin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(140,70,0,.4);
  background: rgba(10,4,1,.8);
  transition: background .2s;
}
.pin-dot.filled { background: var(--or); border-color: var(--or2); }
.pin-dot.error  { background: var(--rouge2); border-color: var(--rouge2); animation: shake .3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

.pin-key {
  font-family: Cinzel, serif; font-size: .9rem; font-weight: 600;
  padding: .6rem; text-align: center; border-radius: 1px;
  letter-spacing: 0;
}

/* ── FLIP 3D CARTE ── */
.role-card { perspective: 800px; cursor: pointer; }
.role-card-inner {
  width: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.role-card-inner.flipped { transform: rotateY(180deg); }
.role-card-front-face,
.role-card-back-face {
  width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.role-card-front-face { position: relative; }
.role-card-back-face {
  position: absolute; top: 0; left: 0;
  transform: rotateY(180deg);
  display: flex !important;
}

/* ── CONFETTI canvas ── */
#confettiCanvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 999;
}

/* ── MODE SPECTATEUR ── */
.spectator-badge {
  display: inline-block;
  font-family: Cinzel, serif; font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 1px;
  background: rgba(5,20,40,.8); border: 1px solid rgba(30,80,160,.4);
  color: #6688cc;
}

/* ── WOLF CHAT ── */
.wolf-msg {
  display: flex; gap: .4rem; padding: .25rem 0;
  border-bottom: 1px solid rgba(140,0,0,.08);
}
.wolf-msg-name { font-family: Cinzel, serif; font-size: .6rem; color: var(--rouge2); white-space: nowrap; }
.wolf-msg-text { font-family: 'Crimson Text', serif; font-style: italic; font-size: .8rem; color: #b8904a; }

/* ── Accessibilité ── */
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 9999;
  background: var(--noir2); color: var(--parch);
  font-family: Cinzel, serif; font-size: .8rem; padding: .5rem 1rem;
  border: 1px solid var(--bord2); border-radius: 1px;
  transition: top .2s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Focus visible accessible */
*:focus-visible {
  outline: 2px solid var(--or2);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--or2);
  outline-offset: 2px;
}

/* ── PWA install banner ── */
#pwaInstallBanner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(4,6,10,.98), rgba(4,6,10,.9));
  border-top: 1px solid var(--bord2);
  padding: .8rem 1rem;
  display: none;
  align-items: center; gap: .8rem;
  z-index: 300;
  backdrop-filter: blur(8px);
}
#pwaInstallBanner.show { display: flex; }
#pwaInstallBanner .pwa-icon { font-size: 1.4rem; }
#pwaInstallBanner .pwa-text { flex: 1; font-family: Cinzel, serif; font-size: .65rem; color: var(--parch2); letter-spacing: .08em; }

/* ═══════════════════════════════════════════════════════════════
   IMMERSION AVANCÉE — Textures + Animations
   • Parchemin vieilli avec veines et taches
   • Flammes sur les panels actifs
   • Sang qui coule sur certains éléments
   • Lueurs et pulsations sur les rôles
   • Particules flottantes
   • Effets hover dramatiques
═══════════════════════════════════════════════════════════════ */

/* ── PARCHEMIN VIEILLI — texture riche ── */

/* Veines de parchemin via SVG fractal */
.panel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  opacity: .055;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4 .7' numOctaves='5' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
}

/* Coins brûlés sur les panels */
.panel {
  --corner-burn: rgba(60,20,0,.6);
}
.panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, var(--corner-burn) 0%, transparent 20%),
    radial-gradient(circle at 100% 0%, var(--corner-burn) 0%, transparent 15%),
    radial-gradient(circle at 0% 100%, var(--corner-burn) 0%, transparent 18%),
    radial-gradient(circle at 100% 100%, var(--corner-burn) 0%, transparent 16%);
  border-radius: inherit;
}

/* Bord gauche animé — veine rouge qui pulse */
.panel {
  border-left: 2px solid transparent;
  border-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(120,0,0,.6) 30%,
    rgba(180,20,0,.8) 50%,
    rgba(120,0,0,.6) 70%,
    transparent 100%
  ) 1;
  animation: veinePulse 4s ease-in-out infinite;
}
@keyframes veinePulse {
  0%, 100% { border-image-slice: 1; filter: brightness(1); }
  50%       { filter: brightness(1.3); }
}

/* ── LOBBY — TITRE GOTHIQUE ANIMÉ ── */

.lobby-title {
  position: relative;
  animation: titleBreath 5s ease-in-out infinite;
}
@keyframes titleBreath {
  0%, 100% { text-shadow: 0 0 20px rgba(200,150,50,.15), 0 2px 4px rgba(0,0,0,.8); }
  50%      { text-shadow: 0 0 40px rgba(200,150,50,.3), 0 0 80px rgba(150,80,0,.15), 0 2px 4px rgba(0,0,0,.8); }
}

/* Séparateur lobby animé */
.lobby-sep {
  position: relative;
  overflow: visible;
  animation: sepGlow 3s ease-in-out infinite;
}
.lobby-sep::before, .lobby-sep::after {
  content: '✦';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: .6rem; color: var(--parch3);
  animation: runeRotate 8s linear infinite;
}
.lobby-sep::before { left: -12px; }
.lobby-sep::after  { right: -12px; animation-direction: reverse; }
@keyframes sepGlow {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 8px rgba(200,150,50,.3); }
}
@keyframes runeRotate {
  from { opacity: .3; transform: translateY(-50%) rotate(0deg); }
  to   { opacity: .8; transform: translateY(-50%) rotate(360deg); }
}

/* ── BOUTONS — EFFET PARCHEMIN AU HOVER ── */

.lobby-btn {
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}

/* Reflet doré qui traverse */
.lobby-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,160,60,.08) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left .6s ease;
}
.lobby-btn:hover::after { left: 150%; }

.lobby-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 20px rgba(0,0,0,.6),
    inset 0 0 30px rgba(100,50,0,.15),
    0 0 0 1px rgba(140,80,0,.3);
}

/* ── PANELS — HOVER DRAMATIQUE ── */

.panel {
  transition: transform .2s ease, box-shadow .2s ease;
}
.panel:hover {
  transform: translateX(2px);
  box-shadow:
    0 4px 24px rgba(0,0,0,.8),
    -2px 0 0 rgba(120,40,0,.4),
    inset 0 0 40px rgba(0,0,0,.2);
}

/* ── CARDS COMPOSITION — GLOW AU HOVER ── */

.card-cell:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,.7);
  z-index: 2;
}
.card-cell.sel-w:hover {
  box-shadow: 0 6px 20px rgba(120,0,0,.4), 0 0 0 1px rgba(150,20,0,.5);
}
.card-cell.sv:hover {
  box-shadow: 0 6px 20px rgba(100,50,0,.3), 0 0 0 1px rgba(140,80,0,.4);
}

/* ── ROLE CARD JOUEUR — RÉVÉLATION DRAMATIQUE ── */

.role-card {
  transition: box-shadow .3s ease;
}
.role-card:not([style*="cursor: default"]):hover {
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.4),
    0 8px 30px rgba(0,0,0,.8),
    0 0 0 1px rgba(140,70,0,.3);
}

/* Scan line effect sur la carte mystère */
.role-card-front {
  position: relative;
  overflow: hidden;
}
.role-card-front::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(200,150,50,.04) 50%,
    transparent 100%
  );
  animation: scanLine 4s ease-in-out infinite;
}
@keyframes scanLine {
  0%   { top: -30%; }
  100% { top: 130%; }
}

/* ── PHASE DISPLAY JOUEUR — FLAMMES ── */

.phase-display.vote {
  position: relative;
  overflow: hidden;
}
.phase-display.vote::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(150,20,0,.06) 2px,
    transparent 4px
  );
  animation: scanVote .8s linear infinite;
}
@keyframes scanVote {
  from { background-position: 0 0; }
  to   { background-position: 20px 0; }
}

/* ── HEADER MJ — LUEUR DE PHASE ── */

.mj-phase-badge.night {
  animation: nightGlow 3s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(40,40,150,.2);
}
.mj-phase-badge.vote {
  animation: voteGlow .8s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(150,20,0,.3);
}
@keyframes nightGlow {
  0%,100% { box-shadow: 0 0 6px rgba(40,40,150,.15); }
  50%     { box-shadow: 0 0 14px rgba(60,60,200,.3); }
}
@keyframes voteGlow {
  0%,100% { box-shadow: 0 0 8px rgba(150,20,0,.3); }
  50%     { box-shadow: 0 0 18px rgba(200,30,0,.5); }
}

/* ── ONGLETS MJ — INDICATEUR ANIMÉ ── */

.mj-tab.active {
  position: relative;
}
.mj-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--rouge2), transparent);
  animation: tabGlow 2s ease-in-out infinite;
}
@keyframes tabGlow {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; box-shadow: 0 0 6px rgba(180,30,0,.4); }
}

/* ── SÉQUENCE NUIT — LUEUR BLEUE ── */

#nightPanel .ns, .ns {
  position: relative;
  overflow: hidden;
}
.ns::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(40,40,120,.12) 0%, transparent 70%);
  pointer-events: none;
  animation: nsGlow 4s ease-in-out infinite;
}
@keyframes nsGlow {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* ── VOTE BARS — REMPLISSAGE ANIMÉ ── */

.vote-fill {
  transition: width .5s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.vote-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 100%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: voteFillShine 2s ease-in-out infinite;
}
@keyframes voteFillShine {
  0%   { left: -100%; right: 100%; }
  50%  { left: 100%;  right: -100%; }
  100% { left: 100%;  right: -100%; }
}

/* ── TIMER DE VOTE — URGENCE VISUELLE ── */

.vote-timer-display.urgent,
.sc-timer.urgent {
  animation: urgentPulse .7s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%,100% {
    text-shadow: 0 0 20px rgba(200,30,0,.4);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 40px rgba(255,50,0,.7), 0 0 60px rgba(200,0,0,.3);
    transform: scale(1.02);
  }
}

/* ── MORT — BANNIÈRE DRAMATIQUE ── */

.dead-banner {
  animation: deathPulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.dead-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    rgba(150,0,0,.04) 1px,
    transparent 2px,
    transparent 6px
  );
}
@keyframes deathPulse {
  0%,100% { box-shadow: 0 0 10px rgba(100,0,0,.3); }
  50%     { box-shadow: 0 0 25px rgba(150,0,0,.5); }
}

/* ── PROJECTEUR — TITRE SCINTILLANT ── */

.sc-title {
  animation: titleScintille 6s ease-in-out infinite;
}
@keyframes titleScintille {
  0%,100% { text-shadow: 0 0 20px rgba(200,160,50,.1); }
  30%     { text-shadow: 0 0 40px rgba(200,160,50,.2), 0 0 80px rgba(150,100,0,.1); }
  60%     { text-shadow: 0 0 15px rgba(180,130,40,.08); }
}

/* ── BRUME ROUGE — particules SVG animées ── */

#stars {
  animation: starsFade 8s ease-in-out infinite alternate;
}
@keyframes starsFade {
  from { opacity: .4; }
  to   { opacity: .65; }
}

/* ── ARBRES — ONDULATION LÉGÈRE ── */


@keyframes treesSway {
  from { transform: scaleX(1); }
  to   { transform: scaleX(1.005); }
}

/* ── INPUTS — FOCUS DRAMATIQUE ── */

input:focus, textarea:focus {
  animation: inputGlow .3s ease forwards;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.6),
    0 0 0 1px rgba(120,40,0,.4),
    0 0 12px rgba(100,30,0,.2);
}
@keyframes inputGlow {
  from { box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
  to   {
    box-shadow:
      inset 0 2px 8px rgba(0,0,0,.6),
      0 0 0 1px rgba(120,40,0,.4),
      0 0 12px rgba(100,30,0,.2);
  }
}

/* ── ALIVE CHIPS — CLIGNOTEMENT AU DÉCÈS ── */

.alive-chip {
  transition: all .3s ease;
}
.alive-chip.dying {
  animation: chipDie .5s ease forwards;
}
@keyframes chipDie {
  0%   { background: rgba(8,3,1,.7); color: var(--parch3); }
  50%  { background: rgba(80,0,0,.6); color: #ff4444; }
  100% { opacity: .2; text-decoration: line-through; }
}

/* ── MODAL BOX — ENTRÉE DRAMATIQUE ── */

.modal-overlay.on .modal-box {
  animation: modalEntree .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes modalEntree {
  from { transform: translateY(-20px) scale(.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── BOUTONS — RIPPLE AU CLIC ── */

button {
  position: relative;
  overflow: hidden;
}
button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(200,150,50,.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
button:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* ── LOGO / TITRE LOBBY — PARTICULES RUNES ── */

@keyframes runeDrift {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { transform: translateY(-80px) translateX(20px) rotate(360deg); opacity: 0; }
}

/* ── prefers-reduced-motion — désactiver les animations ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background:
    /* Vignette noire sur les bords */
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.7) 100%),
    /* Lueur rouge centre-bas (braise/sang) */
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(80,0,0,.25) 0%, transparent 60%),
    /* Lueur rouge haut (lune de sang) */
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(100,10,0,.2) 0%, transparent 55%),
    /* Fond noir absolu */
    #000;
}

/* Grain photographique sur tout le body */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.9'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* ══ PANELS — PARCHEMIN BRÛLÉ RÉALISTE ══ */

.panel {
  /* Fond parchemin multicouche */
  background:
    /* Veines sombres du parchemin */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .06' numOctaves='6' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0 0.02 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23v)'/%3E%3C/svg%3E"),
    /* Grain fin du papier */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* Base parchemin brûlé */
    linear-gradient(160deg,
      rgba(28,12,3,.95) 0%,
      rgba(18,7,2,.97) 35%,
      rgba(22,9,2,.96) 65%,
      rgba(15,5,1,.98) 100%
    );
  /* Relief — ombre interne profonde */
  box-shadow:
    inset 0 1px 0 rgba(180,120,50,.06),
    inset 0 -1px 0 rgba(0,0,0,.4),
    inset 2px 0 8px rgba(0,0,0,.3),
    inset -2px 0 8px rgba(0,0,0,.3),
    0 4px 20px rgba(0,0,0,.8),
    0 1px 0 rgba(100,50,0,.15);
  border: 1px solid rgba(100,50,15,.3);
}

/* Coins brûlés réalistes */
.panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%,   rgba(40,10,0,.7) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 100% 0%,  rgba(30,8,0,.6) 0%, transparent 45%),
    radial-gradient(ellipse 50% 40% at 0% 100%,  rgba(35,9,0,.65) 0%, transparent 48%),
    radial-gradient(ellipse 45% 40% at 100% 100%,rgba(25,6,0,.55) 0%, transparent 42%);
  z-index: 1;
}

/* Texture craquelure sur le dessus du panel */
.panel-head {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .1' numOctaves='3' seed='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='60' filter='url(%23c)'/%3E%3C/svg%3E"),
    rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(80,35,5,.3);
  position: relative; z-index: 2;
}

/* ══ BOUTONS — CUIR SOMBRE ══ */

button {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='50'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .3' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='50' filter='url(%23l)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(20,8,2,.9) 0%, rgba(12,4,1,.95) 100%);
  border: 1px solid rgba(80,35,5,.35);
  box-shadow:
    inset 0 1px 0 rgba(150,80,20,.08),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.6);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

button:hover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='50'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .3' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='50' filter='url(%23l)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(40,15,3,.92) 0%, rgba(28,10,2,.97) 100%);
  border-color: rgba(130,50,8,.5);
  box-shadow:
    inset 0 1px 0 rgba(180,100,30,.1),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 4px 16px rgba(0,0,0,.7),
    0 0 12px rgba(100,30,0,.15);
  transform: translateY(-1px);
}

button.danger {
  background:
    linear-gradient(160deg, rgba(35,5,5,.92) 0%, rgba(20,3,3,.97) 100%);
  border-color: rgba(120,10,10,.5);
  box-shadow:
    inset 0 1px 0 rgba(200,50,20,.1),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.6),
    0 0 8px rgba(100,0,0,.1);
}

button.danger:hover {
  border-color: rgba(160,20,10,.7);
  box-shadow:
    inset 0 1px 0 rgba(220,80,30,.12),
    0 4px 16px rgba(0,0,0,.7),
    0 0 20px rgba(150,0,0,.25);
}

/* ══ LOBBY — TITRE GOTHIQUE GRAVÉ ══ */

.lobby-btn {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4 .15' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 0 0.01 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='300' height='60' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(135deg,
      rgba(22,10,3,.94) 0%,
      rgba(14,6,1,.97) 40%,
      rgba(18,8,2,.95) 100%
    );
  border: 1px solid rgba(90,40,8,.4);
  box-shadow:
    inset 0 1px 0 rgba(160,90,30,.08),
    inset 0 -2px 0 rgba(0,0,0,.5),
    inset 1px 0 0 rgba(80,35,5,.15),
    inset -1px 0 0 rgba(80,35,5,.15),
    0 4px 20px rgba(0,0,0,.7);
}

.lobby-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(200,120,40,.12),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 6px 28px rgba(0,0,0,.8),
    0 0 20px rgba(100,35,0,.2),
    0 0 0 1px rgba(120,50,10,.4);
}

/* ══ INPUTS — PARCHEMIN ÉCRIT ══ */

input, textarea {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35 .12' numOctaves='5' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.20 0 0 0 0 0.09 0 0 0 0 0.01 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='400' height='100' filter='url(%23p)'/%3E%3C/svg%3E"),
    rgba(5,2,0,.85);
  border: 1px solid rgba(80,35,5,.3);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.6),
    inset 0 1px 3px rgba(0,0,0,.4);
}

input:focus, textarea:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35 .12' numOctaves='5' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0 0.02 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='400' height='100' filter='url(%23p)'/%3E%3C/svg%3E"),
    rgba(8,3,0,.9);
  border-color: rgba(120,50,10,.5);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.6),
    0 0 0 1px rgba(100,40,8,.35),
    0 0 15px rgba(80,25,0,.18);
}

/* ══ HEADER MJ — BOIS NOIR ══ */

.mj-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .6' numOctaves='5' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.02 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='80' filter='url(%23w)'/%3E%3C/svg%3E"),
    rgba(0,0,0,.97);
  border-bottom: 1px solid rgba(80,30,5,.35);
  box-shadow:
    0 2px 0 rgba(60,20,0,.3),
    0 4px 20px rgba(0,0,0,.8);
}

.mj-tabs {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='50'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .6' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.03 0 0 0 0 0.01 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='50' filter='url(%23w)'/%3E%3C/svg%3E"),
    rgba(2,1,0,.98);
  border-bottom: 1px solid rgba(70,25,5,.3);
}

/* ══ SANG — GOUTTES SUR LES PANELS ══ */

/* Filets de sang sur la barre gauche */
.panel {
  --veine-color: rgba(120,0,0,.7);
}

/* Panel actif (nuit) — sang visible */
#tab-nuit .panel:first-of-type {
  border-left: 2px solid rgba(140,10,0,.6);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.4),
    -2px 0 8px rgba(100,0,0,.2),
    0 4px 20px rgba(0,0,0,.8);
}

/* Vote — panel rouge sang */
#tab-vote .panel:first-of-type {
  border: 1px solid rgba(120,10,10,.4);
  background:
    linear-gradient(160deg, rgba(30,4,4,.95) 0%, rgba(18,2,2,.98) 100%);
}

/* ══ CARTE JOUEUR — PARCHEMIN ANCIEN ══ */

.role-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='pv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .07' numOctaves='7' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.11 0 0 0 0 0.02 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23pv)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='1'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(160deg,
      rgba(22,10,3,.93) 0%,
      rgba(14,6,1,.97) 50%,
      rgba(18,8,2,.94) 100%
    );
  border: 1px solid rgba(100,45,8,.4);
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.5),
    0 6px 30px rgba(0,0,0,.85),
    0 0 0 1px rgba(60,20,0,.2);
}

/* ══ MODAL BOX — GRIMOIRE ══ */

.modal-box {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .05' numOctaves='7' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.20 0 0 0 0 0.09 0 0 0 0 0.01 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='400' height='600' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,
      rgba(25,10,3,.97) 0%,
      rgba(14,5,1,.99) 50%,
      rgba(20,8,2,.98) 100%
    );
  border: 1px solid rgba(90,38,6,.45);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.5),
    0 20px 60px rgba(0,0,0,.95),
    0 0 0 1px rgba(50,15,0,.3),
    0 0 80px rgba(80,20,0,.15);
}

/* ══ PROJECTEUR — SCÈNE GOTHIQUE ══ */

#vScreen > div {
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(60,0,0,.2) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 20%, rgba(40,0,0,.15) 0%, transparent 55%);
}

/* ══ SCROLL — GRIMOIRE ══ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='100'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .3' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.01 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='20' height='100' filter='url(%23w)'/%3E%3C/svg%3E"),
    rgba(2,1,0,.9);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(100,20,5,.8), rgba(60,10,0,.6));
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(140,30,5,.9), rgba(90,15,0,.8));
}

/* ══ SELECTION — SANG ══ */
::selection {
  background: rgba(120,0,0,.5);
  color: #d4a855;
}

.view > * { position: relative; z-index: 10; }
.mj-header,
.mj-tabs,

.modal-overlay { z-index: 200 !important; }
#phaseOverlay { z-index: 500 !important; }

/* card-cell styles manquants */
.card-cell { display:flex; flex-direction:column; align-items:center; position:relative; border-radius:2px; overflow:hidden; cursor:pointer; transition:all .2s; }
.card-cell.e  { border:1px solid rgba(100,40,0,.2);  background:rgba(10,4,1,.7); }
.card-cell.sv { border:1px solid rgba(140,70,0,.55); background:rgba(25,10,2,.9); box-shadow:0 0 8px rgba(120,50,0,.2); }
.card-cell.sw { border:1px solid rgba(140,0,0,.55);  background:rgba(25,4,4,.9);  box-shadow:0 0 8px rgba(100,0,0,.25); }
.badge { position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:5; font-family:Cinzel,serif; font-size:8px; font-weight:700; }
.bv { background:rgba(140,60,0,.92); color:#d4a855; }
.bw { background:rgba(120,0,0,.92); color:#ff9966; }

/* ═══════════════════════════════════════════════════════
   FINITIONS VISUELLES — 4 zones
   1. Carte joueur (révélation dramatique)
   2. Grille composition MJ
   3. Projecteur TV (timer urgence)
   4. Lobby (titre desktop + entrée)
═══════════════════════════════════════════════════════ */

/* ══ 1. CARTE JOUEUR ══ */

/* Verso non retourné — mystère */
#cardFront {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 2rem 1.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .055' numOctaves='7' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.20 0 0 0 0 0.09 0 0 0 0 0.01 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='400' height='300' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(18,7,2,.95), rgba(10,4,1,.98));
  transition: all .3s;
}

#cardFront:hover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .055' numOctaves='7' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0 0.02 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='400' height='300' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(28,10,3,.95), rgba(15,6,2,.98));
  box-shadow: inset 0 0 60px rgba(0,0,0,.3), 0 0 0 1px rgba(140,60,0,.3);
}

/* Symbole mystère grand et dramatique */
#cardFront .role-mystery {
  font-size: 4rem;
  line-height: 1;
  color: rgba(180,90,20,.25);
  text-shadow: 0 0 30px rgba(150,60,0,.2);
  animation: moonPulse 4s ease-in-out infinite;
  font-family: serif;
}

/* Texte "toucher pour révéler" */
#cardFront .role-tap {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .18em;
  color: rgba(140,80,20,.5);
  text-transform: uppercase;
  text-align: center;
}

/* Scan line animé sur le mystère */
#cardFront::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180,90,20,.04) 50%,
    transparent 100%);
  animation: scanLine 4s ease-in-out infinite;
  pointer-events: none;
}

/* Coins brûlés */
#cardFront::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%,   rgba(40,10,2,.65) 0%, transparent 50%),
    radial-gradient(ellipse 50% 45% at 100% 0%,  rgba(32,8,2,.55) 0%, transparent 48%),
    radial-gradient(ellipse 55% 48% at 0% 100%,  rgba(38,9,2,.60) 0%, transparent 50%),
    radial-gradient(ellipse 50% 45% at 100% 100%,rgba(30,7,2,.55) 0%, transparent 45%);
}

/* Image du rôle après flip — plus haute */
#roleImage {
  width: 100% !important;
  height: clamp(200px, 55vw, 340px) !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Lueur rouge révélation — classe ajoutée par JS */
@keyframes revealGlow {
  0%   { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
  30%  { box-shadow: inset 0 0 80px rgba(140,0,0,.35), 0 0 40px rgba(100,0,0,.25); }
  100% { box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.7); }
}
.role-card.revealed {
  animation: revealGlow .8s ease-out forwards;
}

/* ══ 2. GRILLE COMPOSITION MJ ══ */

/* Grille composition — responsive */
@media (min-width: 480px) {
  
}
@media (min-width: 700px) {
  
}
@media (min-width: 1100px) {
  
}

/* Images des cartes plus hautes */
.card-cell .cimg,
.card-cell img[class*="cimg"],
.cimg {
  width: 100% !important;
  height: 90px !important;      /* plus haute pour moins couper */
  object-fit: cover !important;
  object-position: center 20% !important; /* centré légèrement haut = visages visibles */
  display: block !important;
  flex-shrink: 0 !important;
}
/* Desktop : encore plus haute */
@media (min-width: 600px) {
  .cimg,
  .card-cell img[class*="cimg"],
  .cimg { height: 110px !important; }
}

/* Total joueurs — barre de validation */
#cardTotalBar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: rgba(4,2,0,.85);
  border: 1px solid var(--bord);
  border-radius: 1px;
  margin-bottom: .4rem;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .1em;
}
#cardTotalBar .tot-num {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
#cardTotalBar .tot-ok  { color: #44aa44; }
#cardTotalBar .tot-err { color: #cc2200; animation: urgentPulse .8s ease-in-out infinite; }
#cardTotalBar .tot-warn{ color: #cc8800; }
#cardTotalBar progress {
  flex: 1; height: 4px;
  border-radius: 2px; border: none;
  appearance: none; -webkit-appearance: none;
}
#cardTotalBar progress::-webkit-progress-bar   { background: rgba(60,30,0,.3); border-radius:2px; }
#cardTotalBar progress::-webkit-progress-value { background: var(--rouge2); border-radius:2px; transition:width .3s; }
#cardTotalBar progress.ok::-webkit-progress-value { background: #44aa44; }

/* Survol card — lueur selon équipe */
.card-cell.sw:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 22px rgba(150,5,3,.5), 0 0 0 1px rgba(180,10,4,.55);
}
.card-cell.sv:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 22px rgba(120,55,0,.42), 0 0 0 1px rgba(155,75,5,.5);
}
.card-cell.e:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* Badge compteur plus visible */
.badge {
  min-width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* Boutons +/- plus cliquables */
.card-cell .ctrl button,
.card-cell button[style*="background:transparent"] {
  min-height: 22px;
  min-width: 22px;
}

/* ══ 3. PROJECTEUR TV — TIMER URGENCE ══ */

/* Timer standard */
.sc-timer {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: clamp(4rem, 20vw, 7rem);
  color: var(--parch);
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 40px rgba(210,80,5,.2),
    0 0 80px rgba(170,10,3,.1);
  transition: color .3s, text-shadow .3s;
}

/* Urgence < 10s */
.sc-timer.urgent {
  color: #ff4422 !important;
  animation: timerUrgent .6s ease-in-out infinite;
}
@keyframes timerUrgent {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(255,40,10,.5),
      0 0 60px rgba(200,10,3,.3);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 60px rgba(255,50,10,.8),
      0 0 100px rgba(220,10,3,.4),
      0 0 140px rgba(180,0,0,.2);
    transform: scale(1.03);
  }
}

/* Phase annonce sur le projecteur */
.sc-phase {
  font-size: clamp(1.2rem, 6vw, 2rem);
  font-family: 'Cinzel', serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.sc-phase.night {
  color: #8888cc;
  text-shadow: 0 0 30px rgba(80,80,200,.3);
}
.sc-phase.vote {
  color: #cc4422;
  animation: voteGlow .9s ease-in-out infinite;
}

/* Joueurs sur le projecteur — dots mieux visibles */
.sc-dot {
  font-size: 7px !important;
  padding: 3px 11px !important;
  transition: all .3s;
}
.sc-dot.elim {
  opacity: .2 !important;
  text-decoration: line-through !important;
  transform: scale(.9);
}
.sc-dot.voted {
  border-color: var(--rouge2) !important;
  color: var(--parch2) !important;
}

/* ══ 4. LOBBY ══ */

/* Titre plus grand sur desktop */
.lobby-title {
  font-size: clamp(2.8rem, 12vw, 5.5rem) !important;
  line-height: 1.05 !important;
  margin-bottom: .5rem !important;
}

/* Animation d'entrée page au chargement */
@keyframes lobbyEntree {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lobby-inner > * {
  animation: lobbyEntree .8s ease-out both;
}
.lobby-inner > *:nth-child(1) { animation-delay: .05s; }
.lobby-inner > *:nth-child(2) { animation-delay: .12s; }
.lobby-inner > *:nth-child(3) { animation-delay: .20s; }
.lobby-inner > *:nth-child(4) { animation-delay: .28s; }
.lobby-inner > *:nth-child(5) { animation-delay: .36s; }
.lobby-inner > *:nth-child(6) { animation-delay: .44s; }
.lobby-inner > *:nth-child(7) { animation-delay: .52s; }
.lobby-inner > *:nth-child(8) { animation-delay: .60s; }

/* Description plus atmosphérique */
.lobby-desc {
  font-family: 'Crimson Text', serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: var(--parch3) !important;
  line-height: 1.8 !important;
  max-width: 320px !important;
  margin: 0 auto .8rem !important;
}

/* Séparateur lobby animé — plus grand */
.lobby-sep {
  width: 120px !important;
  margin: .8rem auto 1rem !important;
}

/* Boutons lobby — effet cuir pressé au clic */
.lobby-btn:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(0,0,0,.3) !important;
}

/* Sous-titre lobby */
.lobby-subtitle {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .4em;
  color: var(--parch4);
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* ══ BONUS — Transitions de phase plus dramatiques ══ */
#phaseOverlay {
  transition: opacity .6s ease !important;
}
.phase-transition-enter {
  animation: phaseIn .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes phaseIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}


/* Timer critique < 5s — tremblement fort */
.sc-timer.critical {
  color: #ff2200 !important;
  animation: timerCritical .35s ease-in-out infinite !important;
}
@keyframes timerCritical {
  0%, 100% {
    text-shadow:
      0 0 40px rgba(255,20,0,.7),
      0 0 80px rgba(220,0,0,.4),
      0 0 120px rgba(180,0,0,.2);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 60px rgba(255,30,5,.9),
      0 0 100px rgba(240,5,0,.5),
      0 0 160px rgba(200,0,0,.3);
    transform: scale(1.06);
  }
}

/* Grille MJ — amélioration nom tronqué */
.card-cell .cn {
  font-size: 6px !important;
  padding: 2px 2px 1px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ══ PROJECTEUR TV — phases distinctes ══ */

/* Fond de phase sur le projecteur */
#vScreen {
  transition: background .8s ease;
}
#vScreen.phase-night {
  background: radial-gradient(ellipse 80% 50% at 50% 30%,
    rgba(20,20,80,.25) 0%, transparent 65%) !important;
}
#vScreen.phase-vote {
  background: radial-gradient(ellipse 80% 50% at 50% 30%,
    rgba(80,5,0,.25) 0%, transparent 65%) !important;
}
#vScreen.phase-day {
  background: radial-gradient(ellipse 80% 50% at 50% 30%,
    rgba(40,20,0,.15) 0%, transparent 65%) !important;
}

/* Label de phase sur le projecteur */
#screenPhaseLabel {
  font-family: 'Cinzel', serif;
  font-size: clamp(.7rem, 2.5vw, .95rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  transition: color .5s, text-shadow .5s;
}
#vScreen.phase-night #screenPhaseLabel {
  color: #9090dd;
  text-shadow: 0 0 20px rgba(80,80,200,.4);
}
#vScreen.phase-vote #screenPhaseLabel {
  color: #cc4422;
  text-shadow: 0 0 20px rgba(180,30,5,.4);
}

/* Titre screen plus grand */
.sc-title {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: clamp(2.5rem, 12vw, 5rem) !important;
  line-height: 1.05;
  animation: titleBreath 6s ease-in-out infinite;
}

/* Joueurs en grille sur le projecteur */
.sc-players-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  padding: .5rem 0;
  max-width: 600px;
  margin: 0 auto;
}
.sc-dot {
  font-family: 'Cinzel', serif;
  font-size: clamp(.55rem, 1.5vw, .75rem) !important;
  padding: 4px 12px !important;
  border: 1px solid var(--bord);
  border-radius: 1px;
  color: var(--parch4);
  background: rgba(8,3,1,.75);
  transition: all .3s;
}
.sc-dot.alive {
  border-color: rgba(120,60,5,.4);
  color: var(--parch3);
}
.sc-dot.voted {
  border-color: var(--rouge2) !important;
  color: var(--parch2) !important;
  box-shadow: 0 0 8px rgba(180,30,5,.3);
}
.sc-dot.dead {
  opacity: .2 !important;
  text-decoration: line-through !important;
}

/* ══ VUE JOUEUR — carte rôle améliorée ══ */

/* Conteneur carte plus grand */
#playerCard {
  width: 100%;
  border-radius: 2px;
  overflow: visible;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.5),
    0 8px 40px rgba(0,0,0,.9),
    0 0 0 1px rgba(80,30,0,.2);
  margin-bottom: .6rem;
}

/* Flip plus lent + dramatique */
.role-card-inner {
  transition: transform .75s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Lueur après révélation */
.role-card.revealed #cardBack {
  animation: revealEntry .6s ease-out both;
}
@keyframes revealEntry {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Image pleine largeur + hauteur */
#roleImage {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-bottom: 1px solid rgba(120,50,8,.35) !important;
}

/* Nom du rôle encore plus dramatique */
#roleName {
  font-size: clamp(2rem, 9vw, 2.8rem) !important;
  line-height: 1 !important;
  margin-bottom: .4rem !important;
}

/* ══ ÉCRAN DE RÉSULTATS ══ */
#vEndGame {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(80,5,0,.2) 0%, transparent 55%),
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(40,2,0,.2) 0%, transparent 55%),
    var(--noir);
}
.endgame-title {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: clamp(2.2rem, 10vw, 3.5rem);
  line-height: 1.05;
  text-align: center;
  margin-bottom: .3rem;
}
.endgame-winner-wolf    { color: #cc2200; text-shadow: 0 0 60px rgba(200,10,4,.5); }
.endgame-winner-village { color: #44aa44; text-shadow: 0 0 60px rgba(20,180,20,.3); }
.endgame-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: .8rem 0 1.2rem;
}
.endgame-stat {
  text-align: center;
  font-family: 'Cinzel', serif;
}
.endgame-stat .val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--parch);
  display: block;
}
.endgame-stat .lbl {
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--parch4);
  text-transform: uppercase;
}
.endgame-player {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  border-bottom: 1px solid rgba(100,40,5,.08);
  transition: background .15s;
}
.endgame-player:hover { background: rgba(20,8,2,.4); }
.endgame-player .ep-name {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  color: var(--parch);
  flex: 1;
}
.endgame-player .ep-role {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  padding: 2px 8px;
  border-radius: 1px;
}
.endgame-player .wolf-role   { background: rgba(40,5,5,.85);  border: 1px solid rgba(150,10,5,.45); color: #cc3333; }
.endgame-player .village-role{ background: rgba(5,20,5,.85);  border: 1px solid rgba(20,80,20,.4);  color: #66aa66; }
.endgame-player .solo-role   { background: rgba(10,8,25,.85); border: 1px solid rgba(60,50,140,.4); color: #8877cc; }
.endgame-player.dead-player  { opacity: .45; }
.endgame-player .ep-status   {
  font-size: .6rem;
  width: 16px;
  text-align: center;
  color: var(--parch3);
}
.endgame-player.dead-player .ep-status { color: #553333; }

/* ══════════════════════════════════════════════
   FINITIONS — Transitions phase + Écran attente
══════════════════════════════════════════════ */

/* ── Transitions de phase — overlay coloré ── */
.phase-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.phase-overlay.in {
  opacity: 1;
  pointer-events: all;
  animation: phaseFlash .85s cubic-bezier(.4,0,.2,1) forwards;
}

/* Nuit — bleu profond */
.phase-overlay-night {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(10,10,60,.92) 0%,
    rgba(2,2,22,.97) 60%,
    rgba(0,0,0,1) 100%);
}
/* Jour — or chaud */
.phase-overlay-day {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(60,30,0,.88) 0%,
    rgba(20,8,0,.96) 60%,
    rgba(0,0,0,1) 100%);
}
/* Vote — rouge sang */
.phase-overlay-vote {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(80,0,0,.90) 0%,
    rgba(25,0,0,.97) 60%,
    rgba(0,0,0,1) 100%);
}

@keyframes phaseFlash {
  0%   { opacity: 0;    transform: scale(.97); }
  18%  { opacity: 1;    transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0;    transform: scale(1.01); }
}

/* Texte au centre de l'overlay */
.phase-overlay-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'UnifrakturMaguntia', serif;
  font-size: clamp(2.5rem, 12vw, 5rem);
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
  animation: phaseTextIn .85s cubic-bezier(.4,0,.2,1) forwards;
}
.phase-overlay-night .phase-overlay-text  { color: #9090ee; text-shadow: 0 0 60px rgba(80,80,220,.5); }
.phase-overlay-day   .phase-overlay-text  { color: #d4a855; text-shadow: 0 0 60px rgba(200,130,20,.5); }
.phase-overlay-vote  .phase-overlay-text  { color: #cc2200; text-shadow: 0 0 60px rgba(200,20,5,.5); }

@keyframes phaseTextIn {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  25%  { opacity: 1; transform: translate(-50%, -50%); }
  75%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }
}

/* ── Écran d'attente — améliorations ── */

/* Lune plus lumineuse */
.moon-pulse {
  animation: moonPulse 3s ease-in-out infinite;
  transform-origin: 100px 55px;
  filter: drop-shadow(0 0 12px rgba(200,140,0,.5));
}
@keyframes moonPulse {
  0%, 100% { opacity: .85; r: 28; }
  50%       { opacity: 1;   r: 30; filter: drop-shadow(0 0 20px rgba(220,160,10,.7)); }
}

/* Yeux du loup plus intenses */
.wolf-eye {
  animation: eyeGlow 2s ease-in-out infinite;
}
@keyframes eyeGlow {
  0%, 100% { fill: #cc2200; opacity: .9; }
  50%       { fill: #ff4400; opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255,60,0,.8)); }
}

/* Queue animée */
.wolf-tail-anim {
  transform-origin: 144px 148px;
  animation: tailWag 2.5s ease-in-out infinite;
}
@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-8deg); }
  75%       { transform: rotate(8deg); }
}

/* Points d'attente */
.w-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #552222;
}
.w-dot:nth-child(1) { animation: dotBounce .9s ease-in-out infinite; }
.w-dot:nth-child(2) { animation: dotBounce .9s ease-in-out .2s infinite; }
.w-dot:nth-child(3) { animation: dotBounce .9s ease-in-out .4s infinite; }
@keyframes dotBounce {
  0%, 100% { transform: translateY(0);    opacity: .4; }
  50%       { transform: translateY(-6px); opacity: 1; background: #cc3333; }
}

/* Texte howl avec fondu entre messages */
#howlText {
  transition: opacity .5s ease;
  min-height: 1.6rem;
}
#howlText.fade-out { opacity: 0; }
#howlText.fade-in  { opacity: 1; }


/* ── VUE JOUEUR — layout centré ── */
#dashSection {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: .5rem .6rem 1rem;
  box-sizing: border-box;
}

#playerPhase {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--parch4);
  text-align: center;
  padding: .5rem 0 .6rem;
  border-bottom: 1px solid rgba(100,40,5,.12);
  margin-bottom: .6rem;
}
#playerPhase.night { color: #9090cc; }
#playerPhase.day   { color: #b8904a; }
#playerPhase.vote  { color: #cc4422; animation: voteGlow .9s ease-in-out infinite; }

#playerAnn {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--parch3);
  text-align: center;
  padding: .3rem .5rem .5rem;
  min-height: 1.4rem;
}

#playerCard {
  margin-bottom: .6rem;
  border: 1px solid rgba(100,40,5,.25);
}

#aliveList {
  margin-bottom: .5rem;
}

#voteSection {
  margin-bottom: .5rem;
}

/* Bouton chat loups en bas */
#wolfChatBtn {
  margin-top: .3rem;
}


/* ── FORÊT — hauteur fixe courte ── */

@media (min-width: 700px) {
  
}
}



.view {
  display: none !important;
  min-height: 100vh;
  flex-direction: column;
  padding-bottom: 20px;
}
.view.active {
  display: flex !important;
}
@media (min-width: 700px) {
  
}

/* ══════════════════════════════════════════
   GRILLE MJ — MINI CARDS (sans images)
══════════════════════════════════════════ */

@media (min-width: 500px) {
  
}
@media (min-width: 700px) {
  
}

/* Tile compact — juste nom + compteur */
.card-cell-mini {
  position: relative;
  border-radius: 2px;
  padding: 4px 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform .15s;
  min-height: 44px;
}
.card-cell-mini.e  {
  background: rgba(8,3,1,.75);
  border: 1px solid rgba(80,30,5,.18);
}
.card-cell-mini.sw {
  background: rgba(22,3,3,.92);
  border: 1px solid rgba(160,8,4,.55);
  box-shadow: 0 0 6px rgba(130,4,2,.25);
}
.card-cell-mini.sv {
  background: rgba(18,8,2,.92);
  border: 1px solid rgba(140,65,5,.5);
  box-shadow: 0 0 6px rgba(120,50,0,.2);
}
.card-cell-mini:hover { transform: translateY(-2px); }
.card-cell-mini:active { transform: scale(.96); }

/* Nom du rôle */
.cmini-name {
  font-family: 'Cinzel', serif;
  font-size: 6.5px;
  letter-spacing: .04em;
  color: var(--parch3);
  text-align: center;
  line-height: 1.2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-cell-mini.sw .cmini-name { color: #cc5533; }
.card-cell-mini.sv .cmini-name { color: #c8924a; }

/* Boutons +/- inline */
.cmini-ctrl {
  display: flex;
  gap: 2px;
  align-items: center;
}
.cmini-ctrl button {
  font-size: 13px;
  line-height: 1;
  width: 22px;
  height: 20px;
  border: 1px solid rgba(100,40,5,.25);
  border-radius: 1px;
  background: rgba(6,2,0,.6);
  color: var(--parch3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.cmini-ctrl button:hover { background: rgba(20,8,2,.9); color: var(--parch); }
.card-cell-mini.sw .cmini-ctrl button { border-color: rgba(150,10,4,.4); }
.card-cell-mini.sv .cmini-ctrl button { border-color: rgba(130,60,5,.4); }

/* Badge compteur */
.card-cell-mini .badge {
  position: absolute;
  top: 2px; right: 2px;
  font-size: 8px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-family: Cinzel, serif;
}

/* ── ONGLET CONTRÔLE — layout optimisé ── */

/* Phase pills plus grandes sur l'onglet contrôle */
.mj-phase-strip {
  display: flex;
  gap: .4rem;
  margin-bottom: .5rem;
}
.phase-pill {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .6rem .3rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  font-weight: 600;
}
.phase-pill.night {
  background: rgba(2,2,20,.85);
  border-color: rgba(60,60,160,.4);
  color: #9090dd;
}
.phase-pill.night:hover {
  background: rgba(5,5,35,.95);
  border-color: rgba(80,80,200,.7);
  box-shadow: 0 0 16px rgba(60,60,180,.3);
}
.phase-pill.day {
  background: rgba(20,10,2,.85);
  border-color: rgba(150,80,5,.4);
  color: #c8924a;
}
.phase-pill.day:hover {
  background: rgba(30,14,3,.95);
  border-color: rgba(180,100,8,.7);
  box-shadow: 0 0 16px rgba(150,80,5,.3);
}
.phase-pill.vote {
  background: rgba(20,2,2,.85);
  border-color: rgba(160,8,4,.4);
  color: #cc3333;
}
.phase-pill.vote:hover {
  background: rgba(30,4,4,.95);
  border-color: rgba(190,10,5,.7);
  box-shadow: 0 0 16px rgba(160,8,4,.3);
}

/* Active — phase en cours */
.phase-pill.active-phase {
  border-width: 2px;
  box-shadow: 0 0 20px rgba(200,10,5,.35);
}

/* ══════════════════════════════════════
   TUILES COMPOSITION MJ — v6
══════════════════════════════════════ */

@media (min-width: 500px) {
  
}

/* Tuile base — non sélectionnée */
.card-tile {
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #1a0a03;
  background: #0c0402;
  transition: transform .15s;
  display: flex;
  flex-direction: column;
  min-height: 70px;
}
.card-tile:hover { transform: translateY(-2px); }
.card-tile:active { transform: scale(.97); }

/* Loup sélectionné */
.card-tile.tw {
  background: #160202;
  border: 1px solid #8b0400;
  box-shadow: 0 0 8px rgba(150,4,0,.3);
}

/* Village sélectionné */
.card-tile.tv {
  background: #120801;
  border: 1px solid #7a4800;
  box-shadow: 0 0 8px rgba(140,80,0,.25);
}

/* Barre couleur haut */
.ct-bar { height: 2px; }
.card-tile    .ct-bar { background: #1a0a03; }
.card-tile.tw .ct-bar { background: linear-gradient(to right, transparent, #cc0000, transparent); }
.card-tile.tv .ct-bar { background: linear-gradient(to right, transparent, #aa6600, transparent); }

/* Corps */
.ct-body {
  padding: 6px 7px 5px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Nom — grand, change selon équipe */
.ct-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-tile    .ct-name { color: #5a3010; }
.card-tile.tw .ct-name { color: #e05030; }
.card-tile.tv .ct-name { color: #d4a040; }

/* Description — Crimson Text italic, clairement secondaire */
.ct-desc {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-tile    .ct-desc { color: #2a1505; }
.card-tile.tw .ct-desc { color: #7a2010; }
.card-tile.tv .ct-desc { color: #6a4010; }

/* Contrôles +/- */
.ct-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid #1a0a03;
}
.card-tile.tw .ct-ctrl { border-top-color: #3a0800; }
.card-tile.tv .ct-ctrl { border-top-color: #3a1800; }

.ct-btn {
  width: 22px; height: 18px;
  font-size: 15px; line-height: 1;
  border-radius: 1px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.card-tile    .ct-btn { background: #080301; border: 1px solid #1a0a03; color: #3a1a08; }
.card-tile.tw .ct-btn { background: #120101; border: 1px solid #4a0800; color: #aa2010; }
.card-tile.tv .ct-btn { background: #100801; border: 1px solid #3a1800; color: #aa7010; }
.ct-btn:hover { filter: brightness(1.4); }

.ct-count {
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 600;
  min-width: 16px; text-align: center;
}
.card-tile    .ct-count { color: #2a1005; }
.card-tile.tw .ct-count { color: #cc3010; }
.card-tile.tv .ct-count { color: #d4a040; }

/* Badge compteur */
.ct-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  font-size: 8px; font-weight: 700;
  font-family: 'Cinzel', serif;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.card-tile.tw .ct-badge { background: rgba(150,5,2,.95); color: #ffaa80; }
.card-tile.tv .ct-badge { background: rgba(145,62,0,.95); color: #ffd080; }

/* ==========================================================
   RESPONSIVE SYSTEM — Mobile First
   320px  → mobile portrait
   480px  → mobile paysage / grand mobile
   768px  → tablette portrait
   1024px → tablette paysage / petit desktop
   1280px → desktop
   ========================================================== */

/* ── BASE MOBILE (< 480px) ──────────────────────────────── */

/* Lobby */
.lobby-inner {
  padding: 1.5rem 1rem 1.5rem;
  max-width: 400px;
  margin: 0 auto;
}
.lobby-title {
  font-size: clamp(1.6rem, 8vw, 2.4rem);
}
.lobby-btn {
  font-size: .72rem;
  padding: .65rem 1rem;
  max-width: 100%;
  width: 100%;
}

/* Vue joueur */
#dashSection {
  max-width: 420px;
  margin: 0 auto;
  padding: .6rem .8rem 1rem;
}

/* MJ — header */
.mj-header {
  padding: .4rem .6rem;
}
.mj-header-center {
  font-size: .65rem;
}

/* MJ — onglets */
.mj-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mj-tab {
  font-size: .6rem;
  padding: .55rem .3rem;
  min-width: 60px;
  white-space: nowrap;
}

/* MJ — contenu onglets */
.mj-tab-content.active {
  padding: .5rem .5rem 5rem;
}

/* Grille cartes — 2 colonnes mobile */
#cardGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
}

/* Tuile */
.card-tile { min-height: 68px; }
.ct-name { font-size: 8px; }
.ct-desc { font-size: 7px; -webkit-line-clamp: 2; }

/* Panels */
.panel { margin-bottom: .4rem; }
.ph { font-size: .6rem; padding: .3rem .5rem .3rem .6rem; }
.pb { padding: .35rem .5rem .35rem .6rem; }

/* Phase pills */
.mj-phase-strip { gap: .25rem; }
.phase-pill { font-size: .6rem; padding: .45rem .2rem; }

/* ── PHABLET (≥ 480px) ───────────────────────────────────── */
@media (min-width: 480px) {
  #cardGrid { grid-template-columns: repeat(3, 1fr) !important; }
  .card-tile { min-height: 72px; }
  .ct-name { font-size: 8.5px; }
  .mj-tab { font-size: .65rem; padding: .6rem .4rem; min-width: 70px; }
  .lobby-btn { font-size: .76rem; }
}

/* ── TABLET (≥ 768px) ────────────────────────────────────── */
@media (min-width: 768px) {
  /* Lobby centré et aéré */
  .lobby-inner {
    padding: 2.5rem 2rem;
    max-width: 460px;
  }
  .lobby-title { font-size: 2.2rem; }
  .lobby-btn {
    font-size: .8rem;
    padding: .75rem 1.5rem;
    max-width: 340px;
  }

  /* MJ header plus aéré */
  .mj-header { padding: .5rem .8rem; }
  .mj-tab {
    font-size: .72rem;
    padding: .7rem .6rem;
    letter-spacing: .08em;
  }

  /* Grille — 4 colonnes tablette */
  #cardGrid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .card-tile { min-height: 80px; }
  .ct-name { font-size: 9px; }
  .ct-desc { font-size: 8px; }
  .ct-btn { width: 24px; height: 20px; }

  /* Contenu MJ plus large */
  .mj-tab-content.active { padding: .7rem .8rem 4rem; }

  /* Panels */
  .ph { font-size: .68rem; padding: .35rem .6rem .35rem .8rem; }
  .pb { padding: .4rem .6rem .4rem .8rem; }
}

/* ── DESKTOP (≥ 1024px) ──────────────────────────────────── */
@media (min-width: 1024px) {
  /* Lobby */
  .lobby-inner { max-width: 500px; padding: 3rem 2.5rem; }
  .lobby-btn { font-size: .85rem; max-width: 380px; }

  /* Vue MJ — max-width centré */
  #vMJ { max-width: 960px; margin: 0 auto; width: 100%; }

  /* Grille — 5 colonnes desktop */
  #cardGrid { grid-template-columns: repeat(5, 1fr) !important; gap: 7px !important; }
  .card-tile { min-height: 88px; }
  .ct-name { font-size: 10px; }
  .ct-desc { font-size: 8.5px; -webkit-line-clamp: 3; }

  /* Onglets */
  .mj-tab { font-size: .78rem; padding: .75rem .8rem; letter-spacing: .1em; }

  /* Phase pills */
  .phase-pill { font-size: .72rem; padding: .6rem .4rem; }

  /* Panels */
  .ph { font-size: .7rem; }
  .pb { padding: .5rem .7rem; }

  /* Joueurs */
  #dashSection { max-width: 560px; }
}

/* ── LARGE DESKTOP (≥ 1280px) ────────────────────────────── */
@media (min-width: 1280px) {
  #vMJ { max-width: 1100px; }
  #cardGrid { grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; }
  .card-tile { min-height: 94px; }
  .mj-tab { font-size: .82rem; padding: .8rem 1rem; }
}

/* ── LANDSCAPE MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .lobby-inner { padding: 1rem 1.5rem; }
  .lobby-title { font-size: 1.4rem; margin-bottom: .5rem; }
  #cardGrid { grid-template-columns: repeat(4, 1fr) !important; }
  .mj-tab { padding: .4rem .3rem; font-size: .58rem; }
}


/* ── VUE JOUEUR — responsive correctif ── */
#vPlayer {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

#joinSection {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}

.join-card {
  width: 100%;
  box-sizing: border-box;
}

#dashSection {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: .5rem .8rem 1rem;
  box-sizing: border-box;
}

#playerCard {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(0,0,0,.9),
    0 0 0 1px rgba(80,30,0,.2);
  margin-bottom: .6rem;
}

#cardFront {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#cardBack {
  width: 100%;
  box-sizing: border-box;
}

#roleImage {
  width: 100% !important;
  height: clamp(160px, 50vw, 300px) !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
  flex-shrink: 0;
}

/* Nom du rôle adaptatif */
#roleName {
  font-size: clamp(1.4rem, 6vw, 2rem) !important;
}

/* Sur grand écran — carte plus large */
@media (min-width: 480px) {
  #dashSection { max-width: 480px; }
  #roleImage { height: clamp(200px, 40vw, 320px) !important; }
}
@media (min-width: 768px) {
  #dashSection { max-width: 560px; }
  #roleImage { height: 320px !important; }
  #roleName { font-size: 2.2rem !important; }
}


/* ══════════════════════════════════════════════════════
   DESIGN SANGLANT — animations & effets atmosphériques
══════════════════════════════════════════════════════ */

/* Gouttes de sang qui tombent */
@keyframes bloodDrip {
  0%   { transform: translateY(-100%) scaleY(.5); opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:.9; }
  100% { transform: translateY(100vh) scaleY(1.5); opacity:0; }
}

/* Pulsation rouge — éléments vivants */
@keyframes bloodPulse {
  0%,100% { box-shadow: 0 0 8px rgba(180,0,0,.2); }
  50%      { box-shadow: 0 0 22px rgba(220,0,0,.5), inset 0 0 12px rgba(150,0,0,.1); }
}

/* Scintillement chandelle */
@keyframes flicker {
  0%,100% { opacity:1; }
  10%  { opacity:.88; }
  30%  { opacity:.96; }
  50%  { opacity:.85; }
  70%  { opacity:.93; }
  90%  { opacity:.87; }
}

/* Apparition spectrale */
@keyframes ghostIn {
  0%   { opacity:0; transform:translateY(16px) scale(.97); filter:blur(4px); }
  100% { opacity:1; transform:translateY(0)    scale(1);   filter:blur(0); }
}

/* Révélation de carte — flip sanglant */
@keyframes revealBlood {
  0%   { opacity:0; transform:perspective(800px) rotateY(-90deg) scale(.9); }
  40%  { opacity:1; }
  100% { opacity:1; transform:perspective(800px) rotateY(0deg)  scale(1); }
}

/* Tremblement menace */
@keyframes shudder {
  0%,100% { transform:translateX(0); }
  20%  { transform:translateX(-3px) rotate(-.4deg); }
  40%  { transform:translateX(3px)  rotate(.4deg); }
  60%  { transform:translateX(-2px); }
  80%  { transform:translateX(2px); }
}

/* Texte qui saigne — soulignement rouge */
@keyframes bloodUnderline {
  0%   { width:0; opacity:0; }
  100% { width:100%; opacity:1; }
}

/* Phase badge — lueur pulsante */
@keyframes voteGlow {
  0%,100% { text-shadow:0 0 8px rgba(200,0,0,.4); color:#cc3333; }
  50%      { text-shadow:0 0 20px rgba(255,0,0,.7), 0 0 40px rgba(200,0,0,.3); color:#ff4444; }
}

@keyframes nightGlow {
  0%,100% { text-shadow:0 0 8px rgba(80,80,220,.4); color:#9090cc; }
  50%      { text-shadow:0 0 20px rgba(100,100,255,.6); color:#aaaaff; }
}

/* ── Lobby ── */
.lobby-title {
  animation: flicker 8s ease-in-out infinite;
}

.lobby-btn {
  position: relative;
  overflow: hidden;
  transition: all .25s ease;
}
.lobby-btn::before {
  content: '';
  position: absolute;
  bottom: 0; left: -100%;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,8,4,.7), transparent);
  transition: left .4s ease;
}
.lobby-btn:hover::before { left: 100%; }
.lobby-btn:hover {
  border-color: rgba(180,8,4,.6);
  box-shadow: 0 0 20px rgba(150,4,2,.25), inset 0 0 15px rgba(100,0,0,.1);
  transform: translateY(-1px);
}
.lobby-btn:active { transform: scale(.98); }

/* ── Carte joueur ── */
#playerCard {
  animation: bloodPulse 4s ease-in-out infinite;
  position: relative;
}

#cardFront {
  animation: ghostIn .6s ease-out both;
}

/* Runes dans les coins de la carte */
#playerCard::before,
#playerCard::after {
  content: '✦';
  position: absolute;
  font-size: 8px;
  color: rgba(120,10,4,.4);
  z-index: 2;
}
#playerCard::before { top: 5px; left: 7px; }
#playerCard::after  { bottom: 5px; right: 7px; }

/* Image rôle — apparition dramatique */
#roleImage {
  animation: revealBlood .7s cubic-bezier(.2,0,.1,1) both;
}

/* Nom du rôle — soulignement sang */
#roleName {
  position: relative;
  display: inline-block;
}
#roleName::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(180,8,4,.8), transparent);
  animation: bloodUnderline .8s .3s ease both;
  width: 0;
}

/* Phase nuit */
.phase-display.night {
  animation: nightGlow 3s ease-in-out infinite;
}
.phase-display.vote {
  animation: voteGlow .9s ease-in-out infinite;
}

/* ── Lobby — fond sanglant ── */
#vHome, #vLobby {
  position: relative;
  overflow: hidden;
}
#vHome::before, #vLobby::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(120,0,0,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(80,0,0,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(80,0,0,.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.lobby-inner { position: relative; z-index: 1; }

/* ── MJ header ── */
.mj-header {
  position: relative;
}
.mj-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,8,4,.6), transparent);
  animation: bloodUnderline 1.2s .5s ease both;
}

/* ── Onglet actif ── */
.mj-tab.active::after,
.mj-tab[aria-selected="true"]::after {
  background: linear-gradient(to right, transparent, rgba(200,8,4,.9), transparent);
}

/* ── Panneau — bordure sanglante gauche animée ── */
.panel::before {
  animation: bloodPulse 5s ease-in-out infinite;
}

/* ── Tuiles compo — hover sanglant ── */
.card-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.7), 0 0 8px rgba(150,0,0,.15);
}
.card-tile.tw:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.7), 0 0 14px rgba(180,4,0,.3);
  border-color: rgba(200,8,4,.6);
}
.card-tile.tv:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.7), 0 0 14px rgba(140,70,0,.25);
  border-color: rgba(160,80,8,.6);
}

/* ── Phase transitions ── */
.phase-overlay.in {
  animation: phaseFlash 1s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Boutons d'élimination ── */
.pelim, [onclick*="doElim"] {
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.pelim:hover, [onclick*="doElim"]:hover {
  animation: shudder .3s ease;
  background: rgba(30,2,2,.95) !important;
  border-color: rgba(200,8,4,.6) !important;
  box-shadow: 0 0 10px rgba(160,4,0,.3);
}

/* ── Écran de victoire ── */
#vEndGame {
  animation: ghostIn .8s ease-out both;
}

/* ── Scrollbar sanglante ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(4,2,0,.5); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(120,4,0,.6), rgba(60,2,0,.4));
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(160,8,4,.7); }

/* ── Sélection de texte ── */
::selection {
  background: rgba(160,4,0,.4);
  color: #d4a855;
}

/* ── Focus ring sanglant ── */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 1px solid rgba(180,8,4,.6);
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(150,4,0,.2);
}

/* ── Waiting screen ── */
.moon-pulse {
  filter: drop-shadow(0 0 8px rgba(180,140,0,.4));
}
@keyframes moonPulse {
  0%,100% { opacity:.85; }
  50%      { opacity:1; filter:drop-shadow(0 0 16px rgba(200,160,10,.6)); }
}

/* ── Index/join page intro ── */
.join-title {
  animation: ghostIn .8s ease-out both;
}
.join-card {
  animation: ghostIn .6s .2s ease-out both;
}


/* ── FLIP CARTE 3D ── */
#playerCard {
  perspective: 1000px;
}
#cardInner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
#cardInner.flipped {
  transform: rotateY(180deg);
}
#cardFront, #cardBack {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#cardBack {
  position: absolute;
  top: 0; left: 0;
  transform: rotateY(180deg);
}

/* ══════════════════════════════════════════════════════════
   LISIBILITÉ JOUEUR — refonte contrastes
   Principe : fond ~#040609, textes clairs et hiérarchisés
══════════════════════════════════════════════════════════ */

/* ── Phase display ── */
.phase-display {
  font-family: 'Cinzel', serif !important;
  font-size: .78rem !important;
  letter-spacing: .2em !important;
  color: #c8924a !important;        /* or moyen — lisible sur noir */
  text-align: center;
  padding: .5rem .8rem;
  background: rgba(20,8,2,.6);
  border-bottom: 1px solid rgba(120,60,5,.2);
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phase-display.night {
  color: #a0a8e8 !important;        /* bleu clair — nuit */
  background: rgba(2,2,22,.7) !important;
  animation: nightGlow 3s ease-in-out infinite !important;
}
.phase-display.day {
  color: #e0b870 !important;        /* or chaud — jour */
  background: rgba(25,12,2,.6) !important;
}
.phase-display.vote {
  color: #e86060 !important;        /* rouge clair — vote */
  background: rgba(25,2,2,.7) !important;
  animation: voteGlow .9s ease-in-out infinite !important;
}

/* ── Annonce ── */
#playerAnn {
  font-family: 'Crimson Text', serif !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: #c8a870 !important;        /* or clair — clairement lisible */
  text-align: center;
  padding: .4rem .8rem;
  min-height: 1.4rem;
  line-height: 1.5;
}

/* ── Carte — face avant (mystère) ── */
.role-mystery {
  font-size: 3.5rem !important;
  color: rgba(180,120,30,.5) !important;   /* plus visible */
}
.role-tap, #roleTapMsg {
  font-family: 'Cinzel', serif !important;
  font-size: .65rem !important;
  letter-spacing: .18em !important;
  color: rgba(160,100,30,.7) !important;   /* était .35 → .7 */
  margin-top: .5rem !important;
}

/* ── Carte — face arrière (rôle révélé) ── */
#roleName {
  font-family: 'UnifrakturMaguntia', serif !important;
  font-size: 2rem !important;
  line-height: 1.1 !important;
  margin-bottom: .3rem !important;
  /* couleur gérée par JS selon équipe — on s'assure juste du fallback */
}

#roleDesc {
  font-family: 'Crimson Text', serif !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: #d0a870 !important;        /* était #b8904a trop sombre → plus clair */
  line-height: 1.7 !important;
  margin-bottom: .6rem !important;
}

#rolePow {
  font-family: 'Cinzel', serif !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  color: #c0a060 !important;        /* était #8a6530 très sombre → or clair */
  border-left: 2px solid rgba(160,10,10,.7) !important;
  padding-left: .6rem !important;
  line-height: 1.7 !important;
}

#roleTeamBadge span {
  font-size: .62rem !important;
  letter-spacing: .12em !important;
}

/* ── Survivants / aliveList ── */
.alive-title {
  font-family: 'Cinzel', serif !important;
  font-size: .62rem !important;
  letter-spacing: .14em !important;
  color: #b8904a !important;        /* était var(--parch3) #8a6530 trop sombre */
  margin-bottom: .35rem !important;
}
.alive-names {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.alive-chip {
  font-family: 'Cinzel', serif !important;
  font-size: .68rem !important;
  padding: 2px 9px !important;
  border: 1px solid rgba(160,90,20,.35) !important;
  border-radius: 2px !important;
  color: #c0a060 !important;        /* or lisible */
  background: rgba(20,10,2,.6) !important;
}
.alive-chip.me {
  border-color: rgba(200,160,40,.6) !important;
  color: #e8c870 !important;        /* vous = plus lumineux */
  background: rgba(30,18,3,.8) !important;
  font-weight: 600 !important;
}

/* ── Morts ── */
#aliveList div[style*="2a0000"] {
  color: #886040 !important;        /* était #2a0000 invisible */
}

/* ── Vote buttons ── */
.vote-target {
  font-family: 'Cinzel', serif !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  padding: .55rem .8rem !important;
  margin: .2rem !important;
  background: rgba(20,8,2,.85) !important;
  border: 1px solid rgba(160,70,20,.4) !important;
  color: #d0a060 !important;        /* or lisible */
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  width: 100% !important;
  text-align: left !important;
}
.vote-target:hover {
  background: rgba(35,10,3,.95) !important;
  border-color: rgba(200,8,4,.6) !important;
  color: #f0c870 !important;
  box-shadow: 0 0 10px rgba(160,8,4,.2) !important;
}

/* ── Vote section titre ── */
#voteSection h3 {
  font-family: 'Cinzel', serif !important;
  font-size: .68rem !important;
  letter-spacing: .14em !important;
  color: #cc4422 !important;        /* rouge lisible */
  margin-bottom: .4rem !important;
  padding-bottom: .3rem !important;
  border-bottom: 1px solid rgba(160,8,4,.2) !important;
}

/* ── Dead banner ── */
#deadBanner {
  background: rgba(100,0,0,.9) !important;
  color: #ffcccc !important;
  font-family: 'Cinzel', serif !important;
  font-size: .75rem !important;
  letter-spacing: .12em !important;
  padding: .8rem 1rem !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(200,0,0,.4) !important;
}

/* ── Section connexion joueur (joinSection) ── */
.join-title {
  font-family: 'UnifrakturMaguntia', serif !important;
  font-size: 2.2rem !important;
  color: #d4a855 !important;
  line-height: 1.1 !important;
  margin-bottom: .2rem !important;
}
.join-sub {
  font-family: 'Cinzel', serif !important;
  font-size: .62rem !important;
  letter-spacing: .15em !important;
  color: #a08040 !important;        /* était var(--parch3) → plus clair */
  margin-bottom: .5rem !important;
}

/* Input prénom */
#nameInput {
  font-family: 'Cinzel', serif !important;
  font-size: .85rem !important;
  letter-spacing: .06em !important;
  color: #e0c080 !important;        /* texte saisi clair */
  background: rgba(15,8,2,.85) !important;
  border: 1px solid rgba(160,90,20,.4) !important;
  padding: .6rem .8rem !important;
  width: 100% !important;
  border-radius: 2px !important;
}
#nameInput::placeholder {
  color: rgba(140,90,30,.5) !important;
}
#nameInput:focus {
  border-color: rgba(200,120,20,.6) !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(160,80,10,.2) !important;
}

/* ── Phase display spectateur ── */
.spectator-badge {
  font-family: 'Cinzel', serif !important;
  font-size: .52rem !important;
  padding: 1px 7px !important;
  border: 1px solid rgba(140,70,20,.4) !important;
  color: #a08040 !important;
  border-radius: 1px !important;
  margin-left: .4rem !important;
  vertical-align: middle !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX images de cartes — afficher la carte ENTIÈRE (pas de rognage)
   object-fit:contain + hauteur auto + fond sombre pour le cadrage
   ════════════════════════════════════════════════════════════════ */
#roleImage {
  height: auto !important;
  max-height: 60vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0a050a !important;
  border-radius: 10px !important;
}
/* Vignettes de la grille de composition */
.cimg,
.card-cell .cimg,
.card-cell img[class*="cimg"] {
  object-fit: contain !important;
  background: #0a050a !important;
}
/* Cartes de l'écran de fin de partie */
.endgame-player img,
#endgamePlayers img {
  object-fit: contain !important;
  background: #0a050a !important;
}

/* ════════════════════════════════════════════════════════════════
   Moteur de nuit — UI d'action du rôle (téléphone joueur)
   ════════════════════════════════════════════════════════════════ */
.night-action-box {
  margin: .6rem 0;
  padding: .7rem .8rem;
  background: radial-gradient(circle at 50% 0%, rgba(20,10,40,.85), rgba(4,4,14,.95));
  border: 1px solid rgba(80,60,150,.35);
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgba(40,20,90,.3);
}
.night-role-head {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 1.3rem;
  color: #b0a0e0;
  text-align: center;
}
.night-role-sub {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: .72rem;
  color: #8878b0;
  text-align: center;
  margin-bottom: .3rem;
}
.night-info-text {
  font-family: 'Cinzel', serif;
  font-size: .66rem;
  color: #9988bb;
  text-align: center;
  margin-top: .3rem;
}
.night-done {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  color: #66bb88;
  text-align: center;
  padding: .4rem;
}
.night-action-box .vote-target {
  background: rgba(30,20,60,.7);
  border: 1px solid rgba(90,70,160,.4);
  color: #cfc4ee;
}
.night-action-box .vote-target:hover { background: rgba(60,40,120,.8); }

/* Titres de fin — camps spéciaux (Phase 4) */
.endgame-winner-lovers { color: #ff5588 !important; text-shadow: 0 0 24px rgba(255,60,120,.6) !important; }
.endgame-winner-solo   { color: #b59cf0 !important; text-shadow: 0 0 24px rgba(140,90,230,.6) !important; }