/* ============================================================
   KLASH - Styles app joueur (compléments du theme)
   ============================================================ */

#app {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
}

/* === Topbar === */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.back-btn {
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.back-btn:active { transform: scale(0.96); }

/* === Hero (login) === */
.hero { text-align: center; padding: 24px 0 12px; }
.hero h1 {
  font-size: clamp(40px, 12vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.hero p { color: var(--ink-soft); margin-top: 10px; font-weight: 600; }

/* === Avatar grid === */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.avatar-opt {
  aspect-ratio: 1;
  background: var(--glass);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 rgba(0,0,0,0.3);
  font-family: inherit;
}
.avatar-opt:active { transform: scale(0.92); }
.avatar-opt.active {
  border-color: var(--magenta);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent),
    rgba(255, 62, 165, 0.15);
  box-shadow: var(--glow-magenta);
}

/* === Mode select === */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mode-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%),
    var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.12s ease, box-shadow 0.2s;
  overflow: hidden;
}
.mode-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.mode-card:active { transform: scale(0.98) translateY(2px); }
.mode-card.mode-solo::before {
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.mode-card.mode-solo {
  box-shadow: 0 6px 0 var(--cyan-d), 0 12px 24px rgba(0, 245, 212, 0.2);
}
.mode-card.mode-multi::before {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
}
.mode-card.mode-multi {
  box-shadow: 0 6px 0 var(--magenta-d), 0 12px 24px rgba(255, 62, 165, 0.3);
}
.mode-emoji { font-size: 56px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.mode-title { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; }
.mode-desc { color: var(--ink-soft); font-size: 13px; margin-top: 6px; line-height: 1.4; font-weight: 600; }

/* === Tabs === */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tab {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.2s;
}
.tab.active, .tab:hover {
  background: var(--bg-3);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 6px rgba(0,0,0,0.3);
}

/* === Theme list === */
.theme-list { display: grid; gap: 12px; margin-top: 12px; }
.theme-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.2s, box-shadow 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 0 rgba(0,0,0,0.25);
}
.theme-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.theme-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--theme-color, var(--violet));
  box-shadow: 0 0 16px var(--theme-color, var(--violet));
}
.theme-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 50%),
    color-mix(in srgb, var(--theme-color, var(--violet)) 30%, var(--bg-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 4px 0 rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.theme-info { flex: 1; min-width: 0; }
.theme-info .name { font-weight: 800; font-size: 17px; }
.theme-info .meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; font-weight: 600; }
.theme-arrow { color: var(--ink-mute); font-size: 20px; font-weight: 900; }

/* === Quiz screen === */
.quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.progress {
  height: 8px;
  background: rgba(10, 8, 32, 0.6);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  box-shadow: 0 0 12px rgba(255, 62, 165, 0.6);
  transition: width 0.3s ease;
}
.timer-bar {
  height: 12px;
  background: rgba(10, 8, 32, 0.7);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--amber));
  box-shadow: 0 0 12px rgba(6, 214, 160, 0.5);
  transition: width 0.1s linear, background 0.2s;
}
.timer-fill.urgent {
  background: linear-gradient(90deg, var(--amber), var(--red));
  box-shadow: 0 0 16px rgba(239, 71, 111, 0.6);
}

.question {
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 24px;
  min-height: 80px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Choix de réponse style 3D */
.choices { display: grid; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 50%),
    var(--glass-strong);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.1s, border-color 0.2s, background 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 5px 0 rgba(0,0,0,0.3);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.choice:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.choice .letter {
  width: 36px; height: 36px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), transparent 50%),
    var(--bg-2);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -2px 3px rgba(0,0,0,0.3);
}
.choice.correct {
  border-color: var(--green);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 50%),
    rgba(6, 214, 160, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 5px 0 var(--green-d),
    var(--glow-cyan);
}
.choice.correct .letter {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3), transparent 50%),
    var(--green);
  color: var(--bg-0);
}
.choice.wrong {
  border-color: var(--red);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 50%),
    rgba(239, 71, 111, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 5px 0 var(--red-d),
    var(--glow-red);
}
.choice.wrong .letter {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 50%),
    var(--red);
  color: var(--bg-0);
}
.choice.selected {
  border-color: var(--violet);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 50%),
    rgba(155, 93, 229, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 5px 0 var(--violet-d),
    var(--glow-violet);
}
.choice:disabled { cursor: default; }

/* Bouton "Valider" sous les choix */
.submit-btn-quiz {
  margin-top: 16px;
  font-size: 17px;
  padding: 18px 24px;
  animation: submitFade 0.25s ease;
}
@keyframes submitFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.submit-btn-quiz:disabled {
  opacity: 0.4;
  filter: saturate(0.5);
}

/* === Score burst === */
.score-burst { text-align: center; padding: 24px 0; }
.score-burst .points {
  font-family: 'JetBrains Mono', monospace;
  font-size: 72px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(0, 245, 212, 0.4));
}
.score-burst .label { color: var(--ink-soft); margin-top: 8px; font-weight: 700; }

/* === Stats === */
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.stat-row:last-child { border-bottom: none; }
.stat-row .v { font-family: 'JetBrains Mono', monospace; font-weight: 800; }

