/* ========================================
  ⚡ THÈME CYBERPUNK - Futur dystopique néon
  ======================================== */
:root {
  color-scheme: dark light;
  --bg: radial-gradient(circle at 20% 20%, #ff9a9e, #fecfef, #fe99c0);
  --text-color: #2d0033;
  --button-bg: rgba(255, 255, 255, 0.85);
  --button-text: #832161;
  --shadow: 0 1rem 2.5rem rgba(63, 0, 92, 0.35);
  --wrapper-bg: rgba(255, 255, 255, 0.6);
  --scoreboard-bg: rgba(255, 255, 255, 0.95);
  --scoreboard-text: #832161;
  --stats-bg: rgba(255,255,255,0.9);
  --stats-text: #832161;
  --stats-border: rgba(131, 33, 97, 0.1);
}

/* ========================================
   🌙 THÈME SOMBRE - Nuit étoilée mystérieuse
   ======================================== */
body[data-theme="dark"] {
  --bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  --text-color: #e0e0e0;
  --button-bg: rgba(80, 80, 100, 0.9);
  --button-text: #b8b8ff;
  --shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.7);
  --wrapper-bg: rgba(30, 30, 50, 0.8);
  --scoreboard-bg: rgba(30, 30, 50, 0.95);
}

/* Ciel étoilé animé */
body[data-theme="dark"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(2px 2px at 15% 15%, white, transparent);
  background-size: 300px 300px, 250px 250px, 200px 200px, 350px 350px, 280px 280px, 220px 220px, 320px 320px;
  animation: darkStars 200s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

@keyframes darkStars {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1000px); }
}

/* Lune brillante */
body[data-theme="dark"]::after {
  content: "🌙";
  position: fixed;
  top: 10%;
  right: 15%;
  font-size: 6rem;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
  animation: darkMoonGlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes darkMoonGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    transform: translateY(0);
  }
  50% { 
    filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.9));
    transform: translateY(-10px);
  }
}

body[data-theme="dark"] .wrapper,
body[data-theme="dark"] .scoreboard-left {
  backdrop-filter: blur(15px) brightness(0.9);
  border: 1px solid rgba(184, 184, 255, 0.2);
  box-shadow: 
    0 1rem 2.5rem rgba(0, 0, 0, 0.7),
    0 0 30px rgba(48, 43, 99, 0.5),
    inset 0 0 20px rgba(184, 184, 255, 0.05);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2 {
  color: #b8b8ff;
  text-shadow: 
    0 0 10px rgba(184, 184, 255, 0.8),
    0 0 20px rgba(184, 184, 255, 0.4);
}

body[data-theme="dark"] button {
  background: rgba(80, 80, 100, 0.9) !important;
  border: 1px solid rgba(184, 184, 255, 0.3) !important;
  color: #b8b8ff !important;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(184, 184, 255, 0.2);
  transition: all 0.3s ease;
}

body[data-theme="dark"] button:hover {
  background: rgba(100, 100, 120, 0.95) !important;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(184, 184, 255, 0.4);
  transform: translateY(-2px);
}

/* ========================================
   ⚡ THÈME CYBERPUNK - Futur dystopique néon
   ======================================== */
body[data-theme="cyberpunk"] {
  --bg: linear-gradient(135deg, #0a0a0a, #1a001a, #330033);
  --text-color: #00ff9f;
  --button-bg: rgba(0, 255, 159, 0.2);
  --button-text: #ff00ff;
  --wrapper-bg: rgba(10, 10, 10, 0.8);
  --scoreboard-bg: rgba(10, 10, 10, 0.95);
}

/* Petits téléphones (≤ 480px) */

body[data-theme="cyberpunk"] h1 {
  color: #00ff9f;
  text-shadow:
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #00ff9f,
    2px 2px 0 #ff00ff,
    -2px -2px 0 #00ff9f;
  animation: cyberpunkTextGlitch 5s ease-in-out infinite;
}

@keyframes cyberpunkTextGlitch {
  0%, 88%, 100% {
    text-shadow:
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 40px #00ff9f,
      2px 2px 0 #ff00ff,
      -2px -2px 0 #00ff9f;
  }
  90% {
    text-shadow:
      0 0 10px #00ff9f,
      0 0 20px #00ff9f,
      0 0 40px #ff00ff,
      -2px 2px 0 #00ff9f,
      2px -2px 0 #ff00ff;
  }
  94% {
    text-shadow:
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 40px #00ff9f,
      2px 2px 0 #ff00ff,
      -2px -2px 0 #00ff9f;
  }
}

body[data-theme="cyberpunk"] h2 {
  color: #ff00ff;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ff9f;
}

body[data-theme="cyberpunk"] .scoreboard-left {
  border: 2px solid #ff00ff;
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.5),
    0 0 40px rgba(0, 255, 159, 0.3),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  backdrop-filter: blur(10px) brightness(0.8);
  animation: cyberpunkBorderPulse 4s linear infinite;
}

body[data-theme="cyberpunk"] button {
  background: rgba(0, 255, 159, 0.2) !important;
  border: 2px solid #00ff9f !important;
  color: #ff00ff !important;
  text-shadow: 0 0 10px #ff00ff;
  box-shadow: 
    0 0 15px rgba(0, 255, 159, 0.5),
    0 4px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body[data-theme="cyberpunk"] button:hover {
  background: rgba(255, 0, 255, 0.2) !important;
  border-color: #ff00ff !important;
  color: #00ff9f !important;
  text-shadow: 0 0 10px #00ff9f;
  box-shadow: 
    0 0 25px rgba(255, 0, 255, 0.7),
    0 6px 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

/* Thème Liquid Glass */
/* ========================================
   💎 LIQUID GLASS THEME
   ======================================== */

/* Variables racine */
body[data-theme="glass"] {
  --bg: linear-gradient(180deg, #87CEEB 0%, #98D8E8 15%, #B0E0E6 30%, #E0F6FF 50%, #90EE90 70%, #7CB342 85%, #558B2F 100%);
  --text-color: rgb(11 18 32 / 0.86);
  --text-micro: rgb(8 14 24 / 0.92);
  --button-bg: rgba(255, 255, 255, 0.14);
  --button-text: rgb(11 18 32 / 0.88);
  --shadow-primary: 0 12px 38px hsla(185, 25%, 28%, 0.18), 0 4px 14px hsla(185, 25%, 22%, 0.10);
  --wrapper-bg: rgba(240, 248, 255, 0.22);
  --scoreboard-bg: rgba(245, 250, 255, 0.16);
}

/* Fond animé avec nuages et anti-banding */
body[data-theme="glass"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 800px 200px at 20% 15%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(ellipse 600px 150px at 70% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 700px 180px at 45% 10%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(circle 120px at 85% 18%, rgba(255, 223, 100, 0.8), rgba(255, 200, 50, 0.4) 40%, transparent 70%),
    radial-gradient(ellipse 1500px 300px at 50% 75%, rgba(76, 175, 80, 0.3), transparent 70%),
    radial-gradient(ellipse 1200px 250px at 30% 80%, rgba(139, 195, 74, 0.25), transparent 65%);
  animation: glassFloat 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* Animations */
@keyframes glassFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  33% { transform: translate(50px, -30px) scale(1.1); opacity: 0.5; }
  66% { transform: translate(-30px, 40px) scale(0.9); opacity: 0.45; }
}

@keyframes liquidShineDiagonal {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, 1.5px) rotate(0.6deg); }
  50% { transform: translate(-1.5px, 2.5px) rotate(-0.4deg); }
  75% { transform: translate(2px, -1px) rotate(0.5deg); }
}

/* ========================================
   HIÉRARCHIE DE PROFONDEUR (4 niveaux)
   ======================================== */

/* Niveau 1 : Panneau principal (.wrapper) - Blur 30px */
@supports (backdrop-filter: blur(0)) {
  body[data-theme="glass"] .wrapper {
    backdrop-filter: blur(30px) saturate(155%);
    border-radius: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.52);
    box-shadow: 
      0 0 0 1px hsla(185, 20%, 55%, 0.10),
      0 12px 38px hsla(185, 25%, 28%, 0.18),
      0 4px 14px hsla(185, 25%, 22%, 0.10),
      0 1px 0 hsla(185, 22%, 20%, 0.08),
      inset 0 2px 5px rgba(255, 255, 255, 0.70),
      inset 0 -3px 5px rgba(11, 18, 32, 0.05);
    position: relative;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-theme="glass"] .wrapper:hover {
    transform: translateY(-3px) translateZ(0);
    box-shadow: 
      0 0 0 1px hsla(185, 20%, 55%, 0.10),
      0 16px 48px hsla(185, 25%, 28%, 0.22),
      0 6px 18px hsla(185, 25%, 22%, 0.12),
      0 1px 0 hsla(185, 22%, 20%, 0.08),
      inset 0 2px 5px rgba(255, 255, 255, 0.70),
      inset 0 -3px 5px rgba(11, 18, 32, 0.05);
  }
}

/* Niveau 2 : Carte Score (#score-container) - Blur 18px */
@supports (backdrop-filter: blur(0)) {
  body[data-theme="glass"] .wrapper > div[style*="background"]:first-of-type,
  body[data-theme="glass"] #score-container {
    backdrop-filter: blur(18px) saturate(142%) !important;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.50) !important;
    box-shadow: 
      0 0 0 1px hsla(185, 18%, 58%, 0.09),
      0 4px 16px hsla(185, 22%, 32%, 0.13),
      0 2px 6px hsla(185, 22%, 25%, 0.07),
      0 1px 0 hsla(185, 20%, 22%, 0.06),
      inset 0 2px 4px rgba(255, 255, 255, 0.64),
      inset 0 -2px 3px rgba(11, 18, 32, 0.04) !important;
    background: rgba(248, 252, 255, 0.16) !important;
  }
}

/* Niveau 3 : Sidebar (.scoreboard-left) - Blur 16px */
@supports (backdrop-filter: blur(0)) {
  body[data-theme="glass"] .scoreboard-left {
    backdrop-filter: blur(16px) saturate(138%);
    border-radius: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.48);
    box-shadow: 
      0 0 0 1px hsla(185, 15%, 58%, 0.08),
      0 6px 20px hsla(185, 18%, 35%, 0.13),
      0 2px 6px hsla(185, 18%, 28%, 0.07),
      0 1px 0 hsla(185, 16%, 25%, 0.06),
      inset 0 2px 3px rgba(255, 255, 255, 0.60),
      inset 0 -2px 3px rgba(11, 18, 32, 0.03);
    position: relative;
  }
}

/* Niveau 4 : Boutons - Blur 12px (voir section BOUTONS) */

