/* =========================================================
   JACKATTACK — feuille de style
   Esthétique game-show néon (You Don't Know Jack)
   ========================================================= */

:root{
  --bg-deep:   #0b0524;
  --bg-deep-2: #160a3d;
  --ink:       #f4f1ff;
  --ink-dim:   #b9b0e6;

  --yellow: #ffe600;
  --cyan:   #00e5ff;
  --pink:   #ff2e88;
  --green:  #2bff88;
  --red:    #ff3b4e;

  --glow-y: 0 0 18px rgba(255,230,0,.55);
  --glow-c: 0 0 18px rgba(0,229,255,.55);
  --glow-p: 0 0 18px rgba(255,46,136,.55);

  --r:   18px;
  --r-lg: 26px;

  --font-display: "Anton", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-deep);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- Décor de fond ---------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-deep-2) 0%, var(--bg-deep) 55%, #060216 100%);
}
.bg-grid{
  position:absolute; inset:-50% 0 -10% 0;
  background-image:
    linear-gradient(rgba(0,229,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 60%, transparent 92%);
  animation: gridScroll 6s linear infinite;
  opacity:.55;
}
@keyframes gridScroll{ to{ background-position: 0 46px, 46px 0; } }

.bg-glow{ position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter: blur(70px); opacity:.5; mix-blend-mode:screen; }
.bg-glow--a{ background: radial-gradient(circle, var(--pink), transparent 65%); top:-20vmax; left:-12vmax; animation: float1 13s ease-in-out infinite; }
.bg-glow--b{ background: radial-gradient(circle, var(--cyan), transparent 65%); bottom:-22vmax; right:-12vmax; animation: float2 16s ease-in-out infinite; }
@keyframes float1{ 50%{ transform: translate(8vmax,6vmax) scale(1.15);} }
@keyframes float2{ 50%{ transform: translate(-7vmax,-5vmax) scale(1.1);} }

.bg-scan{ position:absolute; inset:0; pointer-events:none; opacity:.25;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.35) 2px 4px); }

/* ---------- Scène / écrans ---------- */
.stage{ position:relative; z-index:1; height:100dvh; display:grid; place-items:center; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }

.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(14px, 3vw, 34px);
  opacity:0; visibility:hidden; transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.screen.is-active{ opacity:1; visibility:visible; transform:none; }

/* ---------- Boutons ---------- */
.btn{
  font-family: var(--font-display); letter-spacing:.04em;
  border:none; border-radius: 999px; cursor:pointer;
  color: #160a3d; background: var(--yellow);
  padding: .7em 1.5em; font-size: clamp(20px, 3.4vw, 30px);
  box-shadow: var(--glow-y), 0 10px 0 #b39c00, 0 18px 30px rgba(0,0,0,.45);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(6px); box-shadow: var(--glow-y), 0 4px 0 #b39c00, 0 8px 16px rgba(0,0,0,.45); }
.btn--big{ padding: .75em 2em; }
.btn--ghost{
  background: transparent; color: var(--ink);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow:none; font-size: clamp(15px,2.4vw,19px);
}
.btn--ghost:hover{ border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-c); }
.btn--ghost:active{ transform: translateY(2px); }

/* =========================================================
   ÉCRAN TITRE
   ========================================================= */
.title-wrap{ text-align:center; max-width: 720px; }
.kicker{
  font-family: var(--font-display); letter-spacing:.45em; text-indent:.45em;
  color: var(--cyan); text-shadow: var(--glow-c);
  font-size: clamp(11px, 2.2vw, 16px); margin-bottom: .4em;
}
.logo{
  font-family: var(--font-display); line-height:.84;
  font-size: clamp(58px, 15vw, 150px);
  display:flex; justify-content:center; flex-wrap:wrap;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.4));
  animation: logoIn .7s cubic-bezier(.2,1.4,.4,1) both;
}
.logo-jack{ color: var(--yellow); text-shadow: var(--glow-y), 4px 4px 0 var(--pink); transform: rotate(-3deg); }
.logo-attack{ color: var(--ink); text-shadow: var(--glow-c), -4px 4px 0 var(--cyan); transform: rotate(2deg); }
@keyframes logoIn{ from{ opacity:0; transform: translateY(-20px) scale(.85);} }