/* === Leaderboard === */
.lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.2);
  font-weight: 700;
}
.lb-row.me {
  border-color: var(--magenta);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 50%),
    rgba(255, 62, 165, 0.12);
  box-shadow: var(--glow-magenta);
}
.lb-rank {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -2px 3px rgba(0,0,0,0.3);
}
.lb-row:nth-child(1) .lb-rank {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: var(--bg-0);
  box-shadow: var(--glow-amber), inset 0 1px 0 rgba(255,255,255,0.4);
}
.lb-row:nth-child(2) .lb-rank {
  background: linear-gradient(135deg, #E5E4E2, #B0B0B0);
  color: var(--bg-0);
}
.lb-row:nth-child(3) .lb-rank {
  background: linear-gradient(135deg, #CD7F32, #8B4513);
  color: var(--bg-0);
}
.lb-avatar { font-size: 24px; }
.lb-name { flex: 1; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 18px;
}

/* === Players grid (lobby multi) === */
.players-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.player-tile {
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 12px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 0 rgba(0,0,0,0.25);
  transition: all 0.2s;
}
.player-tile.me { border-color: var(--magenta); }
.player-tile.ready {
  border-color: var(--green);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
    rgba(6, 214, 160, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 0 var(--green-d),
    var(--glow-cyan);
}
.player-avatar { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.player-name { font-weight: 800; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-status { font-size: 11px; color: var(--ink-soft); margin-top: 2px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* === Intermission === */
.intermission-card {
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 60px rgba(155, 93, 229, 0.2);
  animation: fadeIn 0.4s ease;
}
.countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(80px, 18vw, 140px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  margin: 14px 0 24px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 62, 165, 0.4));
}
.countdown.pulse { animation: countdownPulse 0.5s ease-out; }
@keyframes countdownPulse {
  0%   { transform: scale(0.7); opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  40%  { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 40px rgba(255, 62, 165, 0.6)); }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 30px rgba(255, 62, 165, 0.4)); }
}
.solo-stats {
  margin-top: 16px;
  background: rgba(10, 8, 32, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 16px;
}

/* === Feedback === */
.feedback {
  padding: 16px 20px;
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  margin-top: 12px;
  border: 1px solid;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.feedback-good {
  background: rgba(6, 214, 160, 0.15);
  border-color: rgba(6, 214, 160, 0.4);
  color: #6ee7b7;
  box-shadow: var(--glow-cyan);
}
.feedback-bad {
  background: rgba(239, 71, 111, 0.15);
  border-color: rgba(239, 71, 111, 0.4);
  color: #ffb3c4;
  box-shadow: var(--glow-red);
}

/* === PIN input === */
.pin-input {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px !important;
  font-weight: 800;
  letter-spacing: 0.4em;
  padding: 20px 12px !important;
}
.err-banner {
  background: rgba(239, 71, 111, 0.18);
  border: 1px solid rgba(239, 71, 111, 0.4);
  color: #ffb3c4;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  text-align: center;
  font-weight: 700;
  margin-top: 12px;
}

/* === Toast & Modal === */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  z-index: 100;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: toastIn 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.modal {
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  backdrop-filter: blur(28px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* === Misc === */
.row { display: flex; gap: 8px; }
.stack { display: grid; gap: 12px; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); font-weight: 600; }
.screen { flex: 1; display: flex; flex-direction: column; }

/* Animation de transition au changement de page (n'est PAS jouée au re-render) */
#app.page-transition > .screen {
  animation: pageEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Petite animation décalée sur les enfants directs pour un effet "cascade" */
#app.page-transition > .screen > * {
  animation: pageChildIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
#app.page-transition > .screen > *:nth-child(1) { animation-delay: 0.04s; }
#app.page-transition > .screen > *:nth-child(2) { animation-delay: 0.08s; }
#app.page-transition > .screen > *:nth-child(3) { animation-delay: 0.12s; }
#app.page-transition > .screen > *:nth-child(4) { animation-delay: 0.16s; }
#app.page-transition > .screen > *:nth-child(5) { animation-delay: 0.20s; }
#app.page-transition > .screen > *:nth-child(n+6) { animation-delay: 0.24s; }
@keyframes pageChildIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Réduire les animations pour les utilisateurs qui ont activé prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #app.page-transition > .screen,
  #app.page-transition > .screen > * {
    animation: none !important;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Mode SURVIE === */
.mode-card.mode-survival {
  box-shadow: 0 6px 0 var(--red-d), 0 12px 24px rgba(239, 71, 111, 0.3);
}
.mode-card.mode-survival::before {
  background: linear-gradient(135deg, var(--red), var(--amber));
}

.survival-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.lives-display {
  display: flex; align-items: center; gap: 6px;
  font-size: 22px;
  line-height: 1;
}
.heart {
  display: inline-block;
  transition: all 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.heart.alive { animation: heartPulse 2s ease-in-out infinite; }
.heart.lost {
  filter: grayscale(0.7) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  opacity: 0.4;
  transform: scale(0.85);
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.survival-stats { display: flex; align-items: center; gap: 10px; }
.streak-badge {
  background: linear-gradient(135deg, var(--amber), var(--red));
  color: var(--bg-0);
  font-weight: 900;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  box-shadow: var(--glow-amber);
  animation: streakGlow 1.5s ease-in-out infinite alternate;
}

/* Petit badge streak intégré dans le pill du score */
.streak-badge-inline {
  background: linear-gradient(135deg, var(--amber), var(--red));
  color: var(--bg-0);
  font-weight: 900;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 12px rgba(255, 189, 0, 0.5);
  margin-right: 2px;
  animation: streakGlow 1.2s ease-in-out infinite alternate;
}

/* Bonus pill dans le feedback */
.bonus-pill {
  display: inline-block;
  background: linear-gradient(135deg, var(--amber), var(--red));
  color: var(--bg-0);
  font-weight: 900;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 14px rgba(255, 189, 0, 0.5);
  animation: bonusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bonusPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes streakGlow {
  from { box-shadow: 0 0 12px rgba(255, 189, 0, 0.4); }
  to { box-shadow: 0 0 24px rgba(255, 189, 0, 0.7), 0 0 36px rgba(239, 71, 111, 0.4); }
}
.qa-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  background: rgba(10,8,32,0.6);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.theme-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--theme-color, var(--violet)) 18%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--theme-color, var(--violet)) 50%, transparent);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-color, var(--violet)) 30%, transparent);
}

/* Game Over */
.game-over-card {
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(239, 71, 111, 0.18), transparent 70%),
    var(--glass-strong);
  border: 1px solid rgba(239, 71, 111, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 60px rgba(239, 71, 111, 0.25);
}
.game-over-emoji {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  animation: gameOverShake 0.8s ease;
}
@keyframes gameOverShake {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.game-over-title {
  font-size: clamp(36px, 9vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* ============================================================
   TETRIS BATTLE
   ============================================================ */
.tetris-screen {
  padding-bottom: 100px; /* place pour les contrôles tactiles */
}

.tetris-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}

.tetris-board-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.tetris-canvas {
  display: block;
  background: var(--bg-0);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.5),
    var(--glow-magenta);
  max-width: 100%;
  height: auto;
}

.tetris-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.t-stat {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.t-stat-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  font-weight: 800;
}
.t-stat-value {
  font-size: 22px;
  font-weight: 900;
  margin-top: 2px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Mini-grilles des autres joueurs === */
.tetris-others {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.tetris-mini {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.3s, filter 0.3s;
}
.tetris-mini.over {
  opacity: 0.5;
  filter: grayscale(0.6);
}
.tm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tm-avatar { font-size: 16px; }
.tm-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.tm-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.4);
  padding: 2px;
  border-radius: 4px;
}
.tm-cell {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 1px;
}
.tm-cell.on {
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 0 4px rgba(255, 62, 165, 0.4);
}
.tm-stats {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  text-align: center;
  color: var(--ink-soft);
}

/* === Contrôles tactiles === */
.tetris-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.5fr;
  gap: 6px;
  padding: 10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: linear-gradient(180deg, transparent, rgba(10, 8, 32, 0.95) 30%);
  z-index: 5;
}
html[data-theme="agent"] .tetris-controls {
  background: linear-gradient(180deg, transparent, rgba(26, 20, 16, 0.95) 30%);
}
.t-btn {
  background: var(--glass-strong);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 8px;
  border-radius: var(--r-md);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s, background 0.15s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  font-family: inherit;
}
.t-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
  background: var(--bg-3);
}
.t-btn-drop {
  background: linear-gradient(180deg, var(--magenta), var(--violet));
  color: white;
  font-size: 13px;
  letter-spacing: 0.05em;
  border: none;
  box-shadow: 0 4px 0 var(--magenta-d);
}
.t-btn-drop:active {
  box-shadow: 0 1px 0 var(--magenta-d);
}

/* Desktop : layout côte à côte */
@media (min-width: 800px) {
  .tetris-layout {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 24px;
  }
  .tetris-others {
    grid-template-columns: repeat(2, 1fr);
  }
  .tetris-controls {
    display: none; /* caché sur desktop, on utilise le clavier */
  }
  .tetris-screen {
    padding-bottom: 24px;
  }
}
@media (min-width: 1100px) {
  .tetris-others {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === Admin === */
.admin-quiz-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.admin-quiz-row .ico { font-size: 20px; }
.admin-quiz-row .name { flex: 1; font-weight: 700; font-size: 14px; }
.question-editor {
  background: rgba(10, 8, 32, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 10px;
}
.question-editor input { background: rgba(10, 8, 32, 0.6); }

/* === Bouton de verrouillage admin === */
.btn-cancel-bar {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(239, 71, 111, 0.15);
  border: 1px solid rgba(239, 71, 111, 0.5);
  color: var(--red);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: grid; place-items: center;
}

/* === Login layout (responsive géré par theme) === */
.login-layout { width: 100%; }

/* === Phase 3 : Auth (login compte, register, migration) ============ */
/* Bloc de CTA "as-tu un compte ?" en bas du formulaire */
.login-account-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--magenta, #ff3ea5);
  font-weight: 700;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
}
.btn-link:hover { color: #ff70c0; }
.dot-sep { color: var(--ink-mute); }
/* Erreur d'auth (en haut du formulaire) */
.auth-error {
  background: rgba(239, 71, 111, 0.12);
  border: 1px solid rgba(239, 71, 111, 0.4);
  color: #ff7a99;
  padding: 10px 14px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}
/* Info positive (migration de scores) */
.auth-info {
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.3);
  color: var(--cyan, #00f5d4);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
}
/* Modale de migration au démarrage (proposer de créer un compte) */
.migrate-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.migrate-modal {
  background: var(--bg-1, #1a0d33);
  border: 2px solid var(--magenta, #ff3ea5);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(255, 62, 165, 0.3);
}
.migrate-modal h2 {
  font-size: 22px;
  margin: 0 0 8px;
}
.migrate-modal p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.migrate-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* =================================================================== */

/* ============================================================
   MODE AVENTURE — 10 arènes (style Clash Royale)
   ============================================================ */
/* Mini-stats sur la carte du mode (menu solo) */
.adventure-mini-stats {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #FFD700;
}

/* Liste des arènes (menu adventure) */
.adventure-arenas {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.adventure-arena {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--glass);
  border: 2px solid var(--line);
  border-left: 4px solid var(--arena-color, #555);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.adventure-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--arena-color, transparent), transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}
.adventure-arena:not(.locked):hover {
  border-color: var(--arena-color);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--arena-color) inset;
}
.adventure-arena:not(.locked):active {
  transform: scale(0.99);
}
.adventure-arena.locked {
  opacity: 0.5;
  cursor: not-allowed;
  border-left-color: var(--ink-mute);
}
.adventure-arena.completed {
  border-color: var(--arena-color);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), var(--arena-color-dark, transparent) 200%);
}
.arena-emoji {
  font-size: 44px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.arena-info {
  min-width: 0;
}
.arena-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--arena-color, var(--ink-soft));
  margin-bottom: 2px;
}
.arena-name {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 4px;
}
.arena-stars {
  display: flex;
  gap: 2px;
}
.arena-star {
  font-size: 14px;
  line-height: 1;
}
.arena-star.on  { color: #FFD700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
.arena-star.off { color: var(--ink-mute); opacity: 0.3; }
.arena-choices-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ── Groupement par monde (100 niveaux) ──────────────────────── */
.adventure-worlds {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}
.adventure-world {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.adventure-world.world-locked {
  opacity: 0.6;
}
.adventure-world-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--arena-color-dark, #222), transparent);
  border-bottom: 1px solid var(--line);
}
.world-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--arena-color, var(--ink-soft));
}
.world-name {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}
.world-stars {
  font-size: 11px;
  color: var(--ink-soft);
}
.adventure-world .adventure-arenas {
  margin-top: 0;
  padding: 8px;
  background: rgba(0,0,0,0.15);
  display: grid;
  gap: 8px;
}
/* Boss : bordure dorée + légère lueur */
.adventure-arena.boss-arena {
  border-left-width: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,215,0,0.15);
}
/* HardMode : teinte rouge subtile */
.adventure-arena.hard-arena::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background: #CC0000;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  opacity: 0.6;
}

/* Écran d'intro du niveau (présentation) */
.adventure-intro-screen {
  background: linear-gradient(180deg, var(--arena-color-dark, var(--bg-0)) -50%, var(--bg-0) 70%);
}
.adventure-intro-hero {
  text-align: center;
  padding: 24px 0 12px;
}
.adventure-intro-emoji {
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  margin-bottom: 8px;
}
.adventure-intro-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--arena-color);
}
.adventure-intro-name {
  font-size: 36px;
  font-weight: 900;
  margin: 4px 0 8px;
  line-height: 1.1;
}
.adventure-intro-theme {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 700;
}
.adventure-intro-rules {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.adventure-intro-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
}
.adventure-intro-rule .ico { font-size: 22px; line-height: 1; }
.adventure-intro-rule strong { color: var(--arena-color); }
.adventure-start-btn {
  background: linear-gradient(135deg, var(--arena-color), var(--arena-color-dark));
  box-shadow: 0 8px 24px var(--arena-color-dark);
}

