/* ═══════════════════════════════════════════════════════
   TITOUE QUIZ — DESIGN MODERNE AVEC MODE CLAIR/SOMBRE
   ═══════════════════════════════════════════════════════ */

/* ─── IMPORT FONT ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ─── MODE CLAIR (par défaut) ────────────────────────────────────────────── */
:root {
  --bg:    #f0f4f8;
  --bg2:   #e2e8f0;
  --bg3:   #cbd5e1;
  --card:  rgba(255, 255, 255, 0.9);
  --card-hover: rgba(255, 255, 255, 1);
  --line:  rgba(139, 92, 246, 0.2);
  --text:  #1e293b;
  --muted: #64748b;
  --accent:  #8b5cf6;
  --accent2: #a78bfa;
  --accent3: #7c3aed;
  --good: #10b981;
  --bad:  #ef4444;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glow: 0 0 20px rgba(139, 92, 246, 0.3);
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
}

/* Forcer le texte foncé en mode clair (pas sombre) */
:root:not([data-mode="dark"]) {
  --text: #1e293b !important;
  --muted: #64748b !important;
}

/* ─── MODE SOMBRE ─────────────────────────────────────────────────────────── */
[data-mode="dark"] {
  --bg:    #0c1428;
  --bg2:   #151d35;
  --bg3:   #1e2842;
  --card:  rgba(21, 29, 53, 0.8);
  --card-hover: rgba(21, 29, 53, 0.95);
  --line:  rgba(139, 92, 246, 0.3);
  --text:  #f1f5f9;
  --muted: #94a3b8;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Thèmes de couleurs - UNIQUEMENT en mode clair */
:root[data-theme="violet"]:not([data-mode="dark"]) {
  --bg: #e9d5ff; --bg2: #ddd6fe; --bg3: #c4b5fd;
}
:root[data-theme="emeraude"]:not([data-mode="dark"]) {
  --bg: #a7f3d0; --bg2: #6ee7b7; --bg3: #34d399;
}
:root[data-theme="ocean"]:not([data-mode="dark"]) {
  --bg: #bfdbfe; --bg2: #93c5fd; --bg3: #60a5fa;
}
:root[data-theme="rose"]:not([data-mode="dark"]) {
  --bg: #fbcfe8; --bg2: #f9a8d4; --bg3: #f472b6;
}
:root[data-theme="or"]:not([data-mode="dark"]) {
  --bg: #fff4c6; --bg2: #ffe8a3; --bg3: #f8d36b;
}
:root[data-theme="rouge"]:not([data-mode="dark"]) {
  --bg: #fecaca; --bg2: #fca5a5; --bg3: #f87171;
}
:root[data-theme="menthe"]:not([data-mode="dark"]) {
  --bg: #99f6e4; --bg2: #5eead4; --bg3: #2dd4bf;
}
:root[data-theme="indigo"]:not([data-mode="dark"]) {
  --bg: #c7d2fe; --bg2: #a5b4fc; --bg3: #818cf8;
}
:root[data-theme="soleil"]:not([data-mode="dark"]) {
  --bg: #fff0bd; --bg2: #ffe1a1; --bg3: #ffd166;
}
:root[data-theme="lavande"]:not([data-mode="dark"]) {
  --bg: #e9d5ff; --bg2: #d8b4fe; --bg3: #c084fc;
}
:root[data-theme="peche"]:not([data-mode="dark"]) {
  --bg: #fecdd3; --bg2: #fda4af; --bg3: #fb7185;
}
:root[data-theme="ciel"]:not([data-mode="dark"]) {
  --bg: #bae6fd; --bg2: #7dd3fc; --bg3: #38bdf8;
}
:root[data-theme="pistache"]:not([data-mode="dark"]) {
  --bg: #d9f99d; --bg2: #bef264; --bg3: #a3e635;
}
:root[data-theme="corail"]:not([data-mode="dark"]) {
  --bg: #fecdd3; --bg2: #fda4af; --bg3: #fb7185;
}
:root[data-theme="minuit"]:not([data-mode="dark"]) {
  --bg: #c7d2fe; --bg2: #a5b4fc; --bg3: #818cf8;
}
:root[data-theme="aurore"]:not([data-mode="dark"]) {
  --bg: #fbcfe8; --bg2: #f9a8d4; --bg3: #f472b6;
}

/* Couleurs d'accent pour tous les thèmes (mode clair ET sombre) */
[data-theme="violet"] {
  --accent: #8b5cf6; --accent2: #a78bfa; --accent3: #7c3aed;
}
[data-theme="emeraude"] {
  --accent: #10b981; --accent2: #34d399; --accent3: #059669;
}
[data-theme="ocean"] {
  --accent: #3b82f6; --accent2: #60a5fa; --accent3: #2563eb;
}
[data-theme="rose"] {
  --accent: #ec4899; --accent2: #f472b6; --accent3: #db2777;
}
[data-theme="or"] {
  --accent: #e8c65a; --accent2: #ffe08a; --accent3: #b9912f;
}
[data-theme="rouge"] {
  --accent: #ef4444; --accent2: #f87171; --accent3: #dc2626;
}
[data-theme="menthe"] {
  --accent: #14b8a6; --accent2: #2dd4bf; --accent3: #0d9488;
}
[data-theme="indigo"] {
  --accent: #6366f1; --accent2: #818cf8; --accent3: #4f46e5;
}
[data-theme="soleil"] {
  --accent: #ffd166; --accent2: #ffe6a7; --accent3: #d8a93e;
}
[data-theme="lavande"] {
  --accent: #a855f7; --accent2: #c084fc; --accent3: #9333ea;
}
[data-theme="peche"] {
  --accent: #fb7185; --accent2: #fda4af; --accent3: #f43f5e;
}
[data-theme="ciel"] {
  --accent: #0ea5e9; --accent2: #38bdf8; --accent3: #0284c7;
}
[data-theme="pistache"] {
  --accent: #84cc16; --accent2: #a3e635; --accent3: #65a30d;
}
[data-theme="corail"] {
  --accent: #f43f5e; --accent2: #fb7185; --accent3: #e11d48;
}
[data-theme="minuit"] {
  --accent: #6366f1; --accent2: #818cf8; --accent3: #4f46e5;
}
[data-theme="aurore"] {
  --accent: #ec4899; --accent2: #f472b6; --accent3: #db2777;
}

/* Appliquer les couleurs aux cartes mode */
[data-theme="violet"] .solo-card { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
[data-theme="emeraude"] .solo-card { background: linear-gradient(135deg, #10b981, #34d399); }
[data-theme="ocean"] .solo-card { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
[data-theme="rose"] .solo-card { background: linear-gradient(135deg, #ec4899, #f472b6); }
[data-theme="or"] .solo-card { background: linear-gradient(135deg, #e8c65a, #ffe08a); }
[data-theme="rouge"] .solo-card { background: linear-gradient(135deg, #ef4444, #f87171); }
[data-theme="menthe"] .solo-card { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
[data-theme="indigo"] .solo-card { background: linear-gradient(135deg, #6366f1, #818cf8); }
[data-theme="soleil"] .solo-card { background: linear-gradient(135deg, #ffd166, #ffe6a7); }
[data-theme="lavande"] .solo-card { background: linear-gradient(135deg, #a855f7, #c084fc); }
[data-theme="peche"] .solo-card { background: linear-gradient(135deg, #fb7185, #fda4af); }
[data-theme="ciel"] .solo-card { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
[data-theme="pistache"] .solo-card { background: linear-gradient(135deg, #84cc16, #a3e635); }
[data-theme="corail"] .solo-card { background: linear-gradient(135deg, #f43f5e, #fb7185); }
[data-theme="minuit"] .solo-card { background: linear-gradient(135deg, #6366f1, #818cf8); }
[data-theme="aurore"] .solo-card { background: linear-gradient(135deg, #ec4899, #f472b6); }

[data-theme="violet"] .multi-card { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
[data-theme="emeraude"] .multi-card { background: linear-gradient(135deg, #059669, #10b981); }
[data-theme="ocean"] .multi-card { background: linear-gradient(135deg, #2563eb, #3b82f6); }
[data-theme="rose"] .multi-card { background: linear-gradient(135deg, #db2777, #ec4899); }
[data-theme="or"] .multi-card { background: linear-gradient(135deg, #b9912f, #e8c65a); }
[data-theme="rouge"] .multi-card { background: linear-gradient(135deg, #dc2626, #ef4444); }
[data-theme="menthe"] .multi-card { background: linear-gradient(135deg, #0d9488, #14b8a6); }
[data-theme="indigo"] .multi-card { background: linear-gradient(135deg, #4f46e5, #6366f1); }
[data-theme="soleil"] .multi-card { background: linear-gradient(135deg, #d8a93e, #ffd166); }
[data-theme="lavande"] .multi-card { background: linear-gradient(135deg, #9333ea, #a855f7); }
[data-theme="peche"] .multi-card { background: linear-gradient(135deg, #f43f5e, #fb7185); }
[data-theme="ciel"] .multi-card { background: linear-gradient(135deg, #0284c7, #0ea5e9); }
[data-theme="pistache"] .multi-card { background: linear-gradient(135deg, #65a30d, #84cc16); }
[data-theme="corail"] .multi-card { background: linear-gradient(135deg, #e11d48, #f43f5e); }
[data-theme="minuit"] .multi-card { background: linear-gradient(135deg, #4f46e5, #6366f1); }
[data-theme="aurore"] .multi-card { background: linear-gradient(135deg, #db2777, #ec4899); }

/* ─── BASE ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background .5s ease, color .3s ease;
  position: relative;
  overflow-x: hidden;
}

/* Étoiles minimalistes (uniquement en mode sombre) */
[data-mode="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 75% 55%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 65% 85%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 35% 60%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    radial-gradient(circle at 55% 10%, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: twinkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

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

button, input, textarea { font: inherit; }
.hidden { display: none !important; }

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.app {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px 16px 120px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .app { padding: 36px 48px 100px; }
}
@media (min-width: 1024px) {
  .app { padding: 44px 64px 100px; }
}

/* Quiz layout - PLEIN ÉCRAN */
.quiz-layout { 
  display: flex; 
  flex-direction: column; 
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}

/* Masquer la sidebar */
.quiz-side { display: none !important; }

/* ─── PAGES ──────────────────────────────────────────────────────────────── */
.page { display: none; }
.page.active {
  display: block;
  animation: pageIn .28s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ─── CARDS — glassmorphism ──────────────────────────────────────────────── */
.card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 28px;
  position: relative;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: var(--card-hover);
  border-color: rgba(139, 92, 246, 0.4);
}

.card:hover::before {
  opacity: 1;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.gradient {
  background: linear-gradient(100deg, var(--text) 0%, var(--accent2) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.muted   { color: var(--muted); line-height: 1.65; }
.tiny    { font-size: .82rem; color: var(--muted); }
.section-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.2px; }
.greeting { font-size: .95rem; color: var(--muted); margin: 6px 0 16px; font-style: italic; }

/* ─── BADGES & PILLS ─────────────────────────────────────────────────────── */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(30, 36, 66, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  font-weight: 600;
  color: var(--text);
  font-size: .85rem;
  letter-spacing: .1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all .2s ease;
}
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
}

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 14px;
}
.stat {
  padding: 16px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,248,240,.05);
  text-align: center;
  transition: border-color .15s, transform .15s;
}
.stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat strong { display: block; font-size: 1.6rem; font-weight: 900; margin-bottom: 4px; }

/* ─── THEME GRID ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; }
.themes { grid-template-columns: 1fr; }
@media (min-width: 520px) { .themes { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 800px) { .themes { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .themes { grid-template-columns: repeat(4,1fr); } }

.theme-card {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.15);
}
.theme-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity .2s;
}
.theme-card::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  transition: all .2s;
  font-size: 1.3rem;
  color: var(--accent);
  z-index: 2;
}
.theme-card h3 { margin: 6px 0 4px; font-size: .95rem; font-weight: 800; position: relative; z-index: 1; }
.theme-card p  { margin: 0; color: var(--muted); line-height: 1.4; font-size: .82rem; position: relative; z-index: 1; }
.theme-card:hover { 
  border-color: var(--accent); 
  transform: translateY(-2px);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.25);
}
.theme-card:hover::before { opacity: .06; }
.theme-card:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.terreur-hub {
  background: linear-gradient(135deg, rgba(255,60,60,.08), rgba(255,100,0,.06)) !important;
  border-color: rgba(255,80,80,.25) !important;
}
.terreur-hub:hover { border-color: rgba(255,80,80,.55) !important; box-shadow: 0 8px 32px rgba(255,60,60,.12) !important; }

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 380px) { .modes { grid-template-columns: 1fr; } }

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  background: var(--card);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: .3px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity .3s;
}

.btn span {
  position: relative;
  z-index: 1;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  border-color: var(--accent);
}

.btn:hover::before {
  opacity: 0.1;
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), var(--glow);
}

.btn.primary:hover {
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.5), var(--glow);
  transform: translateY(-3px) scale(1.02);
}

.btn.ghost {
  background: transparent;
  border-color: rgba(139, 92, 246, 0.3);
}

.btn.ghost:hover {
  background: var(--card);
}

.btn.small { padding: 10px 20px; font-size: .88rem; }
.btn.full  { width: 100%; text-align: center; justify-content: center; display: flex; }

/* ─── LAYOUT HELPERS ─────────────────────────────────────────────────────── */
.meta, .between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── QUIZ ───────────────────────────────────────────────────────────────── */
.question {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
  margin: 20px 0 16px;
  letter-spacing: -.3px;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) { .question { font-size: 1.7rem; } }

.progress {
  height: 8px;
  background: rgba(30, 36, 66, 0.5);
  border-radius: 999px;
  overflow: hidden;
  margin: 20px 0;
  border: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
}

.progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: shimmer 2s infinite;
}

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

.progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));
  transition: width .6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
  box-shadow: 0 0 20px var(--accent), var(--glow);
  position: relative;
  z-index: 1;
}

.answers { display: grid; gap: 12px; margin: 20px 0; }

.answer {
  width: 100%;
  text-align: left;
  padding: 18px 24px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: var(--card);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.answer::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: scaleY(0);
  transition: transform .3s ease;
}

.answer::after {
  content: '→';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  transition: all .3s ease;
  font-size: 1.3rem;
  color: var(--accent);
}

.answer:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3), var(--glow);
}

.answer:hover:not(:disabled)::before {
  transform: scaleY(1);
}

.answer:hover:not(:disabled)::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.answer.correct {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--good);
  animation: pulseGood .5s ease;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.answer.correct::before {
  background: var(--good);
  transform: scaleY(1);
}

.answer.correct::after {
  content: '✓';
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--good);
  font-size: 1.5rem;
}

.answer.wrong {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--bad);
  animation: shakeIt .5s ease;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.answer.wrong::before {
  background: var(--bad);
  transform: scaleY(1);
}

.answer.wrong::after {
  content: '✗';
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--bad);
  font-size: 1.5rem;
}

@keyframes pulseGood {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); }
  100% { transform: scale(1); }
}

@keyframes shakeIt {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-10px); }
  40%     { transform: translateX(10px); }
  60%     { transform: translateX(-8px); }
  80%     { transform: translateX(8px); }
}

.feedback {
  min-height: 72px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
  border-radius: var(--r-md);
  padding: 12px 16px;
  background: rgba(255,248,240,.04);
  border: 1.5px solid transparent;
  transition: border-color .2s, background .2s;
  font-size: .92rem;
}
.feedback.has-content {
  border-color: var(--line);
  background: rgba(255,248,240,.07);
}

.input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: linear-gradient(135deg, rgba(255,248,240,.1), rgba(255,248,240,.06));
  color: var(--text);
  outline: none;
  transition: all .2s ease;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.input::placeholder {
  color: var(--muted);
  opacity: .5;
  font-weight: 400;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,138,42,.15), 0 4px 16px rgba(0,0,0,.15);
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,248,240,.14), rgba(255,248,240,.08));
}
.input:hover:not(:focus) {
  border-color: rgba(255,138,42,.4);
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

/* Masquer les boutons spinner sur les inputs number */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ─── STACKS / MISC ──────────────────────────────────────────────────────── */
.stack { display: grid; gap: 14px; }

.mistake {
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,248,240,.05);
  border-left: 3px solid var(--accent);
}
.mistake p { margin: 6px 0; color: var(--muted); line-height: 1.55; font-size: .9rem; }

/* ─── QUESTION DU JOUR ───────────────────────────────────────────────────── */
.daily-card {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.home-daily-card {
  width: min(980px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}
.daily-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, var(--grad1), transparent 70%);
  pointer-events: none;
}
.daily-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.daily-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--line);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.ai-news-card {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ai-news-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.ai-news-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.ai-news-intro,
.ai-news-closing {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.55;
}

.ai-news-summary {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.6;
}

.ai-news-items {
  display: grid;
  gap: 10px;
}

.ai-news-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.ai-news-item h4,
.ai-news-item p {
  margin: 0;
}

.ai-news-item h4 {
  margin-bottom: 6px;
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(10, 14, 39, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.nav .inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  padding: 12px 16px 20px;
}

.nav .inner button {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .85rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  padding: 12px 8px;
  font-weight: 600;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: .2px;
  position: relative;
}

.nav .inner button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity .3s;
}

.nav .inner button span {
  position: relative;
  z-index: 1;
}

.nav .inner button:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(139, 92, 246, 0.3);
}

.nav .inner button:hover::before {
  opacity: 0.1;
}

.nav .inner button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), var(--glow);
  font-weight: 700;
}

@media (min-width: 768px) { .nav .inner { padding: 14px 32px 22px; } }
@media (min-width: 1024px) { .nav .inner { padding: 14px 48px 22px; } }

/* ─── THEME SWITCHER ─────────────────────────────────────────────────────── */
.theme-switcher { position: fixed; top: 14px; right: 16px; z-index: 200; display: flex; gap: 8px; }

.theme-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.theme-btn:hover { transform: scale(1.1) rotate(20deg); border-color: var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,.3); }

.theme-panel {
  position: absolute; top: 54px; right: 0;
  background: var(--card);
  backdrop-filter: blur(20px);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: popIn .18s ease;
}
.theme-panel.open {
  display: flex;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.theme-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s;
  text-align: left;
}
.theme-option:hover { 
  background: rgba(139, 92, 246, 0.15); 
  border-color: rgba(139, 92, 246, 0.3);
}
.theme-option.active { 
  border-color: var(--accent); 
  background: rgba(139, 92, 246, 0.2);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}
.color-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.3); }
.theme-option.active { 
  border-color: var(--accent); 
  background: rgba(139, 92, 246, 0.2); 
}
.color-dot { 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
.streak-fire { display: inline-block; animation: firePulse .6s ease infinite alternate; }
@keyframes firePulse { from { transform: scale(1); } to { transform: scale(1.3); } }

.confetti-piece {
  position: fixed; width: 10px; height: 10px; top: -10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none; z-index: 9999;
}
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

.score-bump { animation: scoreBump .3s ease; }
@keyframes scoreBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); color: var(--accent); }
  100% { transform: scale(1); }
}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; opacity: .5; }

/* ─── STATS PAR CATÉGORIE ────────────────────────────────────────────────── */
.cat-stat-card {
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,248,240,.04);
  transition: border-color .15s, transform .15s;
  border-left: 3px solid var(--accent);
}
.cat-stat-card:hover { border-color: var(--accent); transform: translateX(3px); }
.cat-stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cat-stat-name  { font-weight: 900; font-size: .95rem; }
.cat-stat-badge { font-size: .85rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.cat-stat-bar-bg { height: 7px; background: rgba(255,248,240,.08); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.cat-stat-bar { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.cat-stat-details { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }

/* ─── MODE SELECTOR ──────────────────────────────────────────────────────── */
.home-hero { text-align: center; padding: 28px 0 10px; }
.home-title { font-size: clamp(1.9rem,6vw,2.8rem); font-weight: 900; margin: 0 0 6px; line-height: 1.1; letter-spacing: -.5px; }

.mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
@media (max-width: 480px) { .mode-selector { grid-template-columns: 1fr; } }

.mode-card {
  border-radius: 24px;
  padding: 32px 28px;
  cursor: pointer;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex; 
  flex-direction: column; 
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity .4s;
}

.mode-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), var(--glow);
}

.mode-card:hover::before {
  opacity: 1;
}

.mode-card:active {
  transform: translateY(-4px) scale(1.01);
}

.solo-card {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

.multi-card {
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  color: #fff;
}

.mode-icon  { font-size: 3rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.mode-label { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
.mode-desc  { font-size: .9rem; opacity: .9; line-height: 1.4; flex: 1; }

.mode-stats-row { display: flex; gap: 14px; margin-top: 4px; }
.mode-stats-row span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mode-stats-row strong { font-size: 1.2rem; font-weight: 900; }
.mode-stats-row .tiny { font-size: .62rem; opacity: .75; text-transform: uppercase; letter-spacing: .3px; }

.mode-badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mode-badge {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.mode-back-btn {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-bottom: 4px;
}
.mode-back-btn:hover { background: rgba(255,248,240,.07); border-color: var(--accent); }

.mode-content { animation: pageIn .25s ease both; }

/* ─── MISC ───────────────────────────────────────────────────────────────── */
#groupsPage, #groupDetailPage { padding-bottom: 120px; }


/* ═══════════════════════════════════════════════════════
   DÉCORATIONS THÉMATIQUES SAISONNIÈRES
   ═══════════════════════════════════════════════════════ */

/* ─── HALLOWEEN : Citrouilles et Fantômes ─────────────────────────────────── */
body[data-seasonal="halloween"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(circle at 15% 20%, transparent 0%, transparent 100%),
    radial-gradient(circle at 85% 30%, transparent 0%, transparent 100%);
  animation: none;
}

body[data-seasonal="halloween"]::after {
  content: "🎃";
  position: fixed;
  top: -50px;
  left: 10%;
  font-size: 2.5rem;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: fall1 12s linear infinite;
}

@keyframes fall1 {
  0% { transform: translateY(-50px) rotate(0deg); left: 10%; }
  100% { transform: translateY(110vh) rotate(360deg); left: 15%; }
}

/* Créer plusieurs emojis qui tombent avec des délais différents */
body[data-seasonal="halloween"] {
  position: relative;
}

body[data-seasonal="halloween"]::before,
body[data-seasonal="halloween"]::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

/* Animation pour plusieurs emojis Halloween */
@keyframes halloweenFall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 0.12; }
  50% { opacity: 0.18; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.08; }
}

/* ─── NOËL : Flocons et Sapins ────────────────────────────────────────────── */
@keyframes snowFall {
  0% { transform: translateY(-100px) translateX(0) rotate(0deg); opacity: 0.15; }
  50% { opacity: 0.25; }
  100% { transform: translateY(110vh) translateX(50px) rotate(180deg); opacity: 0.1; }
}

/* ─── ÉTÉ : Soleils et Vagues ─────────────────────────────────────────────── */
@keyframes summerFloat {
  0% { transform: translateY(-80px) translateX(0) rotate(0deg); opacity: 0.1; }
  50% { opacity: 0.15; transform: translateY(50vh) translateX(30px) rotate(180deg); }
  100% { transform: translateY(110vh) translateX(-20px) rotate(360deg); opacity: 0.08; }
}

/* ─── PRINTEMPS : Fleurs et Papillons ─────────────────────────────────────── */
@keyframes springFloat {
  0% { transform: translateY(-100px) translateX(0) rotate(0deg) scale(0.8); opacity: 0.12; }
  25% { transform: translateY(25vh) translateX(40px) rotate(90deg) scale(1); }
  50% { transform: translateY(50vh) translateX(-30px) rotate(180deg) scale(0.9); opacity: 0.18; }
  75% { transform: translateY(75vh) translateX(20px) rotate(270deg) scale(1.1); }
  100% { transform: translateY(110vh) translateX(0) rotate(360deg) scale(0.8); opacity: 0.1; }
}

/* ─── AMÉLIORATION DU CONTRASTE DES TEXTES ────────────────────────────────── */
/* FORCER LE TEXTE EN BLANC POUR LES ÉLÉMENTS IMPORTANTS */

body {
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

p, span, div, label {
  color: #ffffff;
}

/* Boutons */
.btn {
  color: #ffffff !important;
  font-weight: 600;
}

.btn.primary {
  color: #ffffff !important;
  background: var(--accent);
  font-weight: 700;
}

.btn.ghost {
  color: #ffffff !important;
  font-weight: 600;
}

/* Cartes de thème */
.theme-card h3, .theme-card .pill {
  color: #ffffff !important;
  font-weight: 700;
}

.theme-card p {
  color: #ffffff !important;
  font-weight: 500;
}

/* Options de quiz - CRITIQUE */
.answer, .option-btn, button.answer {
  color: #ffffff !important;
  background: var(--accent);
  font-weight: 600;
  border: 2px solid var(--accent);
  transition: all 0.2s;
}

.answer:hover, .option-btn:hover {
  background: var(--accent2);
  color: #ffffff !important;
  border-color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.answer.correct {
  background: var(--good);
  color: #ffffff !important;
  border-color: var(--good);
}

.answer.wrong {
  background: var(--bad);
  color: #ffffff !important;
  border-color: var(--bad);
}

.sondage-solo-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--bg2);
}

.sondage-value {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--accent);
}

.sondage-slider {
  width: 100%;
  accent-color: var(--accent);
}

.sondage-input-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr;
  gap: 10px;
  align-items: center;
}

.sondage-number {
  text-align: center;
  font-weight: 800;
}

.sondage-result {
  display: grid;
  gap: 8px;
  line-height: 1.5;
}

.sondage-explanation {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  opacity: .9;
}

@media (max-width: 520px) {
  .sondage-input-row {
    grid-template-columns: 1fr;
  }
}

/* Question text */
.question, .question-text, #questionText, .g-daily-q {
  color: #ffffff !important;
  font-weight: 600;
}

/* Messages et feedback */
.feedback, .feedback-msg, #feedback, #gameFeedback, #geoFeedback {
  color: #ffffff !important;
  font-weight: 600;
}

/* Cartes solo/multi */
.solo-card h2, .solo-card p, .multi-card h2, .multi-card p {
  color: #ffffff !important;
  font-weight: 600;
}

/* Navigation */
.nav button {
  color: #ffffff !important;
}

/* Stats */
.stat-card, .cat-stat-card {
  color: #ffffff;
}

/* Groupes */
.g-card h3, .g-card p, .g-card-name, .g-card-meta {
  color: #ffffff !important;
}

/* Pills et badges */
.pill, .badge {
  color: #ffffff !important;
}

/* Mini-games hints */
.g-geo-hint, .g-memory-hint, .g-imposteur-hint {
  color: #ffffff !important;
  font-weight: 700;
}

/* Timer */
.g-timer {
  color: #ffffff !important;
}

/* Boutons de jeu */
.g-daily-option, .g-cat-choice, .g-vote-btn {
  color: #ffffff !important;
}

/* Résultats */
.g-result-row, .g-result-name, .g-result-score {
  color: #ffffff !important;
}

/* Chat */
.g-chat-msg .g-msg-bubble {
  color: #ffffff !important;
}

/* Sections titles */
.g-section-title, .g-detail-title {
  color: #ffffff !important;
}

/* Mode cards */
.mode-label, .mode-desc, .mode-stats-row {
  color: #ffffff !important;
}

/* Game tiles */
.g-game-tile-label, .g-game-tile-desc {
  color: #ffffff !important;
}

/* Explanations */
.g-explanation {
  color: #ffffff !important;
}

/* Meta info */
.meta, .badge {
  color: #ffffff !important;
}

/* Progress text */
.progress {
  color: #ffffff !important;
}

/* Inputs - garder lisible */
input, textarea {
  color: var(--text) !important;
  background: var(--bg2);
}

input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}


/* ═══════════════════════════════════════════════════════
   AVATARS DANS LE CHAT
   ═══════════════════════════════════════════════════════ */

.g-msg-avatar {
  display: inline-block;
  font-size: 1.2rem;
  margin: 0 6px;
  vertical-align: middle;
}

.g-chat-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.g-chat-msg.me {
  flex-direction: row-reverse;
}

.g-chat-msg.other {
  flex-direction: row;
}

.g-reaction-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ═══════════════════════════════════════════════════════
   EMOJIS THÉMATIQUES QUI TOMBENT
   ═══════════════════════════════════════════════════════ */

.seasonal-emoji {
  position: fixed;
  top: -100px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
  animation: fallRandom 15s linear forwards;
  will-change: transform, opacity;
}

@keyframes fallRandom {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110vh) translateX(calc(var(--rotation) / 10 - 18px)) rotate(var(--rotation));
    opacity: 0;
  }
}

/* Variation pour un mouvement plus naturel */
.seasonal-emoji:nth-child(odd) {
  animation-timing-function: ease-in-out;
}

.seasonal-emoji:nth-child(even) {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Décors saisonniers en arrière-plan */
.seasonal-emoji {
  z-index: 0 !important;
  opacity: 0;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#multiApp > .seasonal-emoji {
  z-index: 0 !important;
}

#multiApp .multi-inner {
  position: relative;
  z-index: 2;
}

.app {
  position: relative;
  z-index: 2;
}

.seasonal-spring {
  animation: springDecor var(--decor-duration, 12s) linear forwards;
}

.seasonal-butterfly {
  animation: butterflyDecor var(--decor-duration, 12s) ease-in-out forwards;
}

.seasonal-winter {
  animation: winterDecor var(--decor-duration, 12s) linear forwards;
}

.seasonal-gift {
  animation: giftDecor var(--decor-duration, 12s) ease-in forwards;
}

.seasonal-halloween {
  animation: halloweenDecor var(--decor-duration, 12s) ease-in forwards;
}

.seasonal-ghost {
  animation: ghostDecor var(--decor-duration, 13s) ease-in-out forwards;
}

.seasonal-sun {
  animation: sunDecor var(--decor-duration, 13s) ease-in-out forwards;
}

.seasonal-wave {
  animation: waveDecor var(--decor-duration, 12s) ease-in-out forwards;
}

.seasonal-sparkle {
  animation: sparkleDecor var(--decor-duration, 9s) ease-in-out forwards;
}

@keyframes springDecor {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: .18; }
  50%  { transform: translate3d(var(--decor-sway), 52vh, 0) rotate(var(--decor-spin)); opacity: .22; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(calc(var(--decor-spin) * 2)); opacity: 0; }
}

@keyframes butterflyDecor {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.9); opacity: 0; }
  12%  { opacity: .2; }
  35%  { transform: translate3d(var(--decor-step-one), -34px, 0) rotate(10deg) scale(1.05); }
  70%  { transform: translate3d(var(--decor-step-two), 28px, 0) rotate(-12deg) scale(.96); opacity: .18; }
  100% { transform: translate3d(var(--decor-direction), -8px, 0) rotate(8deg) scale(.9); opacity: 0; }
}

@keyframes winterDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  15%  { opacity: .26; }
  55%  { transform: translate3d(var(--decor-sway), 58vh, 0) rotate(120deg); opacity: .3; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(260deg); opacity: 0; }
}

@keyframes giftDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(-8deg) scale(.9); opacity: 0; }
  12%  { opacity: .18; }
  72%  { opacity: .16; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(var(--decor-spin)) scale(1.02); opacity: 0; }
}

@keyframes halloweenDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(-12deg); opacity: 0; }
  14%  { opacity: .2; }
  62%  { transform: translate3d(var(--decor-sway), 62vh, 0) rotate(18deg); opacity: .22; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(var(--decor-spin)); opacity: 0; }
}

@keyframes ghostDecor {
  0%   { transform: translate3d(0, -8vh, 0) scale(.88); opacity: 0; }
  18%  { opacity: .18; }
  45%  { transform: translate3d(calc(var(--decor-sway) * -1), 38vh, 0) scale(1.04); }
  76%  { transform: translate3d(var(--decor-sway), 76vh, 0) scale(.96); opacity: .18; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) scale(.9); opacity: 0; }
}

@keyframes sunDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.8); opacity: 0; }
  20%  { opacity: .18; }
  55%  { transform: translate3d(var(--decor-sway), 42vh, 0) rotate(90deg) scale(1.04); }
  100% { transform: translate3d(var(--decor-drift), 108vh, 0) rotate(180deg) scale(.92); opacity: 0; }
}

@keyframes waveDecor {
  0%   { transform: translate3d(0, 0, 0) scale(.95); opacity: 0; }
  12%  { opacity: .16; }
  50%  { transform: translate3d(var(--decor-step-one), -18px, 0) scale(1.05); opacity: .18; }
  100% { transform: translate3d(var(--decor-direction), 12px, 0) scale(.95); opacity: 0; }
}

@keyframes sparkleDecor {
  0%   { transform: translate3d(0, -8vh, 0) scale(.7); opacity: 0; }
  25%  { opacity: .14; }
  65%  { opacity: .12; }
  100% { transform: translate3d(var(--decor-drift), 100vh, 0) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-emoji {
    display: none !important;
  }
}

/* Animation spéciale pour les étoiles filantes (mode default sombre) */
.shooting-star {
  animation: shootingStar 2.5s ease-out forwards;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  position: fixed;
  pointer-events: none;
  /* Optimisation GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: scale(0.3) translateZ(0);
  }
  10% {
    opacity: 0.8;
    transform: scale(1) translateZ(0);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translate(
      calc(var(--dx, 100vw)),
      calc(var(--dy, 100vh))
    ) scale(0.6) translateZ(0);
    opacity: 0;
  }
}

/* Animation spéciale pour les soleils/arcs-en-ciel (mode default jour) */
.floating-day {
  animation: floatingDay 4s ease-in-out forwards;
  opacity: 0.25;
  filter: drop-shadow(0 0 3px rgba(255, 200, 100, 0.3));
  position: fixed;
  pointer-events: none;
  /* Optimisation GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes floatingDay {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.4;
    transform: translate(
      calc(var(--dx, 50vw) * 0.5),
      calc(var(--dy, 50vh) * 0.5)
    ) scale(1) rotate(180deg);
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(
      calc(var(--dx, 100vw)),
      calc(var(--dy, 100vh))
    ) scale(0.7) rotate(360deg);
    opacity: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ÉTOILES FILANTES
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes shootingStar {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) translateX(-30vw) rotate(360deg);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   MODE JOUR : COULEUR CHOISIE + CONTRASTE LISIBLE
   ═══════════════════════════════════════════════════════ */
:root:not([data-mode="dark"]) {
  --card: rgba(255, 255, 255, 0.88);
  --card-hover: rgba(255, 255, 255, 0.96);
  --line: color-mix(in srgb, var(--accent) 34%, rgba(15, 23, 42, 0.16));
  --shadow-card: 0 12px 30px rgba(15, 23, 42, 0.12);
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 30%),
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent2) 24%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2) 52%, var(--bg3) 100%) !important;
  color: var(--text) !important;
}

:root:not([data-mode="dark"]) h1,
:root:not([data-mode="dark"]) h2,
:root:not([data-mode="dark"]) h3,
:root:not([data-mode="dark"]) h4,
:root:not([data-mode="dark"]) h5,
:root:not([data-mode="dark"]) h6,
:root:not([data-mode="dark"]) p,
:root:not([data-mode="dark"]) span,
:root:not([data-mode="dark"]) div,
:root:not([data-mode="dark"]) label,
:root:not([data-mode="dark"]) .theme-card h3,
:root:not([data-mode="dark"]) .theme-card p,
:root:not([data-mode="dark"]) .theme-card .pill,
:root:not([data-mode="dark"]) .question,
:root:not([data-mode="dark"]) .question-text,
:root:not([data-mode="dark"]) #questionText,
:root:not([data-mode="dark"]) .feedback,
:root:not([data-mode="dark"]) .feedback-msg,
:root:not([data-mode="dark"]) #feedback,
:root:not([data-mode="dark"]) #gameFeedback,
:root:not([data-mode="dark"]) #geoFeedback,
:root:not([data-mode="dark"]) .stat-card,
:root:not([data-mode="dark"]) .cat-stat-card,
:root:not([data-mode="dark"]) .meta,
:root:not([data-mode="dark"]) .progress,
:root:not([data-mode="dark"]) .badge {
  color: var(--text) !important;
}

:root:not([data-mode="dark"]) .card,
:root:not([data-mode="dark"]) .theme-card,
:root:not([data-mode="dark"]) .daily-card,
:root:not([data-mode="dark"]) .stat-card,
:root:not([data-mode="dark"]) .cat-stat-card,
:root:not([data-mode="dark"]) .sondage-solo-panel {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card);
}

:root:not([data-mode="dark"]) .muted,
:root:not([data-mode="dark"]) .theme-card .theme-desc,
:root:not([data-mode="dark"]) .sondage-explanation {
  color: var(--muted) !important;
}

:root:not([data-mode="dark"]) .btn.primary,
:root:not([data-mode="dark"]) .btn.primary *,
:root:not([data-mode="dark"]) .answer,
:root:not([data-mode="dark"]) .answer *,
:root:not([data-mode="dark"]) .option-btn,
:root:not([data-mode="dark"]) .option-btn *,
:root:not([data-mode="dark"]) button.answer,
:root:not([data-mode="dark"]) button.answer *,
:root:not([data-mode="dark"]) .answer.correct,
:root:not([data-mode="dark"]) .answer.wrong,
:root:not([data-mode="dark"]) .solo-card,
:root:not([data-mode="dark"]) .solo-card *,
:root:not([data-mode="dark"]) .multi-card,
:root:not([data-mode="dark"]) .multi-card * {
  color: #ffffff !important;
}

/* Reprise visuelle du mode jour : moins blanc, plus theme, plus lisible */
:root:not([data-mode="dark"]) .card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.58)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent2) 12%, transparent)) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.4)) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

:root:not([data-mode="dark"]) .theme-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 18%, transparent)) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.35)) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

:root:not([data-mode="dark"]) .theme-card:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.52)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent2) 24%, transparent)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 24%, rgba(15, 23, 42, 0.12));
}

:root:not([data-mode="dark"]) .theme-card::before {
  opacity: 0 !important;
}

:root:not([data-mode="dark"]) .theme-card .pill,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge {
  background: linear-gradient(135deg, var(--accent3), var(--accent)) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

:root:not([data-mode="dark"]) .theme-card h3,
:root:not([data-mode="dark"]) .theme-card .theme-label,
:root:not([data-mode="dark"]) .section-title {
  color: #172033 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .theme-card p,
:root:not([data-mode="dark"]) .theme-card .theme-desc,
:root:not([data-mode="dark"]) .tiny,
:root:not([data-mode="dark"]) .greeting {
  color: #334155 !important;
}

:root:not([data-mode="dark"]) .btn.ghost,
:root:not([data-mode="dark"]) .mode-back-btn,
:root:not([data-mode="dark"]) .btn.small.ghost {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2) 12%, transparent)) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 46%, rgba(255, 255, 255, 0.2)) !important;
  color: #172033 !important;
  font-weight: 800;
}

