/* Styles du site Tatou — extraits d'index.html pour alléger la page.
   Même contenu, zéro changement visuel. */
:root{
  --void:#0b0a0a;
  --void-deep:#050404;
  --panel:#141110;
  --blood:#8a1220;
  --blood-bright:#c81c34;
  --fog:#4a4a4d;
  --fog-light:#8a8683;
  --bone:#e7e1d3;
  --parchment:#b9b0a0;
  --uncommon:#7ea34c;
  --rare:#6a4fb0;
  --ultra:#d9822b;
  --radius:2px;
  /* Variantes éclaircies utilisées uniquement pour du texte en petite
     taille : --blood-bright et --rare n'atteignent pas 4.5:1 sur les
     fonds sombres du site (bon pour les bordures/icônes, insuffisant
     pour du texte lu). Bordures, boutons et gros titres gardent les
     couleurs d'origine — seule l'identité visuelle du texte change ici. */
  --blood-accessible:#e8455c;
  --rare-accessible:#9678d6;
  /* Texte posé sur des fonds systématiquement sombres (miniatures de
     vidéos/clips, badges semi-transparents) : ne doit jamais suivre le
     mode clair/sombre de la page, sinon le texte devient illisible sur
     ces fonds qui restent sombres dans les deux modes. */
  --overlay-text:#f5f1e8;
  --overlay-muted:#c9c3b6;
  --overlay-border:rgba(245,241,232,.3);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Sans ça, le tiroir de navigation mobile (translateX(100%) hors écran)
   élargit le viewport sur téléphone : tout le site se retrouve dézoomé et
   les éléments ancrés à droite (menu du compte) sortent de l'écran. */
html, body{overflow-x:hidden;}
/* Bandeau d'aperçu d'un brouillon non publié (voir /admin.html — le
   contenu affiché vient alors de localStorage, pas de l'API). */
.preview-banner{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  background:#f2b705; color:#1a1400; font-family:'Cinzel',serif; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.6rem 1rem; text-align:center;
}
.preview-banner[hidden]{display:none;}
.live-banner{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(90deg, var(--blood-bright), #6b0f1c);
  color:var(--overlay-text); font-family:'Cinzel',serif; font-size:.8rem;
  letter-spacing:.05em; padding:.55rem 1rem; text-align:center;
  animation: liveBannerPulse 2s ease-in-out infinite;
}
.live-banner[hidden]{display:none;}
.live-banner a{color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px;}
@keyframes liveBannerPulse{
  0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.3); }
}
/* Le décalage suit la hauteur RÉELLE du bandeau, mesurée en JS : une valeur
   écrite en dur laissait un vide sous le bandeau (ou le chevauchait) dès que
   le texte changeait de taille ou passait sur deux lignes.

   Le menu, lui, ne reçoit AUCUN décalage : son `top` de collage se compte
   depuis le bloc de contenu du corps, qui commence déjà sous le bandeau. Lui
   redonner la hauteur du bandeau ajoutait ce décalage une seconde fois — d'où
   la bande noire qui traînait entre le bandeau et le menu. */
body.live-banner-active{ padding-top:var(--live-banner-h, 2.4rem); }
@media (prefers-reduced-motion: reduce){
  .live-banner{ animation:none; }
}
.preview-banner a{color:#1a1400; text-decoration:underline;}
body.preview-mode{padding-top:2.6rem;}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.06; mix-blend-mode:overlay;
}
.fog-layer{
  position:fixed; inset:-10%; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, var(--theme-fog1, rgba(138,18,32,.10)), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 70%, var(--theme-fog2, rgba(74,74,77,.18)), transparent 60%);
  animation: drift 40s ease-in-out infinite alternate;
  transition: background 1s ease;
}
@keyframes drift{
  0%{transform:translate(0,0);}
  100%{transform:translate(-2%,3%);}
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:3;
  box-shadow: inset 0 0 18vw 4vw rgba(0,0,0,.85);
}
/* En mode clair, le vignettage sombre plein écran écrase le fond clair
   et rend le texte illisible par endroits : on l'atténue fortement. */
html[data-mode="light"] .vignette{
  box-shadow: inset 0 0 14vw 2vw rgba(30,24,18,.14);
}
/* Halo de couleur additionnel par thème événementiel, au-dessus du
   vignettage habituel — donne à chaque édition son ambiance propre
   sans toucher au reste de la mise en page. */
.vignette-theme{
  position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:0; transition:opacity .8s ease;
}
body[data-theme] .vignette-theme{opacity:1;}
body[data-theme="halloween"] .vignette-theme{
  background:radial-gradient(ellipse 75% 55% at 50% 0%, rgba(249,115,22,.18), transparent 62%);
}
body[data-theme="noel"] .vignette-theme{
  background:radial-gradient(ellipse 75% 55% at 50% 100%, rgba(147,197,253,.16), transparent 62%);
}
body[data-theme="anniversaire"] .vignette-theme{
  background:radial-gradient(ellipse 85% 50% at 50% 0%, rgba(250,204,21,.13), transparent 62%);
}
body[data-theme="lune-de-sang"] .vignette-theme{
  background:radial-gradient(circle at 50% 12%, rgba(239,68,68,.3), transparent 55%);
  animation: bloodPulse 4.5s ease-in-out infinite;
}
body[data-theme="neon"] .vignette-theme{
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(168,85,247,.2), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(34,211,238,.14), transparent 60%);
}
body[data-theme="ete"] .vignette-theme{
  background:radial-gradient(ellipse 85% 60% at 50% 0%, rgba(251,191,36,.16), transparent 62%);
}
body[data-theme="boite-de-nuit"] .vignette-theme{
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 100%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(ellipse 55% 40% at 50% 50%, rgba(168,85,247,.14), transparent 65%);
  animation: discoGlow 6s ease-in-out infinite;
}
@keyframes bloodPulse{0%,100%{opacity:.72;}50%{opacity:1;}}
/* Halo doux et progressif plutôt qu'un vrai flash stroboscopique — un
   effet lumineux qui change trop vite peut déclencher des crises chez
   les personnes photosensibles, donc on reste sur un fondu lent. */
@keyframes discoGlow{0%,100%{opacity:.75; filter:hue-rotate(0deg);} 50%{opacity:1; filter:hue-rotate(25deg);}}
/* Spots de boîte de nuit : plusieurs taches de couleur qui clignotent
   et se déplacent, chacune avec son propre rythme et décalage pour ne
   jamais clignoter toutes ensemble (jamais plus de ~1 fois/seconde par
   spot — bien sous le seuil de 3 flashs/seconde qui pose un risque
   pour les personnes photosensibles). */
/* Visualiseur circulaire façon NCS : anneau de spectre dessiné sur un
   canvas plein écran pendant que la musique du thème Boîte de nuit joue. */
.club-viz{position:fixed; inset:0; z-index:3; pointer-events:none;}
.club-viz[hidden]{display:none;}
.club-lights{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .6s ease;}
/* Les spots ne s'allument que lorsque la musique est activée (bouton
   « Activer la musique »), pas dès que le thème est choisi. */
body[data-theme="boite-de-nuit"].club-music-active .club-lights{opacity:1;}
.club-light{
  position:absolute; width:36vw; height:36vw; border-radius:50%;
  filter:blur(50px); mix-blend-mode:screen; will-change:transform, opacity;
}
.club-light-1{top:-8%; left:-6%; background:#ec4899; animation:clubBlink 1.8s ease-in-out infinite, clubDrift1 9s ease-in-out infinite;}
.club-light-2{top:-12%; right:-8%; background:#22d3ee; animation:clubBlink 2.1s ease-in-out infinite .4s, clubDrift2 11s ease-in-out infinite;}
.club-light-3{bottom:-14%; left:12%; background:#a855f7; animation:clubBlink 1.6s ease-in-out infinite .8s, clubDrift3 8s ease-in-out infinite;}
.club-light-4{bottom:-10%; right:6%; background:#facc15; animation:clubBlink 2s ease-in-out infinite 1.2s, clubDrift1 10s ease-in-out infinite reverse;}
.club-light-5{top:32%; left:38%; width:26vw; height:26vw; background:#ec4899; animation:clubBlink 1.4s ease-in-out infinite 1.6s, clubDrift2 7s ease-in-out infinite;}
.club-light-6{top:8%; left:44%; width:30vw; height:30vw; background:#34d399; animation:clubBlink 1.9s ease-in-out infinite 1s, clubDrift3 12s ease-in-out infinite reverse;}
@keyframes clubBlink{0%,100%{opacity:.12;} 50%{opacity:.8;}}
@keyframes clubDrift1{0%,100%{transform:translate(0,0);} 50%{transform:translate(6vw,4vh);}}
@keyframes clubDrift2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-5vw,6vh);}}
@keyframes clubDrift3{0%,100%{transform:translate(0,0);} 50%{transform:translate(4vw,-5vh);}}
/* Rayons lumineux qui tournent lentement depuis le haut (façon projecteurs
   de scène). Rotation TRÈS lente (24 s) : aucun flash rapide. */
.club-beams{
  position:absolute; top:-40%; left:50%; width:200vmax; height:200vmax; margin-left:-100vmax;
  mix-blend-mode:screen; pointer-events:none; will-change:transform;
  background:conic-gradient(from 0deg at 50% 20%,
    transparent 0deg, rgba(236,72,153,.16) 5deg, transparent 11deg,
    transparent 42deg, rgba(34,211,238,.15) 47deg, transparent 53deg,
    transparent 86deg, rgba(168,85,247,.16) 91deg, transparent 97deg,
    transparent 130deg, rgba(250,204,21,.13) 135deg, transparent 141deg,
    transparent 180deg, rgba(52,211,153,.13) 185deg, transparent 191deg,
    transparent 230deg, rgba(236,72,153,.14) 235deg, transparent 241deg);
  animation:clubBeams 24s linear infinite;
}
@keyframes clubBeams{to{transform:rotate(360deg);}}
/* Boule à facettes : petite sphère miroir en haut au centre, rotation douce. */
.club-ball{
  position:absolute; top:1.5%; left:50%; width:66px; height:66px; margin-left:-33px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0deg 8deg, rgba(80,100,160,.35) 8deg 16deg),
    radial-gradient(circle at 36% 30%, #f2f5ff, #aeb9e6 34%, #5b6bb0 68%, #2a3160);
  background-blend-mode:overlay, normal; background-size:14px 14px, cover;
  box-shadow:0 0 26px rgba(180,200,255,.55), 0 6px 20px rgba(0,0,0,.5);
  animation:clubBallSpin 10s linear infinite, clubBlink 3.4s ease-in-out infinite;
  opacity:.9;
}
@keyframes clubBallSpin{to{background-position:280px 0, center;}}
@media (max-width: 720px){
  /* Sur petit écran, on allège les effets les plus coûteux (rayons + boule)
     pour éviter les ralentissements ; les spots restent. */
  .club-beams, .club-ball{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .club-lights{display:none;}
}
/* Petit pouls sur les boutons d'action pendant ce thème, pour renforcer
   la sensation d'ambiance qui bouge sans nuire à la précision de clic
   (amplitude minime, rythme lent). */
body[data-theme="boite-de-nuit"] .btn-primary,
body[data-theme="boite-de-nuit"] .live-cta{
  animation: discoButtonPulse 1.8s ease-in-out infinite;
}
@keyframes discoButtonPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.035);}}
@media (prefers-reduced-motion: reduce){
  body[data-theme="boite-de-nuit"] .btn-primary,
  body[data-theme="boite-de-nuit"] .live-cta{ animation:none; }
}

a{color:inherit;}
h1,h2,h3{margin:0; font-family:'Cinzel',serif;}
.eyebrow{
  font-family:'Cinzel',serif; letter-spacing:.28em; text-transform:uppercase;
  font-size:.72rem; color:var(--blood-accessible); font-weight:600;
}
section{position:relative; z-index:4; padding:6rem 1.5rem; max-width:1120px; margin:0 auto;}
.section-head{margin-bottom:2.5rem; text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-top:.6rem; color:var(--bone);}
.divider{
  width:64px; height:2px; margin:1.1rem auto 0; background:var(--blood);
  clip-path: polygon(0 0,100% 0,90% 100%,10% 100%);
}

header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(to bottom, rgba(5,4,4,.92), rgba(5,4,4,.75));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(138,18,32,.35);
}
nav{
  max-width:1120px; margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{
  font-family:'Butcherman',cursive; font-size:1.5rem; letter-spacing:.03em;
  color:var(--bone); text-decoration:none;
  text-shadow:0 0 12px rgba(200,28,52,.5);
}
/* Le fond du bandeau de navigation reste sombre en permanence (voir
   header{}) : sa version de .brand ne doit donc pas suivre le mode
   clair/sombre de la page, contrairement à celle du pied de page. */
header .brand{color:var(--overlay-text);}
.nav-links{display:flex; gap:1.2rem; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--overlay-muted); padding:.3rem 0; position:relative;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--overlay-text);}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--blood-bright);
  transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{width:100%;}
.nav-links a.active{color:var(--overlay-text);}
.nav-links a.active::after{width:100%; background:var(--blood-bright);}

/* Pages virtuelles : le site est découpé en pages (Accueil, Jeu, Clips,
   Communauté, À propos) — seules les sections de la page courante sont
   affichées, avec une petite entrée en fondu au changement. */
.page-hidden{display:none !important;}
main.page-enter > section:not(.page-hidden){animation:pageEnter .35s ease both;}
@keyframes pageEnter{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:none;}
}

.nav-actions{display:flex; align-items:center; gap:.8rem; flex:none;}
.live-badge{
  display:flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.05em;
  border:1px solid var(--overlay-border); padding:.35rem .7rem; border-radius:999px;
  color:var(--overlay-muted);
  white-space:nowrap; flex:none;
}
/* Le récap « Dernier live … » dans le badge est un bonus : on ne l'affiche
   que sur les très grands écrans, sinon il pousse les boutons hors du
   bandeau. L'info reste visible dans la section live plus bas. */
@media (max-width:1240px){
  #liveDuration{display:none;}
}
.live-badge{text-decoration:none; cursor:pointer;}
.live-badge:not(.is-live){pointer-events:none; cursor:default;}
.live-badge.is-live{border-color:var(--blood-bright); color:var(--overlay-text);}
#liveDuration{opacity:.75; font-size:.95em;}
#liveDuration:empty{display:none;}
.btn.live-cta{background:var(--blood-bright); border-color:var(--bone); animation: liveGlow 1.8s ease-in-out infinite;}
@keyframes liveGlow{0%,100%{box-shadow:0 0 0 rgba(200,28,52,.5);} 50%{box-shadow:0 0 22px rgba(200,28,52,.85);}}
.pulse-dot{
  position:relative; width:8px; height:8px; border-radius:50%; background:var(--overlay-muted); flex:none;
}
.is-live .pulse-dot{background:var(--blood-bright);}
.is-live .pulse-dot::before, .is-live .pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--blood-bright); opacity:0;
  animation: terror 2.4s ease-out infinite;
}
.is-live .pulse-dot::after{animation-delay:1.2s;}
@keyframes terror{
  0%{transform:scale(.6); opacity:.7;}
  100%{transform:scale(3.2); opacity:0;}
}
.menu-toggle{display:none;}
.nav-backdrop{display:none;}

/* Verrou de défilement quand le menu tiroir est ouvert. overflow:hidden seul
   est ignoré par Safari iOS : on fige donc le body en position:fixed (le décalage
   top est posé en JS pour conserver la position de lecture). */
body.nav-open{position:fixed; left:0; right:0; width:100%; overflow:hidden;}

/* Sous ~1100px, les 8 liens + le badge + les boutons ne tiennent plus sur une
   seule ligne : on bascule sur le menu burger bien avant le format mobile. */
@media (max-width:1100px){
  .nav-links{
    position:fixed; top:60px; right:0; left:max(30%, calc(100% - 340px)); height:calc(100vh - 60px);
    background:#050404;
    flex-direction:column; padding:1.4rem 1.5rem; gap:0;
    transform:translateX(100%); transition:transform .3s ease;
    border-left:1px solid rgba(138,18,32,.35);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    touch-action:pan-y; z-index:21; box-shadow:-12px 0 32px rgba(0,0,0,.55);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links li{border-bottom:1px solid rgba(138,18,32,.2);}
  .nav-links li:last-child{border-bottom:none;}
  .nav-links a{display:block; padding:1rem .2rem; font-size:.85rem;}
  .nav-links a::after{display:none;}
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; flex:none; background:none; border:1px solid var(--overlay-border); color:var(--overlay-text);
    font-size:1.1rem; cursor:pointer; border-radius:var(--radius); position:relative; z-index:22;
  }
  .nav-backdrop{
    display:block; position:fixed; inset:60px 0 0 0; background:rgba(5,4,4,.65);
    z-index:19; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-backdrop.open{opacity:1; pointer-events:auto;}
}
/* Petits écrans : la rangée de droite (badge + boutons + burger) doit
   pouvoir se compresser sans jamais pousser le compte ni le burger hors de
   l'écran (html a overflow-x:hidden, donc tout débordement à droite masque
   justement ces deux boutons-là, les plus importants). */
@media (max-width:640px){
  nav{padding:.75rem .7rem; gap:.5rem;}
  .nav-actions{gap:.4rem; min-width:0;}
  /* Le badge « Hors ligne » est redondant avec la section live juste en
     dessous : on le masque sur mobile pour libérer la place. Quand Tatou est
     EN DIRECT, on le garde (info importante) mais tronqué. */
  .live-badge:not(.is-live){display:none;}
  .live-badge{padding:.28rem .5rem; min-width:0;}
  .live-badge #liveText{overflow:hidden; text-overflow:ellipsis; max-width:22vw;}
  /* Sélecteurs scopés (.nav-actions …) pour passer DEVANT la règle de base
     .search-btn{width:36px}, définie plus loin dans la feuille : sans ça, à
     égalité de spécificité, c'est la taille 36px qui l'emportait (ordre
     source) et la rangée débordait, masquant le compte et le burger. */
  .nav-actions .search-btn{flex:none; width:34px; height:34px; font-size:.9rem;}
  .nav-actions .menu-toggle{width:34px; height:34px;}
}
/* Très petits écrans : on resserre encore d'un cran pour garantir que le
   compte et le burger restent visibles même avec tous les boutons affichés. */
@media (max-width:400px){
  nav{padding:.7rem .5rem; gap:.3rem;}
  .nav-actions{gap:.22rem;}
  .brand{font-size:1.1rem;}
  .nav-actions .search-btn{width:30px; height:30px; font-size:.8rem;}
  .nav-actions .menu-toggle{width:30px; height:30px; font-size:.95rem;}
  /* En direct : le badge devient un simple point pulsant (sans texte) pour
     ne pas manger la place des boutons sur les écrans les plus étroits. */
  .live-badge.is-live{padding:.28rem; gap:0;}
  .live-badge.is-live #liveText{display:none;}
}

.hero{
  min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem 4rem; position:relative; z-index:4;
}
.hero .eyebrow{margin-bottom:1.1rem;}
.hero h1{
  font-family:'Butcherman',cursive; font-weight:400;
  font-size:clamp(3.2rem,11vw,7rem); line-height:.95;
  color:var(--bone);
  text-shadow:0 0 30px rgba(200,28,52,.55), 0 0 80px rgba(138,18,32,.35);
}
.hero p.tagline{
  max-width:520px; margin:1.4rem auto 0; color:var(--parchment); font-size:1.05rem;
}
.hero-status{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  margin-top:1.3rem;
}
.hero-countdown{
  margin:0; font-size:.92rem; color:var(--parchment);
  border:1px solid rgba(138,18,32,.5); padding:.45rem 1rem; border-radius:var(--radius);
  background:rgba(20,17,16,.6);
}
.hero-countdown strong{color:var(--blood-accessible); font-family:'JetBrains Mono',monospace; font-weight:600;}
.hero-countdown[hidden]{display:none;}
.hero-cal-btn{
  margin-top:0; background:none; border:none; color:var(--fog-light); cursor:pointer;
  font-size:.82rem; text-decoration:underline; text-underline-offset:3px;
}
.hero-cal-btn:hover{color:var(--bone);}
.hero-cal-btn[hidden]{display:none;}
.follower-block{
  margin-top:0; font-size:.88rem; color:var(--parchment);
  display:flex; flex-direction:column; align-items:center; gap:.45rem; min-width:240px;
}
.follower-block[hidden]{display:none;}
.follower-block .goal-bar{width:240px; height:10px; margin-top:0; position:relative;}
/* Léger balayage lumineux sur la barre d'abonnés pour la rendre vivante. */
.follower-block .goal-fill{position:relative; overflow:hidden;}
.follower-block .goal-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%); animation:followerShimmer 2.6s ease-in-out infinite;
}
.follower-block .goal-bar.is-complete{box-shadow:0 0 14px rgba(200,28,52,.6);}
.follower-pct{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--blood-accessible);}
@keyframes followerShimmer{0%{transform:translateX(-100%);} 60%,100%{transform:translateX(220%);}}
@media (prefers-reduced-motion: reduce){
  .follower-block .goal-fill::after{animation:none; display:none;}
}
/* Confettis (célébration ponctuelle, retirés après l'animation). */
.confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;}
.confetti-piece{
  position:absolute; top:-16px; width:9px; height:14px; opacity:.95;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg); opacity:1;}
  100%{transform:translateY(102vh) rotate(720deg); opacity:.9;}
}
.scroll-cue{
  display:flex; align-items:center; justify-content:center; margin:2.6rem auto 0;
  width:34px; height:34px; border:1px solid var(--fog); border-radius:50%;
  color:var(--fog-light); text-decoration:none;
  animation:scrollCueBounce 2.2s ease-in-out infinite;
}
.scroll-cue:hover{border-color:var(--blood-bright); color:var(--bone);}
.scroll-cue svg{width:13px; height:13px; fill:currentColor;}
@keyframes scrollCueBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}
/* Thèmes événementiels : les couleurs d'accent changent selon le thème
   choisi dans l'admin, et des particules décoratives tombent en fond. */