/* Écran de jeu */
.adventure-play-screen {
  padding-top: 8px;
}
.adventure-play-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.adventure-play-arena-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--arena-color);
  letter-spacing: 0.02em;
}
.adventure-play-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}
.adventure-lives {
  font-size: 22px;
  letter-spacing: 2px;
}
.adventure-progress {
  display: flex;
  gap: 12px;
  align-items: center;
}
.adventure-q-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}
.adventure-q-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: #00f5d4;
}
.adventure-progress-bar {
  height: 6px;
  background: var(--glass);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 18px;
}
.adventure-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--arena-color), var(--arena-color-dark));
  transition: width 0.4s ease;
}
.adventure-question {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 18px;
}
.adventure-choices {
  display: grid;
  gap: 10px;
}
.adventure-choice {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  transition: transform 0.1s, border-color 0.15s, background 0.2s;
}
.adventure-choice:not(:disabled):hover {
  border-color: var(--arena-color);
  background: var(--glass-strong);
}
.adventure-choice:active { transform: scale(0.98); }
.adventure-choice .letter {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--arena-color);
}
.adventure-choice.pending {
  border-color: var(--arena-color);
  background: linear-gradient(180deg, var(--arena-color-dark) -30%, var(--glass));
}
.adventure-choice.correct {
  border-color: #00f5d4;
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.18), rgba(0, 245, 212, 0.06));
  animation: advCorrectFlash 0.4s ease-out;
}
.adventure-choice.wrong {
  border-color: #ef476f;
  background: linear-gradient(180deg, rgba(239, 71, 111, 0.18), rgba(239, 71, 111, 0.06));
  animation: advWrongShake 0.3s ease-out;
}
.adventure-choice.dim { opacity: 0.4; }
@keyframes advCorrectFlash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes advWrongShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
}
.adventure-feedback {
  margin-top: 16px;
  padding: 14px 18px;
  text-align: center;
  border-radius: var(--r-lg);
  font-size: 16px;
  font-weight: 800;
  animation: advFeedbackPop 0.3s ease-out;
}
.adventure-feedback.good {
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.2), rgba(0, 245, 212, 0.05));
  border: 1px solid rgba(0, 245, 212, 0.4);
  color: #00f5d4;
}
.adventure-feedback.bad {
  background: linear-gradient(180deg, rgba(239, 71, 111, 0.2), rgba(239, 71, 111, 0.05));
  border: 1px solid rgba(239, 71, 111, 0.4);
  color: #ff7a99;
}
@keyframes advFeedbackPop {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Écran de fin (résultat + étoiles) */
.adventure-end-screen {
  background: linear-gradient(180deg, var(--arena-color-dark, var(--bg-0)) -40%, var(--bg-0) 60%);
}
.adventure-end-hero {
  text-align: center;
  padding: 24px 0 12px;
}
.adventure-end-emoji {
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  margin-bottom: 8px;
  animation: advEndPop 0.5s ease-out;
}
@keyframes advEndPop {
  0%   { transform: scale(0.3) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(15deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.adventure-end-hero h1 {
  font-size: 40px;
  font-weight: 900;
  margin: 4px 0;
}
.adventure-end-hero p {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 15px;
}
.adventure-end-stars {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}
.adventure-end-star {
  font-size: 48px;
  line-height: 1;
  animation: advStarPop 0.5s ease-out backwards;
}
.adventure-end-star.on {
  color: #FFD700;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.8), 0 0 48px rgba(255, 215, 0, 0.4);
}
.adventure-end-star.off {
  color: var(--ink-mute);
  opacity: 0.25;
}
.adventure-end-star:nth-child(1) { animation-delay: 0.4s; }
.adventure-end-star:nth-child(2) { animation-delay: 0.6s; }
.adventure-end-star:nth-child(3) { animation-delay: 0.8s; }
@keyframes advStarPop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(15deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.adventure-end-stats {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 16px;
  margin-top: 16px;
}
.adventure-end-grand-finale {
  text-align: center;
  padding: 16px;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FF6B35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.3);
}

/* =================================================================== */

/* ============================================================
   HARMONISATION CLASH — composants partagés
   (multi, solo, classement, profil reprennent ce langage visuel)
   ============================================================ */

/* NOTE V7.13 : les pseudo-éléments ::before / ::after qui ajoutaient un glow
   d'ambiance ont été retirés. Ils débordaient du conteneur (left/right: -20%)
   et créaient un scroll horizontal de 53px sur toutes les pages mobile.
   Le glow d'ambiance reste assuré par le fond global de l'app (klash-theme.css)
   et par les radial-gradients du conteneur principal. */

/* Carte "Clash" : remplace .card avec un style plus marqué (utilisée sur
   multi-join, classement, profile-stats, etc.) */
.clash-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.clash-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 62, 165, 0.04), transparent 50%);
  pointer-events: none;
}
.clash-card > * { position: relative; }
.clash-card-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* Grille de cartes de mode (utilisée sur Solo) */
.clash-mode-grid {
  display: grid;
  gap: 12px;
}
.clash-mode-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.2);
}
.clash-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mode-color, transparent), transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}
.clash-mode-card:hover {
  transform: translateY(-1px);
  border-color: var(--mode-color, var(--magenta, #ff3ea5));
  border-left-color: var(--mode-color, var(--magenta, #ff3ea5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.3);
}
.clash-mode-card:active { transform: scale(0.99); }
.clash-mode-card.mode-adventure { --mode-color: #FFD700; border-left-color: #FFD700; }
.clash-mode-card.mode-solo      { --mode-color: #00f5d4; border-left-color: #00f5d4; }
.clash-mode-card.mode-survival  { --mode-color: #FF6B35; border-left-color: #FF6B35; }
.clash-mode-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 32px;
  line-height: 1;
  background: var(--bg-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.clash-mode-body { min-width: 0; }
.clash-mode-title {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 4px;
}
.clash-mode-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.clash-mode-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cms-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  color: var(--mode-color, var(--ink));
}
.clash-mode-arrow {
  font-size: 22px;
  font-weight: 900;
  color: var(--mode-color, var(--ink-mute));
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}
.clash-mode-card:hover .clash-mode-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Mode multijoueur : bloc "Rejoindre en tant que..." */
.multi-join-as {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.multi-join-as-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.multi-join-avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
}
.multi-join-avatar img { width: 40px; height: 40px; }
.multi-join-name {
  font-weight: 800;
  font-size: 15px;
}

/* Variante secondaire du grand bouton play (Multi → Survie 1v1) */
.play-big-btn-secondary {
  background: linear-gradient(180deg, #ff54a8 0%, #d13c8f 48%, #7d43c9 100%) !important;
  box-shadow: var(--btn-inset), 0 8px 0 #4a1e9e, 0 14px 32px rgba(255, 62, 165, 0.4) !important;
}
.play-big-btn-secondary:active {
  box-shadow: var(--btn-inset-active), 0 3px 0 #4a1e9e, 0 5px 12px rgba(255, 62, 165, 0.3) !important;
}

/* Classement : médailles sur les 3 premiers */
.lb-rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  color: #1a0d33 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4) !important;
  font-weight: 900;
}
.lb-rank-2 {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8) !important;
  color: #1a0d33 !important;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.3) !important;
  font-weight: 900;
}
.lb-rank-3 {
  background: linear-gradient(135deg, #CD7F32, #A0522D) !important;
  color: #1a0d33 !important;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.3) !important;
  font-weight: 900;
}

/* =================================================================== */

/* =================================================================== */

/* ============================================================
   V7.14 — Soumission de questions par les joueurs
   ============================================================ */

/* Toggle 2 / 4 choix dans le formulaire */
.sq-format-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.sq-format-btn {
  padding: 12px 14px;
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.sq-format-btn:hover { border-color: rgba(255, 62, 165, 0.5); }
.sq-format-btn:active { transform: scale(0.98); }
.sq-format-btn.active {
  border-color: var(--magenta, #ff3ea5);
  background: linear-gradient(180deg, rgba(255, 62, 165, 0.18), rgba(155, 93, 229, 0.08));
  box-shadow: 0 0 16px rgba(255, 62, 165, 0.25);
}

/* Textarea question */
.sq-question-input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

/* Choix de réponse avec radio + lettre + input */
.sq-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sq-choice-row {
  display: grid;
  grid-template-columns: 20px 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.sq-correct-radio {
  width: 18px; height: 18px;
  accent-color: var(--cyan, #00f5d4);
  cursor: pointer;
}
.sq-choice-letter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-soft);
  text-align: center;
}
.sq-choice-input {
  font-size: 14px;
  padding: 8px 12px;
}

/* Liste de mes soumissions */
.my-submissions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-submission {
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-mute);
  border-radius: var(--r-md);
}
.my-submission.status-pending { border-left-color: #FFD700; }
.my-submission.status-approved { border-left-color: #00f5d4; }
.my-submission.status-rejected { border-left-color: #ef476f; }
.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sub-status-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.sub-status-badge.status-pending  { background: rgba(255, 215, 0, 0.15); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.3); }
.sub-status-badge.status-approved { background: rgba(0, 245, 212, 0.15); color: #00f5d4; border: 1px solid rgba(0, 245, 212, 0.3); }
.sub-status-badge.status-rejected { background: rgba(239, 71, 111, 0.15); color: #ff7a99; border: 1px solid rgba(239, 71, 111, 0.3); }
.sub-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
}
.sub-question {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}
.sub-choices-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.sub-choice {
  font-size: 12px;
  padding: 3px 8px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}
.sub-choice.good {
  background: rgba(0, 245, 212, 0.15);
  color: #00f5d4;
  font-weight: 700;
}
.sub-theme {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.sub-theme.good { color: #00f5d4; }
.sub-admin-notes {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--magenta);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

/* === Panneau admin de modération === */
.admin-questions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.admin-question-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.aqc-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.aqc-user {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.aqc-date {
  font-family: 'JetBrains Mono', monospace;
}
.aqc-question {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}
.aqc-choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.aqc-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.aqc-choice.good {
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid rgba(0, 245, 212, 0.3);
}
.aqc-letter {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  color: var(--ink-soft);
  width: 16px;
}
.aqc-choice.good .aqc-letter { color: #00f5d4; }
.aqc-good-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #00f5d4;
}
.aqc-suggestion {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 215, 0, 0.08);
  border-left: 3px solid #FFD700;
  border-radius: var(--r-sm);
  font-size: 12px;
}
.aqc-admin-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* === V7.15 : Beta feedbacks (user + admin) ============================= */
/* Checklist "Ce qu'on aimerait savoir" */
.beta-checklist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.beta-checklist li {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.beta-checklist li:last-child { border-bottom: none; }

/* Liste admin des feedbacks */
.admin-feedbacks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.admin-feedback-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-mute);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  transition: opacity 0.2s;
}
.admin-feedback-card.status-new {
  border-left-color: #FFD700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.1);
}
.admin-feedback-card.status-read {
  border-left-color: var(--ink-mute);
  opacity: 0.7;
}
.afc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.afc-user {
  font-weight: 800;
  font-size: 14px;
  margin-right: 8px;
}
.afc-status-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.afc-status-badge.status-new  { background: rgba(255, 215, 0, 0.15); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.3); }
.afc-status-badge.status-read { background: rgba(255, 255, 255, 0.04); color: var(--ink-mute); border: 1px solid var(--line); }
.afc-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
}
.afc-message {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.afc-contact {
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.afc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =================================================================== */

/* === TUTORIEL — Diaporama 5 slides (V7.16) =============================== */
/* Overlay plein écran avec une grande slide centrale (emoji + titre + texte)
   et une navigation en bas (dots + précédent/suivant). */

.tuto-slides-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 4, 24, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tutoFadeIn 0.3s ease-out;
}
@keyframes tutoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tuto-slide {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--bg-1, #1a0d33), var(--bg-0, #0d0620));
  border: 2px solid var(--accent, var(--magenta, #ff3ea5));
  border-radius: 24px;
  padding: 56px 24px 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 60px var(--accent, rgba(255, 62, 165, 0.4));
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: tutoSlideIn 0.35s ease-out;
}
@keyframes tutoSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Fondu doux du contenu lors du changement de slide (cadre stable, aucun décalage) */
.tuto-content-in { animation: tutoContentIn 0.28s ease-out; }
@keyframes tutoContentIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bouton "Passer" en haut à droite */
.tuto-skip-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tuto-skip-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Contenu central */
.tuto-slide-content {
  text-align: center;
  padding: 8px 4px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tuto-slide-emoji {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 8px 24px var(--accent, rgba(255, 62, 165, 0.4)));
  animation: tutoEmojiPop 0.5s ease-out 0.1s backwards;
}
@keyframes tutoEmojiPop {
  from { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.tuto-slide-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink, #fff);
  background: linear-gradient(135deg, var(--accent, #ff3ea5), var(--ink, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tuto-slide-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 340px;
}
.tuto-slide-body strong {
  color: var(--accent, var(--magenta, #ff3ea5));
  font-weight: 800;
}

/* Footer : dots + boutons nav */
.tuto-slide-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tuto-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.tuto-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  opacity: 0.3;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}
.tuto-dot:hover { opacity: 0.6; transform: scale(1.2); }
.tuto-dot.active {
  background: var(--accent, var(--magenta, #ff3ea5));
  opacity: 1;
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 8px var(--accent, rgba(255, 62, 165, 0.6));
}

.tuto-slide-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tuto-slide-actions .btn {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
}
.tuto-prev-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tuto-next-btn {
  background: linear-gradient(135deg, var(--accent, #ff3ea5), var(--accent, #9b5de5)) !important;
  box-shadow: 0 6px 18px var(--accent, rgba(255, 62, 165, 0.4)) !important;
}

/* Mobile petit écran */
@media (max-height: 600px) {
  .tuto-slide { padding: 48px 20px 18px; gap: 16px; }
  .tuto-slide-emoji { font-size: 64px; margin-bottom: 8px; }
  .tuto-slide-title { font-size: 22px; }
  .tuto-slide-content { min-height: 232px; }
}
/* =================================================================== */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
  #app { max-width: 720px; padding: 32px 28px 40px; }
  body { font-size: 17px; }
  h1 { font-size: clamp(32px, 5vw, 44px); }
  h2 { font-size: 26px; }
  .avatar-grid { grid-template-columns: repeat(9, 1fr); gap: 10px; }
  .avatar-opt { font-size: 26px; }
  .theme-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .theme-card { padding: 18px; }
  .theme-icon { width: 60px; height: 60px; font-size: 32px; }
  .theme-info .name { font-size: 18px; }
  .choices { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .question { font-size: clamp(24px, 3vw, 30px); min-height: 100px; }
  .choice { padding: 18px; font-size: 17px; }
  .score-burst .points { font-size: 88px; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mode-card { padding: 36px 24px; }
  .mode-emoji { font-size: 64px; }
  .players-grid { grid-template-columns: repeat(3, 1fr); }
  .theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--magenta);
  }
  .choice:not(:disabled):hover {
    border-color: var(--violet);
    transform: translateY(-1px);
  }
}

@media (min-width: 1100px) {
  #app { max-width: 1080px; padding: 40px 40px 48px; }
  h1 { font-size: clamp(36px, 4vw, 52px); }
  .login-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 70vh;
  }
  .login-layout .hero { text-align: left; padding: 0; }
  .login-layout .hero h1 { font-size: clamp(48px, 6vw, 72px); }
  .theme-list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .theme-card { padding: 20px; }
  .theme-icon { width: 64px; height: 64px; }
  .players-grid { grid-template-columns: repeat(5, 1fr); }
  .quiz-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .quiz-layout .question {
    font-size: clamp(28px, 2.4vw, 36px);
    min-height: 0;
  }
  .quiz-layout .choices { grid-template-columns: 1fr; }
  .narrow { max-width: 600px; margin-left: auto; margin-right: auto; }
  .center-card { max-width: 560px; margin-left: auto; margin-right: auto; }
  .admin-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .avatar-grid { grid-template-columns: repeat(9, 1fr); }
}

@media (min-width: 1400px) {
  #app { max-width: 1240px; }
  .theme-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-height: 720px) and (min-width: 768px) {
  #app { padding-top: 20px; padding-bottom: 24px; }
  .hero { padding: 16px 0; }
  .score-burst { padding: 16px 0; }
  .score-burst .points { font-size: 56px; }
}

@media (max-width: 767px) {
  .input, textarea.input, select.input { font-size: 16px; }
}

/* ============================================================
   HOME CLASH-STYLE (V3.2)
   ============================================================ */
.home-clash {
  position: relative;
  padding-bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.header-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.3);
}
.stat-chip-ico { font-size: 14px; line-height: 1; }
.stat-chip-val { color: var(--ink); }
.stat-level {
  border-color: rgba(255, 189, 0, 0.4);
  background: linear-gradient(180deg, rgba(255, 189, 0, 0.18), rgba(255, 126, 62, 0.12));
}
.stat-trophy {
  border-color: rgba(0, 245, 212, 0.4);
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.18), rgba(58, 134, 255, 0.12));
}
.stat-coins {
  border-color: rgba(155, 93, 229, 0.4);
  background: linear-gradient(180deg, rgba(155, 93, 229, 0.18), rgba(255, 62, 165, 0.12));
}

.header-actions { display: flex; gap: 6px; }
.header-action-btn {
  width: 38px; height: 38px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  display: grid; place-items: center;
  transition: transform 0.1s, background 0.2s;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 3px 0 rgba(0,0,0,0.3);
}
.header-action-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(0,0,0,0.3);
}
.header-action-btn:hover { background: var(--glass-strong); }

/* === BANNIÈRE JOUEUR === */
.player-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 62, 165, 0.2), rgba(155, 93, 229, 0.18) 50%, rgba(0, 245, 212, 0.12));
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 0 rgba(0,0,0,0.25), 0 12px 32px rgba(255, 62, 165, 0.15);
}
.player-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(255, 62, 165, 0.25), transparent 60%);
  pointer-events: none;
}
.player-banner-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.player-avatar-big {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--magenta), var(--violet) 60%, var(--cyan));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 38px;
  flex-shrink: 0;
  box-shadow:
    inset 0 -4px 12px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 4px 16px rgba(255, 62, 165, 0.4),
    0 0 0 3px rgba(255, 62, 165, 0.3);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.player-info { flex: 1; min-width: 0; }
.player-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.player-level-badge {
  background: linear-gradient(180deg, var(--amber), #ff7e3e);
  color: #1a0a05;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(255, 189, 0, 0.4);
  text-transform: uppercase;
}
.player-rank {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.player-xp-bar {
  position: relative;
  height: 14px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.player-xp-fill {
  height: 100%;
  background: linear-gradient(180deg, var(--cyan), #4a9080);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}
.player-xp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  letter-spacing: 0.04em;
}

/* === HERO CARD === */
.home-hero-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  overflow: hidden;
  text-align: center;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -4px 12px rgba(0,0,0,0.4),
    0 6px 0 rgba(0,0,0,0.3),
    0 12px 32px rgba(155, 93, 229, 0.2);
}
.home-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(155, 93, 229, 0.3), transparent 70%),
    radial-gradient(circle at 100% 100%, rgba(255, 62, 165, 0.15), transparent 50%);
  pointer-events: none;
}
.hero-card-content { position: relative; }
.hero-card-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(255, 62, 165, 0.5));
  animation: heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.hero-card-title {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  margin-bottom: 4px;
}
.hero-card-subtitle {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 18px;
}
.hero-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-stat {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 6px;
  text-align: center;
}
.hero-stat .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
}
.hero-stat .l {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 4px;
}

/* === GROS BOUTON JOUER === */
.play-big-btn {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--amber) 0%, #ff7e3e 50%, #c84030 100%);
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -6px 12px rgba(0,0,0,0.3),
    0 8px 0 #8a2818,
    0 14px 32px rgba(255, 126, 62, 0.4);
  transition: transform 0.08s, box-shadow 0.08s;
  overflow: hidden;
}
.play-big-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent 30%);
  border-radius: inherit;
  pointer-events: none;
}
.play-big-btn:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -6px 12px rgba(0,0,0,0.3),
    0 3px 0 #8a2818,
    0 5px 12px rgba(255, 126, 62, 0.3);
}
.play-big-btn-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 24px;
}
.play-big-btn-icon {
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.play-big-btn-text { text-align: left; }
.play-big-btn-title {
  display: block;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}
.play-big-btn-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.04em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* === TAB BAR === */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: linear-gradient(180deg, rgba(10, 8, 32, 0.4), rgba(10, 8, 32, 0.92) 30%, rgba(10, 8, 32, 0.98));
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) 8px;
  z-index: 50;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="agent"] .tab-bar {
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.4), rgba(26, 20, 16, 0.92) 30%, rgba(26, 20, 16, 0.98));
}

