/* HIT STORY ?! — base commune aux deux écrans */
:root {
  --bg: #0b0620;
  --ink: #fff;
  --muted: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .13);
  --glass: rgba(255, 255, 255, .07);
  --glass-2: rgba(255, 255, 255, .12);
  --a: #ff4d7d;
  --b: #38a3ff;
  --c: #ffb829;
  --d: #b07cff;
  --ok: #27e491;
  --bad: #ff5468;
  --gold: #ffd24a;
  --dark: #140a2e;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Fond animé : trois halos qui dérivent lentement (transform uniquement → fluide) */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #24104f 0%, var(--bg) 62%); }
.bg i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .42; will-change: transform; }
.bg i:nth-child(1) { background: #ff2d87; left: -22vmax; top: -26vmax; animation: drift1 26s ease-in-out infinite alternate; }
.bg i:nth-child(2) { background: #2b6bff; right: -24vmax; top: 8vmax; animation: drift2 31s ease-in-out infinite alternate; }
.bg i:nth-child(3) { background: #8a2bff; left: 18vmax; bottom: -40vmax; animation: drift3 36s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(16vmax, 12vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14vmax, 10vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -14vmax) scale(1.1); } }

.logo { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: .95; text-transform: uppercase; }
.logo span { display: block; background: linear-gradient(92deg, #ff4d7d, #ffb829 55%, #ffe58a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Pastille d'équipe */
.av {
  display: inline-grid; place-items: center; flex: none;
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: color-mix(in srgb, var(--tc, #888) 82%, #000);
  box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .28), 0 .2em .6em rgba(0, 0, 0, .3);
  line-height: 1;
}
.av > b { font-size: 1.25em; font-weight: 400; }

.chip { display: inline-flex; align-items: center; gap: .45em; padding: .4em .9em; border-radius: 99px; background: var(--glass-2); border: 1px solid var(--line); font-weight: 600; white-space: nowrap; }

/* Paroles à trous : un trait par mot manquant, remplacé par les mots à la révélation */
.ln { display: block; }
.blank { display: inline-flex; gap: .32em; white-space: nowrap; vertical-align: baseline; }
.blank i { display: inline-block; width: 1.5em; height: .95em; border-bottom: .13em solid var(--gold); }
.blank.filled { display: inline; white-space: normal; color: var(--ok); font-style: normal; }
.w-ok { color: var(--ok); }
.w-ko { color: #ff8fa0; text-decoration: line-through; text-decoration-thickness: .08em; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(1.2em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bg i { animation: none; }
}