/* Fallback pour navigateurs sans backdrop-filter */
@supports not (backdrop-filter: blur(0)) {
  body[data-theme="glass"] .wrapper {
    background: rgba(240, 248, 255, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
  }
  
  body[data-theme="glass"] .scoreboard-left {
    background: rgba(245, 250, 255, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
  }

  body[data-theme="glass"] button {
    background: rgba(255, 255, 255, 0.24) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }
}

/* ========================================
   EFFETS LIQUID GLASS (Reflets et épaisseur)
   ======================================== */

/* Effet d'épaisseur de verre (interne) */
body[data-theme="glass"] .wrapper::before,
body[data-theme="glass"] .scoreboard-left::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    radial-gradient(ellipse 180px 90px at 12% 18%, rgba(255, 255, 255, 0.38), transparent 48%),
    radial-gradient(ellipse 160px 80px at 88% 78%, rgba(255, 255, 255, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(240, 248, 255, 0.06) 52%, transparent);
  pointer-events: none;
  opacity: 0.75;
}

/* Reflet liquide diagonal animé - Wrapper */
body[data-theme="glass"] .wrapper::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.15) 52%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: overlay;
  will-change: transform, opacity;
  animation: liquidShineDiagonal 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body[data-theme="glass"] .wrapper:hover::after {
  opacity: 0.8;
  animation: liquidShineDiagonal 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Reflet liquide diagonal animé - Sidebar */
body[data-theme="glass"] .scoreboard-left::after {
  content: "";
  position: absolute;
  top: -42%;
  left: -52%;
  width: 204%;
  height: 204%;
  background: linear-gradient(128deg, transparent 44%, rgba(255, 255, 255, 0.14) 50%, transparent 56%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.48;
  animation: liquidShineDiagonal 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: overlay;
}

/* ========================================
   BOUTONS (Niveau 4 - Blur 12px)
   ======================================== */

@supports (backdrop-filter: blur(0)) {
  body[data-theme="glass"] button {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) saturate(140%);
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.46) !important;
    box-shadow: 
      0 0 0 1px hsla(185, 20%, 55%, 0.09),
      0 4px 12px hsla(185, 25%, 28%, 0.14),
      0 1px 3px hsla(185, 25%, 22%, 0.07),
      0 1px 0 hsla(185, 22%, 20%, 0.07),
      inset 0 1px 2px rgba(255, 255, 255, 0.56),
      inset 0 -2px 2px rgba(11, 18, 32, 0.03) !important;
    color: rgb(11 18 32 / 0.88) !important;
    font-weight: 600 !important;
    font-size: 1.05em !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  /* Effet brillant au survol */
  body[data-theme="glass"] button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
  }

  body[data-theme="glass"] button:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px) scale(1.01) translateZ(0);
    box-shadow: 
      0 0 0 1px hsla(185, 20%, 55%, 0.09),
      0 6px 16px hsla(185, 25%, 28%, 0.18),
      0 2px 6px hsla(185, 25%, 22%, 0.10),
      0 1px 0 hsla(185, 22%, 20%, 0.07),
      inset 0 1px 2px rgba(255, 255, 255, 0.60),
      inset 0 -2px 2px rgba(11, 18, 32, 0.03) !important;
  }

  body[data-theme="glass"] button:hover::before { left: 100%; }

  body[data-theme="glass"] button:focus-visible {
    outline: none;
    box-shadow: 
      0 0 0 3px hsla(185, 55%, 60%, 0.45),
      0 0 0 1px hsla(185, 20%, 55%, 0.09),
      0 4px 12px hsla(185, 25%, 28%, 0.14),
      inset 0 1px 2px rgba(255, 255, 255, 0.56) !important;
  }

  /* Bouton CTA "Mode Cascade" - Accent visuel */
  body[data-theme="glass"] #cascade-toggle {
    border: 1.5px solid rgba(255, 255, 255, 0.56) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgb(11 18 32 / 0.94) !important;
    font-weight: 700 !important;
    box-shadow: 
      0 0 0 1px hsla(185, 22%, 55%, 0.12),
      0 4px 14px hsla(185, 25%, 28%, 0.16),
      0 1px 4px hsla(185, 25%, 22%, 0.08),
      0 1px 0 hsla(185, 22%, 20%, 0.08),
      inset 0 1px 3px rgba(255, 255, 255, 0.62),
      inset 0 -2px 2px rgba(11, 18, 32, 0.04) !important;
  }

  body[data-theme="glass"] #cascade-toggle:hover {
    background: rgba(255, 255, 255, 0.26) !important;
    box-shadow: 
      0 0 0 1px hsla(185, 22%, 55%, 0.12),
      0 6px 18px hsla(185, 25%, 28%, 0.20),
      0 2px 7px hsla(185, 25%, 22%, 0.11),
      0 1px 0 hsla(185, 22%, 20%, 0.08),
      inset 0 1px 3px rgba(255, 255, 255, 0.66),
      inset 0 -2px 2px rgba(11, 18, 32, 0.04) !important;
  }

  body[data-theme="glass"] #cascade-toggle:focus-visible {
    outline: none;
    box-shadow: 
      0 0 0 4px hsla(185, 58%, 62%, 0.50),
      0 0 0 1px hsla(185, 22%, 55%, 0.12),
      0 4px 14px hsla(185, 25%, 28%, 0.16),
      inset 0 1px 3px rgba(255, 255, 255, 0.62) !important;
  }
}

/* ========================================
   TYPOGRAPHIE & CONTRASTE
   ======================================== */

/* Titres */
body[data-theme="glass"] h1,
body[data-theme="glass"] h2,
body[data-theme="glass"] h3 {
  color: #000000;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

/* Texte standard */
body[data-theme="glass"] p,
body[data-theme="glass"] div {
  color: #0a0f11;
}

/* Texte par défaut pour tous les éléments */
body[data-theme="glass"] * {
  color: rgb(11 18 32 / 0.86) !important;
}

/* Chiffres importants (score, niveau, multiplicateur) */
body[data-theme="glass"] #score,
body[data-theme="glass"] #level,
body[data-theme="glass"] #multiplier,
body[data-theme="glass"] #cascade-speed,
body[data-theme="glass"] strong {
  color: rgb(11 18 32 / 0.88) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Micro-texte (haute lisibilité) */
body[data-theme="glass"] small,
body[data-theme="glass"] .small-text,
body[data-theme="glass"] .version,
body[data-theme="glass"] .update-info,
body[data-theme="glass"] #update-timer {
  font-size: 0.95em !important;
  font-weight: 500 !important;
  color: rgb(8 14 24 / 0.92) !important;
}

/* ========================================
   SCROLLBAR PERSONNALISÉE
   ======================================== */

/* Dimensions */
body[data-theme="glass"] .scoreboard-left::-webkit-scrollbar,
body[data-theme="glass"] #scores-list::-webkit-scrollbar {
  width: 6px;
  height: 0;
}

body[data-theme="glass"] .scoreboard-left::-webkit-scrollbar-horizontal {
  display: none;
}

/* Track */
body[data-theme="glass"] .scoreboard-left::-webkit-scrollbar-track,
body[data-theme="glass"] #scores-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin: 8px 0;
}

/* Thumb */
body[data-theme="glass"] .scoreboard-left::-webkit-scrollbar-thumb,
body[data-theme="glass"] #scores-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(200, 220, 240, 0.35));
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 1px 2px hsla(175, 42%, 18%, 0.15);
  backdrop-filter: blur(4px);
}

body[data-theme="glass"] .scoreboard-left::-webkit-scrollbar-thumb:hover,
body[data-theme="glass"] #scores-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(200, 220, 240, 0.45));
}

/* Firefox */
body[data-theme="glass"] .scoreboard-left,
body[data-theme="glass"] #scores-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 235, 250, 0.4) rgba(255, 255, 255, 0.08);
}

/* ========================================
   ÉLÉMENTS SPÉCIFIQUES
   ======================================== */

/* Divs internes du wrapper */
body[data-theme="glass"] .wrapper > div[style*="background"],
body[data-theme="glass"] .wrapper > div {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Info prochain niveau */
body[data-theme="glass"] #next-level-info {
  background: rgba(255, 245, 205, 0.8) !important;
  color: #000000 !important;
  border-left-color: #d4a017 !important;
}

/* Lignes du leaderboard */
body[data-theme="glass"] #scores-list li {
  color: rgb(11 18 32 / 0.86) !important;
  border-bottom: 1px solid hsla(185, 12%, 65%, 0.06) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

/* Formulaires */
body[data-theme="glass"] input,
body[data-theme="glass"] textarea,
body[data-theme="glass"] select {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #000000 !important;
  border: 2px solid rgba(100, 120, 140, 0.5) !important;
}

body[data-theme="glass"] label {
  color: #000000 !important;
  font-weight: 600;
}

/* Modales */
body[data-theme="glass"] .modal-content {
  background: rgba(230, 240, 250, 0.95) !important;
  color: #000000 !important;
}

/* Password toggle inside inputs */
.pw-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-field input {
  width: 100%;
  padding-right: 3rem; /* space for the eye button */
}
.pw-toggle {
  position: absolute;
  right: 6px; /* place at the very right edge of the input */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 6px;
  line-height: 1;
  color: #ffffff; /* white icon */
  border-radius: 8px; /* soft rounded */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: none; /* disable animated transitions */
}
.pw-toggle:focus {
  outline: none; /* remove animated outline */
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.pw-toggle.active { background: rgba(255,255,255,0.06); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle svg path, .pw-toggle svg circle, .pw-toggle svg line { stroke: none; fill: currentColor; }

/* Boutons fixes (thèmes, performance) */
body[data-theme="glass"] .perf-toggle-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 100;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) saturate(140%);
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.46) !important;
  box-shadow: 
    0 0 0 1px hsla(185, 20%, 55%, 0.09),
    0 4px 12px hsla(185, 25%, 28%, 0.14),
    0 1px 3px hsla(185, 25%, 22%, 0.07),
    0 1px 0 hsla(185, 22%, 20%, 0.07),
    inset 0 1px 2px rgba(255, 255, 255, 0.56),
    inset 0 -2px 2px rgba(11, 18, 32, 0.03) !important;
  color: rgb(11 18 32 / 0.88) !important;
  font-weight: 600 !important;
}

body[data-theme="glass"] .theme-toggle-btn {
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) saturate(140%);
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.46) !important;
  box-shadow: 
    0 0 0 1px hsla(185, 20%, 55%, 0.09),
    0 4px 12px hsla(185, 25%, 28%, 0.14),
    0 1px 3px hsla(185, 25%, 22%, 0.07),
    0 1px 0 hsla(185, 22%, 20%, 0.07),
    inset 0 1px 2px rgba(255, 255, 255, 0.56),
    inset 0 -2px 2px rgba(11, 18, 32, 0.03) !important;
  color: rgb(11 18 32 / 0.88) !important;
  font-weight: 600 !important;
}

body[data-theme="glass"] .theme-selector {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
}

/* Boutons fixes - États interactifs */
body[data-theme="glass"] .perf-toggle-btn:hover,
body[data-theme="glass"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 
    0 0 0 1px hsla(185, 20%, 55%, 0.09),
    0 6px 16px hsla(185, 25%, 28%, 0.18),
    0 2px 6px hsla(185, 25%, 22%, 0.10),
    0 1px 0 hsla(185, 22%, 20%, 0.07),
    inset 0 1px 2px rgba(255, 255, 255, 0.60),
    inset 0 -2px 2px rgba(11, 18, 32, 0.03) !important;
}

body[data-theme="glass"] .perf-toggle-btn:focus-visible,
body[data-theme="glass"] .theme-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 3px hsla(185, 55%, 60%, 0.45),
    0 0 0 1px hsla(185, 20%, 55%, 0.09),
    0 4px 12px hsla(185, 25%, 28%, 0.14),
    inset 0 1px 2px rgba(255, 255, 255, 0.56) !important;
}