.tagline{ color: var(--ink-dim); font-size: clamp(15px,2.8vw,21px); margin:.8em 0 1.4em; }
.tagline strong{ color: var(--yellow); }

.rules{
  margin-top: clamp(20px,4vw,38px); text-align:left;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: clamp(16px,3vw,26px);
  backdrop-filter: blur(6px);
}
.rules h2{
  font-family: var(--font-display); color: var(--pink); text-shadow: var(--glow-p);
  font-size: clamp(17px,3vw,23px); margin-bottom:.5em; letter-spacing:.02em;
}
.rules ol{ margin-left: 1.1em; display:grid; gap:.45em; color: var(--ink-dim); font-size: clamp(13.5px,2.3vw,16px); }
.rules ol b{ color: var(--ink); }
.rules ol i{ color: var(--cyan); font-style: normal; }
.rules-foot{ margin-top:1em; color: var(--ink-dim); font-size: clamp(12px,2vw,14px); }
kbd{
  font-family: var(--font-body); font-weight:700; font-size:.85em;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  border-radius:6px; padding:.12em .5em; color: var(--ink);
}

/* =========================================================
   ÉCRAN JEU
   ========================================================= */
#screen-game{ flex-direction:column; gap: clamp(12px,2.5vh,26px); justify-content: flex-start; padding-top: clamp(14px,3vh,30px); }

.hud{
  width:min(680px,100%); display:flex; justify-content:space-between; gap:10px;
}
.hud-cell{
  flex:1; text-align:center;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding:.5em .4em;
}
.hud-cell--score{ border-color: rgba(255,230,0,.35); }
.hud-label{ display:block; font-size:11px; letter-spacing:.18em; color: var(--ink-dim); text-transform:uppercase; }
.hud-value{ font-family: var(--font-display); font-size: clamp(22px,5vw,34px); line-height:1; }
.hud-cell--score .hud-value{ color: var(--yellow); text-shadow: var(--glow-y); }
.hud-value small{ font-size:.5em; color: var(--ink-dim); }
.hud-value.bump{ animation: bump .3s ease; }
@keyframes bump{ 40%{ transform: scale(1.25);} }

.board{
  flex:1; width:min(680px,100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(16px,4vh,40px);
}

/* Indice */
.clue-zone{ text-align:center; }
.clue-tag{
  font-family: var(--font-display); letter-spacing:.4em; text-indent:.4em;
  font-size: clamp(11px,2.4vw,15px); color: var(--cyan); text-shadow: var(--glow-c);
}
.clue{
  font-family: var(--font-display); font-size: clamp(28px,6.6vw,58px); line-height:1.04;
  color: var(--yellow); text-shadow: var(--glow-y), 3px 3px 0 rgba(0,0,0,.4);
  margin-top:.1em; padding: 0 .15em; max-width: 14ch;
  text-transform:uppercase; text-wrap: balance;
}
.clue-hint{
  display:block; margin-top:.5em; color: var(--ink-dim);
  font-size: clamp(12px,2.4vw,15px); letter-spacing:.02em;
}
.clue.swap{ animation: clueSwap .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes clueSwap{
  0%{ transform: rotateX(90deg) scale(.6); opacity:0; filter: blur(4px); }
  60%{ transform: rotateX(-8deg) scale(1.08); }
  100%{ transform:none; opacity:1; }
}

/* Zone des mots */
.word-zone{ position:relative; width:100%; height: clamp(110px,18vh,150px); display:grid; place-items:center; }
.word-card{
  position:relative; min-width: min(420px,82vw); max-width:90vw;
  padding: clamp(14px,3vw,22px) clamp(20px,5vw,40px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #241257, #160a3d);
  border:2px solid rgba(0,229,255,.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.5), inset 0 0 30px rgba(0,229,255,.08);
  text-align:center;
  opacity:0; transform: translateY(30px) scale(.9);
}
.word-card.enter{ animation: wordEnter .22s cubic-bezier(.2,1.3,.4,1) forwards; }
.word-card.hit{ animation: wordHit .4s ease forwards; border-color: var(--green); box-shadow: 0 0 0 4px rgba(43,255,136,.25), 0 0 40px rgba(43,255,136,.6); }
.word-card.bad{ animation: wordBad .4s ease forwards; border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,59,78,.25), 0 0 40px rgba(255,59,78,.55); }
.word-card.miss{ animation: wordMiss .35s ease forwards; }
@keyframes wordEnter{ to{ opacity:1; transform:none; } }
@keyframes wordHit{ to{ opacity:0; transform: translateY(-34px) scale(1.08);} }
@keyframes wordBad{ 0%,100%{ transform: translateX(0);} 20%{transform:translateX(-12px);} 40%{transform:translateX(12px);} 60%{transform:translateX(-8px);} 80%{transform:translateX(8px);} 100%{opacity:0;} }
@keyframes wordMiss{ to{ opacity:0; transform: translateY(14px) scale(.94); filter: blur(2px);} }

.word-text{
  font-family: var(--font-display); font-size: clamp(22px,5.4vw,42px);
  color: var(--ink); line-height:1.05; text-shadow: 0 2px 0 rgba(0,0,0,.4);
  display:block; text-wrap: balance;
}
.word-meter{
  margin-top:.55em; height:7px; border-radius:99px;
  background: rgba(255,255,255,.12); overflow:hidden;
}
.word-meter span{ display:block; height:100%; width:100%;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--pink));
  transform-origin: left center; }

