/* ─────────────────────────────────────────────────────────────────────────────
   Secret Story — Design System
   "La Voix Console" — terminal scénique, HUD sci-fi, prime time
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Legacy vars remappés — les var() inline héritent automatiquement */
  --night:     #06091e;
  --night-mid: #0b1138;
  --orange:    #e040fb;   /* fuchsia — CTA principal */
  --gold:      #00e5ff;   /* cyan — accent clé */
  --cream:     rgba(220, 235, 255, 0.94);
  --green:     #00e676;
  --red:       #ff3d71;

  /* Palette principale */
  --cyan:       #00e5ff;
  --azure:      #2979ff;
  --fuchsia:    #e040fb;
  --violet:     #7b2fff;
  --amber:      #c8973a;  /* or/leader */
  --peach:      #ff9a5c;
  --white:      #ffffff;

  /* Surfaces */
  --surface-0:  rgba(6, 9, 30, 0.96);
  --surface-1:  rgba(9, 13, 44, 0.82);
  --surface-2:  rgba(11, 17, 52, 0.65);
  --glass:      rgba(9, 14, 46, 0.62);
  --glass-strong: rgba(6, 10, 36, 0.88);
  --glass-border: rgba(0, 229, 255, 0.1);
  --glass-border-hover: rgba(0, 229, 255, 0.28);

  /* Texte */
  --text:       rgba(218, 234, 255, 0.93);
  --text-mid:   rgba(160, 195, 255, 0.58);
  --text-dim:   rgba(120, 158, 220, 0.36);

  /* Glows */
  --glow-cyan:    0 0 24px rgba(0, 229, 255, 0.28);
  --glow-fuchsia: 0 0 24px rgba(224, 64, 251, 0.32);
  --glow-violet:  0 0 20px rgba(123, 47, 255, 0.30);
  --glow-amber:   0 0 20px rgba(200, 151, 58, 0.35);

  /* HUD chrome */
  --hud-corner:   rgba(0, 229, 255, 0.52);
  --hud-border:   rgba(0, 229, 255, 0.1);
  --hud-corner-size: 10px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); }

/* ── Body — fond nébuleuse / espace ────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 90% 45% at 20% 10%,  rgba(0,229,255,0.06)  0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 85% 90%,  rgba(123,47,255,0.08) 0%, transparent 62%),
    radial-gradient(ellipse 55% 40% at 55% 50%,  rgba(41,121,255,0.04) 0%, transparent 68%),
    radial-gradient(ellipse 60% 30% at 10% 80%,  rgba(123,47,255,0.04) 0%, transparent 55%),
    var(--night);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Josefin Sans', sans-serif;
  min-height: 100vh;
}

.topbar-spacer { height: 48px; }

/* ── HUD Panel — panneaux avec crochets coins ──────────────────────────────── */
/*
   Crochets aux 4 coins via 8 gradients CSS — aucun élément supplémentaire.
   Superposé sur le border existant, couvre l'angle intérieur.
   Variantes: --cyan (défaut), --fuchsia, --violet, --amber
*/
.hud-panel {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--hud-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* coin haut-gauche H */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      top 0 left 0 / var(--hud-corner-size) 1.5px no-repeat,
    /* coin haut-gauche V */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      top 0 left 0 / 1.5px var(--hud-corner-size) no-repeat,
    /* coin haut-droit H */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      top 0 right 0 / var(--hud-corner-size) 1.5px no-repeat,
    /* coin haut-droit V */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      top 0 right 0 / 1.5px var(--hud-corner-size) no-repeat,
    /* coin bas-gauche H */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      bottom 0 left 0 / var(--hud-corner-size) 1.5px no-repeat,
    /* coin bas-gauche V */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      bottom 0 left 0 / 1.5px var(--hud-corner-size) no-repeat,
    /* coin bas-droit H */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      bottom 0 right 0 / var(--hud-corner-size) 1.5px no-repeat,
    /* coin bas-droit V */
    linear-gradient(var(--hud-corner), var(--hud-corner))
      bottom 0 right 0 / 1.5px var(--hud-corner-size) no-repeat;
}

/* Variante fuchsia */
.hud-panel--fuchsia {
  --hud-corner: rgba(224, 64, 251, 0.55);
  --hud-border: rgba(224, 64, 251, 0.1);
  background: rgba(28, 6, 50, 0.62);
}

/* Variante violet */
.hud-panel--violet {
  --hud-corner: rgba(123, 47, 255, 0.55);
  --hud-border: rgba(123, 47, 255, 0.12);
  background: rgba(18, 8, 44, 0.62);
}

/* Variante ambre (leader) */
.hud-panel--amber {
  --hud-corner: rgba(200, 151, 58, 0.58);
  --hud-border: rgba(200, 151, 58, 0.16);
  background: rgba(22, 15, 4, 0.62);
}

/* ── Module header — titre de section ────────────────────────────────────────── */
.module-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  margin-top: 28px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.08);
}

.module-hdr::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--cyan);
  flex-shrink: 0;
  opacity: 0.7;
}

.module-hdr-label {
  font-size: 0.54rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.55);
  font-family: 'Josefin Sans', sans-serif;
}

.module-hdr-count {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* Variante fuchsia */
.module-hdr--fuchsia::before { background: var(--fuchsia); }
.module-hdr--fuchsia .module-hdr-label { color: rgba(224, 64, 251, 0.55); }

/* ── Section title (compat existant) ────────────────────────────────────────── */
.section-title {
  font-size: 0.54rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.52);
  margin-bottom: 12px;
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: rgba(0, 229, 255, 0.55);
  flex-shrink: 0;
}

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.badge--cyan    { color: var(--cyan);    border-color: rgba(0,229,255,0.35);   background: rgba(0,229,255,0.06);   }
.badge--fuchsia { color: var(--fuchsia); border-color: rgba(224,64,251,0.35);  background: rgba(224,64,251,0.06);  }
.badge--green   { color: var(--green);   border-color: rgba(0,230,118,0.35);   background: rgba(0,230,118,0.06);   }
.badge--red     { color: var(--red);     border-color: rgba(255,61,113,0.35);  background: rgba(255,61,113,0.06);  }
.badge--amber   { color: var(--amber);   border-color: rgba(200,151,58,0.35);  background: rgba(200,151,58,0.06);  }
.badge--violet  { color: #b388ff;        border-color: rgba(123,47,255,0.35);  background: rgba(123,47,255,0.06);  }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 20px 0;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ── Common buttons ──────────────────────────────────────────────────────────── */
.btn-primary {
  display: block; width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--fuchsia), var(--azure));
  color: #fff; border: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; min-height: 48px;
  transition: box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 18px rgba(224,64,251,0.2);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 28px rgba(224,64,251,0.38); }
.btn-primary:disabled { opacity: 0.38; cursor: default; box-shadow: none; }

/* ── System status line ───────────────────────────────────────────────────── */
.sys-line {
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sys-line::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOARD V2 — Plateau TV Néon (Secret Story show chrome)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ss-pink:    #ff2bd6;
  --ss-fuchsia: #e040fb;
  --ss-magenta: #ff1493;
  --ss-cyan:    #1ce0ff;
  --ss-blue:    #2a7bff;
  --ss-violet:  #7b2fff;
  --ss-gold:    #ffb830;
  --ss-orange:  #ff7a1a;
  --ss-deep:    #07061c;
  --ss-deep-2:  #100836;
  --ss-panel:   rgba(20, 8, 60, 0.72);
  --ss-panel-2: rgba(8, 4, 32, 0.86);
}

/* ── Page background spatial ──────────────────────────────────────────────── */
body.ss-board {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,    rgba(224,64,251,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 15% 25%,   rgba(28,224,255,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 88% 30%,   rgba(123,47,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 100%,  rgba(123,47,255,0.10) 0%, transparent 70%),
    var(--ss-deep);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

body.ss-board::before {
  content:'';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,180,255,0.6) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120,220,255,0.5) 1px, transparent 1.5px);
  background-size: 180px 180px, 260px 260px, 340px 340px;
  background-position: 0 0, 70px 90px, 130px 40px;
  opacity: 0.55;
  animation: ss-star-twinkle 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes ss-star-twinkle {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.7;  }
}

@media (prefers-reduced-motion: reduce) {
  body.ss-board::before { animation: none; }
}

/* ── Phase banner — cartouche polygonal horizontal ────────────────────────── */
#phase-banner {
  display: none;
  position: relative;
  z-index: 2;
  margin: 14px auto 0;
  padding: 14px 48px;
  max-width: 760px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(224,64,251,0.18), rgba(28,224,255,0.18), rgba(224,64,251,0.18));
  border: none;
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%, 0 50%);
  text-shadow:
    0 0 18px rgba(255,255,255,0.55),
    0 0 32px rgba(224,64,251,0.7);
  box-shadow: 0 0 40px rgba(224,64,251,0.35);
}

#phase-banner::after {
  content: '';
  position: absolute;
  inset: 2px;
  pointer-events: none;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%, 0 50%);
}

/* ── HUD Frame — chrome global du plateau ─────────────────────────────────── */
#hud-frame.board-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  margin: 18px auto 0;
  padding: 18px 14px 30px;
}

#hud-frame.board-stage .hud-corners { display: none; }

/* ── Grid layout ──────────────────────────────────────────────────────────── */
#desk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Mobile (<1100px) : wrapper colonne gauche dissous → brand + collective
   redeviennent items grid, ré-ordonnés via order. Desktop override en flex
   dans le @media (min-width:1100px). */
#board-leftcol { display: contents; }
#collective-missions { order: 1; }
#mod-feed.hex-module,
#mod-recompense.hex-module,
#mod-progression,
.badge-rail { order: 2; }

/* ── Brand block — logo héros ─────────────────────────────────────────────── */
#brand-block {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

#brand-block::before {
  content: '';
  position: absolute;
  inset: -10% -10% -10% -10%;
  background:
    conic-gradient(from 0deg at 50% 55%,
      rgba(224,64,251,0)   0deg,
      rgba(224,64,251,0.22) 25deg,
      rgba(28,224,255,0)   60deg,
      rgba(123,47,255,0.18) 95deg,
      rgba(224,64,251,0)   140deg,
      rgba(28,224,255,0.22) 200deg,
      rgba(224,64,251,0.14) 260deg,
      rgba(123,47,255,0)   330deg,
      rgba(224,64,251,0)   360deg);
  filter: blur(22px);
  opacity: 0.85;
  pointer-events: none;
  animation: ss-aura-spin 28s linear infinite;
}

#brand-block::after {
  content:'';
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(224,64,251,0.35) 0%, rgba(28,224,255,0.15) 35%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

@keyframes ss-aura-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #brand-block::before { animation: none; }
}

.brand-eye-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 18px rgba(28,224,255,0.55)) drop-shadow(0 0 30px rgba(224,64,251,0.4));
}
.brand-eye-wrap svg { width: 64px; height: auto; }

#brand-block .brand-name {
  position: relative;
  z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, #ff75e7 38%, #c233ff 65%, #5b1ad6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 28px rgba(224,64,251,0.55),
    0 0 60px rgba(123,47,255,0.4);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35));
}

#brand-block .brand-tagline {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(28,224,255,0.7);
  margin-top: 10px;
  padding: 4px 18px;
  border: 1px solid rgba(28,224,255,0.45);
  background: linear-gradient(90deg, rgba(28,224,255,0.05), rgba(224,64,251,0.08), rgba(28,224,255,0.05));
}

#brand-block .brand-scan {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 320px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(28,224,255,0.55), rgba(224,64,251,0.55), transparent);
  box-shadow: 0 0 8px rgba(224,64,251,0.45);
}

/* ── Panel base — chrome néon polygonal ───────────────────────────────────── */
.board-panel {
  position: relative;
  background: var(--ss-panel);
  border: 1.5px solid rgba(224,64,251,0.55);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.25),
    0 0 22px rgba(224,64,251,0.28),
    inset 0 0 28px rgba(28,224,255,0.06),
    inset 0 0 60px rgba(123,47,255,0.12);
  padding: 14px 14px 16px;
  z-index: 1;
}

.board-panel::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(28,224,255,0.42);
  pointer-events: none;
  z-index: 0;
}

.board-panel > * { position: relative; z-index: 1; }

/* Variante header polygonal */
.panel-hdr {
  position: relative;
  margin: -22px auto 14px;
  padding: 7px 30px 6px;
  max-width: 86%;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, rgba(224,64,251,0.95), rgba(255,43,214,0.95), rgba(224,64,251,0.95));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 18px rgba(224,64,251,0.8);
  box-shadow: 0 0 24px rgba(224,64,251,0.55);
  z-index: 2;
}

.panel-hdr--cyan {
  background: linear-gradient(90deg, rgba(28,224,255,0.95), rgba(60,160,255,0.95), rgba(28,224,255,0.95));
  box-shadow: 0 0 24px rgba(28,224,255,0.55);
}

.board-panel .panel-hdr-sub {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  margin-top: 2px;
  opacity: 0.85;
}

/* ── Leaderboard ──────────────────────────────────────────────────────────── */
.lb-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(28,12,80,0.85), rgba(8,4,32,0.92));
  border: 2px solid rgba(224,64,251,0.6);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.35),
    0 0 30px rgba(224,64,251,0.35),
    inset 0 0 40px rgba(123,47,255,0.18);
  padding: 26px 12px 14px;
  margin: 28px 0 6px;
  z-index: 1;
}

.lb-panel::before {
  content:'';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(28,224,255,0.45);
  pointer-events: none;
}

.lb-panel-hdr {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 36px 7px;
  background: linear-gradient(90deg, rgba(28,224,255,0.95), rgba(60,160,255,0.95), rgba(28,224,255,0.95));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(28,224,255,0.55);
  z-index: 2;
}

.lb-panel-hdr-dot { display: none; }
.lb-panel-hdr-line { display: none; }

.lb-panel-hdr-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,0.6), 0 0 22px rgba(28,224,255,0.7);
}

#leaderboard-wrap {
  position: relative;
  z-index: 1;
  padding: 4px 2px 0;
}

#leaderboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(40,16,90,0.55), rgba(20,8,60,0.6));
  border: 1px solid rgba(123,47,255,0.55);
  box-shadow: inset 0 0 18px rgba(123,47,255,0.18);
  border-radius: 4px;
  position: relative;
  transition: transform 0.15s, box-shadow 0.2s;
}

.rank-row:hover {
  transform: translateX(2px);
  box-shadow: inset 0 0 22px rgba(28,224,255,0.18), 0 0 14px rgba(224,64,251,0.3);
}

.rank-num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 30px;
  background: linear-gradient(180deg, rgba(28,224,255,0.18), rgba(123,47,255,0.25));
  border: 1.5px solid rgba(28,224,255,0.65);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(28,224,255,0.6);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

.rank-pseudo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 0 6px rgba(28,224,255,0.3);
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-pseudo::before {
  content: '';
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: rgba(0,229,255,0.10);
  background-image: var(--avatar-url, none);
  background-size: cover; background-position: center;
  border: 1px solid rgba(0,229,255,0.45);
  box-shadow: 0 0 8px rgba(0,229,255,0.18);
}
.rank-row.leader .rank-pseudo::before {
  border-color: rgba(255,210,90,0.7);
  box-shadow: 0 0 14px rgba(255,210,90,0.5);
}

.rank-amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--ss-cyan);
  text-shadow: 0 0 12px rgba(28,224,255,0.65);
  white-space: nowrap;
}
.rank-amount::after {
  content: '';
}

.rank-row.leader {
  background: linear-gradient(90deg, rgba(110,60,8,0.75), rgba(60,30,4,0.7));
  border: 1.5px solid rgba(255,184,48,0.85);
  box-shadow:
    inset 0 0 26px rgba(255,184,48,0.28),
    0 0 22px rgba(255,184,48,0.45);
}
.rank-row.leader .rank-num {
  background: linear-gradient(180deg, rgba(255,210,90,0.45), rgba(180,110,20,0.55));
  border-color: rgba(255,210,90,0.85);
  color: #fff5d2;
  text-shadow: 0 0 10px rgba(255,210,90,0.85);
}
.rank-row.leader .rank-pseudo { color: #fff5d2; }
.rank-row.leader .rank-amount {
  color: var(--ss-gold);
  text-shadow: 0 0 14px rgba(255,184,48,0.85);
}
.crown-icon { filter: drop-shadow(0 0 6px rgba(255,210,90,0.85)); }
.rank-row.leader .crown-icon path { fill: var(--ss-gold); }

/* Badge buzz gratuit sur la ligne leaderboard — décoratif, ne déplace pas le pseudo */
.rank-free-buzz {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 210, 90, 0.14);
  color: var(--ss-gold, #f6c552);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 184, 48, 0.55);
}
.rank-secrets {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.14);
  color: var(--ss-cyan, #00e5ff);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}
@media (max-width: 480px) {
  .rank-free-buzz { font-size: 0.72em; padding: 1px 5px; }
  .rank-secrets { font-size: 0.72em; padding: 1px 5px; }
}

.lb-slogan {
  display: none;
}

/* ── Fil du plateau ──────────────────────────────────────────────────────── */
#mod-feed.hex-module {
  position: relative;
  background: linear-gradient(180deg, rgba(60,16,110,0.72), rgba(20,8,50,0.85));
  border: 2px solid rgba(224,64,251,0.7);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.3),
    0 0 26px rgba(224,64,251,0.35),
    inset 0 0 32px rgba(123,47,255,0.18);
  padding: 28px 14px 14px;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  min-height: 320px;
  border-radius: 0;
  overflow: visible;
}

