/* ================================================================
   PIXELDROP — Styles app
   Charge ../shared/design-tokens.css EN PREMIER (cf. index.html).
   Composants alignés sur le design system SpikeMind pour rester cohérents
   au sein du hub. Spécifique au jeu : canvas, input de réponse, feed des
   bonnes réponses.
   ================================================================ */

html, body { background: var(--bg-0); min-height: 100vh; }
body { overflow-x: hidden; }

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

/* ========== Background orbes (visualiseur ambiant, sans audio) ========== */
.viz-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden; opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.viz-orbs.on { opacity: 1; }

.viz-drift {
  position: absolute; will-change: transform;
  animation: orb-drift 18s ease-in-out infinite;
}
.viz-drift.d1 { animation-duration: 22s; animation-delay: -3s; }
.viz-drift.d2 { animation-duration: 28s; animation-delay: -8s; }
.viz-drift.d3 { animation-duration: 16s; animation-delay: -12s; }
.viz-drift.d4 { animation-duration: 24s; animation-delay: -5s; }

@keyframes orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(60px, -40px, 0); }
  66%      { transform: translate3d(-40px, 30px, 0); }
}

.viz-orb {
  border-radius: 50%;
  filter: blur(56px);
  width: 100%; height: 100%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  transform: scale(1);
}
.viz-orb.red     { background: radial-gradient(circle, rgba(255,46,77,0.85),  rgba(255,46,77,0) 70%); }
.viz-orb.cyan    { background: radial-gradient(circle, rgba(0,229,199,0.65),  rgba(0,229,199,0) 70%); }
.viz-orb.magenta { background: radial-gradient(circle, rgba(255,63,164,0.55), rgba(255,63,164,0) 70%); }

/* Pulses lents et désynchronisés (sans audio, c'est juste du décor) */
@keyframes orb-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.30; }
  50%      { transform: scale(1.20); opacity: 0.70; }
}
.viz-orb.pulse-p1 { animation: orb-pulse 6.0s ease-in-out infinite; }
.viz-orb.pulse-p2 { animation: orb-pulse 7.5s ease-in-out infinite -2s; }
.viz-orb.pulse-p3 { animation: orb-pulse 5.5s ease-in-out infinite -4s; }
.viz-orb.pulse-p4 { animation: orb-pulse 8.5s ease-in-out infinite -1s; }

/* ========== Background ambient ========== */
.page-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(0,229,199,0.10), transparent 60%),
    radial-gradient(60% 60% at 15% 80%, rgba(255,46,77,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%);
}
.page-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(50% 60% at 50% 40%, #000 0%, transparent 80%);
  opacity: 0.5;
}

/* ========== Layout ========== */
.shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .shell { padding: 0 16px; } }

/* ========== Top nav (aligné SpikeMind) ========== */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,8,10,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--stroke-2);
}
.topnav-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--spike-red);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.brand img { width: 26px; height: 26px; }
.brand-text {
  font-family: var(--font-display); font-size: 24px; color: var(--fg-0);
  letter-spacing: 0.04em; line-height: 1;
}
.brand-text .red { color: var(--spike-red); }

.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links button, .nav-links a {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  color: var(--fg-2); letter-spacing: 0.10em; text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  position: relative;
}
.nav-links button:hover, .nav-links a:hover { color: var(--fg-0); background: rgba(255,255,255,0.04); }
.nav-links button.active, .nav-links a.active {
  color: var(--fg-0);
  background: rgba(255,46,77,0.10);
  border-color: var(--spike-red);
}
@media (max-width: 720px) {
  .nav-links { display: none; }
}

.nav-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 18px;
}
.nav-online {
  font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan);
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-locale {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.16em; text-transform: uppercase;
}
@media (max-width: 540px) { .nav-online, .nav-locale { display: none; } }

.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; background: none; border: 1px solid var(--stroke-2); padding: 6px 10px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
}
.nav-user:hover { color: var(--fg-0); border-color: var(--neon-cyan); }
.nav-user .badge-admin { color: var(--spike-red); }

/* LIVE pulse dot (utilisé dans .nav-online) */
.dot-live {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 0 4px rgba(0,229,199,0.18);
  animation: pulse-live 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(0,229,199,0.18); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(0,229,199,0.05); }
}

/* ========== Buttons (alignés SpikeMind) ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  letter-spacing: var(--tr-button); text-transform: uppercase;
  padding: 14px 22px; border: none; cursor: pointer;
  background: transparent; color: var(--fg-1); white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: var(--spike-red); color: var(--fg-0);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn.primary:hover:not(:disabled) {
  background: #ff3f5d; box-shadow: var(--glow-red-strong); transform: translateY(-1px);
}
.btn.primary:active:not(:disabled) { transform: scale(0.98); }
.btn.secondary {
  color: var(--fg-0); box-shadow: inset 0 0 0 1px var(--stroke-3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn.secondary:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--neon-cyan); color: var(--neon-cyan);
}
.btn.ghost { padding: 12px 14px; color: var(--fg-2); }
.btn.ghost:hover { color: var(--fg-0); }
.btn .arrow { font-family: var(--font-mono); }
.btn.full { width: 100%; }

/* ========== Inputs ========== */
.input, .select {
  display: block; width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--stroke-2); color: var(--fg-0);
  padding: 12px 14px;
  font-family: var(--font-ui); font-size: 14px;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-base) var(--ease-out);
}
.input:focus, .select:focus { outline: none; border-color: var(--neon-cyan); }
.label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.field { margin-bottom: 14px; }