:root:not([data-mode="dark"]) .btn.ghost *,
:root:not([data-mode="dark"]) .mode-back-btn * {
  color: #172033 !important;
}

:root:not([data-mode="dark"]) .btn.ghost:hover,
:root:not([data-mode="dark"]) .mode-back-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

:root:not([data-mode="dark"]) .btn.ghost:hover *,
:root:not([data-mode="dark"]) .mode-back-btn:hover * {
  color: #ffffff !important;
}

:root:not([data-mode="dark"]) .btn.primary {
  background: linear-gradient(135deg, var(--accent3), var(--accent), var(--accent2)) !important;
  border: 0 !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 34%, transparent) !important;
}

:root:not([data-mode="dark"]) .modes {
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════
   RELOOK GLOBAL : interface plus propre et plus lisible
   ═══════════════════════════════════════════════════════ */
:root {
  --ui-surface: rgba(255, 255, 255, 0.94);
  --ui-surface-strong: #ffffff;
  --ui-border: rgba(37, 52, 76, 0.13);
  --ui-border-strong: rgba(37, 52, 76, 0.22);
  --ui-shadow: 0 18px 44px rgba(30, 41, 59, 0.13);
  --ui-shadow-soft: 0 10px 24px rgba(30, 41, 59, 0.09);
  --ui-radius: 8px;
}

[data-mode="dark"] {
  --ui-surface: rgba(18, 25, 43, 0.92);
  --ui-surface-strong: #151d35;
  --ui-border: rgba(148, 163, 184, 0.18);
  --ui-border-strong: rgba(167, 139, 250, 0.34);
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --ui-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.26);
}