.tab-bar-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-family: inherit;
  font-weight: 800;
  font-size: 9px;
  cursor: pointer;
  letter-spacing: 0.04em;
  border-radius: 16px;
  transition: color 0.2s, background 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s, box-shadow 0.25s;
}
.tab-bar-btn:hover { color: var(--ink-soft); }
.tab-bar-btn:active { transform: translateY(2px); }
.tab-bar-ico {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s;
}
.tab-bar-label {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.85;
  transition: opacity 0.2s;
}

/* === Onglet actif : pilule magenta surélevée === */
.tab-bar-btn.active {
  color: white;
  background: linear-gradient(180deg, var(--magenta), var(--violet));
  transform: translateY(-10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -3px 8px rgba(0,0,0,0.2),
    0 6px 0 var(--magenta-d),
    0 10px 24px rgba(255, 62, 165, 0.5);
  padding: 10px 4px;
}
.tab-bar-btn.active .tab-bar-ico {
  font-size: 28px;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.tab-bar-btn.active .tab-bar-label {
  opacity: 1;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* === Bouton central (Multi) gardé légèrement plus gros par défaut === */
.tab-bar-btn.tab-bar-main:not(.active) .tab-bar-ico {
  font-size: 28px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 8px rgba(255, 62, 165, 0.5));
}

/* En thème Agent : onglet actif en doré */
html[data-theme="agent"] .tab-bar-btn.active {
  background: linear-gradient(180deg, var(--magenta), var(--violet));
  color: #1a1410;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.4),
    inset 0 -3px 8px rgba(0,0,0,0.2),
    0 6px 0 var(--magenta-d),
    0 10px 24px rgba(200, 150, 70, 0.4);
}
html[data-theme="agent"] .tab-bar-btn.active .tab-bar-label {
  text-shadow: 0 1px 2px rgba(255, 220, 160, 0.3);
}

/* Badge de notif */
.tab-bar-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  width: 18px; height: 18px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 12px rgba(239, 71, 111, 0.6);
  animation: badgePulse 1.5s ease-in-out infinite;
  z-index: 2;
}
.tab-bar-btn.active .tab-bar-badge {
  box-shadow: 0 0 0 2px var(--magenta-d), 0 0 12px rgba(239, 71, 111, 0.6);
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Mobile compact */
@media (max-width: 360px) {
  .tab-bar { gap: 2px; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) 4px; }
  .tab-bar-ico { font-size: 22px; }
  .tab-bar-btn.active .tab-bar-ico { font-size: 26px; }
  .tab-bar-label { font-size: 8px; }
}


/* === MENU SETTINGS === */
.settings-menu { display: flex; flex-direction: column; gap: 4px; }
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.settings-item:hover {
  background: var(--glass-strong);
  border-color: var(--magenta);
}
.settings-item:active { transform: translateY(1px); }
.settings-ico { font-size: 22px; flex-shrink: 0; }
.settings-label { flex: 1; font-weight: 800; font-size: 15px; }
.settings-state {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-mute);
}
.settings-state.on { color: var(--green); }
.settings-state.off { color: var(--red); }

@media (min-width: 700px) {
  .home-clash { max-width: 540px; margin: 0 auto; }
  .player-avatar-big { width: 80px; height: 80px; font-size: 44px; }
  .player-name { font-size: 26px; }
}
@media (max-width: 360px) {
  .stat-chip { padding: 4px 8px; font-size: 12px; }
  .header-action-btn { width: 34px; height: 34px; font-size: 16px; }
  .player-name { font-size: 20px; }
  .player-avatar-big { width: 64px; height: 64px; font-size: 32px; }
  .hero-card-emoji { font-size: 48px; }
  .hero-card-title { font-size: 20px; }
  .play-big-btn-title { font-size: 24px; }
  .tab-bar-ico { font-size: 22px; }
  .tab-bar-btn.tab-bar-main .tab-bar-ico { font-size: 28px; }
}

/* Tous les écrans avec tab bar persistante ont un padding bas */
.screen.has-tab-bar {
  padding-bottom: 110px;
}
/* ============================================================
   SURVIE 1v1 (V3.7)
   ============================================================ */

/* === Carte promo dans multi-join === */
.surv1v1-promo {
  background: linear-gradient(135deg, rgba(255, 126, 62, 0.15), rgba(255, 62, 165, 0.12));
  border-color: rgba(255, 126, 62, 0.4);
  position: relative;
  overflow: hidden;
}
.surv1v1-promo::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255, 126, 62, 0.2), transparent 60%);
  pointer-events: none;
}
.surv1v1-promo-badge {
  position: absolute;
  top: 8px; right: 12px;
  background: linear-gradient(180deg, var(--amber), #ff7e3e);
  color: #1a0a05;
  font-weight: 900;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(255, 189, 0, 0.4);
}
.surv1v1-promo-title {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #ff7e3e, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 8px;
}

/* Bouton orange réutilisable */
.btn.btn-orange {
  background: linear-gradient(180deg, var(--amber) 0%, #ff7e3e 50%, #c84030 100%);
  color: white;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: var(--btn-inset), 0 7px 0 #8a2818, 0 11px 22px rgba(255, 126, 62, 0.42);
  font-weight: 900;
}
.btn.btn-orange:active {
  transform: translateY(4px);
  box-shadow: var(--btn-inset-active), 0 3px 0 #8a2818, 0 5px 10px rgba(255, 126, 62, 0.3);
}

/* === Menu 1v1 (3 cartes) === */
/* Règles : accordéon repliable (U4 — UX condensé pour mobile) */
.surv1v1-rules-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 16px;
  overflow: hidden;
  /* Retirer le triangle natif du <details> */
  list-style: none;
}
.surv1v1-rules-card::-webkit-details-marker { display: none; }
.surv1v1-rules-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ink-soft);
  /* Retirer le marker par défaut (Chrome/Safari) */
  list-style: none;
}
.surv1v1-rules-summary::-webkit-details-marker { display: none; }
.surv1v1-rules-summary::marker { display: none; }
.surv1v1-rules-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.surv1v1-rules-tagline {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.surv1v1-rules-tagline strong {
  color: var(--ink);
  font-weight: 800;
}
.surv1v1-rules-toggle {
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 0.2s;
}
/* Quand l'accordéon est ouvert, on retourne la flèche vers le haut */
.surv1v1-rules-card[open] .surv1v1-rules-toggle {
  transform: rotate(180deg);
}
.surv1v1-rules-card .surv1v1-rules-list {
  margin: 0;
  padding: 0 20px 16px 36px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
/* Hover et animation discrète sur le summary */
.surv1v1-rules-card:hover .surv1v1-rules-summary {
  background: rgba(255, 255, 255, 0.02);
}
/* === Phase 4 : Onglets Survie / Arcade dans le menu 1v1 =================== */
.surv1v1-modetabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.surv1v1-modetab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.surv1v1-modetab:hover { border-color: rgba(255, 62, 165, 0.3); }
.surv1v1-modetab:active { transform: scale(0.98); }
.surv1v1-modetab.active {
  border-color: var(--magenta, #ff3ea5);
  background: linear-gradient(180deg, rgba(255, 62, 165, 0.18), rgba(155, 93, 229, 0.08));
  box-shadow: 0 0 20px rgba(255, 62, 165, 0.25);
}
.surv1v1-modetab-icon {
  font-size: 28px;
  line-height: 1;
}
.surv1v1-modetab-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.surv1v1-modetab-sub {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Phase 4 : Chrono Arcade en haut de l'écran de jeu ===================== */
.surv1v1-arcade-chrono {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  margin: -8px -4px 8px;
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.18), rgba(0, 245, 212, 0.05));
  border: 1px solid rgba(0, 245, 212, 0.4);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.surv1v1-arcade-chrono-ico {
  font-size: 22px;
  line-height: 1;
}
.surv1v1-arcade-chrono-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #00f5d4;
  text-shadow: 0 0 12px rgba(0, 245, 212, 0.4);
}
.surv1v1-arcade-chrono.urgent {
  background: linear-gradient(180deg, rgba(239, 71, 111, 0.2), rgba(239, 71, 111, 0.06));
  border-color: rgba(239, 71, 111, 0.5);
  animation: chronoUrgent 0.9s ease-in-out infinite;
}
.surv1v1-arcade-chrono.urgent .surv1v1-arcade-chrono-time {
  color: #ef476f;
  text-shadow: 0 0 16px rgba(239, 71, 111, 0.6);
}
@keyframes chronoUrgent {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* === Phase 4 : Combo (au lieu des vies en mode arcade) ===================== */
.surv1v1-my-combo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #ffbd00;
}
.surv1v1-my-combo .combo-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: #ff7a18;
  text-shadow: 0 0 12px rgba(255, 122, 24, 0.5);
}
.surv1v1-my-combo .combo-empty {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 600;
}
/* Score adversaire en mode arcade (pas de vies à côté) */
.surv1v1-opp-score-arcade {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
/* Suffixe "pts" sur l'écran de fin Arcade */
.surv1v1-end-pts-suffix {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-left: 4px;
}

.surv1v1-modes {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.surv1v1-mode-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.surv1v1-mode-card:hover { border-color: var(--magenta); }
.surv1v1-mode-card:active { transform: translateY(2px); }
.surv1v1-mode-auto:hover { border-color: var(--amber); box-shadow: 0 0 24px rgba(255, 189, 0, 0.25); }
.surv1v1-mode-create:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(0, 245, 212, 0.25); }
.surv1v1-mode-join:hover { border-color: var(--magenta); box-shadow: 0 0 24px rgba(255, 62, 165, 0.25); }
.surv1v1-mode-ico {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.surv1v1-mode-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 4px;
}
.surv1v1-mode-desc {
  font-size: 13px;
  color: var(--ink-soft);
}

/* === Écran d'attente === */
.surv1v1-code-box {
  background: var(--glass);
  border: 2px solid rgba(0, 245, 212, 0.4);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  margin-top: 16px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.surv1v1-code-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 12px 0;
  line-height: 1;
}
/* Boutons d'action sous le code (Copier / Partager) — U3 */
.surv1v1-code-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
.surv1v1-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.surv1v1-share-ico {
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 360px) {
  /* Sur très petits écrans, repasser sur 1 colonne pour ne pas serrer trop */
  .surv1v1-code-actions { flex-direction: column; }
}
.surv1v1-spinner {
  text-align: center;
  padding: 40px 0;
}
.spinner-ring {
  width: 56px;
  height: 56px;
  border: 4px solid var(--line);
  border-top-color: var(--magenta);
  border-radius: 50%;
  margin: 0 auto;
  animation: spinRing 1s linear infinite;
}
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* === Lobby (VS) === */
.surv1v1-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.surv1v1-vs-player {
  background: var(--glass);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 20px 12px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 0 rgba(0,0,0,0.25);
}
.surv1v1-vs-player.surv1v1-empty {
  opacity: 0.5;
  font-style: italic;
  color: var(--ink-mute);
}
.surv1v1-vs-avatar {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(255, 62, 165, 0.3));
}
.surv1v1-vs-name {
  font-weight: 900;
  font-size: 16px;
}
.surv1v1-vs-label {
  font-family: 'Saira Stencil One', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--magenta);
  text-shadow: 0 0 16px rgba(255, 62, 165, 0.6);
  letter-spacing: 0.08em;
}