/* ========== Section head ========== */
.section-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.section-head .num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--spike-red); text-transform: uppercase;
}
.section-head .title {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.01em; color: var(--fg-0);
  text-transform: uppercase; line-height: 0.92;
}
.section-head .meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ========== Loader ========== */
.loader {
  width: 28px; height: 28px; border: 2px solid var(--stroke-2);
  border-top-color: var(--spike-red); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Notifications ========== */
#notifBar {
  position: fixed; top: 80px; right: 24px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.notif {
  padding: 12px 16px;
  background: var(--surface-card-hi); border: 1px solid var(--stroke-2);
  color: var(--fg-1);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transform: translateX(140%); opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med);
  max-width: 360px;
}
.notif.show { transform: translateX(0); opacity: 1; }
.notif-success { border-color: var(--neon-cyan); }
.notif-warning { border-color: var(--amber); }
.notif-error   { border-color: var(--spike-red); }
.notif-info    { border-color: var(--stroke-3); }

/* ========== Footer ========== */
.footer-status {
  border-top: 1px solid var(--stroke-1);
  padding: 18px 0; margin-top: 60px;
  background: rgba(0,0,0,0.4);
}
.footer-status .inner {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.footer-status .red { color: var(--spike-red); }
.footer-status .cyan { color: var(--neon-cyan); }

/* ========== Animations utilitaires ========== */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rise   { animation: rise .55s var(--ease-out) both; }
.rise-2 { animation: rise .55s var(--ease-out) .08s both; }
.rise-3 { animation: rise .55s var(--ease-out) .16s both; }
.rise-4 { animation: rise .55s var(--ease-out) .24s both; }

/* ========== Hero (landing) ========== */
.hero { padding: 80px 0 60px; text-align: left; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 14px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; width: 32px; height: 1px; background: var(--stroke-3);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--fg-0);
  margin: 0;
}
.hero-title .red { color: var(--spike-red); }
.hero-sub {
  font-family: var(--font-body); font-size: 18px;
  color: var(--fg-2); max-width: 680px; margin: 18px 0 0;
  line-height: 1.5;
}
@media (max-width: 720px) { .hero { padding: 56px 0 40px; } .hero-sub { font-size: 16px; } }

.hero-cta {
  display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
}

/* ========== Cards ========== */
.card {
  background: var(--surface-card); border: 1px solid var(--stroke-2);
  padding: 24px 26px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.card.hi { background: var(--surface-card-hi); }

/* ========== Lobby — Code bar + actions ========== */
.wait-wrap { padding: 32px 0 64px; }
.wait-code-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  background: var(--surface-card-hi); border: 1px solid var(--stroke-2);
  padding: 24px 28px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.wait-code-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--spike-red);
}
.wait-code {
  font-family: var(--font-display); font-size: 64px; line-height: 1;
  letter-spacing: 0.16em; color: var(--spike-red); margin-top: 6px;
}
@media (max-width: 720px) { .wait-code { font-size: 48px; } }
.wait-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ========== Players grid ========== */
.players-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  margin-top: 14px;
}
.player-tile {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-card); border: 1px solid var(--stroke-2);
  padding: 14px 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.player-tile.me { border-color: var(--neon-cyan); }
.p-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-cyan); box-shadow: 0 0 0 4px rgba(0,229,199,0.15);
  flex-shrink: 0;
}
.p-name {
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: var(--fg-1); flex: 1; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.04em;
}
.p-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 6px; border: 1px solid var(--stroke-3);
}
.p-tag.host { color: var(--spike-red); border-color: var(--spike-red); }
.p-tag.me   { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.p-tag.found { color: var(--neon-cyan); border-color: var(--neon-cyan); background: rgba(0,229,199,0.08); }
.p-score {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.04em; margin-left: auto;
}

/* ========== Lobby CTA ========== */
.wait-cta {
  margin-top: 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* ========== Starting countdown ========== */
.starting-wrap {
  padding: 120px 0; text-align: center;
}
.countdown {
  font-family: var(--font-display); font-size: clamp(120px, 18vw, 240px);
  line-height: 1; letter-spacing: -0.02em; color: var(--fg-0);
  margin: 14px 0;
  animation: countdownPulse 1s var(--ease-out) infinite;
}
@keyframes countdownPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,46,77,0); }
  50%      { transform: scale(1.04); text-shadow: 0 0 60px rgba(255,46,77,0.55); }
}

/* =====================================================
   IN-GAME DESIGN (ROUND / REVEAL / FINISHED)
   Repris du design system pixeldrop.css — saisie libre
   conservée à la place du QCM 4 options.
   ===================================================== */

/* Immersive mode : on garde la topnav (volume / nav) — comme SpikeMind —
   mais on cache le footer et on rend le pd-header un poil plus compact
   pour ne pas avoir 2 « bandeaux » qui se chevauchent visuellement. */
body.pd-immersive .footer-status { display: none; }
body.pd-immersive { background: var(--bg-0); }
body.pd-immersive .pd-shell { padding-top: 8px; }
body.pd-immersive .pd-header { padding: 8px 0 16px; }