* {
  letter-spacing: 0 !important;
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 56%, #ffffff) 0%, #f8fafc 48%, color-mix(in srgb, var(--bg2) 28%, #eef2f7) 100%) !important;
}

[data-mode="dark"] body {
  background: linear-gradient(180deg, #0b1020 0%, #111827 58%, #0f172a 100%) !important;
}

.app {
  width: min(1180px, 100%);
  padding-inline: clamp(16px, 4vw, 56px);
}

.home-hero {
  text-align: left;
  padding: 22px 0 14px;
}

.home-title {
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  font-weight: 900;
  line-height: 1;
}

.gradient {
  background: linear-gradient(90deg, #101827 0%, var(--accent3) 54%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-mode="dark"] .gradient {
  background: linear-gradient(90deg, #f8fafc 0%, var(--accent2) 58%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.greeting {
  max-width: 680px;
  font-style: normal;
  font-weight: 600;
  color: #526174 !important;
}

.card,
.daily-card,
.theme-card,
.cat-stat-card,
.stat,
.auth-card {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.card::before,
.theme-card::before,
.mode-card::before {
  display: none !important;
}

.card:hover,
.theme-card:hover,
.cat-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow) !important;
}

.mode-selector {
  gap: 16px;
  margin: 22px 0;
}

.mode-card {
  min-height: 190px;
  border-radius: var(--ui-radius) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: 28px;
  isolation: isolate;
}

.mode-card:hover {
  transform: translateY(-4px);
}

.solo-card,
.multi-card {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--accent3), var(--accent)) !important;
}