/* === Écran de jeu === */
.surv1v1-play-screen {
  padding-bottom: 24px;
}

/* Mini bandeau adversaire */
.surv1v1-opp-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 62, 165, 0.12), rgba(255, 62, 165, 0.05));
  border: 1px solid rgba(255, 62, 165, 0.3);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  position: relative;
}
.surv1v1-opp-avatar {
  font-size: 28px;
  line-height: 1;
}
.surv1v1-opp-info { min-width: 0; }
.surv1v1-opp-name {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.surv1v1-opp-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 2px;
}
.surv1v1-opp-lives {
  font-size: 12px;
  letter-spacing: 1px;
}
.surv1v1-opp-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 16px;
  color: var(--cyan);
}
.surv1v1-opp-flash {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  animation: oppFlash 1s ease-out;
}
.surv1v1-opp-flash.good { background: var(--green); color: white; box-shadow: 0 0 16px rgba(6, 214, 160, 0.6); }
.surv1v1-opp-flash.bad { background: var(--red); color: white; box-shadow: 0 0 16px rgba(239, 71, 111, 0.6); }
@keyframes oppFlash {
  0% { transform: scale(0.5); opacity: 0; }
  20% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.5; }
}

/* Mes stats */
.surv1v1-my-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  margin-bottom: 16px;
}
.surv1v1-my-lives {
  font-size: 24px;
  letter-spacing: 4px;
}
.surv1v1-my-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0, 245, 212, 0.4);
}

.surv1v1-theme {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 800;
  margin-bottom: 8px;
}
.surv1v1-q {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 24px;
  padding: 0 8px;
}
.surv1v1-choices {
  display: grid;
  gap: 10px;
}
.surv1v1-choice {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 2px solid var(--line);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, border-color 0.2s, background 0.2s;
}
.surv1v1-choice:hover { border-color: var(--magenta); }
.surv1v1-choice:active { transform: scale(0.98); }
.surv1v1-choice.correct {
  background: linear-gradient(180deg, rgba(6, 214, 160, 0.3), rgba(6, 214, 160, 0.1));
  border-color: var(--green);
  color: white;
  box-shadow: 0 0 24px rgba(6, 214, 160, 0.3);
}
.surv1v1-choice.wrong {
  background: linear-gradient(180deg, rgba(239, 71, 111, 0.3), rgba(239, 71, 111, 0.1));
  border-color: var(--red);
  color: white;
  box-shadow: 0 0 24px rgba(239, 71, 111, 0.3);
}
.surv1v1-choice.disabled {
  opacity: 0.5;
  cursor: default;
}

/* === Écran de fin === */
.surv1v1-end-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.surv1v1-end-player {
  background: var(--glass);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 20px 12px;
  text-align: center;
}
.surv1v1-end-player.winner {
  border-color: rgba(255, 189, 0, 0.7);
  box-shadow: 0 0 32px rgba(255, 189, 0, 0.3), inset 0 0 0 1px rgba(255, 189, 0, 0.2);
}
.surv1v1-end-avatar {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}
.surv1v1-end-name {
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 8px;
}
.surv1v1-end-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 6px;
}
.surv1v1-end-player.winner .surv1v1-end-score { color: var(--amber); }
.surv1v1-end-lives {
  font-size: 14px;
  letter-spacing: 2px;
  min-height: 18px;
}

@media (max-width: 380px) {
  .surv1v1-q { font-size: 18px; }
  .surv1v1-my-score { font-size: 28px; }
  .surv1v1-vs-avatar, .surv1v1-end-avatar { font-size: 40px; }
}

/* ============================================================
   SURVIE 1v1 V3.8 — émotes + sélection 2 étapes
   ============================================================ */

/* Le my-stats devient relatif (utile pour les bulles d'émotes qui s'affichent dedans) */
.surv1v1-my-stats {
  position: relative;
}

/* NOTE: L'ancien bouton .surv1v1-emote-btn (position absolute) a été supprimé.
   Le bouton émote est désormais intégré dans .surv1v1-powers-row comme 4e bouton,
   stylé via .surv1v1-emote-power-btn (cf section "Boutons de pouvoirs"). */