/* ========== Volume widget (cohérent SpikeMind) ========== */
.vol-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px; border: 1px solid var(--stroke-2);
  background: rgba(255,255,255,0.02);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition: border-color var(--dur-base) var(--ease-out);
}
.vol-wrap:hover { border-color: var(--neon-cyan); }
.vol-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 4px; cursor: pointer;
  color: var(--fg-2); transition: color var(--dur-base) var(--ease-out);
}
.vol-btn:hover { color: var(--neon-cyan); }
.vol-btn.muted { color: var(--spike-red); }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 64px; height: 4px;
  background: var(--stroke-2);
  border-radius: 0; outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px;
  background: var(--neon-cyan); border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px var(--neon-cyan-glow, rgba(0,229,199,0.6));
}
.vol-slider::-moz-range-thumb {
  width: 10px; height: 10px;
  background: var(--neon-cyan); border-radius: 50%; border: 0; cursor: pointer;
  box-shadow: 0 0 8px var(--neon-cyan-glow, rgba(0,229,199,0.6));
}
@media (max-width: 720px) { .vol-slider { width: 48px; } }

/* ---------- Page bg ---------- */
.pd-bg {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
}
.pd-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(75% 60% at 50% 0%, rgba(255,46,77,0.12), transparent 65%),
    radial-gradient(50% 50% at 15% 100%, rgba(0,229,199,0.08), transparent 70%),
    radial-gradient(40% 40% at 100% 90%, rgba(255,46,77,0.06), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 70%);
}
.pd-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 80% at 50% 40%, black 0%, transparent 95%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, black 0%, transparent 95%);
}
.pd-bg-scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px
  );
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* ---------- Shell ---------- */
.pd-shell {
  position: relative; z-index: 1;
  max-width: 1520px; margin: 0 auto;
  padding: 18px 36px 120px;
  min-height: 100vh;
}
@media (max-width: 1024px) {
  .pd-shell { padding: 14px 20px 120px; }
}

/* ---------- Header ---------- */
.pd-header {
  display: flex; align-items: center; gap: 22px;
  padding: 12px 0 20px;
  flex-wrap: wrap;
}
.pd-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg-0);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.pd-logo img { width: 26px; height: 26px; }
.pd-logo span {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.04em;
}
.pd-logo em { color: var(--spike-red); font-style: normal; }

.pd-mode-pill {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.20em;
  color: var(--spike-red); text-transform: uppercase;
  padding: 8px 14px;
  background: rgba(255,46,77,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,46,77,0.45);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.pd-mode-dot {
  width: 6px; height: 6px;
  background: var(--spike-red);
  box-shadow: 0 0 12px rgba(255,46,77,0.6);
  animation: pd-pulse-red 1.6s ease-in-out infinite;
}
@keyframes pd-pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pd-room-code {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase; white-space: nowrap;
}
.pd-room-code strong { color: var(--fg-0); font-weight: 600; }
.pd-header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
}
@media (max-width: 1024px) {
  .pd-header-right { gap: 14px; }
  .pd-room-code { display: none; }
}

.pd-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 500;
  display: block; margin-bottom: 6px; white-space: nowrap;
}
.pd-eyebrow.accent { color: var(--spike-red); }

.pd-round-counter, .pd-timer {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1; flex-shrink: 0;
}
.pd-round-counter .pd-eyebrow,
.pd-timer .pd-eyebrow { margin-bottom: 4px; }
.pd-round-num {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 0.04em; color: var(--fg-3);
}
.pd-round-num em { font-style: normal; color: var(--fg-0); }
.pd-timer-val {
  font-family: var(--font-display);
  font-size: 32px; letter-spacing: 0.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}
.pd-timer.danger .pd-timer-val {
  color: var(--spike-red);
  text-shadow: 0 0 24px rgba(255,46,77,0.6);
  animation: pd-timer-shake 0.5s ease-in-out infinite;
}
@keyframes pd-timer-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
@media (max-width: 1024px) {
  .pd-round-num { font-size: 22px; }
  .pd-timer-val { font-size: 26px; }
}

.pd-quit {
  background: transparent;
  color: var(--fg-3); border: none;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all var(--dur-base) var(--ease-out);
}
.pd-quit:hover {
  color: var(--spike-red);
  box-shadow: inset 0 0 0 1px var(--spike-red);
}

/* =====================================================
   STAGE — 3 colonnes : rail · image · rail
   ===================================================== */
.pd-stage {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 24px; align-items: flex-start;
}
@media (max-width: 1280px) {
  .pd-stage { grid-template-columns: 240px 1fr 240px; }
}
@media (max-width: 1024px) {
  .pd-stage { grid-template-columns: 1fr; }
  .pd-rail { display: none; }
}