/* Dropdown des thèmes */
body[data-theme="glass"] .theme-dropdown {
  background: rgba(240, 245, 250, 0.98) !important;
}

body[data-theme="glass"] .theme-dropdown button {
  color: #000000 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body[data-theme="glass"] .theme-dropdown button:hover,
body[data-theme="glass"] .theme-dropdown button.active {
  background: rgba(200, 210, 220, 0.3) !important;
}

/* ========================================
   FIN DU THÈME LIQUID GLASS
   ======================================== */

/* Thème DVD Screensaver */
body[data-theme="dvd"] {
  --bg: #000000;
  --text-color: #ffffff;
  --button-bg: rgba(255, 255, 255, 0.15);
  --button-text: #ffffff;
  --shadow: 0 0 40px rgba(255, 255, 255, 0.6);
  --wrapper-bg: rgba(0, 0, 0, 0.85);
  --scoreboard-bg: rgba(0, 0, 0, 0.9);
  --scoreboard-text: #ffffff;
  --stats-bg: rgba(0, 0, 0, 0.85);
  --stats-text: #ffffff;
  --stats-border: rgba(255, 255, 255, 0.25);
}

/* Logo DVD qui rebondit avec changement de couleur */
body[data-theme="dvd"]::before {
  content: "DVD";
  position: fixed;
  font-size: 4.5rem;
  font-weight: 900;
  font-family: "Arial Black", sans-serif;
  color: #ff0080;
  padding: 1.2rem 2.5rem;
  border: 4px solid currentColor;
  border-radius: 0.8rem;
  box-shadow: 
    0 0 40px currentColor,
    0 0 80px currentColor,
    inset 0 0 20px rgba(255, 255, 255, 0.3);
  animation: 
    dvdBounceX 8.3s linear infinite,
    dvdBounceY 6.7s linear infinite,
    dvdColorChange 20.1s step-start infinite;
  z-index: 1000;
  pointer-events: none;
  backdrop-filter: blur(5px);
  text-shadow: 
    0 0 25px currentColor,
    0 0 50px currentColor;
  letter-spacing: 0.3rem;
  will-change: left, top, color;
}

/* Effet de traînée de mouvement */
body[data-theme="dvd"]::after {
  content: "";
  position: fixed;
  width: 280px;
  height: 180px;
  background: radial-gradient(ellipse at center, currentColor, transparent 70%);
  animation: 
    dvdBounceX 8.3s linear infinite,
    dvdBounceY 6.7s linear infinite,
    dvdColorChange 20.1s step-start infinite;
  z-index: 999;
  pointer-events: none;
  filter: blur(30px);
  opacity: 0.3;
  will-change: left, top, color;
}

/* Animation de rebond horizontal (trajectoire pseudo-aléatoire) */
@keyframes dvdBounceX {
  0% { left: 0; }
  25% { left: calc(100% - 280px); }
  50% { left: 0; }
  75% { left: calc(100% - 280px); }
  100% { left: 0; }
}

/* Animation de rebond vertical (trajectoire pseudo-aléatoire) */
@keyframes dvdBounceY {
  0% { top: 0; }
  20% { top: calc(100% - 160px); }
  40% { top: 0; }
  60% { top: calc(100% - 160px); }
  80% { top: 0; }
  100% { top: 0; }
}

/* Changement de couleur progressif avec beaucoup de variations */
@keyframes dvdColorChange {
  0% { color: #ff0080; }
  5% { color: #ff0080; }
  6% { color: #00ff80; }
  11% { color: #00ff80; }
  12% { color: #0080ff; }
  17% { color: #0080ff; }
  18% { color: #ff00ff; }
  23% { color: #ff00ff; }
  24% { color: #ffff00; }
  29% { color: #ffff00; }
  30% { color: #00ffff; }
  35% { color: #00ffff; }
  36% { color: #ff8000; }
  41% { color: #ff8000; }
  42% { color: #8000ff; }
  47% { color: #8000ff; }
  48% { color: #00ff00; }
  53% { color: #00ff00; }
  54% { color: #ff0040; }
  59% { color: #ff0040; }
  60% { color: #40ff00; }
  65% { color: #40ff00; }
  66% { color: #0040ff; }
  71% { color: #0040ff; }
  72% { color: #ff4080; }
  77% { color: #ff4080; }
  78% { color: #80ff40; }
  83% { color: #80ff40; }
  84% { color: #4080ff; }
  89% { color: #4080ff; }
  90% { color: #ff80c0; }
  95% { color: #ff80c0; }
  96% { color: #c0ff80; }
  100% { color: #ff0080; }
}

/* Écran noir avec effet CRT vintage */
body[data-theme="dvd"] {
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.15) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 3px
    ),
    radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
}

/* Style rétro pour les éléments */
body[data-theme="dvd"] .wrapper {
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 0 50px rgba(255, 255, 255, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.05);
}

body[data-theme="dvd"] h1 {
  font-family: "Impact", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.4),
    3px 3px 0 rgba(0, 0, 0, 0.5);
  animation: dvdTextGlow 2s ease-in-out infinite;
}

body[data-theme="dvd"] h2 {
  font-family: "Impact", sans-serif;
  letter-spacing: 0.15rem;
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.6),
    2px 2px 0 rgba(0, 0, 0, 0.5);
}

@keyframes dvdTextGlow {
  0%, 100% { 
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.4),
      3px 3px 0 rgba(0, 0, 0, 0.5);
  }
  50% { 
    text-shadow: 
      0 0 30px rgba(255, 255, 255, 1),
      0 0 60px rgba(255, 255, 255, 0.6),
      3px 3px 0 rgba(0, 0, 0, 0.5);
  }
}

/* Boutons avec effet rétro */
body[data-theme="dvd"] .perf-toggle-btn,
body[data-theme="dvd"] .theme-selector button {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1rem;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

body[data-theme="dvd"] .perf-toggle-btn:hover,
body[data-theme="dvd"] .theme-selector button:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.5),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

body[data-theme="dvd"] .perf-toggle-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 100;
}

body[data-theme="dvd"] .theme-selector {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
}

/* Thème Glitch */
body[data-theme="glitch"] {
  --bg: linear-gradient(135deg, #1a0033, #330066);
  --text-color: #00ffff;
  --button-bg: rgba(0, 255, 255, 0.1);
  --button-text: #ff00ff;
  --shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  --wrapper-bg: rgba(26, 0, 51, 0.8);
  --scoreboard-bg: rgba(51, 0, 102, 0.9);
  --scoreboard-text: #00ffff;
  --stats-bg: rgba(26, 0, 51, 0.8);
  --stats-text: #00ffff;
  --stats-border: rgba(0, 255, 255, 0.3);
}

body[data-theme="glitch"] h1 {
  animation: glitch 1s infinite;
  position: relative;
}

body[data-theme="glitch"] h1::before,
body[data-theme="glitch"] h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

body[data-theme="glitch"] h1::before {
  animation: glitchTop 0.5s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

body[data-theme="glitch"] h1::after {
  animation: glitchBottom 0.7s infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitchTop {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(-5px, -5px); color: #ff00ff; }
}

@keyframes glitchBottom {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(5px, 5px); color: #00ffff; }
}

/* ========================================
   🐠 THÈME AQUARIUM - Océan profond avec poissons
   ======================================== */
body[data-theme="aquarium"] {
  --bg: linear-gradient(180deg, #001f3f 0%, #003d5c 50%, #005580 100%);
  --text-color: #e0f7ff;
  --button-bg: rgba(0, 85, 128, 0.5);
  --button-text: #ffffff;
  --wrapper-bg: rgba(0, 61, 92, 0.6);
  --scoreboard-bg: rgba(0, 31, 63, 0.8);
}

/* Bulles qui montent */
body[data-theme="aquarium"]::before {
  content: "⚪";
  position: fixed;
  inset: 0;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.3);
  animation: aquariumBubbles 20s linear infinite;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  line-height: 5;
}

@keyframes aquariumBubbles {
  0% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* Rayons de lumière sous-marine */
body[data-theme="aquarium"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 60%),
    linear-gradient(140deg, transparent 35%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 60%, transparent 65%);
  animation: aquariumRays 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes aquariumRays {
  0%, 100% { transform: translateX(-10%) rotate(0deg); opacity: 0.4; }
  50% { transform: translateX(10%) rotate(2deg); opacity: 0.7; }
}

body[data-theme="aquarium"] .wrapper,
body[data-theme="aquarium"] .scoreboard-left {
  background: rgba(0, 61, 92, 0.7);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(100, 200, 255, 0.3);
  box-shadow: 
    0 1rem 2rem rgba(0, 85, 128, 0.5),
    0 0 40px rgba(100, 200, 255, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.05);
}

body[data-theme="aquarium"] .wrapper::before {
  content: "🐠 🐟 🐡";
  position: absolute;
  top: 50%;
  left: -100px;
  font-size: 2.5rem;
  animation: aquariumFish 25s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.5));
}

@keyframes aquariumFish {
  0% { left: -100px; transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { left: calc(100% + 100px); transform: translateY(0); }
}

body[data-theme="aquarium"] h1,
body[data-theme="aquarium"] h2 {
  color: #e0f7ff;
  text-shadow: 
    0 0 10px rgba(224, 247, 255, 0.8),
    0 0 20px rgba(100, 200, 255, 0.4);
}

body[data-theme="aquarium"] button {
  background: rgba(0, 85, 128, 0.6) !important;
  border: 2px solid rgba(100, 200, 255, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 
    0 4px 15px rgba(0, 85, 128, 0.5),
    0 0 20px rgba(100, 200, 255, 0.2);
  transition: all 0.3s ease;
}

body[data-theme="aquarium"] button:hover {
  background: rgba(0, 105, 148, 0.7) !important;
  border-color: rgba(100, 200, 255, 0.6) !important;
  box-shadow: 
    0 6px 20px rgba(0, 85, 128, 0.6),
    0 0 30px rgba(100, 200, 255, 0.4);
  transform: translateY(-2px);
}

/* Thème Rave Party */
body[data-theme="rave"] {
  --bg: #000000;
  --text-color: #ffffff;
  --button-bg: rgba(255, 255, 255, 0.1);
  --button-text: #ffffff;
  --shadow: 0 0 30px rgba(255, 0, 255, 0.8);
  --wrapper-bg: rgba(0, 0, 0, 0.7);
  --scoreboard-bg: rgba(0, 0, 0, 0.8);
  --scoreboard-text: #ffffff;
  --stats-bg: rgba(0, 0, 0, 0.7);
  --stats-text: #ffffff;
  --stats-border: rgba(255, 255, 255, 0.2);
  animation: raveBackground 0.5s infinite;
}

@keyframes raveBackground {
  0% { background: linear-gradient(135deg, #ff0000, #000000); }
  16% { background: linear-gradient(135deg, #00ff00, #000000); }
  33% { background: linear-gradient(135deg, #0000ff, #000000); }
  50% { background: linear-gradient(135deg, #ff00ff, #000000); }
  66% { background: linear-gradient(135deg, #ffff00, #000000); }
  83% { background: linear-gradient(135deg, #00ffff, #000000); }
  100% { background: linear-gradient(135deg, #ff0000, #000000); }
}

body[data-theme="rave"] .wrapper,
body[data-theme="rave"] .scoreboard-left {
  animation: ravePulse 0.5s infinite;
  box-shadow: 0 0 30px currentColor;
}

@keyframes ravePulse {
  0%, 100% { box-shadow: 0 0 20px #ff0000; }
  16% { box-shadow: 0 0 20px #00ff00; }
  33% { box-shadow: 0 0 20px #0000ff; }
  50% { box-shadow: 0 0 20px #ff00ff; }
  66% { box-shadow: 0 0 20px #ffff00; }
  83% { box-shadow: 0 0 20px #00ffff; }
}

/* Thème Vaporwave */
body[data-theme="vaporwave"] {
  --bg: linear-gradient(135deg, #ff71ce 0%, #01cdfe 50%, #05ffa1 100%);
  --text-color: #ffffff;
  --button-bg: rgba(255, 113, 206, 0.3);
  --button-text: #ffffff;
  --shadow: 0 1rem 2rem rgba(255, 113, 206, 0.5);
  --wrapper-bg: rgba(178, 128, 255, 0.3);
  --scoreboard-bg: rgba(255, 113, 206, 0.4);
  --scoreboard-text: #ffffff;
  --stats-bg: rgba(178, 128, 255, 0.3);
  --stats-text: #ffffff;
  --stats-border: rgba(255, 255, 255, 0.3);
}

body[data-theme="vaporwave"]::before {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: repeating-linear-gradient(
    0deg,
    #ff71ce 0px,
    #ff71ce 2px,
    transparent 2px,
    transparent 20px
  );
  animation: vaporwaveGrid 2s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

@keyframes vaporwaveGrid {
  0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(500px) rotateX(60deg) translateY(20px); }
}

body[data-theme="vaporwave"] h1 {
  text-shadow: 3px 3px 0 #ff71ce, 6px 6px 0 #01cdfe, 9px 9px 0 #05ffa1;
  animation: vaporwaveFloat 3s ease-in-out infinite;
}

@keyframes vaporwaveFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Thème Fireflies */
body[data-theme="fireflies"] {
  --bg: linear-gradient(180deg, #0a0e27 0%, #1a1a2e 50%, #16213e 100%);
  --text-color: #f0f0f0;
  --button-bg: rgba(26, 26, 46, 0.8);
  --button-text: #ffeb3b;
  --shadow: 0 1rem 2rem rgba(255, 235, 59, 0.3);
  --wrapper-bg: rgba(26, 26, 46, 0.7);
  --scoreboard-bg: rgba(10, 14, 39, 0.9);
  --scoreboard-text: #f0f0f0;
  --stats-bg: rgba(26, 26, 46, 0.7);
  --stats-text: #f0f0f0;
  --stats-border: rgba(255, 235, 59, 0.2);
}

body[data-theme="fireflies"]::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, #ffeb3b, transparent),
    radial-gradient(2px 2px at 60% 70%, #ffeb3b, transparent),
    radial-gradient(3px 3px at 50% 50%, #ffeb3b, transparent),
    radial-gradient(2px 2px at 80% 10%, #ffeb3b, transparent),
    radial-gradient(2px 2px at 90% 60%, #ffeb3b, transparent),
    radial-gradient(3px 3px at 33% 80%, #ffeb3b, transparent),
    radial-gradient(2px 2px at 10% 90%, #ffeb3b, transparent);
  background-size: 200% 200%;
  animation: firefliesMove 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes firefliesMove {
  0%, 100% { 
    background-position: 0% 0%, 50% 50%, 100% 100%, 25% 75%, 75% 25%, 60% 40%, 40% 60%;
    opacity: 0.8;
  }
  50% { 
    background-position: 100% 100%, 0% 0%, 50% 50%, 75% 25%, 25% 75%, 40% 60%, 60% 40%;
    opacity: 1;
  }
}

/* Thème Disco Ball */
body[data-theme="disco"] {
  --bg: linear-gradient(135deg, #2c003e, #1a0033);
  --text-color: #ffffff;
  --button-bg: rgba(255, 255, 255, 0.1);
  --button-text: #ffffff;
  --shadow: 0 0 30px rgba(255, 255, 255, 0.5);
  --wrapper-bg: rgba(42, 0, 62, 0.8);
  --scoreboard-bg: rgba(26, 0, 51, 0.9);
  --scoreboard-text: #ffffff;
  --stats-bg: rgba(42, 0, 62, 0.8);
  --stats-text: #ffffff;
  --stats-border: rgba(255, 255, 255, 0.2);
}

body[data-theme="disco"]::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: 
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.8) 49%, rgba(255,255,255,0.8) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.8) 49%, rgba(255,255,255,0.8) 51%, transparent 52%);
  border-radius: 50%;
  animation: discoSpin 3s linear infinite;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, 0.3);
  filter: brightness(1.5);
}

@keyframes discoSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* Thème Personnalisé */
body[data-theme="custom"] {
  --text-color: #ffffff;
  --button-bg: rgba(0, 0, 0, 0.5);
  --button-text: #ffffff;
  --shadow: 0 1rem 2rem rgba(0, 0, 0, 0.7);
  --wrapper-bg: rgba(0, 0, 0, 0.7);
  --scoreboard-bg: rgba(0, 0, 0, 0.8);
  --scoreboard-text: #ffffff;
  --stats-bg: rgba(0, 0, 0, 0.7);
  --stats-text: #ffffff;
  --stats-border: rgba(255, 255, 255, 0.2);
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body[data-theme="custom"] .wrapper,
body[data-theme="custom"] .scoreboard-left {
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

body[data-theme="custom"] button {
  backdrop-filter: blur(10px);
}

/* ========================================
   🟢 THÈME MATRIX - Code qui pleut en continu
   ======================================== */
body[data-theme="matrix"] {
  --bg: #000000;
  --text-color: #00ff00;
  --button-bg: rgba(0, 255, 0, 0.1);
  --button-text: #00ff00;
  --wrapper-bg: rgba(0, 20, 0, 0.9);
  --scoreboard-bg: rgba(0, 20, 0, 0.95);
  font-family: 'Courier New', monospace;
}

/* Code Matrix qui pleut en cascade */
body[data-theme="matrix"]::before {
  content: "01010101 11001100 10101010 01110111 00110011 10011001 01010101 11001100 10101010 01110111 00110011 10011001";
  position: fixed;
  inset: 0;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  line-height: 1.5;
  word-wrap: break-word;
  opacity: 0.15;
  animation: matrixRain 15s linear infinite;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 10px #00ff00;
  overflow: hidden;
}

@keyframes matrixRain {
  0% { transform: translateY(-100%); opacity: 0.15; }
  100% { transform: translateY(100%); opacity: 0.05; }
}

/* Flash d'effet Matrix */
body[data-theme="matrix"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(0, 255, 0, 0.1) 0%, transparent 50%);
  animation: matrixPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes matrixPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

body[data-theme="matrix"] .wrapper,
body[data-theme="matrix"] .scoreboard-left {
  border: 2px solid #00ff00;
  background: rgba(0, 20, 0, 0.92);
  box-shadow: 
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 40px rgba(0, 255, 0, 0.3),
    inset 0 0 20px rgba(0, 255, 0, 0.1);
  backdrop-filter: blur(5px);
  position: relative;
}

body[data-theme="matrix"] .wrapper::before {
  content: "WAKE UP, NEO...";
  position: absolute;
  top: -35px;
  left: 10px;
  color: #00ff00;
  font-size: 0.7rem;
  opacity: 0.6;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px #00ff00;
  animation: matrixBlink 2s ease-in-out infinite;
}

@keyframes matrixBlink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.2; }
}

body[data-theme="matrix"] h1,
body[data-theme="matrix"] h2,
body[data-theme="matrix"] p {
  color: #00ff00 !important;
  text-shadow: 
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 15px #00ff00;
  font-family: 'Courier New', monospace !important;
}

body[data-theme="matrix"] h1::before {
  content: ">>> ";
  animation: matrixCursor 1s step-end infinite;
}

@keyframes matrixCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

body[data-theme="matrix"] button {
  background: rgba(0, 255, 0, 0.15) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  text-transform: uppercase;
  box-shadow: 
    0 0 15px rgba(0, 255, 0, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body[data-theme="matrix"] button:hover {
  background: rgba(0, 255, 0, 0.25) !important;
  box-shadow: 
    0 0 25px rgba(0, 255, 0, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
  text-shadow: 0 0 10px #00ff00;
}

body[data-theme="matrix"] #scores-list li {
  border-bottom: 1px dashed #00ff00 !important;
  font-family: 'Courier New', monospace;
}

body[data-theme="matrix"] #scores-list li::before {
  content: "> ";
  color: #00ff00;
}

.matrix-char {
  position: fixed;
  color: #00ff00;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
  font-size: 20px;
  text-shadow: 0 0 8px #00ff00;
  pointer-events: none;
  z-index: 1;
  animation: matrixFall linear forwards;
  opacity: 0;
}

.matrix-char.bright {
  color: #ffffff;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}

@keyframes matrixFall {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}



* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  transition: background 0.5s ease, color 0.3s ease;
}

.wrapper > div[style*="background"] {
  background: var(--stats-bg) !important;
  color: var(--stats-text) !important;
}

.wrapper > div[style*="background"] * {
  color: var(--stats-text) !important;
}

#next-level-info {
  background: var(--stats-bg) !important;
  color: var(--stats-text) !important;
  border-left-color: var(--button-text) !important;
}

.wrapper {
  max-width: 40rem;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(6px);
  background-color: var(--wrapper-bg);
  border-radius: 2rem;
  box-shadow: var(--shadow);
  color: var(--text-color);
  transition: all 0.4s ease;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
}

p {
  font-size: 1.125rem;
  line-height: 1.5;
}

button {
  margin-top: 2rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.25);
}

button.active {
  background: linear-gradient(135deg, #ffde59, #ff7eb3);
  color: #4a004f;
}

.poop {
  position: fixed;
  top: -6rem;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  animation: fall 2.2s cubic-bezier(0.33, 0, 0.67, 1) forwards;
  pointer-events: none;
  filter: drop-shadow(0 0.75rem 1rem rgba(0, 0, 0, 0.35));
  transform: rotate(calc(var(--spin, 0) * 1deg));
}

.poop::after {
  content: "💩";
}

.poop.no-rotate {
  animation: fallNoRotate 2.2s cubic-bezier(0.33, 0, 0.67, 1) forwards;
}

@keyframes fall {
  0% {
    transform: translateY(-20vh) rotate(0deg);
    opacity: 0.9;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes fallNoRotate {
  0% {
    transform: translateY(-20vh);
    opacity: 0.9;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  top: -10vh;
  width: 0.5rem;
  height: 1.4rem;
  background: linear-gradient(135deg, #ff007b, #ffda2d);
  animation: sprinkle 2.4s ease-in forwards;
  pointer-events: none;
  transform: rotate(45deg);
}

@keyframes sprinkle {
  0% {
    opacity: 0.8;
    transform: translateY(-10vh) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) rotate(720deg);
  }
}

.perf-toggle-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 100;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 255, 0.95));
  color: #832161;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3), 0 0 20px rgba(131, 33, 97, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.perf-toggle-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35), 0 0 30px rgba(131, 33, 97, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
}

.theme-selector {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
}

.theme-toggle-btn {
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 255, 0.95));
  color: #832161;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3), 0 0 20px rgba(131, 33, 97, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.theme-toggle-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35), 0 0 30px rgba(131, 33, 97, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
}

.theme-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
}

.theme-dropdown.show {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  animation: slideDown 0.3s ease;
}

/* Scrollbar personnalisée pour dropdown */
.theme-dropdown::-webkit-scrollbar {
  width: 8px;
}

.theme-dropdown::-webkit-scrollbar-track {
  background: rgba(131, 33, 97, 0.05);
  border-radius: 4px;
}

.theme-dropdown::-webkit-scrollbar-thumb {
  background: rgba(131, 33, 97, 0.3);
  border-radius: 4px;
}

.theme-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(131, 33, 97, 0.5);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-dropdown button {
  padding: 1rem 0.75rem !important;
  margin: 0 !important;
  border: 2px solid rgba(131, 33, 97, 0.2);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  color: #832161;
  font-size: 0.9rem !important;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 80px;
}

.theme-dropdown button:hover {
  background: rgba(131, 33, 97, 0.1);
  border-color: rgba(131, 33, 97, 0.4);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(131, 33, 97, 0.2);
}

.theme-dropdown button.active {
  background: linear-gradient(135deg, rgba(131, 33, 97, 0.2), rgba(131, 33, 97, 0.1));
  border-color: #832161;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(131, 33, 97, 0.1);
}

/* Émojis et noms des thèmes */
.theme-dropdown button .theme-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.theme-dropdown button .theme-name {
  font-size: 0.85rem;
  display: block;
  line-height: 1.2;
}

.theme-dropdown button:hover .theme-emoji {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.theme-dropdown button.active .theme-emoji {
  animation: themePulse 1s ease-in-out infinite;
}

@keyframes themePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
  .theme-dropdown {
    width: 90vw;
    max-width: 360px;
    right: -24px;
  }
  
  .theme-dropdown.show {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    padding: 0.75rem;
  }
  
  .theme-dropdown button {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 70px;
  }
}

@media (max-width: 480px) {
  .theme-dropdown.show {
    grid-template-columns: 1fr;
  }
}

.scoreboard-left {
  position: fixed;
  top: 5rem;
  left: 1rem;
  z-index: 99;
  background: var(--scoreboard-bg);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  max-width: 18rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(8px);
  color: var(--text-color);
  transition: all 0.4s ease;
}

/* Mobile: reduce empty space, allow scrolling and tighten paddings */
@media (max-width: 768px) {
  body {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0.75rem;
  }

  .wrapper {
    margin: 0.5rem auto;
    padding: 1rem 1rem;
    max-width: 94vw;
    border-radius: 1rem;
  }

  button { margin-top: 1rem; }

  .scoreboard-left {
    top: 3.5rem;
    left: 0.5rem;
    max-width: 85vw;
    max-height: calc(100vh - 4rem);
  }

  .theme-selector, .perf-toggle-btn {
    top: 12px;
    right: 12px;
    left: auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .wrapper {
    padding: 0.75rem 0.75rem;
    border-radius: 0.8rem;
    /* Centre la fenêtre principale verticalement sur petits téléphones */
    margin: 6vh auto;
    max-height: calc(100vh - 12vh);
    overflow: visible;
  }

  h1 { margin-bottom: 0.5rem; }
  p { font-size: 1rem; }

  .scoreboard-left {
    top: 3rem;
    left: 0.5rem;
    max-width: 92vw;
    max-height: calc(100vh - 3.5rem);
  }
}

/* Stack scoreboard under content on small screens and disable flex centering
   This prevents large empty gutters and makes the page scroll naturally. */
@media (max-width: 768px) {
  body {
    display: block;
    align-items: initial;
    justify-content: initial;
    overflow: auto;
    padding-top: 0.6rem;
  }

  .wrapper {
    display: block;
    min-height: auto;
    margin: 0.5rem auto;
    width: 96vw;
    max-width: 96vw;
  }

  /* Make scoreboard flow with the document instead of being fixed */
  .scoreboard-left {
    position: static;
    margin: 0.75rem auto;
    width: 96vw;
    max-width: 96vw;
    max-height: 40vh;
    overflow-y: auto;
    left: auto;
    top: auto;
  }

  @media (max-width: 480px) {
    .scoreboard-left { max-height: 36vh; }
  }
}

/* Extra mobile fixes: ensure page doesn't force 100vh and remove bottom gutters */
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    min-height: auto !important;
  }

  body {
    padding-bottom: 0.5rem !important;
  }

  .wrapper {
    margin-bottom: 0.5rem !important;
    min-height: 0 !important;
  }

  /* small screens: make sure no element forces extra bottom space */
  .scoreboard-left, .theme-dropdown, .modal-content {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

.scoreboard-left h2 {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
  color: var(--scoreboard-text);
  text-align: center;
}

.scoreboard-left #update-timer {
  font-size: 0.7em;
  color: #666;
  display: block;
  margin-top: 0.25rem;
}

#scores-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#scores-list li {
  padding: 0.5rem;
  border-bottom: 1px solid var(--stats-border);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-color);
}

#scores-list li:last-child {
  border-bottom: none;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: var(--button-bg);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  max-width: 20rem;
  width: 90%;
}

#pseudo-input {
  padding: 0.5rem;
  margin: 1rem 0;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

input, textarea {
  user-select: text;
}

#submit-pseudo {
  padding: 0.5rem 1rem;
  background: var(--button-bg);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Admin styles */
#admin-modal .modal-content {
  max-width: 50rem;
  width: 90%;
  text-align: left;
}

.admin-section {
  margin-bottom: 2rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0.5rem;
}

.admin-section h3 {
  margin-top: 0;
  color: var(--text-color);
}

.admin-field {
  margin-bottom: 1rem;
}

.admin-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.admin-field input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.admin-field button {
  padding: 0.5rem 1rem;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.admin-field button:hover {
  background: #45a049;
}

#admin-users-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

#admin-users-table th, #admin-users-table td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

#admin-users-table th {
  background: rgba(0, 0, 0, 0.1);
}

#admin-users-table button {
  background: #f44336;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

#admin-users-table button:hover {
  background: #d32f2f;
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

.admin-tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
}

.admin-tab:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.05);
}

.admin-tab.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.admin-tab-content {
  padding: 1rem 0;
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

#whitelist-display {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}

.whitelist-group {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #4CAF50;
  border-radius: 0.25rem;
}

.whitelist-group h5 {
  margin: 0 0 0.75rem 0;
  color: #4CAF50;
  font-size: 1.1rem;
}

.whitelist-users {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.whitelist-user {
  background: white;
  padding: 0.4rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  color: #333;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========================================
   🌃 THÈME NEON CITY - Ville cyberpunk la nuit
   ======================================== */
body[data-theme="neon"] {
  --bg: linear-gradient(180deg, #0a0015 0%, #1a0033 30%, #2d1b4e 60%, #1a0033 100%);
  --text-color: #00ffff;
  --button-bg: rgba(255, 0, 255, 0.2);
  --button-text: #00ffff;
  --wrapper-bg: rgba(10, 0, 30, 0.85);
  --scoreboard-bg: rgba(10, 0, 30, 0.9);
}

body[data-theme="neon"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    repeating-linear-gradient(0deg, rgba(255, 0, 255, 0.03) 0px, transparent 2px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.03) 0px, transparent 2px, transparent 4px);
  animation: neonGrid 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes neonGrid {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 100px, 100px 0; }
}

body[data-theme="neon"]::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255, 0, 128, 0.1) 0%, transparent 30%);
  animation: neonPulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes neonPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
}

body[data-theme="neon"] .wrapper,
body[data-theme="neon"] .scoreboard-left {
  border: 2px solid;
  border-image: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff) 1;
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  animation: neonBorderPulse 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes neonBorderPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(255, 0, 255, 0.1); }
  50% { box-shadow: 0 0 30px rgba(255, 0, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(255, 0, 255, 0.2); }
}

body[data-theme="neon"] h1,
body[data-theme="neon"] h2 {
  color: #00ffff;
  text-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #ff00ff,
    0 0 40px #ff00ff;
  animation: neonTextFlicker 3s ease-in-out infinite;
}

@keyframes neonTextFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
  55% { opacity: 1; }
  57% { opacity: 0.9; }
  60% { opacity: 1; }
}

body[data-theme="neon"] button {
  background: rgba(255, 0, 255, 0.2) !important;
  border: 2px solid #ff00ff !important;
  color: #00ffff !important;
  text-shadow: 0 0 10px #00ffff;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.2);
  transition: all 0.3s ease;
}

body[data-theme="neon"] button:hover {
  background: rgba(0, 255, 255, 0.2) !important;
  border-color: #00ffff !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), inset 0 0 15px rgba(255, 0, 255, 0.3);
  transform: translateY(-2px);
}

/* ========================================
   🌌 THÈME AURORA BOREALIS - Aurores boréales magiques
   ======================================== */
body[data-theme="aurora"] {
  --bg: linear-gradient(180deg, #0a1628 0%, #1a2c4e 50%, #0a1628 100%);
  --text-color: #e0f7ff;
  --button-bg: rgba(100, 255, 200, 0.15);
  --button-text: #e0f7ff;
  --wrapper-bg: rgba(10, 20, 40, 0.8);
  --scoreboard-bg: rgba(10, 20, 40, 0.85);
}

body[data-theme="aurora"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(0, 255, 150, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 40%, rgba(100, 150, 255, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 60%, rgba(200, 100, 255, 0.25) 0%, transparent 45%);
  animation: auroraWave 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(60px);
}

@keyframes auroraWave {
  0%, 100% { 
    transform: translateY(0) scaleY(1);
    opacity: 0.6;
  }
  33% { 
    transform: translateY(-30px) scaleY(1.2);
    opacity: 0.8;
  }
  66% { 
    transform: translateY(20px) scaleY(0.9);
    opacity: 0.7;
  }
}

body[data-theme="aurora"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 3%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 3%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.01) 0%, transparent 2%);
  background-size: 200px 200px, 150px 150px, 100px 100px;
  animation: stars 50s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes stars {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200px); }
}

body[data-theme="aurora"] .wrapper,
body[data-theme="aurora"] .scoreboard-left {
  background: rgba(10, 20, 40, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(100, 200, 255, 0.3);
  box-shadow: 
    0 0 40px rgba(100, 200, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(100, 255, 200, 0.05);
}

body[data-theme="aurora"] h1,
body[data-theme="aurora"] h2 {
  background: linear-gradient(135deg, #00ff88, #64c8ff, #c864ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: auroraShimmer 8s ease-in-out infinite;
}

@keyframes auroraShimmer {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(60deg) brightness(1.2); }
}

body[data-theme="aurora"] button {
  background: linear-gradient(135deg, rgba(100, 255, 200, 0.15), rgba(100, 200, 255, 0.15)) !important;
  border: 1px solid rgba(100, 200, 255, 0.4) !important;
  color: #e0f7ff !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(100, 200, 255, 0.2);
}

body[data-theme="aurora"] button:hover {
  background: linear-gradient(135deg, rgba(100, 255, 200, 0.25), rgba(100, 200, 255, 0.25)) !important;
  box-shadow: 0 6px 25px rgba(100, 200, 255, 0.4);
  transform: translateY(-2px);
}

/* ========================================
   💻 THÈME HACKER TERMINAL - Terminal de hacker authentique
   ======================================== */
body[data-theme="terminal"] {
  --bg: #000000;
  --text-color: #00ff00;
  --button-bg: rgba(0, 255, 0, 0.1);
  --button-text: #00ff00;
  --wrapper-bg: rgba(0, 20, 0, 0.95);
  --scoreboard-bg: rgba(0, 20, 0, 0.98);
  font-family: 'Courier New', monospace;
}

body[data-theme="terminal"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 0, 0.03) 0px,
      transparent 1px,
      transparent 2px
    );
  animation: scanlines 10s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px); }
}

body[data-theme="terminal"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, transparent 60%, rgba(0, 255, 0, 0.05) 100%);
  animation: crtEffect 0.1s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes crtEffect {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

body[data-theme="terminal"] .wrapper,
body[data-theme="terminal"] .scoreboard-left {
  background: rgba(0, 20, 0, 0.95);
  border: 2px solid #00ff00;
  box-shadow: 
    0 0 10px rgba(0, 255, 0, 0.5),
    inset 0 0 20px rgba(0, 255, 0, 0.1);
  position: relative;
}

body[data-theme="terminal"] .wrapper::before,
body[data-theme="terminal"] .scoreboard-left::before {
  content: "> SYSTEM.ONLINE [OK]";
  position: absolute;
  top: -30px;
  left: 10px;
  color: #00ff00;
  font-size: 0.8rem;
  opacity: 0.7;
  font-family: 'Courier New', monospace;
}

body[data-theme="terminal"] h1::before {
  content: "root@pluie-de-cacas:~$ ";
  color: #00ff00;
  opacity: 0.8;
}

body[data-theme="terminal"] h2::before {
  content: ">>> ";
  color: #00ff00;
}

body[data-theme="terminal"] h1,
body[data-theme="terminal"] h2,
body[data-theme="terminal"] p {
  color: #00ff00 !important;
  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
  font-family: 'Courier New', monospace !important;
}

body[data-theme="terminal"] button {
  background: rgba(0, 255, 0, 0.1) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

body[data-theme="terminal"] button::before {
  content: "[ ";
}

body[data-theme="terminal"] button::after {
  content: " ]";
}

body[data-theme="terminal"] button:hover {
  background: rgba(0, 255, 0, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
  text-shadow: 0 0 10px #00ff00;
}

body[data-theme="terminal"] #scores-list li {
  border-bottom: 1px dashed #00ff00 !important;
  font-family: 'Courier New', monospace;
}

body[data-theme="terminal"] #scores-list li::before {
  content: "➤ ";
  color: #00ff00;
}

/* ========================================
   📜 THÈME ANCIENT SCROLL - Parchemin ancien
   ======================================== */
body[data-theme="paper"] {
  --bg: linear-gradient(180deg, #f4e8d0 0%, #e8d7b8 50%, #d4c4a8 100%);
  --text-color: #3d2817;
  --button-bg: rgba(139, 90, 43, 0.15);
  --button-text: #3d2817;
  --wrapper-bg: rgba(244, 232, 208, 0.95);
  --scoreboard-bg: rgba(232, 215, 184, 0.95);
  font-family: 'Georgia', 'Times New Roman', serif;
}

body[data-theme="paper"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 90, 43, 0.02) 2px,
      rgba(139, 90, 43, 0.02) 4px
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

body[data-theme="paper"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(139, 90, 43, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 90, 43, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

body[data-theme="paper"] .wrapper,
body[data-theme="paper"] .scoreboard-left {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent),
    linear-gradient(180deg, #f4e8d0, #e8d7b8);
  border: 3px double #8b5a2b;
  box-shadow: 
    inset 0 0 30px rgba(139, 90, 43, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(139, 90, 43, 0.3);
  position: relative;
  overflow: visible;
}

body[data-theme="paper"] .wrapper::before,
body[data-theme="paper"] .scoreboard-left::before {
  content: "⚜";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #8b5a2b;
  opacity: 0.6;
}

body[data-theme="paper"] .wrapper::after,
body[data-theme="paper"] .scoreboard-left::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(139, 90, 43, 0.2);
  pointer-events: none;
}

body[data-theme="paper"] h1,
body[data-theme="paper"] h2 {
  color: #3d2817 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 2px solid #8b5a2b;
  padding-bottom: 0.5rem;
}

body[data-theme="paper"] h1::first-letter,
body[data-theme="paper"] h2::first-letter {
  font-size: 2em;
  color: #8b5a2b;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
}

body[data-theme="paper"] p {
  color: #3d2817 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  line-height: 1.8;
  text-align: justify;
}

body[data-theme="paper"] button {
  background: rgba(139, 90, 43, 0.15) !important;
  border: 2px solid #8b5a2b !important;
  color: #3d2817 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

body[data-theme="paper"] button:hover {
  background: rgba(139, 90, 43, 0.25) !important;
  transform: translateY(-2px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.4);
}

/* ========================================
   🔮 THÈME HOLOGRAM - Interface holographique futuriste
   ======================================== */
body[data-theme="hologram"] {
  --bg: radial-gradient(ellipse at center, #0a1929 0%, #020a13 100%);
  --text-color: #00d4ff;
  --button-bg: rgba(0, 212, 255, 0.1);
  --button-text: #00d4ff;
  --wrapper-bg: transparent;
  --scoreboard-bg: transparent;
}

body[data-theme="hologram"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 212, 255, 0.02) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(0, 212, 255, 0.02) 1px,
      transparent 2px,
      transparent 4px
    );
  animation: holoGrid 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes holoGrid {
  0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(500px) rotateX(60deg) translateY(20px); }
}

body[data-theme="hologram"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
  animation: holoFlicker 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes holoFlicker {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
  52% { opacity: 0.8; }
  54% { opacity: 1; }
}

body[data-theme="hologram"] .wrapper,
body[data-theme="hologram"] .scoreboard-left {
  background: 
    linear-gradient(135deg, rgba(0, 212, 255, 0.05), transparent),
    rgba(10, 25, 41, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 0 30px rgba(0, 212, 255, 0.4),
    0 0 60px rgba(0, 212, 255, 0.2),
    inset 0 0 30px rgba(0, 212, 255, 0.1);
  position: relative;
  animation: holoGlow 3s ease-in-out infinite;
}

@keyframes holoGlow {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(0, 212, 255, 0.4),
      0 0 60px rgba(0, 212, 255, 0.2),
      inset 0 0 30px rgba(0, 212, 255, 0.1);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(0, 212, 255, 0.6),
      0 0 80px rgba(0, 212, 255, 0.3),
      inset 0 0 40px rgba(0, 212, 255, 0.15);
  }
}

body[data-theme="hologram"] .wrapper::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  animation: holoScan 4s linear infinite;
  pointer-events: none;
}

@keyframes holoScan {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

body[data-theme="hologram"] h1,
body[data-theme="hologram"] h2 {
  color: #00d4ff !important;
  text-shadow: 
    0 0 5px #00d4ff,
    0 0 10px #00d4ff,
    0 0 20px #00d4ff,
    0 0 40px #00d4ff;
  animation: holoTextGlitch 5s ease-in-out infinite;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
}

@keyframes holoTextGlitch {
  0%, 90%, 100% { opacity: 1; transform: translateX(0); }
  92% { opacity: 0.8; transform: translateX(-2px); }
  94% { opacity: 1; transform: translateX(2px); }
  96% { opacity: 0.9; transform: translateX(-1px); }
}

body[data-theme="hologram"] p {
  color: #00d4ff !important;
  opacity: 0.8;
  font-weight: 300;
}

body[data-theme="hologram"] button {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 1px solid rgba(0, 212, 255, 0.5) !important;
  color: #00d4ff !important;
  text-shadow: 0 0 10px #00d4ff;
  box-shadow: 
    0 0 20px rgba(0, 212, 255, 0.3),
    inset 0 0 10px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

body[data-theme="hologram"] button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  animation: holoButtonScan 3s linear infinite;
}

@keyframes holoButtonScan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

body[data-theme="hologram"] button:hover {
  background: rgba(0, 212, 255, 0.2) !important;
  box-shadow: 
    0 0 30px rgba(0, 212, 255, 0.6),
    inset 0 0 20px rgba(0, 212, 255, 0.2);
  transform: scale(1.05);
}

/* ========================================
   💥 THÈME COMIC BOOK - Style bande dessinée
   ======================================== */
body[data-theme="comic"] {
  --bg: 
    repeating-linear-gradient(45deg, #ffeb3b 0px, #ffeb3b 20px, #ffc107 20px, #ffc107 40px),
    #ffeb3b;
  --text-color: #000000;
  --button-bg: #ff5722;
  --button-text: #ffffff;
  --wrapper-bg: #ffffff;
  --scoreboard-bg: #ffffff;
  font-family: 'Impact', 'Arial Black', sans-serif;
}

body[data-theme="comic"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle, #000000 1px, transparent 1px),
    radial-gradient(circle, #000000 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
  animation: comicDots 20s linear infinite;
}

@keyframes comicDots {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}

body[data-theme="comic"]::after {
  content: "POW! 💥 BAM! 💥 BOOM!";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(8);
  font-size: 4rem;
  font-family: 'Impact', sans-serif;
  color: rgba(255, 87, 34, 0.05);
  font-weight: bold;
  pointer-events: none;
  z-index: 1;
  animation: comicZoom 10s ease-in-out infinite;
}

@keyframes comicZoom {
  0%, 100% { transform: translate(-50%, -50%) scale(8) rotate(-5deg); opacity: 0.03; }
  50% { transform: translate(-50%, -50%) scale(10) rotate(5deg); opacity: 0.08; }
}

body[data-theme="comic"] .wrapper,
body[data-theme="comic"] .scoreboard-left {
  background: #ffffff;
  border: 6px solid #000000;
  box-shadow: 
    8px 8px 0 #000000,
    0 0 0 10px #ffffff,
    0 0 0 16px #000000;
  position: relative;
  transform: rotate(-0.5deg);
}

body[data-theme="comic"] .wrapper:hover,
body[data-theme="comic"] .scoreboard-left:hover {
  animation: comicShake 0.5s ease-in-out;
}

@keyframes comicShake {
  0%, 100% { transform: rotate(-0.5deg) translateX(0); }
  25% { transform: rotate(0.5deg) translateX(-5px); }
  75% { transform: rotate(-1deg) translateX(5px); }
}

body[data-theme="comic"] h1,
body[data-theme="comic"] h2 {
  color: #000000 !important;
  font-family: 'Impact', 'Arial Black', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 
    3px 3px 0 #ff5722,
    6px 6px 0 #ffc107,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
  transform: rotate(-2deg);
  position: relative;
}

body[data-theme="comic"] h1::after {
  content: "💥";
  position: absolute;
  right: -40px;
  top: -10px;
  font-size: 2rem;
  animation: comicBurst 1s ease-in-out infinite;
}

@keyframes comicBurst {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

body[data-theme="comic"] p {
  color: #000000 !important;
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  font-weight: bold;
  background: rgba(255, 235, 59, 0.3);
  padding: 0.5rem;
  border: 3px solid #000000;
  border-radius: 10px;
  position: relative;
}

body[data-theme="comic"] p::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #000000;
}

body[data-theme="comic"] p::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 18px solid rgba(255, 235, 59, 0.3);
}

body[data-theme="comic"] button {
  background: #ff5722 !important;
  border: 4px solid #000000 !important;
  color: #ffffff !important;
  font-family: 'Impact', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.2rem !important;
  box-shadow: 
    4px 4px 0 #000000,
    0 0 0 6px #ff5722,
    0 0 0 10px #000000;
  transform: rotate(-1deg);
  transition: all 0.1s ease;
}

body[data-theme="comic"] button:hover {
  background: #ffc107 !important;
  transform: rotate(1deg) scale(1.1);
  animation: comicPop 0.3s ease-in-out;
}

@keyframes comicPop {
  0%, 100% { transform: rotate(1deg) scale(1.1); }
  50% { transform: rotate(1deg) scale(1.15); }
}

body[data-theme="comic"] button::before {
  content: "★";
  margin-right: 0.5rem;
}

body[data-theme="comic"] button::after {
  content: "★";
  margin-left: 0.5rem;
}

body[data-theme="comic"] #scores-list li {
  border: 3px solid #000000 !important;
  background: #ffffff !important;
  margin: 0.5rem 0 !important;
  padding: 0.75rem !important;
  box-shadow: 3px 3px 0 #000000;
  transform: rotate(-0.5deg);
}

body[data-theme="comic"] #scores-list li:nth-child(even) {
  transform: rotate(0.5deg);
  background: #ffeb3b !important;
}

/* ========================================
   📱 RESPONSIVE DESIGN - Tous les appareils
   ======================================== */

/* Organisation propre des boutons sur desktop */
@media (min-width: 769px) {
  /* Boutique et Inventaire restent en bas à droite sur desktop */
  #open-shop-btn,
  #open-inventory-btn {
    position: fixed;
    bottom: 24px;
    top: auto;
    right: 24px;
    left: auto;
    display: inline-block;
  }
  
  #open-shop-btn {
    right: 200px;
  }
  
  #open-inventory-btn {
    right: 24px;
  }
}

/* Tablettes et petits ordinateurs (≤ 1024px) */
@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
  
  .wrapper {
    max-width: 90vw;
    padding: 1.5rem;
    margin: 2rem auto;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .scoreboard-left {
    max-width: 16rem;
    padding: 0.8rem;
    top: 4rem;
  }
  
  .perf-toggle-btn,
  .theme-selector button {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
  }
}


  /* Ensure mobile popup/menu opens near the bottom-right button (mobile only) */
  .mobile-menu,
  #mobile-theme-panel {
    right: calc(env(safe-area-inset-right, 0px) + 0.9rem) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.6rem) !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    min-width: 160px !important;
    max-width: 86vw !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22) !important;
    background: rgba(255,255,255,0.98) !important;
    z-index: 1300 !important;
  }

  /* Only show popups when they have the .show class (JS toggles it) */
  .mobile-menu.show,
  #mobile-theme-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Small offset if the menu would go off-screen on very small widths */
  @media (max-width: 360px) {
    .mobile-menu, #mobile-theme-panel { right: calc(env(safe-area-inset-right,0px) + 0.5rem) !important; bottom: calc(env(safe-area-inset-bottom,0px) + 5rem) !important; }
  }
/* ========================================
   📱 RESPONSIVE MOBILE SIMPLE ET EFFICACE
   ======================================== */

/* Tablettes (≤ 1024px) */
@media (max-width: 1024px) {
  body {
    font-size: 15px;
  }
  
  .wrapper {
    max-width: 90vw;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
}

/* Mobile (≤ 768px) - MINIMALISTE */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  /* TOUT MASQUÉ SAUF LE JEU */
  .perf-toggle-btn,
  .theme-selector {
    display: none !important;
  }
  
  /* WRAPPER PLEIN ÉCRAN */
  .wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 1.2rem 1rem;
    padding-bottom: 0.75rem;
    min-height: auto;
    box-sizing: border-box;
  }

  /* Hide scoreboard by default on mobile; menu will toggle it via classes */
  #scoreboard {
    display: none !important;
  }

  /* When opened from mobile menu show as overlay/drawer */
  #scoreboard.mobile-overlay-visible,
  #scoreboard.mobile-drawer {
    display: block !important;
    position: fixed !important;
    left: 6% !important;
    right: 6% !important;
    top: calc(env(safe-area-inset-top, 0px) + 3.6rem) !important;
    z-index: 999 !important;
    max-height: 68vh !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.98) !important;
  }
  
  .wrapper h1 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .wrapper > p {
    text-align: center;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  /* MENU HAMBURGER EN HAUT À DROITE (removed) */
  
  /* BARRE D'ACTION EN BAS */
  #open-shop-btn,
  #open-inventory-btn {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
    width: calc(50% - 1.5rem) !important;
    padding: 1rem 0.8rem !important;
    font-size: 1rem !important;
    border-radius: 1.2rem !important;
    z-index: 100 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
  }
  
  #open-shop-btn {
    left: 1rem !important;
  }
  
  #open-inventory-btn {
    right: 1rem !important;
  }
  
  #open-shop-btn:active,
  #open-inventory-btn:active {
    transform: scale(0.95);
  }
  
  #inventory-badge {
    position: static !important;
    margin-left: 0.3rem;
  }
  
  /* Adaptations thèmes */
  body::before {
    font-size: 3rem !important;
  }
  
  body[data-theme="dark"]::after {
    display: none !important;
  }
  
  body[data-theme="dvd"]::before {
    font-size: 3rem !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  #powerups-shop,
  #powerups-inventory {
    max-width: 95vw !important;
    max-height: 80vh !important;
    padding: 1.5rem !important;
  }
}

/* Petits téléphones (≤ 480px) */

/* Petits téléphones (≤ 480px) */
@media (max-width: 480px) {
  body {
    font-size: 13px;
    gap: 0.5rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.2rem);
  }
  
  html::after {
    left: 0.55rem;
    right: 0.55rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.35rem);
    height: 3.8rem;
    border-radius: 1.35rem;
  }
  
  .perf-toggle-btn {
    width: calc(100% - 1.2rem);
    margin: 0.9rem auto 0.55rem !important;
    padding: 0.75rem 0.9rem !important;
  }
  
  .perf-toggle-btn::before {
    top: -1.45rem;
  }
  
  .theme-selector {
    width: calc(100% - 1.2rem);
    margin-bottom: 0.75rem !important;
  }
  
  .theme-selector button {
    padding: 0.78rem 0.85rem !important;
    font-size: 0.9rem !important;
  }
  
  .theme-dropdown.show {
    grid-template-columns: 1fr;
  }
  
  .wrapper {
    width: calc(100% - 1.2rem);
    padding: 1.3rem 0.9rem;
  }
  
  .wrapper h1 {
    font-size: 1.75rem;
  }
  
  #scores-list {
    max-height: 170px !important;
  }
  
  #open-shop-btn,
  #open-inventory-btn {
    width: calc(50% - 1.1rem);
    padding: 0.75rem 0.4rem !important;
    font-size: 0.85rem !important;
  }
  
  #inventory-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
  }
  
  #powerups-shop,
  #powerups-inventory {
    padding: 1rem !important;
  }
}

/* Très petits écrans (≤ 360px) */
@media (max-width: 360px) {
  body {
    font-size: 12px;
    gap: 0.45rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4rem);
  }
  
  html::after {
    left: 0.45rem;
    right: 0.45rem;
    height: 3.5rem;
  }
  
  .perf-toggle-btn {
    width: calc(100% - 1rem);
    padding: 0.68rem 0.8rem !important;
    margin: 0.8rem auto 0.5rem !important;
  }
  
  .perf-toggle-btn::before {
    top: -1.35rem;
  }
  
  .theme-selector {
    width: calc(100% - 1rem);
    margin-bottom: 0.65rem !important;
  }
  
  .theme-selector button {
    font-size: 0.85rem !important;
    padding: 0.7rem 0.75rem !important;
  }
  
  .wrapper {
    width: calc(100% - 1rem);
    padding: 1.1rem 0.75rem;
  }
  
  .wrapper h1 {
    font-size: 1.6rem;
  }
  
  #scores-list {
    max-height: 150px !important;
  }
  
  #open-shop-btn,
  #open-inventory-btn {
    width: calc(50% - 1rem);
    padding: 0.65rem 0.3rem !important;
    font-size: 0.8rem !important;
  }
  
  #inventory-badge {
    width: 16px !important;
    height: 16px !important;
    font-size: 0.65rem !important;
  }
}

/* Mode paysage mobile */
@media (max-height: 500px) and (orientation: landscape) {
  #open-shop-btn,
  #open-inventory-btn {
    padding: 0.55rem 0.4rem !important;
    font-size: 0.8rem !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
  }
  
  .wrapper {
    padding-bottom: 5rem;
  }
}

/* Landscape on phones: improve fit and visibility */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce large paddings and fonts to fit horizontally */
  body {
    padding: 0.5rem !important;
    font-size: 13px !important;
  }

  .wrapper {
    padding: 0.8rem !important;
    margin: 0.5rem auto !important;
    max-width: calc(100vw - 2rem) !important;
    min-height: auto !important;
  }

  .wrapper h1 {
    font-size: 1.6rem !important;
  }

  /* Make scoreboard more compact and fixed to left side with scroll */
  .scoreboard-left {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    left: 1rem !important;
    z-index: 999 !important;
    max-height: calc(100vh - 2.5rem) !important;
    overflow-y: auto !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    padding: 0.6rem !important;
    border-radius: 0.75rem !important;
  }

  /* Mobile menu and theme panel adjustments */
  .mobile-menu {
    right: 8px !important;
    top: 56px !important;
    min-width: 180px !important;
    max-width: calc(100vw - 3rem) !important;
  }

  .mobile-menu-btn {
    top: 8px !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #mobile-theme-panel {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    top: 56px !important;
    min-width: 220px !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Reduce long paragraphs to avoid overflow */
  .wrapper > p {
    display: block;
    max-height: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ensure bottom action bar doesn't overlap content too much */
  #open-shop-btn, #open-inventory-btn {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.85rem !important;
  }
}

/* Desktop - Scoreboard et boutons normaux */
@media (min-width: 769px) {
  #open-shop-btn,
  #open-inventory-btn {
    bottom: 24px;
    top: auto;
  }
  
  #open-shop-btn {
    right: 200px;
    left: auto;
  }
  
  #open-inventory-btn {
    right: 24px;
    left: auto;
  }
  
  .scoreboard-left {
    display: block !important;
  }
}

/* Adaptation dropdown thèmes mobile */  
@media (max-width: 768px) {
  .theme-dropdown button {
    padding: 0.6rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-height: 60px;
  }
  
  .theme-emoji {
    font-size: 1.5rem !important;
  }
  
  .theme-name {
    font-size: 0.7rem !important;
  }
  
  /* DVD logo plus petit sur mobile */
  body[data-theme="dvd"]::before {
    font-size: 3rem !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  @keyframes dvdBounceX {
    0% { left: 0; }
    25% { left: calc(100% - 180px); }
    50% { left: 0; }
    75% { left: calc(100% - 180px); }
    100% { left: 0; }
  }
  
  @keyframes dvdBounceY {
    0% { top: 0; }
    20% { top: calc(100% - 100px); }
    40% { top: 0; }
    60% { top: calc(100% - 100px); }
    80% { top: 0; }
    100% { top: 0; }
  }
}

/* Adaptation pour grands écrans */
@media (min-width: 1920px) {
  body {
    font-size: 18px;
  }
  
  .wrapper {
    max-width: 1200px;
    padding: 2.5rem;
  }
  
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .scoreboard-left {
    max-width: 22rem;
    padding: 1.5rem;
    font-size: 1.1rem;
  }
  
  body[data-theme="dvd"]::before {
    font-size: 6rem !important;
    padding: 2rem 4rem !important;
  }
}

/* Suppression du code dupliqué ancien */

/* ========================================
   📱 RESPONSIVE DESIGN POUR MOBILE
   ======================================== */

/* Tablettes (≤ 1024px) */
@media (max-width: 1024px) {
  .wrapper {
    max-width: 35rem;
    padding: 2rem 1.5rem;
  }
  
  .scoreboard-left {
    max-width: 16rem;
    top: 4rem;
    left: 0.5rem;
  }
  
  .perf-toggle-btn,
  .theme-selector {
    top: 16px;
  }
  
  .theme-dropdown {
    width: 380px;
  }
}

/* Petits écrans / Tablettes (≤ 768px) */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .wrapper {
    max-width: 100%;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
    order: 1;
  }
  
  h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: 1rem;
    line-height: 1.4;
  }
  
  button {
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .scoreboard-left {
    position: static;
    max-width: 100%;
    margin-top: 2rem;
    order: 2;
    max-height: 50vh;
  }
  
  .scoreboard-left h2 {
    font-size: 1.1rem;
  }
  
  #scores-list li {
    font-size: 0.85rem;
    padding: 0.4rem;
  }
  
  .perf-toggle-btn {
    position: static;
    margin-bottom: 1rem;
    order: 3;
    width: 100%;
    max-width: 200px;
  }
  
  .theme-selector {
    position: static;
    margin-bottom: 1rem;
    order: 4;
    width: 100%;
    max-width: 200px;
  }
  
  .theme-dropdown {
    width: 100%;
    max-width: none;
    position: static;
    margin-top: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .theme-dropdown button {
    min-height: 60px;
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  .theme-dropdown button .theme-emoji {
    font-size: 1.5rem;
  }
  
  .theme-dropdown button .theme-name {
    font-size: 0.7rem;
  }
  
  .modal-content {
    max-width: 95%;
    padding: 1.5rem;
  }
  
  #admin-modal .modal-content {
    max-width: 98%;
    width: 98%;
  }
  
  .admin-tabs {
    flex-wrap: wrap;
  }
  
  .admin-tabs button {
    flex: 1 1 auto;
    min-width: 120px;
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  
  #admin-users-table {
    font-size: 0.8rem;
  }
  
  #admin-users-table th,
  #admin-users-table td {
    padding: 0.3rem;
  }
  
  .admin-field {
    margin-bottom: 0.75rem;
  }
  
  .admin-field input,
  .admin-field select {
    padding: 0.4rem;
    font-size: 0.9rem;
  }
  
  .admin-field button {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
  }
}

/* Téléphones (≤ 480px) */
@media (max-width: 480px) {
  body {
    padding: 0.5rem;
  }
  
  .wrapper {
    padding: 1rem 0.75rem;
    border-radius: 1rem;
  }
  
  h1 {
    font-size: clamp(1.8rem, 10vw, 2.5rem);
  }
  
  p {
    font-size: 0.9rem;
  }
  
  button {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    margin-top: 1rem;
  }
  
  .poop {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
  
  .scoreboard-left {
    padding: 0.75rem;
    margin-top: 1.5rem;
    max-height: 40vh;
  }
  
  .scoreboard-left h2 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  #scores-list li {
    font-size: 0.8rem;
    padding: 0.3rem;
  }
  
  .perf-toggle-btn,
  .theme-selector {
    max-width: 100%;
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  .theme-dropdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
    padding: 0.5rem;
  }
  
  .theme-dropdown button {
    min-height: 50px;
    padding: 0.4rem !important;
    font-size: 0.7rem !important;
  }
  
  .theme-dropdown button .theme-emoji {
    font-size: 1.2rem;
  }
  
  .theme-dropdown button .theme-name {
    font-size: 0.65rem;
  }
  
  .modal-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  #pseudo-input,
  #code-input {
    padding: 0.6rem;
    font-size: 1rem;
  }
  
  #submit-pseudo {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
  }
  
  #admin-modal .modal-content {
    padding: 1rem;
  }
  
  .admin-tabs button {
    min-width: 100px;
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  
  #admin-users-table {
    font-size: 0.75rem;
  }
  
  #admin-users-table th,
  #admin-users-table td {
    padding: 0.25rem;
  }
  
  .admin-field input,
  .admin-field select {
    padding: 0.35rem;
    font-size: 0.85rem;
  }
  
  .admin-field button {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }
  
  /* Ajustements pour les thèmes spéciaux sur mobile */
  body[data-theme="dvd"]::before {
    font-size: 3rem !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  body[data-theme="matrix"] .wrapper::before {
    font-size: 0.6rem;
    top: -30px;
  }
  
  /* Masquer complètement les boutons flottants originaux sur mobile */
  @media (max-width: 768px) {
    .perf-toggle-btn,
    .theme-selector,
    .theme-toggle-btn {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }
  
  /* Menu hamburger pour mobile */
  .mobile-menu-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(131, 33, 97, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
  }

  .mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
  }

  .mobile-menu-btn span {
    width: 24px;
    height: 3px;
    background: #832161;
    transition: all 0.3s ease;
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  .mobile-menu {
    position: fixed;
    top: 80px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 999;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }

  .mobile-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-menu button {
    width: 100%;
    margin-bottom: 8px;
    padding: 12px;
    background: rgba(131, 33, 97, 0.1);
    border: 1px solid rgba(131, 33, 97, 0.2);
    border-radius: 8px;
    color: #832161;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-menu button:hover {
    background: rgba(131, 33, 97, 0.2);
  }

  .mobile-menu button:last-child {
    margin-bottom: 0;
  }
 

  /* Masquer certains contrôles desktop sur mobile pour éviter les doublons */
  @media (max-width: 768px) {
    .theme-selector,
    .perf-toggle-btn,
    .theme-toggle-btn,
    #theme-dropdown {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }

  /* Desktop-only wrapper: hidden by default, shown on wide screens */
  .desktop-only {
    display: none !important;
  }

  /* When we need to show the scoreboard as a mobile overlay */
  .mobile-overlay-visible {
    display: block !important;
  }

}

/* Masquer le menu mobile sur desktop - moved breakpoint to larger widths */
@media (min-width: 1025px) {
  .mobile-menu-btn,
  .mobile-menu,
  #mobile-menu-overlay {
    display: none !important;
  }
  /* show desktop-only controls only on wide screens (desktop) */
  .desktop-only {
    display: block !important;
  }
}

/* Hide desktop-only controls on smaller screens (phones/tablets), incl. landscape */
@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
}

/* Special handling for landscape on small devices to avoid overlapping UI */
@media (max-width: 1024px) and (orientation: landscape) {
  .desktop-only { display: none !important; }
  .perf-toggle-btn, .theme-selector { display: none !important; }
  .scoreboard-left {
    position: fixed !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    z-index: 999 !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    padding: 0.6rem !important;
    border-radius: 0.6rem !important;
  }
  .wrapper { padding-top: 5.25rem !important; }
}

/* Mobile scoreboard drawer and overlay rules */
.mobile-overlay-visible {
  display: block !important;
}

/* default mobile-drawer (portrait): center small overlay */
.mobile-drawer {
  position: fixed !important;
  left: 8% !important;
  right: 8% !important;
  top: 4rem !important;
  z-index: 999 !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.98) !important;
}

/* landscape: make drawer a left-side panel to avoid covering header */
@media (max-width: 1024px) and (orientation: landscape) {
  .mobile-drawer {
    left: 0.6rem !important;
    top: 0.6rem !important;
    right: auto !important;
    width: 300px !important;
    max-width: 46% !important;
    height: calc(100vh - 1.2rem) !important;
    overflow-y: auto !important;
  }

  /* move mobile menu button to bottom-right to avoid overlap */
  .mobile-menu-btn {
    top: auto !important;
    right: 1rem !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}

/* Très petits écrans (≤ 360px) */
@media (max-width: 360px) {
  .wrapper {
    padding: 0.75rem 0.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  p {
    font-size: 0.85rem;
  }
  
  button {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .scoreboard-left {
    padding: 0.5rem;
    max-height: 35vh;
  }
  
  .theme-dropdown {
    width: 250px;
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 0.75rem;
  }
  
  #admin-modal .modal-content {
    padding: 0.5rem;
  }
  
  .admin-tabs button {
    min-width: 80px;
    font-size: 0.75rem;
  }
}

/* FINAL MOBILE OVERRIDES - ensure scoreboard hidden and content uses full phone space */
@media (max-width: 768px) {
  /* Hide scoreboard in all mobile contexts unless explicitly opened by menu JS */
  #scoreboard { display: none !important; visibility: hidden !important; pointer-events: none !important; }

  /* Make wrapper occupy most of the viewport and sit near top */
  .wrapper {
    margin: 0.4rem auto !important;
    padding: 1rem 0.9rem !important;
    width: 96vw !important;
    max-width: 96vw !important;
    border-radius: 12px !important;
  }

  /* Reduce top spacing of title so more content fits above the fold */
  .wrapper h1 { margin-top: 0.2rem !important; margin-bottom: 0.6rem !important; }

  /* Place the mobile menu button bottom-right to avoid covering header/content */
  .mobile-menu-btn {
    position: fixed !important;
    right: calc(env(safe-area-inset-right, 0px) + 0.9rem) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem) !important;
    top: auto !important;
    left: auto !important;
    z-index: 1200 !important;
  }

  /* Place content near the top on mobile to avoid large bottom gaps */
  body {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) calc(env(safe-area-inset-right, 0px) + 0.6rem) calc(env(safe-area-inset-bottom, 0px) + 0.6rem) calc(env(safe-area-inset-left, 0px) + 0.6rem) !important;
    overflow: auto;
  }

  .wrapper {
    width: 94vw !important;
    max-width: 420px !important;
    margin: 0.4rem auto !important;
    padding: 1rem 0.9rem !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Move Mode Cascade into a compact full-width button under the wrapper content */
  #auto-mode {
    display: block !important;
    width: 70% !important;
    max-width: 320px !important;
    margin: 1rem auto 0.75rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }

  /* Make sure auxiliary info doesn't create large bottom gaps */
  .wrapper > p, .wrapper .small-text { margin-bottom: 0.5rem !important; }

  /* If scoreboard is explicitly opened, show as full-width sheet anchored under header */
  #scoreboard.mobile-overlay-visible,
  #scoreboard.mobile-drawer {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 4% !important;
    right: 4% !important;
    top: calc(env(safe-area-inset-top, 0px) + 3.4rem) !important;
    z-index: 1200 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  }
}