.multi-card {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(255,255,255,0)),
    linear-gradient(135deg, #0f766e, var(--accent)) !important;
}

.mode-icon {
  font-size: 2.5rem;
  filter: none;
}

.mode-label {
  font-size: 1.35rem;
}

.mode-badge {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}

.theme-card {
  padding: 18px !important;
  box-shadow: none !important;
}

.theme-card:hover {
  box-shadow: var(--ui-shadow-soft) !important;
}

.theme-card::after {
  display: none;
}

.theme-card .pill,
.badge,
.daily-badge {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff) !important;
  color: #182235 !important;
  box-shadow: none !important;
}

[data-mode="dark"] .theme-card .pill,
[data-mode="dark"] .badge,
[data-mode="dark"] .daily-badge {
  background: rgba(139, 92, 246, 0.16) !important;
  color: #f8fafc !important;
}

.btn,
.mode-back-btn,
.theme-btn,
.user-icon-btn {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  font-weight: 800;
}

.btn:hover,
.mode-back-btn:hover,
.theme-btn:hover,
.user-icon-btn:hover {
  transform: translateY(-2px);
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow) !important;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent3), var(--accent)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.btn.primary *,
.solo-card *,
.multi-card * {
  color: #ffffff !important;
}

.btn.ghost {
  background: rgba(255,255,255,.76) !important;
}