/* ---------- Rails ---------- */
.pd-rail {
  background: rgba(14,16,20,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 14px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pd-rail-l { animation: pd-fade-l 0.5s var(--ease-out) both; }
.pd-rail-r { animation: pd-fade-r 0.5s var(--ease-out) both; }
@keyframes pd-fade-l {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pd-fade-r {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.pd-rail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--stroke-2);
}
.pd-rail-head .pd-eyebrow { margin-bottom: 0; }
.pd-rail-right {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3);
}

/* ---------- Live feed ---------- */
.pd-feed {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 320px;
}
.pd-feed-empty {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.16em;
  padding: 20px 8px; text-align: center;
}
.pd-feed-row {
  display: grid;
  grid-template-columns: 28px 24px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 8px; padding: 8px 8px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--stroke-1);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
}
.pd-feed-row.correct {
  box-shadow: inset 0 0 0 1px rgba(0,229,199,0.35);
  background: rgba(0,229,199,0.05);
}
.pd-feed-row.recent { animation: pd-feed-flash 0.6s var(--ease-out); }
@keyframes pd-feed-flash {
  0% { transform: translateX(-8px); opacity: 0; }
  40% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
.pd-feed-order {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--fg-3); letter-spacing: 0.10em;
}
.pd-feed-avatar {
  grid-row: 1 / 3;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  color: var(--fg-0); letter-spacing: 0.04em;
}
.pd-feed-name {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  color: var(--fg-0); letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-feed-time {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em;
}
.pd-feed-pts {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  grid-column: 4; grid-row: 1 / 3; align-self: center;
}
.pd-feed-pts.pos { color: var(--neon-cyan); }
.pd-feed-pts.zero { color: var(--fg-3); }

/* ---------- Leaderboard compact ---------- */
.pd-leader {
  display: flex; flex-direction: column; gap: 4px;
}
.pd-leader-row {
  display: grid;
  grid-template-columns: 28px 26px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--stroke-1);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
}
.pd-leader-row.you {
  background: rgba(255,46,77,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,46,77,0.35);
}
.pd-leader-rank {
  font-family: var(--font-display);
  font-size: 18px; color: var(--fg-3);
  letter-spacing: 0.04em; text-align: right; line-height: 1;
}
.pd-leader-row:first-child .pd-leader-rank { color: var(--amber); }
.pd-leader-avatar {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  color: var(--fg-0); letter-spacing: 0.04em;
}
.pd-leader-name {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  color: var(--fg-0); letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-leader-name em {
  font-style: normal; color: var(--spike-red);
  font-weight: 500; font-size: 9px; letter-spacing: 0.14em;
}
.pd-leader-score {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.pd-leader-row:first-child .pd-leader-score { color: var(--amber); }

/* =====================================================
   IMAGE ZONE
   ===================================================== */
.pd-image-zone {
  display: flex; flex-direction: column; gap: 18px;
  animation: pd-fade-up 0.5s var(--ease-out) both;
}
@keyframes pd-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pd-pixelframe {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  background:
    radial-gradient(55% 55% at 50% 35%, rgba(255,46,77,0.05), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  transition: box-shadow var(--dur-med) var(--ease-out);
  overflow: hidden;
}

/* Canvas / image affichée pixelisée */
.pd-canvas {
  width: 92%; height: 92%;
  display: block; object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: contrast(1.05) saturate(1.05);
  user-select: none;
  -webkit-user-drag: none;
}

.pd-bracket {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--spike-red);
}
.pd-bracket.tl { top: 14px; left: 14px; border-top: 2px solid; border-left: 2px solid; }
.pd-bracket.tr { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; }
.pd-bracket.bl { bottom: 14px; left: 14px; border-bottom: 2px solid; border-left: 2px solid; }
.pd-bracket.br { bottom: 14px; right: 14px; border-bottom: 2px solid; border-right: 2px solid; }

.pd-frame-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
  pointer-events: none;
}
.pd-frame-tag.tl { top: 18px; left: 44px; }
.pd-frame-tag.tr { top: 18px; right: 44px; color: var(--spike-red); }
.pd-frame-tag.bl { bottom: 18px; left: 44px; }
.pd-frame-tag.br { bottom: 18px; right: 44px; }
.pd-mono-blink { animation: pd-blink 1.4s ease-in-out infinite; }
@keyframes pd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pd-scan-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; opacity: 0.7;
}
.pd-scan-overlay.slow {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px);
}