/* Chips filtres */
#feed-chips {
  display: flex; gap: 6px; margin: 8px 0 4px;
  flex-wrap: wrap; justify-content: center;
}
.feed-chip {
  background: rgba(20,8,40,0.6); border: 1px solid rgba(224,64,251,0.35);
  color: rgba(240,230,255,0.7);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer; border-radius: 2px;
  transition: all 0.18s ease;
}
.feed-chip:hover { color: #fff; border-color: rgba(224,64,251,0.7); }
.feed-chip.active {
  background: linear-gradient(90deg, rgba(224,64,251,0.4), rgba(123,47,255,0.4));
  border-color: #ff75e7; color: #fff;
  box-shadow: 0 0 12px rgba(224,64,251,0.5);
}

/* Badge unread */
#feed-unread-btn {
  display: block; margin: 6px auto 4px;
  background: linear-gradient(90deg, #ff2bd6, #7b2fff);
  border: 0; color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 14px; cursor: pointer; border-radius: 12px;
  box-shadow: 0 0 14px rgba(255,43,214,0.6);
  animation: feed-unread-pulse 1.4s ease-in-out infinite;
}
@keyframes feed-unread-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,43,214,0.6); }
  50%      { box-shadow: 0 0 22px rgba(255,43,214,0.95); }
}

/* Day separator */
.feed-day-sep {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(200,180,230,0.45); text-align: center;
  margin: 8px 0 2px; padding: 4px 0;
  border-bottom: 1px dashed rgba(224,64,251,0.18);
}
.feed-day-sep:first-child { margin-top: 0; }

#feed-list {
  margin-top: 10px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(224,64,251,0.5) transparent;
}
#feed-list::-webkit-scrollbar { width: 6px; }
#feed-list::-webkit-scrollbar-thumb {
  background: rgba(224,64,251,0.5);
  border-radius: 3px;
}
#feed-list .empty-state {
  padding: 24px 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  color: rgba(230,215,255,0.55);
  line-height: 1.5;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(20,8,40,0.55);
  border-left: 2px solid rgba(224,64,251,0.6);
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  animation: feed-fade-in 0.35s ease;
}
@keyframes feed-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse icône item neuf (1 fois) */
.feed-item-new .feed-icon { animation: feed-icon-pulse 1.4s ease-out 1; }
@keyframes feed-icon-pulse {
  0%   { transform: scale(0.6); box-shadow: 0 0 0 0 rgba(255,117,231,0.9); }
  60%  { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(255,117,231,0); }
  100% { transform: scale(1);   box-shadow: 0 0 10px rgba(224,64,251,0.45); }
}

/* Sub clamp 2 lignes + expand au click */
.feed-item .feed-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-item.feed-item-expanded .feed-sub {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.feed-item .feed-icon {
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(224,64,251,0.55), rgba(123,47,255,0.55));
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(224,64,251,0.45);
}
.feed-item .feed-body { flex: 1 1 auto; min-width: 0; }
.feed-item .feed-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #ff75e7;
  text-transform: uppercase;
}
.feed-item .feed-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(240,230,255,0.88);
  line-height: 1.4;
  margin-top: 2px;
  word-wrap: break-word;
}
.feed-item .feed-time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.66rem;
  color: rgba(200,180,230,0.55);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.feed-item.feed-theme-shock        { border-left-color: #ffcc33; }
.feed-item.feed-theme-shock .feed-icon        { background: linear-gradient(180deg, #ffcc33, #ff7a00); box-shadow: 0 0 12px rgba(255,180,0,0.55); }
.feed-item.feed-theme-shock .feed-title       { color: #ffd966; }

.feed-item.feed-theme-fight        { border-left-color: #ff3d71; }
.feed-item.feed-theme-fight .feed-icon        { background: linear-gradient(180deg, #ff3d71, #b8214a); box-shadow: 0 0 12px rgba(255,61,113,0.55); }
.feed-item.feed-theme-fight .feed-title       { color: #ff7a9e; }

.feed-item.feed-theme-secret       { border-left-color: #b482ff; }
.feed-item.feed-theme-secret .feed-icon       { background: linear-gradient(180deg, #b482ff, #5a2bd6); box-shadow: 0 0 12px rgba(180,130,255,0.55); }
.feed-item.feed-theme-secret .feed-title      { color: #d0b5ff; }

.feed-item.feed-theme-confession   { border-left-color: #1ce0ff; }
.feed-item.feed-theme-confession .feed-icon   { background: linear-gradient(180deg, #1ce0ff, #0a6f8c); box-shadow: 0 0 12px rgba(28,224,255,0.55); }
.feed-item.feed-theme-confession .feed-title  { color: #7ee9ff; }

.feed-item.feed-theme-reward       { border-left-color: #ffe066; }
.feed-item.feed-theme-reward .feed-icon       { background: linear-gradient(180deg, #ffe066, #b89a2a); box-shadow: 0 0 12px rgba(255,224,102,0.55); }
.feed-item.feed-theme-reward .feed-title      { color: #ffe88a; }

.feed-item.feed-theme-mission      { border-left-color: #6effb3; }
.feed-item.feed-theme-mission .feed-icon      { background: linear-gradient(180deg, #6effb3, #2a9c66); box-shadow: 0 0 12px rgba(110,255,179,0.5); }
.feed-item.feed-theme-mission .feed-title     { color: #a8ffd0; }

.feed-item.feed-theme-photo        { border-left-color: #ff9a3c; }
.feed-item.feed-theme-photo .feed-icon        { background: linear-gradient(180deg, #ff9a3c, #b85a14); box-shadow: 0 0 12px rgba(255,154,60,0.55); }
.feed-item.feed-theme-photo .feed-title       { color: #ffbf80; }
#mod-feed.hex-module::before,
#mod-feed.hex-module::after { content: none; }

#mod-feed .dm-mod-hdr {
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin: 0;
}

#mod-feed .hex-mod-label {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 28px;
  background: linear-gradient(90deg, var(--ss-pink), var(--ss-fuchsia), var(--ss-pink));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
  box-shadow: 0 0 22px rgba(224,64,251,0.6);
  white-space: nowrap;
}

#mod-feed .hex-icon-wrap-outer,
#mod-recompense .hex-icon-wrap-outer {
  width: 96px; height: 110px;
  background: linear-gradient(180deg, rgba(224,64,251,0.55), rgba(123,47,255,0.55));
  box-shadow:
    0 0 24px rgba(224,64,251,0.6),
    inset 0 0 14px rgba(255,255,255,0.18);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#mod-feed .hex-icon-wrap,
#mod-recompense .hex-icon-wrap {
  width: 86px; height: 100px;
  background: linear-gradient(180deg, rgba(60,20,120,0.85), rgba(20,8,50,0.95));
}

#mod-feed .hex-icon,
#mod-recompense .hex-icon {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,0.75), 0 0 26px rgba(224,64,251,0.7);
  opacity: 1;
}

.dm-divider, .rc-divider {
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,64,251,0.55), transparent);
  margin: 10px auto 6px;
}

.dm-title, .rc-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 0 12px rgba(224,64,251,0.5);
  letter-spacing: 0.04em;
  line-height: 1.32;
  text-align: center;
}

.dm-summary, .rc-summary {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  color: rgba(230, 215, 255, 0.78);
  line-height: 1.55;
  margin-top: 8px;
  text-align: center;
}

.dm-hdr-meta, .rc-hdr-meta { align-items: center; }

.dm-status-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 14px;
  background: rgba(0,0,0,0.45);
}

.dm-waiting-text {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  color: rgba(220, 200, 255, 0.85);
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  padding: 14px 8px 4px;
}

/* ── Récompense collective ───────────────────────────────────────────────── */
#mod-recompense.hex-module {
  position: relative;
  background: linear-gradient(180deg, rgba(28,16,100,0.72), rgba(8,4,40,0.85));
  border: 2px solid rgba(28,224,255,0.7);
  box-shadow:
    0 0 0 1px rgba(224,64,251,0.3),
    0 0 26px rgba(28,224,255,0.35),
    inset 0 0 32px rgba(28,224,255,0.12);
  padding: 28px 16px 18px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 200px;
  border-radius: 0;
  overflow: visible;
}
#mod-recompense.hex-module::before,
#mod-recompense.hex-module::after { content: none; }

#mod-recompense .hex-mod-label {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 28px;
  background: linear-gradient(90deg, var(--ss-cyan), var(--ss-blue), var(--ss-cyan));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
  box-shadow: 0 0 22px rgba(28,224,255,0.6);
  white-space: nowrap;
}
#mod-recompense .hex-icon-wrap-outer {
  background: linear-gradient(180deg, rgba(28,224,255,0.55), rgba(60,80,255,0.55));
  box-shadow: 0 0 24px rgba(28,224,255,0.6), inset 0 0 14px rgba(255,255,255,0.18);
}
#mod-recompense .hex-icon-wrap {
  background: linear-gradient(180deg, rgba(20,30,100,0.85), rgba(8,12,50,0.95));
}
#mod-recompense .hex-icon {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(255,255,255,0.85), 0 0 26px rgba(28,224,255,0.8);
}

.rc-title { color: #fff5d2; text-shadow: 0 0 12px rgba(255,184,48,0.45); }
.rc-final-badge {
  background: linear-gradient(90deg, var(--ss-gold), var(--ss-orange));
  color: #1a0a02;
  padding: 5px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 12px;
  display: inline-block;
  box-shadow: 0 0 18px rgba(255,184,48,0.55);
}

/* ── Progression de la maison ────────────────────────────────────────────── */
#mod-progression {
  position: relative;
  background: linear-gradient(180deg, rgba(60,16,90,0.72), rgba(20,8,50,0.85));
  border: 2px solid rgba(255,43,214,0.65);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.25),
    0 0 22px rgba(255,43,214,0.32),
    inset 0 0 28px rgba(123,47,255,0.18);
  padding: 26px 16px 18px;
  margin-top: 22px;
  border-radius: 0;
  overflow: hidden;
}
#mod-progression::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'><g fill='none' stroke='rgba(255,150,255,0.22)' stroke-width='0.9'><path d='M30 70 L30 50 L60 32 L90 50 L90 70 Z'/><path d='M90 70 L90 42 L130 22 L170 42 L170 70 Z'/><rect x='42' y='54' width='8' height='12'/><rect x='60' y='54' width='8' height='10'/><rect x='102' y='48' width='8' height='14'/><rect x='128' y='48' width='8' height='14'/><rect x='150' y='52' width='8' height='12'/></g></svg>")
    center bottom / 90% auto no-repeat;
  opacity: 0.7;
}

.prog-hdr {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 26px;
  background: linear-gradient(90deg, var(--ss-pink), var(--ss-magenta), var(--ss-pink));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
  box-shadow: 0 0 22px rgba(255,43,214,0.6);
  white-space: nowrap;
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}
.prog-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
}
.prog-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  color: #fff7c2;
}

.prog-track {
  position: relative;
  width: 100%;
  height: 18px;
  margin-top: 18px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,43,214,0.45);
  display: flex;
  gap: 4px;
  padding: 3px;
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-magenta), var(--ss-pink), var(--ss-fuchsia));
  box-shadow: 0 0 16px rgba(255,43,214,0.85);
  transition: width 0.6s ease;
}

.tier-list {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(224,64,251,0.25);
}
.tier-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,43,214,0.18);
  border: 1px solid rgba(255,43,214,0.45);
  flex-shrink: 0;
}
.tier-dot.reached { background: var(--ss-pink); box-shadow: 0 0 8px var(--ss-pink); }
.tier-dot.next    { background: var(--ss-gold); box-shadow: 0 0 8px var(--ss-gold); }
.tier-label {
  flex: 1;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  color: rgba(230,215,255,0.82);
}
.tier-label.reached { color: #fff; }
.tier-label.next    { color: var(--ss-gold); }
.tier-threshold {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(230,215,255,0.65);
}
.tier-threshold.reached { color: var(--ss-pink); text-shadow: 0 0 8px rgba(255,43,214,0.6); }
.tier-threshold.next    { color: var(--ss-gold); }

.prog-next-goal, .prog-all-unlocked {
  position: relative;
  z-index: 2;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 200, 245, 0.7);
  margin-top: 10px;
  text-align: center;
}
.prog-all-unlocked {
  font-family: 'Cinzel', serif;
  text-transform: none;
  color: var(--ss-gold);
}

/* ── Missions collectives panel ──────────────────────────────────────────── */
#section-label-missions { display: none; }

#collective-missions {
  position: relative;
  background: linear-gradient(180deg, rgba(60,16,110,0.72), rgba(20,8,50,0.85));
  border: 2px solid rgba(224,64,251,0.7);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.3),
    0 0 26px rgba(224,64,251,0.35),
    inset 0 0 32px rgba(123,47,255,0.18);
  padding: 30px 16px 18px;
  margin-top: 28px;
  border-radius: 0;
  overflow: visible;
  min-height: 240px;
}

#collective-missions::before {
  content: 'Missions Collectives';
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 30px;
  background: linear-gradient(90deg, var(--ss-pink), var(--ss-fuchsia), var(--ss-pink));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
  box-shadow: 0 0 22px rgba(224,64,251,0.6);
  white-space: nowrap;
}

#collective-missions::after {
  content: '';
  position: absolute;
  inset: 8px 0 0 0;
  height: 56%;
  pointer-events: none;
  z-index: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'><defs><radialGradient id='g' cx='50%25' cy='40%25' r='60%25'><stop offset='0%25' stop-color='%23ff75e7' stop-opacity='0.5'/><stop offset='100%25' stop-color='%23120640' stop-opacity='0'/></radialGradient></defs><rect width='240' height='140' fill='url(%23g)'/><g fill='none' stroke='rgba(255,150,255,0.32)' stroke-width='1.1'><path d='M40 110 L40 70 L120 30 L200 70 L200 110 Z'/><path d='M60 110 L60 80 L120 50 L180 80 L180 110'/><rect x='110' y='84' width='20' height='26'/><rect x='75' y='86' width='14' height='20'/><rect x='150' y='86' width='14' height='20'/></g><g fill='rgba(255,180,255,0.55)'><circle cx='60' cy='30' r='1.3'/><circle cx='100' cy='18' r='1'/><circle cx='180' cy='22' r='1.3'/><circle cx='200' cy='40' r='1'/><circle cx='30' cy='50' r='1'/></g><g transform='translate(120 60)'><ellipse cx='0' cy='0' rx='14' ry='8' fill='none' stroke='rgba(28,224,255,0.65)' stroke-width='1.1'/><circle r='4' fill='rgba(28,224,255,0.85)'/><circle r='1.2' fill='%23fff'/></g></svg>")
    center top / cover no-repeat;
  opacity: 0.85;
}

#collective-missions > * { position: relative; z-index: 1; }

#collective-missions .empty-state {
  color: rgba(230, 215, 255, 0.78);
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 30px 4px 14px;
}

.collective-mission-card {
  position: relative;
  background: rgba(8, 4, 32, 0.65);
  border: 1px solid rgba(28,224,255,0.4);
  padding: 12px 14px;
  margin-bottom: 8px;
  z-index: 1;
}
.collective-mission-card::before { content: none; }

.cm-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.88rem;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.45;
}
.cm-progress-bar {
  height: 6px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(224,64,251,0.35);
}
.cm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-pink), var(--ss-cyan));
  box-shadow: 0 0 10px rgba(255,43,214,0.6);
}
.cm-meta {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  color: rgba(230, 215, 255, 0.65);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

/* Header carte : badges (all + state) */
.cm-hdr { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cm-hdr:empty { display: none; }
.cm-badge-all {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(28,224,255,0.35), rgba(123,47,255,0.35));
  border: 1px solid rgba(28,224,255,0.55); color: #d6f5ff;
}
.cm-state-badge {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
}
.cm-state-expired   { background: rgba(80,60,90,0.4); border: 1px solid rgba(180,160,200,0.4); color: rgba(220,200,235,0.7); }
.cm-state-completed { background: rgba(46,180,110,0.25); border: 1px solid #6effb3; color: #a8ffd0; }
.cm-state-failed    { background: rgba(180,46,80,0.25); border: 1px solid #ff5e85; color: #ffb3c5; }

/* États de carte */
.collective-mission-card.cm-state-expired {
  opacity: 0.5; filter: grayscale(0.6);
}
.collective-mission-card.cm-state-completed { border-color: rgba(110,255,179,0.55); }
.collective-mission-card.cm-state-failed    { border-color: rgba(255,94,133,0.5); }

/* Deadline urgency colors */
.dm-deadline.dm-deadline-warn   { color: #ffcc66 !important; }
.dm-deadline.dm-deadline-urgent {
  color: #ff5e85 !important;
  animation: dm-deadline-blink 1s ease-in-out infinite;
}
@keyframes dm-deadline-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Pré-chargement de 3 objectifs emblématiques visibles en empty-state */
.coll-stars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.coll-stars-row {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,43,214,0.6);
}
.coll-stars-row svg { flex-shrink: 0; }

/* ── Footer slogan bar polygon ───────────────────────────────────────────── */
#board-footer {
  position: relative;
  margin: 30px auto 0;
  padding: 18px 36px;
  max-width: 720px;
  text-align: center;
  background: linear-gradient(90deg, rgba(20,8,60,0.85), rgba(60,20,110,0.85), rgba(20,8,60,0.85));
  border-top: 2px solid rgba(28,224,255,0.6);
  border-bottom: 2px solid rgba(255,43,214,0.65);
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 40px 100%, 0 50%);
  box-shadow: 0 0 28px rgba(224,64,251,0.35);
}
#board-footer .footer-scan { display: none; }

#board-footer .footer-slogan {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(224,64,251,0.7);
  line-height: 1.6;
}
#board-footer .footer-mark {
  display: block;
  margin: 8px auto 0;
  font-size: 1.4rem;
  color: var(--ss-cyan);
  text-shadow: 0 0 18px var(--ss-cyan);
}

