:root {
  --bg: #07070D;
  --bg-soft: #10121D;
  --card: #14151F;
  --card-top: #16172A;
  --card-bottom: #0D0E18;
  --ink: #F2F4FA;
  --ink-soft: #9CA0B4;
  --line: #2A2B3C;

  --neon: #3FE0F0;
  --neon-dark: #1E8FA3;
  --neon-tint: #0E2A30;

  --purple: #8B3FE8;
  --purple-dark: #5A28A3;

  --gold: #F5C518;
  --gold-dark: #B3900F;

  --red: #FF6B6B;
  --red-dark: #C23F3F;

  --radius: 14px;
  --radius-pill: 999px;

  --green: var(--neon);
  --orange: var(--gold);
  --orange-tint: rgba(245,197,24,0.18);
  --green-tint: var(--neon-tint);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(circle at 20% 0%, rgba(63,224,240,0.2), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(139,63,232,0.26), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px);
  background-attachment: fixed;
}

/* Desktop : l'app reste au format mobile, mais le fond derrière n'est
   plus un vide noir uniforme — les halos ci-dessus s'étendent sur tout
   l'écran, l'app flotte dedans plutôt que de sembler perdue. */
@media (min-width: 620px) {
  #app, #top-header, #footer-strip, #bottom-nav {
    box-shadow: 0 0 60px rgba(0,0,0,0.5);
  }
}

h1, h2, h3 {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

button { font-family: inherit; }

.hidden { display: none !important; }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 118px;
  position: relative;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 15px;
  padding: 14px 28px;
  cursor: pointer;
  width: 100%;
  overflow: visible;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}
.btn:active { transform: scale(0.96); filter: brightness(0.85); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }

.btn-primary { background: linear-gradient(90deg, var(--neon) 0%, var(--purple) 100%); color: var(--bg); animation: btn-glow 1.8s ease-in-out infinite; }
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(63,224,240,0.3); }
  50% { box-shadow: 0 0 24px rgba(139,63,232,0.5); }
}
.timer-ring.warn { animation: ring-pulse 1s ease-in-out infinite; }
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.btn-secondary { background: transparent; color: var(--ink-soft); border-color: var(--line); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: none; letter-spacing: normal; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: none; letter-spacing: normal; }
.btn-danger { background: rgba(255,107,107,0.14); color: var(--red); border-color: var(--red); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: none; letter-spacing: normal; }
.btn-sm { font-size: 12px; padding: 8px 14px; width: auto; }

/* ---------- Layout blocks ---------- */
.screen { padding: 22px 18px 18px; animation: pop-in 0.24s cubic-bezier(0.22,1,0.36,1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Feedback fort (bonne/mauvaise réponse) ---------- */
#app.flash-correct::after,
#app.flash-wrong::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  animation: flash-fade 0.5s ease-out forwards;
}
#app.flash-correct::after { background: radial-gradient(circle at 50% 40%, rgba(63,224,240,0.28), transparent 70%); }
#app.flash-wrong::after { background: radial-gradient(circle at 50% 40%, rgba(255,75,92,0.28), transparent 70%); }
@keyframes flash-fade { from { opacity: 1; } to { opacity: 0; } }

.shake-wrong { animation: shake 0.3s ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.score-bump { animation: score-bump 0.45s cubic-bezier(0.3,1.6,0.4,1); }
@keyframes score-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--neon); } 100% { transform: scale(1); } }