/* Petit texte qui s'envole (points / RATÉ) */
.floater{ position:absolute; top:6%; left:50%; transform:translateX(-50%);
  font-family: var(--font-display); font-size: clamp(22px,5vw,38px);
  opacity:0; pointer-events:none; white-space:nowrap; }
.floater.go{ animation: floatUp .85s ease forwards; }
@keyframes floatUp{ 0%{ opacity:0; transform: translate(-50%,8px) scale(.7);} 25%{opacity:1; transform:translate(-50%,-6px) scale(1.1);} 100%{ opacity:0; transform: translate(-50%,-46px) scale(1);} }
.floater.plus{ color: var(--green); text-shadow: 0 0 16px rgba(43,255,136,.7); }
.floater.minus{ color: var(--red); text-shadow: 0 0 16px rgba(255,59,78,.7); }
.floater.neutral{ color: var(--ink-dim); }

/* Buzzer */
.buzzer{
  position:relative; width: clamp(116px,26vw,150px); aspect-ratio:1; border-radius:50%;
  border:none; cursor:pointer; background:none; flex:none;
  display:grid; place-items:center; touch-action: manipulation;
}
.buzzer-core{
  position:relative; z-index:2; width:78%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--font-display); font-size: clamp(20px,4.5vw,28px); color:#fff;
  background: radial-gradient(circle at 38% 32%, #ff6aa0, var(--pink) 55%, #c30057 100%);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.45), inset 0 6px 10px rgba(255,255,255,.4), 0 12px 0 #8e0040, var(--glow-p);
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
  transition: transform .06s ease, box-shadow .06s ease;
}
.buzzer-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid rgba(255,46,136,.5);
  animation: ringPulse 1.8s ease-out infinite; }