/* ── Badge rail décoratif ────────────────────────────────────────────────── */
.badge-rail {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 22px auto 8px;
  padding: 0 4px;
  max-width: 720px;
}
.badge-rail-item {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(60,20,100,0.8) 0%, rgba(10,4,40,0.95) 100%);
  border: 1.5px solid rgba(224,64,251,0.55);
  border-radius: 50%;
  box-shadow:
    0 0 14px rgba(224,64,251,0.45),
    inset 0 0 10px rgba(28,224,255,0.2);
  position: relative;
}
.badge-rail-item.hex {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.badge-rail-item.gold {
  border-color: rgba(255,184,48,0.85);
  box-shadow: 0 0 14px rgba(255,184,48,0.55), inset 0 0 10px rgba(255,184,48,0.25);
}
.badge-rail-item.cyan {
  border-color: rgba(28,224,255,0.85);
  box-shadow: 0 0 14px rgba(28,224,255,0.55), inset 0 0 10px rgba(28,224,255,0.25);
}
.badge-rail-item svg { width: 26px; height: 26px; }
.badge-rail-item .num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.7);
}
.badge-rail-bar {
  flex: 0 0 110px;
  height: 10px;
  display: flex; gap: 4px;
  padding: 1px;
  border: 1px solid rgba(224,64,251,0.45);
  background: rgba(0,0,0,0.5);
}
.badge-rail-bar > i {
  flex: 1;
  background: var(--ss-magenta);
  box-shadow: 0 0 6px var(--ss-magenta);
}
.badge-rail-bar > i.off { background: rgba(255,255,255,0.06); box-shadow: none; }

/* ── Stage queue indicator ──────────────────────────────────────────────── */
#stage-queue-indicator {
  display: none;
  position: fixed; bottom: 14px; right: 14px;
  background: rgba(8, 4, 32, 0.92);
  border: 1px solid rgba(224,64,251,0.55);
  box-shadow: 0 0 14px rgba(224,64,251,0.4);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  z-index: 9000;
  pointer-events: none;
}

/* ── Stage overlay V2 (préservé verbatim de l'ancien inline) ────────────── */
@keyframes stage-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes stage-icon-pulse {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 8px currentColor); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 28px currentColor); }
}
@keyframes emoji-float {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(-90vh) rotate(360deg); opacity: 0; }
}
#ss-stage-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99100;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; cursor: pointer;
}
#ss-stage-overlay.active { display: flex; animation: stage-flash 8s ease forwards; }
/* Stage events avec manualDismiss=true (confession, free_buzz_granted) : fade-in seul, pas de fermeture auto */
#ss-stage-overlay.active.manual-dismiss { animation: stage-fade-in 0.5s ease forwards; }
@keyframes stage-fade-in { from { opacity: 0; } to { opacity: 1; } }
#ss-stage-overlay.theme-shock      { background: radial-gradient(ellipse at center, rgba(224,64,251,0.92) 0%, rgba(40,0,80,0.95) 100%); }
#ss-stage-overlay.theme-fight      { background: radial-gradient(ellipse at center, rgba(255,61,113,0.90) 0%, rgba(60,0,20,0.95) 100%); }
#ss-stage-overlay.theme-secret     { background: radial-gradient(ellipse at center, rgba(123,47,255,0.92) 0%, rgba(10,0,40,0.97) 100%); }
#ss-stage-overlay.theme-confession { background: radial-gradient(ellipse at center, rgba(30,20,55,0.97) 0%, rgba(8,6,22,0.99) 100%); }
#ss-stage-overlay.theme-reward     { background: radial-gradient(ellipse at center, rgba(255,210,90,0.85) 0%, rgba(60,30,5,0.96) 100%); }
.stage-icon { font-size: 4rem; line-height: 1; animation: stage-icon-pulse 0.6s ease infinite; }
.stage-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.8rem; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 40px rgba(255,255,255,0.4);
}
.stage-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.9rem; letter-spacing: 0.1em;
  text-align: center; max-width: 320px; line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.stage-tap { font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 12px; }
.stage-emoji-rain { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 99050; }
.stage-emoji-particle { position: absolute; bottom: -60px; font-size: 1.8rem; animation: emoji-float linear forwards; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — Layout 3 colonnes broadcast (>= 1100px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {

  /* ── Frame plateau — pleine page ────────────────────────────── */
  #hud-frame.board-stage {
    max-width: none;
    width: 100%;
    padding: 6px 18px 10px;
  }

  /* Spine glow derrière la colonne centrale — sensation de masse unique */
  #hud-frame.board-stage::after {
    content: '';
    position: absolute;
    top: 60px; bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 60%);
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 100% at 50% 35%, rgba(224,64,251,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 50% 80%  at 50% 75%, rgba(28,224,255,0.14) 0%, transparent 75%);
    filter: blur(8px);
    z-index: 0;
  }

  /* ── Grid 3 colonnes — pleine largeur ──────────────────────── */
  #desk-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(640px, 2.2fr) minmax(280px, 1fr);
    grid-template-areas:
      "phase    phase        phase"
      "leftcol  leaderboard  mission"
      "leftcol  leaderboard  mission"
      "photos   photos       photos"
      "secrets  secrets      secrets";
    grid-auto-rows: min-content;
    column-gap: 18px;
    row-gap: 4px;
    align-items: stretch;
    justify-items: stretch;
    z-index: 1;
  }

  /* Reset des margins desktop — la grille gère l'espacement */
  #board-leftcol,
  #brand-block,
  #phase-banner,
  .lb-panel,
  #mod-feed.hex-module,
  #mod-recompense.hex-module,
  #mod-progression,
  #collective-missions,
  .badge-rail {
    margin: 0;
    width: 100%;
    max-width: none;
  }

  /* ── COL GAUCHE — wrapper 1 cellule grid, brand + collective en flex ──
     Découple la colonne gauche : la hauteur du classement/fil ne peut
     plus repousser collective. Ajouts futurs centre/droite sans impact. */
  #board-leftcol {
    grid-area: leftcol;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }

  #brand-block {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
  }
  #brand-block .brand-eye-wrap { margin-bottom: 4px; }
  #brand-block .brand-eye-wrap svg { width: 72px; }
  #brand-block .brand-name {
    font-size: 2.3rem;
    line-height: 0.86;
    letter-spacing: 0.05em;
  }
  #brand-block .brand-tagline {
    font-size: 0.74rem;
    letter-spacing: 0.42em;
    padding: 4px 18px;
    margin-top: 10px;
  }
  #brand-block .brand-scan { width: 90%; max-width: 320px; margin-top: 10px; }

  #collective-missions {
    padding: 26px 16px 16px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
      0 0 0 1px rgba(28,224,255,0.32),
      0 0 30px rgba(224,64,251,0.4),
      inset 0 0 38px rgba(123,47,255,0.2);
  }
  #collective-missions > *:not(::before):not(::after) { position: relative; z-index: 1; }
  #collective-missions::before {
    font-size: 0.92rem;
    letter-spacing: 0.3em;
    padding: 7px 30px;
    top: -16px;
  }
  #collective-missions::after { height: 34%; opacity: 0.6; }
  #collective-missions .empty-state {
    padding: 14px 4px 8px;
    font-size: 0.86rem;
  }
  #collective-missions .coll-stars { margin-top: 8px; gap: 6px; padding-top: 8px; }
  #collective-missions .coll-stars-row {
    font-size: 0.92rem;
    letter-spacing: 0.2em;
    padding: 4px 0;
    border-top: 1px solid rgba(224,64,251,0.22);
  }
  #collective-missions .coll-stars-row:first-child { border-top: none; }

  /* ═══ COL CENTRE — bloc unifié phase + leaderboard + footer + badges ═══ */
  #phase-banner {
    grid-area: phase;
    align-self: end;
    padding: 10px 50px;
    font-size: 1.25rem;
    letter-spacing: 0.32em;
    margin: 0 20px -10px;       /* chevauche header leaderboard */
    z-index: 3;
  }

  .lb-panel {
    grid-area: leaderboard;
    padding: 28px 22px 14px;
    align-self: start;
    display: flex;
    flex-direction: column;
    margin: 0 -4px;             /* déborde légèrement = plus dominant */
    box-shadow:
      0 0 0 1px rgba(28,224,255,0.45),
      0 0 50px rgba(224,64,251,0.5),
      inset 0 0 60px rgba(123,47,255,0.25);
    border-width: 2.5px;
  }
  .lb-panel::before { inset: 6px; }
  .lb-panel #leaderboard-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
  }
  .lb-panel-hdr {
    top: -16px;
    min-width: 320px;
    padding: 8px 48px 7px;
    box-shadow: 0 0 32px rgba(28,224,255,0.7);
  }
  .lb-panel-hdr-label {
    font-size: 1.02rem;
    letter-spacing: 0.32em;
  }

  /* Footer = socle soudé au leaderboard */
  #board-footer {
    grid-area: footer;
    padding: 8px 36px 10px;
    margin: -10px 20px 0;       /* pénètre dans le leaderboard */
    border-top: none;
    clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 36px 100%, 0 50%);
    box-shadow:
      0 0 36px rgba(224,64,251,0.45),
      inset 0 0 24px rgba(28,224,255,0.1);
    z-index: 2;
  }
  #board-footer .footer-slogan {
    font-size: 1.1rem;
    letter-spacing: 0.24em;
    line-height: 1.3;
  }
  #board-footer .footer-mark { margin-top: 0; font-size: 0.95rem; }

  /* Badge rail = prolongement direct du footer */
  .badge-rail {
    grid-area: badges;
    justify-self: stretch;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 6px 32px 0;
    margin: -2px 28px 0;        /* aligné/inset avec le footer */
    flex-wrap: nowrap;
    overflow-x: visible;
    background:
      linear-gradient(180deg, rgba(20,8,60,0.0), rgba(20,8,60,0.45) 60%);
    border-radius: 0 0 6px 6px;
  }
  .badge-rail-item { width: 38px; height: 38px; }
  .badge-rail-item svg { width: 22px; height: 22px; }
  .badge-rail-item .num { font-size: 0.95rem; }
  .badge-rail-bar { flex: 1 1 70px; height: 10px; }

  /* ═══ COL DROITE — pile cohérente mission / reward / progress ═══ */
  #mod-feed.hex-module {
    grid-area: mission;
    padding: 20px 12px 12px;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow:
      0 0 0 1px rgba(28,224,255,0.34),
      0 0 28px rgba(224,64,251,0.4),
      inset 0 0 30px rgba(123,47,255,0.2);
  }
  #mod-feed .hex-mod-label {
    top: -14px;
    padding: 5px 24px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
  }

  #mod-recompense.hex-module {
    grid-area: reward;
    padding: 20px 12px 12px;
    min-height: 0;
    margin-top: 6px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
      0 0 0 1px rgba(224,64,251,0.32),
      0 0 28px rgba(28,224,255,0.4),
      inset 0 0 30px rgba(28,224,255,0.16);
  }
  #mod-recompense .hex-mod-label {
    top: -14px;
    padding: 5px 24px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
  }

  #mod-progression {
    grid-area: progress;
    padding: 20px 12px 12px;
    min-height: 0;
    margin-top: 6px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    box-shadow:
      0 0 0 1px rgba(28,224,255,0.32),
      0 0 28px rgba(255,43,214,0.4),
      inset 0 0 30px rgba(123,47,255,0.2);
  }
  /* Header progression — tenir dans 300px col */
  #mod-progression .prog-hdr {
    padding: 7px 24px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    gap: 8px;
    top: -18px;
  }
  #mod-progression .prog-label { font-size: 0.7rem; letter-spacing: 0.2em; }
  #mod-progression .prog-value { font-size: 0.7rem; }
  #mod-progression .prog-track { height: 22px; margin-top: 22px; }

  /* Hexagones desktop — FHD compacts */
  #mod-feed .hex-icon-wrap-outer,
  #mod-recompense .hex-icon-wrap-outer { width: 76px; height: 88px; margin-top: 2px; }
  #mod-feed .hex-icon-wrap,
  #mod-recompense .hex-icon-wrap       { width: 66px; height: 78px; }
  #mod-feed .hex-icon,
  #mod-recompense .hex-icon            { font-size: 1.95rem; }
  #mod-feed .dm-waiting-text,
  #mod-recompense .dm-waiting-text     { padding: 4px 4px 2px; font-size: 0.72rem; line-height: 1.4; }
  #mod-feed .dm-title,
  #mod-recompense .rc-title            { font-size: 0.88rem; }
  #mod-feed .dm-summary,
  #mod-recompense .rc-summary          { font-size: 0.68rem; margin-top: 4px; }
  #mod-feed .dm-status-badge        { font-size: 0.56rem; padding: 2px 10px; }
  #mod-feed .dm-tags                { margin-top: 6px; gap: 4px; }
  #mod-feed .dm-tag                 { font-size: 0.5rem; padding: 2px 6px; }
  #mod-feed .dm-divider,
  #mod-recompense .rc-divider          { margin: 4px auto 2px; }

  /* ── Tailles leaderboard rows — compactes FHD ─────────────── */
  .rank-row {
    padding: 6px 14px;
    grid-template-columns: 40px 1fr auto;
  }
  .rank-num    { width: 32px; height: 28px; font-size: 1rem; }
  .rank-pseudo { font-size: 1.05rem; }
  .rank-amount { font-size: 1.18rem; }

  /* Coupe l'overflow étoile background des panels droite */
  #mod-feed.hex-module,
  #mod-recompense.hex-module,
  #mod-progression,
  #collective-missions { overflow: visible; }

  /* Galerie photos — pleine largeur grid row */
  #board-photos-section {
    grid-area: photos;
    align-self: start;
    margin: 12px 0 0;
  }

  #board-secrets-section {
    grid-area: secrets;
    align-self: start;
    margin: 18px 0 0;
  }
}

/* ── Très grand desktop — pleine page sans max-width ────────── */
@media (min-width: 1500px) {
  #desk-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(800px, 2.4fr) minmax(300px, 1fr);
    column-gap: 26px;
  }
  #hud-frame.board-stage { padding: 18px 36px 28px; max-width: none; width: 100%; }
  #brand-block .brand-name { font-size: 3.4rem; }
  #brand-block .brand-eye-wrap svg { width: 110px; }
  .lb-panel-hdr-label { font-size: 1.32rem; }
  #board-footer .footer-slogan { font-size: 1.65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V1 — animations broadcast TV
   Toutes désactivées via prefers-reduced-motion: reduce
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Leader row pulse glow ──────────────────────────────────────────── */
@keyframes ss-leader-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 26px rgba(255,184,48,0.28),
      0 0 22px rgba(255,184,48,0.45);
  }
  50% {
    box-shadow:
      inset 0 0 32px rgba(255,184,48,0.4),
      0 0 36px rgba(255,184,48,0.7);
  }
}
.rank-row.leader {
  animation: ss-leader-pulse 3s ease-in-out infinite;
}

/* ── 2. Logo iris pulse + blink ────────────────────────────────────────── */
@keyframes ss-iris-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.brand-eye-wrap svg ellipse[fill="url(#ss-eye-glow)"] {
  transform-origin: 80px 55px;
  transform-box: fill-box;
  animation: ss-iris-pulse 4s ease-in-out infinite;
}

@keyframes ss-eye-blink {
  0%, 92%, 100% { transform: scaleY(1);   }
  95%           { transform: scaleY(0.08); }
  97%           { transform: scaleY(1);   }
}
.brand-eye-wrap svg {
  transform-origin: 50% 55%;
  animation: ss-eye-blink 9s ease-in-out infinite;
}

/* ── 3. Rank-row hover amplifié ────────────────────────────────────────── */
.rank-row { transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s; }
.rank-row:hover:not(.leader) {
  transform: translateX(4px);
  border-color: rgba(28,224,255,0.85);
  box-shadow:
    inset 0 0 26px rgba(28,224,255,0.22),
    0 0 22px rgba(224,64,251,0.45),
    -4px 0 0 0 rgba(28,224,255,0.85);
}

/* ── 4. Slogan gradient text animé ─────────────────────────────────────── */
@keyframes ss-slogan-shimmer {
  0%   { background-position: -150% 50%; }
  100% { background-position: 250%  50%; }
}
#board-footer .footer-slogan {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ff75e7 25%,
    #1ce0ff 50%,
    #ff75e7 75%,
    #ffffff 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ss-slogan-shimmer 6s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(224,64,251,0.55));
}

/* ── 5. Phase banner scanline hologramme ───────────────────────────────── */
#phase-banner {
  overflow: hidden;
  isolation: isolate;
}
#phase-banner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%);
  animation: ss-scanline 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ss-scanline {
  0%   { left: -40%; }
  100% { left: 140%; }
}

/* ── 6. Hex icons outer rotation lente ─────────────────────────────────── */
@keyframes ss-hex-spin {
  to { transform: rotate(360deg); }
}
#mod-feed .hex-icon-wrap-outer,
#mod-recompense .hex-icon-wrap-outer {
  animation: ss-hex-spin 40s linear infinite;
}
#mod-feed .hex-icon-wrap,
#mod-recompense .hex-icon-wrap {
  animation: ss-hex-spin 40s linear infinite reverse;
}

/* ── 7. Badge rail stagger appear ──────────────────────────────────────── */
@keyframes ss-badge-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    }
}
.badge-rail-item,
.badge-rail-bar {
  animation: ss-badge-pop 0.5s ease-out backwards;
}
.badge-rail > *:nth-child(1)  { animation-delay: 0.05s; }
.badge-rail > *:nth-child(2)  { animation-delay: 0.10s; }
.badge-rail > *:nth-child(3)  { animation-delay: 0.15s; }
.badge-rail > *:nth-child(4)  { animation-delay: 0.20s; }
.badge-rail > *:nth-child(5)  { animation-delay: 0.25s; }
.badge-rail > *:nth-child(6)  { animation-delay: 0.30s; }
.badge-rail > *:nth-child(7)  { animation-delay: 0.35s; }
.badge-rail > *:nth-child(8)  { animation-delay: 0.40s; }
.badge-rail > *:nth-child(9)  { animation-delay: 0.45s; }
.badge-rail > *:nth-child(10) { animation-delay: 0.50s; }
.badge-rail > *:nth-child(11) { animation-delay: 0.55s; }

/* ── 8. Progress fill shimmer interne ──────────────────────────────────── */
.prog-fill {
  position: relative;
  overflow: hidden;
}
.prog-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 50%,
    transparent 100%);
  animation: ss-prog-shimmer 2.8s ease-in-out infinite;
}
@keyframes ss-prog-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(280%);  }
}