body[data-theme="halloween"]{--blood:#b45309; --blood-bright:#f97316; --ultra:#f59e0b; --theme-fog1:rgba(249,115,22,.14); --theme-fog2:rgba(180,83,9,.16); --blood-accessible:#f97316;}
body[data-theme="noel"]{--blood:#1d4ed8; --blood-bright:#60a5fa; --ultra:#93c5fd; --theme-fog1:rgba(96,165,250,.12); --theme-fog2:rgba(191,219,254,.10); --blood-accessible:#60a5fa;}
body[data-theme="anniversaire"]{--blood:#a16207; --blood-bright:#facc15; --ultra:#fde047; --theme-fog1:rgba(250,204,21,.12); --theme-fog2:rgba(168,85,247,.10); --blood-accessible:#facc15;}
body[data-theme="lune-de-sang"]{--blood:#991b1b; --blood-bright:#ef4444; --ultra:#f87171; --theme-fog1:rgba(239,68,68,.22); --theme-fog2:rgba(153,27,27,.18); --blood-accessible:#ef4444;}
body[data-theme="neon"]{--blood:#6d28d9; --blood-bright:#a855f7; --ultra:#22d3ee; --theme-fog1:rgba(168,85,247,.16); --theme-fog2:rgba(34,211,238,.13); --blood-accessible:#a855f7;}
body[data-theme="ete"]{--blood:#c2410c; --blood-bright:#fb923c; --ultra:#fbbf24; --theme-fog1:rgba(251,146,60,.14); --theme-fog2:rgba(251,191,36,.10); --blood-accessible:#fb923c;}
/* Boîte de nuit : en plus des accents, tous les textes neutres passent
   en néon (rose pâle / lavande / cyan pastel) — contrastes vérifiés
   entre 11:1 et 15.5:1 sur les fonds sombres du thème. */
body[data-theme="boite-de-nuit"]{
  --blood:#a21caf; --blood-bright:#ec4899; --ultra:#22d3ee;
  --theme-fog1:rgba(236,72,153,.16); --theme-fog2:rgba(34,211,238,.14);
  --blood-accessible:#f472b6;
  --bone:#ffd9f3;
  --parchment:#cdb8f5;
  --fog-light:#8fd8e8;
  --fog:#7a4f8f;
}
/* Mode clair : ne touche que les couleurs de surface/texte neutres, les
   accents (--blood-bright, --ultra, les thèmes événementiels ci-dessus)
   restent identiques. Contrastes vérifiés ≥ 4.5:1 pour le texte. */
html[data-mode="light"]{
  --void:#f2ede4;
  --void-deep:#e6ded0;
  --panel:#ffffff;
  --fog:#cbc3b3;
  --fog-light:#6b6255;
  --bone:#201a13;
  --parchment:#443c30;
  --blood-accessible:#9c1728;
  --rare-accessible:#5b3f9e;
}
.theme-canvas{position:fixed; inset:0; z-index:3; pointer-events:none;}
.theme-badge{
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem;
  padding:.35rem .9rem; border:1px solid var(--blood-bright); border-radius:999px;
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--overlay-text); background:rgba(20,17,16,.55); backdrop-filter:blur(4px);
  animation: themeBadgeIn .5s ease;
}
.theme-badge[hidden]{display:none;}
.theme-badge .icon{font-size:.95rem;}
@keyframes themeBadgeIn{
  0%{opacity:0; transform:translateY(-6px);}
  100%{opacity:1; transform:translateY(0);}
}
.club-music-control{margin-bottom:1.1rem;}
.club-music-btn{margin-bottom:0; font-size:.78rem; padding:.5rem 1.1rem;}
.club-music-btn[hidden]{display:none;}
/* Menu déroulant des ambiances : panneau vertical sous le bouton. */
.club-genre-picker{
  display:flex; flex-direction:column; gap:.35rem;
  margin:.5rem auto 0; width:min(260px, 80vw); padding:.5rem;
  background:rgba(20,10,16,.97); border:1px solid rgba(236,72,153,.45);
  border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.5);
  max-height:min(50vh, 320px); overflow-y:auto;
}
.club-genre-picker[hidden]{display:none;}
.club-genre-item{
  display:block; width:100%; text-align:left;
  font-family:'Cinzel',serif; font-size:.76rem; letter-spacing:.04em;
  padding:.55rem .8rem; border-radius:10px; cursor:pointer;
  background:rgba(236,72,153,.1); border:1px solid rgba(236,72,153,.35); color:var(--bone);
}
.club-genre-item:hover{background:rgba(236,72,153,.26); border-color:#ec4899;}
/* Lecteur YouTube utilisé uniquement pour le son d'ambiance du thème
   « Boîte de nuit » : présent dans le DOM mais hors champ, jamais en
   display:none (certains navigateurs coupent la lecture des iframes
   masquées de cette façon). */
#clubMusicWrap{
  position:fixed; width:2px; height:2px; overflow:hidden;
  left:-9999px; top:-9999px; opacity:0; pointer-events:none;
}
.hero-cta{display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; justify-content:center;}

/* Section « En direct » : lecteur intégré quand le stream est actif */
.live-eyebrow{color:var(--blood-accessible) !important;}
.direct-player{
  max-width:900px; margin:0 auto; position:relative; width:100%;
  aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(200,28,52,.45); box-shadow:0 0 30px rgba(200,28,52,.2);
}
.direct-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.direct-tiktok-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; height:100%; padding:2rem; text-align:center;
  background:radial-gradient(circle at 50% 30%, rgba(200,28,52,.22), rgba(11,10,10,.95));
}
.direct-tiktok-card .big{font-family:'Cinzel',serif; font-size:1.5rem; color:var(--bone);}
.direct-tiktok-card p{color:var(--fog-light); font-size:.9rem; max-width:420px;}
.direct-actions{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:1.4rem;}
.direct-note{text-align:center; color:var(--fog-light); font-size:.8rem; margin-top:.9rem;}

/* Chat du live (visible uniquement pendant un direct) */
.live-chat{max-width:900px; margin:1.6rem auto 0; background:linear-gradient(160deg, rgba(20,14,14,.6), rgba(11,10,10,.6)); border:1px solid rgba(138,18,32,.35); border-radius:var(--radius); padding:1rem 1.1rem;}
.live-chat[hidden]{display:none;}
.lc-head{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-accessible); margin-bottom:.7rem;}
.lc-messages{max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:.45rem; margin-bottom:.8rem; overscroll-behavior:contain;}
.lc-msg{font-size:.9rem; line-height:1.35; color:var(--bone); word-break:break-word;}
.lc-msg .lc-author{color:var(--blood-accessible); font-weight:600; margin-right:.4rem;}
.lc-empty{color:var(--fog-light); font-size:.85rem; text-align:center; padding:.6rem 0;}
.lc-form{display:flex; gap:.5rem;}
.lc-form input{flex:1; min-width:0; background:rgba(0,0,0,.35); border:1px solid rgba(138,18,32,.4); border-radius:var(--radius); color:var(--bone); padding:.6rem .8rem; font-size:.9rem;}
.lc-form input:focus{outline:none; border-color:var(--blood-bright);}
.lc-form .btn{flex:none;}
.lc-hint{font-size:.78rem; color:var(--fog-light); margin-top:.5rem; min-height:1em;}
.live-cta-wrap{position:relative; display:inline-block;}
.live-cta-wrap[hidden]{display:none;}
.live-cta-menu{
  position:absolute; top:calc(100% + .6rem); left:50%; transform:translateX(-50%); z-index:10;
  min-width:190px; background:var(--panel); border:1px solid var(--blood); border-radius:var(--radius);
  padding:.5rem; display:flex; flex-direction:column; gap:.35rem; box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.live-cta-menu[hidden]{display:none;}
.live-cta-menu a{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border-radius:var(--radius);
  text-decoration:none; color:var(--bone); font-family:'Cinzel',serif; font-size:.76rem;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--fog);
}
.live-cta-menu a:hover, .live-cta-menu a:focus-visible{border-color:var(--blood-bright); background:rgba(200,28,52,.12);}
.btn{
  font-family:'Cinzel',serif; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.7rem; border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease; display:inline-block;
  border:none; cursor:pointer;
}
.btn:focus-visible{outline:2px solid var(--blood-bright); outline-offset:3px;}
.btn[hidden]{display:none;}
.btn-primary{
  background:var(--blood); color:var(--bone); border:1px solid var(--blood-bright);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,28,52,.35);}
.btn-ghost{background:transparent; border:1px solid var(--fog); color:var(--bone);}
.btn-ghost:hover{border-color:var(--bone); transform:translateY(-2px);}

.news-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(138,18,32,.3);}
.news-item{
  display:grid; grid-template-columns:120px 1fr; gap:1.4rem;
  padding:1.6rem 0; border-bottom:1px solid rgba(138,18,32,.3);
}
.news-item time{
  font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--blood-accessible); letter-spacing:.03em;
}
.news-item h3{font-size:1.05rem; color:var(--bone); margin-bottom:.35rem;}
.news-item p{margin:0; color:var(--parchment); font-size:.94rem;}
@media (max-width:560px){
  .news-item{grid-template-columns:1fr;}
}

.schedule{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.9rem;
}
.day-card{
  background:var(--panel); border:1px solid rgba(138,18,32,.3); padding:1.2rem 1rem;
  text-align:center; border-radius:var(--radius);
}
.day-card.off{opacity:.45;}
.day-card .day{
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog-light);
}
.day-card .time{
  font-family:'JetBrains Mono',monospace; font-size:1.1rem; margin-top:.5rem; color:var(--bone);
}
.day-card .game{font-size:.8rem; color:var(--parchment); margin-top:.3rem;}
.day-card.today{border-color:var(--blood-bright); box-shadow:0 0 0 1px var(--blood-bright);}
.day-card.today .day{color:var(--blood-accessible);}
.day-card.next{border-color:var(--blood-bright); box-shadow:0 0 0 1px var(--blood-bright), 0 0 18px rgba(200,28,52,.25);}
.day-card.next .day{color:var(--blood-accessible);}
.day-card .next-tag{margin-top:.5rem; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blood-accessible);}
.schedule.empty{display:block;}
.schedule-empty{text-align:center; color:var(--fog-light); padding:1rem 0; margin:0;}
.schedule-note{text-align:center; margin-top:1.6rem; font-size:.85rem; color:var(--fog-light);}
.schedule-subscribe{text-align:center; margin-top:1.2rem;}
.schedule-subscribe-hint{font-size:.78rem; color:var(--fog-light); margin-top:.5rem;}

.next-live-banner{
  max-width:560px; margin:0 auto 2rem; text-align:center; background:var(--panel);
  border:1px solid var(--blood-bright); border-radius:var(--radius); padding:1rem 1.4rem;
  font-family:'JetBrains Mono',monospace; font-size:.9rem; color:var(--bone);
}
.next-live-banner strong{color:var(--blood-accessible); font-family:'Cinzel',serif; letter-spacing:.03em;}
.next-live-banner[hidden]{display:none;}
.schedule-exceptions{max-width:600px; margin:1.6rem auto 0; display:grid; gap:.6rem;}
.exception-card{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--panel); border:1px solid rgba(138,18,32,.3); border-radius:var(--radius);
  padding:.7rem 1rem; font-size:.86rem; color:var(--parchment);
}
.exception-card.off{opacity:.6;}
.exception-card .exc-date{font-family:'JetBrains Mono',monospace; color:var(--blood-accessible); white-space:nowrap;}

/* Foire aux questions : accordéon <details>/<summary> */
.faq-list{max-width:720px; margin:0 auto; display:grid; gap:.7rem;}
.faq-item{
  background:var(--panel); border:1px solid rgba(138,18,32,.3); border-radius:var(--radius);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:1rem 1.2rem; font-family:'Cinzel',serif;
  font-size:.95rem; color:var(--bone); display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--blood-accessible); font-size:1.3rem; line-height:1; flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item summary:hover{color:var(--blood-accessible);}
.faq-answer{padding:0 1.2rem 1.1rem; color:var(--parchment); font-size:.9rem; line-height:1.6; white-space:pre-line;}

.perk-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.8rem;
}
.perk{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none; width:120px;
}
.perk-hex{
  width:84px; height:84px;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:var(--panel);
  border:1px solid var(--fog);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.perk-hex svg{width:32px; height:32px; fill:var(--bone);}
.perk:hover .perk-hex, .perk:focus-visible .perk-hex{
  border-color:var(--blood-bright); transform:translateY(-4px) scale(1.04);
  box-shadow:0 10px 26px rgba(200,28,52,.3);
}
.perk-label{
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment);
}
 
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.2rem;
}
.clip{
  position:relative; aspect-ratio:9/13; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(138,18,32,.3);
}
.clip-link{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  text-decoration:none; color:inherit;
}
.clip-link:focus-visible{outline:2px solid var(--blood-bright); outline-offset:-2px;}
.clip .bg{
  position:absolute; inset:0; z-index:0;
  background:var(--clip-grad, linear-gradient(160deg,#2a1414,#0b0a0a));
}
.clip::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent 55%);
}
.clip-info{position:relative; z-index:2; padding:1rem; width:100%;}
.clip-tag{font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--blood-bright);}
.clip-info h3{font-size:.95rem; color:var(--overlay-text); margin-top:.25rem;}
.play-icon{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(231,225,211,.5);
  display:flex; align-items:center; justify-content:center; opacity:.85;
  transition:transform .2s ease, opacity .2s ease;
}
.clip:hover .play-icon, .clip-link:focus-visible .play-icon{transform:translate(-50%,-50%) scale(1.12); opacity:1;}
.play-icon svg{width:16px; height:16px; fill:var(--overlay-text); margin-left:2px;}
.clip:hover{border-color:var(--blood-bright);}
.clip .bg img{width:100%; height:100%; object-fit:cover; display:block;}
.clip.clip-twitch{aspect-ratio:16/9; background:var(--void-deep);}
.clip-twitch iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.clip-twitch .clip-info-twitch{position:absolute; z-index:2; bottom:0; left:0; right:0; padding:.6rem .8rem; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent); }
.clip-twitch .clip-info-twitch h3{font-size:.85rem;}

.featured-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:5;
  background:linear-gradient(135deg,#caa23d,#8a6a1c); color:#1a1408;
  border-radius:999px; padding:.35rem .65rem; font-size:.72rem; font-weight:600;
  font-family:'JetBrains Mono',monospace; box-shadow:0 2px 8px rgba(0,0,0,.4);
  pointer-events:none;
}
.like-btn{
  position:absolute; top:.6rem; right:.6rem; z-index:5;
  display:flex; align-items:center; gap:.35rem;
  background:rgba(5,4,4,.72); border:1px solid rgba(231,225,211,.35); border-radius:999px;
  padding:.35rem .6rem; cursor:pointer; color:var(--overlay-text);
  font-family:'JetBrains Mono',monospace; font-size:.78rem;
  backdrop-filter:blur(2px); transition:border-color .15s ease; user-select:none;
}
.like-btn:hover, .like-btn:focus-visible{border-color:var(--blood-bright);}
.like-btn svg{width:15px; height:15px; fill:var(--overlay-muted); transition:fill .15s ease;}
.like-btn.pulse svg{fill:var(--blood-bright); animation:likePulse .35s ease;}
@keyframes likePulse{0%{transform:scale(1);} 45%{transform:scale(1.4);} 100%{transform:scale(1);}}

.about-grid{
  display:grid; grid-template-columns:280px 1fr; gap:3rem; align-items:start;
}
.portrait{
  aspect-ratio:3/4; background:linear-gradient(160deg,#241212,#0b0a0a);
  border:1px solid var(--blood); position:relative; overflow:hidden;
}
.portrait::after{
  content:"TATOU"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Butcherman',cursive; font-size:2.4rem; color:rgba(231,225,211,.15);
}
.about-bio{color:var(--parchment); font-size:1rem;}
.about-bio h3{color:var(--bone); font-size:1.3rem; margin-bottom:.8rem;}
.stats{margin-top:1.8rem; display:grid; gap:.9rem;}
.stat-row{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:1rem;}
.stat-label{font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog-light);}
.stat-bar{height:6px; background:var(--panel); border:1px solid rgba(138,18,32,.3); position:relative;}
.stat-fill{height:100%; background:var(--blood-bright);}
.follower-chart-wrap{margin-top:1.8rem;}
.follower-chart-wrap h4{
  font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fog-light); margin-bottom:.6rem;
}
.pub-chart-summary{font-size:.8rem; color:var(--fog-light); margin-top:.5rem;}
.iv-wrap{position:relative; margin-top:.5rem;}
.iv-wrap svg{display:block; width:100%; height:auto; overflow:visible; touch-action:none;}
.iv-grid{stroke:rgba(255,255,255,.06); stroke-width:1;}
.iv-axis{fill:var(--fog-light); font-family:'JetBrains Mono',monospace; font-size:9px;}
.iv-line{fill:none; stroke:var(--blood-bright); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.iv-dot{fill:var(--void); stroke:var(--blood-bright); stroke-width:2;}
.iv-cross{stroke:rgba(200,28,52,.5); stroke-width:1; stroke-dasharray:3 3; opacity:0;}
.iv-focus{fill:var(--blood-bright); stroke:var(--void); stroke-width:2; opacity:0;}
.iv-ext{fill:var(--parchment); font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600;}
.iv-bar{fill:rgba(200,28,52,.45); transition:fill .1s ease;}
.iv-bar.iv-best{fill:var(--blood-bright);}
.iv-tip{
  position:absolute; pointer-events:none; transform:translate(-50%,-115%); left:0; top:0;
  background:rgba(8,6,6,.96); border:1px solid rgba(200,28,52,.5); border-radius:6px;
  padding:.3rem .55rem; font-size:.72rem; color:var(--parchment); white-space:nowrap;
  opacity:0; transition:opacity .12s ease; z-index:5; box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.iv-tip b{color:#fff; font-size:.82rem;}
.iv-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0;}
.tarot-card{
  margin-top:1.8rem; padding:1.1rem 1.3rem; border:1px solid rgba(138,18,32,.35); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(138,18,32,.08), transparent); text-align:center;
}
.tarot-card-icon{font-size:1.8rem; line-height:1;}
.tarot-card-name{
  font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blood-bright); margin:.5rem 0 .4rem;
}
.tarot-card-text{font-size:.8rem; color:var(--fog-light); margin:0;}
@media (max-width:680px){
  .about-grid{grid-template-columns:1fr;}
  .portrait{max-width:220px; margin:0 auto;}
}