/* Panel de sélection d'émote (overlay) */
.surv1v1-emote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 32, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: emoteOverlayIn 0.2s ease-out;
}
@keyframes emoteOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.surv1v1-emote-panel {
  background: var(--bg-2);
  border: 2px solid var(--magenta);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0 16px 48px rgba(255, 62, 165, 0.3);
  animation: emotePanelIn 0.3s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes emotePanelIn {
  from { opacity: 0; transform: scale(0.7) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.surv1v1-emote-panel-title {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.surv1v1-emote-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.surv1v1-emote-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 2px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
  /* Empêche le contenu (label "Bonjour" plus large) de faire déborder la cellule */
  min-width: 0;
  overflow: hidden;
}
.surv1v1-emote-choice-label {
  font-size: 10px;
  letter-spacing: 0.02em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-soft);
  /* Force le texte à rester dans sa cellule */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surv1v1-emote-choice:hover {
  border-color: var(--magenta);
  background: var(--glass-strong);
  transform: translateY(-2px);
}
.surv1v1-emote-choice:active { transform: scale(0.94); }
.surv1v1-emote-choice-emoji {
  font-size: 32px;
  line-height: 1;
}

/* Bulle d'émote envoyée / reçue qui apparait */
.surv1v1-emote-bubble {
  position: absolute;
  font-size: 56px;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  animation: emotePop 2.5s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
.surv1v1-emote-from-opp {
  top: -16px;
  right: 8px;
  animation: emotePopOpp 2.5s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
.surv1v1-emote-from-me {
  bottom: 0;
  right: 56px;
  animation: emotePopMe 2s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@keyframes emotePopOpp {
  0%   { opacity: 0; transform: scale(0.3) rotate(-20deg) translateY(0); }
  15%  { opacity: 1; transform: scale(1.3) rotate(8deg) translateY(0); }
  30%  { transform: scale(1) rotate(-4deg); }
  85%  { opacity: 1; transform: scale(1) rotate(0deg) translateY(-8px); }
  100% { opacity: 0; transform: scale(0.9) rotate(0deg) translateY(-24px); }
}
@keyframes emotePopMe {
  0%   { opacity: 0; transform: scale(0.3) translateY(0); }
  20%  { opacity: 1; transform: scale(1.2) translateY(-8px); }
  40%  { transform: scale(1) translateY(0); }
  85%  { opacity: 1; transform: scale(1) translateY(-4px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-20px); }
}

/* Pour qu'on les voit bien, on remonte la taille des bulles sur mobile */
@media (max-width: 380px) {
  .surv1v1-emote-bubble { font-size: 44px; }
  .surv1v1-emote-choice-emoji { font-size: 28px; }
}

/* ============================================================
   AVATARS IMAGES (V3.9) — remplacent les emojis dans certains contextes
   ============================================================ */

/* Image d'avatar par défaut : remplit son conteneur, ronde par défaut */
.avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  /* Légère ombre pour bien détacher l'avatar du fond */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* Tailles spécifiques selon le contexte (parent) ===================== */

/* Grille de sélection au login */
.avatar-opt {
  padding: 6px;
}
.avatar-opt .avatar-img {
  width: 100%;
  height: 100%;
  max-width: 56px;
  max-height: 56px;
  margin: 0 auto;
}
.avatar-opt.active .avatar-img {
  /* Petit zoom + glow sur l'avatar actif */
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(255, 62, 165, 0.5));
}

/* Pill topbar (haut de page : avatar + pseudo)
   Taille augmentée de 24 → 32 pour que l'avatar reste lisible (Fix bug avatars trop petits) */
.pill .avatar-img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

/* Player banner big (home Clash) */
.player-avatar-big .avatar-img {
  /* Le parent est déjà 72x72 (ou 80x80 desktop / 64x64 mobile) */
  width: 100%;
  height: 100%;
  /* Override : pas de background semi-transparent ici, l'avatar a déjà son cercle */
  background: transparent;
}

/* Leaderboard / classement */
.lb-avatar .avatar-img,
.player-avatar .avatar-img {
  width: 40px;
  height: 40px;
}
.lb-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.player-avatar {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.player-avatar .avatar-img {
  width: 56px;
  height: 56px;
}

/* Mini avatar (équipe multi)
   Taille augmentée de 20 → 28 pour que l'avatar reste lisible (Fix bug avatars trop petits) */
.tm-avatar .avatar-img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

/* Survie 1v1 — bandeau adversaire
   Taille augmentée de 28 → 36 pour que l'avatar reste lisible (Fix bug avatars trop petits) */
.surv1v1-opp-avatar .avatar-img {
  width: 36px;
  height: 36px;
}
/* Survie 1v1 — lobby VS */
.surv1v1-vs-avatar .avatar-img {
  width: 56px;
  height: 56px;
}
.surv1v1-vs-avatar {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
/* Survie 1v1 — fin de partie */
.surv1v1-end-avatar .avatar-img {
  width: 48px;
  height: 48px;
}
.surv1v1-end-avatar {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

/* Profil grand format */
.profile-avatar-big .avatar-img {
  width: 96px;
  height: 96px;
}

/* Quand .player-avatar-big est utilisé sur la home Clash, on garde le cadre rond du parent */
.player-avatar-big {
  overflow: hidden;
}

/* ============================================================
   V4.0 — CLASSES RPG : mana, pouvoirs, effets, sélection
   ============================================================ */

/* === Badge niveau dans profil === */
.profile-level-badge {
  display: inline-block;
  background: linear-gradient(180deg, var(--amber), #ff7e3e);
  color: #1a0a05;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(255, 189, 0, 0.4);
  text-transform: uppercase;
}

/* === Grille de sélection de classe dans le profil === */
.class-grid {
  display: grid;
  gap: 12px;
}
.class-card {
  background: var(--glass);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.25s;
  position: relative;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  width: 100%;
}
.class-card:hover {
  border-color: var(--cls-color);
  transform: translateY(-2px);
}
.class-card.active {
  border-color: var(--cls-color);
  box-shadow:
    0 0 0 3px var(--cls-color) inset,
    0 8px 24px color-mix(in srgb, var(--cls-color) 35%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cls-color) 12%, transparent),
    var(--glass));
}
.class-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.class-card-emoji {
  font-size: 36px;
  line-height: 1;
}
.class-card-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--cls-color);
}
.class-card-tagline {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}
.class-card-check {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cls-color);
  color: white;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 0 12px var(--cls-color);
}
.class-card-passive {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cc-pl {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cls-color);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cc-pd {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.class-card-powers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.class-power {
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  transition: border-color 0.2s, opacity 0.2s;
}
.class-power.unlocked {
  border-left-color: var(--cls-color);
}
.class-power.locked {
  opacity: 0.45;
  border-left-color: var(--line);
}
.cp-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}
.cp-lvl {
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.cp-name {
  color: var(--ink);
  flex: 1;
}
.cp-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5fa9f5;
  font-weight: 900;
}
.cp-desc {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}

/* === Barre de mana (in-game) === */
.surv1v1-mana-section {
  margin: 8px 0 12px;
}
.surv1v1-mana-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
}
.surv1v1-my-class { color: var(--cls-color); }
.surv1v1-mana-val {
  font-family: 'JetBrains Mono', monospace;
  color: #5fa9f5;
  font-size: 13px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
/* Label "Mana" : explicite ce que représente le compteur (Fix U2) */
.surv1v1-mana-label {
  font-family: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 700;
}
/* Le "/100" plus discret que le score courant */
.surv1v1-mana-max {
  color: var(--ink-soft);
  font-size: 11px;
  margin-left: 1px;
}
.surv1v1-mana-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.surv1v1-mana-fill {
  height: 100%;
  background: linear-gradient(180deg, #5fa9f5, #2b5fc7);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(95, 169, 245, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.surv1v1-mana-bar-mini {
  height: 6px;
  margin-top: 4px;
}

/* === Boutons de pouvoirs === */
.surv1v1-powers-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  /* Hauteur fixe pour que les 4 boutons aient TOUS la même taille,
     évite que l'émote dépasse visuellement (Fix B1) */
  align-items: stretch;
}
.surv1v1-power-btn {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 3px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.1s, border-color 0.2s, background 0.2s, opacity 0.2s;
  font-weight: 800;
  text-align: center;
  /* Empêche les noms longs de faire déborder la cellule de grille */
  min-width: 0;
  overflow: hidden;
  /* Hauteur fixe : 64px partout = pas de bouton qui dépasse (Fix B1) */
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.surv1v1-power-btn:not(:disabled):hover {
  border-color: #5fa9f5;
  background: var(--glass-strong);
  transform: translateY(-1px);
}
.surv1v1-power-btn:active { transform: scale(0.96); }
.surv1v1-power-btn.locked,
.surv1v1-power-btn.insufficient,
.surv1v1-power-btn.disabled,
.surv1v1-power-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.surv1v1-power-btn.locked .pw-name { color: var(--ink-mute); }
.surv1v1-power-btn:not(.locked):not(.disabled) {
  border-color: rgba(95, 169, 245, 0.5);
  background: linear-gradient(180deg, rgba(95, 169, 245, 0.2), rgba(43, 95, 199, 0.1));
}
.pw-name {
  /* 2 lignes max autorisées avec line-clamp (line-break propre sur les espaces).
     Évite la coupure "Provocatio/n" au milieu d'un mot tout en gardant les noms entiers
     visibles ("Coup de bouclier", "Métamorphose", etc.) (Fix B3) */
  font-size: 10.5px;
  line-height: 1.1;
  max-width: 100%;
  width: 100%;
  padding: 0 2px;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Pas de césure de mot : on coupe seulement sur les espaces */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.pw-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Alignement propre du coût mana et niveau (Fix B4) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  letter-spacing: 0.02em;
}
/* Bouton émote dans la même grille : style légèrement distinct mais MÊME taille */
.surv1v1-emote-power-btn {
  border-color: rgba(255, 62, 165, 0.5) !important;
  background: linear-gradient(180deg, rgba(255, 62, 165, 0.18), rgba(155, 93, 229, 0.12)) !important;
}
.surv1v1-emote-power-btn:not(:disabled):hover {
  border-color: var(--magenta, #ff3ea5) !important;
}
.surv1v1-emote-power-btn .pw-name {
  font-size: 18px; /* Emoji plus grand pour le distinguer */
}
.surv1v1-emote-power-btn .pw-cost {
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
}

/* === Effets visuels in-game === */

/* Buff exécution × 2 */
.surv1v1-buff-double {
  display: inline-block;
  background: linear-gradient(180deg, var(--amber), #ff7e3e);
  color: #1a0a05;
  font-weight: 900;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
  animation: buffPulse 1s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(255, 189, 0, 0.6);
}
@keyframes buffPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Armure passive flash */
.surv1v1-armor-flash {
  display: inline-block;
  margin-left: 8px;
  animation: armorBlink 1s ease-out;
}
@keyframes armorBlink {
  0% { transform: scale(0); opacity: 0; }
  30% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 12px var(--cyan)); }
  100% { transform: scale(1); opacity: 0.7; }
}

/* Choix brûlé par Boule de feu */
.choice.burned {
  background: linear-gradient(180deg, rgba(255, 126, 62, 0.3), rgba(200, 64, 48, 0.4)) !important;
  border-color: #c84030 !important;
  position: relative;
  pointer-events: none;
  filter: grayscale(0.5) brightness(0.6);
}
.choice.burned span {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.5);
}
.burn-mark {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  animation: burnFlame 0.8s ease-out;
}
@keyframes burnFlame {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.5) rotate(-20deg); }
  50%  { opacity: 1; transform: translateY(-50%) scale(1.4) rotate(10deg); }
  100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}

/* Blizzard overlay : écran gelé */
.surv1v1-blizzard-overlay {
  background: linear-gradient(135deg,
    rgba(95, 169, 245, 0.3),
    rgba(168, 220, 255, 0.4),
    rgba(95, 169, 245, 0.3));
  border: 2px solid #a8dcff;
  border-radius: var(--r-lg);
  padding: 40px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  animation: blizzardIn 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.surv1v1-blizzard-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 4%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.3) 0%, transparent 3%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 5%),
    radial-gradient(circle at 35% 85%, rgba(255,255,255,0.4) 0%, transparent 4%);
  background-size: 80px 80px;
  animation: snowDrift 3s linear infinite;
  pointer-events: none;
}
@keyframes blizzardIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes snowDrift {
  to { background-position: 80px 80px; }
}
.blizzard-ico {
  font-size: 56px;
  animation: blizzardSpin 2s linear infinite;
}
@keyframes blizzardSpin {
  to { transform: rotate(360deg); }
}
.blizzard-text {
  font-weight: 900;
  font-size: 18px;
  color: white;
  margin-top: 12px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
}

/* Question masquée par Fumigène */
.question.q-smoked {
  position: relative;
  color: transparent !important;
}
.question.q-smoked::after {
  content: '🌫️ Question masquée…';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2c2c2c, #555);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: var(--r-md);
  animation: smokeIn 0.4s ease-out;
}
@keyframes smokeIn {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1); }
}

/* Affichage classe adversaire */
.surv1v1-opp-class {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  vertical-align: middle;
}

/* Lobby VS : classe + niveau */
.surv1v1-vs-class {
  font-size: 12px;
  font-weight: 800;
  margin-top: 6px;
}
.surv1v1-vs-level {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 800;
}

@media (max-width: 380px) {
  .pw-name { font-size: 11px; }
  .surv1v1-powers-row { gap: 4px; }
  .class-card-emoji { font-size: 30px; }
  .class-card-name { font-size: 16px; }
}

/* === Bouton émote dans la barre de sorts (V4.1) === */
.surv1v1-power-btn.surv1v1-emote-power-btn {
  border-color: rgba(255, 62, 165, 0.5) !important;
  background: linear-gradient(180deg, rgba(255, 62, 165, 0.2), rgba(155, 93, 229, 0.1)) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.surv1v1-power-btn.surv1v1-emote-power-btn:hover {
  border-color: var(--magenta) !important;
  transform: translateY(-1px);
}
.surv1v1-power-btn.surv1v1-emote-power-btn .pw-name {
  font-size: 18px;
}
.surv1v1-power-btn.surv1v1-emote-power-btn .pw-cost {
  color: var(--magenta);
}

/* === V4.1 : Compaction de l'écran 1v1 pour éviter le scroll === */
.surv1v1-play-screen .question {
  font-size: clamp(15px, 4vw, 18px);
  margin-bottom: 12px;
  min-height: auto;
  line-height: 1.25;
}
.surv1v1-play-screen .choices {
  gap: 7px;
}
.surv1v1-play-screen .choice {
  padding: 10px 12px;
  font-size: 14px;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 3px 0 rgba(0,0,0,0.3);
}
.surv1v1-play-screen .choice:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.surv1v1-play-screen .choice .letter {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
}
.surv1v1-play-screen .submit-btn-quiz {
  margin-top: 8px;
  font-size: 14px;
  padding: 12px 16px;
}
.surv1v1-play-screen .theme-pill {
  padding: 6px 12px;
  font-size: 11px;
  margin-bottom: 6px;
}

/* Compacter aussi les bandeaux de stats */
.surv1v1-play-screen .surv1v1-opp-bar {
  padding: 6px 10px;
  margin-bottom: 8px;
}
.surv1v1-play-screen .surv1v1-my-stats {
  padding: 4px 4px;
  margin-bottom: 4px;
}
.surv1v1-play-screen .surv1v1-my-lives {
  font-size: 20px;
  letter-spacing: 2px;
}
.surv1v1-play-screen .surv1v1-my-score {
  font-size: 28px;
}
.surv1v1-play-screen .surv1v1-mana-section {
  margin: 4px 0 8px;
}
.surv1v1-play-screen .surv1v1-power-btn {
  padding: 6px 4px;
}
.surv1v1-play-screen .pw-name {
  font-size: 11px;
}
.surv1v1-play-screen .pw-cost {
  font-size: 9px;
}

/* Feedback compact */
.surv1v1-play-screen .feedback {
  padding: 8px 14px;
  font-size: 14px;
  margin-top: 8px;
}

/* === Pulse pour Permutation quand utilisable === */
.surv1v1-power-btn.surv1v1-power-pulse {
  animation: powerPulse 0.8s ease-in-out infinite;
  border-color: var(--green) !important;
  box-shadow: 0 0 16px rgba(6, 214, 160, 0.5);
}
@keyframes powerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(6, 214, 160, 0.4); }
  50%      { transform: scale(1.04); box-shadow: 0 0 22px rgba(6, 214, 160, 0.8); }
}

/* === V4.1.2 : Timer de 10s par question en Survie 1v1 === */
.surv1v1-timer {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.surv1v1-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  border-radius: 999px;
  /* Pas de transition CSS — la largeur est animée frame par frame par requestAnimationFrame côté JS */
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.5);
}
.surv1v1-timer-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 900;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  letter-spacing: 0.05em;
}
.surv1v1-timer.urgent .surv1v1-timer-fill {
  background: linear-gradient(90deg, #ff7e3e, var(--red));
  animation: timerUrgentPulse 0.5s ease-in-out infinite;
}
@keyframes timerUrgentPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 71, 111, 0.5); }
  50%      { box-shadow: 0 0 18px rgba(239, 71, 111, 0.9); }
}