/* Strip clarity + live points */
.pd-image-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  padding: 14px 22px;
  background: rgba(20,22,28,0.6);
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pd-meta-l, .pd-meta-r { display: flex; flex-direction: column; gap: 2px; }
.pd-meta-r { align-items: flex-end; }
.pd-clarity {
  font-family: var(--font-display);
  font-size: 32px; color: var(--fg-0);
  letter-spacing: 0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pd-clarity-pct { color: var(--fg-3); font-size: 18px; margin-left: 2px; }
.pd-livepoints {
  font-family: var(--font-display);
  font-size: 32px; color: var(--neon-cyan);
  letter-spacing: 0.02em; line-height: 1;
  text-shadow: 0 0 16px rgba(0,229,199,0.35);
  font-variant-numeric: tabular-nums;
}
.pd-clarity-bar {
  display: flex; gap: 3px; align-items: center; height: 18px;
}
.pd-seg {
  flex: 1; height: 14px;
  background: rgba(255,255,255,0.06);
  transition: all var(--dur-fast) linear;
}
.pd-seg.on {
  background: linear-gradient(180deg, var(--neon-cyan), #00B89F);
  box-shadow: 0 0 8px rgba(0,229,199,0.4);
}
.pd-seg.on:nth-last-child(-n+6) {
  background: linear-gradient(180deg, var(--amber), #C68500);
  box-shadow: 0 0 10px rgba(255,184,0,0.5);
}
@media (max-width: 640px) {
  .pd-image-meta { grid-template-columns: 1fr; gap: 14px; }
  .pd-meta-r { align-items: flex-start; }
}

/* =====================================================
   ANSWER INPUT (remplace les pd-options du design)
   ===================================================== */
.pd-answer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.pd-answer-input {
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-0);
  background: rgba(255,255,255,0.02);
  border: none;
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
  width: 100%;
}
.pd-answer-input::placeholder {
  color: var(--fg-3); font-family: var(--font-display); letter-spacing: 0.04em;
}
.pd-answer-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--stroke-3);
  background: rgba(255,255,255,0.04);
}
.pd-answer-input.locked {
  background: rgba(0,229,199,0.10);
  box-shadow: inset 0 0 0 1px var(--neon-cyan), 0 0 40px rgba(0,229,199,0.30);
  color: var(--neon-cyan);
  animation: pd-pop-correct 0.4s var(--ease-out);
}
.pd-answer-input.shake {
  animation: pd-pop-wrong 0.45s var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--spike-red), 0 0 24px rgba(255,46,77,0.30);
  color: var(--spike-red);
}
@keyframes pd-pop-correct {
  0% { transform: scale(0.99); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes pd-pop-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.pd-answer-submit {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 18px 26px; border: none; cursor: pointer;
  background: var(--spike-red); color: var(--fg-0);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: all var(--dur-base) var(--ease-out);
}
.pd-answer-submit:hover {
  background: #FF455F;
  box-shadow: 0 0 32px rgba(255,46,77,0.55);
  transform: translateY(-1px);
}
.pd-answer-submit:disabled { opacity: 0.4; cursor: default; }

.pd-hint {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
  text-align: center;
}

/* =====================================================
   REVEAL SCREEN
   ===================================================== */
.pd-reveal { padding: 24px 0 80px; animation: pd-fade-up 0.5s var(--ease-out) both; }
.pd-reveal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 36px; align-items: stretch;
}
@media (max-width: 1024px) {
  .pd-reveal-grid { grid-template-columns: 1fr; gap: 24px; }
}
.pd-reveal-frame {
  position: relative; aspect-ratio: 1 / 1;
  background:
    radial-gradient(55% 55% at 50% 35%, rgba(255,46,77,0.08), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  box-shadow: inset 0 0 0 1px var(--stroke-2), 0 0 80px rgba(255,46,77,0.18);
  display: grid; place-items: center; overflow: hidden;
  max-width: 560px; width: 100%; margin: 0 auto;
}
.pd-reveal-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 36px 32px;
  background: linear-gradient(180deg, transparent, rgba(7,8,10,0.92) 60%);
  display: flex; flex-direction: column; gap: 8px;
}
.pd-reveal-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: 0.02em; line-height: 0.92;
  color: var(--fg-0); text-transform: uppercase; margin: 0;
  text-shadow: 0 0 32px rgba(255,46,77,0.4);
}
.pd-reveal-role {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.20em;
  color: var(--neon-cyan); text-transform: uppercase;
}
.pd-reveal-rank { display: flex; flex-direction: column; gap: 16px; }
.pd-reveal-rank-head {
  display: flex; justify-content: space-between; align-items: center;
}
.pd-reveal-rank-head .pd-eyebrow { margin-bottom: 0; font-size: 11px; }

.pd-mono-pill {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--fg-3); text-transform: uppercase;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.pd-mono-pill em {
  color: var(--amber); font-style: normal;
  margin-left: 4px; font-weight: 700;
}

.pd-you-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px; padding: 20px 24px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: inset 0 0 0 1px var(--stroke-2);
}
.pd-you-card.correct { box-shadow: inset 0 0 0 1px var(--neon-cyan), 0 0 40px rgba(0,229,199,0.20); }
.pd-you-card.wrong   { box-shadow: inset 0 0 0 1px var(--spike-red),  0 0 24px rgba(255,46,77,0.20); }
.pd-you-card.missed  { box-shadow: inset 0 0 0 1px rgba(255,184,0,0.4); }
.pd-you-l, .pd-you-r { display: flex; flex-direction: column; gap: 2px; }
.pd-you-r { align-items: flex-end; }
.pd-you-status, .pd-you-time, .pd-you-pts {
  font-family: var(--font-display);
  font-size: 30px; letter-spacing: 0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--fg-0);
}
.pd-you-card.correct .pd-you-status { color: var(--neon-cyan); }
.pd-you-card.wrong .pd-you-status   { color: var(--spike-red); }
.pd-you-card.missed .pd-you-status  { color: var(--amber); }
.pd-you-pts.pos { color: var(--neon-cyan); }
.pd-you-pts.zero { color: var(--fg-3); }