@keyframes ringPulse{ 0%{ transform:scale(.85); opacity:.8;} 100%{ transform:scale(1.25); opacity:0;} }
.buzzer:active .buzzer-core, .buzzer.press .buzzer-core{ transform: translateY(10px); box-shadow: inset 0 -3px 10px rgba(0,0,0,.5), inset 0 4px 8px rgba(255,255,255,.35), 0 2px 0 #8e0040, var(--glow-p); }
.buzzer[disabled]{ opacity:.45; cursor:default; }
.buzzer[disabled] .buzzer-ring{ display:none; }

/* Compte à rebours */
.overlay{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.1em; text-align:center;
  background: radial-gradient(circle at center, rgba(11,5,36,.7), rgba(6,2,22,.93));
  backdrop-filter: blur(3px);
}
.overlay[hidden]{ display:none; }
.over-round{ font-family: var(--font-display); color: var(--cyan); text-shadow: var(--glow-c); font-size: clamp(18px,4vw,28px); letter-spacing:.2em; }
.over-name{ font-family: var(--font-display); color: var(--ink); font-size: clamp(26px,7vw,52px); margin-bottom:.2em; text-transform:uppercase; }
.over-num{ font-family: var(--font-display); color: var(--yellow); text-shadow: var(--glow-y); font-size: clamp(80px,26vw,200px); line-height:1; }
.over-num.tick{ animation: numTick .9s ease; }
@keyframes numTick{ 0%{ transform: scale(.3); opacity:0; filter: blur(6px);} 35%{ transform: scale(1); opacity:1; filter:none;} 100%{ transform: scale(1.4); opacity:0;} }

/* =========================================================
   ÉCRAN FIN
   ========================================================= */
.end-wrap{ text-align:center; max-width: 560px; }
.end-kicker{ font-family: var(--font-display); letter-spacing:.3em; color: var(--cyan); text-shadow: var(--glow-c); font-size: clamp(12px,2.6vw,17px); }
.end-title{ font-family: var(--font-display); font-size: clamp(38px,10vw,76px); color: var(--yellow); text-shadow: var(--glow-y), 3px 3px 0 var(--pink); margin:.05em 0 .25em; }
.end-score{ margin:.4em 0 .2em; }
.end-score span{ font-family: var(--font-display); font-size: clamp(60px,16vw,120px); color: var(--ink); line-height:1; display:block; text-shadow: var(--glow-c); }
.end-score small{ color: var(--ink-dim); letter-spacing:.3em; text-transform:uppercase; font-size: clamp(12px,2.4vw,15px); }
.end-stats{ list-style:none; display:flex; justify-content:center; gap: clamp(14px,5vw,40px); margin: clamp(20px,4vw,34px) 0; }
.end-stats li{ display:flex; flex-direction:column; }
.es-num{ font-family: var(--font-display); font-size: clamp(30px,7vw,48px); }
.end-stats li:nth-child(1) .es-num{ color: var(--green); }
.end-stats li:nth-child(2) .es-num{ color: var(--ink-dim); }
.end-stats li:nth-child(3) .es-num{ color: var(--red); }
.es-lab{ font-size: clamp(11px,2.2vw,13px); color: var(--ink-dim); letter-spacing:.1em; text-transform:uppercase; }
.end-actions{ display:flex; flex-direction:column; gap:14px; align-items:center; }

/* Toggle son */
.sound-toggle{
  position:fixed; top: calc(10px + env(safe-area-inset-top)); right:12px; z-index:20;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  font-size:20px; color: var(--ink); display:grid; place-items:center;
  transition: transform .1s, background .2s;
}
.sound-toggle:hover{ background: rgba(255,255,255,.16); }
.sound-toggle:active{ transform: scale(.92); }
.sound-toggle.off{ opacity:.5; }

/* Flash plein écran sur événement */
.stage.flash-good::after,
.stage.flash-bad::after{
  content:""; position:fixed; inset:0; z-index:8; pointer-events:none; animation: flash .4s ease forwards;
}
.stage.flash-good::after{ background: radial-gradient(circle, rgba(43,255,136,.28), transparent 70%); }
.stage.flash-bad::after{ background: radial-gradient(circle, rgba(255,59,78,.3), transparent 70%); }
@keyframes flash{ from{ opacity:1;} to{ opacity:0;} }

/* Plus d'air sous le kicker de l'écran titre */
.title-wrap .kicker{ margin-bottom: 1.5em; }

/* =========================================================
   MENUS (mode, setup, online, roster)
   ========================================================= */
.menu-wrap{ width:min(560px,100%); text-align:center; }
.menu-title{ font-family: var(--font-display); font-size: clamp(26px,7vw,46px); color: var(--ink); margin:.1em 0 .7em; }

.title-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* Cartes de mode */
.mode-grid{ display:grid; gap:14px; margin: 10px 0 22px; }
.mode-card{
  display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: clamp(14px,3vw,20px) clamp(16px,4vw,24px);
  color: var(--ink); transition: transform .08s, border-color .15s, background .15s;
}
.mode-card:hover{ border-color: var(--cyan); background: rgba(0,229,255,.08); transform: translateY(-2px); }
.mode-card:active{ transform: translateY(0); }
.mode-ico{ font-size: clamp(28px,7vw,40px); flex:none; }
.mode-name{ font-family: var(--font-display); font-size: clamp(20px,4.5vw,28px); display:block; }
.mode-desc{ color: var(--ink-dim); font-size: clamp(12px,2.6vw,15px); display:block; }
.mode-card > span:nth-child(2){ flex:1; }

.back-btn{ margin-top:8px; }
.menu-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:18px; }