.donation-goal{
  max-width:600px; margin:0 auto 2.4rem; background:var(--panel); border:1px solid var(--fog);
  border-radius:var(--radius); padding:1.1rem 1.3rem;
}
.donation-goal[hidden]{display:none;}
.goal-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.goal-label{font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone);}
.goal-numbers{font-family:'JetBrains Mono',monospace; font-size:.9rem; color:var(--parchment);}
.goal-numbers strong{color:var(--blood-accessible);}
.goal-bar{
  margin-top:.7rem; height:14px; background:var(--void); border:1px solid var(--fog);
  border-radius:var(--radius); overflow:hidden;
}
.goal-fill{
  height:100%; width:0; background:linear-gradient(90deg, var(--blood), var(--blood-bright));
  box-shadow:0 0 10px rgba(200,28,52,.5); transition:width 1s ease;
}
.goal-done{margin:.6rem 0 0; font-size:.85rem; color:var(--uncommon); text-align:center;}
.goal-done[hidden]{display:none;}
.tiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem;
  max-width:480px; margin:0 auto;
}
.tier{
  background:var(--panel); border:1px solid var(--fog); padding:1.8rem 1.4rem;
  text-decoration:none; color:inherit; display:block; position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
.tier:hover, .tier:focus-visible{transform:translateY(-4px);}
.tier .rarity{
  font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
}
.tier h3{font-size:1.3rem; margin-top:.5rem; color:var(--bone);}
.tier .price{font-family:'JetBrains Mono',monospace; font-size:1.6rem; margin-top:.6rem; display:block;}
.tier p{color:var(--parchment); font-size:.88rem; margin-top:.6rem;}
.tier.uncommon{border-top:3px solid var(--uncommon);}
.tier.uncommon .rarity{color:var(--uncommon);}
.tier.uncommon:hover{border-color:var(--uncommon);}
.tier.rare{border-top:3px solid var(--rare);}
.tier.rare .rarity{color:var(--rare-accessible);}
.tier.rare:hover{border-color:var(--rare);}
.tier.ultra{border-top:3px solid var(--ultra);}
.tier.ultra .rarity{color:var(--ultra);}
.tier.ultra:hover{border-color:var(--ultra);}

.donor-list{list-style:none; margin:0 auto; padding:0; max-width:560px;}
.donor-item{
  display:grid; grid-template-columns:2.4rem 1fr; align-items:center; gap:1rem;
  padding:.9rem 1.1rem; border:1px solid rgba(138,18,32,.3); border-radius:var(--radius);
  margin-top:.7rem; background:var(--panel);
}
.donor-rank{font-family:'Cinzel',serif; font-weight:700; font-size:1.1rem; color:var(--fog-light); text-align:center;}
.donor-item:nth-child(1){border-color:var(--ultra);}
.donor-item:nth-child(1) .donor-rank{color:var(--ultra);}
.donor-item:nth-child(2){border-color:var(--rare);}
.donor-item:nth-child(2) .donor-rank{color:var(--rare-accessible);}
.donor-item:nth-child(3){border-color:var(--uncommon);}
.donor-item:nth-child(3) .donor-rank{color:var(--uncommon);}
.donor-name{color:var(--bone); font-size:.98rem;}
.donor-empty{text-align:center; color:var(--fog-light); font-size:.9rem;}

.forum-new-form, .forum-reply-form{
  max-width:600px; margin:0 auto 2rem; background:var(--panel); border:1px solid rgba(138,18,32,.3);
  border-radius:var(--radius); padding:1.4rem;
}
.forum-input, .forum-textarea{
  width:100%; background:var(--void); border:1px solid var(--fog); color:var(--bone);
  padding:.7rem .9rem; border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:.9rem;
  margin-bottom:.8rem;
}
.forum-input:focus-visible, .forum-textarea:focus-visible{outline:2px solid var(--blood-bright); outline-offset:1px;}
.forum-textarea{resize:vertical; min-height:80px;}
.forum-msg{font-size:.82rem; color:var(--fog-light); margin-top:.6rem; min-height:1.2em;}
.forum-topics{max-width:720px; margin:0 auto; display:grid; gap:.9rem;}
.forum-topic-card{
  display:block; background:var(--panel); border:1px solid rgba(138,18,32,.3); border-radius:var(--radius);
  padding:1.1rem 1.3rem; cursor:pointer; transition:border-color .15s ease;
  text-align:left; width:100%; color:inherit; font:inherit;
}
.forum-topic-card:hover, .forum-topic-card:focus-visible{border-color:var(--blood-bright);}
.forum-topic-title{color:var(--bone); font-size:1.02rem; font-family:'Cinzel',serif;}
.forum-topic-meta{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--fog-light); margin-top:.3rem;}
.forum-topic-excerpt{color:var(--parchment); font-size:.88rem; margin-top:.5rem;}
.forum-empty{text-align:center; color:var(--fog-light); font-size:.9rem;}
.forum-back{
  background:none; border:1px solid var(--fog); color:var(--parchment); padding:.5rem 1rem;
  border-radius:var(--radius); cursor:pointer; font-size:.82rem; margin-bottom:1.4rem;
}
.forum-back:hover{border-color:var(--blood-bright); color:var(--bone);}
.forum-topic-full{
  max-width:600px; margin:0 auto 1.5rem; background:var(--panel); border:1px solid var(--blood);
  border-radius:var(--radius); padding:1.4rem;
}
.forum-topic-full h3{color:var(--bone); font-size:1.2rem;}
.forum-topic-full .forum-topic-meta{margin:.4rem 0 1rem;}
.forum-topic-full p{color:var(--parchment); white-space:pre-wrap; margin:0;}
.forum-replies{max-width:600px; margin:0 auto 1.5rem; display:grid; gap:.8rem;}
.forum-reply{background:var(--void-deep); border:1px solid var(--fog); border-radius:var(--radius); padding:1rem 1.2rem;}
.forum-report-btn{
  background:none; border:none; cursor:pointer; font-size:.72rem; padding:0 .25rem;
  opacity:.4; transition:opacity .15s ease; color:var(--fog-light); vertical-align:baseline;
}
.forum-report-btn:hover{opacity:1;}
.forum-report-btn:disabled{cursor:default; opacity:.8;}
.forum-reply .forum-topic-meta{margin-bottom:.4rem;}
.forum-reply p{color:var(--parchment); white-space:pre-wrap; margin:0;}
.mention{
  color:var(--blood-bright); font-weight:600; background:rgba(200,28,52,.12);
  padding:0 .3rem; border-radius:4px;
}
.link-preview{
  display:flex; gap:.7rem; align-items:center; margin-top:.8rem; padding:.6rem;
  background:var(--void); border:1px solid var(--fog); border-radius:var(--radius);
  text-decoration:none; color:inherit; max-width:360px; transition:border-color .15s ease;
}
.link-preview:hover, .link-preview:focus-visible{border-color:var(--blood-bright);}
.link-preview img{width:64px; height:64px; object-fit:cover; border-radius:4px; flex:none; display:block;}
.link-preview-body{min-width:0;}
.link-preview-platform{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--blood-bright);
  text-transform:uppercase; display:block; letter-spacing:.04em;
}
.link-preview-title{
  font-size:.85rem; color:var(--bone); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; margin-top:.15rem;
}
.mention-suggest{
  position:relative; margin:-.5rem 0 .8rem; background:var(--void); border:1px solid var(--blood-bright);
  border-radius:var(--radius); overflow:hidden; max-height:9rem; overflow-y:auto;
}
.mention-suggest[hidden]{display:none;}
.mention-suggest button{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--bone);
  font:inherit; font-size:.85rem; padding:.5rem .8rem; cursor:pointer;
}
.mention-suggest button:hover, .mention-suggest button.active{background:rgba(200,28,52,.14);}
.react-bar{display:flex; gap:.4rem; margin-top:.7rem;}
.react-btn{
  background:none; border:1px solid var(--fog); border-radius:var(--radius); color:var(--parchment);
  cursor:pointer; font-size:.82rem; padding:.18rem .55rem; transition:border-color .2s ease;
}
.react-btn:hover{border-color:var(--blood-bright);}
.react-btn.reacted{border-color:var(--blood-bright); color:var(--bone); cursor:default;}
.react-count{font-family:'JetBrains Mono',monospace; font-size:.75rem;}

.game-intro{text-align:center; color:var(--parchment); max-width:520px; margin:0 auto 1.8rem; font-size:.95rem;}
.contest-banner{
  /* Placée juste au-dessus du jeu : marge haute normale (elle suivait
     l'intro auparavant, d'où l'ancienne marge négative). */
  max-width:520px; margin:0 auto 1.4rem; text-align:center; background:rgba(217,130,43,.12);
  border:1px solid var(--ultra); border-radius:var(--radius); padding:.9rem 1.2rem;
  color:var(--bone); font-size:.9rem; white-space:pre-line;
}
.contest-banner[hidden]{display:none;}
.contest-banner.winner{
  background:rgba(126,163,76,.1); border-color:var(--uncommon);
  font-family:'Cinzel',serif; letter-spacing:.04em;
}
.game-wrap{display:flex; flex-direction:column; align-items:center; gap:1rem;}
/* Course au Niveau 50 : annonce + deux joueurs de tête */
.level50-race{margin:1.2rem 0; padding:1.1rem 1.2rem; border:1px solid rgba(232,185,35,.4); border-radius:var(--radius); background:linear-gradient(160deg, rgba(232,185,35,.1), rgba(11,10,10,.55));}
.level50-head{display:flex; gap:.8rem; align-items:flex-start;}
.level50-badge{font-size:1.9rem; flex:none; line-height:1;}
.level50-title{font-family:'Cinzel',serif; font-size:1.05rem; color:#ffd45a;}
.level50-desc{font-size:.85rem; color:var(--parchment); margin-top:.25rem; line-height:1.45;}
.level50-leaders{margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgba(232,185,35,.22);}
.level50-leaders-label{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog-light); margin-bottom:.5rem;}
#level50Top{list-style:none; display:flex; flex-direction:column; gap:.45rem; margin:0; padding:0;}
#level50Top li{display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--bone);}
#level50Top li .rk{font-family:'JetBrains Mono',monospace; color:#ffd45a; width:1.5em; flex:none;}
#level50Top li .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#level50Top li .lv{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--fog-light); flex:none;}
#level50Top li.winner{color:#ffd45a; font-weight:600;}
.level50-empty{color:var(--fog-light); font-size:.82rem; list-style:none;}
.level50-me{margin-top:.9rem;}
.level50-me[hidden]{display:none;}
.level50-me-head{display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; color:var(--bone); margin-bottom:.35rem;}
.level50-me-head #level50MePct{font-family:'JetBrains Mono',monospace; color:#ffd45a;}
.level50-me-bar{height:9px; border-radius:5px; background:rgba(255,255,255,.08); border:1px solid rgba(232,185,35,.3); overflow:hidden;}
.level50-me-fill{height:100%; width:0; background:linear-gradient(90deg,#e8b923,#ffd45a); border-radius:5px; transition:width .5s ease;}
.game-name-input{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--fog); color:var(--bone);
  padding:.7rem .9rem; border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:.9rem;
}
.game-name-input:focus-visible{outline:2px solid var(--blood-bright); outline-offset:2px;}
.skillcheck-track{
  position:relative; width:100%; max-width:420px; height:30px;
  background:var(--void); border:1px solid var(--fog); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:box-shadow .15s ease;
}
.skillcheck-track.hit{box-shadow:0 0 0 3px rgba(126,163,76,.6);}
.skillcheck-track.miss{box-shadow:0 0 0 3px rgba(200,28,52,.7);}
.skillcheck-zone{position:absolute; top:0; bottom:0; background:var(--uncommon); opacity:.5;}
.skillcheck-cursor{position:absolute; top:-2px; bottom:-2px; width:4px; background:var(--blood-bright); box-shadow:0 0 8px rgba(200,28,52,.85);}
.game-score{font-family:'JetBrains Mono',monospace; font-size:1.15rem; color:var(--bone);}
.game-hint{font-size:.85rem; color:var(--fog-light); text-align:center; max-width:420px; min-height:1.2em;}
.game-best{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--fog-light);}
.game-best[hidden]{display:none;}

/* Menu des jeux (en haut de la page Jeu) : accès rapide aux 4 jeux. */
.games-hub{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem;
  max-width:640px; margin:0 auto 1.6rem;
}
.games-hub-btn{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.85rem .4rem; cursor:pointer; text-align:center;
  background:linear-gradient(160deg, rgba(40,16,20,.72), rgba(11,10,10,.72));
  border:1px solid rgba(138,18,32,.4); border-radius:var(--radius);
  color:var(--bone); font-family:inherit; transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.games-hub-btn:hover{ transform:translateY(-2px); border-color:var(--blood-bright); background:linear-gradient(160deg, rgba(60,20,26,.8), rgba(16,12,12,.8)); }
.games-hub-btn.active{ border-color:var(--blood-bright); box-shadow:0 0 0 1px var(--blood-bright) inset, 0 6px 18px rgba(200,28,52,.22); }
.ghb-ico{ font-size:1.5rem; line-height:1; }
.ghb-name{ font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.02em; }
.ghb-tag{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fog-light); }
@media (max-width:520px){
  .games-hub{ grid-template-columns:repeat(2, 1fr); gap:.5rem; }
  .ghb-ico{ font-size:1.35rem; }
}