.score-float {
  position: absolute;
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  color: var(--neon);
  pointer-events: none;
  animation: score-float 0.9s ease-out forwards;
}
@keyframes score-float {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

.brand-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.brand-row h1 { font-size: 28px; color: var(--ink); }
.brand-amp { color: var(--gold); }
.brand-grad {
  background: linear-gradient(90deg, var(--neon), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }

.card {
  background: linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid rgba(63,224,240,0.35);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card-choice { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.card-choice:active { transform: translateY(2px); }
.card-choice:hover { border-color: var(--neon-dark); }
.card-choice .pict {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--neon-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}
.card-choice .pict svg { width: 30px; height: 30px; }
.card-choice .txt h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 2px; color: var(--ink); }
.card-choice .txt p { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

.badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-soon { background: var(--line); color: var(--ink-soft); font-size: 8.5px; }
.badge-diff { background: rgba(63,224,240,0.15); color: var(--neon); margin-left: 6px; font-size: 9.5px; }

/* ---------- Login ---------- */
.input {
  width: 100%;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 12px;
}
.input:focus { outline: none; border-color: var(--neon); border-width: 1.5px; box-shadow: 0 0 0 3px rgba(63,224,240,0.15); }
.input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,107,107,0.15); }
.input::placeholder { color: var(--ink-soft); }
.input-error-msg { color: var(--red); font-size: 12px; margin: -8px 0 12px; }

/* ---------- Modale ---------- */
.kr-modal-overlay {
  position: fixed; inset: 0; background: rgba(7,7,13,0.75); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: kr-modal-in 0.15s ease-out;
}
@keyframes kr-modal-in { from { opacity: 0; } to { opacity: 1; } }
.kr-modal-card {
  background: linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid rgba(63,224,240,0.35);
  border-radius: 18px;
  padding: 22px 20px;
  max-width: 340px;
  width: 100%;
  animation: kr-modal-scale 0.2s cubic-bezier(0.22,1,0.36,1);
}
@keyframes kr-modal-scale { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kr-modal-card h3 { font-size: 19px; margin-bottom: 8px; text-align: center; }
.kr-modal-card p { color: var(--ink-soft); font-size: 13.5px; text-align: center; margin-bottom: 18px; }
.kr-modal-actions { display: flex; flex-direction: column; gap: 9px; }

/* ---------- Toasts ---------- */
.kr-toast-stack { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 70; width: 100%; max-width: 380px; padding: 0 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.kr-toast {
  background: linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid rgba(63,224,240,0.35);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: kr-toast-in 0.2s cubic-bezier(0.22,1,0.36,1);
}
.kr-toast.kr-toast-out { animation: kr-toast-out 0.15s ease-in forwards; }
@keyframes kr-toast-in { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes kr-toast-out { to { opacity: 0; } }

/* ---------- Mascot ---------- */
.mascot-wrap { display: flex; justify-content: center; margin: 4px 0 18px; }

/* ---------- Avatar (initiale + anneau couleur de rang) ---------- */
.kr-avatar-wrap { display: flex; justify-content: center; margin: 4px 0 14px; }
.kr-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  color: var(--ink);
  background: var(--card-top);
  box-sizing: border-box;
}
.kr-avatar-lg { width: 56px; height: 56px; font-size: 22px; border: 3px solid; }
.kr-avatar-md { width: 40px; height: 40px; font-size: 16px; border: 2.5px solid; }
.kr-avatar-sm { width: 30px; height: 30px; font-size: 12px; border: 2px solid; }
.kr-avatar-legend { animation: kr-glow 2.2s ease-in-out infinite; }
.mascot-wrap svg { width: 96px; height: 96px; }
.mascot-wrap.small svg { width: 56px; height: 56px; }

/* ---------- Hero (home) ---------- */
.hero-cover {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 0 24px rgba(63,224,240,0.12);
}
.hero-cover img { width: 100%; display: block; }
.hero-pitch { display: none; }

/* ---------- Streak pill ---------- */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245,197,24,0.14);
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
}

/* ---------- Player chips (local mode) ---------- */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.chip {
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chip button { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; padding: 0; }

/* ---------- Progress dots ---------- */
.progress-dots { display: flex; gap: 4px; margin-bottom: 16px; }
.progress-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.progress-dot.done { background: linear-gradient(90deg, var(--neon), var(--purple)); }
.progress-dot.current { background: var(--gold); }

.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.onboard-dot { height: 4px; width: 4px; border-radius: 2px; background: var(--line); transition: width 0.2s ease, background 0.2s ease; }
.onboard-dot.active { width: 16px; background: var(--neon); }
.onboard-dot.done { background: var(--neon-dark); }
.onboard-illu {
  position: relative;
  width: 120px; height: 120px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #16172c, #07070D);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.onboard-illu-pent {
  position: absolute;
  width: 46px; height: 44px;
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}
.onboard-illu-pent-1 { background: rgba(63,224,240,0.25); top: -14px; left: 14px; }
.onboard-illu-pent-2 { background: rgba(139,63,232,0.25); bottom: -16px; right: 10px; }
.onboard-illu .mascot-wrap svg { width: 72px; height: 72px; }

/* ---------- Quiz screen ---------- */
.quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--neon); }
.timer-ring {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid transparent;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    conic-gradient(var(--neon), var(--purple), var(--neon)) border-box;
  box-shadow: 0 0 16px rgba(63,224,240,0.35);
}
.timer-ring.warn {
  color: #FF8A96;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    conic-gradient(var(--red), #FF9A9A, var(--red)) border-box;
  box-shadow: 0 0 20px rgba(255,107,107,0.5);
}

.club-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0 22px; }
.club-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1.5px solid var(--line);
}
.club-vs { font-family: 'Anton', sans-serif; font-size: 12px; color: var(--gold); }
.club-name { text-align: center; font-size: 10px; color: var(--ink-soft); margin-top: 6px; }

.prompt-text { text-align: center; font-size: 15px; color: var(--ink); margin-bottom: 18px; font-weight: 500; }

