:root {
  --bg: #0f1226;
  --card: #171a33;
  --text: #eef1ff;
  --muted: #aab0d6;
  --accent: #6c79ff;
  --accent-2: #55e6a5;
  --danger: #ff5d7d;
  --ok: #36d399;
}

/* 🌞 Thème clair */
:root.light {
  --bg: #f7f9fc;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --accent: #4b5bff;
  --accent-2: #20c997;
  --danger: #ff4d6d;
  --ok: #22c55e;
}

html, body, .card, .btn, .theme-card, .answer-btn {
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1.65;
}

a {
  color: var(--accent-2);
  text-decoration: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
}

/* --- HEADER --- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img { height: 48px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* --- MINI PROFIL --- */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.user-menu .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  background: var(--card);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.user-menu .avatar:hover {
  transform: scale(1.05);
  border-color: var(--accent-2);
}

.user-menu .username {
  font-weight: 600;
  white-space: nowrap;
  font-size: 1.1rem;
}

.user-menu .user-dropdown {
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  min-width: 150px;
  z-index: 99;
  animation: fadeIn 0.2s ease;
}
.user-menu:hover .user-dropdown { display: flex; }

.user-dropdown a {
  color: var(--text);
  text-decoration: none;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.user-dropdown a:last-child { border-bottom: none; }
.user-dropdown a:hover { background: var(--accent); color: white; }

/* --- CARTES ET BOUTONS --- */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: fadeUp 0.3s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.2s ease;
}
.btn.btn-wide,
.btn-wide {
  min-width: 180px;
  justify-content: center;
  text-align: center;
}
.btn:hover { background: #7a86ff; transform: translateY(-2px) scale(1.03); }
.btn:active { transform: scale(0.97); }

.btn.secondary { background: #2a2f58; color: white; }
.btn.secondary:hover { background: #343b6e; }

.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #ff7392; }

/* --- GRILLES --- */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- CARTES DE THEMES --- */
.theme-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
  min-height: 180px;
  background: linear-gradient(180deg, rgba(23,26,51,1) 0%, rgba(18,20,42,1) 100%);
}
.theme-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(108,121,255,0.3);
}

/* --- QUESTIONS / REPONSES --- */
.question { font-size: 1.8rem; line-height: 1.45; margin-bottom: 20px; }
.answers { display: grid; gap: 18px; }

.answer-btn {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, #4b55ff, #6c79ff);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: all .2s ease;
  color: #fff;
  font-size: 1.1rem;
}
.answer-btn:hover {
  background: linear-gradient(135deg, #6c79ff, #55e6a5);
  transform: translateY(-3px);
}
.answer-btn:active { transform: scale(0.98); }

/* --- AUTRES --- */
.badge {
  padding: 6px 10px;
  border-radius: 100px;
  background: #2a2f58;
  color: #cfd2ff;
  font-weight: 700;
  font-size: .95rem;
}
footer { margin-top: 48px; color: var(--muted); font-size: 1rem; }

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  object-fit: cover;
  margin-bottom: 10px;
  background: #111;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) { .grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .grid.cols-5 { grid-template-columns: 1fr; }
  .theme-card { min-height: 160px; }
  .header { flex-direction: column; align-items: center; text-align: center; }
  .header-right { flex-direction: column; gap: 8px; }
}

/* ==============================
   ✅ Correctifs du thème clair
   ============================== */
:root.light body { background: var(--bg); color: var(--text); }
:root.light .card { background: var(--card); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
:root.light .theme-card {
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f1f4ff 100%) !important;
  border: 1px solid #d4d8e8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
:root.light .btn.secondary {
  background: #e3e6fa !important;
  color: var(--text) !important;
  border: 1px solid #ccd0f5;
}
:root.light .btn.secondary:hover { background: #d5daf6 !important; }
:root.light .answer-btn {
  background: linear-gradient(135deg, #ffffff, #eaeefb);
  color: #1a1a1a;
  border: 1px solid #d8d8f0;
}
:root.light .answer-btn:hover {
  background: linear-gradient(135deg, #eaeefb, #d4e9ff);
}

/* ===========================
   🎮 Lisibilité & gradients des boutons de jeu
   =========================== */
.answer-btn {
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3a3f9f, #2f356e);
  color: #ffffff;
  border: none;
  font-weight: 600;
  text-align: left;
  font-size: 1.1rem;
  transition: all .2s ease;
}
.answer-btn:hover {
  background: linear-gradient(135deg, #4ac4a8, #55e6a5);
  color: #0a0a0a;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(85,230,165,0.35);
}

/* ===========================
   🔐 Style des formulaires de connexion / inscription
   =========================== */
.form {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.input {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #141630;
  color: #fff;
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(108,121,255,0.5);
}

:root.light .input {
  background: #f9f9ff;
  color: #1a1a1a;
  border: 1px solid #d2d6f0;
}
:root.light .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(75,91,255,0.3);
}

/* Bouton principal sur le login */
.form .btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.form .btn:hover {
  background: linear-gradient(135deg, #6c79ff, #55e6a5);
  transform: translateY(-2px);
}

/* ===========================
   🪟 Modale récap de fin de partie
   =========================== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 10, 22, 0.78);
  backdrop-filter: blur(6px);
  z-index: 900;
}

.modal .box {
  width: min(780px, 100%);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--card);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.modal h3 {
  margin-top: 0;
}

body.modal-open {
  overflow: hidden;
}

.modal table {
  width: 100%;
  margin-top: 16px;
}

.modal .table td,
.modal .table th {
  white-space: normal;
}
.btn-wide { min-width: 170px; justify-content: center; text-align: center; }