/* La Traque : second mini-jeu (canvas temps réel) */
.traque-wrap{display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.traque-hud{
  display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.9rem; color:var(--bone);
}
.traque-stage{position:relative; width:100%; max-width:640px;}
#traqueCanvas{
  display:block; width:100%; height:auto; background:#0d0b0c;
  border:1px solid rgba(138,18,32,.45); border-radius:var(--radius);
  touch-action:none; /* le doigt pilote le survivant, pas le défilement */
}
.traque-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.7rem; text-align:center; padding:1rem;
  background:rgba(8,6,6,.82); border-radius:var(--radius); backdrop-filter:blur(2px);
}
.traque-overlay[hidden]{display:none;}
.traque-overlay-title{font-family:'Butcherman','Cinzel',serif; font-size:2rem; color:var(--blood-bright); text-shadow:0 0 18px rgba(200,28,52,.6);}
.traque-overlay p{color:var(--parchment); font-size:.9rem; max-width:380px;}
/* Sélecteur de rôle Survivant / Tueur sur l'écran d'accueil du jeu. */
.traque-modes{display:flex; gap:.5rem;}
.traque-mode-btn{
  font-family:'Cinzel',serif; font-size:.82rem; letter-spacing:.03em; cursor:pointer;
  color:var(--parchment); background:rgba(20,10,12,.6);
  border:1px solid var(--fog); border-radius:999px; padding:.45rem .9rem;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.traque-mode-btn:hover{border-color:var(--blood-bright); color:var(--bone);}
.traque-mode-btn.active{border-color:var(--blood-bright); background:rgba(200,28,52,.2); color:var(--bone);}
/* Bouton du Mode Fantôme (course contre son record) */
.traque-ghost-toggle{
  font-family:'Cinzel',serif; font-size:.76rem; letter-spacing:.02em; cursor:pointer;
  color:var(--parchment); background:rgba(20,32,42,.6);
  border:1px solid rgba(120,220,255,.35); border-radius:999px; padding:.4rem .85rem;
  transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.traque-ghost-toggle[hidden]{display:none;}
.traque-ghost-toggle b{color:#9fe8ff;}
.traque-ghost-toggle:hover{border-color:#9fe8ff; color:var(--bone);}
.traque-ghost-toggle.on{
  border-color:#9fe8ff; background:rgba(90,198,230,.18); color:var(--bone);
  box-shadow:0 0 12px rgba(120,220,255,.3);
}
.traque-health{letter-spacing:.15em; font-size:1rem; transition:filter .2s ease;}
.traque-health.hurt{filter:drop-shadow(0 0 6px rgba(200,28,52,.9));}
.traque-stamina{
  width:100%; max-width:640px; height:6px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid rgba(138,18,32,.35);
}
.traque-stamina span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#2b8ad6,#7fd0ff); border-radius:4px;
  transition:width .12s linear, background .2s ease;
}
.traque-stamina span.spent{background:linear-gradient(90deg,#8a1220,#c81c34);}
.traque-sprint-btn{
  position:absolute; right:12px; bottom:12px; width:64px; height:64px; z-index:3;
  border-radius:50%; border:2px solid rgba(127,208,255,.6); font-size:1.7rem; cursor:pointer;
  background:radial-gradient(circle at 40% 30%, rgba(43,138,214,.4), rgba(8,6,6,.4));
  color:#eaf6ff; -webkit-user-select:none; user-select:none; touch-action:none; opacity:.62;
  box-shadow:0 4px 14px rgba(0,0,0,.4); transition:transform .1s ease, opacity .15s ease;
}
.traque-sprint-btn:active{transform:scale(.9); opacity:.95;}
.traque-sprint-btn[hidden]{display:none;}
/* Visible dès qu'on est sur un écran tactile (y compris en paysage, où la
   largeur peut dépasser celle d'un bureau) ; masqué au pointeur fin (souris). */
@media (pointer: fine){ .traque-sprint-btn{display:none;} }
/* Barre d'outils du jeu (au-dessus de l'aire) + plein écran */
.traque-toolbar{width:100%; max-width:640px; display:flex; justify-content:flex-end;}
.traque-tool-btn{
  background:rgba(8,6,6,.55); border:1px solid rgba(138,18,32,.5); color:var(--bone);
  border-radius:8px; padding:.4rem .75rem; font-size:.82rem; font-family:inherit; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.traque-tool-btn:hover{border-color:var(--blood-bright); background:rgba(20,10,12,.7);}
.traque-tool-btn[hidden]{display:none;}
.traque-wrap:fullscreen, .traque-wrap:-webkit-full-screen{
  width:100vw; height:100vh; justify-content:center; padding:1rem; gap:.7rem;
  background:radial-gradient(120% 90% at 50% 0%, rgba(40,8,14,.55), transparent 60%), #050404;
}
.traque-wrap:fullscreen .traque-stage,
.traque-wrap:fullscreen .traque-toolbar,
.traque-wrap:fullscreen .traque-stamina{ max-width:min(96vw, calc((100vh - 150px) * 640 / 420)); }
.traque-wrap:fullscreen .traque-stage{ width:100%; }
.traque-wrap:-webkit-full-screen .traque-stage,
.traque-wrap:-webkit-full-screen .traque-toolbar,
.traque-wrap:-webkit-full-screen .traque-stamina{ max-width:min(96vw, calc((100vh - 150px) * 640 / 420)); }
.traque-wrap:-webkit-full-screen .traque-stage{ width:100%; }
/* Plein écran « CSS » de repli (mobile / iOS où l'API Fullscreen n'existe
   pas sur un <div>) : on couvre tout l'écran à la main. Le canvas est
   MAXIMISÉ (il prend tout l'espace en gardant son ratio 640/420) et le HUD,
   la barre d'endurance et le bouton Quitter passent EN SURIMPRESSION pour
   ne pas rogner la surface de jeu. 100dvh + safe-area pour la barre du
   navigateur et les encoches. */
.traque-wrap.traque-fs-css{
  position:fixed; inset:0; z-index:2000; margin:0; padding:0; gap:0;
  width:100vw; height:100vh; height:100dvh;
  align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, rgba(40,8,14,.55), transparent 60%), #050404;
}
/* Le canvas remplit l'écran en conservant son ratio (paysage). */
.traque-wrap.traque-fs-css .traque-stage{
  width:min(100vw, calc(100dvh * 640 / 420));
  max-width:100vw; max-height:100dvh; margin:0;
}
.traque-wrap.traque-fs-css #traqueCanvas{ width:100%; height:auto; }
/* HUD compact, en pastille, en haut au centre. */
.traque-wrap.traque-fs-css .traque-hud{
  position:fixed; top:calc(env(safe-area-inset-top) + 5px); left:50%; transform:translateX(-50%);
  z-index:3; gap:.9rem; font-size:.78rem; padding:.28rem .8rem;
  background:rgba(8,5,6,.55); border:1px solid rgba(200,28,52,.3); border-radius:999px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); white-space:nowrap;
}
/* Barre d'endurance flottante en bas. */
.traque-wrap.traque-fs-css .traque-stamina{
  position:fixed; bottom:calc(env(safe-area-inset-bottom) + 8px); left:50%; transform:translateX(-50%);
  width:min(62vw, 320px); z-index:3;
}
/* Bouton Quitter → petite pastille flottante en haut à droite. */
.traque-wrap.traque-fs-css .traque-toolbar{
  position:fixed; top:calc(env(safe-area-inset-top) + 4px); right:calc(env(safe-area-inset-right) + 8px);
  z-index:4; margin:0; width:auto;
}
.traque-wrap.traque-fs-css .traque-tool-btn{ font-size:.7rem; padding:.4rem .7rem; }
.traque-wrap.traque-fs-css .traque-msg,
.traque-wrap.traque-fs-css .game-hint{ display:none; }
/* Invite à tourner le téléphone : cachée par défaut, montrée seulement en
   plein écran + portrait (le jeu est en paysage). */
.traque-rotate-hint{ display:none; }
.traque-wrap.traque-fs-css .traque-rotate-hint{
  position:fixed; inset:0; z-index:5; flex-direction:column; gap:1rem;
  align-items:center; justify-content:center; text-align:center;
  color:var(--parchment); background:#050404; padding:2rem;
}
.traque-rotate-emoji{ font-size:3.4rem; animation:traque-rotate-wobble 1.8s ease-in-out infinite; }
.traque-rotate-hint p{ font-family:'Cinzel',serif; font-size:1rem; line-height:1.5; color:var(--bone); }
.traque-rotate-exit{
  margin-top:.6rem; cursor:pointer;
  font-family:'Cinzel',serif; font-size:.82rem; letter-spacing:.04em;
  color:var(--bone); background:rgba(200,28,52,.16);
  border:1px solid var(--blood-bright); border-radius:999px; padding:.55rem 1.1rem;
  -webkit-tap-highlight-color:transparent;
}
.traque-rotate-exit:hover, .traque-rotate-exit:focus-visible{ background:rgba(200,28,52,.3); }
@keyframes traque-rotate-wobble{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(90deg); } }
@media (prefers-reduced-motion: reduce){ .traque-rotate-emoji{ animation:none; } }
@media (orientation: landscape){
  /* En paysage : on joue, on masque l'invite de rotation. */
  .traque-wrap.traque-fs-css .traque-rotate-hint{ display:none; }
}
@media (orientation: portrait){
  /* En portrait : on masque le jeu et on invite à tourner (le bouton
     Quitter reste accessible pour ressortir sans tourner). */
  .traque-wrap.traque-fs-css .traque-stage,
  .traque-wrap.traque-fs-css .traque-hud,
  .traque-wrap.traque-fs-css .traque-stamina{ visibility:hidden; }
  .traque-wrap.traque-fs-css .traque-rotate-hint{ display:flex; }
}
body.traque-fs-lock{ overflow:hidden; }

/* Générateur de build DBD */
.build-gen{display:flex; flex-direction:column; align-items:center; gap:1.2rem; max-width:640px; margin:0 auto;}
.build-roles{margin-bottom:0;}
.build-card{
  width:100%; background:linear-gradient(160deg, rgba(28,14,16,.7), rgba(11,10,10,.7));
  border:1px solid rgba(138,18,32,.4); border-radius:var(--radius); padding:1.5rem 1.4rem;
}
.build-killer{
  display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem;
  padding-bottom:1.1rem; border-bottom:1px solid rgba(138,18,32,.28);
}
.build-killer .build-avatar{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  background:radial-gradient(circle at 40% 30%, rgba(200,28,52,.35), rgba(11,10,10,.9));
  border:1px solid rgba(200,28,52,.5);
}
.build-killer .build-role-label{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-accessible);}
.build-killer .build-killer-name{font-family:'Cinzel',serif; font-size:1.35rem; color:var(--bone); line-height:1.1;}
.build-perks{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
.perk-chip{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem;
  background:rgba(0,0,0,.3); border:1px solid rgba(138,18,32,.28); border-radius:var(--radius);
  transition:transform .25s ease, border-color .2s ease;
}
.perk-chip .perk-num{
  width:24px; height:24px; flex:none; border-radius:50%; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,28,52,.18); color:var(--blood-accessible); border:1px solid rgba(200,28,52,.4);
}
.perk-chip .perk-name{font-size:.9rem; color:var(--bone); line-height:1.25;}
.build-card.rolling .perk-chip{opacity:.5;}
.build-actions{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center;}
@media (max-width:560px){ .build-perks{grid-template-columns:1fr;} }
.game-level{width:100%; max-width:320px; margin-top:.3rem;}
.game-level[hidden]{display:none;}
.game-level-head{display:flex; justify-content:space-between; gap:.6rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--parchment);}
.game-level-bar{
  margin-top:.35rem; height:8px; background:var(--void); border:1px solid var(--fog);
  border-radius:var(--radius); overflow:hidden;
}
/* Grande barre d'XP placée tout en haut du jeu : plus large, plus haute et
   plus lisible que la version compacte. */
.game-level-top{max-width:560px; width:100%; margin:0 auto 1.4rem;}
.game-level-top .game-level-head{font-size:1.05rem; letter-spacing:.02em;}
.game-level-top .game-level-head #gameLevelText{font-family:'Cinzel',serif; color:var(--bone); font-weight:600;}
.game-level-top .game-level-bar{margin-top:.6rem; height:18px; border-radius:99px;}
.game-level-top .game-level-fill{border-radius:99px;}
.game-level-top .game-level-hint{margin-top:.5rem; font-size:.8rem;}
.game-level-fill{
  height:100%; width:0; background:linear-gradient(90deg, var(--blood), var(--blood-bright));
  box-shadow:0 0 8px rgba(200,28,52,.5); transition:width .6s ease;
}
.game-level-hint{margin:.3rem 0 0; font-size:.72rem; color:var(--fog-light); text-align:center;}

/* Défis quotidiens du mini-jeu */
/* Calendrier de connexion (7 jours à bonus croissant) dans le profil. */
.login-calendar{margin-top:1rem;}
.login-calendar[hidden]{display:none;}
.lc-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:.3rem; margin-top:.4rem;}
.lc-day{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.4rem .1rem; border-radius:8px; text-align:center;
  background:var(--void); border:1px solid var(--fog);
}
.lc-day .lc-d{font-size:.56rem; letter-spacing:.03em; color:var(--fog-light); text-transform:uppercase;}
.lc-day .lc-xp{font-family:'JetBrains Mono',monospace; font-size:.6rem; color:var(--fog-light);}
.lc-day.done{border-color:rgba(126,163,76,.5); background:rgba(126,163,76,.1);}
.lc-day.done .lc-xp{color:#8fce5a;}
.lc-day.today{border-color:var(--blood-bright); background:rgba(200,28,52,.16); box-shadow:0 0 0 1px var(--blood-bright) inset; animation:lcPulse 1.8s ease-in-out infinite;}
.lc-day.today .lc-d,.lc-day.today .lc-xp{color:var(--bone);}
.lc-day.upcoming{opacity:.6;}
@keyframes lcPulse{0%,100%{box-shadow:0 0 0 1px var(--blood-bright) inset, 0 0 4px rgba(200,28,52,.3);} 50%{box-shadow:0 0 0 1px var(--blood-bright) inset, 0 0 12px rgba(200,28,52,.55);}}
@media (prefers-reduced-motion: reduce){ .lc-day.today{animation:none;} }
.lc-hint{margin:.5rem 0 0; font-size:.72rem; color:var(--fog-light); text-align:center;}
.lc-hint b{color:#e8b923;}

/* Carte profil : en-tête avec bouton d'édition + repli/dépli. */
.player-profile-headtext{flex:1; min-width:0;}
.profile-edit-btn,.profile-collapse-btn{
  background:none; border:1px solid var(--fog); border-radius:8px; cursor:pointer;
  color:var(--bone); font-size:.9rem; line-height:1; padding:.3rem .45rem; flex:none;
}
.profile-edit-btn:hover,.profile-collapse-btn:hover{border-color:var(--blood-bright);}
.profile-edit-btn[hidden]{display:none;}
.player-profile-body[hidden]{display:none;}
/* Profil enrichi : bio, tueur préféré, clip épinglé. */
.profile-extra{margin:.2rem 0 .6rem;}
.profile-extra[hidden]{display:none;}
.profile-bio{margin:.4rem 0; font-size:.85rem; line-height:1.5; color:var(--parchment); font-style:italic;}
.profile-fav{font-size:.8rem; color:var(--bone); margin:.2rem 0;}
.profile-pinned{
  display:inline-block; margin-top:.35rem; font-size:.8rem; color:var(--bone);
  text-decoration:none; border:1px solid rgba(200,28,52,.4); border-radius:8px; padding:.3rem .6rem;
}
.profile-pinned:hover{border-color:var(--blood-bright); background:rgba(200,28,52,.12);}
/* Page d'édition du profil (plein écran). */
.profile-edit-page{
  position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:rgba(6,4,5,.82); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  overflow-y:auto;
}
.profile-edit-page[hidden]{display:none;}
body.pep-open{overflow:hidden;}
.pep-panel{
  width:min(460px, 96vw); max-height:90vh; overflow-y:auto;
  background:var(--panel); border:1px solid rgba(200,28,52,.4); border-radius:var(--radius);
  padding:1.3rem 1.4rem; box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.pep-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem;}
.pep-head h2{margin:0; font-size:1.2rem;}
.pep-close{background:none; border:none; color:var(--fog-light); font-size:1.2rem; cursor:pointer; line-height:1;}
.pep-close:hover{color:var(--bone);}
.pep-label{display:block; font-size:.78rem; letter-spacing:.04em; color:var(--fog-light); margin:.8rem 0 .3rem;}
.pep-label .forum-input,.pep-label .forum-textarea{margin-top:.25rem;}
.pep-count{color:var(--fog); font-size:.7rem;}
.pep-msg{margin:.6rem 0 0; font-size:.78rem; color:var(--uncommon); min-height:1em;}
.pep-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem;}
.pep-actions .btn{width:auto;}

/* Fil d'activité de l'accueil */
.activite-liste{display:flex; flex-direction:column; gap:.3rem;}
.activite-item{
  display:flex; align-items:baseline; gap:.55rem; padding:.5rem .7rem;
  border:1px solid var(--fog); border-radius:var(--radius); background:rgba(255,255,255,.02);
  font-size:.85rem; line-height:1.4;
}
.activite-icone{flex:none;}
.activite-texte{flex:1; min-width:0;}
.activite-texte b{color:var(--bone);}
.activite-quand{flex:none; font-size:.72rem; color:var(--fog-light); white-space:nowrap;}
@media (max-width:520px){
  .activite-item{flex-wrap:wrap;}
  .activite-quand{width:100%; text-align:right;}
}

/* Sécurité du compte : appareils connectés et suppression du compte. */
.pep-security{margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--fog);}
.pep-sec-title{font-family:'Cinzel',serif; font-size:.95rem; color:var(--bone); margin:1.2rem 0 .3rem;}
.pep-sec-title:first-child{margin-top:0;}
.pep-sec-title.danger{color:var(--blood-accessible);}
.pep-sec-hint{font-size:.76rem; color:var(--fog-light); margin:.2rem 0 .6rem; line-height:1.5;}
.pep-device{
  display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; justify-content:space-between;
  padding:.45rem .6rem; margin-bottom:.35rem; font-size:.78rem;
  border:1px solid var(--fog); border-radius:var(--radius); background:rgba(255,255,255,.02);
}
.pep-device.courant{border-color:var(--uncommon);}
.pep-device-meta{color:var(--fog-light); font-size:.72rem;}
.pep-danger{margin-top:.4rem;}
.pep-danger summary{
  cursor:pointer; font-size:.8rem; color:var(--blood-accessible);
  padding:.4rem 0; list-style:none;
}
.pep-danger summary::-webkit-details-marker{display:none;}
.pep-danger summary::before{content:"▸ "; }
.pep-danger[open] summary::before{content:"▾ "; }
.magic-btn.danger{border-color:var(--blood); color:var(--blood-accessible);}
.magic-btn.danger:disabled{opacity:.45; cursor:not-allowed;}