.option-btn {
  width: 100%;
  text-align: left;
  transition: background 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
  background: linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1.5px solid rgba(63,224,240,0.35);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 9px;
  cursor: pointer;
}
.option-btn:active { transform: translateY(2px); }
.option-btn.correct { background: rgba(63,224,240,0.12); border-color: var(--neon); color: var(--neon); font-weight: 600; }
.option-btn.wrong { background: rgba(255,107,107,0.14); border-color: var(--red); color: var(--red); }
.opt-mark { font-weight: 700; }

.taunt { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--gold); margin: 12px 0 0; min-height: 18px; }

.score-strip { display: flex; justify-content: center; gap: 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-soft); text-align: center; }
.pk-row { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; flex-wrap: wrap; max-width: 90px; }
.pk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pk-dot.pk-ok { background: var(--neon); box-shadow: 0 0 5px rgba(63,224,240,0.6); }
.pk-dot.pk-miss { background: var(--red); box-shadow: 0 0 5px rgba(255,107,107,0.6); }
.score-strip b { color: var(--neon); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; display: block; margin-bottom: 2px; }

/* ---------- VS battle strip (style jaquette) ---------- */
.vs-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.vs-side { flex: 1; }
.vs-side .vs-name { font-size: 11px; color: var(--ink-soft); margin: 0 0 4px; }
.vs-side .vs-score { font-family: 'Anton', sans-serif; font-size: 20px; margin: 0 0 6px; }
.vs-bar { height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.vs-bar-fill { height: 100%; border-radius: 3px; }
.vs-bar-fill.me { background: var(--purple); }
.vs-bar-fill.opp { background: var(--gold); }
.vs-side.right { text-align: right; }

/* ---------- Buzzer (local) ---------- */
.buzzer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 8px 0 4px; }
.buzzer-btn {
  aspect-ratio: 1.3;
  border-radius: 16px;
  border: 1.5px solid;
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.buzzer-btn:active { transform: translateY(2px); }

/* ---------- Puzzle logo ---------- */
.puzzle-frame { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line); position: relative; }
.puzzle-inner { position: absolute; width: 216px; height: 216px; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 30px; }

/* ---------- Top header ---------- */
.top-header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: 480px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--neon-dark);
  box-shadow: 0 2px 14px rgba(63,224,240,0.14);
}
.top-header-brand { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--ink); letter-spacing: 0.01em; display: inline-block; transform: skewX(-5deg); }
.top-header-tag { font-size: 10.5px; letter-spacing: 0.14em; color: var(--neon); border: 1px solid var(--neon-dark); padding: 3px 8px; border-radius: 20px; }

/* ---------- Footer strip ---------- */
.footer-strip {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  text-transform: uppercase;
  background: var(--card);
  border-top: 1px solid var(--line);
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 19;
}
.footer-strip em { flex: 0 1 auto; font-style: normal; text-align: center; line-height: 1.35; white-space: normal; }
.footer-strip span { flex: 1 1 12px; height: 1px; align-self: center; background: linear-gradient(90deg, transparent, var(--neon-dark), transparent); }