/* === V4.4 : Barre de sélection de classe dans le menu Survie 1v1 === */
.surv1v1-class-picker {
  margin: 16px 0;
}
.surv1v1-class-picker-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.surv1v1-class-picker-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.surv1v1-class-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
  min-width: 0;
}
.surv1v1-class-pill:hover {
  transform: translateY(-1px);
  border-color: var(--cls-color);
}
.surv1v1-class-pill.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cls-color) 25%, transparent), color-mix(in srgb, var(--cls-color) 10%, transparent));
  border-color: var(--cls-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cls-color) 40%, transparent);
}
.surv1v1-class-pill .cls-emoji {
  font-size: 22px;
  line-height: 1;
}
.surv1v1-class-pill .cls-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surv1v1-class-pill.active .cls-name {
  color: var(--ink);
}

/* ============================================================
   SYSTÈME D'ÉNERGIE (V8)
   ============================================================ */
.energy-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.energy-bolts {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.energy-bolt {
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}
.energy-bolt.full {
  filter: drop-shadow(0 0 5px rgba(255, 189, 0, 0.8));
}
.energy-bolt.off {
  filter: grayscale(1) brightness(0.4);
  opacity: 0.45;
}
.energy-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.energy-count {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 800;
  font-size: 15px;
  color: var(--amber);
}
.energy-timer,
.energy-full-label {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
  white-space: nowrap;
}
.energy-timer strong {
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.energy-ad-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #0a0820;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--violet-d), 0 5px 14px rgba(155, 93, 229, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.energy-ad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--violet-d), 0 2px 6px rgba(155, 93, 229, 0.3);
}
.energy-ad-ico { font-size: 14px; }

/* Modale "plus d'énergie" */
.energy-modal {
  text-align: center;
  max-width: 380px;
}
.energy-modal-ico {
  font-size: 56px;
  filter: grayscale(1) brightness(0.5);
  margin-bottom: 8px;
  animation: energyPulse 2s ease-in-out infinite;
}
@keyframes energyPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}
.energy-modal-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--ink);
}
.energy-modal-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 20px;
}
.energy-modal-text strong { color: var(--amber); }
.energy-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Écran de pub simulée */
.ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 4, 16, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: adFadeIn 0.25s ease;
}
@keyframes adFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ad-screen {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  overflow: hidden;
}
.ad-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--ink-mute);
}
.ad-fake-video {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 30% 30%, rgba(155,93,229,0.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,245,212,0.25), transparent 60%),
    var(--bg-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ad-fake-logo { font-size: 52px; animation: energyPulse 1.6s ease-in-out infinite; }
.ad-fake-text { font-size: 16px; font-weight: 800; color: var(--ink); }
.ad-fake-sub { font-size: 11px; color: var(--ink-mute); }
.ad-countdown {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}
.ad-countdown strong {
  color: var(--cyan);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 18px;
}
.ad-done {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
}
.ad-done-ico { font-size: 56px; animation: adPop 0.4s cubic-bezier(0.22,1.4,0.36,1); }
@keyframes adPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ad-done-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.ad-done .btn { max-width: 260px; }

/* ============================================================
   PASS & PLAY — Multijoueur local (V8)
   ============================================================ */

/* Bouton d'entrée dans multi-join */
.play-big-btn-local {
  background: linear-gradient(180deg, #2ee6c6 0%, #14c0a0 50%, #0a8a72 100%) !important;
  box-shadow: var(--btn-inset), 0 8px 0 #075848, 0 14px 32px rgba(0, 245, 212, 0.38) !important;
}
.play-big-btn-local:active {
  box-shadow: var(--btn-inset-active), 0 3px 0 #075848, 0 5px 12px rgba(0, 245, 212, 0.3) !important;
}

/* --- Écran setup --- */
/* Stepper +/− pour le nombre de joueurs (2 à 12) */
.pp-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}
.pp-step-btn {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}
.pp-step-btn:not(:disabled):hover {
  border-color: var(--cyan);
  background: rgba(0, 245, 212, 0.12);
}
.pp-step-btn:not(:disabled):active {
  transform: scale(0.92);
}
.pp-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pp-step-value {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: var(--cyan);
}
.pp-step-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Sélecteur de longueur de partie (5/10/15/20 questions) */
.pp-len-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.pp-len-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 4px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pp-len-btn.active {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0,245,212,0.2), rgba(155,93,229,0.15));
  color: var(--ink);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.35);
}
.pp-len-btn:not(.active):active { transform: scale(0.94); }
.pp-len-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.pp-len-btn.active .pp-len-num { color: var(--cyan); }
.pp-len-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.pp-names {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.pp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-name-avatar {
  font-size: 26px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.pp-name-input {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}

.pp-rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
}
.pp-rules-list li {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  display: flex;
  gap: 8px;
}
.pp-rules-list li::before {
  content: '→';
  color: var(--cyan);
  font-weight: 800;
  flex-shrink: 0;
}
.pp-rules-list strong { color: var(--ink); }

/* --- Écran "passe le téléphone" --- */
.pp-pass-screen {
  display: flex;
  flex-direction: column;
}
.pp-pass-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px 0 40px;
}
.pp-pass-ico {
  font-size: 44px;
  animation: ppFloat 2.2s ease-in-out infinite;
}
@keyframes ppFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}
.pp-pass-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pp-pass-avatar {
  font-size: 84px;
  line-height: 1;
  animation: ppPop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes ppPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pp-pass-name {
  font-size: 34px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  max-width: 100%;
}
.pp-pass-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 800;
  color: var(--amber);
}
.pp-pass-btn {
  margin-top: 24px;
  max-width: 280px;
}

/* --- Écran question --- */
.pp-turn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.pp-turn-avatar { font-size: 24px; flex-shrink: 0; }
.pp-turn-name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-turn-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 14px;
  color: var(--amber);
  flex-shrink: 0;
}

.pp-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-bottom: 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--theme-color, var(--violet)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-color, var(--violet)) 45%, transparent);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
}

.pp-feedback {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--r-md);
  text-align: center;
  animation: ppFadeUp 0.3s ease;
}
@keyframes ppFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pp-feedback.ok {
  background: rgba(6, 214, 160, 0.14);
  border: 1px solid rgba(6, 214, 160, 0.45);
}
.pp-feedback.ko {
  background: rgba(239, 71, 111, 0.12);
  border: 1px solid rgba(239, 71, 111, 0.4);
}
.pp-feedback-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.pp-feedback.ok .pp-feedback-title { color: #06d6a0; }
.pp-feedback strong { color: var(--ink); }

/* --- Écran final --- */
.pp-end-screen {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
}
.pp-end-header {
  text-align: center;
  margin-bottom: 24px;
}
.pp-end-ico {
  font-size: 64px;
  animation: ppPop 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.pp-end-title {
  font-size: 28px;
  font-weight: 900;
  margin-top: 8px;
  color: var(--ink);
  overflow-wrap: break-word;
}
.pp-end-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 600;
}

.pp-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pp-rank-row.winner {
  border-color: rgba(255, 189, 0, 0.6);
  background: linear-gradient(135deg, rgba(255,189,0,0.14), rgba(255,126,62,0.08));
  box-shadow: 0 0 20px rgba(255, 189, 0, 0.25);
}
.pp-rank-pos {
  font-size: 20px;
  font-weight: 900;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.pp-rank-avatar { font-size: 26px; flex-shrink: 0; }
.pp-rank-name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-rank-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.pp-rank-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 900;
  color: var(--amber);
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* ============================================================
   TETRIS SOLO (V8)
   ============================================================ */

/* Carte dans le menu solo */
.clash-mode-card.mode-tetris {
  border-color: rgba(0, 245, 212, 0.35);
}
.clash-mode-card.mode-tetris .clash-mode-icon {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.25), rgba(155, 93, 229, 0.2));
}

/* Listes d'aide (contrôles / scoring) */
.ts-controls-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.ts-controls-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ts-controls-list li strong { color: var(--ink); }
.ts-key {
  flex-shrink: 0;
  min-width: 56px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 6px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--cyan);
}

/* Overlay de pause sur le plateau */
.tetris-board-wrap { position: relative; }
.ts-pause-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10, 8, 32, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--r-md);
  z-index: 5;
}
.ts-pause-ico { font-size: 44px; }
.ts-pause-txt {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Bouton pause sous les contrôles */
.ts-pause-btn {
  margin-top: 10px;
  font-size: 14px !important;
  padding: 10px 16px !important;
}

/* Écran de fin */
.ts-end-screen {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}
.ts-end-header {
  text-align: center;
  margin-bottom: 28px;
}
.ts-end-ico {
  font-size: 64px;
  animation: tsPop 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes tsPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ts-end-title {
  font-size: 28px;
  font-weight: 900;
  margin-top: 8px;
  color: var(--ink);
}
.ts-end-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 600;
}
.ts-end-sub strong {
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
}

.ts-end-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ts-end-stat {
  padding: 16px 8px;
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ts-end-stat.record {
  border-color: rgba(255, 189, 0, 0.6);
  background: linear-gradient(135deg, rgba(255, 189, 0, 0.16), rgba(255, 126, 62, 0.08));
  box-shadow: 0 0 20px rgba(255, 189, 0, 0.25);
}
.ts-end-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1.1;
}
.ts-end-stat.record .ts-end-stat-val { color: var(--amber); }
.ts-end-stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ============================================================
   TETRIS LOCAL (multijoueur même pièce) — V8
   ============================================================ */

/* Bouton d'entrée dans multi-join */
.play-big-btn-tetris {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.16), rgba(255, 189, 0, 0.10)) !important;
  border-color: rgba(0, 245, 212, 0.4) !important;
}

/* Sélecteur de difficulté */
.tl-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.tl-diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 4px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.tl-diff-btn.active {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0,245,212,0.2), rgba(155,93,229,0.15));
  color: var(--ink);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.35);
}
.tl-diff-btn:not(.active):active { transform: scale(0.94); }
.tl-diff-emoji { font-size: 24px; line-height: 1; }
.tl-diff-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badge difficulté sur l'écran "passe le téléphone" */
.tl-pass-diff {
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid rgba(0, 245, 212, 0.3);
}

/* Score à battre pendant la manche */
.tl-target {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255, 189, 0, 0.10);
  border: 1px solid rgba(255, 189, 0, 0.3);
  border-radius: var(--r-pill);
}
.tl-target strong {
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   TETRIS BATTLE (temps réel) — V8
   ============================================================ */
.play-big-btn-tetris-local {
  background: linear-gradient(135deg, rgba(155, 93, 229, 0.16), rgba(0, 245, 212, 0.08)) !important;
  border-color: rgba(155, 93, 229, 0.4) !important;
}

/* PIN à partager dans le lobby (visible pour l'hôte) */
.tb-pin-share {
  text-align: center;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.12), rgba(155, 93, 229, 0.10));
  border: 1px solid rgba(0, 245, 212, 0.35);
}
.tb-pin-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.tb-pin-code {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--cyan);
  line-height: 1.1;
  margin: 6px 0 4px;
  text-shadow: 0 0 24px rgba(0, 245, 212, 0.5);
}
.tb-pin-hint {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}
.tb-pin-hint strong { color: var(--ink); }

/* ============================================================
   SUPPRESSION DE COMPTE (V8)
   ============================================================ */
.btn-delete-account {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(239, 71, 111, 0.4);
  border-radius: var(--r-md);
  color: #ef476f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-delete-account:hover {
  background: rgba(239, 71, 111, 0.08);
  border-color: rgba(239, 71, 111, 0.6);
}