/* ── 9. Halftone dots subtils sur panels secondaires ──────────────────── */
.board-panel,
#mod-feed.hex-module,
#mod-recompense.hex-module,
#mod-progression,
.lb-panel,
#collective-missions {
  position: relative;
}
.board-panel::after,
.lb-panel::after,
#mod-feed.hex-module::after,
#mod-recompense.hex-module::after {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 0.8px, transparent 1.2px);
  background-size: 14px 14px;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.lb-panel::after,
#mod-feed.hex-module::after,
#mod-recompense.hex-module::after {
  inset: 8px;
}
/* Garde le contenu au-dessus du halftone */
.lb-panel > *,
#mod-feed.hex-module > *,
#mod-recompense.hex-module > * { position: relative; z-index: 1; }

/* ── 10. Médailles rangs 2 (argent) & 3 (bronze) ──────────────────────── */
.rank-row:nth-child(2):not(.leader) .rank-num {
  background: linear-gradient(180deg, rgba(220,220,235,0.45), rgba(120,130,150,0.55));
  border-color: rgba(220,220,235,0.85);
  color: #f5f7ff;
  text-shadow: 0 0 8px rgba(220,220,235,0.7);
}
.rank-row:nth-child(2):not(.leader) {
  background: linear-gradient(90deg, rgba(70,75,95,0.55), rgba(30,32,50,0.6));
  border-color: rgba(200,210,230,0.6);
  box-shadow: inset 0 0 18px rgba(200,210,230,0.14);
}
.rank-row:nth-child(3):not(.leader) .rank-num {
  background: linear-gradient(180deg, rgba(220,140,60,0.45), rgba(140,75,20,0.55));
  border-color: rgba(220,140,60,0.85);
  color: #ffe2bf;
  text-shadow: 0 0 8px rgba(220,140,60,0.7);
}
.rank-row:nth-child(3):not(.leader) {
  background: linear-gradient(90deg, rgba(90,55,20,0.55), rgba(40,25,10,0.6));
  border-color: rgba(220,140,60,0.6);
  box-shadow: inset 0 0 18px rgba(220,140,60,0.16);
}

/* ── 11. Empty state — 3 dots animés ──────────────────────────────────── */
@keyframes ss-empty-dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}
.empty-state {
  position: relative;
}
.empty-state::after {
  content: '• • •';
  display: block;
  margin-top: 8px;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  color: rgba(224,64,251,0.6);
  text-align: center;
  animation: ss-empty-dot 1.6s ease-in-out infinite;
}

/* ── 12. Reduced motion guard ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rank-row.leader,
  .brand-eye-wrap svg,
  .brand-eye-wrap svg ellipse[fill="url(#ss-eye-glow)"],
  #board-footer .footer-slogan,
  #phase-banner::before,
  #mod-feed .hex-icon-wrap-outer,
  #mod-recompense .hex-icon-wrap-outer,
  #mod-feed .hex-icon-wrap,
  #mod-recompense .hex-icon-wrap,
  .badge-rail-item,
  .badge-rail-bar,
  .prog-fill::after,
  .empty-state::after {
    animation: none !important;
  }
  #board-footer .footer-slogan {
    -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(224,64,251,0.7);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V2 — passes complémentaires
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Aurore bottom + nebula hue-rotate ─────────────────────────────── */
body.ss-board::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 100% at 30% 100%, rgba(255,43,214,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 60% 100% at 75% 100%, rgba(28,224,255,0.12) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
  animation: ss-aurora-shift 12s ease-in-out infinite alternate;
}
@keyframes ss-aurora-shift {
  0%   { transform: translateX(-4%) scaleX(1);   opacity: 0.85; }
  100% { transform: translateX(4%)  scaleX(1.05); opacity: 1; }
}

@keyframes ss-nebula-hue {
  0%, 100% { filter: blur(22px) hue-rotate(0deg); }
  50%      { filter: blur(22px) hue-rotate(28deg); }
}
#brand-block::before {
  animation: ss-aura-spin 28s linear infinite, ss-nebula-hue 20s ease-in-out infinite;
}

/* ── B. Leaderboard — sparkles + score bar ────────────────────────────── */
.rank-row.leader::before,
.rank-row.leader::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ss-gold);
  box-shadow: 0 0 8px var(--ss-gold), 0 0 14px rgba(255,210,90,0.7);
  pointer-events: none;
}
.rank-row.leader { position: relative; overflow: visible; }
.rank-row.leader::before {
  top: 6px; right: 14%;
  animation: ss-sparkle-a 2.4s ease-in-out infinite;
}
.rank-row.leader::after {
  bottom: 8px; right: 32%;
  animation: ss-sparkle-b 3.1s ease-in-out infinite;
}
@keyframes ss-sparkle-a {
  0%, 100% { opacity: 0; transform: scale(0.4) translate(0,0); }
  50%      { opacity: 1; transform: scale(1)   translate(-6px,-4px); }
}
@keyframes ss-sparkle-b {
  0%, 100% { opacity: 0; transform: scale(0.3) translate(0,0); }
  60%      { opacity: 1; transform: scale(1.1) translate(8px,-6px); }
}

/* Crown rotateY subtil */
@keyframes ss-crown-spin {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(360deg); }
}
.rank-row.leader .crown-icon {
  transform-style: preserve-3d;
  animation: ss-crown-spin 6s ease-in-out infinite;
}

/* ── C. Mission status badges blink + tags glint ──────────────────────── */
@keyframes ss-status-blink {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(28,224,255,0); }
  30%           { box-shadow: 0 0 14px 2px rgba(28,224,255,0.6); }
}
.dm-status-active { animation: ss-status-blink 1.8s ease-in-out infinite; }

@keyframes ss-status-pulse-warn {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; box-shadow: 0 0 14px rgba(200,151,58,0.6); }
}
.dm-status-upcoming { animation: ss-status-pulse-warn 2.2s ease-in-out infinite; }

.dm-tag { position: relative; overflow: hidden; }
.dm-tag::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: ss-tag-glint 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ss-tag-glint {
  0%, 80%, 100% { left: -60%; opacity: 0; }
  85%           { left: -60%; opacity: 1; }
  95%           { left: 110%; opacity: 1; }
  100%          { left: 110%; opacity: 0; }
}

/* ── D. Récompense — final badge confetti + ★ glow ────────────────────── */
#mod-recompense .hex-icon {
  animation: ss-reward-shine 3s ease-in-out infinite;
}
@keyframes ss-reward-shine {
  0%, 100% { text-shadow: 0 0 14px rgba(255,255,255,0.85), 0 0 26px rgba(28,224,255,0.8); }
  50%      { text-shadow: 0 0 20px rgba(255,255,255,1),    0 0 40px rgba(255,184,48,0.85); }
}

.rc-final-badge {
  position: relative;
  overflow: visible;
}
.rc-final-badge::before,
.rc-final-badge::after {
  content: '✦';
  position: absolute;
  color: var(--ss-gold);
  font-size: 0.9rem;
  animation: ss-confetti 2.4s ease-in-out infinite;
  pointer-events: none;
}
.rc-final-badge::before { top: -12px; left: -8px; animation-delay: 0s; }
.rc-final-badge::after  { top: -10px; right: -8px; animation-delay: 0.8s; }
@keyframes ss-confetti {
  0%, 100% { opacity: 0; transform: translateY(0) rotate(0deg); }
  50%      { opacity: 1; transform: translateY(-6px) rotate(120deg); }
}

/* ── E. Progression — fenêtres maison + tier next pulse + markers ─────── */
#mod-progression::before {
  animation: ss-house-glow 4.5s ease-in-out infinite;
}
@keyframes ss-house-glow {
  0%, 100% { opacity: 0.55; filter: brightness(1) saturate(1); }
  50%      { opacity: 0.85; filter: brightness(1.4) saturate(1.4); }
}

@keyframes ss-tier-next-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 8px var(--ss-gold); }
  50%      { transform: scale(1.35); box-shadow: 0 0 16px var(--ss-gold), 0 0 24px rgba(255,184,48,0.6); }
}
.tier-dot.next { animation: ss-tier-next-pulse 1.6s ease-in-out infinite; }

/* Tier markers verticaux sur la fill bar */
.prog-track {
  background:
    rgba(0,0,0,0.45),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 1px),
      rgba(255,255,255,0.18) calc(25% - 1px),
      rgba(255,255,255,0.18) 25%);
}

/* ── F. Missions collectives — œil + stars alternate glow + tilt hover ── */
@keyframes ss-stars-glow-a {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,150,255,0.6)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,150,255,1)); }
}
@keyframes ss-stars-glow-b {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(28,224,255,0.6)); }
  50%      { filter: drop-shadow(0 0 12px rgba(28,224,255,1)); }
}
@keyframes ss-stars-glow-c {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,184,48,0.6)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,184,48,1)); }
}
.coll-stars-row:nth-child(1) svg { animation: ss-stars-glow-a 2.6s ease-in-out infinite; }
.coll-stars-row:nth-child(2) svg { animation: ss-stars-glow-b 2.6s ease-in-out infinite 0.6s; }
.coll-stars-row:nth-child(3) svg { animation: ss-stars-glow-c 2.6s ease-in-out infinite 1.2s; }

.collective-mission-card {
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
.collective-mission-card:hover {
  transform: translateY(-3px) rotateX(2deg);
  box-shadow:
    0 6px 20px rgba(224,64,251,0.45),
    inset 0 0 24px rgba(28,224,255,0.18);
}

/* ── G. Phase banner — variantes data-phase + glitch ──────────────────── */
@keyframes ss-phase-glitch {
  0%, 96%, 100% { text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 32px rgba(224,64,251,0.7); }
  97%           { text-shadow: -2px 0 #1ce0ff, 2px 0 #ff2bd6, 0 0 32px rgba(224,64,251,0.7); }
  98%           { text-shadow: 2px 0 #1ce0ff, -2px 0 #ff2bd6, 0 0 32px rgba(224,64,251,0.7); }
}
#phase-banner { animation: ss-phase-glitch 7s linear infinite; }

/* ── H. Badge rail — hover scale + tooltip-like + bars seq fill ───────── */
.badge-rail-item {
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.badge-rail-item:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow:
    0 0 22px rgba(224,64,251,0.75),
    inset 0 0 14px rgba(28,224,255,0.3);
  z-index: 5;
}

@keyframes ss-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.badge-rail-bar > i {
  transform-origin: left;
  animation: ss-bar-fill 0.5s ease-out backwards;
}
.badge-rail-bar > i:nth-child(1) { animation-delay: 0.7s; }
.badge-rail-bar > i:nth-child(2) { animation-delay: 0.8s; }
.badge-rail-bar > i:nth-child(3) { animation-delay: 0.9s; }
.badge-rail-bar > i:nth-child(4) { animation-delay: 1.0s; }
.badge-rail-bar > i:nth-child(5) { animation-delay: 1.1s; }

/* ── I. Footer mark rotation + slogan mirror ──────────────────────────── */
@keyframes ss-mark-spin {
  to { transform: rotate(360deg); }
}
#board-footer .footer-mark {
  display: inline-block;
  animation: ss-mark-spin 12s linear infinite;
}

/* ── K. Stage overlay — backdrop blur progressif + title scale-in ─────── */
#ss-stage-overlay.active {
  backdrop-filter: blur(0px);
  animation: stage-flash 8s ease forwards, ss-stage-blur 0.6s ease-out forwards;
}
@keyframes ss-stage-blur {
  from { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@keyframes ss-stage-title-in {
  0%   { transform: scale(0.3) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(-4px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
#ss-stage-overlay.active .stage-title {
  animation: ss-stage-title-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
}
#ss-stage-overlay.active .stage-sub {
  animation: ss-stage-title-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) backwards 0.15s;
}

/* ── L. Accessibilité — focus rings + ARIA + skeleton shimmer ─────────── */
.badge-rail-item:focus-visible,
.collective-mission-card:focus-visible,
.rank-row:focus-visible {
  outline: 2px solid var(--ss-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 18px rgba(28,224,255,0.6);
}

/* Skeleton shimmer pour empty-state alternatif (au cas où) */
@keyframes ss-skeleton-shimmer {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
.empty-state.skeleton {
  background: linear-gradient(
    90deg,
    rgba(28,224,255,0.04) 0%,
    rgba(224,64,251,0.12) 50%,
    rgba(28,224,255,0.04) 100%);
  background-size: 200% 100%;
  animation: ss-skeleton-shimmer 2s linear infinite;
  color: transparent;
}
.empty-state.skeleton::after { display: none; }

/* ── N. Confetti permanents — drift continu sur board ──────────────── */
#hud-frame.board-stage {
  position: relative;
}
#hud-frame.board-stage > .ss-confetti-layer,
#hud-frame.board-stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ff2bd6 1.6px, transparent 2.2px),
    radial-gradient(circle, #1ce0ff 1.4px, transparent 2px),
    radial-gradient(circle, #ffb830 1.4px, transparent 2px),
    radial-gradient(circle, #ffffff 1px,   transparent 1.6px);
  background-size:
    280px 380px,
    340px 420px,
    420px 500px,
    240px 340px;
  background-position:
    0 0,
    140px 80px,
    60px 200px,
    200px 40px;
  background-repeat: repeat;
  animation: ss-confetti-drift 26s linear infinite;
  opacity: 0.5;
  z-index: 0;
  mix-blend-mode: screen;
}

@keyframes ss-confetti-drift {
  from {
    background-position:
      0 0,
      140px 80px,
      60px 200px,
      200px 40px;
  }
  to {
    background-position:
      0 380px,
      140px 500px,
      60px 700px,
      200px 380px;
  }
}

/* Confetti burst autour du leader row — supplément continu */
.rank-row.leader {
  background-image:
    radial-gradient(circle at 8% 50%,  #ffb830 1.3px, transparent 1.8px),
    radial-gradient(circle at 92% 50%, #ff2bd6 1.3px, transparent 1.8px),
    radial-gradient(circle at 25% 90%, #1ce0ff 1.2px, transparent 1.7px),
    radial-gradient(circle at 75% 10%, #ffffff 1px,   transparent 1.5px),
    linear-gradient(90deg, rgba(110,60,8,0.75), rgba(60,30,4,0.7));
  background-size: 60px 60px, 70px 70px, 80px 80px, 50px 50px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  animation:
    ss-leader-pulse 3s ease-in-out infinite,
    ss-leader-confetti 8s linear infinite;
}
@keyframes ss-leader-confetti {
  to {
    background-position:
      60px 60px,
      -70px 70px,
      80px -80px,
      -50px 50px,
      0 0;
  }
}

/* ── M. Reduced motion — guard pour V2 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #hud-frame.board-stage::before,
  .rank-row.leader,
  body.ss-board::after,
  #brand-block::before,
  .rank-row.leader::before,
  .rank-row.leader::after,
  .rank-row.leader .crown-icon,
  .dm-status-active,
  .dm-status-upcoming,
  .dm-tag::after,
  #mod-recompense .hex-icon,
  .rc-final-badge::before,
  .rc-final-badge::after,
  #mod-progression::before,
  .tier-dot.next,
  .coll-stars-row svg,
  #phase-banner,
  .badge-rail-bar > i,
  #board-footer .footer-mark,
  #ss-stage-overlay.active,
  #ss-stage-overlay.active .stage-title,
  #ss-stage-overlay.active .stage-sub,
  .empty-state.skeleton {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V3 — Finitions facilement perceptibles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Étoile filante — retiré (artefact visuel) ─────────────────────── */

/* ── 2. Vagues colorées au fond toutes 8s ─────────────────────────────── */
body.ss-board::after {
  animation: ss-aurora-shift 12s ease-in-out infinite alternate,
             ss-aurora-wave 8s ease-in-out infinite;
}
@keyframes ss-aurora-wave {
  0%, 100% { filter: blur(20px) hue-rotate(0deg);   }
  50%      { filter: blur(28px) hue-rotate(40deg);  }
}

/* ── 3. Hover panneaux mission / récompense / progression ─────────────── */
#mod-feed.hex-module,
#mod-recompense.hex-module,
#mod-progression {
  transition: box-shadow 0.35s ease, transform 0.25s ease, border-color 0.3s;
}
#mod-feed.hex-module:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.55),
    0 0 42px rgba(224,64,251,0.65),
    inset 0 0 38px rgba(123,47,255,0.32);
  border-color: rgba(255,43,214,0.9);
}
#mod-recompense.hex-module:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(224,64,251,0.55),
    0 0 42px rgba(28,224,255,0.65),
    inset 0 0 38px rgba(28,224,255,0.28);
  border-color: rgba(28,224,255,0.95);
}
#mod-progression:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.55),
    0 0 42px rgba(255,43,214,0.65),
    inset 0 0 38px rgba(123,47,255,0.32);
  border-color: rgba(255,43,214,0.9);
}

/* ── 4. Hex tourne plus vite au survol mission/récompense ─────────────── */
#mod-feed.hex-module:hover .hex-icon-wrap-outer,
#mod-recompense.hex-module:hover .hex-icon-wrap-outer {
  animation-duration: 8s;
}
#mod-feed.hex-module:hover .hex-icon-wrap,
#mod-recompense.hex-module:hover .hex-icon-wrap {
  animation-duration: 8s;
}

/* ── 5. Progress bar brille plus fort hover ───────────────────────────── */
#mod-progression:hover .prog-fill {
  box-shadow: 0 0 26px rgba(255,43,214,1), 0 0 40px rgba(28,224,255,0.6);
}
#mod-progression:hover .prog-fill::after {
  animation-duration: 1.4s;
}

/* ── 6. Status badge "réussie" check animé ────────────────────────────── */
.dm-status-completed::before {
  content: '✓';
  display: inline-block;
  margin-right: 4px;
  font-weight: 900;
  animation: ss-check-pop 0.6s ease-out backwards;
}
@keyframes ss-check-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.4) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0);     opacity: 1; }
}

/* Status "Échouée" — croix rouge */
.dm-status-failed::before {
  content: '✕';
  display: inline-block;
  margin-right: 4px;
  font-weight: 900;
}