.pd-rank-list { display: flex; flex-direction: column; gap: 4px; }
.pd-rank-row {
  display: grid;
  grid-template-columns: 36px 28px 1fr auto auto auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--stroke-1);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.pd-rank-row.you {
  box-shadow: inset 0 0 0 1px rgba(255,46,77,0.4);
  background: rgba(255,46,77,0.05);
}
.pd-rank-row.missed { opacity: 0.45; }
.pd-rank-pos {
  font-family: var(--font-display);
  font-size: 22px; color: var(--fg-3);
  letter-spacing: 0.04em; text-align: right; line-height: 1;
}
.pd-rank-row.correct:nth-child(1) .pd-rank-pos { color: var(--amber); }
.pd-rank-row.correct:nth-child(2) .pd-rank-pos { color: var(--fg-1); }
.pd-rank-row.correct:nth-child(3) .pd-rank-pos { color: var(--spike-red); }
.pd-rank-avatar {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; color: var(--fg-0);
}
.pd-rank-name {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  color: var(--fg-0); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pd-rank-name.dim { color: var(--fg-3); font-weight: 500; }
.pd-rank-clarity, .pd-rank-time {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.pd-rank-pts {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; min-width: 56px; text-align: right;
}
.pd-rank-pts.pos { color: var(--neon-cyan); }
.pd-rank-pts.zero { color: var(--fg-3); }

.pd-cta-skip {
  margin-top: 8px;
  background: transparent; color: var(--fg-1); border: none;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 24px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--stroke-3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: all var(--dur-base) var(--ease-out);
}
.pd-cta-skip:hover {
  color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--neon-cyan), 0 0 24px rgba(0,229,199,0.25);
}

/* =====================================================
   FINAL SCREEN
   ===================================================== */
.pd-final { padding: 48px 0 80px; animation: pd-fade-up 0.6s var(--ease-out) both; }
.pd-final-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 56px; text-align: center;
}
.pd-final-head .pd-eyebrow,
.pd-final-sub { white-space: nowrap; }
.pd-final-head .pd-eyebrow { font-size: 12px; margin-bottom: 0; }
.pd-final-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: 0.02em; line-height: 0.92;
  color: var(--fg-0); text-transform: uppercase; margin: 0;
  text-shadow: 0 0 48px rgba(255,46,77,0.3); white-space: nowrap;
}
.pd-final-sub {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.20em;
  color: var(--fg-3); text-transform: uppercase;
}
@media (max-width: 1024px) {
  .pd-final-title { font-size: 56px; }
}