.delete-modal {
  text-align: center;
  max-width: 400px;
}
.delete-modal-ico {
  font-size: 52px;
  margin-bottom: 8px;
}
.delete-modal-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 12px;
}
.delete-modal-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 18px;
}
.delete-modal-text strong { color: #ef476f; }
.delete-pwd-input {
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
}
.delete-modal-error {
  font-size: 13px;
  font-weight: 700;
  color: #ef476f;
  margin-bottom: 12px;
}
.delete-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-delete-confirm {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ef476f, #c1123f);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--btn-inset), 0 7px 0 #8a0d2c, 0 11px 20px rgba(239, 71, 111, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-delete-confirm:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: var(--btn-inset-active), 0 3px 0 #8a0d2c, 0 5px 10px rgba(239, 71, 111, 0.3);
}
.btn-delete-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   SURVIVAL ROYALE (battle royale de survie) — V8
   ============================================================ */
.play-big-btn-royale {
  background: linear-gradient(180deg, #ff5c8a 0%, #ef476f 50%, #b22d4e 100%) !important;
  box-shadow: var(--btn-inset), 0 8px 0 #7a1f38, 0 14px 32px rgba(239, 71, 111, 0.42) !important;
}
.play-big-btn-royale:active {
  box-shadow: var(--btn-inset-active), 0 3px 0 #7a1f38, 0 5px 12px rgba(239, 71, 111, 0.32) !important;
}
.royale-join-card { border-color: rgba(239, 71, 111, 0.25); }

/* --- Lobby --- */
.royale-pin-share {
  text-align: center;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(239,71,111,0.12), rgba(155,93,229,0.10));
  border: 1px solid rgba(239, 71, 111, 0.35);
  margin-top: 12px;
}
.royale-lobby-count {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 20px 0 12px;
}
.royale-lobby-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.royale-lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.royale-lobby-player.me {
  border-color: var(--magenta);
  background: rgba(255, 62, 165, 0.12);
}
.rlp-avatar { font-size: 22px; }
.rlp-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.royale-rules-card {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(239, 71, 111, 0.06);
  border: 1px solid rgba(239, 71, 111, 0.2);
  border-radius: var(--r-lg);
}

/* --- En jeu : barre des joueurs --- */
.royale-players-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 8px;
}
.royale-pchip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  transition: all 0.3s;
}
.royale-pchip.me { border-color: var(--magenta); }
.royale-pchip.dead { opacity: 0.4; filter: grayscale(1); }
.royale-pchip.lost-life {
  animation: royale-shake 0.4s;
  border-color: #ef476f;
}
@keyframes royale-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.rpc-avatar { font-size: 16px; }
.rpc-name { font-weight: 700; color: var(--ink); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpc-lives { font-size: 11px; letter-spacing: -2px; }
.rpc-check { color: var(--cyan); font-weight: 800; }

/* --- En-tête de question --- */
.royale-q-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.royale-q-theme {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.royale-timer {
  font-size: 22px;
  font-weight: 900;
  color: var(--cyan);
  min-width: 48px;
  text-align: right;
}
.royale-waiting {
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
}

/* --- Bannières --- */
.royale-dead-banner {
  text-align: center;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(122, 111, 163, 0.15);
  border: 1px solid rgba(122, 111, 163, 0.3);
  border-radius: var(--r-md);
  font-weight: 800;
  color: var(--ink-soft);
}
.royale-reveal-banner {
  text-align: center;
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--r-md);
  font-size: 18px;
  font-weight: 900;
  animation: royale-pop 0.3s;
}
@keyframes royale-pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.royale-reveal-banner.ok {
  background: rgba(6, 214, 160, 0.15);
  border: 1px solid rgba(6, 214, 160, 0.4);
  color: #06d6a0;
}
.royale-reveal-banner.ko {
  background: rgba(239, 71, 111, 0.15);
  border: 1px solid rgba(239, 71, 111, 0.4);
  color: #ef476f;
}

/* ============================================================
   HOME — REFONTE (badge Profil, défis, classement) — V9
   ============================================================ */

/* Sublabel "NIV." sous l'étoile */
.stat-chip-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.stat-chip-sub {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 1px;
}

/* === Badge PROFIL dans la bannière === */
.player-profil-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 2px 2px 2px 14px;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s;
}
.player-profil-btn:active { transform: scale(0.94); }
.profil-shield {
  position: relative;
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #ffd15c, #e8a01e);
  clip-path: polygon(50% 0%, 100% 12%, 100% 58%, 50% 100%, 0% 58%, 0% 12%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.profil-shield::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: linear-gradient(160deg, #8b45e8, #5a1ea8);
  clip-path: polygon(50% 0%, 100% 12%, 100% 58%, 50% 100%, 0% 58%, 0% 12%);
}
.profil-shield-star {
  position: relative;
  z-index: 1;
  font-size: 18px;
  color: #ffd76a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.profil-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c9a5ff;
}

/* === Icônes dans les stats du hero === */
.hero-stat-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hero-stat-ico { font-size: 18px; line-height: 1; }
.hero-stat .v { display: inline; }

/* Bouton JOUER intégré dans la carte hero */
.home-hero-play {
  margin-top: 18px;
  display: block;
}
.play-big-btn-arrow {
  margin-left: auto;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.9;
}

/* === Séparateur de section === */
.home-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 2px 0;
}
.home-section-divider::before,
.home-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.home-section-divider span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* === Cartes de défis === */
.challenges-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.challenge-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--glass);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.1s, border-color 0.2s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.challenge-card:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.25); }
.challenge-daily {
  border-color: rgba(255, 62, 165, 0.35);
  background: linear-gradient(150deg, rgba(255, 62, 165, 0.12), rgba(155, 93, 229, 0.06));
}
.challenge-streak {
  border-color: rgba(0, 245, 212, 0.32);
  background: linear-gradient(150deg, rgba(0, 245, 212, 0.1), rgba(58, 134, 255, 0.06));
}
.challenge-head { display: flex; align-items: flex-start; gap: 10px; }
.challenge-ico {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.challenge-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.challenge-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.challenge-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.challenge-progress {
  position: relative;
  height: 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(180deg, var(--amber), #ff7e3e);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 189, 0, 0.5);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
}
.challenge-progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.challenge-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.challenge-reward {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
}
.reward-val {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}
.challenge-arrow {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

/* === Carte promo Classement === */
.leaderboard-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(155, 93, 229, 0.35);
  background: linear-gradient(135deg, rgba(155, 93, 229, 0.18), rgba(255, 62, 165, 0.08));
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.1s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.leaderboard-promo:active { transform: translateY(2px); }
.lb-promo-ico {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(255, 189, 0, 0.4));
}
.lb-promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-promo-title {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-promo-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.lb-promo-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c9a5ff;
  text-align: center;
  line-height: 1.3;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(155, 93, 229, 0.2);
  border: 1px solid rgba(155, 93, 229, 0.4);
}

/* Adaptation petit écran : cartes de défis empilées si trop étroit */
@media (max-width: 360px) {
  .challenges-row { grid-template-columns: 1fr; }
  .player-profil-btn { padding-left: 8px; }
  .profil-label { font-size: 10px; }
}

/* ============================================================
   HOME — bouton plein écran + version dans le header (V9.1)
   ============================================================ */
.header-fs-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.3);
  transition: transform 0.1s, background 0.2s;
}
.header-fs-btn:active { transform: translateY(1px); }
.header-fs-btn:hover { background: var(--glass-strong); }
.header-version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(155, 93, 229, 0.1);
  border: 1px solid rgba(155, 93, 229, 0.22);
  white-space: nowrap;
  align-self: center;
}
.header-stats { flex-wrap: nowrap; align-items: center; }

/* Masquer les éléments flottants sur l'accueil (déplacés dans le header) */
body:has(.home-clash) .klash-fs-btn,
body:has(.home-clash) .version-badge { display: none !important; }

/* ============================================================
   HOME — compactage pour tenir sur un écran sans scroll (V9.1)
   ============================================================ */
.home-clash { gap: 7px; padding-bottom: 88px; }
.home-clash .energy-bar { margin-bottom: 0; padding: 8px 14px; }

.player-banner { padding: 11px 14px; }
.player-avatar-big { width: 58px; height: 58px; font-size: 30px; }
.player-name { font-size: 19px; margin-bottom: 3px; }
.player-meta { margin-bottom: 6px; }
.player-xp-bar { height: 13px; }

.home-hero-card { padding: 13px 16px 14px; }
.hero-card-emoji { font-size: 34px; margin-bottom: 3px; }
.hero-card-title { font-size: 21px; }
.hero-card-subtitle { margin-bottom: 9px; font-size: 12px; }
.hero-card-stats { gap: 8px; }
.hero-stat { padding: 7px 4px; }
.hero-stat .v { font-size: 19px; }
.home-hero-play { margin-top: 9px; }
.play-big-btn-inner { padding: 12px 20px; }
.play-big-btn-title { font-size: 23px; }

.home-section-divider { margin-top: 2px; }

.challenges-row { gap: 10px; }
.challenge-card { padding: 10px 12px; gap: 7px; }
.challenge-ico { font-size: 20px; }
.challenge-title { font-size: 14px; }
.challenge-desc { font-size: 11px; }
.challenge-progress { height: 16px; }

.leaderboard-promo { padding: 12px 16px; }
.lb-promo-ico { font-size: 36px; }

/* Petits écrans : compactage renforcé pour rester sans scroll */
@media (max-height: 810px) {
  .home-clash { gap: 5px; padding-bottom: 80px; }
  .home-clash .energy-bar { padding: 6px 14px; }
  .player-avatar-big { width: 48px; height: 48px; font-size: 25px; }
  .player-banner { padding: 8px 13px; }
  .player-name { font-size: 17px; margin-bottom: 2px; }
  .player-meta { margin-bottom: 5px; }
  .player-xp-bar { height: 12px; }
  .home-hero-card { padding: 9px 15px 10px; }
  .hero-card-emoji { font-size: 26px; margin-bottom: 1px; }
  .hero-card-title { font-size: 19px; }
  .hero-card-subtitle { margin-bottom: 5px; font-size: 11px; }
  .hero-card-stats { gap: 6px; }
  .hero-stat { padding: 5px 4px; }
  .hero-stat .v { font-size: 18px; }
  .home-hero-play { margin-top: 6px; }
  .play-big-btn-inner { padding: 9px 18px; }
  .play-big-btn-title { font-size: 19px; }
  .play-big-btn-icon { font-size: 34px; }
  .home-section-divider { margin-top: 0; }
  .challenge-card { padding: 7px 10px; gap: 5px; }
  .challenge-ico { font-size: 18px; }
  .challenge-progress { height: 15px; }
  .leaderboard-promo { padding: 8px 13px; }
  .lb-promo-ico { font-size: 28px; }
}

/* === Hub multi : boutons Créer / Rejoindre distincts === */
.multi-hub-create {
  background: linear-gradient(180deg, #2ee6a0 0%, #1eb886 50%, #0d8a63 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -6px 12px rgba(0,0,0,0.3),
              0 8px 0 #0a5f45, 0 14px 32px rgba(46, 230, 160, 0.35) !important;
}
.multi-hub-create:active {
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -6px 12px rgba(0,0,0,0.3),
              0 3px 0 #0a5f45, 0 5px 12px rgba(46, 230, 160, 0.3) !important;
}
.multi-hub-join {
  background: linear-gradient(180deg, #6aa8ff 0%, #4a7ee0 50%, #3559b0 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -6px 12px rgba(0,0,0,0.3),
              0 8px 0 #26407e, 0 14px 32px rgba(74, 126, 224, 0.35) !important;
}
.multi-hub-join:active {
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -6px 12px rgba(0,0,0,0.3),
              0 3px 0 #26407e, 0 5px 12px rgba(74, 126, 224, 0.3) !important;
}



/* ============================================================
   ÉCRAN LOGIN : compte d'abord, invité ensuite (V9.7)
   ============================================================ */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.auth-divider span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}

.guest-details {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.guest-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
  transition: background 0.15s;
}
.guest-summary::-webkit-details-marker { display: none; }
.guest-summary::after {
  content: '▾';
  font-size: 13px;
  opacity: 0.6;
  transition: transform 0.2s;
}
.guest-details[open] .guest-summary::after { transform: rotate(180deg); }
.guest-summary:hover { background: rgba(255, 255, 255, 0.04); }
.guest-body {
  padding: 0 16px 16px;
}

/* ============================================================
   PUB RÉCOMPENSÉE : écran d'attente vraie pub Google (V9.8)
   ============================================================ */
.ad-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px;
}
.ad-loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cyan);
  animation: ad-spin 0.8s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }
.ad-loading-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}