[data-mode="dark"] .btn.ghost {
  background: rgba(15, 23, 42, .82) !important;
}

.input,
input,
textarea {
  border-radius: var(--ui-radius) !important;
}

.progress,
.cat-stat-bar-bg {
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .16) !important;
}

.answer,
.option-btn {
  border-radius: var(--ui-radius) !important;
  box-shadow: none !important;
}

@media (min-width: 860px) {
  .themes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .themes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════
   DIRECTION VISUELLE : glass fluide + touches dessinées
   ═══════════════════════════════════════════════════════ */
:root {
  --dream-ink: #172033;
  --dream-muted: #53627a;
  --dream-glass: rgba(255, 255, 255, 0.58);
  --dream-glass-strong: rgba(255, 255, 255, 0.74);
  --dream-line: rgba(255, 255, 255, 0.58);
  --dream-line-soft: rgba(54, 72, 106, 0.12);
  --dream-shadow: 0 24px 70px rgba(37, 52, 91, 0.18);
  --dream-shadow-soft: 0 14px 34px rgba(37, 52, 91, 0.12);
  --dream-radius: 26px;
}

[data-mode="dark"] {
  --dream-ink: #f6f8ff;
  --dream-muted: #aab7d4;
  --dream-glass: rgba(22, 29, 50, 0.58);
  --dream-glass-strong: rgba(27, 36, 62, 0.72);
  --dream-line: rgba(166, 190, 255, 0.20);
  --dream-line-soft: rgba(255, 255, 255, 0.08);
  --dream-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --dream-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.32);
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body {
  background:
    radial-gradient(circle at 12% 8%, rgba(128, 199, 255, 0.52), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255, 178, 219, 0.48), transparent 30%),
    radial-gradient(circle at 68% 92%, rgba(255, 219, 140, 0.36), transparent 34%),
    linear-gradient(145deg, #eef7ff 0%, #f7f0ff 48%, #fff8ea 100%) !important;
}

[data-mode="dark"],
[data-mode="dark"] body {
  background:
    radial-gradient(circle at 18% 14%, rgba(78, 134, 255, 0.24), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(236, 112, 190, 0.16), transparent 28%),
    radial-gradient(circle at 56% 88%, rgba(71, 205, 220, 0.12), transparent 36%),
    linear-gradient(145deg, #0b1020 0%, #11172a 48%, #171f35 100%) !important;
}

.app {
  width: min(1120px, 100%);
}

.home-hero {
  position: relative;
  padding: 32px 0 20px;
}

.home-hero::after {
  content: "✦  ○  ✧";
  position: absolute;
  right: clamp(8px, 5vw, 54px);
  top: 20px;
  color: color-mix(in srgb, var(--accent) 48%, transparent);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  letter-spacing: .22em !important;
  pointer-events: none;
  opacity: .7;
}

.home-title {
  color: var(--dream-ink) !important;
  text-shadow: 0 12px 36px rgba(61, 86, 147, .16);
}

.gradient {
  background: linear-gradient(96deg, var(--dream-ink) 0%, #316bff 42%, #ff7fc8 78%, #ffc86b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[data-mode="dark"] .gradient {
  background: linear-gradient(96deg, #f8fbff 0%, #75b7ff 46%, #ff9fd5 78%, #ffe2a0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.greeting,
.muted,
.tiny,
.theme-card p,
.theme-card .theme-desc {
  color: var(--dream-muted) !important;
}

.card,
.daily-card,
.theme-card,
.cat-stat-card,
.stat,
.auth-card,
.user-panel,
.theme-panel {
  border-radius: var(--dream-radius) !important;
  border: 1px solid var(--dream-line) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.20)),
    var(--dream-glass) !important;
  box-shadow: var(--dream-shadow-soft), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
}

[data-mode="dark"] .card,
[data-mode="dark"] .daily-card,
[data-mode="dark"] .theme-card,
[data-mode="dark"] .cat-stat-card,
[data-mode="dark"] .stat,
[data-mode="dark"] .auth-card,
[data-mode="dark"] .user-panel,
[data-mode="dark"] .theme-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    var(--dream-glass) !important;
  box-shadow: var(--dream-shadow-soft), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.card:hover,
.theme-card:hover,
.cat-stat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.76) !important;
  box-shadow: var(--dream-shadow), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.mode-selector {
  gap: clamp(14px, 2.5vw, 24px);
  margin: 26px 0 18px;
}

.mode-card {
  min-height: 215px;
  border-radius: 30px !important;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.52) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.10)),
    color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.34)) !important;
  color: var(--dream-ink) !important;
  box-shadow: var(--dream-shadow), inset 0 1px 0 rgba(255,255,255,.65) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