/* ── 7. Tier dot reached pop quand atteint ────────────────────────────── */
@keyframes ss-tier-reached-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.5); opacity: 1; box-shadow: 0 0 16px var(--ss-pink); }
  100% { transform: scale(1);   opacity: 1; box-shadow: 0 0 8px var(--ss-pink); }
}
.tier-dot.reached {
  animation: ss-tier-reached-pop 0.5s ease-out backwards;
}

/* Tier label reached — strikethrough subtil + check */
.tier-label.reached::after {
  content: ' ✓';
  color: var(--ss-pink);
  font-weight: 900;
}

/* ── 8. Pseudo long fade au bout au lieu de tronquer brutal ───────────── */
.rank-pseudo {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
/* Désactive le mask quand le pseudo n'est pas tronqué — impossible CSS pur, mais l'effet est cosmétique uniforme */

/* ── 9. Cursor custom néon sur le board ───────────────────────────────── */
body.ss-board {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='%23ff2bd6'/><circle cx='12' cy='12' r='8' fill='none' stroke='%231ce0ff' stroke-width='1.4'/></svg>") 12 12, auto;
}
body.ss-board button,
body.ss-board .rank-row,
body.ss-board .badge-rail-item,
body.ss-board .collective-mission-card {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='%23ffb830'/><circle cx='12' cy='12' r='9' fill='none' stroke='%23ff2bd6' stroke-width='1.6'/></svg>") 12 12, pointer;
}

/* ── 10. Selection text fuchsia ───────────────────────────────────────── */
body.ss-board ::selection {
  background: rgba(255,43,214,0.45);
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
body.ss-board ::-moz-selection {
  background: rgba(255,43,214,0.45);
  color: #fff;
}

/* ── 11. Scrollbar custom néon ────────────────────────────────────────── */
body.ss-board ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.ss-board ::-webkit-scrollbar-track {
  background: rgba(8, 4, 32, 0.6);
}
body.ss-board ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ss-pink), var(--ss-fuchsia), var(--ss-cyan));
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
}
body.ss-board ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ss-cyan), var(--ss-pink));
}
body.ss-board {
  scrollbar-color: var(--ss-pink) rgba(8,4,32,0.6);
  scrollbar-width: thin;
}

/* ── 12. Tagline machine à écrire ─────────────────────────────────────── */
@keyframes ss-typewriter {
  0%, 8%   { width: 0; }
  18%, 88% { width: 100%; }
  98%, 100%{ width: 0; }
}
@keyframes ss-cursor-blink {
  0%, 50%, 100% { border-right-color: rgba(28,224,255,0.85); }
  25%, 75%      { border-right-color: transparent; }
}
#brand-block .brand-tagline {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(28,224,255,0.85);
  animation:
    ss-typewriter 14s steps(20, end) infinite,
    ss-cursor-blink 0.8s steps(1, end) infinite;
}

/* ── 13. Reduced motion guard V3 ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.ss-board::after,
  #mod-feed.hex-module:hover .hex-icon-wrap-outer,
  #mod-recompense.hex-module:hover .hex-icon-wrap-outer,
  #mod-feed.hex-module:hover .hex-icon-wrap,
  #mod-recompense.hex-module:hover .hex-icon-wrap,
  .dm-status-completed::before,
  .tier-dot.reached,
  #brand-block .brand-tagline {
    animation: none !important;
  }
  #brand-block .brand-tagline {
    width: auto;
    border-right: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V4 — 14 finitions atmosphère + leaderboard + détails
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Light scan vertical leaderboard ──────────────────────────────── */
.lb-panel { overflow: hidden; }
#leaderboard-wrap { position: relative; }
#leaderboard-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(28,224,255,0.18) 50%,
    transparent 100%);
  pointer-events: none;
  animation: ss-lb-scan 8s ease-in-out infinite;
  z-index: 2;
  mix-blend-mode: screen;
}
@keyframes ss-lb-scan {
  0%   { top: -60px;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── B. Vignette dark coins viewport ─────────────────────────────────── */
body.ss-board {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,    rgba(224,64,251,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 15% 25%,   rgba(28,224,255,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 88% 30%,   rgba(123,47,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 100%,  rgba(123,47,255,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,  transparent 55%, rgba(0,0,0,0.7) 100%),
    var(--ss-deep);
  background-attachment: fixed;
}

/* ── C. Spores remontent du bas ──────────────────────────────────────── */
@keyframes ss-spores-up {
  from { background-position: 80px 100vh, 240px 100vh; }
  to   { background-position: 80px -320px, 240px -480px; }
}
.topbar-spacer::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,150,255,0.4) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(28,224,255,0.35) 1px,   transparent 1.5px);
  background-size: 320px 320px, 480px 480px;
  background-position: 80px 100vh, 240px 100vh;
  animation: ss-spores-up 18s linear infinite;
  z-index: 0;
  opacity: 0.55;
}

/* ── D. EN DIRECT ribbon haut-droit leaderboard ──────────────────────── */
.lb-panel { position: relative; }
.lb-panel > .ss-live,
.lb-panel::after {
  content: 'EN DIRECT';
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 10px;
  background: linear-gradient(90deg, #ff1d3a, #ff5a3a);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255,30,60,0.7);
  z-index: 3;
  animation: ss-live-blink 1.6s ease-in-out infinite;
  /* annule halftone précédent qui utilisait lb-panel::after */
  inset: auto 8px auto auto;
  background-image: linear-gradient(90deg, #ff1d3a, #ff5a3a);
  background-size: auto;
  mix-blend-mode: normal;
}
@keyframes ss-live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px rgba(255,30,60,0.7); }
  50%      { opacity: 0.7; box-shadow: 0 0 22px rgba(255,30,60,1); }
}

/* ── E. Logo respire scale lent ──────────────────────────────────────── */
@keyframes ss-logo-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.025); }
}
#brand-block .brand-name {
  transform-origin: center;
  animation: ss-logo-breathe 4.5s ease-in-out infinite;
}

/* ── F. Slogan reflet miroir ─────────────────────────────────────────── */
#board-footer .footer-slogan {
  position: relative;
}

/* ── G. Avatar placeholder rond rang ─────────────────────────────────── */
.rank-pseudo::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(28,224,255,0.4), rgba(123,47,255,0.6));
  border: 1.5px solid rgba(28,224,255,0.7);
  box-shadow: 0 0 8px rgba(28,224,255,0.4), inset 0 0 6px rgba(255,255,255,0.2);
  flex-shrink: 0;
  margin-right: 2px;
}
.rank-row.leader .rank-pseudo::before {
  background: radial-gradient(circle at 35% 30%, rgba(255,210,90,0.55), rgba(180,110,20,0.75));
  border-color: rgba(255,210,90,0.85);
  box-shadow: 0 0 10px rgba(255,210,90,0.6);
}

/* ── H. Score bar fond rank-row (décroissant nth-child) ──────────────── */
.rank-row {
  position: relative;
  isolation: isolate;
}
.rank-row > .ss-scorebar,
.rank-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(28,224,255,0.16), rgba(28,224,255,0.02) 80%, transparent);
  pointer-events: none;
  z-index: -1;
  transition: width 0.4s ease;
  border-radius: 0;
}
.rank-row:nth-child(1)::before  { width: 100%; }
.rank-row:nth-child(2)::before  { width: 85%; }
.rank-row:nth-child(3)::before  { width: 72%; }
.rank-row:nth-child(4)::before  { width: 60%; }
.rank-row:nth-child(5)::before  { width: 50%; }
.rank-row:nth-child(6)::before  { width: 42%; }
.rank-row:nth-child(7)::before  { width: 35%; }
.rank-row:nth-child(8)::before  { width: 28%; }
.rank-row:nth-child(9)::before  { width: 22%; }
.rank-row:nth-child(10)::before { width: 16%; }
.rank-row:nth-child(11)::before { width: 12%; }
.rank-row:nth-child(12)::before { width: 8%;  }
.rank-row.leader::before {
  background: linear-gradient(90deg, rgba(255,184,48,0.32), rgba(255,184,48,0.05) 85%, transparent);
}

/* ── I. Border-glow scintillement panneaux ───────────────────────────── */
@keyframes ss-border-flicker {
  0%, 100% { border-color: rgba(224,64,251,0.7); }
  50%      { border-color: rgba(28,224,255,0.7); }
}
#mod-feed.hex-module,
#mod-recompense.hex-module,
#mod-progression,
#collective-missions {
  animation: ss-border-flicker 7s ease-in-out infinite;
}
#mod-recompense.hex-module      { animation-delay: 1.5s; }
#mod-progression                { animation-delay: 3s; }
#collective-missions            { animation-delay: 4.5s; }

/* ── J. Halftone dots drift ──────────────────────────────────────────── */
.board-panel::after,
#mod-feed.hex-module::after,
#mod-recompense.hex-module::after {
  animation: ss-halftone-drift 24s linear infinite;
}
@keyframes ss-halftone-drift {
  to { background-position: 14px 14px; }
}

/* ── K. Stage queue pulse ────────────────────────────────────────────── */
@keyframes ss-queue-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(224,64,251,0.4); }
  50%      { box-shadow: 0 0 24px rgba(224,64,251,0.85), 0 0 36px rgba(255,43,214,0.5); }
}
#stage-queue-indicator { animation: ss-queue-pulse 2s ease-in-out infinite; }

/* ── L. Hover individuel rang plus marqué ───────────────────────────── */
.rank-row:hover:not(.leader)::before {
  width: 100% !important;
  background: linear-gradient(90deg, rgba(28,224,255,0.28), rgba(224,64,251,0.12) 80%, transparent);
  transition: width 0.6s ease, background 0.3s;
}
.rank-row:hover:not(.leader) .rank-pseudo::before {
  box-shadow: 0 0 14px rgba(28,224,255,0.85), inset 0 0 8px rgba(255,255,255,0.4);
  transform: scale(1.1);
}

/* ── M. Mission waiting fade-in lent ─────────────────────────────────── */
@keyframes ss-waiting-fade {
  from { opacity: 0;   transform: translateY(8px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.dm-waiting-text {
  animation: ss-waiting-fade 1.4s ease-out backwards 0.4s;
}

/* ── N. Tier label reached strikethrough ──────────────────────────────── */
.tier-label.reached {
  text-decoration: line-through;
  text-decoration-color: rgba(255,43,214,0.55);
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

/* ── O. Reduced motion guard V4 ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #leaderboard-wrap::before,
  .topbar-spacer::before,
  .lb-panel::after,
  #brand-block .brand-name,
  #mod-feed.hex-module,
  #mod-recompense.hex-module,
  #mod-progression,
  #collective-missions,
  .board-panel::after,
  #mod-feed.hex-module::after,
  #mod-recompense.hex-module::after,
  #stage-queue-indicator,
  .dm-waiting-text {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V5 — hooks JS (phase, counter, rank arrows, leader burst, coffre)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Phase "active" — bannière cachée, LB remonte row 1 ───────────── */
@media (min-width: 1100px) {
  body.ss-board[data-phase="active"] #desk-grid {
    grid-template-areas:
      "leftcol  leaderboard  mission"
      "leftcol  leaderboard  mission"
      "photos   photos       photos";
  }
}

/* ── 1. Phase board color globale (data-phase via JS) ────────────────── */
body.ss-board[data-phase="confrontation"] {
  --ss-phase-tint: rgba(255, 61, 113, 0.18);
}
body.ss-board[data-phase="revelation"] {
  --ss-phase-tint: rgba(180, 130, 255, 0.22);
}
body.ss-board[data-phase="ended"] {
  --ss-phase-tint: rgba(130, 150, 200, 0.15);
}
body.ss-board[data-phase] #hud-frame.board-stage::after {
  background:
    radial-gradient(ellipse 60% 100% at 50% 35%, var(--ss-phase-tint, rgba(224,64,251,0.18)) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80%  at 50% 75%, rgba(28,224,255,0.14) 0%, transparent 75%);
}
body.ss-board[data-phase="confrontation"] .lb-panel { border-color: rgba(255,61,113,0.7); }
body.ss-board[data-phase="revelation"]    .lb-panel { border-color: rgba(180,130,255,0.7); }
body.ss-board[data-phase="ended"]         .lb-panel { border-color: rgba(130,150,200,0.5); filter: saturate(0.55); }
body.ss-board[data-phase="ended"] {
  filter: grayscale(0.35);
  transition: filter 1.2s ease;
}

/* ── 2. Counter Komtés style — flash brief sur changement ────────────── */
.rank-amount {
  transition: transform 0.2s ease, color 0.3s ease;
}

/* ── 3. ↑↓ rank arrows ───────────────────────────────────────────────── */
.rank-arrow {
  display: inline-block;
  font-size: 0.6em;
  margin-left: 4px;
  line-height: 1;
  animation: ss-arrow-bounce 0.6s ease-out backwards;
}
.rank-arrow.up   { color: #00e676; text-shadow: 0 0 8px #00e676; }
.rank-arrow.down { color: #ff3d71; text-shadow: 0 0 8px #ff3d71; }
@keyframes ss-arrow-bounce {
  0%   { opacity: 0; transform: translateY(-6px); }
  60%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 4. Rank-changed flash brief ─────────────────────────────────────── */
@keyframes ss-rank-flash {
  0%   { background-color: rgba(28,224,255,0.45); transform: translateX(0); }
  50%  { background-color: rgba(28,224,255,0.18); transform: translateX(4px); }
  100% { background-color: transparent;            transform: translateX(0); }
}
.rank-row.rank-changed {
  animation: ss-rank-flash 1.2s ease-out forwards;
}
.rank-row.rank-up {
  box-shadow: inset 4px 0 0 0 #00e676, inset 0 0 18px rgba(0,230,118,0.18);
}
.rank-row.rank-down {
  box-shadow: inset 4px 0 0 0 #ff3d71, inset 0 0 18px rgba(255,61,113,0.14);
}

/* ── 5. Leader just-promoted — confetti burst ────────────────────────── */
@keyframes ss-leader-burst {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,48,0.85),
                     0 0 0 0 rgba(255,255,255,0.85); }
  50%  { box-shadow: 0 0 0 14px rgba(255,184,48,0),
                     0 0 60px 10px rgba(255,184,48,0.55); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.rank-row.leader.just-promoted {
  animation: ss-leader-burst 1.6s ease-out, ss-leader-pulse 3s ease-in-out infinite 1.6s, ss-leader-confetti 8s linear infinite 1.6s;
}
.rank-row.leader.just-promoted::before,
.rank-row.leader.just-promoted::after {
  animation-duration: 1s;
}

/* ── 6. Coffre morph récompense (★ → coffre) ─────────────────────────── */
#mod-recompense .hex-icon {
  color: transparent !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffd270' stroke-width='2.4' stroke-linejoin='round'><rect x='10' y='22' width='44' height='32' rx='2'/><path d='M10 34 L54 34'/><rect x='28' y='30' width='8' height='8' fill='%23ffd270'/><circle cx='32' cy='34' r='1.5' fill='%23080420'/><path d='M16 22 V18 a16 16 0 0 1 32 0 V22'/><path d='M22 22 V18 a10 10 0 0 1 20 0 V22' stroke='%23ff75e7'/><circle cx='14' cy='44' r='1.2' fill='%23ffd270'/><circle cx='50' cy='44' r='1.2' fill='%23ffd270'/></svg>")
    center/70% no-repeat;
  width: 80%; height: 80%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(255,210,112,0.85));
}

/* ── 7. Tier next row pulse fond ─────────────────────────────────────── */
.tier-row:has(.tier-dot.next) {
  background: rgba(255,184,48,0.08);
  animation: ss-tier-next-bg 2s ease-in-out infinite;
}
@keyframes ss-tier-next-bg {
  0%, 100% { background: rgba(255,184,48,0.08); }
  50%      { background: rgba(255,184,48,0.18); }
}

/* ── 8. Crown hover burst ────────────────────────────────────────────── */
.rank-row.leader:hover .crown-icon {
  filter: drop-shadow(0 0 14px rgba(255,210,90,1)) drop-shadow(0 0 24px rgba(255,184,48,0.85));
  transform: rotate(-8deg) scale(1.2);
}
.rank-row.leader .crown-icon {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ── 9. coll-stars-row hover ─────────────────────────────────────────── */
.coll-stars-row {
  transition: color 0.25s, transform 0.25s, text-shadow 0.3s;
  cursor: default;
}
.coll-stars-row:hover {
  color: #ffe1ff;
  transform: translateX(4px);
  text-shadow: 0 0 14px rgba(255,255,255,0.7), 0 0 24px rgba(255,43,214,0.8);
}
.coll-stars-row:hover svg {
  transform: scale(1.2);
  transition: transform 0.25s;
}

/* ── 11. Logo 3D rotateY au hover ────────────────────────────────────── */
#brand-block {
  perspective: 800px;
}
#brand-block .brand-name {
  transition: transform 0.5s ease;
}
#brand-block:hover .brand-name {
  transform: rotateY(10deg) scale(1.02);
}
#brand-block:hover .brand-eye-wrap {
  transform: rotateY(-8deg);
  transition: transform 0.5s ease;
}

/* ── 12. Footer mark cycle symbol (steps animation) ──────────────────── */
@keyframes ss-mark-cycle {
  0%,   20%  { content: '⬢'; }
  25%,  45%  { content: '◈'; }
  50%,  70%  { content: '✦'; }
  75%,  95%  { content: '◆'; }
  100%       { content: '⬢'; }
}
/* Note: content animation supportée Chromium 113+ via @property — fallback : on garde rotation existante */

/* ── 13. Œil parallax — transition smooth pour translate via setAttribute ─ */
.brand-eye-wrap svg circle {
  transition: transform 0.15s ease-out;
}