/* Barre de niveau flottante (page Jeu) : toujours visible, non interactive. */
.floating-level{
  position:fixed; z-index:1500; pointer-events:none;
  left:max(10px, env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.5rem;
  background:rgba(12,8,10,.88); border:1px solid rgba(200,28,52,.4); border-radius:99px;
  padding:.38rem .72rem; box-shadow:0 4px 16px rgba(0,0,0,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--bone);
  max-width:min(72vw, 300px);
}
.floating-level[hidden]{display:none;}
.fl-lvl{color:var(--blood-bright); font-weight:700; white-space:nowrap;}
.fl-bar{width:96px; max-width:34vw; height:6px; background:rgba(255,255,255,.13); border-radius:99px; overflow:hidden;}
.fl-fill{display:block; height:100%; width:0; background:linear-gradient(90deg,#c81c34,#ff5c7a); border-radius:99px; transition:width .4s ease;}
.fl-xp{color:var(--fog-light); white-space:nowrap;}
/* Masquée pendant le plein écran de La Traque (repli CSS). */
body.traque-fs-lock .floating-level{display:none;}

.daily-challenges{width:100%; max-width:340px; margin-top:.4rem;}
.daily-challenges[hidden]{display:none;}
/* Défis propres à un jeu (sous La Traque / le Rythme) : centrés sous le jeu. */
.game-challenges{margin-left:auto; margin-right:auto; margin-top:1.1rem;}
.daily-challenges-title{
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fog-light); text-align:center; margin-bottom:.5rem;
}
.daily-challenge-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.daily-challenge-list.collapsed .dc-extra{display:none;}
.dc-toggle{display:block; width:100%; margin-top:.55rem; background:rgba(255,255,255,.03);
  border:1px dashed var(--fog); color:var(--fog-light); border-radius:8px; padding:.5rem;
  font-size:.8rem; letter-spacing:.03em; cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s;}
.dc-toggle:hover{border-color:var(--blood-bright); color:var(--bone);}
.dc-toggle[hidden]{display:none;}
.daily-challenge{
  background:var(--void); border:1px solid rgba(138,18,32,.28); border-radius:var(--radius); padding:.55rem .7rem;
}
.daily-challenge.done{border-color:var(--uncommon);}
.daily-challenge-head{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  font-size:.78rem; color:var(--parchment);
}
.daily-challenge.done .daily-challenge-head{color:var(--bone);}
.daily-challenge-xp{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--blood-accessible); flex:none;}
.daily-challenge.done .daily-challenge-xp{color:var(--uncommon);}
.daily-challenge-bar{margin-top:.4rem; height:5px; background:#0b0a0a; border-radius:99px; overflow:hidden;}
.daily-challenge-fill{height:100%; width:0; background:linear-gradient(90deg, var(--blood), var(--blood-bright)); transition:width .5s ease;}
.daily-challenge.done .daily-challenge-fill{background:var(--uncommon);}
.daily-challenge-toast{
  margin-top:.6rem; text-align:center; font-family:'Cinzel',serif; font-size:.82rem;
  color:var(--uncommon); animation:dcToast 3.5s ease forwards;
}
@keyframes dcToast{0%{opacity:0; transform:translateY(6px);} 12%,80%{opacity:1; transform:none;} 100%{opacity:0;}}
.daily-challenge-toast.weekly{color:#e8b923;}
/* Défis de la semaine : accent doré pour les distinguer du défi du jour. */
.weekly-challenges .daily-challenges-title{color:#e8b923;}
.weekly-badge{
  display:inline-block; margin-left:.35rem; font-family:'JetBrains Mono',monospace;
  font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle;
  color:#1a1206; background:#e8b923; border-radius:99px; padding:.1rem .45rem;
}
.weekly-challenges .daily-challenge-fill{background:linear-gradient(90deg,#e8b923,#ffd75e);}

/* Carte « Mon profil » du mini-jeu */
.player-profile{
  width:100%; max-width:360px; margin:1.4rem auto 0; background:var(--panel);
  border:1px solid rgba(138,18,32,.3); border-radius:var(--radius); padding:1.1rem 1.2rem;
}
.player-profile[hidden]{display:none;}
/* ===== Thèmes de la carte de profil (personnalisable) ===== */
.player-profile.pcard-themed{ position:relative; overflow:hidden; }
.player-profile.pcard-themed::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, var(--pc-a), var(--pc-b));
}
.player-profile.pcard-themed::after{
  content:""; position:absolute; top:0; left:0; right:0; height:120px; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -30%, var(--pc-a), transparent 70%); opacity:.14;
}
.pcard-theme-brume{ --pc-a:#6a4fb0; --pc-b:#21a0e6; border-color:rgba(120,90,200,.5)!important; }
.pcard-theme-sang{ --pc-a:#ff2d2d; --pc-b:#7a1020; border-color:rgba(200,40,50,.5)!important; }
.pcard-theme-givre{ --pc-a:#7de3ff; --pc-b:#2f7fa0; border-color:rgba(120,220,255,.5)!important; }
.pcard-theme-toxique{ --pc-a:#8ce25a; --pc-b:#2f7a2f; border-color:rgba(140,226,90,.5)!important; }
.pcard-theme-or{ --pc-a:#ffd75e; --pc-b:#b8860b; border-color:rgba(232,185,35,.5)!important; }
.pcard-theme-vide{ --pc-a:#b06bff; --pc-b:#3a1a5a; border-color:rgba(176,107,255,.5)!important; }
/* Sélecteur de thème dans le formulaire d'édition de profil */
.pep-themes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.45rem; }
.pep-theme-swatch{
  flex:1 1 84px; min-width:78px; cursor:pointer; color:#fff; font-family:inherit; font-size:.72rem; font-weight:700;
  border:2px solid transparent; border-radius:10px; padding:.5rem .4rem; text-align:center;
  background:linear-gradient(135deg, var(--pc-a,#3a3340), var(--pc-b,#14101a));
  text-shadow:0 1px 3px rgba(0,0,0,.6); transition:transform .1s ease, border-color .15s ease;
}
.pep-theme-swatch.pep-theme-none{ background:linear-gradient(135deg,#2a2530,#14101a); }
.pep-theme-swatch:hover{ transform:translateY(-1px); }
.pep-theme-swatch.active{ border-color:#fff; box-shadow:0 0 10px rgba(255,255,255,.25); }
.player-profile-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem;}
.player-profile-avatar{border-radius:50%; border:1px solid var(--fog); flex:none;}
.player-profile-avatar[hidden]{display:none;}
.player-profile-name{font-family:'Cinzel',serif; font-size:1.05rem; color:var(--bone);}
.player-profile-title{font-family:'Cinzel',serif; font-size:.72rem; color:var(--blood-bright); letter-spacing:.02em; margin-top:.15rem;}
.player-profile-title[hidden]{display:none;}
.player-profile-avatar{transition:border-color .3s ease, box-shadow .3s ease;}
.player-profile-sub{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--fog-light); margin-top:.15rem;}
.player-streak{color:#f0a13c;}
.player-streak[hidden]{display:none;}
.player-profile-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:.9rem;}
.player-profile-stat{text-align:center; background:var(--void); border-radius:var(--radius); padding:.55rem .3rem;}
.player-profile-stat .v{font-family:'JetBrains Mono',monospace; font-size:1.1rem; color:var(--bone); display:block;}
.player-profile-stat .l{font-size:.64rem; color:var(--fog-light); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem; display:block;}
.player-division{margin-bottom:.9rem; background:var(--void); border:1px solid var(--fog); border-radius:var(--radius); padding:.6rem .7rem;}
.player-division[hidden]{display:none;}
.player-division-top{display:flex; align-items:center; gap:.5rem; margin-bottom:.45rem;}
.player-division-badge{font-size:1.15rem; line-height:1;}
.player-division-name{font-family:'Cinzel',serif; font-size:.9rem; color:var(--bone);}
.player-division-rank{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--fog-light);}
.player-division-bar{height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden;}
.player-division-bar > span{display:block; height:100%; border-radius:4px; transition:width .5s ease;}
.player-division-next{margin:.4rem 0 0; font-size:.64rem; color:var(--fog-light); text-align:center;}
/* Prestige : encadré doré avec étoiles gagnées + bouton d'accomplissement. */
.player-prestige{margin-bottom:.9rem; background:linear-gradient(140deg, rgba(60,44,8,.55), rgba(20,14,2,.55)); border:1px solid rgba(230,190,80,.4); border-radius:var(--radius); padding:.65rem .7rem; box-shadow:inset 0 0 18px rgba(230,190,80,.08);}
.player-prestige[hidden]{display:none;}
.prestige-top{display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; flex-wrap:wrap;}
.prestige-badge{font-size:1.2rem; line-height:1; filter:drop-shadow(0 0 5px rgba(255,205,90,.6));}
.prestige-title{font-family:'Cinzel',serif; font-size:.92rem; color:#f2d789; letter-spacing:.02em;}
.prestige-stars{margin-left:auto; font-size:.95rem; letter-spacing:.06em; filter:drop-shadow(0 0 4px rgba(255,205,90,.5));}
.prestige-stars-empty{color:rgba(230,190,80,.45);}
/* ===== Quiz du jour ===== */
.quiz-card{max-width:660px; margin:0 auto; border:1px solid var(--fog); background:var(--void-deep); border-radius:var(--radius); padding:1.1rem 1.2rem;}
.quiz-state{margin:0 0 .6rem; font-size:.82rem; color:var(--fog-light); text-align:center;}
.quiz-q{padding:.9rem 0; border-top:1px solid rgba(138,18,32,.25);}
.quiz-q:first-child{border-top:none; padding-top:.2rem;}
.quiz-q-theme{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blood-accessible);}
.quiz-q-title{margin:.25rem 0 0; font-size:.94rem; color:var(--bone);}
.quiz-q-extrait{margin:.3rem 0 0; font-size:.82rem; color:var(--parchment); font-style:italic;}
.quiz-choices{display:grid; gap:.4rem; margin-top:.6rem;}
.quiz-choice{
  text-align:left; font:inherit; font-size:.85rem; cursor:pointer; color:var(--parchment);
  border:1px solid var(--fog); background:var(--void); border-radius:var(--radius); padding:.55rem .75rem;
}
.quiz-choice:hover{border-color:var(--blood-bright); color:var(--bone);}
.quiz-choice[aria-pressed="true"]{border-color:var(--blood-bright); background:rgba(200,28,52,.16); color:var(--bone);}
.quiz-choice.juste{border-color:var(--uncommon); background:rgba(126,163,76,.16); color:#dbe9c4;}
.quiz-choice.faux{border-color:var(--blood); background:rgba(200,28,52,.16); color:#f2c7cd;}
.quiz-card .btn{width:100%; margin-top:1rem;}
.quiz-card .btn[hidden]{display:none;}

/* ===== Annuaire des membres ===== */
.membres-bar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center; margin:.4rem 0 .8rem;}
.membres-search{
  font:inherit; font-size:.85rem; color:var(--bone); background:var(--void-deep);
  border:1px solid var(--fog); border-radius:var(--radius); padding:.5rem .8rem; min-width:220px; flex:1 1 220px; max-width:340px;
}
.membres-search:focus{outline:none; border-color:var(--blood-bright);}
.membres-sort{display:flex; gap:.35rem; flex-wrap:wrap;}
.membres-sort button{
  font:inherit; font-size:.76rem; cursor:pointer; color:var(--parchment);
  border:1px solid var(--fog); background:none; border-radius:var(--radius); padding:.4rem .7rem;
}
.membres-sort button:hover{border-color:var(--blood-bright); color:var(--bone);}
.membres-sort button[aria-pressed="true"]{border-color:var(--blood-bright); background:rgba(200,28,52,.14); color:var(--bone);}
.membres-count{text-align:center; font-size:.76rem; color:var(--fog-light); margin:0 0 .8rem;}
.membres-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem;}
.membre-card{
  display:block; text-decoration:none; border:1px solid var(--fog); background:var(--void-deep);
  border-radius:var(--radius); padding:.75rem .85rem; transition:border-color .15s ease;
}
.membre-card:hover{border-color:var(--blood-bright);}
.membre-nom{font-family:'Cinzel',serif; font-size:.95rem; color:var(--bone); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.membre-titre{display:block; font-size:.72rem; color:var(--blood-accessible); margin-top:.1rem;}
.membre-meta{display:block; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--fog-light); margin-top:.35rem;}
.membres-vide{grid-column:1/-1; text-align:center; color:var(--fog-light); font-size:.85rem; padding:1.5rem 0;}
/* « On écoute quoi ? » — le morceau que le bot Discord passe en vocal */
.rp-live{
  margin-top:.6rem; padding-top:.6rem; border-top:1px solid rgba(138,18,32,.28);
  font-size:.74rem; color:var(--parchment); line-height:1.5;
}
.rp-live[hidden]{display:none;}
.rp-live-title{color:#d3b6ff; font-weight:700;}
.rp-live-link{
  display:inline-block; margin-top:.35rem; font-size:.72rem; text-decoration:none;
  color:#efe6ff; border:1px solid rgba(88,101,242,.7); background:rgba(88,101,242,.2);
  border-radius:var(--radius); padding:.28rem .6rem;
}
.rp-live-link:hover{background:rgba(88,101,242,.36);}
/* Badge de Dévotion affiché à côté des pseudos (classements, forum) */
.devotion-tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.04em;
  color:#f2d789; border:1px solid rgba(230,190,80,.45); border-radius:999px;
  padding:.02rem .34rem; margin-left:.3rem; vertical-align:middle; white-space:nowrap;
}
/* Progression vers la prochaine Dévotion */
.devotion-bar{height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin:.5rem 0 .1rem;}
.devotion-fill{height:100%; border-radius:4px; background:linear-gradient(90deg, rgba(230,190,80,.55), #f2d789); transition:width .5s ease;}
.prestige-next{margin:.35rem 0 0; font-size:.66rem; color:#d8c48a; text-align:center;}
.prestige-btn{width:100%; margin-top:.25rem; background:linear-gradient(135deg,#e6b84f,#c8912a); border:none; color:#241a04; font-weight:700; box-shadow:0 3px 14px rgba(220,170,60,.35);}
.prestige-btn:hover:not(:disabled){filter:brightness(1.08);}
.prestige-btn:disabled{opacity:.7; cursor:default;}
.player-history{margin-bottom:.9rem;}
.player-history[hidden]{display:none;}
.player-history-head{font-size:.7rem; color:var(--fog-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;}
.player-history-head span{color:var(--bone); text-transform:none; letter-spacing:0; margin-left:.3rem;}
#profileHistoryChart{background:var(--void); border:1px solid var(--fog); border-radius:var(--radius); padding:.5rem .55rem;}
#profileHistoryChart svg{display:block;}
.player-profile-badges-head{display:flex; align-items:center; justify-content:space-between; font-size:.7rem; color:var(--fog-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.55rem;}
.player-profile-badges-head b{color:var(--bone); font-family:'JetBrains Mono',monospace;}
.player-profile-badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:.5rem;}
.player-badge{
  display:flex; flex-direction:column; align-items:center; gap:.22rem; text-align:center;
  background:var(--void); border:1px solid var(--fog); border-radius:var(--radius); padding:.5rem .3rem;
  filter:grayscale(1); opacity:.4; cursor:default; transition:transform .12s ease;
}
.player-badge.earned{filter:none; opacity:1; border-color:var(--blood-bright); box-shadow:0 0 8px rgba(200,28,52,.3);}
.player-badge.earned:hover{transform:translateY(-2px);}
.player-badge .pb-icon{font-size:1.25rem; line-height:1;}
.player-badge .pb-name{font-size:.56rem; line-height:1.15; color:var(--fog-light); text-transform:uppercase; letter-spacing:.02em;}
.player-badge.earned .pb-name{color:var(--bone);}
.player-badge .pb-prog{font-family:'JetBrains Mono',monospace; font-size:.56rem; color:var(--fog-light);}
.player-badge.earned .pb-prog{color:var(--blood-bright);}
.player-badge .pb-rarity{font-size:.5rem; letter-spacing:.02em; color:var(--fog); margin-top:.05rem;}
/* Succès rare (≤ 10 % des joueurs) : liseré et éclat dorés. */
.player-badge.rare{border-color:#e8b923; box-shadow:0 0 10px rgba(232,185,35,.4);}
.player-badge.rare .pb-rarity{color:#e8b923; font-weight:700;}
.player-badge .pb-rarity.rare{color:#e8b923;}
/* Cosmétiques déblocables (cadre / titre / skin) */
#profileCosmetics{margin-top:1.1rem;}
#profileCosmetics[hidden]{display:none;}
.cosmetic-row{margin-top:.7rem;}
.cosmetic-row-label{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fog-light); margin-bottom:.35rem;}
.cosmetic-chips{display:flex; flex-wrap:wrap; gap:.4rem;}
.cosmetic-chip{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  font-family:inherit; font-size:.72rem; color:var(--bone);
  background:var(--void); border:1px solid var(--fog); border-radius:99px; padding:.32rem .7rem;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.cosmetic-chip:hover{transform:translateY(-1px); border-color:var(--blood-bright);}
.cosmetic-chip.active{border-color:var(--blood-bright); background:rgba(200,28,52,.16); box-shadow:0 0 0 1px var(--blood-bright) inset;}
.cosmetic-chip.locked{opacity:.5; cursor:not-allowed; color:var(--fog-light);}
.cosmetic-chip.locked:hover{transform:none; border-color:var(--fog);}
.cosmetic-dot{width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 5px currentColor;}
/* Cadre d'avatar animé (Flamme / Champion). */
.player-profile-avatar.cosmetic-frame-anim{animation:cosmeticFrameGlow 1.8s ease-in-out infinite;}
@keyframes cosmeticFrameGlow{
  0%,100%{box-shadow:0 0 0 2px var(--frame-col), 0 0 6px var(--frame-col);}
  50%{box-shadow:0 0 0 2px var(--frame-col), 0 0 16px var(--frame-col);}
}
@media (prefers-reduced-motion: reduce){ .player-profile-avatar.cosmetic-frame-anim{animation:none;} }
/* ===== Portefeuille d'Éclats + Boutique ===== */
.profile-wallet{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .8rem;}
.profile-wallet[hidden]{display:none;}
.wallet-frag{
  display:inline-flex; align-items:center; gap:.35rem; font-family:'JetBrains Mono',monospace;
  font-size:.82rem; font-weight:700; color:#7de3ff; background:rgba(33,120,180,.16);
  border:1px solid rgba(93,190,240,.45); border-radius:99px; padding:.34rem .8rem;
  box-shadow:0 0 12px rgba(60,170,230,.18) inset;
}
.wallet-boost{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700; color:#ffd75e;
  background:rgba(232,185,35,.14); border:1px solid rgba(232,185,35,.5); border-radius:99px; padding:.34rem .7rem;
}
.boutique[hidden]{display:none;}
/* Hors connexion : pastille discrète dans la barre du haut. */
.offline-pill{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.04em;
  color:var(--parchment); background:rgba(217,130,43,.12);
  border:1px solid var(--ultra); border-radius:999px; padding:.2rem .55rem;
}
.offline-pill[hidden]{display:none;}
@media (max-width:640px){ .offline-pill{font-size:.6rem; padding:.15rem .4rem;} }

/* ── Le Rituel du Sang (toile de l'Entité) ───────────────────────────
   La toile est dessinée sur un canvas carré ; le flanc droit montre le
   nœud survolé et la liste des nœuds accessibles (utilisable au clavier,
   contrairement au canvas). */
.rituel{margin-top:1rem;}
.rituel-intro{margin:.1rem 0 .7rem; font-size:.72rem; color:var(--fog-light); line-height:1.5;}
.rituel-plateau{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(190px,.85fr); gap:.9rem; align-items:start;}
@media (max-width:760px){ .rituel-plateau{grid-template-columns:1fr;} }
.rituel-toile{
  position:relative; aspect-ratio:1/1; border:1px solid var(--fog); border-radius:12px; overflow:hidden;
  background:radial-gradient(circle at 50% 45%, rgba(138,18,32,.16), transparent 62%), var(--void);
}
.rituel-toile canvas{display:block; width:100%; height:100%;}
.rituel-souffle{
  position:absolute; bottom:.5rem; left:.4rem; right:.4rem; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--blood-accessible);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.rituel-souffle.on{opacity:1;}
.rituel-flanc{display:flex; flex-direction:column; gap:.6rem;}
.rituel-detail{background:var(--void); border:1px solid var(--fog); border-radius:12px; padding:.7rem;}
.rituel-nom{margin:0 0 .15rem; font-family:'Cinzel',serif; font-size:.95rem; color:var(--bone);}
.rituel-rarete{margin:0 0 .35rem; font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; min-height:1em;}
.rituel-desc{margin:0; font-size:.76rem; color:var(--parchment); line-height:1.45; min-height:2.9em;}
.rituel-liste{display:flex; flex-direction:column; gap:.28rem; max-height:220px; overflow-y:auto;}
.rituel-noeud{
  display:flex; align-items:center; gap:.45rem; width:100%; text-align:left;
  background:var(--void); border:1px solid var(--fog); border-radius:8px; color:var(--bone);
  font-family:inherit; font-size:.76rem; padding:.4rem .5rem; cursor:pointer;
}
.rituel-noeud:hover, .rituel-noeud:focus-visible{border-color:var(--blood-bright); background:rgba(200,28,52,.1);}
.rituel-noeud[disabled]{opacity:.45; cursor:not-allowed;}
.rituel-ic{flex:none; font-size:.9rem;}
.rituel-cout{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:#7de3ff; white-space:nowrap;}
.rituel-vide{margin:0; font-size:.74rem; color:var(--fog-light);}
.rituel-reset{width:100%; font-size:.74rem; padding:.5rem;}

.boutique{margin-top:1rem;}
.boutique-intro{margin:.1rem 0 .7rem; font-size:.72rem; color:var(--fog-light); line-height:1.5;}
.boutique-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem;}
.boutique-item{
  display:flex; flex-direction:column; gap:.4rem; background:var(--void);
  border:1px solid var(--fog); border-radius:12px; padding:.7rem;
}
.boutique-item.owned{border-color:rgba(93,190,240,.5); background:rgba(33,120,180,.08);}
/* Article ciblé par un lien direct (?article=…) : il pulse quelques secondes
   pour qu'on le repère tout de suite dans la grille. */
.boutique-item-focus{border-color:var(--blood-bright); animation:boutiqueFocus 1.1s ease-in-out 3;}
@keyframes boutiqueFocus{
  0%, 100%{box-shadow:0 0 0 0 rgba(200,28,52,0);}
  50%{box-shadow:0 0 0 6px rgba(200,28,52,.35);}
}
@media (prefers-reduced-motion: reduce){
  .boutique-item-focus{animation:none; box-shadow:0 0 0 4px rgba(200,28,52,.35);}
}
.boutique-item-head{display:flex; align-items:center; gap:.4rem;}
.boutique-item-icon{font-size:1.05rem;}
.boutique-item-name{font-size:.82rem; font-weight:700; color:var(--bone);}
.boutique-item-desc{margin:0; font-size:.68rem; color:var(--fog-light); line-height:1.45; flex:1;}
.boutique-buy{
  font-family:inherit; font-size:.74rem; font-weight:700; color:var(--bone); cursor:pointer;
  background:rgba(200,28,52,.16); border:1px solid var(--blood-bright); border-radius:8px; padding:.4rem .5rem;
  transition:background .15s ease, transform .1s ease;
}
.boutique-buy:hover:not(:disabled){background:rgba(200,28,52,.3); transform:translateY(-1px);}
.boutique-buy:disabled{opacity:.45; cursor:not-allowed;}
.boutique-owned{
  display:inline-block; text-align:center; font-size:.74rem; font-weight:700; color:#7de3ff;
  border:1px solid rgba(93,190,240,.45); border-radius:8px; padding:.4rem .5rem;
}
.boutique-buy s{opacity:.6; font-weight:400; margin-right:.15rem;}
/* ===== Codex des Tueurs (collection débloquée par niveau) ===== */
.codex[hidden]{display:none;}
.codex-intro{margin:.1rem 0 .7rem; font-size:.72rem; color:var(--fog-light); line-height:1.5;}
.codex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.5rem;}
.codex-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  aspect-ratio:1; padding:.4rem; border-radius:12px; text-align:center; font-family:inherit;
  border:1px solid var(--fog); background:var(--void); cursor:default;
}
.codex-tile.unlocked{cursor:pointer; border-color:rgba(200,28,52,.4); background:rgba(200,28,52,.07); transition:transform .1s ease, border-color .15s ease;}
.codex-tile.unlocked:hover{transform:translateY(-1px); border-color:var(--blood-bright);}
.codex-tile.unlocked.open{border-color:var(--blood-bright); box-shadow:0 0 10px rgba(200,28,52,.3);}
.codex-tile.locked{opacity:.55; filter:grayscale(.6);}
.codex-ico{font-size:1.5rem; line-height:1;}
.codex-name{font-size:.58rem; font-weight:700; color:var(--bone); line-height:1.1;}
.codex-lvl{font-size:.58rem; font-family:'JetBrains Mono',monospace; color:var(--fog-light);}
.codex-detail{
  margin-top:.7rem; padding:.7rem .8rem; border-radius:10px;
  background:rgba(200,28,52,.08); border:1px solid rgba(200,28,52,.3);
}
.codex-detail-name{font-family:'Cinzel',serif; font-weight:700; color:var(--bone); margin-bottom:.35rem;}
.codex-detail p{margin:.25rem 0; font-size:.74rem; color:var(--parchment); line-height:1.5;}
.codex-detail b{color:#ff8a9a;}
/* ===== Boutique du jour (rotation quotidienne remisée) ===== */
.boutique-item{position:relative;}
.boutique-item.on-sale{border-color:rgba(232,145,35,.55); background:rgba(232,145,35,.07);}
.boutique-sale-tag{
  position:absolute; top:-8px; right:-6px; font-size:.62rem; font-weight:800; color:#0c080c;
  background:linear-gradient(135deg,#ffbf47,#e8901c); border-radius:6px; padding:.1rem .35rem;
  box-shadow:0 2px 6px rgba(0,0,0,.4); letter-spacing:.02em;
}
.daily-shop{
  margin:.2rem 0 .9rem; padding:.8rem .9rem; border-radius:14px;
  background:linear-gradient(160deg, rgba(232,145,35,.16), rgba(12,8,12,.5));
  border:1px solid rgba(232,145,35,.45);
}
.daily-shop-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
  font-family:'Cinzel',serif; font-weight:700; font-size:.9rem; color:var(--bone);
}
.daily-shop-head b{color:#ffbf47;}
.daily-shop-timer{font-family:'JetBrains Mono',monospace; font-size:.74rem; color:#ffbf47; font-weight:700;}
.daily-shop-list{display:flex; flex-wrap:wrap; gap:.45rem; margin:.6rem 0 .4rem;}
.daily-shop-chip{
  display:flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border-radius:10px;
  background:var(--void); border:1px solid rgba(232,145,35,.35); font-size:.74rem;
}
.daily-shop-chip.owned{opacity:.65; border-color:rgba(93,190,240,.4);}
.daily-shop-ico{font-size:.95rem;}
.daily-shop-name{font-weight:700; color:var(--bone);}
.daily-shop-price{font-size:.72rem; color:var(--fog-light);}
.daily-shop-price s{opacity:.6; margin-right:.15rem;}
.daily-shop-chip .boutique-owned{padding:.1rem .35rem; font-size:.66rem; border:none;}
.daily-shop-hint{margin:.3rem 0 0; font-size:.66rem; color:var(--fog-light); line-height:1.45;}
/* ===== Missions de bienvenue (activation des nouveaux) ===== */
.welcome-missions{
  margin:0 auto 1.2rem; max-width:520px; padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(33,120,180,.14), rgba(12,8,12,.55));
  border:1px solid rgba(93,190,240,.4); border-radius:14px;
}
.welcome-missions[hidden]{display:none;}
.wm-head{display:flex; align-items:center; justify-content:space-between; font-family:'Cinzel',serif; font-weight:700; font-size:1rem; color:var(--bone);}
.wm-head b{color:#7de3ff; font-family:'JetBrains Mono',monospace;}
.wm-intro{margin:.35rem 0 .7rem; font-size:.72rem; color:var(--fog-light); line-height:1.5;}
.wm-list{display:flex; flex-direction:column; gap:.45rem;}
.wm-item{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .65rem;
  background:rgba(255,255,255,.04); border:1px solid var(--fog); border-radius:10px;
}
.wm-item.ready{border-color:rgba(232,185,35,.55); box-shadow:0 0 0 1px rgba(232,185,35,.3) inset;}
.wm-item.done{opacity:.6;}
.wm-check{font-size:1rem; flex:none;}
.wm-label{flex:1; font-size:.82rem; color:var(--bone);}
.wm-todo{font-size:.72rem; color:var(--fog-light); font-family:'JetBrains Mono',monospace;}
.wm-got{font-size:.74rem; color:#7de3ff;}
.wm-claim{
  font-family:inherit; font-size:.74rem; font-weight:700; color:#1a1013; cursor:pointer;
  background:linear-gradient(90deg,#e8b923,#ffd75e); border:none; border-radius:8px; padding:.34rem .7rem;
  box-shadow:0 0 10px rgba(232,185,35,.3); transition:transform .1s ease, filter .15s ease;
}
.wm-claim:hover{transform:translateY(-1px); filter:brightness(1.08);}
/* ===== Parrainage ===== */
.referral-card{
  margin:0 auto 1.2rem; max-width:520px; padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(138,18,32,.16), rgba(12,8,12,.55));
  border:1px solid rgba(200,28,52,.4); border-radius:14px;
}
.referral-card[hidden]{display:none;}
.ref-head{font-family:'Cinzel',serif; font-weight:700; font-size:1rem; color:var(--bone);}
.ref-intro{margin:.35rem 0 .8rem; font-size:.74rem; color:var(--parchment); line-height:1.5;}
.ref-intro b{color:#ffd75e; font-family:'JetBrains Mono',monospace;}
.ref-link-row{display:flex; gap:.5rem; align-items:stretch;}
.ref-link-input{
  flex:1; min-width:0; font-family:'JetBrains Mono',monospace; font-size:.74rem;
  color:var(--bone); background:rgba(0,0,0,.35); border:1px solid var(--fog);
  border-radius:8px; padding:.45rem .6rem;
}
.ref-copy{
  flex:none; font-family:inherit; font-size:.74rem; font-weight:700; color:#1a1013; cursor:pointer;
  background:linear-gradient(90deg,#c81c34,#e8455c); border:none; border-radius:8px; padding:.45rem .8rem;
  transition:transform .1s ease, filter .15s ease; white-space:nowrap;
}
.ref-copy:hover{transform:translateY(-1px); filter:brightness(1.08);}
.ref-stats{display:flex; gap:1.2rem; margin-top:.75rem;}
.ref-stat{font-size:.74rem; color:var(--fog-light);}
.ref-stat b{color:var(--bone); font-family:'JetBrains Mono',monospace; font-size:.9rem;}
/* ===== Coffre de la semaine (quêtes hebdo) ===== */
.weekly-chest{
  margin:0 auto 1.2rem; max-width:520px; padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(232,185,35,.14), rgba(12,8,12,.55));
  border:1px solid rgba(232,185,35,.45); border-radius:14px;
}
.weekly-chest[hidden]{display:none;}
.wc-head{display:flex; align-items:center; justify-content:space-between; font-family:'Cinzel',serif; font-weight:700; font-size:1rem; color:var(--bone);}
.wc-head b{color:#ffd75e; font-family:'JetBrains Mono',monospace;}
.wc-bar{height:9px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden; margin:.6rem 0;}
.wc-bar span{display:block; height:100%; background:linear-gradient(90deg,#e8b923,#ffd75e); transition:width .4s ease;}
.wc-reward{font-size:.78rem; color:var(--parchment); margin-bottom:.7rem;}
.wc-reward b{color:#ffd75e; font-family:'JetBrains Mono',monospace;}
.wc-todo{font-size:.76rem; color:var(--fog-light); font-style:italic;}
.wc-claim{
  display:block; width:100%; font-family:'Cinzel',serif; font-weight:700; font-size:.92rem; color:#1a1013; cursor:pointer;
  background:linear-gradient(90deg,#e8b923,#ffd75e); border:none; border-radius:10px; padding:.6rem;
  box-shadow:0 0 14px rgba(232,185,35,.35); transition:transform .1s ease, filter .15s ease;
}
.wc-claim:hover{transform:translateY(-1px); filter:brightness(1.08);}
.wc-claim:disabled{opacity:.6; cursor:default; transform:none;}
/* ===== Cauchemar de la semaine (bannière) ===== */
.nightmare-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; width:100%;
  margin:0 auto 1rem; max-width:640px; padding:.7rem 1rem; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--bone);
  background:linear-gradient(120deg, rgba(60,20,80,.5), rgba(120,20,40,.4));
  border:1px solid rgba(176,107,255,.45); border-radius:12px;
  transition:transform .1s ease, box-shadow .18s ease, border-color .18s ease;
}
.nightmare-banner[hidden]{display:none;}
.nightmare-banner:hover{ transform:translateY(-1px); border-color:#b06bff; box-shadow:0 0 16px rgba(176,107,255,.3); }
.nb-tag{ font-family:'Cinzel',serif; font-weight:700; font-size:.76rem; color:#d9b3ff; letter-spacing:.02em; }
.nb-main{ font-size:.86rem; }
.nb-main b{ color:#ffd75e; }
.nb-flavor{ flex-basis:100%; font-size:.72rem; color:var(--fog-light); font-style:italic; }
/* ===== Coffre quotidien gratuit ===== */
.daily-chest{
  margin:0 auto 1.2rem; max-width:520px; padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(120,220,255,.13), rgba(12,8,12,.55));
  border:1px solid rgba(120,220,255,.42); border-radius:14px;
}
.daily-chest[hidden]{display:none;}
.dc-head{display:flex; align-items:center; gap:.5rem; font-family:'Cinzel',serif; font-weight:700; font-size:1rem; color:var(--bone);}
.dc-badge{
  font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:800; letter-spacing:.04em;
  color:#0c1a20; background:linear-gradient(135deg,#9fe8ff,#5ec6e6); border-radius:6px; padding:.1rem .4rem;
}
.dc-sub{font-size:.78rem; color:var(--parchment); margin:.5rem 0 .7rem; line-height:1.5;}
.dc-sub b{color:#9fe8ff; font-family:'JetBrains Mono',monospace;}
.dc-open{
  display:block; width:100%; font-family:'Cinzel',serif; font-weight:700; font-size:.92rem; color:#0c1a20; cursor:pointer;
  background:linear-gradient(90deg,#5ec6e6,#9fe8ff); border:none; border-radius:10px; padding:.6rem;
  box-shadow:0 0 14px rgba(120,220,255,.35); transition:transform .1s ease, filter .15s ease;
}
.dc-open:hover{transform:translateY(-1px); filter:brightness(1.08);}
.dc-open:disabled{opacity:.6; cursor:default; transform:none;}
.dc-timer{font-family:'JetBrains Mono',monospace; font-size:.76rem; color:#9fe8ff; text-align:center;}
/* ===== Événement communautaire « Boss » ===== */
.boss-event{
  margin:0 auto 1.2rem; max-width:520px; padding:1.1rem 1.15rem;
  background:linear-gradient(160deg, rgba(138,18,32,.24), rgba(8,6,8,.7));
  border:1px solid var(--blood-bright); border-radius:14px;
  box-shadow:0 0 24px rgba(200,28,52,.14) inset;
}
.boss-event[hidden]{display:none;}
.boss-head{display:flex; align-items:center; gap:.55rem;}
.boss-icon{font-size:1.7rem; line-height:1; filter:drop-shadow(0 0 6px rgba(200,28,52,.6));}
.boss-title{font-family:'Cinzel',serif; font-size:1.02rem; color:var(--parchment);}
.boss-title b{color:var(--bone);}
.boss-blurb{margin:.4rem 0 .7rem; font-size:.76rem; color:var(--fog-light); font-style:italic; line-height:1.5;}
.boss-hpbar{
  position:relative; height:22px; border-radius:11px; overflow:hidden;
  background:rgba(0,0,0,.45); border:1px solid rgba(200,28,52,.5); margin-top:.5rem;
}
.boss-hpfill{
  position:absolute; inset:0 auto 0 0; height:100%;
  background:linear-gradient(90deg,#8a1220,#c81c34,#e8455c);
  transition:width .5s ease; border-radius:11px 0 0 11px;
}
.boss-hpbar.dead .boss-hpfill{background:var(--fog);}
.boss-hptext{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700;
  color:var(--overlay-text); text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.boss-sub{margin-top:.4rem; font-size:.7rem; color:var(--fog-light); text-align:center;}
.boss-strike-btn{
  display:block; width:100%; margin:.8rem 0 .3rem; padding:.6rem; cursor:pointer;
  font-family:'Cinzel',serif; font-weight:700; font-size:.95rem; color:var(--overlay-text);
  background:linear-gradient(90deg,#8a1220,#c81c34); border:1px solid var(--blood-bright);
  border-radius:10px; box-shadow:0 0 14px rgba(200,28,52,.35);
  transition:transform .1s ease, filter .15s ease;
}
.boss-strike-btn:hover{transform:translateY(-1px); filter:brightness(1.12);}
.boss-strike-btn:disabled{opacity:.6; cursor:default; transform:none;}
.boss-hint, .boss-victory{
  margin:.8rem 0 .3rem; padding:.55rem .7rem; border-radius:10px; text-align:center;
  font-size:.8rem; line-height:1.4;
}
.boss-hint{background:rgba(255,255,255,.05); border:1px solid var(--fog); color:var(--parchment);}
.boss-victory{background:rgba(232,185,35,.14); border:1px solid rgba(232,185,35,.5); color:#ffd75e; font-weight:600;}
.boss-victory b{color:#fff;}
.boss-top-title{margin-top:.9rem; font-size:.74rem; font-weight:700; color:var(--parchment);}
.boss-top{list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem;}
.boss-top li{
  display:flex; align-items:center; gap:.6rem; font-size:.8rem;
  background:rgba(255,255,255,.03); border-radius:8px; padding:.35rem .55rem;
}
.boss-rank{width:1.2rem; text-align:center; color:var(--blood-accessible); font-family:'JetBrains Mono',monospace; font-weight:700;}
.boss-cname{flex:1; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.boss-dmg{color:var(--fog-light); font-family:'JetBrains Mono',monospace;}
.boss-empty{justify-content:center; color:var(--fog-light); font-style:italic;}
/* ===== Rythme vertical des blocs de la page Jeu ===== */
/* Espacement homogène entre les grands blocs (jeu, profil, passe, course,
   objectif, classements) pour une meilleure hiérarchie visuelle. */
#jeu > .player-profile,
#jeu > .battle-pass,
#jeu > .level50-race,
#jeu > .community-goal,
#jeu > .game-leaderboard{ margin-top:1.4rem; }
/* ===== Sections repliables de la carte de joueur ===== */
.collapsible-head{position:relative; cursor:pointer; user-select:none; padding-right:1.7rem;}
.sec-chevron{
  position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(0deg);
  background:none; border:none; color:var(--fog-light); cursor:pointer;
  font-size:.8rem; line-height:1; padding:.2rem .35rem; transition:transform .18s ease;
}
.sec-chevron:hover{color:var(--bone);}
.collapsible.collapsed .sec-chevron{transform:translateY(-50%) rotate(-90deg);}
.collapsible.collapsed > *:not(.collapsible-head){display:none !important;}
@media (prefers-reduced-motion: reduce){ .sec-chevron{transition:none;} }
/* ===== Passe de saison « Toile de l'Entité » ===== */
.battle-pass{
  margin:1.4rem 0 0; padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(40,16,30,.55), rgba(12,8,12,.6));
  border:1px solid rgba(176,58,91,.4); border-radius:14px;
}
.battle-pass[hidden]{display:none;}
.pass-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;}
.pass-title{font-family:'Cinzel',serif; font-weight:700; font-size:1rem; color:var(--bone);}
.pass-premium-buy{
  font-family:inherit; font-size:.74rem; font-weight:700; color:#1a1013; cursor:pointer;
  background:linear-gradient(90deg,#e8b923,#ffd75e); border:none; border-radius:99px; padding:.4rem .85rem;
  box-shadow:0 0 12px rgba(232,185,35,.35); transition:transform .1s ease, filter .15s ease;
}
.pass-premium-buy:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.08);}
.pass-premium-buy:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
.pass-premium-on{font-size:.74rem; font-weight:700; color:#ffd75e;}
.pass-progress{height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin:.7rem 0 .4rem;}
.pass-progress span{display:block; height:100%; background:linear-gradient(90deg,#b03a5b,#e8b923); box-shadow:0 0 10px rgba(200,28,52,.5);}
.pass-sub{font-size:.72rem; color:var(--fog-light); line-height:1.4;}
.pass-sub b{color:#ffd75e;}
.pass-track-legend{display:flex; gap:1rem; margin:.7rem 0 .3rem; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fog-light);}
.pass-track{display:flex; gap:.5rem; overflow-x:auto; padding:.3rem .1rem .5rem; scrollbar-width:thin;}
.pass-tier{
  flex:0 0 auto; width:96px; display:flex; flex-direction:column; gap:.35rem;
  background:rgba(255,255,255,.03); border:1px solid var(--fog); border-radius:10px; padding:.45rem;
}
.pass-tier.reached{border-color:rgba(232,185,35,.45);}
.pass-tier-num{
  text-align:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.9rem; color:var(--bone);
  display:flex; flex-direction:column; align-items:center; line-height:1.1;
}
.pass-tier-xp{font-size:.56rem; color:var(--fog-light); font-weight:400;}
.pass-reward{
  display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center;
  border-radius:8px; padding:.35rem .2rem; min-height:56px; justify-content:center;
}
.pass-reward.prem{background:rgba(232,185,35,.08); border:1px solid rgba(232,185,35,.22);}
.pass-reward.free{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.pass-reward.ready{box-shadow:0 0 0 1px var(--blood-bright) inset; animation:passPulse 1.6s ease-in-out infinite;}
.pass-reward.claimed{opacity:.55;}
.pass-reward-label{font-size:.62rem; color:var(--bone); line-height:1.2;}
.pass-claim{
  font-family:inherit; font-size:.6rem; font-weight:700; color:var(--bone); cursor:pointer;
  background:rgba(200,28,52,.2); border:1px solid var(--blood-bright); border-radius:6px; padding:.2rem .4rem;
}
.pass-claim:hover{background:rgba(200,28,52,.36);}
.pass-got{font-size:.72rem; color:#7de3ff;}
.pass-locked{font-size:.58rem; color:var(--fog-light);}
@keyframes passPulse{0%,100%{box-shadow:0 0 0 1px var(--blood-bright) inset;}50%{box-shadow:0 0 8px 1px rgba(200,28,52,.5) inset;}}
@media (prefers-reduced-motion: reduce){ .pass-reward.ready{animation:none;} }
.player-profile-hint{margin:.9rem 0 0; font-size:.72rem; color:var(--fog-light); text-align:center;}
.player-profile-hint[hidden]{display:none;}
.record-banner{
  font-family:'Cinzel',serif; font-weight:700; color:var(--blood-bright); font-size:1.25rem;
  letter-spacing:.18em; text-shadow:0 0 18px rgba(200,28,52,.8), 0 0 40px rgba(138,18,32,.5);
}
.record-banner[hidden]{display:none;}
/* Bannière de montée de niveau (transitoire, apparaît puis disparaît). */
.levelup-banner{
  position:fixed; left:50%; top:26%; transform:translate(-50%,-50%);
  z-index:60; pointer-events:none;
  font-family:'Cinzel',serif; font-weight:700; font-size:1.9rem; letter-spacing:.06em;
  color:#ffe14d; text-shadow:0 0 18px rgba(232,185,35,.85), 0 0 40px rgba(200,28,52,.5);
  padding:.5rem 1.4rem; border-radius:14px;
  background:linear-gradient(160deg, rgba(40,20,10,.72), rgba(12,8,6,.72));
  border:1px solid rgba(232,185,35,.5);
  animation:levelupPop 2.6s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes levelupPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  12%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  22%{ transform:translate(-50%,-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .levelup-banner{ animation-duration:0s; animation:none; } }
.record-banner.pop{animation:recordPop 2.6s ease forwards;}
.record-banner.decisive{
  color:var(--uncommon); font-size:1.05rem;
  text-shadow:0 0 16px rgba(126,163,76,.8), 0 0 36px rgba(126,163,76,.4);
}
@keyframes recordPop{
  0%{transform:scale(.3) rotate(-4deg); opacity:0;}
  14%{transform:scale(1.25) rotate(2deg); opacity:1;}
  28%{transform:scale(1) rotate(0deg);}
  80%{opacity:1;}
  100%{opacity:0;}
}
.game-modes{display:flex; gap:.6rem; justify-content:center;}
.game-mode-btn{
  background:none; border:1px solid var(--fog); border-radius:var(--radius); color:var(--parchment);
  cursor:pointer; font-size:.85rem; padding:.4rem .9rem; transition:all .2s ease;
}
.game-mode-btn:hover{border-color:var(--blood-bright);}
.game-mode-btn.active{border-color:var(--blood-bright); background:rgba(200,28,52,.12); color:var(--bone);}
.content-tabs{display:flex; gap:.6rem; justify-content:center; margin-bottom:2.2rem; flex-wrap:wrap;}
.tab-btn{
  background:none; border:1px solid var(--fog); border-radius:var(--radius); color:var(--parchment);
  cursor:pointer; font-size:.8rem; padding:.55rem 1.2rem; transition:all .2s ease;
  font-family:'Cinzel',serif; letter-spacing:.08em; text-transform:uppercase;
}
.tab-btn:hover{border-color:var(--blood-bright);}
.tab-btn.active{border-color:var(--blood-bright); background:rgba(200,28,52,.12); color:var(--bone);}
.subsection-title{
  text-align:center; font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fog-light); margin:3.4rem 0 1.6rem; position:relative; padding-top:2.2rem;
}
.subsection-title::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:2px; background:var(--blood);
  clip-path: polygon(0 0,100% 0,90% 100%,10% 100%);
}
.game-mode-hint{font-size:.8rem; color:var(--fog-light); text-align:center; max-width:420px; margin:-.3rem 0 0;}
.game-mode-hint[hidden]{display:none;}
#gameLbDaily h3{color:var(--ultra);}
#gameLbHof h3{color:var(--fog-light);}
#gameLbGeneral:not([hidden]) + #gameLbDaily{margin-top:1.2rem;}
#gameLbHof:not(:first-child){margin-top:1.2rem;}
#gameLbGeneral[hidden], #gameLbDaily[hidden], #gameLbHof[hidden], #gameLbLevel[hidden]{display:none;}
.lb-date{font-family:'JetBrains Mono',monospace; color:var(--fog-light); font-size:.78rem; min-width:3.4rem;}
.game-sound-toggle{
  background:none; border:none; color:var(--fog-light); cursor:pointer; font-size:1.05rem;
  padding:.2rem .5rem; border-radius:var(--radius);
}
.game-sound-toggle:hover{color:var(--bone);}
.game-leaderboard{
  max-width:520px; margin:2.2rem auto 0; background:var(--panel); border:1px solid var(--fog);
  border-radius:var(--radius); padding:1.1rem 1.3rem;
}
.game-leaderboard[hidden]{display:none;}
.game-leaderboard-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem;}
.game-leaderboard-head .game-leaderboard-title{flex:1; margin:0; text-align:left;}
.game-leaderboard-body[hidden]{display:none;}

/* Objectif communautaire : jauge collective remplie par tout le monde */
.community-goal{
  max-width:520px; margin:2rem auto 0; text-align:center;
  background:linear-gradient(160deg, rgba(28,14,16,.55), rgba(11,10,10,.55));
  border:1px solid rgba(200,28,52,.35); border-radius:var(--radius); padding:1.2rem 1.3rem;
}
.community-goal[hidden]{display:none;}
.community-goal.reached{border-color:var(--blood-bright); box-shadow:0 0 18px rgba(200,28,52,.25);}
.cg-head{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-accessible);}
.cg-label{font-family:'Cinzel',serif; font-size:1.15rem; color:var(--bone); margin:.35rem 0 .8rem;}
.cg-bar{height:12px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden;}
.cg-bar span{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--blood), var(--blood-bright)); transition:width .8s ease;}
.cg-numbers{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--fog-light); margin-top:.6rem;}
.cg-reward{font-size:.85rem; color:var(--parchment); margin-top:.6rem;}
.cg-reward[hidden]{display:none;}
.game-leaderboard h3{
  font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blood-accessible); margin:0 0 .7rem; text-align:center;
}
.game-leaderboard ol{list-style:none; margin:0; padding:0;}
.game-leaderboard li{
  display:flex; align-items:baseline; gap:.8rem; padding:.4rem 0;
  border-bottom:1px solid rgba(74,74,77,.4); font-size:.92rem;
}
.game-leaderboard li:last-child{border-bottom:none;}
.game-leaderboard li:first-child .lb-name, .game-leaderboard li:first-child .lb-score{color:var(--blood-accessible);}
.lb-rank{font-family:'JetBrains Mono',monospace; color:var(--fog-light); min-width:1.8rem; font-size:.82rem;}
.lb-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-score{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--bone);}

footer{
  position:relative; z-index:4; text-align:center; padding:3rem 1.5rem 2.5rem;
  border-top:1px solid rgba(138,18,32,.3); color:var(--fog-light); font-size:.82rem;
}
footer .brand{display:block; font-size:1.1rem; margin-bottom:.6rem;}
.footer-about{
  max-width:640px; margin:1.1rem auto 0; font-size:.82rem; line-height:1.7;
  color:var(--fog-light);
}
.footer-about strong{color:var(--parchment); font-weight:600;}

/* Playlist collaborative */
.playlist-list{list-style:none; max-width:620px; margin:1.6rem auto 0; padding:0; display:flex; flex-direction:column; gap:.6rem;}
.playlist-item{display:flex; align-items:center; gap:.8rem; background:var(--panel); border:1px solid rgba(138,18,32,.28); border-radius:var(--radius); padding:.7rem .9rem;}
.playlist-vote{flex:none; display:flex; flex-direction:column; align-items:center; gap:.1rem; min-width:44px; background:rgba(0,0,0,.3); border:1px solid rgba(200,28,52,.4); border-radius:var(--radius); color:var(--blood-accessible); padding:.35rem 0; cursor:pointer; font:inherit;}
.playlist-vote:hover{border-color:var(--blood-bright);}
.playlist-vote.voted{background:rgba(200,28,52,.22); cursor:default;}
.playlist-vote .pv-count{font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; color:#fff;}
.playlist-vote .pv-label{font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fog-light);}
.playlist-body{flex:1; min-width:0;}
.playlist-body a{color:var(--bone); text-decoration:none; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.playlist-body a:hover{color:var(--blood-accessible);}
.playlist-body .pl-author{font-size:.75rem; color:var(--fog-light);}
.playlist-empty{text-align:center; color:var(--fog-light); font-size:.88rem; padding:1rem 0;}
.playlist-del{flex:none; background:transparent; border:1px solid rgba(200,28,52,.35); border-radius:var(--radius);
  color:var(--fog-light); cursor:pointer; font-size:.95rem; line-height:1; padding:.4rem .5rem; transition:border-color .15s, background .15s;}
.playlist-del:hover{border-color:var(--blood-bright); background:rgba(200,28,52,.15);}
.playlist-del:disabled{opacity:.5; cursor:default;}

/* Mur des Griffures : fresque collective de marques générées par pseudo */
.claw-wall{
  position:relative; max-width:860px; height:min(430px, 60vw); margin:0 auto;
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(200,28,52,.07), transparent 60%),
    radial-gradient(500px 320px at 75% 80%, rgba(120,12,22,.09), transparent 55%),
    linear-gradient(165deg, #171213, #0b0a0a 70%);
  border:1px solid rgba(138,18,32,.4); border-radius:var(--radius);
  overflow:hidden; box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.wall-claw{
  position:absolute; width:44px; height:44px; cursor:help;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6));
  transition:transform .2s ease;
}
.wall-claw:hover{z-index:5;}
.wall-claw svg{width:100%; height:100%; overflow:visible;}
.wall-claw path{fill:none; stroke-linecap:round;}
.wall-claw.fresh{animation:clawSlash .5s ease both;}
@keyframes clawSlash{
  from{opacity:0; transform:scale(1.8) rotate(-8deg);}
  to{opacity:1;}
}
.claw-wall-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--fog-light); font-size:.9rem; text-align:center; padding:1rem;
}
.claw-wall-actions{display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:1.2rem;}
.claw-wall-count{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--parchment);}
.claw-wall-actions .btn[disabled]{opacity:.55; cursor:default;}

/* Toast « Lève-tôt » (badge early bird) */
.earlybird-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 120%);
  background:linear-gradient(160deg,#c81c34,#8a1220); color:#fff;
  padding:.9rem 1.3rem; border-radius:999px; font-size:.9rem; font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.5); z-index:9998; max-width:calc(100vw - 32px);
  text-align:center; opacity:0; transition:transform .4s ease, opacity .4s ease; pointer-events:none;
}
.earlybird-toast.show{ transform:translate(-50%, 0); opacity:1; }
.site-stats{
  font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.03em;
  color:var(--fog-light); margin:.9rem 0 0;
}
.site-stats[hidden]{display:none;}
.footer-perks{margin:1.8rem auto 0; gap:1.3rem; max-width:480px;}
.footer-perks .perk{width:72px; gap:.5rem;}
.footer-perks .perk-hex{width:54px; height:54px;}
.footer-perks .perk-hex svg{width:22px; height:22px;}
.footer-perks .perk-label{font-size:.6rem;}
.changelog-wrap{margin:1.8rem auto 0; max-width:420px; text-align:left;}
.changelog-wrap[hidden]{display:none;}
.changelog-wrap h4{
  font-family:'Cinzel',serif; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--parchment); text-align:center; margin:0 0 .7rem;
}
.changelog-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem;}
.changelog-list li{
  font-size:.76rem; color:var(--fog-light); display:flex; gap:.5rem; align-items:baseline;
}
.changelog-list .changelog-date{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--blood-bright); flex:0 0 auto; white-space:nowrap;
}
/* Easter egg : griffures discrètes dans le pied de page. */
.claw-mark{
  display:block; margin:1.4rem auto 0; background:none; border:none; padding:.3rem;
  cursor:pointer; opacity:.13; transition:opacity .4s ease;
}
.claw-mark:hover{opacity:.4;}
.claw-mark svg{width:26px; height:26px; display:block;}
.claw-mark path{stroke:var(--blood-bright); stroke-width:2.5; stroke-linecap:round; fill:none;}
.jumpscare{
  position:fixed; inset:0; z-index:999; background:#000;
  display:flex; align-items:center; justify-content:center;
  animation:jumpscareShake .9s ease forwards;
}
.jumpscare[hidden]{display:none;}
.jumpscare svg{width:min(60vw,420px);}
/* Easter egg : code Konami, effet "bénédiction" plutôt que frayeur. */
.konami-flash{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background:radial-gradient(circle, rgba(138,18,32,.55), transparent 70%);
  animation:konamiPulse 1.1s ease forwards;
}
.konami-flash[hidden]{display:none;}
@keyframes konamiPulse{
  0%{opacity:0;} 15%{opacity:1;} 100%{opacity:0;}
}
.konami-toast{
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); z-index:999;
  background:rgba(5,4,4,.92); border:1px solid var(--blood-bright); color:var(--overlay-text);
  font-family:'Cinzel',serif; letter-spacing:.05em; padding:.8rem 1.4rem; border-radius:999px;
  box-shadow:0 4px 20px rgba(0,0,0,.5); animation:konamiToastIn .4s ease;
}
.konami-toast[hidden]{display:none;}
@keyframes konamiToastIn{
  from{opacity:0; transform:translateX(-50%) translateY(10px);}
  to{opacity:1; transform:translateX(-50%) translateY(0);}
}
.jumpscare ellipse{
  fill:var(--blood-bright);
  filter:drop-shadow(0 0 25px rgba(200,28,52,.95)) drop-shadow(0 0 60px rgba(138,18,32,.8));
  animation:eyesAppear .9s ease forwards;
}
@keyframes jumpscareShake{
  0%{opacity:0;}
  8%{opacity:1; transform:translate(6px,-4px);}
  16%{transform:translate(-7px,5px);}
  24%{transform:translate(5px,3px);}
  32%{transform:translate(-4px,-5px);}
  40%{transform:translate(3px,2px);}
  55%{transform:translate(0,0);}
  85%{opacity:1;}
  100%{opacity:0;}
}
@keyframes eyesAppear{
  0%{transform:scale(.2); opacity:0;}
  10%{transform:scale(1.3); opacity:1;}
  25%{transform:scale(1);}
  80%{opacity:1;}
  100%{opacity:.0;}
}

.manager-fab, .dashboard-fab{
  position:fixed; right:1.1rem; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background:var(--panel); border:1px solid var(--fog); color:var(--bone);
  font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5); text-decoration:none;
}
/* Le tableau de bord (compte Tatou/admin) reste en bas ; l'engrenage
   d'édition (admins seulement) se place au-dessus quand les deux sont là. */
.dashboard-fab{bottom:1.1rem;}
.manager-fab{bottom:calc(1.1rem + 58px);}
.manager-fab:hover, .dashboard-fab:hover{border-color:var(--blood-bright);}
.manager-fab[hidden], .dashboard-fab[hidden]{display:none;}

.skip-link{
  position:absolute; top:-100px; left:1rem; z-index:300;
  background:var(--blood); color:var(--bone);
  padding:.7rem 1.2rem; border-radius:var(--radius);
  font-family:'Cinzel',serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{top:1rem;}

.search-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--overlay-border); border-radius:50%;
  background:none; color:var(--overlay-muted); cursor:pointer; font-size:.95rem; flex:none;
}
.search-btn:hover{border-color:var(--blood-bright); color:var(--overlay-text);}
.search-btn[hidden]{display:none;}

/* ── Radio Tatou ─────────────────────────────────────────────────────
   Lecteur optionnel ancré en bas à droite. Le bouton 📻 de la barre du
   haut pulse tant que la radio tourne, même lecteur replié. */
.radio-btn.radio-on{border-color:var(--blood-bright); color:var(--overlay-text); animation:radioPulse 2s ease-in-out infinite;}
@keyframes radioPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,28,52,.55);}
  50%{box-shadow:0 0 0 6px rgba(200,28,52,0);}
}
.radio-player{
  position:fixed; z-index:1600;
  right:max(1.1rem, env(safe-area-inset-right));
  bottom:calc(1.1rem + env(safe-area-inset-bottom));
  width:min(84vw, 268px);
  background:rgba(12,8,10,.94); border:1px solid rgba(200,28,52,.42); border-radius:14px;
  padding:.7rem .8rem .6rem; box-shadow:0 10px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--bone);
}
/* Les boutons flottants (admin) occupent déjà ce coin : on décale. */
body:has(.dashboard-fab:not([hidden])) .radio-player,
body:has(.manager-fab:not([hidden])) .radio-player{right:calc(1.1rem + 58px);}
.radio-player[hidden]{display:none;}
.rp-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.rp-name{font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.06em; color:var(--blood-bright);}
.rp-close{
  background:none; border:none; color:var(--parchment); cursor:pointer;
  font-size:.85rem; line-height:1; padding:.15rem .25rem;
}
.rp-close:hover{color:var(--bone);}
.rp-track{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--parchment);
  margin:.45rem 0 .55rem; min-height:1.9em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rp-controls{display:flex; align-items:center; gap:.45rem;}
.rp-btn{
  width:32px; height:32px; flex:none; border-radius:50%;
  border:1px solid var(--fog); background:rgba(255,255,255,.04); color:var(--bone);
  cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center;
}
.rp-btn:hover{border-color:var(--blood-bright);}
.rp-play{background:rgba(200,28,52,.22); border-color:rgba(200,28,52,.5);}
.rp-vol{display:flex; align-items:center; gap:.35rem; flex:1; min-width:0; font-size:.7rem;}
.rp-vol input[type="range"]{
  width:100%; min-width:0; accent-color:var(--blood-bright); cursor:pointer;
  /* Cible tactile confortable : le curseur natif ne fait que 4 px de haut. */
  height:26px; touch-action:none;
}
/* Volume impossible à régler (iOS sans Web Audio) : on le dit. */
.rp-vol-hint{font-size:.62rem; color:var(--parchment); opacity:.8; line-height:1.3;}
.rp-hint{margin:.5rem 0 0; font-size:.62rem; color:var(--parchment); opacity:.75; line-height:1.35;}
@media (max-width:620px){
  .radio-player{left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right)); width:auto;}
  body:has(.dashboard-fab:not([hidden])) .radio-player,
  body:has(.manager-fab:not([hidden])) .radio-player{right:calc(10px + 58px);}
}
@media (prefers-reduced-motion:reduce){
  .radio-btn.radio-on{animation:none;}
}
/* Aide iPhone pour activer les notifications (le push web n'y marche qu'en
   PWA installée) : petit encart en haut, sous le bandeau de navigation. */
.notify-hint-toast{
  position:fixed; top:64px; left:50%; transform:translate(-50%, -12px);
  z-index:250; width:min(92vw, 360px); cursor:pointer;
  background:#141110; border:1px solid var(--blood-bright); border-radius:12px;
  padding:.8rem 1rem; color:var(--bone); font-size:.82rem; line-height:1.5;
  box-shadow:0 14px 40px rgba(0,0,0,.6); opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.notify-hint-toast.show{ opacity:1; transform:translate(-50%, 0); }
.notify-hint-toast b{ color:#ffd75e; }
/* Menu du compte visiteur (connexion Google), ancré sous la nav. */
.account-menu{
  position:fixed; top:64px; right:16px; z-index:30;
  background:#141110; border:1px solid rgba(138,18,32,.45); border-radius:var(--radius);
  padding:1rem 1.1rem; width:min(300px, calc(100vw - 32px));
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.account-menu[hidden]{display:none;}
/* Cloche de notifications */
.notif-btn{position:relative;}
.notif-badge{
  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px;
  border-radius:8px; background:var(--blood-bright); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:.6rem; line-height:15px; text-align:center;
}
.notif-badge[hidden]{display:none;}
.notif-menu{max-height:min(420px, 70vh); overflow-y:auto;}
/* Préférences de notifications push (menu de la cloche 🔔) */
.push-menu-hint{margin:0 0 .7rem; font-size:.74rem; color:var(--parchment); line-height:1.4;}
.push-topic{
  display:flex; align-items:flex-start; gap:.55rem; cursor:pointer;
  padding:.5rem .1rem; border-top:1px solid rgba(138,18,32,.2);
  font-size:.82rem; color:var(--bone); line-height:1.3;
}
.push-topic input{margin-top:.15rem; accent-color:var(--blood-bright); width:16px; height:16px; flex:none; cursor:pointer;}
.push-topic small{color:var(--parchment); font-size:.7rem;}
.push-topic:hover{color:var(--overlay-text);}
.push-menu-msg{margin:.6rem 0 0; font-size:.72rem; color:var(--uncommon); min-height:1em; line-height:1.35;}
.notif-menu-head{font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blood-accessible); margin-bottom:.6rem;}
.notif-item{
  display:flex; align-items:flex-start; gap:.3rem;
  border-top:1px solid rgba(138,18,32,.2);
}
.notif-open{
  flex:1; min-width:0; text-align:left; background:none; border:none; cursor:pointer;
  padding:.55rem .4rem; color:var(--parchment); font-size:.84rem; line-height:1.35; font-family:inherit;
}
.notif-open:hover{color:var(--bone);}
.notif-item.unread .notif-open{color:var(--bone); font-weight:600;}
.notif-open .notif-when{display:block; font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--fog-light); font-weight:400; margin-top:.15rem;}
.notif-del{
  flex:none; align-self:center; background:none; border:none; cursor:pointer;
  color:var(--fog-light); font-size:.9rem; line-height:1; padding:.4rem .45rem; border-radius:6px;
}
.notif-del:hover{color:var(--blood-accessible); background:rgba(200,28,52,.12);}
.notif-clear-row{display:flex; justify-content:flex-end; margin-bottom:.2rem;}
.notif-clear-all{
  background:none; border:none; cursor:pointer; color:var(--fog-light);
  font-family:inherit; font-size:.72rem; text-decoration:underline; padding:.2rem .3rem;
}
.notif-clear-all:hover{color:var(--blood-accessible);}
.notif-empty{color:var(--fog-light); font-size:.82rem; margin:0;}
/* Pulsation d'attention sur le bouton compte quand une action exige la
   connexion (jeu, forum, idées, likes). */
.account-btn.attn{animation:accountAttn 1.6s ease;}
@keyframes accountAttn{
  0%,100%{box-shadow:0 0 0 0 rgba(200,28,52,0);}
  20%{box-shadow:0 0 0 4px rgba(200,28,52,.55);}
  60%{box-shadow:0 0 0 8px rgba(200,28,52,0);}
}
.account-menu-hint{margin:0 0 .8rem; font-size:.82rem; color:#c9c3b6;}
.account-user{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem;}
.account-user img{border-radius:50%; flex:none;}
.account-user span{color:#f5f1e8; font-size:.92rem; word-break:break-word;}
.account-logout{width:100%; font-size:.72rem; padding:.55rem .8rem; margin-bottom:.5rem;}
.account-edit-form{margin-bottom:.5rem;}
.account-edit-form[hidden]{display:none;}
.account-edit-form .forum-input{margin-bottom:.5rem;}
.account-edit-msg{margin:.4rem 0 0; font-size:.75rem; color:#c9c3b6; min-height:1em;}
/* Comptes reliés (Google ↔ Discord) dans le menu compte. */
.account-links{border-top:1px solid rgba(200,28,52,.25); margin:.6rem 0 .6rem; padding-top:.7rem;}
.account-links[hidden]{display:none;}
.account-links-title{font-size:.8rem; color:#f5f1e8; margin-bottom:.3rem;}
.account-links-hint{margin:0 0 .6rem; font-size:.72rem; color:#c9c3b6;}
.account-link-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.78rem; color:#e8e2d5; padding:.3rem 0;
}
.account-link-main{font-size:.66rem; color:#7ea34c; border:1px solid rgba(126,163,76,.5); border-radius:99px; padding:.1rem .5rem;}
.account-unlink-btn{
  background:none; border:1px solid rgba(200,28,52,.45); color:#c9c3b6;
  border-radius:8px; font-size:.68rem; padding:.2rem .55rem; cursor:pointer;
  font-family:inherit;
}
.account-unlink-btn:hover{color:#f5f1e8; border-color:var(--blood-bright);}
#linkGoogleBtnWrap{margin-bottom:.5rem;}
#linkGoogleBtnWrap[hidden]{display:none;}
.account-btn.logged{border-color:var(--blood-bright);}
/* Bouton « Se connecter avec Discord » aux couleurs officielles Discord. */
.discord-login-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:.6rem; padding:.6rem .8rem;
  background:#5865F2; color:#fff; border:none; border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600; cursor:pointer;
}
.discord-login-btn:hover{background:#4752c4;}
.discord-login-btn[hidden]{display:none;}
/* Widget officiel du serveur Discord (section Soutien). */
.discord-widget-wrap{text-align:center;}
.discord-widget-wrap[hidden]{display:none;}
.discord-widget-wrap iframe{
  max-width:100%; border:1px solid var(--fog); border-radius:var(--radius);
  background:#141110;
}

body.cmdk-open{overflow:hidden;}
.cmdk-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(5,4,4,.75);
  display:flex; align-items:flex-start; justify-content:center; padding:12vh 1rem 2rem;
  backdrop-filter:blur(2px);
}
.cmdk-overlay[hidden]{display:none;}
.cmdk-box{
  width:100%; max-width:560px; background:var(--panel); border:1px solid var(--blood-bright);
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden;
}
.cmdk-input{
  width:100%; background:var(--void); border:none; border-bottom:1px solid var(--fog);
  color:var(--bone); padding:1rem 1.2rem; font-size:1rem; font-family:'Inter',sans-serif;
}
.cmdk-input:focus{outline:none;}
.cmdk-results{max-height:50vh; overflow-y:auto;}
.cmdk-item{
  display:flex; align-items:center; gap:.8rem; padding:.8rem 1.2rem; cursor:pointer;
  border:none; border-bottom:1px solid rgba(74,74,77,.3); text-align:left; width:100%;
  background:none; color:inherit; font:inherit;
}
.cmdk-item:last-child{border-bottom:none;}
.cmdk-item:hover, .cmdk-item.active{background:rgba(200,28,52,.14);}
.cmdk-item-icon{font-size:1.1rem; flex:none; width:1.4rem; text-align:center;}
.cmdk-item-body{flex:1; min-width:0;}
.cmdk-item-title{font-size:.92rem; color:var(--bone); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cmdk-item-meta{font-size:.74rem; color:var(--fog-light); margin-top:.15rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cmdk-item-kind{font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--fog-light); flex:none; text-transform:uppercase;}
.cmdk-empty{padding:1.4rem 1.2rem; text-align:center; color:var(--fog-light); font-size:.88rem;}
.cmdk-hint{padding:.6rem 1.2rem; border-top:1px solid rgba(74,74,77,.3); font-size:.7rem; color:var(--fog-light); display:flex; gap:1.2rem;}
@media (max-width:560px){
  .cmdk-hint span:nth-child(3){display:none;}
}
/* Mode faible connexion (« éco ») : coupe les décors animés gourmands et les
   miniatures d'images (gérées aussi côté JS pour ne pas les télécharger). */
:root[data-lowdata] #themeCanvas,
:root[data-lowdata] #clubVizCanvas,
:root[data-lowdata] .cursor-trail{display:none !important;}
:root[data-lowdata] *{animation-duration:0s !important; animation-delay:0s !important; transition-duration:0s !important;}
.footer-settings{margin:1.6rem auto 0; display:flex; justify-content:center;}
.footer-setting-btn{
  background:var(--void); border:1px solid var(--fog); color:var(--fog-light); border-radius:999px;
  padding:.4rem .9rem; font:inherit; font-size:.74rem; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.footer-setting-btn:hover{color:var(--bone); border-color:var(--fog-light);}
.footer-setting-btn.on{color:var(--bone); border-color:var(--blood-bright); box-shadow:0 0 8px rgba(200,28,52,.3);}

/* Sondage communautaire (page Accueil, rubrique Actus) */
.poll-card{
  max-width:720px; margin:0 auto 1.6rem; padding:1.2rem 1.3rem;
  background:linear-gradient(160deg, rgba(28,14,16,.7), rgba(11,10,10,.7));
  border:1px solid rgba(138,18,32,.4); border-radius:var(--radius);
}
.poll-card[hidden]{display:none;}
.poll-head{font-family:'Cinzel',serif; font-size:1.05rem; color:var(--bone); margin-bottom:.9rem;}
.poll-option{
  display:block; width:100%; text-align:left; cursor:pointer; position:relative;
  background:rgba(0,0,0,.3); border:1px solid rgba(138,18,32,.3); border-radius:var(--radius);
  padding:.6rem .8rem; margin-top:.5rem; color:var(--parchment); font-size:.92rem; font-family:inherit;
  overflow:hidden; transition:border-color .2s ease;
}
.poll-option:hover{border-color:var(--blood-bright);}
.poll-option .poll-fill{
  position:absolute; inset:0; width:0; background:rgba(200,28,52,.22);
  transition:width .6s ease; z-index:0;
}
.poll-option .poll-line{position:relative; z-index:1; display:flex; justify-content:space-between; gap:.6rem;}
.poll-option .poll-pct{font-family:'JetBrains Mono',monospace; color:var(--fog-light); flex:none;}
.poll-option.mine{border-color:var(--blood-bright); color:var(--bone);}
.poll-option.mine .poll-pct{color:var(--blood-accessible);}
.poll-meta{font-size:.78rem; color:var(--fog-light); margin:.7rem 0 0;}

/* Réactions flottantes du live */
.live-reactions{position:relative; max-width:720px; margin:0 auto;}
.live-reactions[hidden]{display:none;}
.lr-float{
  position:absolute; bottom:100%; left:0; right:0; height:240px;
  pointer-events:none; overflow:hidden; z-index:5;
}
.lr-float span{
  position:absolute; bottom:-40px; font-size:1.6rem; opacity:0;
  animation:lr-rise var(--lr-dur, 2.6s) ease-out forwards;
}
@keyframes lr-rise{
  0%{ transform:translate(0, 0) scale(.7); opacity:0; }
  12%{ opacity:.95; }
  100%{ transform:translate(var(--lr-drift, 0px), -240px) scale(1.15); opacity:0; }
}
.lr-bar{
  display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap;
  padding:.55rem 0 .2rem;
}
.lr-btn{
  background:rgba(8,6,6,.55); border:1px solid rgba(138,18,32,.4); border-radius:999px;
  font-size:1.15rem; padding:.3rem .65rem; cursor:pointer;
  transition:transform .1s ease, border-color .2s ease;
  -webkit-user-select:none; user-select:none;
}
.lr-btn:hover{border-color:var(--blood-bright);}
.lr-btn:active{transform:scale(1.25);}
@media (prefers-reduced-motion: reduce){ .lr-float span{animation:none; display:none;} }

/* Rythme du Brouillard (jeu de rythme) */
.rythme-wrap{display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.rythme-hud{
  display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.9rem; color:var(--bone);
}
/* Sélecteur de musique du jeu de rythme (dans l'écran d'accueil du jeu). */
.rythme-music-pick{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--parchment);
}
.rythme-music-pick[hidden]{display:none;}
#rythmeMusicSelect{
  font-family:'JetBrains Mono',monospace; font-size:.8rem;
  padding:.4rem 2rem .4rem .7rem; border-radius:12px; cursor:pointer;
  background:rgba(200,28,52,.14); border:1px solid rgba(200,28,52,.5); color:var(--bone);
  max-width:220px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c81c34' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
}
#rythmeMusicSelect:hover{background-color:rgba(200,28,52,.26); border-color:var(--blood-bright);}
#rythmeMusicSelect option{background:#1a1114; color:var(--bone);}
/* ===== Le Totem : jeu de mémoire (Simon) ===== */
.totem-wrap{display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:1rem;}
.totem-hud{
  display:flex; gap:1.4rem; font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--parchment);
}
.totem-hud #totemBest{color:var(--fog-light);}
.totem-board{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px;
  width:min(88vw, 340px); aspect-ratio:1/1; padding:14px; border-radius:16px;
  background:radial-gradient(120% 120% at 50% 40%, rgba(40,10,16,.6), rgba(8,6,8,.9));
  border:1px solid rgba(138,18,32,.4);
}
.totem-rune{
  border:2px solid rgba(0,0,0,.4); border-radius:12px; cursor:pointer;
  transition:filter .12s ease, transform .08s ease, box-shadow .12s ease;
  position:relative; overflow:hidden;
}
.totem-rune::after{ content:"🕯️"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; opacity:.35; }
.totem-rune[data-rune="0"]{ background:#8a1220; }
.totem-rune[data-rune="1"]{ background:#1f6f4a; }
.totem-rune[data-rune="2"]{ background:#6a4fb0; }
.totem-rune[data-rune="3"]{ background:#c8901c; }
.totem-rune:not(:disabled):hover{ filter:brightness(1.15); }
.totem-rune:not(:disabled):active{ transform:scale(.97); }
.totem-rune.lit{ filter:brightness(2.1) saturate(1.3); box-shadow:0 0 26px 6px rgba(255,220,150,.6); }
.totem-rune.lit::after{ opacity:1; }
.totem-rune.wrong{ filter:brightness(1.4) hue-rotate(-20deg); box-shadow:0 0 26px 6px rgba(200,28,52,.7); }
.totem-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center; padding:1rem; border-radius:16px;
  background:rgba(5,4,4,.86); backdrop-filter:blur(2px);
}
.totem-overlay[hidden]{display:none;}
.totem-overlay-title{font-family:'Butcherman','Cinzel',serif; font-size:1.9rem; color:var(--blood-bright); text-shadow:0 0 18px rgba(200,28,52,.6);}
.totem-overlay p{color:var(--parchment); font-size:.88rem; max-width:300px;}
.rythme-stage{position:relative; width:100%; max-width:360px;}
#rythmeCanvas{
  display:block; width:100%; height:auto; background:#0d0b0c;
  border:1px solid rgba(138,18,32,.45); border-radius:var(--radius);
  touch-action:none;
}

/* ============ Visite guidée (onboarding 1er lancement) ============
   Un projecteur (trou transparent avec un halo sombre tout autour via un
   énorme box-shadow) met en avant un élément, et une bulle explicative
   s'ancre à côté. Full-screen fixe, au-dessus de tout le reste. */
.tour-relaunch{margin-top:.4rem;}
.tour-overlay{position:fixed; inset:0; z-index:4000;}
.tour-overlay[hidden]{display:none;}
/* Le voile sombre : matérialisé par le box-shadow du projecteur. En mode
   « sans cible » (intro/fin), on retombe sur un fond uni via .no-spot. */
.tour-overlay.no-spot{background:rgba(5,4,4,.78);}
.tour-spot{
  position:absolute; border-radius:6px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(5,4,4,.78), 0 0 0 2px var(--blood-bright) inset,
             0 0 22px 4px rgba(200,28,52,.55);
  transition:top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.tour-overlay.no-spot .tour-spot{display:none;}
.tour-pop{
  position:absolute; width:min(340px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--blood);
  border-radius:var(--radius); padding:1.1rem 1.15rem 1rem;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  transition:top .28s ease, left .28s ease;
}
.tour-overlay.no-spot .tour-pop{
  top:50% !important; left:50% !important; transform:translate(-50%, -50%);
}
.tour-count{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  letter-spacing:.08em; color:var(--blood-accessible); margin-bottom:.35rem;
}
.tour-title{margin:0 0 .4rem; font-size:1.15rem; color:var(--bone); line-height:1.2;}
.tour-text{margin:0 0 1rem; font-size:.92rem; color:var(--parchment); line-height:1.5;}
.tour-actions{display:flex; align-items:center; justify-content:space-between; gap:.6rem;}
.tour-nav{display:flex; gap:.5rem;}
.tour-actions .btn{padding:.45rem .9rem; font-size:.85rem;}
.tour-skip{
  background:none; border:none; color:var(--fog-light); cursor:pointer;
  font-size:.82rem; padding:.3rem .2rem; text-decoration:underline;
}
.tour-skip:hover{color:var(--bone);}
.tour-prev[hidden]{display:none;}
@media (max-width:520px){
  .tour-pop{padding:.95rem 1rem .9rem;}
  .tour-title{font-size:1.05rem;}
  .tour-actions .btn{padding:.4rem .7rem;}
}
@media (prefers-reduced-motion: reduce){
  .tour-spot, .tour-pop{transition:none;}
}

/* ── Connexions supplémentaires (Twitch, TikTok, lien magique) ─────── */
.social-login-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  margin-top:.5rem; padding:.55rem .8rem; border-radius:8px; cursor:pointer;
  border:1px solid var(--fog); background:var(--void); color:var(--bone);
  font-family:inherit; font-size:.82rem;
}
.social-login-btn:hover{border-color:var(--blood-bright);}
.social-login-btn[hidden]{display:none;}
.social-login-btn.twitch:hover{border-color:#9146ff;}
/* Mention « conseillé » sous Discord : c'est la connexion qui débloque le bot. */
.login-advice{
  margin:.35rem 0 0; font-size:.68rem; line-height:1.4; color:var(--parchment);
  border-left:2px solid var(--ultra); padding-left:.5rem;
}
.login-advice[hidden]{display:none;}
/* Invitation à relier son compte Twitch (prime d'abonné). Violet Twitch, pour
   qu'on la distingue au premier coup d'œil du reste du profil. */
.twitch-promo{
  margin:0 0 .9rem; padding:.75rem .85rem; border-radius:var(--radius);
  border:1px solid rgba(145,70,255,.5);
  background:linear-gradient(140deg, rgba(145,70,255,.16), rgba(11,10,10,.5));
  box-shadow:inset 0 0 18px rgba(145,70,255,.08);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.twitch-promo[hidden]{display:none;}
.twitch-promo-icon{font-size:1.3rem; line-height:1; flex:none;}
.twitch-promo-text{flex:1 1 190px; min-width:0;}
.twitch-promo-title{font-family:'Cinzel',serif; font-size:.88rem; color:#d3b6ff; letter-spacing:.02em;}
.twitch-promo-desc{margin:.2rem 0 0; font-size:.74rem; color:var(--parchment); line-height:1.45;}
.twitch-promo-actions{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;}
.twitch-promo-btn{
  font:inherit; font-size:.78rem; cursor:pointer; white-space:nowrap;
  border:1px solid rgba(145,70,255,.75); background:rgba(145,70,255,.22);
  color:#efe6ff; border-radius:var(--radius); padding:.45rem .8rem; text-decoration:none;
}
.twitch-promo-btn:hover{background:rgba(145,70,255,.36); border-color:#9146ff;}
.twitch-promo-close{
  font:inherit; font-size:.9rem; line-height:1; cursor:pointer; flex:none;
  background:none; border:none; color:var(--fog-light); padding:.2rem .3rem;
}
.twitch-promo-close:hover{color:var(--bone);}
.link-advice{
  font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ultra); border:1px solid var(--ultra);
  border-radius:999px; padding:.05rem .3rem; margin-left:.3rem;
}
.magic-login[hidden]{display:none;}
.magic-sep{display:flex; align-items:center; gap:.5rem; margin:.9rem 0 .6rem; color:var(--fog-light); font-size:.68rem;}
.magic-sep::before, .magic-sep::after{content:""; flex:1; height:1px; background:rgba(138,18,32,.3);}
.magic-label{display:block; font-size:.72rem; color:var(--parchment); margin-bottom:.3rem;}
.magic-row{display:flex; gap:.35rem;}
.magic-input{
  flex:1; min-width:0; background:var(--void); border:1px solid var(--fog); border-radius:8px;
  color:var(--bone); font-family:inherit; font-size:.8rem; padding:.45rem .55rem;
}
.magic-input:focus{outline:none; border-color:var(--blood-bright);}
.magic-btn{
  flex:none; background:rgba(200,28,52,.22); border:1px solid rgba(200,28,52,.5); border-radius:8px;
  color:var(--bone); font-family:inherit; font-size:.75rem; padding:.45rem .6rem; cursor:pointer;
}
.magic-btn:hover{background:rgba(200,28,52,.34);}
.magic-btn[disabled]{opacity:.5; cursor:not-allowed;}
.magic-msg{margin:.45rem 0 0; font-size:.7rem; color:var(--uncommon); line-height:1.4; min-height:1em;}
.account-link-add{position:relative;}
.magic-link-add{margin-top:.4rem;}
.magic-link-add[hidden]{display:none;}

/* ===== Duel en direct ===== */
.duel-bloc{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  width:100%; max-width:420px; margin-top:.4rem;
  padding-top:.9rem; border-top:1px solid rgba(255,255,255,.07);
}
.live-presence{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem;
  font-size:.8rem; color:var(--fog-light); text-align:center;
}
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#3ba55d; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(59,165,93,.6); animation:live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse{
  70%{ box-shadow:0 0 0 7px rgba(59,165,93,0); }
  100%{ box-shadow:0 0 0 0 rgba(59,165,93,0); }
}
.live-presence[hidden]{ display:none; }
.live-joueurs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem; width:100%; }
.live-joueur{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.7rem; color:var(--parchment);
  background:rgba(255,255,255,.05); border-radius:999px; padding:.12rem .5rem .12rem .18rem;
}
.live-joueur img{ width:16px; height:16px; border-radius:50%; object-fit:cover; }
.live-joueur i{ font-style:normal; font-size:.8em; }
.duel-btn{ min-width:230px; }
.duel-btn[hidden]{ display:none; }
.duel-score{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  font-variant-numeric:tabular-nums;
}
.duel-score[hidden]{ display:none; }
.duel-score-lbl{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog-light); }
.duel-score-txt{ font-size:1.5rem; font-weight:700; color:var(--bone); }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }
:root[data-lowdata] .live-dot{ animation:none; }

/* Temps réel du forum : lecteurs en ligne, et annonce d'un nouveau message. */
.forum-presence{ font-size:.78rem; color:var(--fog-light); text-align:center; margin:0 0 .5rem; }
.forum-presence[hidden]{ display:none; }
.forum-nouveau{
  font-size:.82rem; text-align:center; margin:0 0 .7rem; padding:.45rem .8rem;
  color:var(--bone); background:rgba(200,28,52,.12);
  border:1px solid var(--blood-accessible); border-radius:999px;
}
.forum-nouveau[hidden]{ display:none; }
.lb-sub{ font-size:.8em; color:var(--fog-light); }

/* Recherche dans le forum */
.forum-recherche{ margin-bottom:.8rem; }
.forum-recherche-bilan{ font-size:.78rem; color:var(--fog-light); margin:.35rem 0 0; }
.forum-recherche-bilan[hidden]{ display:none; }
.forum-topic-trouve{ font-size:.72rem; color:var(--blood-accessible); margin-top:.3rem; }

/* Récapitulatif de la semaine */
.semaine-recap{
  width:100%; margin-top:.7rem; padding:.7rem .9rem;
  border:1px solid var(--fog); border-left:3px solid var(--blood-accessible);
  border-radius:var(--radius); background:rgba(255,255,255,.02);
}
.semaine-recap[hidden]{ display:none; }
.semaine-titre{ font-size:.8rem; color:var(--bone); font-weight:600; margin-bottom:.4rem; }
.semaine-record{ font-size:.72rem; color:var(--blood-accessible); font-weight:500; }
.semaine-lignes{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.semaine-item{ font-size:.8rem; color:var(--parchment); }

/* Les Archives */
.codex{ width:100%; margin-top:.7rem; }
.codex[hidden]{ display:none; }
.codex-tete{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.03); border:1px solid var(--fog); border-radius:var(--radius);
  color:var(--bone); font:inherit; font-size:.85rem; font-weight:600;
  padding:.6rem .9rem; cursor:pointer;
}
.codex-tete:hover{ border-color:var(--blood-accessible); }
.codex-compte{ font-size:.78rem; color:var(--fog-light); font-weight:500; font-variant-numeric:tabular-nums; }
.codex-corps{ margin-top:.6rem; }
.codex-corps[hidden]{ display:none; }
.codex-chap{ margin-bottom:1.1rem; }
.codex-chap h4{ font-family:'Cinzel',serif; font-size:.92rem; color:var(--bone); margin:0 0 .1rem; }
.codex-chap-compte{ font-family:inherit; font-size:.72rem; color:var(--fog-light); font-weight:400; }
.codex-sous{ font-size:.75rem; color:var(--fog-light); margin:0 0 .5rem; font-style:italic; }
.codex-frag{
  border-left:2px solid var(--fog); padding:.4rem 0 .4rem .7rem; margin-bottom:.5rem;
}
.codex-frag.ouvert{ border-left-color:var(--blood-accessible); }
.codex-frag h5{ font-size:.8rem; color:var(--parchment); margin:0 0 .2rem; font-weight:600; }
.codex-frag.ouvert h5{ color:var(--bone); }
.codex-frag p{ font-size:.8rem; line-height:1.55; color:var(--parchment); margin:0; }
.codex-indice{ color:var(--fog-light) !important; font-size:.75rem !important; font-style:italic; }