[data-mode="dark"] .mode-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(127, 174, 255, .22), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(22, 29, 50, .62) !important;
  color: #fff !important;
}

.mode-card::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.46));
  border-radius: 23px;
  opacity: .52;
  pointer-events: none;
  background: none !important;
}

.mode-card::after {
  content: "✦";
  position: absolute;
  right: 24px;
  top: 18px;
  color: color-mix(in srgb, var(--accent2) 70%, #fff);
  font-size: 1.35rem;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent2) 48%, transparent);
}

.mode-card:hover {
  transform: translateY(-7px) rotate(-.25deg);
}

.mode-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 22px rgba(45, 68, 128, .14);
}

.mode-label {
  font-size: 1.5rem;
  color: inherit !important;
}

.mode-desc,
.mode-card .tiny {
  color: color-mix(in srgb, currentColor 72%, transparent) !important;
}

.mode-badge {
  background: rgba(255,255,255,.30) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: inherit !important;
}

.theme-card {
  position: relative;
  min-height: 174px;
  padding: 20px !important;
  overflow: hidden;
}

.theme-card::before {
  content: "";
  display: block !important;
  position: absolute;
  width: 118px;
  height: 118px;
  right: -44px;
  top: -46px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.62), transparent 27%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent2) 25%, transparent));
  opacity: .72 !important;
  transform: rotate(13deg);
  pointer-events: none;
}