/* Champs */
.field{
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding:.7em 1.1em; outline:none; min-width:0;
}
.field::placeholder{ color: var(--ink-dim); }
.field:focus{ border-color: var(--cyan); box-shadow: var(--glow-c); }
.field--upper{ text-transform:uppercase; }
.field-label{ display:block; color: var(--ink-dim); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; text-align:left; }
.add-form{ display:flex; gap:10px; justify-content:center; margin:6px 0 4px; }
.add-form .field{ flex:1; max-width:320px; }
/* Variante colonne (formulaire de compte : pseudo + mot de passe empilés) */
.add-form--col{ flex-direction:column; align-items:stretch; max-width:320px; margin:6px auto; }
.add-form--col .field{ max-width:none; }

/* Roster (chips joueurs sélectionnables) */
.roster{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 8px 0; min-height:10px; }
.pchip{
  position:relative; display:flex; align-items:center; gap:8px; cursor:pointer;
  background: rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.16);
  border-radius: 999px; padding:.5em .9em; color: var(--ink); font-weight:700;
  transition: border-color .15s, background .15s, transform .08s;
}
.pchip:hover{ transform: translateY(-1px); }
.pchip .dot{ width:14px; height:14px; border-radius:50%; flex:none; color: var(--c, currentColor); box-shadow: 0 0 8px currentColor; }
.pchip.sel{ border-color: var(--c, var(--cyan)); background: rgba(255,255,255,.12); }
.pchip.sel::after{ content:"✓"; font-size:13px; color: var(--c, var(--cyan)); }
.pchip .pk{ font-family: var(--font-display); font-size:12px; background: rgba(0,0,0,.35); border-radius:6px; padding:.05em .45em; }
.pchip .rm{ border:none; background:rgba(255,59,78,.85); color:#fff; width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:12px; line-height:1; }
.setup-hint{ color: var(--ink-dim); font-size:13px; margin:8px 0; min-height:1em; }

/* =========================================================
   ONLINE (lobby)
   ========================================================= */
.online-choices{ display:flex; flex-direction:column; gap:14px; align-items:center; margin-top:16px; }
.join-row{ display:flex; gap:10px; }
.join-row .field{ width:140px; text-align:center; font-family: var(--font-display); letter-spacing:.2em; }
.lobby-status{ color: var(--cyan); font-family: var(--font-display); letter-spacing:.1em; margin-bottom:14px; }
.room-code{ background: rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.3); border-radius: var(--r-lg); padding:14px; margin-bottom:16px; }
.rc-label{ display:block; color: var(--ink-dim); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.rc-code{ display:block; font-family: var(--font-display); font-size: clamp(34px,9vw,58px); color: var(--yellow); text-shadow: var(--glow-y); letter-spacing:.15em; margin:.1em 0; }
.lobby-players{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:8px 0 18px; min-height:40px; }
.lobby-wait{ color: var(--ink-dim); margin-top:10px; }
#online-back{ margin-top:26px; }
#btn-online-start{ margin-bottom:6px; }

/* =========================================================
   SCOREBOARD (en jeu)
   ========================================================= */
.hud-q{ text-align:center; color: var(--ink-dim); font-size: clamp(12px,2.6vw,15px); letter-spacing:.06em; }
.hud-q b{ font-family: var(--font-display); color: var(--ink); font-size: 1.5em; }
.scoreboard{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.sb-chip{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.05); border:2px solid var(--c,#fff3); border-radius: 999px;
  padding:.35em .8em; transition: transform .1s, box-shadow .1s, background .15s;
}
.sb-chip .sb-key{ font-family: var(--font-display); font-size:12px; background: rgba(0,0,0,.35); border-radius:6px; padding:.05em .45em; color: var(--ink); }
.sb-chip .sb-name{ font-weight:700; color: var(--ink); font-size: clamp(12px,2.6vw,15px); max-width:8ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-chip .sb-score{ font-family: var(--font-display); color: var(--c,#fff); min-width:2ch; text-align:right; }
.sb-chip.flash-good{ background: rgba(43,255,136,.2); box-shadow: 0 0 18px rgba(43,255,136,.5); transform: scale(1.08); }
.sb-chip.flash-bad{ background: rgba(255,59,78,.2); box-shadow: 0 0 18px rgba(255,59,78,.45); transform: scale(.96); }
.sb-chip.lead{ border-width:2px; }

/* =========================================================
   FIN — podium / classement
   ========================================================= */
.end-podium{ display:flex; flex-direction:column; gap:10px; margin: clamp(16px,4vw,28px) 0; }
.pod-row{ display:flex; align-items:center; gap:14px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: var(--r); padding:.7em 1em; }
.pod-row.win{ border-color: var(--yellow); box-shadow: var(--glow-y); background: rgba(255,230,0,.08); }
.pod-rank{ font-family: var(--font-display); font-size: clamp(22px,5vw,32px); color: var(--ink-dim); width:1.6em; }
.pod-row.win .pod-rank{ color: var(--yellow); }
.pod-dot{ width:16px; height:16px; border-radius:50%; color: var(--c, currentColor); box-shadow: 0 0 8px currentColor; flex:none; }
.pod-name{ flex:1; text-align:left; font-weight:700; font-size: clamp(15px,3.4vw,20px); }
.pod-score{ font-family: var(--font-display); font-size: clamp(20px,4.6vw,30px); color: var(--ink); }
.pod-sub{ color: var(--ink-dim); font-size:12px; }

/* =========================================================
   HALL OF FAME
   ========================================================= */
.hof-wrap{ width:min(560px,100%); text-align:center; }
.hof-tabs{ display:flex; gap:8px; justify-content:center; margin:14px 0 18px; }
.hof-tab{
  font-family: var(--font-display); cursor:pointer; color: var(--ink-dim);
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding:.5em 1.2em; font-size: clamp(13px,3vw,17px);
  transition: color .15s, border-color .15s, background .15s;
}
.hof-tab.is-on{ color:#160a3d; background: var(--yellow); border-color: var(--yellow); box-shadow: var(--glow-y); }
.hof-list{ list-style:none; display:flex; flex-direction:column; gap:8px; text-align:left; max-height:50vh; overflow-y:auto; padding:2px; }
.hof-row{ display:flex; align-items:center; gap:12px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: var(--r); padding:.55em .9em; }
.hof-row:nth-child(1){ border-color: var(--yellow); }
.hof-row:nth-child(2){ border-color: rgba(200,200,220,.5); }
.hof-row:nth-child(3){ border-color: #cd7f32; }
.hof-rank{ font-family: var(--font-display); font-size: clamp(18px,4vw,26px); width:1.8em; color: var(--ink-dim); }
.hof-row:nth-child(1) .hof-rank{ color: var(--yellow); }
.hof-dot{ width:14px; height:14px; border-radius:50%; color: var(--c, currentColor); box-shadow:0 0 8px currentColor; flex:none; }
.hof-name{ flex:1; font-weight:700; }
.hof-meta{ color: var(--ink-dim); font-size:11px; }
.hof-score{ font-family: var(--font-display); font-size: clamp(18px,4vw,26px); color: var(--ink); }
.hof-empty{ color: var(--ink-dim); margin:24px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .rules{ margin-top:18px; }
}
@media (max-height: 700px){
  .title-wrap .rules{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .bg-grid, .bg-glow, .buzzer-ring{ animation:none; }
}