/* ── 14. Reduced motion guard V5 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rank-arrow,
  .rank-row.rank-changed,
  .rank-row.leader.just-promoted,
  .tier-row:has(.tier-dot.next),
  #brand-block:hover .brand-name,
  #brand-block:hover .brand-eye-wrap,
  .brand-eye-wrap svg circle {
    animation: none !important;
    transition: none !important;
  }
  body.ss-board[data-phase="ended"] {
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH V6 — clock, player count, particles, ruban, swipe, ptr, layered logo,
              empty per cible, stage particles, prog spark, hist border anim,
              crown sparkles, avatar hover, roman numerals, phase reveal,
              hex pattern, status badge entrance, logo float
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 3D logo layers ────────────────────────────────────────────────── */
#brand-block .brand-name {
  position: relative;
  display: inline-block;
}
.bn-layer {
  display: block;
  position: relative;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  background: linear-gradient(180deg, #fff 0%, #ff75e7 38%, #c233ff 65%, #5b1ad6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bn-layer.bn-back,
.bn-layer.bn-mid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bn-back {
  background: linear-gradient(180deg, #7b2fff 0%, #1a0440 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: blur(6px);
  transform: translate(8px, 6px) scale(1.02);
  opacity: 0.8;
  z-index: 0;
}
.bn-mid {
  background: linear-gradient(180deg, #ff2bd6, #5b1ad6);
  -webkit-background-clip: text;
          background-clip: text;
  transform: translate(3px, 3px);
  opacity: 0.8;
  z-index: 1;
}
.bn-front {
  position: relative;
  z-index: 2;
}

/* ── 2. Mini-clock plateau ───────────────────────────────────────────── */
#ss-mini-clock {
  position: fixed;
  top: 56px; right: 16px;
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(8, 4, 32, 0.75);
  border: 1px solid rgba(28,224,255,0.45);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 14px rgba(28,224,255,0.4);
  letter-spacing: 0.05em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  pointer-events: none;
}
#ss-mini-clock .cl-time { font-size: 1.05rem; text-shadow: 0 0 8px rgba(28,224,255,0.7); }
#ss-mini-clock .cl-sec  { font-size: 0.7rem; color: var(--ss-cyan); opacity: 0.7; }

/* ── 3. Compteur joueurs badge ───────────────────────────────────────── */
.ss-player-count {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(90deg, rgba(28,224,255,0.85), rgba(60,160,255,0.85));
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(28,224,255,0.55);
  z-index: 3;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.ss-player-count .pc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
  animation: ss-pc-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ss-pc-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}
.ss-player-count .pc-num { font-size: 0.95rem; }

/* ── 4. Particles attirées leader ────────────────────────────────────── */
.ss-particle-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.ss-particle {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  opacity: 0;
  animation: ss-particle-fly 2.2s ease-out forwards;
}
@keyframes ss-particle-fly {
  0%   { opacity: 0;   transform: translate(0,0) scale(0.4); }
  10%  { opacity: 1;   transform: translate(calc(var(--tx) * 0.1), calc(var(--ty) * 0.1)) scale(1); }
  90%  { opacity: 0.9; transform: translate(calc(var(--tx) * 0.95), calc(var(--ty) * 0.95)) scale(1.2); }
  100% { opacity: 0;   transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* ── 5. rc-final-badge ruban diagonal "PALIER FINAL" ─────────────────── */
.rc-final-badge {
  position: relative;
  overflow: visible;
}
.rc-final-badge::after {
  content: '';
  position: absolute;
  top: -16px; right: -22px;
  width: 80px; height: 22px;
  background: linear-gradient(90deg, var(--ss-pink), var(--ss-fuchsia));
  transform: rotate(28deg);
  box-shadow: 0 0 14px rgba(255,43,214,0.6);
  z-index: -1;
}

/* ── 6. Empty-state custom par cible ─────────────────────────────────── */
#mod-feed > .empty-state::before {
  content: '◈';
  display: block;
  font-size: 2rem;
  color: var(--ss-pink);
  text-shadow: 0 0 14px var(--ss-pink);
  margin-bottom: 8px;
}
#mod-recompense > .empty-state::before {
  content: '✦';
  display: block;
  font-size: 2rem;
  color: var(--ss-gold);
  text-shadow: 0 0 14px var(--ss-gold);
  margin-bottom: 8px;
}
#collective-missions > .empty-state::before {
  content: '◉';
  display: block;
  font-size: 2.2rem;
  color: var(--ss-cyan);
  text-shadow: 0 0 14px var(--ss-cyan);
  margin-bottom: 8px;
}

/* ── 7. Stage overlay particles supplémentaires ──────────────────────── */
#ss-stage-overlay.active::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255,150,255,0.45) 1.2px, transparent 1.8px);
  background-size: 80px 80px, 130px 130px;
  background-position: 0 0, 40px 60px;
  animation: ss-stage-particles 4s linear infinite;
}
@keyframes ss-stage-particles {
  to { background-position: 80px 80px, -130px 130px; }
}

/* ── 8. Logo hover : tagline → sub-title alternatif ──────────────────── */
#brand-block .brand-tagline {
  position: relative;
}
#brand-block .brand-tagline::after {
  content: 'Tout est révélé...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  color: var(--ss-pink);
  text-shadow: 0 0 12px var(--ss-pink);
  opacity: 0;
  transition: opacity 0.4s ease;
  font: inherit;
  letter-spacing: inherit;
  border: 1px solid rgba(255,43,214,0.6);
}
#brand-block:hover .brand-tagline::after { opacity: 1; }

/* ── 10. prog-track étincelle au fill update ─────────────────────────── */
.prog-fill {
  position: relative;
}
.prog-fill::before {
  content: '';
  position: absolute;
  top: 50%; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px #fff, 0 0 24px var(--ss-pink);
  transform: translateY(-50%);
  animation: ss-prog-spark 1.6s ease-in-out infinite;
}
@keyframes ss-prog-spark {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.2); }
}

/* ── 11. Crown SVG sparkles autour ───────────────────────────────────── */
.crown-icon {
  position: relative;
}
.rank-row.leader .rank-pseudo {
  position: relative;
}
.rank-row.leader .rank-pseudo::after {
  content: '✦ ✦ ✦';
  position: absolute;
  top: -8px; left: 28px;
  font-size: 0.45rem;
  color: var(--ss-gold);
  letter-spacing: 0.4em;
  text-shadow: 0 0 6px var(--ss-gold);
  animation: ss-crown-sparkle 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ss-crown-sparkle {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

/* ── 12. Avatar placeholder hover eye-like ───────────────────────────── */
.rank-pseudo:hover::before {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 22%),
    radial-gradient(circle at 50% 50%, var(--ss-pink) 0 60%, transparent 65%),
    radial-gradient(circle at 35% 30%, rgba(28,224,255,0.5), rgba(123,47,255,0.7));
  transform: scale(1.18);
  transition: transform 0.25s ease, background 0.3s;
}

/* ── 13. Coll-stars-row index Romain I/II/III ────────────────────────── */
.coll-stars-row {
  position: relative;
  padding-left: 26px;
}
.coll-stars-row::before {
  position: absolute;
  left: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--ss-gold);
  text-shadow: 0 0 6px var(--ss-gold);
  opacity: 0.85;
  font-size: 0.78rem;
  width: 22px;
  text-align: right;
}
.coll-stars-row:nth-child(1)::before { content: 'I.'; }
.coll-stars-row:nth-child(2)::before { content: 'II.'; }
.coll-stars-row:nth-child(3)::before { content: 'III.'; }

/* ── 14. Phase banner reveal animation au load ───────────────────────── */
@keyframes ss-phase-reveal {
  from { opacity: 0; transform: scaleX(0.5); filter: blur(8px); }
  to   { opacity: 1; transform: scaleX(1);   filter: blur(0); }
}
#phase-banner[style*="block"] {
  animation: ss-phase-reveal 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) backwards,
             ss-phase-glitch 7s linear infinite 0.8s;
}

/* ── 15. Hex panels — trame diagonale animée ─────────────────────────── */
#mod-feed.hex-module,
#mod-recompense.hex-module,
#mod-progression {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px),
    linear-gradient(180deg, rgba(60,16,110,0.72), rgba(20,8,50,0.85));
  background-size: 100% 100%, 100% 100%;
  animation:
    ss-border-flicker 7s ease-in-out infinite,
    ss-trame-drift 30s linear infinite;
}
#mod-recompense.hex-module {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px),
    linear-gradient(180deg, rgba(28,16,100,0.72), rgba(8,4,40,0.85));
}
#mod-progression {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px),
    linear-gradient(180deg, rgba(60,16,90,0.72), rgba(20,8,50,0.85));
}
@keyframes ss-trame-drift {
  to { background-position: 38px 38px, 0 0; }
}

/* ── 16. Logo float lent ─────────────────────────────────────────────── */
@keyframes ss-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
#brand-block .brand-eye-wrap {
  animation: ss-logo-float 6s ease-in-out infinite;
}

/* ── 17. Status badge entrance scale-up ──────────────────────────────── */
@keyframes ss-status-entrance {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.dm-status-badge {
  animation: ss-status-entrance 0.5s ease-out backwards;
}

/* ── 18. Pull-to-refresh indicator ───────────────────────────────────── */
#ss-ptr {
  position: fixed;
  top: -80px; left: 50%;
  transform: translateX(-50%) translateY(-80px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(8, 4, 32, 0.92);
  border: 1.5px solid rgba(28,224,255,0.6);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(28,224,255,0.5);
  opacity: 0;
  z-index: 200;
  pointer-events: none;
}
#ss-ptr .ptr-spin {
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
#ss-ptr.ready {
  border-color: rgba(255,43,214,0.85);
  box-shadow: 0 0 24px rgba(255,43,214,0.7);
}
#ss-ptr.ready .ptr-spin { transform: rotate(180deg); color: var(--ss-pink); }
#ss-ptr.refreshing .ptr-spin { animation: ss-ptr-spin 0.6s linear infinite; }
@keyframes ss-ptr-spin { to { transform: rotate(360deg); } }

/* ── 19. Avatar joueur (avatarUrl uploadé) OU visage SVG fallback ─────── */
.rank-pseudo::before {
  background-image: var(--avatar-url,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='11' fill='%23120640'/><circle cx='9' cy='10' r='1.6' fill='%231ce0ff'/><circle cx='15' cy='10' r='1.6' fill='%231ce0ff'/><path d='M8 15 Q12 18 16 15' stroke='%23ff75e7' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>"));
  background-color: rgba(0,229,255,0.10);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rank-row.leader .rank-pseudo::before {
  background-image: var(--avatar-url,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='11' fill='%23280f02'/><circle cx='9' cy='10' r='1.6' fill='%23ffd270'/><circle cx='15' cy='10' r='1.6' fill='%23ffd270'/><path d='M8 15 Q12 18 16 15' stroke='%23ffb830' stroke-width='1.4' fill='none' stroke-linecap='round'/><path d='M5 5 L7 8 L10 5 L12 8 L14 5 L17 8 L19 5' stroke='%23ffd270' stroke-width='1' fill='none'/></svg>"));
  background-color: rgba(255,210,90,0.18);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── 20. Reduced motion V6 guard ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ss-player-count .pc-dot,
  .ss-particle,
  #ss-stage-overlay.active::before,
  .prog-fill::before,
  .rank-row.leader .rank-pseudo::after,
  #mod-feed.hex-module,
  #mod-recompense.hex-module,
  #mod-progression,
  #brand-block .brand-eye-wrap,
  .dm-status-badge,
  #ss-ptr.refreshing .ptr-spin {
    animation: none !important;
  }
}

/* Hide hex icon on board modules + tighten module padding/min-height */
#mod-feed .hex-icon-wrap-outer,
#mod-recompense .hex-icon-wrap-outer { display: none !important; }

#mod-feed.hex-module { padding: 18px 14px 14px; min-height: 220px; }
#mod-recompense.hex-module { padding: 18px 16px 16px; min-height: 140px; }

/* Limite ~6 items visibles, scroll interne pour le reste (FEED_CAP=30 garde l'historique en DOM) */
#feed-list { max-height: 445px; flex: 0 1 auto; min-height: 0; }
@media (min-width: 1100px) {
  #mod-feed.hex-module { align-self: start; }
  #mod-recompense.hex-module { align-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECRETS DU PLATEAU — bulles découvert / non découvert
   ═══════════════════════════════════════════════════════════════════════════ */

#board-secrets-section {
  position: relative;
  margin: 24px 0 12px;
  padding: 26px 18px 20px;
}
#board-secrets-section .bps-header { text-align: center; margin-bottom: 16px; }
#board-secrets-section .bps-label {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem; letter-spacing: 0.12em;
  color: var(--white); margin: 4px 0 2px;
}
#board-secrets-section .bps-sub {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(200,169,110,0.7);
}
#board-secrets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.secret-bubble {
  background: rgba(20,12,40,0.55);
  border: 1px solid rgba(123,47,255,0.22);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 64px;
  display: flex; flex-direction: column; gap: 6px;
}
.secret-bubble.is-revealed {
  border-color: rgba(0,229,255,0.4);
  background: rgba(0,40,55,0.4);
}
.secret-bubble .sb-pseudo {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(200,169,110,0.85);
}
.secret-bubble .sb-secret {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem; color: var(--white); line-height: 1.35;
}
.secret-bubble .sb-locked {
  font-size: 0.82rem; font-style: italic;
  color: var(--text-mid, rgba(255,255,255,0.45));
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTOS DES JOUEURS — galerie photobomb pleine largeur
   ═══════════════════════════════════════════════════════════════════════════ */

#board-photos-section {
  position: relative;
  margin: 38px 0 12px;
  padding: 32px 18px 22px;
  background: linear-gradient(180deg, rgba(20,8,40,0.55) 0%, rgba(8,4,32,0.7) 100%);
  border: 1.5px solid rgba(255,43,214,0.45);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.32),
    0 0 40px rgba(255,43,214,0.28),
    inset 0 0 60px rgba(123,47,255,0.18);
}
#board-photos-section::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(28,224,255,0.28);
  pointer-events: none;
}

.bps-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  text-align: center;
  padding: 8px 0 4px;
  overflow: hidden;
}
/* Étoiles décoratives arrière-plan — radial dots cyan/magenta très subtils. */
.bps-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(28,224,255,0.55) 0, transparent 1.5px),
    radial-gradient(circle at 88% 20%, rgba(255,43,214,0.55) 0, transparent 1.5px),
    radial-gradient(circle at 22% 78%, rgba(255,200,80,0.55) 0, transparent 1.5px),
    radial-gradient(circle at 78% 82%, rgba(28,224,255,0.45) 0, transparent 1.5px),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.55) 0, transparent 1.3px),
    radial-gradient(circle at 60% 60%, rgba(255,43,214,0.4) 0, transparent 1.2px);
  pointer-events: none;
  z-index: 0;
  animation: bps-stars-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes bps-stars-twinkle {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}
.bps-header > * { position: relative; z-index: 1; }
.bps-tag {
  display: inline-block;
  max-width: 90%;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #ff2bd6, #7b2fff, #1ce0ff);
  padding: 5px 18px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  box-shadow: 0 0 22px rgba(255,43,214,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.bps-label {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #ff75e7 50%, #7b2fff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(255,43,214,0.35);
  line-height: 1.1;
}
.bps-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200,180,230,0.7);
}
.bps-stats {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,43,214,0.18), rgba(28,224,255,0.18));
  border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,237,224,0.85);
  box-shadow: 0 2px 12px rgba(255,43,214,0.18);
}
.bps-stats b { font-weight: 700; color: #fff; }
.bps-stats .bps-stat-star b { color: #ffd76b; }
.bps-stats .bps-stat-sep { opacity: 0.5; }

#board-photos-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  grid-auto-flow: dense;
  padding: 18px 14px;
  /* Mur de liège / collage : nuances chaudes + halos diffus + ombre intérieure */
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255,200,140,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(180,120,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(85,55,30,0.22) 0%, rgba(40,20,10,0.32) 100%);
  border: 1px solid rgba(255,200,140,0.15);
  border-radius: 6px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,200,140,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.25);
}
#board-photos-grid .empty-state {
  grid-column: 1 / -1;
  padding: 38px 8px 32px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,210,235,0.85);
  text-shadow: 0 2px 8px rgba(255,43,214,0.35);
}
.bphoto-empty-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  opacity: 0.7;
  filter: drop-shadow(0 4px 10px rgba(255,43,214,0.35));
}
.bphoto-empty-hint {
  display: block;
  margin-top: 10px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(200,180,230,0.58);
}

/* Spots de plateau — projecteurs diffus qui balaient le fond de la grille. */
#board-photos-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 200px at 22% 28%, rgba(28,224,255,0.16), transparent 70%),
    radial-gradient(circle 240px at 78% 72%, rgba(255,43,214,0.16), transparent 70%),
    radial-gradient(circle 160px at 55% 12%, rgba(255,200,80,0.10), transparent 72%);
  animation: bphoto-spots-sweep 13s ease-in-out infinite alternate;
}
@keyframes bphoto-spots-sweep {
  0%   { background-position:   0%   0%,   0%   0%,   0%   0%; }
  100% { background-position:  38%  26%, -32% -22%,  20% 30%; }
}
/* Cards au-dessus des spots. */
#board-photos-grid > .bphoto-card,
#board-photos-grid > .bphoto-showall-card,
#board-photos-grid > .empty-state { position: relative; z-index: 1; }

/* Ripple Material-like au pointerdown sur une card. */
.bphoto-ripple {
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,43,214,0.4) 55%, transparent 80%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: bphoto-ripple-go 0.6s ease-out forwards;
  z-index: 6;
  mix-blend-mode: screen;
}
@keyframes bphoto-ripple-go {
  0%   { opacity: 0.75; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(9); }
}

/* Podium — top 3 cards légèrement remontées (taille de cellule inchangée). */
.bphoto-card.podium-1 { margin-top: -12px; z-index: 3; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.55)); }
.bphoto-card.podium-2 { margin-top: -7px;  z-index: 2; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45)); }
.bphoto-card.podium-3 { margin-top: -4px;  z-index: 2; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.40)); }