.theme-card::after {
  content: "✧";
  display: block !important;
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
  font-size: 1.4rem;
  opacity: .85;
  transform: none;
}

.theme-card:hover::before {
  opacity: .9 !important;
}

.theme-icon {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 10px 20px rgba(45, 68, 128, .12);
  font-size: 1.55rem;
  margin-bottom: 10px;
}

.theme-card h3,
.theme-card .theme-label,
.section-title {
  color: var(--dream-ink) !important;
}

.theme-card .pill,
.badge,
.daily-badge,
.cat-stat-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--dream-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.btn,
.mode-back-btn,
.theme-btn,
.user-icon-btn {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.22)),
    var(--dream-glass) !important;
  color: var(--dream-ink) !important;
  box-shadow: 0 14px 30px rgba(37,52,91,.13), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

[data-mode="dark"] .btn,
[data-mode="dark"] .mode-back-btn,
[data-mode="dark"] .theme-btn,
[data-mode="dark"] .user-icon-btn {
  color: #f8fbff !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    var(--dream-glass) !important;
}

.btn.primary {
  background:
    linear-gradient(135deg, #2e6cff, #7c6dff 46%, #ff83c6) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 18px 36px rgba(62, 105, 255, .26), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.btn:hover,
.mode-back-btn:hover,
.theme-btn:hover,
.user-icon-btn:hover {
  transform: translateY(-3px);
}

.input,
input,
textarea {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
}

[data-mode="dark"] .input,
[data-mode="dark"] input,
[data-mode="dark"] textarea {
  background: rgba(8, 13, 28, .42) !important;
}

.answer,
.option-btn {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.22)),
    color-mix(in srgb, var(--accent) 10%, transparent) !important;
  color: var(--dream-ink) !important;
  box-shadow: 0 12px 24px rgba(37, 52, 91, .10), inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.answer:hover,
.option-btn:hover {
  transform: translateY(-3px);
}

.progress {
  height: 12px;
  background: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 2px rgba(30,41,59,.08);
}

.progress span,
.cat-stat-bar {
  background: linear-gradient(90deg, #4aa8ff, #8d7cff, #ff8bc9) !important;
}

.nav .inner {
  border-radius: 28px 28px 0 0;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 -16px 40px rgba(37,52,91,.14);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

/* Correction grille catégories : plus de décalage ni de boutons coupés */
.themes {
  align-items: stretch;
}

.theme-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 278px;
  isolation: isolate;
}

.theme-card > * {
  position: relative;
  z-index: 1;
}

.theme-card::before {
  z-index: 0;
}

.theme-card:hover {
  transform: translateY(-2px);
}

.theme-card .pill {
  align-self: flex-start;
  max-width: 100%;
  min-height: 36px;
  white-space: normal;
  line-height: 1.12;
  padding: 8px 13px !important;
}

.theme-card h3,
.theme-card .theme-label {
  margin-top: 10px !important;
}

.theme-card p,
.theme-card .theme-desc {
  min-height: 58px;
  margin-bottom: 14px !important;
}

.theme-card .modes {
  margin-top: auto !important;
}

.modes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100%;
}

.modes .btn {
  width: 100%;
  min-width: 0;
  min-height: 74px;
  padding: 10px 8px !important;
  border-radius: 20px !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: clamp(.82rem, 1.4vw, .95rem);
}

@media (max-width: 760px) {
  .theme-card {
    min-height: 250px;
  }

  .modes .btn {
    min-height: 62px;
  }
}

/* Mode jour illustré : cartes façon sticker pastel */
:root:not([data-mode="dark"]) {
  --dream-ink: #182033;
  --dream-muted: #526071;
  --dream-glass: rgba(255, 255, 255, 0.44);
  --dream-line: rgba(84, 78, 132, 0.22);
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body {
  background:
    radial-gradient(circle at 10% 8%, rgba(117, 196, 255, .46), transparent 27%),
    radial-gradient(circle at 88% 11%, rgba(255, 153, 203, .42), transparent 25%),
    radial-gradient(circle at 18% 86%, rgba(126, 232, 192, .34), transparent 27%),
    radial-gradient(circle at 78% 82%, rgba(255, 219, 118, .38), transparent 30%),
    linear-gradient(135deg, #f3fbff 0%, #fff5fb 48%, #fff9e8 100%) !important;
}

:root:not([data-mode="dark"]) .theme-card:nth-child(6n + 1) { --card-accent: #6d7cff; --card-accent2: #86d8ff; --card-wash: rgba(109,124,255,.16); }
:root:not([data-mode="dark"]) .theme-card:nth-child(6n + 2) { --card-accent: #ff76b8; --card-accent2: #ffd07a; --card-wash: rgba(255,118,184,.15); }
:root:not([data-mode="dark"]) .theme-card:nth-child(6n + 3) { --card-accent: #15b8a6; --card-accent2: #91e8b8; --card-wash: rgba(21,184,166,.14); }
:root:not([data-mode="dark"]) .theme-card:nth-child(6n + 4) { --card-accent: #8b5cf6; --card-accent2: #f09bff; --card-wash: rgba(139,92,246,.14); }
:root:not([data-mode="dark"]) .theme-card:nth-child(6n + 5) { --card-accent: #e8c65a; --card-accent2: #ffe8a3; --card-wash: rgba(232,198,90,.16); }
:root:not([data-mode="dark"]) .theme-card:nth-child(6n) { --card-accent: #ef5d60; --card-accent2: #ffb199; --card-wash: rgba(239,93,96,.14); }

:root:not([data-mode="dark"]) .card,
:root:not([data-mode="dark"]) .daily-card,
:root:not([data-mode="dark"]) .theme-card,
:root:not([data-mode="dark"]) .cat-stat-card,
:root:not([data-mode="dark"]) .stat {
  background:
    linear-gradient(150deg, rgba(255,255,255,.70), rgba(255,255,255,.30)),
    linear-gradient(135deg, var(--card-wash, rgba(139,92,246,.12)), rgba(255,255,255,.20)) !important;
  border: 2px solid color-mix(in srgb, var(--card-accent, var(--accent)) 34%, rgba(255,255,255,.64)) !important;
  box-shadow:
    0 18px 38px rgba(77, 82, 126, .13),
    inset 0 2px 0 rgba(255,255,255,.72) !important;
}

:root:not([data-mode="dark"]) .theme-card {
  border-radius: 30px 24px 34px 25px !important;
}

:root:not([data-mode="dark"]) .theme-card:nth-child(even) {
  border-radius: 25px 34px 26px 31px !important;
}

:root:not([data-mode="dark"]) .theme-card::before {
  width: 138px;
  height: 138px;
  right: -48px;
  top: -52px;
  border-radius: 42px 54px 38px 48px;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.74), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--accent)) 52%, transparent), color-mix(in srgb, var(--card-accent2, var(--accent2)) 42%, transparent)) !important;
  opacity: .55 !important;
}

:root:not([data-mode="dark"]) .theme-card::after {
  content: "✧";
  color: color-mix(in srgb, var(--card-accent, var(--accent)) 74%, transparent);
  right: 24px;
  top: 148px;
  bottom: auto;
  font-size: 1.35rem;
}

:root:not([data-mode="dark"]) .theme-card .pill,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge {
  background:
    linear-gradient(135deg, var(--card-accent, var(--accent)), var(--card-accent2, var(--accent2))) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--card-accent, var(--accent)) 24%, transparent) !important;
}

:root:not([data-mode="dark"]) .theme-card h3,
:root:not([data-mode="dark"]) .theme-card .theme-label {
  color: #1c2438 !important;
}

:root:not([data-mode="dark"]) .theme-card p,
:root:not([data-mode="dark"]) .theme-card .theme-desc {
  color: #4d5b70 !important;
}

:root:not([data-mode="dark"]) .modes .btn.primary {
  background:
    linear-gradient(135deg, var(--card-accent, #6d7cff), var(--card-accent2, #ff83c6)) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.64) !important;
  box-shadow:
    0 12px 22px color-mix(in srgb, var(--card-accent, var(--accent)) 26%, transparent),
    inset 0 2px 0 rgba(255,255,255,.34) !important;
}

:root:not([data-mode="dark"]) .modes .btn.ghost {
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.38)),
    color-mix(in srgb, var(--card-accent2, var(--accent2)) 10%, transparent) !important;
  color: #1b2436 !important;
  border: 2px solid color-mix(in srgb, var(--card-accent, var(--accent)) 34%, rgba(255,255,255,.58)) !important;
}

:root:not([data-mode="dark"]) .modes .btn {
  border-radius: 24px 18px 25px 19px !important;
}

:root:not([data-mode="dark"]) .theme-card:nth-child(even) .modes .btn {
  border-radius: 18px 25px 19px 24px !important;
}

:root:not([data-mode="dark"]) .theme-card:hover {
  transform: translateY(-4px) rotate(-.35deg);
}

:root:not([data-mode="dark"]) .theme-card:nth-child(even):hover {
  transform: translateY(-4px) rotate(.35deg);
}

/* Lisibilité mode jour : cartes principales plus visibles */
:root:not([data-mode="dark"]) .mode-card {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.78), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, #dff4ff), color-mix(in srgb, var(--accent2) 26%, #fff0c9)) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.74)) !important;
  box-shadow:
    0 22px 48px rgba(64, 73, 120, .17),
    inset 0 2px 0 rgba(255,255,255,.78) !important;
  color: #192235 !important;
}

:root:not([data-mode="dark"]) .mode-card *,
:root:not([data-mode="dark"]) .solo-card *,
:root:not([data-mode="dark"]) .multi-card * {
  color: #192235 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .mode-card .mode-desc,
:root:not([data-mode="dark"]) .mode-card .tiny {
  color: #526071 !important;
}

:root:not([data-mode="dark"]) .mode-icon {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.42)),
    color-mix(in srgb, var(--accent) 16%, transparent) !important;
  border: 1px solid rgba(255,255,255,.72);
}