/* Podium */
.pd-podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px; margin: 0 auto 56px;
  max-width: 920px; align-items: end;
}
.pd-podium-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.pd-podium-col.rank-1 { transform: translateY(-28px); }
.pd-podium-col.rank-3 { transform: translateY(14px); }
.pd-portrait-wrap { position: relative; --ring: var(--fg-1); }
.pd-portrait-rank-tag {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.20em;
  color: var(--ring); background: var(--bg-0);
  padding: 4px 10px;
  box-shadow: inset 0 0 0 1px var(--ring);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  z-index: 2;
}
.pd-portrait {
  width: 140px; height: 140px;
  display: grid; place-items: center;
  background:
    radial-gradient(50% 50% at 50% 40%, rgba(255,255,255,0.04), transparent 80%),
    linear-gradient(180deg, var(--bg-3), var(--bg-1));
  box-shadow:
    inset 0 0 0 2px var(--ring),
    0 0 32px color-mix(in srgb, var(--ring) 35%, transparent);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.pd-podium-col.rank-1 .pd-portrait { width: 160px; height: 160px; }
.pd-portrait-glyph {
  font-family: var(--font-display);
  font-size: 42px; letter-spacing: 0.04em;
  color: var(--fg-0);
  text-shadow: 0 0 24px color-mix(in srgb, var(--ring) 60%, transparent);
}
.pd-podium-plate {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  padding: 18px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  position: relative;
}
.pd-podium-col.rank-1 .pd-podium-plate {
  box-shadow: inset 0 0 0 1px rgba(255,184,0,0.5), 0 0 60px rgba(255,184,0,0.18);
}
.pd-podium-rank {
  font-family: var(--font-display);
  font-size: 36px; letter-spacing: 0.04em; line-height: 1; color: var(--fg-3);
}
.pd-podium-col.rank-1 .pd-podium-rank { color: var(--amber); font-size: 48px; }
.pd-podium-col.rank-2 .pd-podium-rank { color: var(--fg-1); }
.pd-podium-col.rank-3 .pd-podium-rank { color: var(--spike-red); }
.pd-podium-name {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 13px; letter-spacing: 0.10em;
  color: var(--fg-0); text-transform: uppercase;
}
.pd-podium-name em {
  font-style: normal; color: var(--spike-red);
  font-size: 10px; letter-spacing: 0.16em;
}
.pd-podium-score {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 0.04em;
  color: var(--fg-0); font-variant-numeric: tabular-nums;
}
.pd-podium-col.rank-1 .pd-podium-score { color: var(--amber); font-size: 36px; }
.pd-podium-mvp {
  position: absolute; top: -12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.20em;
  color: var(--spike-red); background: var(--bg-0);
  padding: 5px 9px;
  box-shadow: inset 0 0 0 1px var(--spike-red), 0 0 20px rgba(255,46,77,0.4);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
@media (max-width: 1024px) {
  .pd-podium { gap: 12px; }
  .pd-portrait, .pd-podium-col.rank-1 .pd-portrait { width: 110px; height: 110px; }
  .pd-portrait-glyph { font-size: 32px; }
  .pd-podium-col.rank-1 .pd-portrait-glyph { font-size: 36px; }
}

.pd-final-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px; margin-bottom: 36px;
}
@media (max-width: 1024px) {
  .pd-final-grid { grid-template-columns: 1fr; }
}
.pd-final-list, .pd-final-stats {
  background: rgba(14,16,20,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.pd-leader.full .pd-leader-row.big {
  grid-template-columns: 36px 36px 1fr 70px auto;
  padding: 14px 16px; gap: 14px;
}
.pd-leader-row.gold {
  background: rgba(255,184,0,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,184,0,0.4);
}
.pd-leader-row.gold .pd-leader-rank,
.pd-leader-row.gold .pd-leader-score { color: var(--amber); }
.pd-leader.full .pd-leader-rank { font-size: 26px; }
.pd-leader-avatar.big { width: 32px; height: 32px; font-size: 11px; }
.pd-leader-name.big { font-size: 14px; }
.pd-leader-delta {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.10em; text-align: right;
}
.pd-leader-row.gold .pd-leader-delta { color: var(--amber); font-weight: 700; }
.pd-leader-score.big { font-size: 18px; }

/* Stats tiles */
.pd-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center; gap: 4px 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.pd-stat .pd-eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.pd-stat-val {
  grid-column: 2; grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: 36px; letter-spacing: 0.04em; line-height: 1;
  color: var(--fg-0); font-variant-numeric: tabular-nums; text-align: right;
}
.pd-stat-sub {
  grid-column: 1; grid-row: 2;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pd-stat.acc-cyan { box-shadow: inset 0 0 0 1px rgba(0,229,199,0.4); }
.pd-stat.acc-cyan .pd-stat-val { color: var(--neon-cyan); }
.pd-stat.acc-red { box-shadow: inset 0 0 0 1px rgba(255,46,77,0.4); }
.pd-stat.acc-red .pd-stat-val { color: var(--spike-red); }

/* Final CTA */
.pd-final-cta-row {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 10px; margin-top: 6px;
}
.pd-btn {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 22px; border: none; cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.pd-btn-primary {
  background: var(--spike-red); color: var(--fg-0);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pd-btn-primary:hover {
  background: #FF455F;
  box-shadow: 0 0 36px rgba(255,46,77,0.55);
  transform: translateY(-1px);
}
.pd-btn-secondary {
  background: transparent; color: var(--fg-1);
  box-shadow: inset 0 0 0 1px var(--stroke-3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pd-btn-secondary:hover {
  color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--neon-cyan);
}

/* Round breakdown */
.pd-track {
  background: rgba(14,16,20,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--stroke-2);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.pd-track-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1024px) {
  .pd-track-row { grid-template-columns: repeat(2, 1fr); }
}
.pd-track-cell {
  display: flex; flex-direction: column;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--stroke-1);
  gap: 6px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.pd-track-cell.win {
  box-shadow: inset 0 0 0 1px rgba(0,229,199,0.4);
  background: rgba(0,229,199,0.04);
}
.pd-track-cell.wrong {
  box-shadow: inset 0 0 0 1px rgba(255,46,77,0.35);
  background: rgba(255,46,77,0.04);
}
.pd-track-cell.miss { opacity: 0.5; }
.pd-track-num {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.16em;
}
.pd-track-agent {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--fg-0); line-height: 1;
}
.pd-track-pts {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--neon-cyan); font-variant-numeric: tabular-nums;
}
.pd-track-cell.wrong .pd-track-pts,
.pd-track-cell.miss .pd-track-pts { color: var(--fg-3); }
.pd-track-time {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.10em;
}

/* ========== Auth mini ========== */
.auth-wrap { padding: 60px 0; max-width: 480px; margin: 0 auto; }
.auth-row { display: grid; gap: 10px; }
.auth-switch {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase;
}
.auth-switch a { color: var(--neon-cyan); cursor: pointer; text-decoration: none; }

/* ========== Resume banner ========== */
.resume-banner {
  position: relative; margin: 32px 0 8px;
  background: linear-gradient(90deg, rgba(0,229,199,0.10), rgba(255,46,77,0.10));
  border: 1px solid var(--neon-cyan);
  padding: 18px 24px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  animation: rise .55s var(--ease-out) both;
}
.resume-banner .corner { border-color: var(--neon-cyan); }
.resume-info { flex: 1; min-width: 220px; }
.resume-h {
  font-family: var(--font-display); font-size: 22px; line-height: 1.1;
  color: var(--fg-0); letter-spacing: 0.02em; text-transform: uppercase;
  margin: 6px 0 4px;
}
.resume-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Corner brackets (utilisé par resume + invite banners) */
.corner { position: absolute; width: 14px; height: 14px; border-color: var(--spike-red); z-index: 2; }
.corner.tl { top: -6px; left: -6px; border-top: 2px solid; border-left: 2px solid; }
.corner.tr { top: -6px; right: -6px; border-top: 2px solid; border-right: 2px solid; }
.corner.bl { bottom: -6px; left: -6px; border-bottom: 2px solid; border-left: 2px solid; }
.corner.br { bottom: -6px; right: -6px; border-bottom: 2px solid; border-right: 2px solid; }

/* Invite banners */
.invites-wrap { display: flex; flex-direction: column; gap: 12px; margin: 32px 0 0; }
.invite-banner {
  position: relative;
  background: linear-gradient(90deg, rgba(255,63,164,0.10), rgba(255,46,77,0.08));
  border: 1px solid var(--magenta);
  padding: 18px 24px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  animation: rise .55s var(--ease-out) both;
}
.invite-banner .corner { border-color: var(--magenta); }

/* ========== Profile page ========== */
.profile-card { margin-top: 18px; }
.profile-h3 {
  font-family: var(--font-display); font-size: 28px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--fg-0); margin-bottom: 6px;
}
.danger-card { border-color: rgba(255,46,77,0.30); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.profile-stat {
  padding: 18px; background: var(--bg-1); border: 1px solid var(--stroke-1);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.profile-stat .n {
  font-family: var(--font-display); font-size: 36px; color: var(--neon-cyan);
  line-height: 1; letter-spacing: -0.01em;
}
.profile-stat .lbl {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px;
}
@media (max-width: 540px) { .profile-stats { grid-template-columns: 1fr; } }

/* ========== Invite friends modal ========== */
.pd-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7,8,10,0.84); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  animation: rise .2s var(--ease-out) both;
}
.pd-modal {
  width: 100%; max-width: 520px;
  background: var(--surface-card); border: 1px solid var(--stroke-2);
  padding: 32px; position: relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  max-height: 90vh; overflow-y: auto;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--stroke-2);
}
/* Alias : invite-friends.js + game.js report modal utilisent ces classes */
.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7,8,10,0.84); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  animation: rise .2s var(--ease-out) both;
}
.admin-modal {
  width: 100%; max-width: 520px;
  background: var(--surface-card); border: 1px solid var(--stroke-2);
  padding: 32px; position: relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  max-height: 90vh; overflow-y: auto;
}
.lobby-h2 {
  font-family: var(--font-display); font-size: 40px; line-height: 0.92;
  letter-spacing: -0.01em; color: var(--fg-0); margin-bottom: 6px; text-transform: uppercase;
}
.invite-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
}
.invite-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--bg-1); border: 1px solid var(--stroke-2);
  padding: 12px 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.invite-info { flex: 1; min-width: 0; }