/* Carte "Voir tout / Réduire" — fin de grille si archive disponible. */
.bphoto-showall-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 130px;
  cursor: pointer;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,43,214,0.16), rgba(28,224,255,0.16));
  border: 1px dashed rgba(255,255,255,0.38);
  font-family: 'Josefin Sans', sans-serif;
  color: rgba(245,237,224,0.92);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: bphoto-card-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) backwards;
}
.bphoto-showall-card:hover,
.bphoto-showall-card:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(255,43,214,0.35);
  background: linear-gradient(135deg, rgba(255,43,214,0.26), rgba(28,224,255,0.26));
  outline: none;
}
.bphoto-showall-icon { font-size: 1.9rem; filter: drop-shadow(0 2px 6px rgba(255,43,214,0.5)); }
.bphoto-showall-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
.bphoto-showall-sub {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: rgba(245,237,224,0.55);
}

.bphoto-card {
  position: relative;
  min-width: 0;
  background: linear-gradient(180deg, #fef6ee 0%, #f4e4d2 100%);
  padding: 10px 10px 14px;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 0 0 1px rgba(28,224,255,0.55),
    0 0 0 4px rgba(255,255,255,0.85),
    0 0 0 5px rgba(255,43,214,0.5),
    0 10px 26px rgba(0,0,0,0.5),
    0 0 28px rgba(255,43,214,0.28);
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, z-index 0s 0.35s;
  will-change: transform;
  isolation: isolate; /* contient le halo ::after de :first-child sous le contenu */
  /* Apparition staggered (--i défini inline par renderBoardPhotos) */
  animation: bphoto-card-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes bphoto-card-pop {
  0%   { opacity: 0; transform: scale(0.86) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Washi tape — bande pastel rotée collée en haut de la card */
.bphoto-card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28%;
  width: 44%;
  height: 14px;
  background: linear-gradient(135deg, rgba(255,200,200,0.7) 0%, rgba(255,170,210,0.78) 50%, rgba(180,220,255,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: rotate(-8deg);
  z-index: 3;
  pointer-events: none;
  border-radius: 1px;
}
.bphoto-card:nth-child(even)::before {
  left: 22%;
  transform: rotate(6deg);
  background: linear-gradient(135deg, rgba(180,220,255,0.7) 0%, rgba(255,200,200,0.75) 100%);
}
.bphoto-card:nth-child(3n)::before { left: 34%; transform: rotate(-3deg); }
.bphoto-card:nth-child(7n)::before {
  background: linear-gradient(135deg, rgba(255,220,150,0.78) 0%, rgba(255,180,200,0.72) 100%);
}
/* Halo arc-en-ciel rotatif — photo la plus récente (1ère grille = createdAt desc).
   Layer derrière la card via z-index:-1 + isolation:isolate sur card. */
.bphoto-card:first-child::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  background: conic-gradient(from 0deg, #ff2bd6, #ffb347, #ffe06b, #1ce0ff, #7b2fff, #ff2bd6);
  filter: blur(10px);
  pointer-events: none;
  animation:
    bphoto-rainbow-spin 7s linear infinite,
    bphoto-first-pulse  2.4s ease-in-out infinite;
  z-index: -1;
}
/* Trail rainbow décroissant pour 2e et 3e cards — hiérarchie visuelle podium. */
.bphoto-card:nth-child(2)::after,
.bphoto-card:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: conic-gradient(from 60deg, #ff2bd6, #1ce0ff, #ff2bd6);
  filter: blur(7px);
  pointer-events: none;
  z-index: -1;
  animation: bphoto-rainbow-spin 11s linear infinite;
}
.bphoto-card:nth-child(2)::after { opacity: 0.42; }
.bphoto-card:nth-child(3)::after { opacity: 0.22; inset: -2px; filter: blur(5px); }
@keyframes bphoto-first-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
@keyframes bphoto-rainbow-spin {
  to { transform: rotate(360deg); }
}

/* Particles ✨ flottantes autour de la 1ère card. JS injecte .bphoto-particles. */
.bphoto-particles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 4;
}
.bphoto-particle {
  position: absolute;
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(255,43,214,0.7));
  animation: bphoto-particle-float 4.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.bphoto-particle.p1 { top: -4px;   left:  4%;   animation-delay: 0s;   }
.bphoto-particle.p2 { top: 14%;   right: -4px;  animation-delay: 1.1s; font-size: 1.1rem; }
.bphoto-particle.p3 { bottom: -2px; left: 38%;  animation-delay: 2.3s; font-size: 0.95rem; }
.bphoto-particle.p4 { bottom: 28%; left:  -6px; animation-delay: 1.7s; font-size: 1.05rem; }
@keyframes bphoto-particle-float {
  0%   { opacity: 0;    transform: translateY(6px) scale(0.7) rotate(0deg); }
  25%  { opacity: 1;    transform: translateY(-2px) scale(1.05) rotate(8deg); }
  50%  { opacity: 0.9;  transform: translateY(-12px) scale(1) rotate(-6deg); }
  75%  { opacity: 0.6;  transform: translateY(-20px) scale(0.95) rotate(12deg); }
  100% { opacity: 0;    transform: translateY(-30px) scale(0.6) rotate(0deg); }
}
.bphoto-card:nth-child(odd) { transform: rotate(-1.8deg); }
.bphoto-card:nth-child(even) { transform: rotate(1.6deg); }
.bphoto-card:nth-child(3n) { transform: rotate(-0.6deg); }
/* Variante visuelle 7n : ombre dorée + micro-tilt, mais taille
   identique aux autres cartes (galerie homogène). */
.bphoto-card:nth-child(7n) {
  transform: rotate(-1deg);
  box-shadow:
    0 0 0 1px rgba(28,224,255,0.6),
    0 0 0 5px rgba(255,255,255,0.9),
    0 0 0 7px rgba(255,200,80,0.6),
    0 14px 36px rgba(0,0,0,0.6),
    0 0 44px rgba(255,200,80,0.4);
}
.bphoto-card:hover,
.bphoto-card:focus-within {
  /* Lift 3D : perspective + tilt subtil + scale, sans rotation de base. */
  transform: perspective(900px) rotateX(2.5deg) rotateY(-3deg) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 1px rgba(28,224,255,0.8),
    0 0 0 5px rgba(255,255,255,1),
    0 0 0 7px rgba(255,43,214,0.8),
    0 26px 48px rgba(0,0,0,0.65),
    0 0 60px rgba(255,43,214,0.5);
  z-index: 5;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, z-index 0s 0s;
}
.bphoto-card:focus-visible {
  outline: 2px solid #1ce0ff;
  outline-offset: 4px;
}

.bphoto-card .bphoto-imgwrap {
  position: relative;
  overflow: hidden;
  background: #1a1030;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  border-radius: 1px;
}
/* Skeleton shimmer — visible jusqu'au load de l'image. */
.bphoto-card .bphoto-skeleton {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 70%) ,
    linear-gradient(180deg, #2a1545 0%, #1a1030 100%);
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: bphoto-shimmer 1.4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.bphoto-card .bphoto-imgwrap.loaded .bphoto-skeleton { opacity: 0; }
.bphoto-card .bphoto-img { opacity: 0; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
.bphoto-card .bphoto-imgwrap.loaded .bphoto-img { opacity: 1; }
@keyframes bphoto-shimmer {
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}
/* Grain photo argentique — SVG noise très léger, multiply soft */
.bphoto-card .bphoto-imgwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
/* Indicateur loupe — hint "agrandir" coin bas-droit, révélé au hover */
.bphoto-card .bphoto-zoom-hint {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(8,4,32,0.65);
  border: 1px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.bphoto-card .bphoto-zoom-hint svg { width: 14px; height: 14px; }
.bphoto-card:hover .bphoto-zoom-hint,
.bphoto-card:focus-within .bphoto-zoom-hint { opacity: 0.92; transform: scale(1); }
.bphoto-card .bphoto-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: #1a1030;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.45s ease;
}
.bphoto-card:hover .bphoto-img,
.bphoto-card:focus-within .bphoto-img { transform: scale(1.07); }
/* Reflet glossy diagonal — sweep au survol, type cellophane */
.bphoto-card .bphoto-imgwrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  transition: left 0.65s ease;
  mix-blend-mode: screen;
}
.bphoto-card:hover .bphoto-imgwrap::after,
.bphoto-card:focus-within .bphoto-imgwrap::after { left: 120%; }
/* Toutes les images au même aspect-ratio 4/5 — pas d'exception 7n. */

.bphoto-card .bphoto-meta {
  padding: 8px 4px 2px;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.25;
  min-width: 0;
}
.bphoto-card .bphoto-pseudo {
  display: block;
  max-width: 100%;
  /* Manuscrit "feutre Polaroid" — Caveat (Google Font, importée dans board.html). */
  font-family: 'Caveat', 'Cinzel', cursive;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #2e1a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  line-height: 1.1;
}
.bphoto-card .bphoto-date {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(123,47,255,0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Watermark SS — œil discret coin bas-droit de l'image, branding plateau. */
.bphoto-card .bphoto-imgwrap > svg.bphoto-watermark {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  opacity: 0.38;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

/* État "image cassée" — fallback si l'URL retourne erreur. */
.bphoto-card .bphoto-imgwrap.broken {
  background: linear-gradient(135deg, #2a1545 0%, #1a1030 100%);
}
.bphoto-card .bphoto-imgwrap.broken .bphoto-img { display: none; }
.bphoto-card .bphoto-imgwrap.broken::after {
  content: "📸 💔";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(255,200,230,0.65);
  background: none;
  mix-blend-mode: normal;
  text-shadow: 0 2px 8px rgba(255,43,214,0.4);
  pointer-events: none;
  letter-spacing: 0.18em;
  /* override le sweep glossy */
  left: 0 !important;
  width: 100% !important;
  height: 100%;
  transition: none;
}

/* ❤️ flying — double-tap purement visuel local. */
.bphoto-heart-fly {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0.4);
  animation: bphoto-heart-rise 1.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  filter: drop-shadow(0 4px 12px rgba(255,43,214,0.65));
  text-shadow: 0 0 12px rgba(255,80,180,0.7);
}
@keyframes bphoto-heart-rise {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1;   transform: translate(-50%, -65%) scale(1.4); }
  60%  { opacity: 1;   transform: translate(calc(-50% + 10px), -130%) scale(1.1) rotate(-8deg); }
  100% { opacity: 0;   transform: translate(calc(-50% + 18px), -220%) scale(0.7) rotate(12deg); }
}

/* LIVE dot — point rouge pulsé dans le tag header. */
.bps-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3344;
  box-shadow: 0 0 8px rgba(255,51,68,0.85), 0 0 16px rgba(255,51,68,0.45);
  margin-right: 6px;
  vertical-align: middle;
  animation: bps-live-pulse 1.4s ease-in-out infinite;
}
@keyframes bps-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); box-shadow: 0 0 8px rgba(255,51,68,0.85), 0 0 16px rgba(255,51,68,0.45); }
  50%      { opacity: 0.7; transform: scale(1.25); box-shadow: 0 0 14px rgba(255,51,68,1), 0 0 28px rgba(255,51,68,0.65); }
}

/* Badge NEW — pilule glam coin haut-droit, photos <60s */
.bphoto-badge-new {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 4;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #ff2bd6, #ffb347);
  padding: 4px 9px 3px;
  border-radius: 99px;
  box-shadow: 0 4px 10px rgba(255,43,214,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  transform: rotate(8deg);
  pointer-events: none;
  animation: bphoto-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes bphoto-badge-pulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.1); }
}

@media (max-width: 760px) {
  #board-photos-section { margin: 24px -6px 8px; padding: 22px 12px 16px; }
  .bps-label { font-size: 1.15rem; letter-spacing: 0.1em; }
  .bps-tag { font-size: 0.6rem; padding: 4px 14px; }
  #board-photos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 12px 10px; }
  .bphoto-card {
    padding: 7px 7px 10px;
    box-shadow:
      0 0 0 1px rgba(28,224,255,0.5),
      0 0 0 3px rgba(255,255,255,0.85),
      0 0 0 4px rgba(255,43,214,0.45),
      0 6px 18px rgba(0,0,0,0.45);
  }
  .bphoto-card:nth-child(odd),
  .bphoto-card:nth-child(even),
  .bphoto-card:nth-child(3n) { transform: none; }
  .bphoto-card:nth-child(7n) { transform: none; }
  .bphoto-card:hover,
  .bphoto-card:focus-within { transform: scale(1.03); }
  .bphoto-card::before { height: 12px; left: 26%; width: 48%; }
  .bphoto-card .bphoto-pseudo { font-size: 1rem; }
  .bphoto-badge-new { font-size: 0.48rem; padding: 3px 7px; top: -8px; right: -6px; }
  #board-photos-grid .empty-state { font-size: 1.15rem; }
  .bps-stats { font-size: 0.54rem; gap: 6px; padding: 5px 10px; letter-spacing: 0.18em; }
  .bphoto-card .bphoto-zoom-hint { width: 22px; height: 22px; right: 4px; bottom: 4px; }
  .bphoto-card .bphoto-zoom-hint svg { width: 12px; height: 12px; }
  /* Grain trop coûteux mobile bas de gamme : opacity réduite. */
  .bphoto-card .bphoto-imgwrap::before { opacity: 0.12; }
  /* Particles plus petites sur mobile. */
  .bphoto-particle { font-size: 1rem !important; }
  /* Hover 3D simplifié au touch (pas de perspective). */
  .bphoto-card:hover,
  .bphoto-card:focus-within { transform: scale(1.03); }
  .bphoto-card .bphoto-imgwrap > svg.bphoto-watermark { width: 18px; height: 18px; right: 3px; bottom: 3px; opacity: 0.32; }
  .bphoto-heart-fly { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bphoto-card,
  .bphoto-card:nth-child(odd),
  .bphoto-card:nth-child(even),
  .bphoto-card:nth-child(3n),
  .bphoto-card:nth-child(7n) { transform: none; animation: none; }
  .bphoto-card:hover,
  .bphoto-card:focus-within { transform: scale(1.02); }
  .bphoto-card:hover .bphoto-img,
  .bphoto-card:focus-within .bphoto-img { transform: none; }
  .bphoto-card:hover .bphoto-imgwrap::after,
  .bphoto-card:focus-within .bphoto-imgwrap::after { transition: none; left: -120%; }
  .bphoto-card:first-child::after { animation: none; opacity: 0.85; }
  .bphoto-badge-new { animation: none; }
  .bphoto-card .bphoto-zoom-hint { transition: none; }
  .bphoto-particle { animation: none; opacity: 0.85; }
  .bphoto-card .bphoto-skeleton { animation: none; }
  .bps-header::before { animation: none; opacity: 0.85; }
  .bps-live-dot { animation: none; }
  .bphoto-card:nth-child(2)::after,
  .bphoto-card:nth-child(3)::after { animation: none; }
  .bphoto-heart-fly { animation-duration: .8s; }
  #board-photos-grid::before { animation: none; }
  .bphoto-ripple { animation-duration: .3s; }
  .bphoto-showall-card { animation: none; }
  .bphoto-card:hover,
  .bphoto-card:focus-within { transform: scale(1.02); }
}

/* Mobile adaptive performance layer for Secret Story board.
   Desktop stays full-fat; mobile/reduced-motion switch the page to data-fx="lite"
   from board.html and this section removes continuous cost while keeping layout/features. */
@media (max-width: 1100px) {
  body.ss-board[data-fx="lite"] {
    cursor: auto;
  }

  body.ss-board[data-fx="lite"] #ss-collective-alert,
  body.ss-board[data-fx="lite"] #bphoto-popup,
  body.ss-board[data-fx="lite"] #bphoto-viewer,
  body.ss-board[data-fx="lite"] .bphoto-viewer-nav,
  body.ss-board[data-fx="lite"] #shared-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.ss-board[data-fx="lite"] #ss-collective-alert,
  body.ss-board[data-fx="lite"] #bphoto-popup,
  body.ss-board[data-fx="lite"] #bphoto-viewer {
    background: rgba(8, 4, 32, 0.9);
  }

  body.ss-board[data-fx="lite"] #hud-frame.board-stage::before,
  body.ss-board[data-fx="lite"] #hud-frame.board-stage::after,
  body.ss-board[data-fx="lite"] #hud-frame.board-stage > .ss-confetti-layer,
  body.ss-board[data-fx="lite"]::before,
  body.ss-board[data-fx="lite"]::after,
  body.ss-board[data-fx="lite"] #leaderboard-wrap::before,
  body.ss-board[data-fx="lite"] #board-photos-grid::before,
  body.ss-board[data-fx="lite"] .board-panel::after,
  body.ss-board[data-fx="lite"] .brand-eye-wrap::before,
  body.ss-board[data-fx="lite"] .brand-eye-wrap::after {
    animation: none !important;
    opacity: 0.18 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.ss-board[data-fx="lite"] .stage-icon,
  body.ss-board[data-fx="lite"] #phase-banner,
  body.ss-board[data-fx="lite"] #stage-queue-indicator,
  body.ss-board[data-fx="lite"] .footer-slogan,
  body.ss-board[data-fx="lite"] .footer-mark,
  body.ss-board[data-fx="lite"] .ss-player-count .pc-dot,
  body.ss-board[data-fx="lite"] .rank-row.leader,
  body.ss-board[data-fx="lite"] .rank-row.leader::after,
  body.ss-board[data-fx="lite"] .dm-status-active,
  body.ss-board[data-fx="lite"] .dm-status-upcoming,
  body.ss-board[data-fx="lite"] .tier-dot.next,
  body.ss-board[data-fx="lite"] .bphoto-badge-new,
  body.ss-board[data-fx="lite"] .bphoto-card:first-child::after,
  body.ss-board[data-fx="lite"] .bphoto-card:nth-child(2)::after,
  body.ss-board[data-fx="lite"] .bphoto-card:nth-child(3)::after,
  body.ss-board[data-fx="lite"] .bphoto-particle,
  body.ss-board[data-fx="lite"] .bphoto-showall-card,
  body.ss-board[data-fx="lite"] .bps-header::before,
  body.ss-board[data-fx="lite"] .bps-live-dot {
    animation: none !important;
  }

  body.ss-board[data-fx="lite"] .rank-row,
  body.ss-board[data-fx="lite"] .board-panel,
  body.ss-board[data-fx="lite"] .lb-panel,
  body.ss-board[data-fx="lite"] #board-footer,
  body.ss-board[data-fx="lite"] .bphoto-card,
  body.ss-board[data-fx="lite"] .bphoto-popup-card,
  body.ss-board[data-fx="lite"] #bphoto-viewer .bphoto-popup-card,
  body.ss-board[data-fx="lite"] .bphoto-viewer-close,
  body.ss-board[data-fx="lite"] .bphoto-viewer-nav {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  }

  body.ss-board[data-fx="lite"] .board-panel::before,
  body.ss-board[data-fx="lite"] .bphoto-card .bphoto-imgwrap::after,
  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-card::before,
  body.ss-board[data-fx="lite"] #bphoto-viewer .bphoto-popup-card::before {
    opacity: 0.24 !important;
    mix-blend-mode: normal !important;
  }

  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-spot,
  body.ss-board[data-fx="lite"] #bphoto-viewer .bphoto-popup-spot,
  body.ss-board[data-fx="lite"] .bphoto-card:first-child::after,
  body.ss-board[data-fx="lite"] .bphoto-card:nth-child(2)::after,
  body.ss-board[data-fx="lite"] .bphoto-card:nth-child(3)::after {
    background: radial-gradient(circle at center, rgba(255, 200, 80, 0.16), rgba(255, 43, 214, 0.08) 45%, transparent 72%) !important;
    filter: none !important;
  }

  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap[data-stack-depth="2"],
  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap[data-stack-depth="3"],
  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap[data-stack-depth="4"],
  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap[data-stack-depth="5"] {
    display: none;
  }

  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap[data-stack-depth="1"] {
    opacity: 0.68;
    filter: none;
  }

  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap.entering,
  body.ss-board[data-fx="lite"] #bphoto-popup .bphoto-popup-wrap.leaving,
  body.ss-board[data-fx="lite"] #bphoto-viewer.open .bphoto-viewer-wrap,
  body.ss-board[data-fx="lite"] #bphoto-viewer.closing .bphoto-viewer-wrap {
    animation-duration: 0.28s !important;
  }

  body.ss-board[data-fx="lite"] .bphoto-deco.d2,
  body.ss-board[data-fx="lite"] .bphoto-deco.d3,
  body.ss-board[data-fx="lite"] .bphoto-deco.d4,
  body.ss-board[data-fx="lite"] .bphoto-deco.d6 {
    display: none !important;
  }

  body.ss-board[data-fx="lite"] .bphoto-deco {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }

  body.ss-board[data-fx="lite"] .bphoto-card .bphoto-skeleton,
  body.ss-board[data-fx="lite"] .bphoto-card .bphoto-imgwrap::before {
    animation: none !important;
    opacity: 0.08 !important;
  }

  body.ss-board[data-fx="lite"] .bphoto-card:hover .bphoto-img,
  body.ss-board[data-fx="lite"] .bphoto-card:focus-within .bphoto-img {
    transform: scale(1.03);
  }
}
#ss-red-phone-overlay {
  position: fixed;
  inset: 0;
  z-index: 98000;
  display: none;
  pointer-events: auto;
}