:root:not([data-mode="dark"]) .mode-badge {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(42, 53, 84, .12) !important;
  color: #243047 !important;
}

:root:not([data-mode="dark"]) .mode-stats-row strong {
  color: #26324a !important;
}

/* Titoue joue : troisième mode sur l'accueil */
.mode-selector {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.play-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.78), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.36), rgba(255,255,255,.12)),
    color-mix(in srgb, var(--accent2) 18%, rgba(255,255,255,.34)) !important;
}

.solo-games-grid {
  margin-top: 18px;
}

.titoue-play-card .g-game-tile {
  cursor: pointer;
}

@media (max-width: 900px) {
  .mode-selector {
    grid-template-columns: 1fr !important;
  }
}

/* Mode jour final : plus lisible, plus propre, et vraiment lié au thème choisi */
:root:not([data-mode="dark"]) {
  --dream-ink: #172033;
  --dream-muted: #48566d;
  --dream-glass: rgba(255, 255, 255, 0.70);
  --dream-glass-strong: rgba(255, 255, 255, 0.84);
  --dream-line: color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.72));
  --dream-shadow: 0 24px 58px color-mix(in srgb, var(--accent) 18%, rgba(28, 43, 72, .16));
  --dream-shadow-soft: 0 14px 34px color-mix(in srgb, var(--accent) 12%, rgba(28, 43, 72, .12));
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 30%),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--accent3) 16%, transparent), transparent 32%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent2) 10%, #f8fbff) 0%,
      color-mix(in srgb, var(--accent) 7%, #ffffff) 48%,
      color-mix(in srgb, var(--accent3) 10%, #f7f9ff) 100%
    ) !important;
}

:root:not([data-mode="dark"]) .home-title {
  color: var(--dream-ink) !important;
  text-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

:root:not([data-mode="dark"]) .gradient {
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--accent3) 62%, #111827) 0%,
    var(--accent) 48%,
    color-mix(in srgb, var(--accent2) 70%, #ff5aa8) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root:not([data-mode="dark"]) .home-hero::after {
  color: color-mix(in srgb, var(--accent) 54%, transparent) !important;
  opacity: .55 !important;
}

:root:not([data-mode="dark"]) .card,
:root:not([data-mode="dark"]) .daily-card,
:root:not([data-mode="dark"]) .theme-card,
:root:not([data-mode="dark"]) .cat-stat-card,
:root:not([data-mode="dark"]) .stat,
:root:not([data-mode="dark"]) .auth-card,
:root:not([data-mode="dark"]) .user-panel,
:root:not([data-mode="dark"]) .theme-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
    color-mix(in srgb, var(--accent2) 8%, transparent) !important;
  border: 2px solid var(--dream-line) !important;
  box-shadow: var(--dream-shadow-soft), inset 0 2px 0 rgba(255,255,255,.72) !important;
  color: var(--dream-ink) !important;
}

:root:not([data-mode="dark"]) .mode-card {
  min-height: 200px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.82), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--accent2) 14%, transparent)
    ) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.78)) !important;
  box-shadow: var(--dream-shadow), inset 0 2px 0 rgba(255,255,255,.82) !important;
  color: #172033 !important;
}

:root:not([data-mode="dark"]) .mode-card::after {
  color: color-mix(in srgb, var(--accent) 72%, transparent) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent2) 32%, transparent) !important;
}

:root:not([data-mode="dark"]) .mode-card *,
:root:not([data-mode="dark"]) .solo-card *,
:root:not([data-mode="dark"]) .play-card *,
:root:not([data-mode="dark"]) .multi-card * {
  color: #172033 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .mode-label,
:root:not([data-mode="dark"]) .theme-label,
:root:not([data-mode="dark"]) .section-title {
  color: #111827 !important;
}

:root:not([data-mode="dark"]) .mode-desc,
:root:not([data-mode="dark"]) .muted,
:root:not([data-mode="dark"]) .tiny,
:root:not([data-mode="dark"]) .theme-desc {
  color: #4b5a70 !important;
}

:root:not([data-mode="dark"]) .mode-icon {
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
    color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
}

:root:not([data-mode="dark"]) .mode-badge,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
    color-mix(in srgb, var(--accent) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(17,24,39,.08)) !important;
  color: #1f2937 !important;
}

:root:not([data-mode="dark"]) .btn.primary,
:root:not([data-mode="dark"]) .g-game-tile-launch,
:root:not([data-mode="dark"]) .g-score-badge,
:root:not([data-mode="dark"]) .g-todo-badge {
  background: linear-gradient(135deg, var(--accent3), var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.48) !important;
}