/* ---------- Badge animé (halo de chargement) ---------- */
@keyframes kr-spin { to { transform: rotate(360deg); } }
@keyframes kr-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(63,224,240,0.25)); }
  50% { filter: drop-shadow(0 0 14px rgba(139,63,232,0.45)); }
}
.kr-badge-mini { width: 56px; height: 56px; position: relative; margin: 0 auto; animation: kr-glow 2.2s ease-in-out infinite; }
.kr-badge-mini .kr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--neon), var(--purple), var(--gold), var(--neon));
  animation: kr-spin 2.2s linear infinite;
}
.kr-badge-mini .kr-face {
  position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #16172c, #07070D);
  display: flex; align-items: center; justify-content: center;
}
.kr-badge-mini .kr-mono { font-family: 'Anton', sans-serif; font-size: 16px; }
.kr-badge-mini .kr-mono span:first-child { color: #fff; }

/* ---------- Splash accueil (badge + wordmark animés) ---------- */
@keyframes kr-roll-in {
  0%   { transform: translateX(-90px) rotate(-220deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes kr-rise-in {
  0%   { transform: translateY(20px) skewX(-5deg); opacity: 0; }
  100% { transform: translateY(0) skewX(-5deg); opacity: 1; }
}
@keyframes kr-dash-in {
  0%   { transform: skewX(-5deg) scaleX(0); }
  100% { transform: skewX(-5deg) scaleX(1); }
}

.kr-splash { display: flex; flex-direction: column; align-items: center; padding: 36px 0 28px; }
.kr-splash-badge {
  width: 120px; height: 120px; position: relative;
  animation: kr-roll-in 0.7s cubic-bezier(0.22,1,0.36,1) forwards, kr-glow 2.4s ease-in-out infinite 0.7s;
  opacity: 0;
}
.kr-splash-badge .kr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--neon), var(--purple), var(--gold), var(--neon));
  animation: kr-spin 7s linear infinite;
}
.kr-splash-badge .kr-face {
  position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #16172c, #07070D);
  display: flex; align-items: center; justify-content: center;
}
.kr-splash-badge .kr-mono { font-family: 'Anton', sans-serif; font-size: 32px; }
.kr-splash-badge .kr-mono span:first-child { color: #fff; }

.kr-splash-word {
  font-family: 'Anton', sans-serif; font-size: 34px; line-height: 1; color: #fff;
  margin-top: 18px; text-transform: none;
  animation: kr-rise-in 0.6s ease-out forwards; animation-delay: 0.5s; opacity: 0;
}
.kr-splash-dashes { display: flex; gap: 5px; margin-top: 10px; }
.kr-splash-dash { height: 4px; transform-origin: left center; transform: scaleX(0); animation: kr-dash-in 0.35s ease-out forwards; }
.kr-splash-dash-1 { width: 68px; background: var(--neon); animation-delay: 0.85s; }
.kr-splash-dash-2 { width: 20px; background: var(--purple); animation-delay: 0.93s; }
.kr-splash-dash-3 { width: 7px;  background: var(--gold); animation-delay: 1.01s; }
.kr-splash-tagline { color: var(--ink-soft); font-size: 13px; margin-top: 16px; text-align: center; opacity: 0; animation: kr-rise-in 0.6s ease-out forwards; animation-delay: 1.1s; }
.kr-sound-hint { color: var(--neon); font-size: 11.5px; margin-top: 10px; text-align: center; opacity: 0.85; animation: kr-glow 1.8s ease-in-out infinite; }

/* ---------- Loading halo ---------- */
.loading-halo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0; }
.loading-halo .rings { position: relative; width: 64px; height: 64px; margin-bottom: 14px; }
.loading-halo .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--neon);
  opacity: 0;
  animation: halo-pulse 1.4s ease-out infinite;
}
.loading-halo .ring:nth-child(2) { animation-delay: 0.35s; border-color: var(--purple); }
.loading-halo .ring:nth-child(3) { animation-delay: 0.7s; }
.loading-halo .dot { position: absolute; inset: 12px; border-radius: 50%; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: cover; box-shadow: 0 0 18px rgba(63,224,240,0.55); animation: ball-spin 1.1s linear infinite; }
@keyframes ball-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes halo-pulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.loading-halo p { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.06em; color: var(--neon); text-transform: uppercase; }

/* ---------- Leaderboard ---------- */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rank-row-me { background: rgba(63,224,240,0.08); border: 1px solid var(--neon); border-radius: 10px; padding: 12px 10px; margin: 2px 0; }
.rank-num { font-family: 'Anton', sans-serif; font-size: 14px; color: var(--ink-soft); width: 22px; }
.rank-name { flex: 1; font-size: 14.5px; font-weight: 500; }
.rank-score { font-weight: 600; color: var(--gold); font-family: 'Anton', sans-serif; font-size: 14px; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 20;
}
.nav-btn { flex: 1; background: none; border: none; color: #6D7086; padding: 10px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; cursor: pointer; position: relative; }
.nav-btn .icon {
  font-size: 18px;
  font-style: normal;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.nav-btn.active { color: var(--neon); }
.nav-btn.active .icon { background: var(--neon-tint); box-shadow: 0 0 14px rgba(63,224,240,0.45); }
.nav-btn .dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }

/* ---------- Coming soon ---------- */
.soon-box { text-align: center; padding: 30px 20px; color: var(--ink-soft); }
.soon-box .pict { font-size: 38px; margin-bottom: 10px; }

.back-link { color: var(--ink-soft); font-size: 13px; font-weight: 500; background: none; border: none; padding: 0 0 18px; cursor: pointer; }

/* ---------- Duel teaser ---------- */
.duel-stage { background: var(--bg-soft); border-radius: var(--radius); padding: 24px 16px; position: relative; overflow: hidden; border: 1px solid var(--neon-dark); }
.duel-live-badge { position: absolute; top: 12px; left: 12px; background: var(--red); color: #FFFFFF; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; }
.duel-vs-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
.duel-side { text-align: center; }
.duel-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: #2B1E04; font-family: 'Anton', sans-serif; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.duel-avatar-mystery { background: #22222A; color: #6E6E78; }
.duel-name { color: var(--ink); font-size: 13px; font-weight: 500; margin: 0; }
.duel-vs { color: var(--gold); font-family: 'Anton', sans-serif; font-size: 13px; }
.duel-viewers { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 16px; }