#ss-red-phone-overlay.active {
  display: block;
}

.ss-red-phone-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(180, 10, 30, 0.4) 0%, rgba(20, 2, 6, 0.88) 60%, rgba(8, 0, 2, 0.95) 100%),
    rgba(40, 4, 8, 0.82);
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  z-index: 0;
  pointer-events: none;
  animation: ssRedPhoneBackdropPulsePlayer 1.8s ease-in-out infinite;
}

@keyframes ssRedPhoneBackdropPulsePlayer {
  0%, 100% { background-color: rgba(40, 4, 8, 0.82); }
  50%      { background-color: rgba(70, 8, 14, 0.86); }
}

.ss-red-phone-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 440px);
  background:
    radial-gradient(ellipse at top, rgba(255, 80, 100, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #2a0408 0%, #4a0a14 55%, #1a0306 100%);
  border: 2px solid #e8253b;
  box-shadow:
    0 0 0 1px rgba(255, 80, 100, 0.4) inset,
    0 24px 80px rgba(120, 0, 14, 0.65),
    0 0 80px rgba(255, 40, 60, 0.4);
  padding: 28px 24px 24px;
  color: #fff5f0;
  text-align: center;
  z-index: 1;
  pointer-events: auto;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px
  );
  animation: ssRedPhonePlayerIn 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

#ss-red-phone-overlay[data-mode="ringing"] .ss-red-phone-card {
  animation:
    ssRedPhonePlayerIn 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2),
    ssRedPhonePlayerPulse 1.6s ease-in-out 320ms infinite;
}

@keyframes ssRedPhonePlayerIn {
  from { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes ssRedPhonePlayerPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 80, 100, 0.4) inset,
      0 24px 80px rgba(120, 0, 14, 0.6),
      0 0 60px rgba(255, 40, 60, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 120, 140, 0.65) inset,
      0 24px 90px rgba(160, 0, 20, 0.78),
      0 0 110px rgba(255, 60, 80, 0.62);
  }
}

.ss-red-phone-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #ff7a8a;
  margin-bottom: 12px;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(255, 60, 80, 0.6);
}
.ss-red-phone-badge::before,
.ss-red-phone-badge::after {
  content: '●';
  display: inline-block;
  margin: 0 10px;
  color: #ff2b3e;
  animation: ssRedPhoneDotPlayer 0.9s ease-in-out infinite;
  vertical-align: middle;
  font-size: 0.6em;
}
.ss-red-phone-badge::after { animation-delay: 0.45s; }

@keyframes ssRedPhoneDotPlayer {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Icône combiné + ondes radio (commun board + player) */
.ss-red-phone-icon-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 4px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-red-phone-icon-wrap .ss-rp-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 80, 100, 0.5);
  opacity: 0;
  animation: ssRedPhoneWave 1.6s ease-out infinite;
}
.ss-red-phone-icon-wrap .ss-rp-wave:nth-child(2) { animation-delay: 0.4s; }
.ss-red-phone-icon-wrap .ss-rp-wave:nth-child(3) { animation-delay: 0.8s; }

@keyframes ssRedPhoneWave {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.6);  opacity: 0; }
}

.ss-red-phone-icon {
  position: relative;
  width: 56px;
  height: 56px;
  color: #fff;
  filter: drop-shadow(0 0 14px rgba(255, 60, 80, 0.85));
  animation: ssRedPhoneShake 0.9s ease-in-out infinite;
  z-index: 2;
  font-size: 0;
  line-height: 0;
  margin: 0;
}

@keyframes ssRedPhoneShake {
  0%, 100% { transform: rotate(-8deg); }
  10%      { transform: rotate(8deg); }
  20%      { transform: rotate(-8deg); }
  30%      { transform: rotate(8deg); }
  40%      { transform: rotate(-4deg); }
  50%      { transform: rotate(0deg); }
}

.ss-red-phone-title {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 60, 80, 0.6), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ss-red-phone-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 235, 230, 0.92);
}

.ss-red-phone-message {
  font-family: 'Cormorant Garamond', 'Josefin Sans', serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #fff;
  margin: 18px 0 4px;
  padding: 14px 22px;
  background: rgba(0, 0, 0, 0.32);
  border-left: 3px solid #ff2b3e;
  border-right: 1px solid rgba(255, 80, 100, 0.2);
  white-space: pre-wrap;
  position: relative;
}
.ss-red-phone-message::before {
  content: '«';
  position: absolute;
  left: 6px;
  top: -4px;
  font-size: 1.8rem;
  color: rgba(255, 80, 100, 0.55);
  font-family: 'Cinzel', serif;
}
.ss-red-phone-message::after {
  content: '»';
  position: absolute;
  right: 6px;
  bottom: -16px;
  font-size: 1.8rem;
  color: rgba(255, 80, 100, 0.55);
  font-family: 'Cinzel', serif;
}

.ss-red-phone-action,
.ss-red-phone-secondary {
  width: 100%;
  min-height: 50px;
  border: none;
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 20px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 2px;
  transition: transform 140ms, box-shadow 140ms, background 140ms;
}

/* Décrocher / Transférer = accept call → vert iOS iconique */
.ss-red-phone-action {
  background: linear-gradient(180deg, #2fd17a, #169a52);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 90, 40, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.ss-red-phone-action:hover {
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(180deg, #3ce086, #1ab15e);
  box-shadow: 0 10px 24px rgba(0, 120, 50, 0.7), 0 0 18px rgba(60, 220, 130, 0.4);
}
.ss-red-phone-action:active { transform: translateY(1px) scale(0.98); }

/* Compris / acknowledge = neutre rouge atténué */
.ss-red-phone-secondary {
  background: linear-gradient(180deg, #e8253b, #a8081c);
  color: #fff;
  border: 1px solid rgba(255, 180, 180, 0.35);
  box-shadow: 0 6px 18px rgba(120, 0, 14, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.ss-red-phone-secondary:hover {
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(180deg, #ff3a52, #c10a22);
  box-shadow: 0 10px 24px rgba(180, 0, 22, 0.7), 0 0 18px rgba(255, 60, 80, 0.45);
}
.ss-red-phone-secondary:active { transform: translateY(1px) scale(0.98); }

.ss-red-phone-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 200, 200, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, transform 160ms;
}
.ss-red-phone-dismiss:hover {
  background: rgba(232, 37, 59, 0.55);
  transform: scale(1.08);
}

@media (max-width: 600px) {
  .ss-red-phone-card  { padding: 24px 18px 20px; }
  .ss-red-phone-title { font-size: 1.2rem; }
  .ss-red-phone-badge { font-size: 0.62rem; letter-spacing: 0.28em; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-red-phone-backdrop,
  .ss-red-phone-card,
  .ss-red-phone-icon,
  .ss-red-phone-icon-wrap .ss-rp-wave,
  .ss-red-phone-badge::before,
  .ss-red-phone-badge::after { animation: none !important; }
}

#ss-red-phone-board-modal {
  position: fixed;
  inset: 0;
  z-index: 97000;
  display: none;
  background:
    radial-gradient(ellipse at center, rgba(180, 10, 30, 0.35) 0%, rgba(20, 2, 6, 0.85) 60%, rgba(8, 0, 2, 0.92) 100%),
    rgba(40, 4, 8, 0.78);
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  animation: ssRedPhoneBackdropPulse 1.8s ease-in-out infinite;
}

#ss-red-phone-board-modal.active {
  display: block;
}

@keyframes ssRedPhoneBackdropPulse {
  0%, 100% { background-color: rgba(40, 4, 8, 0.78); }
  50%      { background-color: rgba(70, 8, 14, 0.82); }
}

.ss-red-phone-board-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 580px);
  background:
    radial-gradient(ellipse at top, rgba(255, 80, 100, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #2a0408 0%, #4a0a14 55%, #1a0306 100%);
  border: 2px solid #e8253b;
  padding: 30px 28px 26px;
  color: #fff5f0;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255, 80, 100, 0.4) inset,
    0 24px 80px rgba(120, 0, 14, 0.6),
    0 0 80px rgba(255, 40, 60, 0.4);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px
  );
  animation: ssRedPhoneWindowIn 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2),
             ssRedPhoneWindowPulse 1.6s ease-in-out 320ms infinite;
}

@keyframes ssRedPhoneWindowIn {
  from { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes ssRedPhoneWindowPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 80, 100, 0.4) inset, 0 24px 80px rgba(120, 0, 14, 0.6), 0 0 60px rgba(255, 40, 60, 0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 120, 140, 0.6) inset, 0 24px 90px rgba(160, 0, 20, 0.75), 0 0 110px rgba(255, 60, 80, 0.6); }
}

.ss-red-phone-board-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 200, 200, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, transform 160ms;
}
.ss-red-phone-board-close:hover {
  background: rgba(232, 37, 59, 0.55);
  transform: scale(1.08);
}

/* .ss-red-phone-icon-wrap, .ss-rp-wave, .ss-red-phone-icon, @keyframes
   ssRedPhoneWave, ssRedPhoneShake → définis plus haut (section player ~L4476)
   et partagés entre board + player popups. */

.ss-red-phone-board-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #ff7a8a;
  margin-bottom: 12px;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(255, 60, 80, 0.6);
}
.ss-red-phone-board-badge::before,
.ss-red-phone-board-badge::after {
  content: '●';
  display: inline-block;
  margin: 0 10px;
  color: #ff2b3e;
  animation: ssRedPhoneDot 0.9s ease-in-out infinite;
  vertical-align: middle;
  font-size: 0.6em;
}
.ss-red-phone-board-badge::after { animation-delay: 0.45s; }

@keyframes ssRedPhoneDot {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.ss-red-phone-board-title {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 60, 80, 0.6), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ss-red-phone-board-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 235, 230, 0.92);
}

.ss-red-phone-board-message {
  font-family: 'Cormorant Garamond', 'Josefin Sans', serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #fff;
  margin-top: 18px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.32);
  border-left: 3px solid #ff2b3e;
  border-right: 1px solid rgba(255, 80, 100, 0.2);
  white-space: pre-wrap;
  position: relative;
}
.ss-red-phone-board-message::before {
  content: '«';
  position: absolute;
  left: 6px;
  top: -4px;
  font-size: 1.8rem;
  color: rgba(255, 80, 100, 0.55);
  font-family: 'Cinzel', serif;
}
.ss-red-phone-board-message::after {
  content: '»';
  position: absolute;
  right: 6px;
  bottom: -16px;
  font-size: 1.8rem;
  color: rgba(255, 80, 100, 0.55);
  font-family: 'Cinzel', serif;
}

.ss-red-phone-hangup-btn {
  margin-top: 22px;
  padding: 12px 32px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #e8253b, #a8081c);
  border: 1px solid rgba(255, 180, 180, 0.35);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(120, 0, 14, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 140ms, box-shadow 140ms, background 140ms;
}
.ss-red-phone-hangup-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: linear-gradient(180deg, #ff3a52, #c10a22);
  box-shadow: 0 10px 24px rgba(180, 0, 22, 0.7), 0 0 18px rgba(255, 60, 80, 0.45);
}
.ss-red-phone-hangup-btn:active {
  transform: translateY(1px) scale(0.98);
}

@media (max-width: 600px) {
  .ss-red-phone-board-window { padding: 24px 18px 20px; }
  .ss-red-phone-icon-wrap    { width: 88px; height: 88px; margin-top: 0; }
  .ss-red-phone-icon         { width: 44px; height: 44px; }
  .ss-red-phone-board-title  { font-size: 1.3rem; }
  .ss-red-phone-board-badge  { font-size: 0.62rem; letter-spacing: 0.28em; }
}

@media (prefers-reduced-motion: reduce) {
  #ss-red-phone-board-modal,
  .ss-red-phone-board-window,
  .ss-red-phone-icon,
  .ss-red-phone-icon-wrap .ss-rp-wave,
  .ss-red-phone-board-badge::before,
  .ss-red-phone-board-badge::after { animation: none !important; }
}

/* ── Monitor popups plateau (admin) ───────────────────────────────────────
   Widget fixe top-right sur admin.html : reflète les popups actuellement
   affichées sur board.html. Croix → dismissBoardPopup côté Firestore. */
#ss-board-popup-monitor {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 10px;
  background: var(--glass-strong, rgba(6, 10, 36, 0.88));
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 229, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}
#ss-board-popup-monitor[hidden] { display: none; }

#ss-board-popup-monitor .ss-bpm-header {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan, #00e5ff);
  padding: 2px 4px 6px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
  margin-bottom: 2px;
}

#ss-board-popup-monitor .ss-bpm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-bpm-card {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  background: rgba(11, 17, 52, 0.55);
  border: 1px solid rgba(200, 169, 110, 0.18);
  border-left: 3px solid var(--cyan, #00e5ff);
  border-radius: 4px;
  font-family: 'Josefin Sans', sans-serif;
}

.ss-bpm-card[data-type="red_phone"]          { border-left-color: var(--red, #ff3d71); }
.ss-bpm-card[data-type="stage_event"]        { border-left-color: var(--fuchsia, #e040fb); }
.ss-bpm-card[data-type="broadcast"]          { border-left-color: var(--peach, #ff9a5c); }
.ss-bpm-card[data-type="mission_collective"] { border-left-color: var(--cyan, #00e5ff); }
.ss-bpm-card[data-type="photo"]              { border-left-color: var(--violet, #7b2fff); }

.ss-bpm-card-dismissed {
  opacity: 0.5;
  border-left-style: dashed;
}

.ss-bpm-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-bpm-type {
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.75);
}

.ss-bpm-label {
  font-size: 0.78rem;
  color: var(--cream, rgba(220, 235, 255, 0.94));
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.ss-bpm-close {
  flex-shrink: 0;
  align-self: stretch;
  width: 26px;
  background: transparent;
  border: 1px solid rgba(255, 61, 113, 0.32);
  color: var(--red, #ff3d71);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ss-bpm-close:hover {
  background: rgba(255, 61, 113, 0.12);
  border-color: rgba(255, 61, 113, 0.6);
  color: #fff;
}
.ss-bpm-close:disabled {
  opacity: 0.45;
  cursor: wait;
}

.ss-bpm-restore {
  flex-shrink: 0;
  align-self: stretch;
  width: 26px;
  background: transparent;
  border: 1px solid rgba(0, 229, 255, 0.32);
  color: var(--cyan, #00e5ff);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ss-bpm-restore:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.6);
  color: #fff;
}
.ss-bpm-restore:disabled {
  opacity: 0.45;
  cursor: wait;
}

@media (max-width: 720px) {
  #ss-board-popup-monitor {
    top: 56px;
    right: 8px;
    width: 220px;
    padding: 8px;
  }
  .ss-bpm-label { font-size: 0.72rem; }
}