.invite-name {
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  color: var(--fg-0); letter-spacing: 0.06em;
}
.invite-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.12em; margin-top: 4px;
}
.room-empty {
  text-align: center; padding: 24px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.14em; border: 1px dashed var(--stroke-2);
}

/* ========== Reveal controls (pause / signaler / passer) ========== */
.reveal-controls {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 24px 0 8px;
}
.paused-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: rgba(255,184,0,0.10);
  border: 1px solid var(--amber); color: var(--amber);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  animation: pulse-live 1.6s var(--ease-in-out) infinite;
}
.paused-pill .p-icon { display: inline-flex; align-items: center; }

/* ========== Admin tabs (aligné SpikeMind) ========== */
.admin-tabs {
  display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--stroke-2); padding-bottom: 0;
}
.admin-tab {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px; background: transparent;
  border: 1px solid transparent; border-bottom: none;
  color: var(--fg-2); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--fg-0); background: rgba(255,255,255,0.04); }
.admin-tab.active {
  color: var(--fg-0); background: var(--surface-card);
  border-color: var(--stroke-2); border-bottom-color: var(--surface-card);
}
.admin-body { padding-bottom: 80px; }

.tab-badge {
  display: none; margin-left: 8px;
  background: var(--spike-red); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 6px; min-width: 18px; text-align: center;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}
.tab-badge.on { display: inline-block; animation: pulse-live 1.6s var(--ease-in-out) infinite; }

/* Pool layout (form + list) */
.pool-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
}
@media (max-width: 920px) { .pool-layout { grid-template-columns: 1fr; } }

.pool-preview {
  width: 100%; aspect-ratio: 1 / 1; max-width: 240px;
  background: #000; border: 1px solid var(--stroke-2);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  margin: 0 auto 14px; position: relative;
}
.pool-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pool-preview-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.18em;
}
.pool-thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #000; border: 1px solid var(--stroke-2);
  background-size: cover; background-position: center;
}

/* Multi-select catégories (côté création de room) */
.types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.type-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--stroke-2); background: rgba(255,255,255,0.02);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
  letter-spacing: 0.14em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: all var(--dur-base) var(--ease-out);
}
.type-chip:has(input:checked) { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,229,199,0.06); }
.type-chip input { accent-color: var(--neon-cyan); margin: 0; }

/* Rows admin (rooms / users / reports) */
.admin-row-head {
  display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center;
}
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: var(--surface-card); border: 1px solid var(--stroke-2);
  padding: 14px 18px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: border-color var(--dur-base) var(--ease-out);
}
.admin-row:hover { border-color: var(--stroke-3); }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-type {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--spike-red); margin-bottom: 4px;
}
.admin-row-title {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--fg-0); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-row-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em;
}
.admin-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Stats */
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.admin-stat { padding: 22px; text-align: left; }
.admin-stat .n {
  font-family: var(--font-display); font-size: 44px; color: var(--fg-0);
  line-height: 1; letter-spacing: -0.01em;
}
.admin-stat .lbl {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 8px;
}

/* Bouton danger */
.btn.danger {
  color: var(--fg-0); background: transparent;
  box-shadow: inset 0 0 0 1px var(--spike-red);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn.danger:hover:not(:disabled) { background: var(--spike-red); }

/* ========== Mobile tweaks ========== */
@media (max-width: 540px) {
  .topnav-inner { gap: 8px; }
  .brand-text { font-size: 18px; }
  .hub-back { padding: 5px 8px; font-size: 9px; }
  .wait-code-bar { padding: 16px 18px; }
  .wait-actions { width: 100%; }
  .wait-actions .btn { flex: 1 1 auto; padding: 12px 14px; font-size: 12px; }
  .pd-answer { flex-direction: column; }
  .pd-answer .btn { width: 100%; }
  .pd-answer .input { font-size: 18px; }
}