:root {
  /* Couleurs de fond avec plus de profondeur */
  --bg-0: #080c16;
  --bg-1: #0f172a;
  --bg-2: #16213a;
  --bg-3: #1e293b;
  
  /* Bordures subtiles pour l'effet premium */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  
  /* Typographie contrastée */
  --text-0: #ffffff;
  --text-1: #e2e8f0;
  --text-2: #94a3b8;
  
  /* Accents (Violet moderne) */
  --accent: #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-2: #a78bfa;
  --accent-soft: rgba(139, 92, 246, 0.15);
  --accent-glow: rgba(139, 92, 246, 0.4);
  
  /* Status & Podium */
  --gold: #fbbf24;
  --silver: #cbd5e1;
  --bronze: #d97706;
  --good: #10b981;
  --bad: #ef4444;
  
  /* Géométrie et Animation */
  --radius: 20px;
  --radius-sm: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Polices */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { 
  box-sizing: border-box; 
}

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at 50% -20%, #16213a 0%, var(--bg-0) 80%);
  background-attachment: fixed;
  color: var(--text-0);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

h1, h2, h3, h4 { 
  font-family: var(--font-display); 
  margin: 0; 
  letter-spacing: -0.02em; 
  font-weight: 700;
}
p { margin: 0; line-height: 1.5; }

#app { 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 16px 32px; 
  border-bottom: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.6); 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky; 
  top: 0; 
  z-index: 40;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  cursor: pointer; 
  transition: var(--transition);
  z-index: 2; /* Reste au-dessus */
}
.brand:hover { transform: translateY(-1px); }



.brand .logo {
  width: 38px; 
  height: 38px; 
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px;
  box-shadow: 0 4px 15px var(--accent-glow);
}
.brand span { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.brand small { display:block; color: var(--text-2); font-size: 12px; font-weight: 500; }

.topnav { 
  display: flex; 
  gap: 4px; 
  background: rgba(255, 255, 255, 0.03); 
  padding: 4px; 
  border-radius: 999px; 
  border: 1px solid var(--border);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.top-right { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  z-index: 2; /* Reste au-dessus */
}

.topnav button {
  background: transparent; 
  border: none; 
  color: var(--text-2); 
  padding: 8px 18px;
  border-radius: 999px; 
  font-size: 14px; 
  cursor: pointer; 
  font-weight: 600;
  transition: var(--transition);
}
.topnav button:hover { color: var(--text-0); background: rgba(255,255,255,0.05); }
.topnav button.active { color: #fff; background: var(--accent); box-shadow: 0 2px 10px var(--accent-glow); }

/* ---------- Zone d'accueil / Actions ---------- */
.hero { 
  text-align: center; 
  padding: 60px 20px 30px; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Boîtier qui regroupe la saisie de pseudo et les actions de jeu */
.hero-container {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  padding: 32px;
  border-radius: 24px;
  width: 100%;
  max-width: 580px; /* Aligné sur la taille des éléments */
  margin-top: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Input pseudo stylisé en haut du boîtier */
.hero-container input {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.hero-container input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Séparateur visuel ou grille pour diviser Créer et Rejoindre */
.hero-actions { 
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; 
}

/* Layout en ligne pour la partie "Rejoindre" (Input Code + Bouton côte à côte) */
.join-group {
  display: flex;
  gap: 8px;
  width: 100%;
}
.join-group input {
  margin-bottom: 0; /* Évite le décalage */
  text-transform: uppercase; /* Force le code en majuscules visuellement */
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

/* Ajustement des boutons pour qu'ils prennent bien leur place */
.hero-actions .btn {
  height: 50px; /* Même hauteur harmonisée pour tout le monde */
}

.avatar-pill {
  display: flex; align-items: center; gap: 10px; 
  background: rgba(255,255,255,0.03);
  padding: 6px 16px 6px 6px; 
  border-radius: 999px; 
  border: 1px solid var(--border); 
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.avatar-pill:hover { background: rgba(255,255,255,0.08); border-color: var(--border-hover); }
.avatar-circ {
  width: 28px; height: 28px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); font-size: 15px; color: var(--accent-2);
}

/* ---------- Layout ---------- */
main { flex: 1; padding: 40px 32px; max-width: 1380px; margin: 0 auto; width: 100%; }
.view { display: none; animation: fadein 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.view.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px);} to { opacity:1; transform:none;} }

.card {
  background: rgba(15, 23, 42, 0.4); 
  backdrop-filter: blur(12px);
  border: 1px solid var(--border); 
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.section-title { display:flex; align-items:center; gap:12px; margin-bottom: 20px; }
.section-title h2 { font-size: 15px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

/* ---------- Boutons ---------- */
.btn {
  border: none; cursor: pointer; font-weight: 600; border-radius: var(--radius-sm); 
  padding: 12px 24px; font-size: 14px; font-family: var(--font-body); 
  transition: var(--transition); display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.btn-primary { 
  background: linear-gradient(135deg, var(--accent), #6d28d9); 
  color: #fff; 
  box-shadow: 0 4px 15px var(--accent-glow);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--accent-glow); filter: brightness(1.1); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: rgba(255,255,255,0.05); color: var(--text-0); border: 1px solid var(--border); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--border-hover); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--text-1); border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--border); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform:none !important; box-shadow: none !important; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------- Formulaires ---------- */
input, select {
  background: rgba(0, 0, 0, 0.2); 
  border: 1px solid var(--border); 
  color: var(--text-0);
  border-radius: var(--radius-sm); 
  padding: 14px 16px; 
  font-size: 15px; 
  width: 100%; 
  font-family: inherit;
  transition: var(--transition);
}
input:focus, select:focus { 
  outline: none; 
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: rgba(0, 0, 0, 0.4);
}
input::placeholder { color: var(--text-2); }

label.field-label { display:block; font-size: 13px; color: var(--text-1); margin-bottom: 8px; font-weight: 500; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight:600; padding: 4px 12px; border-radius: 999px; }
.badge-live { background: rgba(16, 185, 129, 0.15); color: var(--good); border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-muted { background: rgba(255,255,255,0.05); color: var(--text-2); border: 1px solid var(--border); }

/* ---------- Home ---------- */
.hero { text-align:center; padding: 60px 20px 40px; }
.hero h1 { font-size: 48px; line-height: 1.1; }
.hero .accent { 
  background: linear-gradient(135deg, var(--accent-2), #fff); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}
.hero p { color: var(--text-2); margin-top: 16px; font-size: 18px; max-width: 600px; margin-inline: auto; }
.hero-actions { display:flex; gap: 16px; justify-content:center; margin-top: 32px; }

.game-modes-card {
  overflow: hidden;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.game-tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: var(--transition);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* L'image reste totalement séparée du titre, du sous-titre et de l'icône. */
.game-tile__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  transform: scale(1.015);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

/* Dégradé de lisibilité placé par-dessus l'image. */
.game-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(5, 9, 18, 0.96) 0%,
      rgba(5, 9, 18, 0.76) 30%,
      rgba(5, 9, 18, 0.18) 66%,
      rgba(5, 9, 18, 0.10) 100%
    );
  transition: background 0.3s ease;
}

.game-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.62);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
}

.game-tile:hover .game-tile__image {
  transform: scale(1.07);
  filter: saturate(1.08) brightness(1.04);
}

.game-tile .emoji {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.35));
}

.game-tile__content {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.game-tile .label {
  display: block;
  color: var(--text-0);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.game-tile .subtitle {
  display: block;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.9);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* État sélectionné conservé pour le JavaScript existant. */
.game-tile.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(139, 92, 246, 0.38),
    0 16px 34px rgba(0, 0, 0, 0.36);
}

.game-tile.selected::before {
  background:
    linear-gradient(
      to top,
      rgba(23, 12, 48, 0.98) 0%,
      rgba(34, 20, 66, 0.76) 32%,
      rgba(139, 92, 246, 0.18) 72%,
      rgba(139, 92, 246, 0.12) 100%
    );
}

.game-tile .toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(8, 12, 22, 0.7);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
}

.game-tile.selected .toggle {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ---------- Lobby ---------- */
.room-code-box { 
  text-align:center; padding: 24px; background: rgba(0,0,0,0.2); 
  border: 1px dashed var(--border-hover); border-radius: var(--radius-sm); margin-bottom: 24px; 
}
.room-code-box .code { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.15em; color: var(--accent-2); font-weight:800; text-shadow: 0 0 20px var(--accent-glow); }

.player-row { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-radius: var(--radius-sm); transition: background 0.2s;}
.player-row:hover { background: rgba(255,255,255,0.03); }
.player-left { display:flex; align-items:center; gap: 12px; font-weight: 500; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(16,185,129,0.4); }
.dot.off { background: var(--text-2); box-shadow: none; }
.host-tag { font-size: 11px; background: var(--accent-soft); color: var(--accent-2); padding: 4px 10px; border-radius: 999px; font-weight:700; text-transform: uppercase; letter-spacing: 0.05em;}

/* ---------- Config ---------- */
.stepper { display:flex; gap:12px; margin-bottom: 28px; }
.step { display:flex; align-items:center; gap:10px; color: var(--text-2); font-size: 14px; font-weight:600; }
.step .num { width: 28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; transition: var(--transition);}
.step.active { color: var(--text-0); }
.step.active .num { background: var(--accent); border-color: var(--accent); color:#fff; box-shadow: 0 0 15px var(--accent-glow);}

.game-pick-row { 
  display:flex; align-items:center; justify-content:space-between; padding: 16px; 
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; 
  background: rgba(255,255,255,0.02); transition: var(--transition);
}
.game-pick-row:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.04); }
.game-pick-left { display:flex; align-items:center; gap: 16px; font-weight: 500;}
.game-pick-left .ic { width: 44px; height:44px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size: 20px;}

.switch { width: 48px; height:26px; border-radius: 999px; background: rgba(0,0,0,0.3); border:1px solid var(--border); position:relative; cursor:pointer; transition: var(--transition);}
.switch.on { background: var(--good); border-color: var(--good); }
.switch .knob { width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition: var(--transition); box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
.switch.on .knob { left: 24px; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }


/* ---------- Lobby + configuration unifiés ---------- */
.lobby-page {
  width: 100%;
  margin: 0 auto;
}

.lobby-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
}

.lobby-eyebrow,
.panel-kicker {
  display: block;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lobby-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 5px 0 8px;
}

.lobby-title-row h1 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.08;
}

.connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12), 0 0 12px rgba(16, 185, 129, 0.65);
}

.connection-badge.connecting,
.connection-badge.reconnecting {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.1);
}
.connection-badge.connecting .connection-dot,
.connection-badge.reconnecting .connection-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);
  animation: pulseConnection 1.2s infinite;
}
.connection-badge.fallback {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(139, 92, 246, 0.12);
}
.connection-badge.fallback .connection-dot {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13);
}
.connection-badge.error {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}
.connection-badge.error .connection-dot {
  background: var(--bad);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
@keyframes pulseConnection { 50% { opacity: 0.35; transform: scale(0.72); } }

.invite-card {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 410px;
  padding: 15px 16px 15px 20px;
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(15, 23, 42, 0.78));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

.invite-card > div:first-child {
  min-width: 138px;
}

.invite-label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invite-code {
  display: block;
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-shadow: 0 0 18px var(--accent-glow);
  white-space: nowrap;
}

.invite-actions {
  display: flex;
  gap: 8px;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.9fr);
  align-items: start;
  gap: 22px;
}

.lobby-roster,
.lobby-config {
  padding: 24px;
}

.lobby-roster {
  position: sticky;
  top: 108px;
}

.lobby-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.lobby-panel-heading h2 {
  margin-top: 4px;
  font-size: 19px;
}

.player-count,
.selection-count,
.live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.live-pill {
  gap: 7px;
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.08);
}
.live-pill > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.65);
}

.lobby-player-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 72px;
}

.lobby-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.lobby-player.is-me {
  border-color: rgba(139, 92, 246, 0.25);
  background: rgba(139, 92, 246, 0.08);
}

.lobby-player-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.lobby-player-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
}

.lobby-player-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 11px;
}

.player-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}
.player-status-dot.offline { background: var(--text-2); box-shadow: none; }

.you-tag {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lobby-empty-player {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}

.lobby-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.07);
  color: var(--text-2);
  font-size: 11px;
}

.config-heading {
  margin-bottom: 21px;
}

.config-section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.config-mode-section {
  padding-top: 0;
  border-top: 0;
}

.config-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.config-section-heading h3 {
  font-size: 14px;
}

.config-section-heading p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 11px;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.segmented-control button {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.segmented-control button:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.045);
}
.segmented-control button.active {
  border-color: rgba(139, 92, 246, 0.65);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.07));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16), 0 7px 20px rgba(0, 0, 0, 0.18);
}
.segmented-control button > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.segmented-control button b { color: var(--text-0); font-size: 12px; }
.segmented-control button small {
  overflow: hidden;
  color: var(--text-2);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.segment-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 17px;
}

.game-picker-heading {
  align-items: center;
}

.game-picker-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 190px;
  height: 35px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-2);
}
.game-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.game-search input {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  box-shadow: none !important;
}

.config-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: 312px;
  padding: 2px 6px 2px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.45) rgba(255, 255, 255, 0.03);
}
.config-game-grid::-webkit-scrollbar { width: 7px; }
.config-game-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.025); border-radius: 999px; }
.config-game-grid::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.4); border-radius: 999px; }

.config-game-card {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding: 11px 38px 11px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--text-1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.config-game-card:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}
.config-game-card.selected {
  border-color: rgba(139, 92, 246, 0.62);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(139, 92, 246, 0.06));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.1);
}
.config-game-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
}
.config-game-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.config-game-copy strong {
  overflow: hidden;
  color: var(--text-0);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-game-copy small {
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-game-check {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: transparent;
  font-size: 11px;
  font-weight: 900;
  transform: translateY(-50%);
}
.config-game-card.selected .config-game-check {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow);
}
.config-empty-state {
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}

.compact-config-section {
  padding-bottom: 8px;
}

.config-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.config-fields input,
.config-fields select {
  height: 43px;
  padding: 10px 12px;
  font-size: 12px;
}
.config-fields .field-label {
  margin-bottom: 6px;
  font-size: 10.5px;
}

.config-warning {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
  font-size: 11px;
}

.lobby-launch-bar {
  position: sticky;
  z-index: 5;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 17px -10px -10px;
  padding: 14px 10px 10px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, rgba(15, 23, 42, 0.98) 72%, rgba(15, 23, 42, 0.75));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.launch-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.launch-summary-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
}
.launch-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.launch-summary strong {
  color: var(--text-0);
  font-size: 12px;
}
.launch-summary span:last-child {
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.launch-button {
  min-width: 190px;
  min-height: 45px;
}

.guest-config-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 20px;
  padding: 17px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.13), rgba(255, 255, 255, 0.025));
}
.guest-config-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(139, 92, 246, 0.18);
  font-size: 24px;
}
.guest-config-hero h3 { font-size: 16px; }
.guest-config-hero p { margin-top: 4px; font-size: 11px; }

.guest-game-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.guest-game-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 700;
}
.guest-game-chip span:first-child { font-size: 17px; }

.guest-waiting-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding: 13px 14px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 13px;
  background: rgba(16, 185, 129, 0.07);
  color: var(--text-2);
  font-size: 11px;
}
.waiting-pulse {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: waitingPulse 1.8s infinite;
}
@keyframes waitingPulse {
  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Gameplay ---------- */
.game-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.timer-pill { font-family: var(--font-display); font-weight:700; font-size: 16px; background: rgba(255,255,255,0.05); padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border); display:flex; align-items:center; gap: 8px;}
.timer-pill.urgent { color: var(--bad); border-color: var(--bad); background: rgba(239, 68, 68, 0.1); animation: pulse 1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

.geo-stage, .property-stage { display:grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }

.pano-wrap, #geoMap, #resultMap, .property-img { 
  height: 480px; border-radius: var(--radius-sm); overflow:hidden; 
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.3); background: #000; position: relative;
}
.pano-wrap { cursor: grab; }
.pano-wrap:active { cursor: grabbing; }
.pano-wrap img, .property-img img { width:100%; height:100%; object-fit: cover; }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(15,23,42,0.8); color: #fff; font-size: 24px;
  cursor: pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(8px); transition: var(--transition);
}
.carousel-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.1); }
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

.carousel-dots { position:absolute; bottom: 16px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor:pointer; transition: var(--transition); }
.carousel-dot:hover { background: rgba(255,255,255,0.6); }
.carousel-dot.active { background: #fff; width: 24px; border-radius: 4px; }

.prop-fact { display:flex; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.prop-fact:last-child { border:none; }

.quiz-choice { 
  display:block; width:100%; text-align:left; padding: 18px 20px; margin-bottom:12px; 
  border-radius: var(--radius-sm); border:1px solid var(--border); 
  background: rgba(255,255,255,0.03); color: var(--text-0); font-size: 16px; 
  cursor:pointer; font-weight:500; transition: var(--transition);
}
.quiz-choice:hover { border-color: var(--accent-2); background: rgba(255,255,255,0.06); transform: translateX(4px); }
.quiz-choice.correct { background: rgba(16,185,129,0.1); border-color: var(--good); color: var(--good); font-weight: 600;}
.quiz-choice.wrong { background: rgba(239,68,68,0.1); border-color: var(--bad); color: var(--bad); text-decoration: line-through;}

.duel-card { cursor:pointer; border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; background:var(--bg-2); transition: var(--transition); }
.duel-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.duel-card.selected { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-glow); }
.duel-card img { width:100%; height:180px; object-fit:cover; display:block; }
.duel-card-label { padding:10px 12px; font-weight:600; font-size:14px; }

.mini-avatars { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.mini-avatar { 
  display:flex; flex-direction:column; align-items:center; gap:6px; 
  background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 10px; 
  min-width: 72px; border: 1px solid var(--border); transition: var(--transition);
}
.mini-avatar:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.mini-avatar .em { font-size:24px; }
.mini-avatar .pts { font-size:12px; color: var(--accent-2); font-weight:700; }
.mini-avatar .nm { font-size: 12px; color: var(--text-2); font-weight: 500;}

/* ---------- Results / Leaderboard ---------- */
.podium { display:flex; align-items:flex-end; justify-content:center; gap: 16px; margin: 32px 0 16px; }
.podium .place { 
  text-align:center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; 
  padding: 20px 24px 16px; color:#000; position: relative; overflow: hidden;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
}
.podium .place::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); pointer-events: none;
}
.podium .place .em { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.place-1 { background: linear-gradient(135deg, #fde047, var(--gold)); height: 160px; order:2; z-index: 3;}
.place-2 { background: linear-gradient(135deg, #f1f5f9, var(--silver)); height: 120px; order:1; z-index: 2;}
.place-3 { background: linear-gradient(135deg, #fba94c, var(--bronze)); height: 90px; order:3; z-index: 1;}
.podium .name { font-weight:800; font-size:15px; margin-top: 8px;}
.podium .score { font-size: 13px; font-weight:700; opacity: 0.8;}

.rank-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 18px; border-radius: var(--radius-sm); transition: var(--transition);}
.rank-row:hover { background: rgba(255,255,255,0.04); transform: scale(1.01); }
.rank-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.rank-left { display:flex; align-items:center; gap: 16px; font-weight: 500;}
.rank-num { width: 28px; text-align:center; font-weight:800; color: var(--text-2); font-family: var(--font-display); font-size: 16px;}

table.data-table { width:100%; border-collapse: collapse; font-size: 14px; }
table.data-table th { 
  text-align:left; color: var(--text-2); font-weight:600; padding: 12px 16px; 
  border-bottom: 2px solid var(--border); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; 
}
table.data-table td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--text-1); font-weight: 500;}
table.data-table tr:hover td { background: rgba(255,255,255,0.02); }

.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight:600; border: 1px solid transparent; }
.tag-green { background: rgba(16,185,129,0.1); color: var(--good); border-color: rgba(16,185,129,0.2); }
.tag-grey { background: rgba(255,255,255,0.05); color: var(--text-2); border-color: var(--border); }

/* ---------- Utilities ---------- */
.text-muted { color: var(--text-2); }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.mt-8{margin-top:8px;} .mt-14{margin-top:16px;} .mt-20{margin-top:24px;} .mb-14{margin-bottom:16px;}
.gap-col { display:flex; flex-direction:column; gap: 16px; }

.toast-banner { 
  background: rgba(15,23,42,0.8); border: 1px solid var(--border); 
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; 
  color: var(--text-1); text-align:center; backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* ---------- Menu Interne CSE ---------- */
.cse-nav { 
  display: flex; 
  gap: 8px; 
  background: rgba(255,255,255,0.03); 
  padding: 4px; 
  border-radius: 999px; 
  border: 1px solid var(--border);
}

.cse-nav button {
  background: transparent; 
  border: none; 
  color: var(--text-2); 
  padding: 8px 18px;
  border-radius: 999px; 
  font-size: 14px; 
  cursor: pointer; 
  font-weight: 600;
  transition: var(--transition);
}

.cse-nav button:hover { 
  color: var(--text-0); 
  background: rgba(255,255,255,0.05); 
}

.cse-nav button.active { 
  color: #fff; 
  background: var(--accent); 
  box-shadow: 0 2px 10px var(--accent-glow);
}

@media (max-width: 1080px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-heading { grid-template-columns: 1fr; }
  .invite-card { min-width: 0; width: 100%; justify-content: space-between; }
  .lobby-layout { grid-template-columns: 1fr; }
  .lobby-roster { position: static; }
  .lobby-player-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .geo-stage, .property-stage, .grid-2 { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .topnav { display:none; }
  main { padding: 24px 16px; }
  .hero h1 { font-size: 32px; }
  .pano-wrap, #geoMap, #resultMap, .property-img { height: 320px; }
  .config-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-picker-heading { align-items: flex-start; flex-direction: column; }
  .game-picker-tools { width: 100%; }
  .game-search { flex: 1; width: auto; }
}

/* Container principal de l'onglet CSE */
#view-cse {
  display: none; /* Géré par la classe .active */
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

#view-cse.active {
  display: flex;
}

/* Les panneaux sont des éléments flex directs : sans largeur explicite,
   les grilles CSE peuvent se réduire à 0 px selon le navigateur. */
#view-cse > [id^="csePanel-"],
#view-cse > .cse-invite-context {
  width: 100%;
}

/* La carte sombre qui englobe les formulaires */
.cse-card {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 24px;
  width: 100%;
  max-width: 640px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  margin-top: 24px;
}

/* Barre d'onglets interne au module CSE (Jouer, Créer, Administrer) */
.cse-tabs-container {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px; /* Crée l'espace indispensable sous les onglets */
  padding-bottom: 12px;
  width: 100%;
}

.cse-tab {
  background: none;
  border: none;
  color: var(--text-2);
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: var(--transition);
}

.cse-tab.active {
  color: var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
}

/* Titre à l'intérieur des sections */
.cse-panel h3 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px; /* Évite que le texte de description ne colle au titre */
  color: var(--text-1);
}

@media (max-width: 620px) {
  .topbar { padding: 12px 14px; }
  .brand small { display: none; }
  .brand span { font-size: 17px; }
  .avatar-pill { padding-right: 10px; }
  .lobby-heading { gap: 16px; }
  .lobby-title-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .invite-card { align-items: stretch; flex-direction: column; gap: 12px; }
  .invite-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .lobby-roster, .lobby-config { padding: 18px; }
  .lobby-player-list { grid-template-columns: 1fr; }
  .segmented-control { grid-template-columns: 1fr; }
  .segmented-control button small { white-space: normal; }
  .config-game-grid, .guest-game-list { grid-template-columns: 1fr; }
  .config-game-grid { max-height: 350px; }
  .config-fields { grid-template-columns: 1fr; }
  .game-picker-tools { flex-wrap: wrap; }
  .game-search { flex-basis: 100%; }
  .lobby-launch-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .launch-button { width: 100%; min-width: 0; }
  .launch-summary span:last-child { white-space: normal; }
}

@media (max-width: 560px) {
  .game-grid { grid-template-columns: 1fr; }
  .game-tile .label { font-size: 18px; }
  .game-tile .subtitle { font-size: 13px; }
}

/* ============================================================
   Accueil 2026 + matchmaking public
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-shell {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 38px 20px 4px;
  text-align: center;
}

.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100px;
  left: 50%;
  width: min(760px, 95vw);
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding: 7px 12px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.home-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

.home-hero h1 {
  max-width: 860px;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.home-hero .accent {
  background: linear-gradient(120deg, #ffffff 0%, #c4b5fd 45%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-hero > p {
  max-width: 680px;
  margin-top: 18px;
  color: var(--text-2);
  font-size: 17px;
}

.home-player-field {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(100%, 480px);
  margin-top: 28px;
  padding: 7px 8px 7px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(
          135deg,
          rgb(99 102 241 / 0.5),
          rgb(109 40 217 / 0.5)
  );
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: text;
  transition: var(--transition);
}

.home-player-field:focus-within {
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 36px rgba(0, 0, 0, 0.25);
}

.home-player-label {
  flex: 0 0 auto;
  color: white;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.home-player-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  flex: 1;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
}

.home-player-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-soft);
  font-size: 16px;
}

.home-player-control input {
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  color: var(--text-0);
  font-size: 14px;
  font-weight: 700;
}

.home-player-edit {
  color: var(--text-2);
  font-size: 14px;
}

.home-play-section {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.36);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.home-section-heading h2 {
  margin-top: 5px;
  font-size: clamp(20px, 2.4vw, 28px);
}

.home-section-heading > p {
  max-width: 430px;
  color: var(--text-2);
  font-size: 12px;
  text-align: right;
}

.home-action-grid {
  display: grid;
  grid-template-columns: 1.12fr 1.12fr 0.9fr;
  gap: 14px;
}

.home-action-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  padding: 21px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transition: var(--transition);
}

.home-action-card::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
}

.home-action-card:hover {
  border-color: var(--border-hover);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

.home-action-card--public {
  border-color: rgba(139, 92, 246, 0.48);
  background:
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(82, 43, 154, 0.42), rgba(21, 20, 53, 0.72));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.08), 0 18px 42px rgba(67, 37, 130, 0.2);
}

.home-action-card--public:hover {
  border-color: rgba(167, 139, 250, 0.8);
  background:
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.34), transparent 40%),
    linear-gradient(145deg, rgba(82, 43, 154, 0.48), rgba(21, 20, 53, 0.78));
}

.home-action-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.home-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 20px;
}
.home-action-topline--title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.home-action-topline--title h3 {
  margin: 0;
}

.home-action-card--public .home-action-icon {
  border-color: rgba(196, 181, 253, 0.28);
  background: rgba(139, 92, 246, 0.22);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.24);
}

.home-recommended-badge,
.home-action-label {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-recommended-badge {
  padding: 5px 8px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.09);
  color: #6ee7b7;
}


.home-action-facts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 20px;
}

.home-action-facts span {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text-1);
  font-size: 9.5px;
  font-weight: 650;
}

.home-action-button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 45px;
  margin-top: auto;
}

.home-action-button > span:last-child {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.home-action-button:hover > span:last-child {
  transform: translateX(3px);
}

.home-join-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: auto;
  align-items: center;
}

.home-join-form input {
  min-width: 0;
  height: 45px;
  padding: 0 12px;
  line-height: 45px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-join-form .btn {
  min-height: 45px;
  padding-inline: 14px;
  grid-column: 1 / -1;
  justify-self: center;
}

.home-join-hint {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 9.5px;
}

.home-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 18px;
  color: var(--text-2);
  font-size: 10.5px;
}

.home-reassurance span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-reassurance span + span::before {
  content: "•";
  margin-right: 11px;
  color: rgba(148, 163, 184, 0.36);
}

.home-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 9px rgba(16, 185, 129, 0.65);
}

.home-section-heading--games {
  margin-bottom: 18px;
}

.game-modes-card {
  padding: 24px;
}

.game-tile {
  width: 100%;
  color: inherit;
  font-family: inherit;
  text-align: left;
}

.game-tile:focus-visible {
  outline: 3px solid rgba(167, 139, 250, 0.7);
  outline-offset: 3px;
}

.game-tile .toggle {
  color: rgba(255, 255, 255, 0.8);
}

.game-tile:hover .toggle {
  border-color: rgba(167, 139, 250, 0.7);
  background: var(--accent);
  color: #fff;
  transform: translateX(2px);
}

/* ---------- Écran de matchmaking ---------- */
.matchmaking-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 28px 0 36px;
}

.matchmaking-back {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.matchmaking-back:hover {
  color: var(--text-0);
  transform: translateX(-3px);
}

.matchmaking-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  padding: 42px 46px 34px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 5%, rgba(139, 92, 246, 0.18), transparent 36%),
    linear-gradient(160deg, rgba(18, 27, 49, 0.94), rgba(9, 14, 27, 0.94));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  text-align: center;
}

.matchmaking-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  pointer-events: none;
}

.matchmaking-card.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  background:
    radial-gradient(circle at 50% 5%, rgba(239, 68, 68, 0.13), transparent 36%),
    linear-gradient(160deg, rgba(31, 24, 39, 0.96), rgba(12, 14, 24, 0.96));
}

.matchmaking-visual {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 25px;
}

.matchmaking-orbit,
.matchmaking-core,
.matchmaking-scan {
  position: absolute;
  border-radius: 50%;
}

.matchmaking-orbit {
  inset: 0;
  border: 1px solid rgba(167, 139, 250, 0.28);
}

.matchmaking-orbit::before,
.matchmaking-orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.85);
}

.matchmaking-orbit::before { top: 9px; left: 35px; }
.matchmaking-orbit::after { right: 8px; bottom: 34px; background: var(--good); box-shadow: 0 0 16px rgba(16, 185, 129, 0.8); }
.matchmaking-orbit--outer { animation: matchmakingOrbit 6s linear infinite; }
.matchmaking-orbit--inner {
  inset: 20px;
  border-style: dashed;
  opacity: 0.72;
  animation: matchmakingOrbit 4.5s linear infinite reverse;
}
.matchmaking-orbit--inner::before { top: -5px; left: 50%; width: 8px; height: 8px; }
.matchmaking-orbit--inner::after { display: none; }

.matchmaking-core {
  inset: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 181, 253, 0.34);
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.38), rgba(79, 70, 229, 0.2));
  box-shadow: 0 0 34px rgba(139, 92, 246, 0.28);
  font-size: 29px;
  z-index: 2;
}

.matchmaking-scan {
  inset: 3px;
  overflow: hidden;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(139, 92, 246, 0.18) 88%, transparent 100%);
  animation: matchmakingScan 2.4s linear infinite;
}

.matchmaking-card.is-error .matchmaking-orbit,
.matchmaking-card.is-error .matchmaking-scan {
  animation-play-state: paused;
  opacity: 0.32;
}

@keyframes matchmakingOrbit { to { transform: rotate(360deg); } }
@keyframes matchmakingScan { to { transform: rotate(360deg); } }

.matchmaking-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.matchmaking-copy h1 {
  margin-top: 6px;
  font-size: clamp(28px, 4vw, 40px);
}

.matchmaking-copy p {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 13px;
}

.matchmaking-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 500px);
  margin-top: 27px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.17);
}

.matchmaking-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
}

.matchmaking-metrics > div + div {
  border-left: 1px solid var(--border);
}

.matchmaking-metrics strong {
  color: var(--text-0);
  font-family: var(--font-display);
  font-size: 24px;
}

.matchmaking-metrics span {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.matchmaking-roster {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}

.matchmaking-player-slot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  color: rgba(148, 163, 184, 0.34);
  font-size: 15px;
  transition: var(--transition);
}

.matchmaking-player-slot.filled {
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
  color: var(--text-0);
  animation: matchPlayerFound 0.35s ease both;
}

.matchmaking-player-slot.me {
  border-color: rgba(139, 92, 246, 0.48);
  background: rgba(139, 92, 246, 0.14);
}

@keyframes matchPlayerFound { from { transform: scale(0.7); opacity: 0; } }

.matchmaking-progress {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  height: 6px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.matchmaking-progress > span {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #c4b5fd);
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width 0.35s ease;
}

.matchmaking-progress > span.indeterminate {
  width: 34%;
  animation: matchmakingProgress 1.6s ease-in-out infinite;
}

@keyframes matchmakingProgress {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

.matchmaking-steps {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 18px;
}

.matchmaking-steps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(148, 163, 184, 0.55);
  font-size: 10px;
  font-weight: 750;
}

.matchmaking-steps i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-style: normal;
  font-size: 8px;
}

.matchmaking-steps span.active {
  color: var(--text-0);
}

.matchmaking-steps span.active i {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow);
}

.matchmaking-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 27px;
}

.matchmaking-footnote {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 10px;
}

/* ---------- Lobby public automatique ---------- */
.lobby-page.is-public .lobby-heading {
  grid-template-columns: 1fr;
}

.lobby-page.is-public .lobby-layout {
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.6fr);
}

.public-lobby-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.public-lobby-heading h2 {
  margin-top: 5px;
  font-size: 21px;
}

.public-lobby-heading p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 11px;
}

.public-auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
  font-size: 10px;
  font-weight: 800;
}

.public-auto-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 9px rgba(16, 185, 129, 0.68);
  animation: pulseConnection 1.4s infinite;
}

.public-launch-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 50%, rgba(139, 92, 246, 0.2), transparent 40%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.02));
}

.public-countdown-ring {
  --progress: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--progress) * 1%), rgba(255, 255, 255, 0.07) 0);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.18);
}

.public-countdown-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  background: #11182a;
}

.public-countdown-ring strong,
.public-countdown-ring span {
  position: relative;
  z-index: 1;
}

.public-countdown-ring strong {
  align-self: end;
  color: #fff;
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1;
}

.public-countdown-ring span {
  align-self: start;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-launch-copy {
  min-width: 0;
}

.public-launch-kicker {
  color: var(--accent-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.public-launch-copy h3 {
  margin-top: 5px;
  font-size: 19px;
}

.public-launch-copy p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 11px;
}

.public-launch-progress {
  height: 5px;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.public-launch-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #c4b5fd);
  transition: width 0.2s linear;
}

.public-config-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.public-config-stat {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.024);
}

.public-config-stat > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 16px;
}

.public-config-stat > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.public-config-stat strong {
  overflow: hidden;
  color: var(--text-0);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-config-stat small {
  overflow: hidden;
  color: var(--text-2);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-games-block {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}

.public-fairness-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 17px;
  padding: 12px 13px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.06);
  color: var(--text-2);
  font-size: 10.5px;
}

/* ---------- Avancement automatique entre les manches publiques ---------- */
.round-auto-advance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.11), rgba(255, 255, 255, 0.025));
}

.round-auto-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: var(--accent-soft);
}

.round-auto-advance > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.round-auto-advance strong {
  font-size: 11.5px;
}

.round-auto-advance span:last-child {
  color: var(--text-2);
  font-size: 9.5px;
}

.round-auto-advance > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 50%;
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 15px;
}

@media (max-width: 1080px) {
  .home-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-action-card--public {
    grid-column: 1 / -1;
    min-height: 250px;
  }
  .lobby-page.is-public .lobby-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-hero {
    padding-inline: 0;
  }
  .home-hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }
  .home-hero > p {
    font-size: 14px;
  }
  .home-player-field {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    text-align: left;
  }
  .home-player-label {
    padding-left: 4px;
  }
  .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .home-section-heading > p {
    text-align: left;
  }
  .home-action-grid {
    grid-template-columns: 1fr;
  }
  .home-action-card--public {
    grid-column: auto;
  }
  .home-action-card {
    min-height: 270px;
  }
  .home-reassurance {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-reassurance span + span::before {
    display: none;
  }
  .matchmaking-card {
    padding: 34px 20px 28px;
  }
  .public-config-summary {
    grid-template-columns: 1fr;
  }
  .public-config-stat strong,
  .public-config-stat small {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .home-play-section,
  .game-modes-card {
    padding: 18px;
    border-radius: 18px;
  }
  .home-action-card {
    padding: 18px;
  }
  .home-join-form {
    grid-template-columns: 1fr;
  }
  .matchmaking-page {
    padding-top: 10px;
  }
  .matchmaking-visual {
    width: 128px;
    height: 128px;
  }
  .matchmaking-core {
    inset: 36px;
  }
  .matchmaking-metrics {
    grid-template-columns: 1fr;
  }
  .matchmaking-metrics > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .matchmaking-actions {
    width: 100%;
    flex-direction: column-reverse;
  }
  .matchmaking-actions .btn {
    width: 100%;
  }
  .public-lobby-heading {
    flex-direction: column;
  }
  .public-launch-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .public-launch-copy {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .matchmaking-orbit,
  .matchmaking-scan,
  .matchmaking-progress > span.indeterminate,
  .public-auto-badge span {
    animation: none !important;
  }
}

/* ============================================================
   REFONTE VISUELLE 2026 — ACCUEIL, PROFIL, ROUNDS ET FOOTER
   ============================================================ */

[hidden] { display: none !important; }

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(76, 55, 142, 0.32), transparent 34%),
    radial-gradient(circle at 8% 38%, rgba(37, 99, 235, 0.08), transparent 28%),
    #070b14;
}

main {
  max-width: 1460px;
  padding: 34px 32px 70px;
}

#view-home,
#view-profile,
.info-view {
  animation-duration: 0.55s;
}

/* ---------- Navigation affinée ---------- */
.topbar {
  min-height: 68px;
  padding: 13px 28px;
  background: rgba(8, 13, 26, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.brand .logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.28), transparent 20%),
    linear-gradient(145deg, #9b70ff, #5e38df 70%);
}

.brand span { font-size: 19px; }
.brand small { margin-top: 1px; font-size: 10.5px; }

.topnav {
  gap: 3px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.topnav button {
  min-width: 78px;
  padding: 7px 16px;
  font-size: 12px;
}

.avatar-pill {
  min-height: 39px;
  padding-right: 14px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

/* ---------- Nouvelle scène d'accueil ---------- */
.home-shell--modern {
  display: grid;
  gap: 26px;
  width: min(100%, 1240px);
  margin: 0 auto;
}

.home-showcase {
  position: relative;
  isolation: isolate;
  min-height: 354px;
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 30px;
  background:
    linear-gradient(130deg, rgba(15, 23, 43, 0.9), rgba(7, 11, 22, 0.96)),
    radial-gradient(circle at 72% 38%, rgba(139, 92, 246, 0.18), transparent 39%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.home-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 63% 45%, #000 14%, transparent 76%);
}

.home-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 10, 19, 0.12), transparent 25%, transparent 77%, rgba(6, 10, 19, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 56%, rgba(6, 10, 19, 0.2));
}

.home-showcase-orb {
  position: absolute;
  z-index: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.18;
  pointer-events: none;
}

.home-showcase-orb--one {
  top: -210px;
  left: 16%;
  background: #8b5cf6;
}

.home-showcase-orb--two {
  right: 4%;
  bottom: -210px;
  background: #2563eb;
}

.home-showcase-layout {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(350px, 0.8fr) minmax(540px, 1.2fr);
  align-items: center;
  gap: 8px;
  min-height: 308px;
}

.home-showcase-content {
  position: relative;
  z-index: 8;
  width: auto;
  margin: 0;
  padding: 18px 12px 18px 24px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.home-showcase h1 {
  margin: 0;
  font-size: clamp(32px, 3.25vw, 45px);
  line-height: 1.01;
  letter-spacing: -0.052em;
}

.home-showcase h1 > span {
  display: block;
  white-space: nowrap;
}

.home-showcase .accent,
.info-hero .accent {
  color: transparent;
  background: linear-gradient(100deg, #ffffff 5%, #c4b5fd 43%, #a78bfa 75%, #f0eaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-showcase-content > p {
  max-width: 440px;
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.56;
}

.home-player-field {
  width: min(100%, 392px);
  margin: 18px 0 0;
}

/* ---------- Carrousel de véritables aperçus de rounds ---------- */
.hero-round-carousel {
  position: relative;
  z-index: 5;
  min-width: 0;
  height: 304px;
  border-radius: 22px;
  outline: none;
  touch-action: pan-y;
}

.hero-round-carousel:focus-visible {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.hero-round-stage {
  position: absolute;
  inset: 2px 38px 31px;
  overflow: visible;
  perspective: 1200px;
}

.hero-round-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(430px, 78%);
  height: 244px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.58);
  transform-origin: 50% 116%;
  filter: saturate(0.72) brightness(0.72);
  transition:
    transform 0.52s cubic-bezier(0.2, 0.78, 0.2, 1),
    opacity 0.34s ease,
    filter 0.34s ease;
  will-change: transform, opacity;
}

.hero-round-card[data-position="active"] {
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateY(-7px) rotate(0deg) scale(1);
  filter: none;
  cursor: default;
}

.hero-round-card[data-position="prev"],
.hero-round-card[data-position="next"] {
  z-index: 4;
  opacity: 0.48;
  pointer-events: auto;
  cursor: pointer;
}

.hero-round-card[data-position="prev"] {
  transform: translate(-50%, -50%) translate(-214px, 16px) rotate(-3.2deg) scale(0.77);
}

.hero-round-card[data-position="next"] {
  transform: translate(-50%, -50%) translate(214px, 16px) rotate(3.2deg) scale(0.77);
}

.hero-round-card[data-position="far-prev"],
.hero-round-card[data-position="far-next"] {
  z-index: 2;
  opacity: 0.12;
}

.hero-round-card[data-position="far-prev"] {
  transform: translate(-50%, -50%) translate(-345px, 38px) rotate(-5.5deg) scale(0.57);
}

.hero-round-card[data-position="far-next"] {
  transform: translate(-50%, -50%) translate(345px, 38px) rotate(5.5deg) scale(0.57);
}

.hero-round-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: #09101e;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-round-card[data-position="active"] .hero-round-window {
  border-color: rgba(196, 181, 253, 0.52);
  box-shadow:
    0 26px 66px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(139, 92, 246, 0.11),
    0 0 34px rgba(109, 40, 217, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.hero-round-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  flex: 0 0 42px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(12, 19, 35, 0.97);
}

.hero-round-game-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 9px;
  background: rgba(139, 92, 246, 0.1);
  font-size: 14px;
}

.hero-round-game-copy {
  min-width: 0;
  text-align: left;
}

.hero-round-game-copy strong {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 10.5px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-round-game-copy small {
  display: block;
  margin-top: 3px;
  color: #7f8da5;
  font-size: 7px;
  font-weight: 650;
}

.hero-round-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: #e2e8f0;
  font-size: 7.5px;
  font-weight: 800;
}

.hero-round-timer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.65);
}

.hero-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #090f1d;
}

.hero-preview--split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(122px, 0.8fr);
}

.hero-preview-media,
.hero-duel-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(167, 139, 250, 0.18), transparent 31%),
    linear-gradient(145deg, #1d2942, #0b1221);
}

.hero-preview-media::after,
.hero-duel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 7, 18, 0.22));
}

.hero-preview-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.hero-preview-media.has-image > .hero-preview-image,
.hero-duel-card.has-image > .hero-preview-image {
  opacity: 1;
}

.hero-preview-media.is-missing::before,
.hero-duel-card.is-missing::before {
  content: "Aperçu du round";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(226, 232, 240, 0.44);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-preview-badge {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(3, 7, 18, 0.72);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  font-size: 6.3px;
  font-weight: 800;
}

.hero-preview-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  text-align: left;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.1), transparent 45%),
    #0c1324;
}

.hero-preview-eyebrow,
.hero-quiz-heading > span,
.hero-duel-question > span {
  display: block;
  color: #a78bfa;
  font-size: 6.2px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-preview-panel > strong {
  margin-top: 5px;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 10.5px;
  line-height: 1.23;
}

.hero-mini-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
}

.hero-mini-facts span {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.hero-mini-facts small,
.hero-mini-facts b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-mini-facts small {
  color: #718096;
  font-size: 5.5px;
  text-transform: uppercase;
}

.hero-mini-facts b {
  margin-top: 3px;
  color: #e2e8f0;
  font-size: 7px;
}

.hero-mini-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.54);
  color: rgba(148, 163, 184, 0.82);
  font-size: 6.7px;
  font-weight: 650;
}

.hero-mini-input b { color: #f8fafc; font-size: 6.8px; }

.hero-mini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  margin-top: auto;
  padding: 5px 8px;
  border-radius: 7px;
  background: linear-gradient(110deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 6.8px;
  font-weight: 850;
  box-shadow: 0 7px 18px rgba(109, 40, 217, 0.25);
}

.hero-mini-copy {
  margin-top: 7px;
  color: #8190a8;
  font-size: 6.4px;
  line-height: 1.45;
}

/* GeoGuessr : photo Mapillary réelle avec repli CSS hors ligne. */
.hero-preview-media--geo {
  background: linear-gradient(#8ec5e9 0 42%, #8da06c 42% 62%, #536348 62% 100%);
}

.hero-geo-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-geo-fallback::before,
.hero-geo-fallback::after {
  content: "";
  position: absolute;
  bottom: 34%;
  width: 72%;
  height: 43%;
  background: #536b65;
  clip-path: polygon(0 100%, 20% 39%, 35% 67%, 53% 18%, 68% 58%, 83% 30%, 100% 100%);
}

.hero-geo-fallback::before { right: -7%; }
.hero-geo-fallback::after { left: -9%; bottom: 30%; background: #738783; opacity: 0.88; }

.hero-geo-fallback i:first-child {
  position: absolute;
  z-index: 2;
  left: 31%;
  bottom: -28%;
  width: 53%;
  height: 94%;
  background: linear-gradient(90deg, #6b7075 0 47%, #e9d887 48% 51%, #6b7075 52%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  transform: rotate(-4deg);
}

.hero-geo-fallback i:nth-child(2),
.hero-geo-fallback i:nth-child(3) {
  position: absolute;
  z-index: 3;
  bottom: 17%;
  width: 22px;
  height: 48px;
  background: linear-gradient(#2f5145 0 65%, #49362a 66% 100%);
  clip-path: polygon(50% 0, 100% 64%, 66% 64%, 66% 100%, 34% 100%, 34% 64%, 0 64%);
}

.hero-geo-fallback i:nth-child(2) { left: 12%; }
.hero-geo-fallback i:nth-child(3) { right: 9%; transform: scale(0.78); }

.hero-preview-media--geo.has-image .hero-geo-fallback { opacity: 0; }

.hero-geo-compass {
  position: absolute;
  z-index: 4;
  top: 9px;
  left: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(7, 11, 20, 0.64);
  color: #fff;
  font-size: 7px;
  font-weight: 900;
}

.hero-mini-map {
  position: relative;
  min-height: 82px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 9px;
  background-color: #d8ddca;
  background-image:
    linear-gradient(rgba(91, 112, 78, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 112, 78, 0.1) 1px, transparent 1px);
  background-size: 15px 15px;
}

.hero-mini-map::before {
  content: "";
  position: absolute;
  top: -15%;
  right: -24%;
  width: 58%;
  height: 135%;
  border-radius: 50%;
  background: #a9d4df;
  transform: rotate(13deg);
}

.hero-mini-road {
  position: absolute;
  height: 4px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  background: #e9bb64;
}

.hero-mini-road--one { top: 28%; left: -12%; width: 108%; transform: rotate(18deg); }
.hero-mini-road--two { top: 59%; left: 4%; width: 86%; transform: rotate(-17deg); }
.hero-mini-road--three { top: 8%; left: 43%; width: 4px; height: 88%; transform: rotate(7deg); }

.hero-mini-pin {
  position: absolute;
  top: 38%;
  left: 48%;
  width: 15px;
  height: 15px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50% 50% 50% 8%;
  background: #8b5cf6;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(67, 56, 202, 0.32);
}

/* Quiz */
.hero-preview--quiz {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 13% 25%, rgba(236, 72, 153, 0.2), transparent 30%),
    radial-gradient(circle at 86% 72%, rgba(124, 58, 237, 0.22), transparent 38%),
    #0b0f20;
}

.hero-quiz-heading { text-align: left; }
.hero-quiz-heading strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.25;
}

.hero-quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hero-quiz-choices span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: #cbd5e1;
  font-size: 6.6px;
  font-weight: 700;
}

.hero-quiz-choices b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.1);
  color: #c4b5fd;
  font-size: 6px;
}

.hero-quiz-choices span.is-selected {
  border-color: rgba(167, 139, 250, 0.58);
  background: rgba(139, 92, 246, 0.18);
  color: #fff;
}

/* ChronoGuessr */
.hero-preview-media--chrono .hero-preview-image { filter: saturate(0.62) contrast(1.04); }
.hero-preview-panel--year { justify-content: center; }
.hero-mini-year {
  display: grid;
  place-items: center;
  min-height: 53px;
  margin-top: 10px;
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 10px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 69%);
  color: #c4b5fd;
  font: 800 21px/1 var(--font-display);
}

.hero-mini-range {
  position: relative;
  height: 14px;
  margin: 7px 2px 0;
}

.hero-mini-range::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #475569, #8b5cf6 55%, #475569);
}

.hero-mini-range i {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 54%;
  width: 12px;
  height: 12px;
  border: 3px solid #ddd6fe;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

/* PixelGuessr */
.hero-preview-media--pixel .hero-preview-image--pixel {
  transform: scale(1.1);
  filter: blur(7px) saturate(1.15);
}

.hero-pixel-focus {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 11px 11px;
  mix-blend-mode: overlay;
}

/* DuelGuessr */
.hero-preview--duel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: 9px 12px 11px;
  background:
    radial-gradient(circle at 50% 54%, rgba(124, 58, 237, 0.19), transparent 36%),
    #0a0e1b;
}

.hero-duel-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2px 8px;
  text-align: left;
}

.hero-duel-question > span { grid-column: 1; }
.hero-duel-question strong {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 9px;
}

.hero-duel-question small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #c4b5fd;
  font-size: 6.5px;
  font-weight: 800;
}

.hero-duel-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  min-height: 0;
}

.hero-duel-card {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
}

.hero-duel-card.is-picked { border-color: rgba(167, 139, 250, 0.48); }
.hero-duel-card > span {
  position: absolute;
  z-index: 4;
  left: 7px;
  right: 7px;
  bottom: 7px;
  overflow: hidden;
  color: #fff;
  font-size: 6.7px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-duel-versus {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(196, 181, 253, 0.3);
  border-radius: 50%;
  background: #17122d;
  color: #c4b5fd;
  font: 800 7px/1 var(--font-display);
  transform: translate(-50%, -50%);
}

/* Navigation du carrousel */
.hero-round-nav {
  position: absolute;
  z-index: 10;
  top: 46%;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  background: rgba(11, 18, 33, 0.88);
  color: #e2e8f0;
  font: 500 20px/1 var(--font-body);
  cursor: pointer;
  transform: translateY(-50%);
  transition: 0.2s ease;
}

.hero-round-nav--prev { left: 3px; }
.hero-round-nav--next { right: 3px; }

.hero-round-nav:hover,
.hero-round-nav:focus-visible {
  border-color: rgba(196, 181, 253, 0.55);
  background: rgba(139, 92, 246, 0.17);
  color: #fff;
  outline: none;
  transform: translateY(-50%) scale(1.06);
}

.hero-round-pagination {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 5px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-round-pagination button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.34);
  cursor: pointer;
  transition: width 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.hero-round-pagination button.active {
  width: 20px;
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.58);
}

.hero-round-pagination button:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.8);
  outline-offset: 3px;
}


.home-play-section {
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(20, 29, 52, 0.82), rgba(11, 17, 31, 0.82));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.home-section-heading h2 { font-size: clamp(25px, 3vw, 34px); }
.home-section-heading > p { max-width: 470px; font-size: 12px; line-height: 1.6; }


.home-action-facts span { font-size: 10px; }

/* ---------- Footer ---------- */
.site-footer {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.1), transparent 32%),
    rgba(6, 10, 19, 0.92);
}

.site-footer-inner,
.site-footer-bottom {
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(440px, 1fr);
  gap: 70px;
  padding: 50px 0 40px;
}

.footer-brand-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.footer-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: linear-gradient(145deg, #8b5cf6, #4338ca);
  box-shadow: 0 8px 24px rgba(109, 40, 217, 0.34);
}

.footer-brand-block strong {
  font-family: var(--font-display);
  font-size: 20px;
}

.footer-brand-block p {
  max-width: 390px;
  margin-top: 7px;
  color: var(--text-2);
  font-size: 12px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.footer-nav > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-nav strong {
  margin-bottom: 3px;
  color: var(--text-1);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-nav button:hover {
  color: #c4b5fd;
  transform: translateX(3px);
}

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #64748b;
  font-size: 10.5px;
}

/* ---------- Pages éditoriales ---------- */
.info-page {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 42px 0 30px;
}

.info-page--narrow { width: min(100%, 880px); }

.info-hero {
  max-width: 840px;
  margin-bottom: 46px;
}

.info-hero h1 {
  margin-top: 13px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.info-hero > p {
  max-width: 690px;
  margin-top: 20px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.72;
}

.info-feature-grid,
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.info-feature-grid article,
.community-grid article,
.privacy-stack article,
.info-story-card,
.faq-list details {
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: linear-gradient(145deg, rgba(21, 31, 55, 0.72), rgba(11, 17, 31, 0.75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 42px rgba(0, 0, 0, 0.18);
}

.info-feature-grid article,
.community-grid article {
  min-height: 260px;
  padding: 28px;
  border-radius: 20px;
}

.info-feature-grid article > span,
.community-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.11);
  font-size: 21px;
}

.info-feature-grid h2,
.community-grid h2 {
  margin-top: 24px;
  font-size: 21px;
}

.info-feature-grid p,
.community-grid p {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.65;
}

.info-story-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 34px;
  margin-top: 18px;
  padding: 30px;
  border-radius: 20px;
}

.info-story-card h2 { margin-top: 8px; font-size: 24px; }
.info-story-card > p { color: var(--text-2); font-size: 12.5px; line-height: 1.7; }
.info-story-card .btn { white-space: nowrap; }

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  padding: 0 24px;
  border-radius: 17px;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  color: var(--text-0);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: #a78bfa; font-size: 22px; font-weight: 500; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 0 22px; color: var(--text-2); font-size: 12.5px; line-height: 1.7; }

.community-grid article {
  display: flex;
  flex-direction: column;
}

.community-grid .btn { align-self: flex-start; margin-top: auto; }
.community-primary-card {
  border-color: rgba(139, 92, 246, 0.4) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.24), transparent 45%),
    linear-gradient(145deg, rgba(43, 30, 82, 0.82), rgba(13, 18, 35, 0.82)) !important;
}

.privacy-stack { display: grid; gap: 13px; }
.privacy-stack article { padding: 24px 26px; border-radius: 18px; }
.privacy-stack h2 { font-size: 17px; }
.privacy-stack p { margin-top: 8px; color: var(--text-2); font-size: 12.5px; line-height: 1.68; }

/* ---------- Profil ---------- */
.profile-page {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 20px 0 30px;
}

.profile-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 188px;
  padding: 34px 38px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  background:
    radial-gradient(circle at 4% 12%, rgba(139, 92, 246, 0.26), transparent 30%),
    radial-gradient(circle at 91% 100%, rgba(37, 99, 235, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(22, 31, 55, 0.9), rgba(10, 15, 29, 0.91));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.profile-hero-card::after {
  content: "";
  position: absolute;
  right: -45px;
  top: -70px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(167, 139, 250, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(167, 139, 250, 0.025), 0 0 0 76px rgba(167, 139, 250, 0.015);
}

.profile-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar-large {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(196, 181, 253, 0.3);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.32), rgba(79, 70, 229, 0.18));
  box-shadow: 0 14px 36px rgba(76, 29, 149, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 42px;
}

.profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.profile-status-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
}

.profile-status-badge.is-connected { color: #6ee7b7; }
.profile-status-badge.is-connected i { background: #10b981; box-shadow: 0 0 11px rgba(16, 185, 129, 0.75); }

.profile-identity h1 {
  margin-top: 8px;
  font-size: 31px;
  letter-spacing: -0.04em;
}

.profile-identity p { margin-top: 5px; color: var(--text-2); font-size: 12px; }

.profile-overview-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(5, 9, 18, 0.34);
  backdrop-filter: blur(10px);
}

.profile-overview-metrics > div {
  min-width: 92px;
  padding: 17px 18px;
  text-align: center;
}

.profile-overview-metrics > div + div { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.profile-overview-metrics strong { display: block; font-family: var(--font-display); font-size: 24px; }
.profile-overview-metrics span { display: block; margin-top: 2px; color: var(--text-2); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; }

.profile-tabs {
  display: flex;
  gap: 6px;
  margin: 20px 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  width: max-content;
}

.profile-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.22s ease;
}

.profile-tabs button:hover { color: var(--text-0); background: rgba(255, 255, 255, 0.04); }
.profile-tabs button.active { color: #fff; background: rgba(139, 92, 246, 0.2); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25); }
.profile-tabs button > span { color: #a78bfa; }
.profile-tabs b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #8b5cf6;
  color: #fff;
  font-size: 9px;
}

.profile-panel { display: none; animation: profilePanelIn 0.35s ease; }
.profile-panel.active { display: block; }
@keyframes profilePanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.profile-auth-layout,
.profile-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.85fr);
  gap: 18px;
}

.profile-auth-card,
.profile-benefits-card,
.profile-settings-card,
.profile-account-card,
.friends-invite-card,
.friends-list-card,
.profile-activity-card,
.profile-gated-card {
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(20, 29, 51, 0.79), rgba(10, 16, 30, 0.82));
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profile-auth-card,
.profile-settings-card,
.profile-account-card,
.profile-activity-card { padding: 30px; }

.profile-auth-card h2,
.profile-settings-card h2,
.profile-account-card h2,
.friends-invite-card h2,
.friends-list-card h2,
.profile-activity-card h2 {
  margin-top: 7px;
  font-size: 24px;
}

.profile-auth-card > p {
  max-width: 620px;
  margin: 10px 0 24px;
  color: var(--text-2);
  font-size: 12.5px;
}

.profile-auth-card .field-label { margin-top: 13px; }
.auth-register-only { color: #64748b; font-size: 9px; font-weight: 500; }

.profile-auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.profile-feedback {
  min-height: 18px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1.5;
}

.profile-feedback.is-success { color: #6ee7b7; }
.profile-feedback.is-error { color: #fca5a5; }

.profile-benefits-card {
  position: relative;
  overflow: hidden;
  padding: 34px 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.25), transparent 42%),
    linear-gradient(145deg, rgba(42, 30, 80, 0.82), rgba(12, 18, 34, 0.85));
}

.profile-benefits-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.22);
  color: #ddd6fe;
  font-size: 22px;
}

.profile-benefits-card h3 { margin-top: 24px; font-size: 22px; }
.profile-benefits-card ul { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; }
.profile-benefits-card li { display: flex; gap: 10px; color: var(--text-1); font-size: 11.5px; }
.profile-benefits-card li span { color: #6ee7b7; }
.profile-benefits-card > p { color: var(--text-2); font-size: 10px; }

.profile-card-heading,
.friends-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.profile-unsaved {
  padding: 6px 9px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.07);
  color: #fcd34d;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-field-spacing { margin-top: 18px !important; }
.profile-avatar-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.profile-avatar-picker .avatar-opt {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  transition: 0.2s ease;
}
.profile-avatar-picker .avatar-opt:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.45) !important; }
.profile-avatar-picker .avatar-opt.selected { border-color: #8b5cf6 !important; background: rgba(139, 92, 246, 0.18) !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.13); }
.profile-save-button { margin-top: 24px; }

.profile-account-card h2 { margin-bottom: 20px; }
.profile-account-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}
.profile-account-detail span { color: var(--text-2); font-size: 11px; }
.profile-account-detail strong { overflow: hidden; max-width: 65%; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-logout-button { width: 100%; margin-top: 22px; }

.developer-options { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.developer-options summary { color: #64748b; font-size: 9.5px; cursor: pointer; }
.developer-options #devOptionsBox { display: block !important; margin-top: 13px; }
.developer-options p { margin-top: 8px; color: var(--text-2); font-size: 9.5px; }

.profile-gated-card {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 44px;
  text-align: center;
}
.profile-gated-card > span { font-size: 42px; }
.profile-gated-card h2 { margin-top: 18px; font-size: 25px; }
.profile-gated-card p { max-width: 480px; margin: 9px 0 20px; color: var(--text-2); font-size: 12px; }

.friends-invite-card {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(390px, 1.25fr);
  align-items: center;
  gap: 32px;
  padding: 28px 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.18), transparent 45%),
    linear-gradient(145deg, rgba(24, 32, 58, 0.85), rgba(10, 16, 30, 0.86));
}

.friends-invite-card > div:first-child p { margin-top: 8px; color: var(--text-2); font-size: 11px; }
.friends-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.friends-invite-card > .profile-feedback { grid-column: 2; margin: -22px 0 0; }

.friends-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.friends-summary-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.53);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  transition: 0.22s ease;
}
.friends-summary-grid button:hover { border-color: rgba(167, 139, 250, 0.3); color: var(--text-0); }
.friends-summary-grid button.active { border-color: rgba(139, 92, 246, 0.48); background: rgba(139, 92, 246, 0.11); color: #fff; }
.friends-summary-grid button span { font-size: 11px; font-weight: 700; }
.friends-summary-grid button strong { font-family: var(--font-display); font-size: 25px; }

.friends-list-card { min-height: 300px; padding: 28px 30px; }
.social-list { display: grid; gap: 9px; }
.social-empty-state {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 24px;
  color: var(--text-2);
  text-align: center;
}
.social-empty-state span { font-size: 30px; }
.social-empty-state strong { margin-top: 10px; color: var(--text-1); font-size: 13px; }
.social-empty-state p { max-width: 420px; margin-top: 6px; font-size: 10.5px; }

.social-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.022);
  transition: 0.2s ease;
}
.social-row:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.035); }
.social-user { display: flex; align-items: center; min-width: 0; gap: 12px; }
.social-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 13px;
  background: rgba(139, 92, 246, 0.1);
  font-size: 21px;
}
.social-user-copy { min-width: 0; }
.social-user-copy strong { display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.social-user-copy span { display: block; margin-top: 3px; color: var(--text-2); font-size: 9.5px; }
.social-row-actions { display: flex; align-items: center; gap: 7px; }
.social-row-actions .btn { min-height: 34px; padding: 7px 11px; font-size: 9.5px; }
.social-status-pill { padding: 6px 9px; border-radius: 999px; background: rgba(251, 191, 36, 0.08); color: #fcd34d; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.social-notification-control { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 9px; }
.social-notification-control .switch { transform: scale(0.82); transform-origin: right center; }

.activity-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.activity-stat-card {
  min-height: 118px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 29, 51, 0.72), rgba(10, 16, 30, 0.76));
}
.activity-stat-card span { color: var(--text-2); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; }
.activity-stat-card strong { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 27px; }
.activity-stat-card small { display: block; margin-top: 4px; color: #64748b; font-size: 9px; }
.profile-history-list { display: grid; gap: 8px; }
.profile-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.profile-history-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(139, 92, 246, 0.1); }
.profile-history-copy strong { display: block; font-size: 11.5px; }
.profile-history-copy span { display: block; margin-top: 3px; color: var(--text-2); font-size: 9px; }
.profile-history-score { text-align: right; }
.profile-history-score strong { display: block; color: #c4b5fd; font-size: 12px; }
.profile-history-score span { color: var(--text-2); font-size: 8.5px; }

/* ---------- Expérience de round ---------- */
#view-play,
#view-roundResult,
#view-final { width: 100%; }

.round-page,
.round-result-page,
.final-page {
  width: min(100%, 1320px);
  margin: 0 auto;
}

.round-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 18px;
  background: rgba(12, 19, 35, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.round-mode-identity { display: flex; align-items: center; min-width: 0; gap: 13px; }
.round-mode-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(79, 70, 229, 0.1));
  font-size: 23px;
}
.round-eyebrow { color: #a78bfa; font-size: 9px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.round-mode-identity h1 { margin-top: 4px; font-size: 19px; }

.round-timer {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 148px;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(3, 7, 15, 0.34);
}
.round-timer-gauge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(#8b5cf6 var(--timer-progress), rgba(255, 255, 255, 0.07) 0);
}
.round-timer-gauge::after { content: "⏱"; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #0c1425; font-size: 13px; }
.round-timer small { display: block; color: var(--text-2); font-size: 8px; text-transform: uppercase; letter-spacing: 0.07em; }
.round-timer strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; }
.round-timer.urgent { border-color: rgba(239, 68, 68, 0.46); background: rgba(127, 29, 29, 0.13); animation: none; }
.round-timer.urgent .round-timer-gauge { background: conic-gradient(#ef4444 var(--timer-progress), rgba(255, 255, 255, 0.07) 0); }
.round-timer.urgent strong { color: #fca5a5; }

.round-progress-track {
  height: 3px;
  margin: 10px 8px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}
.round-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #c4b5fd); transition: width 0.45s ease; }

.round-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 5px 13px;
}
.round-context-bar p { color: var(--text-1); font-size: 12px; font-weight: 600; }
.round-answer-state { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 9.5px; font-weight: 700; }
.round-answer-state i { width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 9px rgba(139, 92, 246, 0.65); }
.round-answer-state.is-sent { color: #6ee7b7; }
.round-answer-state.is-sent i { background: #10b981; box-shadow: 0 0 9px rgba(16, 185, 129, 0.65); }

.round-stage {
  position: relative;
  min-height: 520px;
}

.round-split,
.round-media-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.78fr);
  gap: 16px;
}

.round-visual-panel,
.round-answer-panel,
.round-question-card,
.round-duel-shell {
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(18, 27, 48, 0.82), rgba(8, 13, 25, 0.88));
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.round-visual-panel { position: relative; overflow: hidden; min-height: 540px; }
.round-visual-panel .pano-wrap,
.round-visual-panel .property-img,
.round-visual-panel .pixel-image-frame {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.round-panel-label {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(7, 12, 22, 0.72);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 9.5px;
  font-weight: 750;
}

.round-answer-panel {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: 25px;
}

.round-answer-panel-header { margin-bottom: 20px; }
.round-answer-panel-header h2 { margin-top: 8px; font-size: 24px; line-height: 1.15; }
.round-answer-panel-header p { margin-top: 8px; color: var(--text-2); font-size: 10.5px; line-height: 1.55; }

.round-map-frame {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
}
.round-map-frame #geoMap { width: 100%; height: 100%; min-height: 330px; border: 0; border-radius: 0; box-shadow: none; }
.round-map-hint {
  position: absolute;
  z-index: 500;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(7, 12, 22, 0.78);
  color: #cbd5e1;
  font-size: 8.5px;
  pointer-events: none;
}
.round-submit-button { width: 100%; min-height: 47px; margin-top: 13px; }

.round-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.round-fact {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}
.round-fact span { display: block; color: var(--text-2); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.round-fact strong { display: block; margin-top: 5px; font-size: 13px; }

.round-estimate-field { margin-top: auto; }
.round-estimate-field label { display: block; margin-bottom: 10px; color: var(--text-1); font-size: 11px; font-weight: 650; line-height: 1.5; }
.round-number-control { position: relative; }
.round-number-control input { min-height: 58px; padding-right: 90px; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.round-number-control span { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #a78bfa; font-size: 11px; font-weight: 800; }

.round-question-card {
  width: min(100%, 800px);
  margin: 16px auto 0;
  padding: 36px;
}
.round-question-heading { text-align: center; }
.round-question-heading .round-question-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 16px; background: rgba(139, 92, 246, 0.14); font-size: 24px; }
.round-question-heading h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.22; }
.round-question-heading p { margin-top: 10px; color: var(--text-2); font-size: 11px; }
.round-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.quiz-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin: 0;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  line-height: 1.35;
}
.quiz-choice .choice-key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(139, 92, 246, 0.11); color: #c4b5fd; font-size: 11px; font-weight: 800; }
.quiz-choice.selected { border-color: #8b5cf6 !important; background: rgba(139, 92, 246, 0.12); opacity: 1 !important; }

.round-chrono-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.8fr);
  gap: 16px;
}
.round-chrono-image { position: relative; min-height: 520px; overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 22px; background: #080c16; box-shadow: 0 22px 58px rgba(0,0,0,.24); }
.round-chrono-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.round-chrono-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(7,12,22,.76); backdrop-filter: blur(10px); }
.round-chrono-caption strong { display: block; font-size: 12px; }
.round-chrono-caption span { display: block; margin-top: 3px; color: var(--text-2); font-size: 9px; }
.round-year-display { display: grid; place-items: center; min-height: 130px; margin: 18px 0; border: 1px solid rgba(139,92,246,.18); border-radius: 17px; background: radial-gradient(circle, rgba(139,92,246,.14), transparent 68%); }
.round-year-display span { font-family: var(--font-display); font-size: 52px; font-weight: 700; color: #c4b5fd; letter-spacing: -0.04em; }
.round-range-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-2); font-size: 9px; }

.pixel-image-frame { overflow: hidden; }
.pixel-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.round-text-submit { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: auto; }

.round-duel-shell { width: min(100%, 980px); margin: 0 auto; padding: 28px; }
.round-duel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.round-duel-heading h2 { margin-top: 6px; font-size: 25px; }
.round-capital-pill { padding: 10px 13px; border: 1px solid rgba(167,139,250,.2); border-radius: 12px; background: rgba(139,92,246,.1); color: #ddd6fe; font-size: 11px; font-weight: 800; }
.round-duel-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.round-duel-versus { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: #111827; color: #a78bfa; font-family: var(--font-display); font-size: 12px; font-weight: 800; }
.duel-card { min-height: 310px; border-radius: 18px; }
.duel-card img { height: 250px; }
.duel-card-label { padding: 15px; font-size: 14px; }
.round-bet-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
.round-bet-panel label { display: block; margin-bottom: 8px; color: var(--text-2); font-size: 9px; }
.round-bet-input { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.round-bet-panel .round-submit-button { grid-column: 1 / -1; }

.round-player-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.round-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  color: var(--text-2);
  font-size: 9px;
}
.round-player-chip .round-player-avatar { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(139,92,246,.1); font-size: 12px; }
.round-player-chip.is-self { border-color: rgba(139,92,246,.28); color: var(--text-1); }
.round-player-chip.is-answered { border-color: rgba(16,185,129,.24); color: #6ee7b7; }
.round-player-chip i { width: 6px; height: 6px; border-radius: 50%; background: #64748b; }
.round-player-chip.is-answered i { background: #10b981; box-shadow: 0 0 7px rgba(16,185,129,.65); }

/* ---------- Résultat de manche ---------- */
.round-result-page { padding-top: 8px; }
.round-result-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,.2), transparent 34%),
    linear-gradient(145deg, rgba(21,30,54,.84), rgba(10,16,30,.88));
  box-shadow: 0 20px 52px rgba(0,0,0,.22);
}
.round-result-icon { display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 62px; border: 1px solid rgba(167,139,250,.25); border-radius: 19px; background: rgba(139,92,246,.14); font-size: 29px; }
.round-result-hero h1 { margin-top: 5px; font-size: 30px; }
.round-result-hero p { margin-top: 7px; color: #26ba54; font-size: 1.2rem; }
.round-result-hero p b { color: #26ba54; }

.round-result-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr); gap: 15px; margin-top: 15px; }
.result-map-card,
.result-ranking-card { border: 1px solid rgba(255,255,255,.085); border-radius: 21px; background: linear-gradient(145deg, rgba(18,27,48,.82), rgba(8,13,25,.88)); box-shadow: 0 20px 52px rgba(0,0,0,.2); }
.result-map-card { overflow: hidden; min-height: 500px; }
.result-map-card #resultMap { width: 100%; height: 100%; min-height: 500px; border: 0; border-radius: 0; box-shadow: none; }
.result-ranking-card { padding: 25px; }
.result-ranking-heading { display: flex; justify-content: space-between; margin-bottom: 18px; }
.result-ranking-heading h2 { margin-top: 6px; font-size: 21px; }
.round-result-list { display: grid; gap: 8px; }
.result-player-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.result-place { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: rgba(255,255,255,.045); color: var(--text-2); font-family: var(--font-display); font-size: 11px; }
.result-player-row:first-child .result-place { background: rgba(251,191,36,.12); color: #fcd34d; }
.result-player-copy { min-width: 0; }
.result-player-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.result-player-copy span { display: block; margin-top: 2px; color: var(--text-2); font-size: 0.7rem; }
.result-score-copy { text-align: right; }
.result-score-copy strong { display: block; color: #c4b5fd; font-size: 12px; }
.result-score-copy span { display: block; margin-top: 2px; color: var(--text-2); font-size: 0.7rem; }
.result-next-button { width: 100%; min-height: 47px; margin-top: 18px; }

.round-result-layout:has(.result-map-card[style*="display: none"]) { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* ---------- Finale ---------- */
.final-page { width: min(100%, 900px); padding-top: 10px; }
.final-heading { text-align: center; }
.final-trophy { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 16px; border: 1px solid rgba(251,191,36,.22); border-radius: 22px; background: rgba(251,191,36,.09); font-size: 34px; box-shadow: 0 16px 38px rgba(146,64,14,.16); }
.final-heading h1 { margin-top: 7px; font-size: 40px; }
.final-heading p { margin-top: 7px; color: var(--text-2); font-size: 11px; }
.final-card { margin-top: 22px; padding: 30px; border: 1px solid rgba(255,255,255,.085); border-radius: 24px; background: linear-gradient(145deg, rgba(20,29,51,.83), rgba(9,15,28,.88)); box-shadow: 0 25px 65px rgba(0,0,0,.28); }
.final-rank-list { display: grid; gap: 8px; margin-top: 22px; }
.final-save-score { margin-top: 20px; }
.final-save-title { font-weight: 800; color: var(--text-0); }
.final-save-score > p { margin: 6px 0 12px; }
.final-save-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.final-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

/* ---------- CSE : liens directs et email ---------- */
.cse-invite-context {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 20px 22px;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(54,34,101,.38), rgba(15,22,40,.75));
}
.cse-invite-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgba(139,92,246,.13); font-size: 22px; }
.cse-invite-context h1 { margin-top: 5px; font-size: 21px; }
.cse-invite-context p { margin-top: 4px; color: var(--text-2); font-size: 10.5px; }

.cse-share-panel { margin: 15px 0 18px; padding: 17px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.025); }
.cse-share-panel > div:first-child p { margin-top: 5px; color: var(--text-2); font-size: 10px; }
.cse-share-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; margin-top: 12px; }
.cse-share-form .btn { min-height: 45px; padding-inline: 12px; white-space: nowrap; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .round-result-layout { grid-template-columns: 1fr; }
  .result-map-card { min-height: 420px; }
  .result-map-card #resultMap { min-height: 420px; }
}

@media (max-width: 980px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .profile-auth-layout,
  .profile-account-layout { grid-template-columns: 1fr; }
  .friends-invite-card { grid-template-columns: 1fr; gap: 18px; }
  .friends-invite-card > .profile-feedback { grid-column: auto; margin-top: -10px; }
  .round-split,
  .round-media-layout,
  .round-chrono-layout { grid-template-columns: 1fr; }
  .round-visual-panel,
  .round-visual-panel .pano-wrap,
  .round-visual-panel .property-img,
  .round-visual-panel .pixel-image-frame,
  .round-chrono-image,
  .round-chrono-image img { min-height: 440px; height: 440px; }
  .round-answer-panel { min-height: auto; }
  .round-duel-grid { grid-template-columns: 1fr 1fr; }
  .activity-stat-grid { grid-template-columns: 1fr 1fr; }
  .info-story-card { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 760px) {
  main { padding: 20px 14px 50px; }
  .topbar { padding: 11px 13px; }
  .brand small { display: none; }
  .brand span { font-size: 16px; }
  .brand .logo { width: 36px; height: 36px; }
  .topnav { position: static; transform: none; margin-left: auto; }
  .topnav button { min-width: auto; padding: 7px 11px; font-size: 10px; }
  .top-right { margin-left: 6px; }
  .avatar-pill { padding-right: 6px; }
  .avatar-pill #topName { display: none; }

  .home-play-section { padding: 20px; border-radius: 22px; }
  .home-action-card { min-height: 280px; }

  .site-footer-inner,
  .site-footer-bottom { width: min(100% - 28px, 1240px); }
  .site-footer-inner { padding: 36px 0 28px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 26px; }
  .site-footer-bottom { flex-direction: column; gap: 5px; }

  .info-page { padding-top: 18px; }
  .info-feature-grid,
  .community-grid { grid-template-columns: 1fr; }
  .info-feature-grid article,
  .community-grid article { min-height: 220px; }

  .profile-page { padding-top: 4px; }
  .profile-hero-card { align-items: flex-start; flex-direction: column; padding: 25px; border-radius: 21px; }
  .profile-avatar-large { width: 70px; height: 70px; border-radius: 20px; font-size: 34px; }
  .profile-identity h1 { font-size: 25px; }
  .profile-overview-metrics { width: 100%; }
  .profile-tabs { width: 100%; overflow-x: auto; }
  .profile-tabs button { flex: 1 0 auto; justify-content: center; }
  .profile-auth-card,
  .profile-settings-card,
  .profile-account-card,
  .profile-activity-card { padding: 22px; }
  .profile-auth-actions { grid-template-columns: 1fr; }
  .friends-search-form { grid-template-columns: 1fr; }
  .friends-summary-grid { grid-template-columns: 1fr; }
  .friends-summary-grid button { min-height: 58px; }
  .friends-list-card { padding: 21px; }
  .social-row { grid-template-columns: 1fr; }
  .social-row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .activity-stat-grid { grid-template-columns: 1fr 1fr; }

  .round-command-bar { align-items: stretch; flex-direction: column; padding: 14px; }
  .round-timer { width: 100%; justify-content: center; }
  .round-context-bar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .round-stage { min-height: 0; }
  .round-visual-panel,
  .round-visual-panel .pano-wrap,
  .round-visual-panel .property-img,
  .round-visual-panel .pixel-image-frame,
  .round-chrono-image,
  .round-chrono-image img { min-height: 360px; height: 360px; }
  .round-question-card { padding: 24px 18px; }
  .round-choice-grid { grid-template-columns: 1fr; }
  .round-duel-shell { padding: 20px 14px; }
  .round-duel-heading { align-items: flex-start; flex-direction: column; }
  .round-duel-grid { grid-template-columns: 1fr; }
  .round-duel-versus { top: 50%; }
  .duel-card { min-height: 250px; }
  .duel-card img { height: 195px; }
  .round-bet-panel { grid-template-columns: 1fr; }
  .round-bet-panel .round-submit-button { grid-column: auto; }
  .round-result-hero { align-items: flex-start; padding: 20px; }
  .round-result-icon { width: 50px; height: 50px; border-radius: 15px; font-size: 23px; }
  .round-result-hero h1 { font-size: 24px; }
  .result-ranking-card { padding: 20px 15px; }
  .final-card { padding: 22px 16px; }
  .final-save-form,
  .final-actions { grid-template-columns: 1fr; }
  .cse-share-form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .topnav button[data-view="home"] { display: none; }
  .profile-identity { align-items: flex-start; }
  .profile-overview-metrics > div { min-width: 0; padding: 14px 8px; }
  .profile-overview-metrics strong { font-size: 20px; }
  .activity-stat-grid { grid-template-columns: 1fr; }
  .profile-history-row { grid-template-columns: auto minmax(0,1fr); }
  .profile-history-score { grid-column: 2; text-align: left; }
  .round-facts { grid-template-columns: 1fr; }
  .round-text-submit { grid-template-columns: 1fr; }
  .round-result-hero { flex-direction: column; }
  .result-player-row { grid-template-columns: auto minmax(0,1fr); }
  .result-score-copy { grid-column: 2; text-align: left; }
  .footer-nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-panel,
  .round-progress-track span { transition: none !important; animation: none !important; }
}

/* Finitions de la refonte : états personnels et compatibilité des résultats. */
.round-result-layout.no-map {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.result-player-row.is-current-player {
  border-color: rgba(139, 92, 246, .32);
  background: linear-gradient(135deg, rgba(139, 92, 246, .11), rgba(255, 255, 255, .025));
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, .8);
}
.result-player-row.is-current-player .result-place {
  background: rgba(139, 92, 246, .18);
  color: #ddd6fe;
}
.final-player-row {
  padding-block: 14px;
}
.final-save-form .btn:disabled {
  cursor: wait;
  opacity: .55;
  box-shadow: none;
}
.cse-tab[hidden],
.topnav button[hidden] {
  display: none !important;
}

/* ---------- Ajustements responsives du nouveau hero compact ---------- */
@media (max-width: 1180px) {
  .home-showcase-layout {
    grid-template-columns: minmax(330px, 0.78fr) minmax(485px, 1.22fr);
  }
  .home-showcase h1 { font-size: clamp(31px, 3.55vw, 40px); }
  .hero-round-card { width: min(398px, 79%); }
  .hero-round-card[data-position="prev"] { transform: translate(-50%, -50%) translate(-188px, 16px) rotate(-3deg) scale(0.76); }
  .hero-round-card[data-position="next"] { transform: translate(-50%, -50%) translate(188px, 16px) rotate(3deg) scale(0.76); }
  .hero-round-card[data-position="far-prev"] { transform: translate(-50%, -50%) translate(-302px, 37px) rotate(-5deg) scale(0.56); }
  .hero-round-card[data-position="far-next"] { transform: translate(-50%, -50%) translate(302px, 37px) rotate(5deg) scale(0.56); }
}

@media (max-width: 980px) {
  .home-showcase {
    min-height: 338px;
    padding: 18px 16px;
  }
  .home-showcase-layout {
    grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
    min-height: 300px;
  }
  .home-showcase-content {
    width: auto;
    margin: 0;
    padding: 14px 8px 14px 15px;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .home-showcase h1 { font-size: clamp(30px, 3.7vw, 36px); }
  .home-showcase-content > p { margin: 10px 0 0; font-size: 11.7px; }
  .home-player-field { margin: 15px 0 0; }
  .hero-round-carousel { height: 292px; }
  .hero-round-stage { inset: 5px 30px 30px; }
  .hero-round-card { width: min(360px, 80%); height: 226px; }
  .hero-round-card[data-position="prev"] { transform: translate(-50%, -50%) translate(-157px, 15px) rotate(-3deg) scale(0.74); }
  .hero-round-card[data-position="next"] { transform: translate(-50%, -50%) translate(157px, 15px) rotate(3deg) scale(0.74); }
  .hero-round-card[data-position="far-prev"] { transform: translate(-50%, -50%) translate(-245px, 34px) rotate(-5deg) scale(0.54); }
  .hero-round-card[data-position="far-next"] { transform: translate(-50%, -50%) translate(245px, 34px) rotate(5deg) scale(0.54); }
  .hero-preview--split { grid-template-columns: minmax(0, 1.38fr) minmax(112px, 0.82fr); }
}

@media (max-width: 860px) {
  .home-showcase {
    min-height: 0;
    padding: 19px 16px 13px;
  }
  .home-showcase-layout {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 0;
  }
  .home-showcase-content {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 12px 18px 2px;
    text-align: center;
  }
  .home-showcase-content > p {
    max-width: 520px;
    margin: 10px auto 0;
  }
  .home-player-field { margin: 15px auto 0; }
  .hero-round-carousel {
    width: 100%;
    height: 280px;
    margin-top: 0;
  }
  .hero-round-stage { inset: 2px 28px 29px; }
  .hero-round-card { width: min(390px, 70vw); height: 228px; }
  .hero-round-card[data-position="prev"] { transform: translate(-50%, -50%) translate(-184px, 15px) rotate(-3deg) scale(0.74); }
  .hero-round-card[data-position="next"] { transform: translate(-50%, -50%) translate(184px, 15px) rotate(3deg) scale(0.74); }
  .hero-round-card[data-position="far-prev"] { transform: translate(-50%, -50%) translate(-292px, 34px) rotate(-5deg) scale(0.53); }
  .hero-round-card[data-position="far-next"] { transform: translate(-50%, -50%) translate(292px, 34px) rotate(5deg) scale(0.53); }
}

@media (max-width: 760px) {
  .home-showcase {
    min-height: 0;
    padding: 16px 10px 11px;
    border-radius: 22px;
  }
  .home-showcase-content {
    width: min(100%, 560px);
    padding: 12px 12px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .home-showcase h1 { font-size: clamp(31px, 8.6vw, 41px); }
  .home-showcase-content > p { margin-top: 8px; font-size: 11.5px; }
  .home-player-field { margin-top: 13px; }
  .hero-round-carousel {
    position: relative;
    bottom: auto;
    height: 264px;
  }
  .hero-round-stage { inset: 2px 24px 28px; }
  .hero-round-card { width: min(352px, calc(100vw - 66px)); height: 216px; }
  .hero-round-bar { flex-basis: 39px; padding: 5px 8px; }
  .hero-round-game-icon { width: 27px; height: 27px; font-size: 13px; }
  .hero-round-card[data-position="prev"] { transform: translate(-50%, -50%) translate(-148px, 14px) rotate(-3deg) scale(0.72); }
  .hero-round-card[data-position="next"] { transform: translate(-50%, -50%) translate(148px, 14px) rotate(3deg) scale(0.72); }
  .hero-round-card[data-position="far-prev"],
  .hero-round-card[data-position="far-next"] { opacity: 0; }
  .hero-preview-panel { padding: 10px; }
  .hero-preview-panel > strong { font-size: 9.5px; }
  .hero-quiz-heading strong { font-size: 10.5px; }
  .hero-round-nav { width: 29px; height: 29px; }
}

@media (max-width: 520px) {
  .home-showcase {
    min-height: 0;
    padding: 14px 7px 9px;
  }
  .home-showcase-content { padding: 10px 8px 3px; }
  .home-showcase h1 { font-size: clamp(29px, 9.4vw, 36px); }
  .home-showcase-content > p { font-size: 10.8px; }
  .home-player-field {
    width: min(100%, 370px);
    margin-top: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 9px;
    text-align: left;
  }
  .home-player-label { padding-left: 3px; }
  .home-player-control { width: 100%; }
  .hero-round-carousel { height: 247px; }
  .hero-round-stage { inset: 1px 19px 27px; }
  .hero-round-card { width: min(318px, calc(100vw - 48px)); height: 201px; }
  .hero-round-card[data-position="prev"] { transform: translate(-50%, -50%) translate(-120px, 13px) rotate(-2.7deg) scale(0.68); }
  .hero-round-card[data-position="next"] { transform: translate(-50%, -50%) translate(120px, 13px) rotate(2.7deg) scale(0.68); }
  .hero-preview--split { grid-template-columns: minmax(0, 1.28fr) minmax(104px, 0.86fr); }
  .hero-preview-panel { padding: 8px; }
  .hero-preview-panel > strong { margin-top: 4px; font-size: 8.8px; }
  .hero-mini-facts { gap: 4px; margin-top: 7px; }
  .hero-mini-facts span { padding: 5px; }
  .hero-mini-input { min-height: 24px; margin-top: 5px; padding: 5px 6px; }
  .hero-mini-cta { min-height: 20px; padding: 4px 6px; }
  .hero-mini-map { min-height: 70px; margin-top: 7px; }
  .hero-preview--quiz { gap: 9px; padding: 12px; }
  .hero-quiz-choices { gap: 4px; }
  .hero-quiz-choices span { min-height: 31px; padding: 5px; }
  .hero-duel-question small { display: none; }
  .hero-round-nav--prev { left: -1px; }
  .hero-round-nav--next { right: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-round-card,
  .hero-preview-image,
  .hero-round-pagination button,
  .hero-round-nav {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   GuessArena — identité, thèmes et fonctionnalités 2026
   ============================================================ */

.brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(139, 92, 246, 0.35));
  transition: transform .25s ease, filter .25s ease;
}
.brand:hover .brand-logo { transform: rotate(-3deg) scale(1.04); filter: drop-shadow(0 10px 24px rgba(139, 92, 246, 0.48)); }
.footer-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 8px 18px rgba(139, 92, 246, .25));
}
.top-auth-button {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgba(167, 139, 250, .34);
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: #ddd6fe;
  font: 700 12px/1 var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.top-auth-button:hover { border-color: rgba(196, 181, 253, .72); background: rgba(139, 92, 246, .2); transform: translateY(-1px); }
.top-auth-button.is-logout { color: var(--text-1); border-color: var(--border); background: rgba(255,255,255,.035); }

.home-player-control.is-locked { opacity: .78; }
.home-player-control.is-locked input { cursor: not-allowed; }
.home-player-control.is-locked .home-player-edit { display: none; }
.home-player-lock-hint { display: block; margin-top: 7px; color: var(--text-2); font-size: 10px; }

.quick-match-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 0.5rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(7, 12, 22, .3);
}
.quick-match-size > span { color: var(--text-1); font-size: 10px; font-weight: 700; }
.quick-match-size select { width: auto; min-width: 116px; padding: 8px 30px 8px 10px; border-radius: 9px; font-size: 10px; }
.home-action-card--public .home-action-button { margin-top: 10px; }

/* Carte de localisation ImmoGuessr / RentGuessr */
.property-location-card {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 15px;
  background: rgba(8, 12, 22, .45);
}
.property-location-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.property-location-heading strong { font-size: 10.5px; }
.property-location-heading span { color: var(--text-2); font-size: 9px; }
.property-minimap { width: 100%; height: 190px; background: var(--bg-1); cursor: grab; }
.property-minimap:active { cursor: grabbing; }
.property-map-pin {
  display: grid;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  margin: -16px 0 0 -16px !important;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #8b5cf6;
  box-shadow: 0 7px 18px rgba(76, 29, 149, .44);
  transform: rotate(-45deg);
}
.property-map-pin::after { content: '⌂'; color: #fff; font: 800 15px/1 var(--font-display); transform: rotate(45deg); }

/* Labels permanents sur la carte de résultat GeoGuessr */
.result-player-label {
  padding: 3px 7px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 7px !important;
  background: rgba(7, 12, 22, .18) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.14) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  font: 700 10px/1.2 var(--font-body) !important;
  backdrop-filter: blur(2px);
}
.result-player-label::before { display: none !important; }
.result-player-label.is-me { border-color: rgba(52,211,153,.72) !important; background: rgba(6, 78, 59, .16) !important; }
.result-player-label.is-opponent { border-color: rgba(248,113,113,.68) !important; background: rgba(127, 29, 29, .14) !important; }

/* Réponse exacte du joueur dans les bilans */
.result-answer-exact { display: block !important; margin-top: 5px !important; color: var(--text-1) !important; font-size: 11px !important; line-height: 1.35; white-space: normal; }
.result-answer-exact b { color: #c4b5fd; }
.result-player-copy .result-detail-line { margin-top: 3px; }

/* ChronoGuessr : saisie clavier et pas +/- */
.chrono-stepper {
  display: grid;
  grid-template-columns: 48px minmax(110px, 1fr) 48px;
  gap: 8px;
  align-items: stretch;
  margin: 18px 0 12px;
}
.chrono-stepper button {
  border: 1px solid rgba(167, 139, 250, .32);
  border-radius: 12px;
  background: rgba(139, 92, 246, .12);
  color: #ddd6fe;
  font: 800 24px/1 var(--font-display);
  cursor: pointer;
}
.chrono-stepper button:hover { border-color: #a78bfa; background: rgba(139, 92, 246, .22); }
.chrono-stepper input {
  min-width: 0;
  padding: 11px;
  text-align: center;
  font: 800 26px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.chrono-range { width: 100%; }

/* FlagGuessr */
.round-flag-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; align-items: stretch; }
.flag-image-card {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 20%, rgba(139,92,246,.18), transparent 48%),
    rgba(8,12,22,.72);
  box-shadow: 0 22px 58px rgba(0,0,0,.24);
}
.flag-image-card img { display: block; width: min(100%, 720px); max-height: 420px; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 45px rgba(0,0,0,.32); }
.flag-question-card { display: flex; flex-direction: column; justify-content: center; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: rgba(15,23,42,.66); }
.flag-question-card h2 { margin: 8px 0 18px; font-size: clamp(22px, 3vw, 34px); }
.flag-choice-grid { display: grid; gap: 10px; }
.flag-choice-grid button { display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.035); color: var(--text-0); text-align: left; font: 700 12px/1.25 var(--font-body); cursor: pointer; transition: .2s ease; }
.flag-choice-grid button b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: rgba(139,92,246,.17); color: #c4b5fd; }
.flag-choice-grid button:hover { border-color: rgba(167,139,250,.55); background: rgba(139,92,246,.1); transform: translateY(-1px); }
.flag-choice-grid button.selected { border-color: #8b5cf6; background: rgba(139,92,246,.18); box-shadow: 0 0 0 2px rgba(139,92,246,.1); }

/* Page Options */
.settings-page, .superadmin-page { width: min(1050px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
.settings-card, .superadmin-card { margin-top: 24px; padding: 28px; border: 1px solid var(--border); border-radius: 24px; background: rgba(15,23,42,.62); box-shadow: 0 24px 70px rgba(0,0,0,.18); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.theme-choice { position: relative; display: grid; grid-template-columns: 100px 1fr 28px; align-items: center; gap: 16px; min-height: 122px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.025); color: var(--text-0); text-align: left; cursor: pointer; transition: .22s ease; }
.theme-choice:hover { border-color: rgba(167,139,250,.5); transform: translateY(-2px); }
.theme-choice[aria-checked="true"] { border-color: #8b5cf6; background: rgba(139,92,246,.12); box-shadow: 0 0 0 3px rgba(139,92,246,.08); }
.theme-choice > span:nth-child(2) strong { display: block; font-size: 15px; }
.theme-choice > span:nth-child(2) small { display: block; margin-top: 5px; color: var(--text-2); font-size: 11px; line-height: 1.4; }
.theme-choice > b { display: none; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #8b5cf6; color: #fff; }
.theme-choice[aria-checked="true"] > b { display: grid; }
.theme-preview { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 18px 1fr; gap: 6px; width: 100px; height: 78px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.theme-preview i:first-child { grid-column: 1 / -1; border-radius: 5px; }
.theme-preview i:nth-child(2), .theme-preview i:nth-child(3) { border-radius: 5px; }
.theme-preview--dark { background: #080c16; }
.theme-preview--dark i { background: #1e293b; }
.theme-preview--dark i:first-child { background: linear-gradient(90deg,#8b5cf6,#22d3ee); }
.theme-preview--light { background: #f8fafc; box-shadow: inset 0 0 0 1px rgba(15,23,42,.1); }
.theme-preview--light i { background: #e2e8f0; }
.theme-preview--light i:first-child { background: linear-gradient(90deg,#7c3aed,#0ea5e9); }

/* Super Admin */
.superadmin-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.superadmin-hero h1 { margin-top: 7px; font-size: clamp(32px,5vw,56px); }
.superadmin-hero p { max-width: 700px; margin-top: 10px; color: var(--text-2); }
.superadmin-legend { display: flex; gap: 18px; margin-bottom: 16px; color: var(--text-2); font-size: 10px; }
.superadmin-legend span { display: inline-flex; align-items: center; gap: 7px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot--on { background: #10b981; box-shadow: 0 0 9px rgba(16,185,129,.6); }
.status-dot--off { background: #ef4444; box-shadow: 0 0 9px rgba(239,68,68,.5); }
.superadmin-game-list { display: grid; gap: 9px; }
.superadmin-game-row { display: grid; grid-template-columns: 46px minmax(170px,1fr) minmax(220px,1.2fr) auto; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.025); }
.superadmin-game-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(139,92,246,.13); font-size: 21px; }
.superadmin-game-copy strong { display: block; font-size: 12px; }
.superadmin-game-copy span { display: block; margin-top: 3px; color: var(--text-2); font-size: 9px; }
.superadmin-game-message { width: 100%; min-width: 0; font-size: 10px; }
.switch-control { position: relative; display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 9px; font-weight: 700; cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 45px; height: 25px; border-radius: 999px; background: #475569; transition: .2s ease; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.25); transition: .2s ease; }
.switch-control input:checked + .switch-track { background: #10b981; }
.switch-control input:checked + .switch-track::after { transform: translateX(20px); }

/* CSE jeu à gratter */
.cse-play-grid { display: grid; grid-template-columns: repeat(2,minmax(0,480px)); justify-content: center; gap: 16px; }
.cse-play-card { margin: 0 !important; }
.cse-play-card--scratch { background: radial-gradient(circle at 100% 0, rgba(251,191,36,.12), transparent 38%), rgba(15,23,42,.72); }
.cse-only-badge { display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid rgba(251,191,36,.28); border-radius: 999px; background: rgba(251,191,36,.09); color: #fde68a; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.scratch-admin-card { width: min(760px,100%); margin: 0 auto 14px; }
.scratch-admin-card textarea, #scratchWhitelistInput { width: 100%; resize: vertical; }
.scratch-experience { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(3,7,18,.88); backdrop-filter: blur(14px); }
.scratch-experience[hidden] { display: none; }
body.scratch-open { overflow: hidden; }
.scratch-close { position: fixed; top: 22px; right: 24px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(15,23,42,.75); color: #fff; font-size: 25px; cursor: pointer; }
.scratch-ticket { position: relative; width: min(760px,100%); overflow: hidden; padding: clamp(25px,5vw,52px); border: 1px solid rgba(255,255,255,.2); border-radius: 28px; text-align: center; color: #fff; box-shadow: 0 35px 100px rgba(0,0,0,.45); }
.scratch-ticket::before, .scratch-ticket::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); filter: blur(2px); }
.scratch-ticket::before { left: -70px; top: -60px; }
.scratch-ticket::after { right: -75px; bottom: -65px; }
.scratch-ticket[data-scratch-theme="classic"] { background: linear-gradient(145deg,#4c1d95,#7c3aed 48%,#0e7490); }
.scratch-ticket[data-scratch-theme="christmas"] { background: linear-gradient(145deg,#7f1d1d,#b91c1c 48%,#166534); }
.scratch-ticket[data-scratch-theme="mothers_day"] { background: linear-gradient(145deg,#9d174d,#db2777 48%,#7e22ce); }
.scratch-ticket[data-scratch-theme="fathers_day"] { background: linear-gradient(145deg,#0f172a,#1d4ed8 52%,#0f766e); }
.scratch-ticket[data-scratch-theme="halloween"] { background: linear-gradient(145deg,#111827,#7c2d12 48%,#c2410c); }
.scratch-ticket[data-scratch-theme="birthday"] { background: linear-gradient(145deg,#4338ca,#7c3aed 45%,#db2777); }
.scratch-ticket[data-scratch-theme="summer"] { background: linear-gradient(145deg,#0369a1,#0ea5e9 45%,#eab308); }
.scratch-ticket-icon { display: block; margin-bottom: 8px; font-size: 48px; }
.scratch-ticket h2 { margin-top: 8px; font-size: clamp(28px,5vw,48px); }
.scratch-ticket > p { margin: 8px auto 22px; color: rgba(255,255,255,.78); }
.scratch-zone { position: relative; width: min(100%,720px); aspect-ratio: 18/7; margin: 0 auto; overflow: hidden; border: 4px solid rgba(255,255,255,.6); border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.25); touch-action: none; }
.scratch-hidden-result { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: #fff; color: #111827; font: 800 clamp(20px,4vw,40px)/1.2 var(--font-display); }
.scratch-hidden-result.is-winner { background: radial-gradient(circle,#fef3c7,#fbbf24); color: #78350f; }
.scratch-hidden-result.is-loser { background: linear-gradient(135deg,#f8fafc,#e2e8f0); color: #334155; }
.scratch-hidden-result > div { display: grid; justify-items: center; gap: 5px; max-width: 580px; }
.scratch-hidden-result strong { font: 800 clamp(24px,4.5vw,46px)/1 var(--font-display); }
.scratch-hidden-result p { margin: 3px 0 0; font: 700 clamp(12px,2vw,18px)/1.35 var(--font-body); }
.scratch-hidden-result small { margin-top: 4px; font: 600 9px/1.35 var(--font-body); opacity: .72; }
.scratch-result-icon { font-size: clamp(34px,6vw,60px); }
.scratch-zone canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; opacity: 1; transition: opacity .32s ease; }
.scratch-zone canvas.is-revealed { opacity: 0; }
.scratch-zone canvas:focus-visible { outline: 4px solid rgba(255,255,255,.9); outline-offset: -6px; }
.scratch-progress-text { margin-bottom: 0 !important; font-size: 10px; font-weight: 700; }
.scratch-reveal-button { margin-top: 8px; border: 0; background: transparent; color: rgba(255,255,255,.82); font: 700 9px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.scratch-reveal-button:hover { color: #fff; }
.scratch-reveal-button:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; border-radius: 4px; }
.scratch-outcome-badge { display: inline-flex; align-self: flex-end; padding: 4px 8px; border-radius: 999px; font-size: 9px; letter-spacing: .025em; }
.scratch-outcome-badge.winner { background: rgba(16,185,129,.14); color: #34d399; }
.scratch-outcome-badge.loser { background: rgba(239,68,68,.12); color: #f87171; }
.scratch-admin-draw-note { color: #fbbf24 !important; font-weight: 750; }
.scratch-attempt-row.is-winner { border-color: rgba(16,185,129,.28); }

/* Thème clair moderne */
html[data-theme="clair"] {
  --bg-0: #f4f7fb;
  --bg-1: #ffffff;
  --bg-2: #eef2f8;
  --bg-3: #e2e8f0;
  --border: rgba(15, 23, 42, .11);
  --border-hover: rgba(15, 23, 42, .2);
  --text-0: #111827;
  --text-1: #334155;
  --text-2: #64748b;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(124, 58, 237, .1);
  --accent-glow: rgba(124, 58, 237, .22);
}
html[data-theme="clair"], html[data-theme="clair"] body {
  background: radial-gradient(circle at 50% -20%, #ede9fe 0%, #f8fafc 45%, #f1f5f9 100%);
  color: var(--text-0);
}
html[data-theme="clair"] .topbar { background: rgba(255,255,255,.82); box-shadow: 0 8px 28px rgba(15,23,42,.07); }
html[data-theme="clair"] .topnav { background: rgba(241,245,249,.78); }
html[data-theme="clair"] .topnav button:hover { background: rgba(15,23,42,.05); }
html[data-theme="clair"] .avatar-pill,
html[data-theme="clair"] .home-action-card,
html[data-theme="clair"] .card,
html[data-theme="clair"] .lobby-roster,
html[data-theme="clair"] .lobby-config,
html[data-theme="clair"] .profile-auth-card,
html[data-theme="clair"] .profile-benefits-card,
html[data-theme="clair"] .profile-settings-card,
html[data-theme="clair"] .profile-account-card,
html[data-theme="clair"] .profile-activity-card,
html[data-theme="clair"] .settings-card,
html[data-theme="clair"] .superadmin-card,
html[data-theme="clair"] .flag-question-card { background: rgba(255,255,255,.86); box-shadow: 0 18px 50px rgba(15,23,42,.08); }
html[data-theme="clair"] .home-showcase { background: linear-gradient(135deg,rgba(255,255,255,.92),rgba(237,233,254,.84)); box-shadow: 0 25px 70px rgba(76,29,149,.1); }
html[data-theme="clair"] input,
html[data-theme="clair"] select,
html[data-theme="clair"] textarea { background: #fff; color: #111827; border-color: rgba(15,23,42,.14); }
html[data-theme="clair"] .btn-secondary,
html[data-theme="clair"] .btn-ghost { background: rgba(255,255,255,.78); color: #334155; border-color: rgba(15,23,42,.12); }
html[data-theme="clair"] .home-player-control,
html[data-theme="clair"] .quick-match-size,
html[data-theme="clair"] .config-game-card,
html[data-theme="clair"] .guest-game-item,
html[data-theme="clair"] .result-player-row,
html[data-theme="clair"] .profile-history-row,
html[data-theme="clair"] .social-row,
html[data-theme="clair"] .superadmin-game-row { background: rgba(248,250,252,.92); }
html[data-theme="clair"] .round-command-bar,
html[data-theme="clair"] .round-context-bar { background: rgba(255,255,255,.88); }
html[data-theme="clair"] .round-result-hero,
html[data-theme="clair"] .result-ranking-card,
html[data-theme="clair"] .final-card { background: rgba(255,255,255,.9); box-shadow: 0 24px 70px rgba(15,23,42,.09); }
html[data-theme="clair"] .flag-image-card { background: radial-gradient(circle at 50% 20%,rgba(124,58,237,.09),transparent 48%),#eef2f8; }
html[data-theme="clair"] .result-player-label { background: rgba(255,255,255,.48) !important; color: #0f172a !important; border-color: rgba(15,23,42,.24) !important; text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 7px rgba(255,255,255,.9); }
html[data-theme="clair"] .result-player-label.is-me { background: rgba(209,250,229,.42) !important; }
html[data-theme="clair"] .result-player-label.is-opponent { background: rgba(254,226,226,.4) !important; }
html[data-theme="clair"] .site-footer { background: rgba(255,255,255,.55); }
html[data-theme="clair"] .property-location-card { background: #fff; }
html[data-theme="clair"] .developer-options { background: rgba(241,245,249,.9); }

@media (max-width: 980px) {
  .topbar { padding-inline: 16px; }
  .topnav { position: static; transform: none; overflow-x: auto; max-width: 46vw; }
  .brand small { display: none; }
  .round-flag-layout { grid-template-columns: 1fr; }
  .flag-image-card { min-height: 330px; }
  .superadmin-game-row { grid-template-columns: 42px 1fr auto; }
  .superadmin-game-message { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .brand-logo { width: 39px; height: 39px; flex-basis: 39px; }
  .brand span { display: none; }
  .top-auth-button { padding-inline: 10px; }
  .avatar-pill #topName { display: none; }
  .topnav { max-width: none; order: 3; width: 100%; }
  .topbar { flex-wrap: wrap; gap: 9px; }
  .theme-choice-grid, .cse-play-grid { grid-template-columns: 1fr; }
  .theme-choice { grid-template-columns: 82px 1fr 25px; }
  .theme-preview { width: 82px; }
  .superadmin-hero { align-items: flex-start; flex-direction: column; }
  .superadmin-game-row { grid-template-columns: 42px 1fr; }
  .switch-control, .superadmin-game-message { grid-column: 1 / -1; }
  .scratch-ticket { padding: 26px 16px; }
}

/* ============================================================
   GuessArena — mosaïque des jeux, qualité et administration
   ============================================================ */
.home-games-section {
  width: min(1240px, 100%);
  margin: 52px auto 20px;
}
.home-section-heading--games {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.home-section-heading--games h2 {
  margin-top: 6px;
  font-size: clamp(27px, 3.4vw, 42px);
}
.home-section-heading--games > p {
  max-width: 490px;
  color: var(--text-2);
  font-size: 13px;
  text-align: right;
}
.home-game-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.home-game-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 322px;
  overflow: hidden;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(30,41,59,.9), rgba(8,12,22,.96));
  color: var(--text-0);
  text-align: left;
  box-shadow: 0 18px 48px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.home-game-tile:hover,
.home-game-tile:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(167,139,250,.62);
  box-shadow: 0 26px 65px rgba(0,0,0,.3), 0 0 0 3px rgba(139,92,246,.09);
  outline: none;
}
.home-game-tile-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(139,92,246,.28), transparent 55%),
    linear-gradient(145deg, rgba(51,65,85,.75), rgba(15,23,42,.96));
}
.home-game-tile-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(8,12,22,.8));
  pointer-events: none;
}
.home-game-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.home-game-tile:hover .home-game-tile-media img { transform: scale(1.055); }
.home-game-tile-fallback {
  display: none;
  font-size: 58px;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.25));
}
.home-game-tile-media.is-fallback .home-game-tile-fallback,
.home-game-tile-media:not(:has(img)) .home-game-tile-fallback { display: block; }
.home-game-tile-copy {
  display: block;
  flex: 1;
  padding: 18px 18px 0;
}
.home-game-tile-copy strong {
  display: block;
  font: 800 18px/1.25 var(--font-display);
}
.home-game-tile-copy small {
  display: -webkit-box;
  min-height: 36px;
  margin-top: 7px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-game-tile-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 18px 17px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.home-game-tile-action b { font-size: 18px; transition: transform .2s ease; }
.home-game-tile:hover .home-game-tile-action b { transform: translateX(4px); }
.home-game-tile--loading {
  pointer-events: none;
  min-height: 322px;
  background: rgba(255,255,255,.025);
}
.home-game-tile--loading span,
.home-game-tile--loading i {
  display: block;
  margin: 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.09), rgba(255,255,255,.035));
  background-size: 220% 100%;
  animation: game-tile-loading 1.35s ease infinite;
}
.home-game-tile--loading span { height: 176px; margin: 0; border-radius: 0; }
.home-game-tile--loading i { width: 65%; height: 50px; }
@keyframes game-tile-loading { to { background-position: -220% 0; } }

.round-header-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

@media (max-width: 600px) {
  .round-command-bar {
    position: relative;
    padding: 14px 16px;
  }

  .round-header-actions {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .round-report-button {
    font-size: 11px;
    padding: 6px 9px;
  }

  /* Évite que le titre passe sous le bouton */
  .round-mode-identity {
    padding-right: 80px;
  }
}
@media (max-width: 600px) {
  .round-result-hero {
    position: relative;
    padding: 24px 18px;
  }

  .round-result-hero .round-report-button--result {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    font-size: 10px;
  }

  /* Laisse de la place au bouton Signaler */
  .round-result-hero > div {
    padding-right: 70px;
  }
}
.round-report-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 999px;
  background: rgba(127,29,29,.12);
  color: #fecaca;
  font: 750 10px/1 var(--font-body);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.round-report-button:hover,
.round-report-button:focus-visible {
  border-color: rgba(248,113,113,.65);
  background: rgba(127,29,29,.24);
  transform: translateY(-1px);
  outline: none;
}
.round-report-button--result { margin-left: auto; align-self: center; }

.game-feedback-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 22px;
  margin-top: 22px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(139,92,246,.14), transparent 40%),
    rgba(255,255,255,.025);
}
.game-feedback-card h2 { margin-top: 5px; font-size: clamp(20px, 3vw, 28px); }
.game-feedback-card > div:first-child p { margin-top: 6px; color: var(--text-2); font-size: 11px; }
.game-feedback-stars {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.game-feedback-stars button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease;
}
.game-feedback-stars button:hover,
.game-feedback-stars button.is-active,
.game-feedback-stars button.selected,
.game-feedback-stars button[aria-checked="true"] { color: #fbbf24; transform: translateY(-2px) scale(1.04); }
.game-feedback-stars button:focus-visible { outline: 3px solid rgba(251,191,36,.28); outline-offset: 2px; border-radius: 8px; }
.game-feedback-card textarea {
  grid-column: 1 / -1;
  width: 100%;
  resize: vertical;
}
.game-feedback-card > .btn { justify-self: start; }
.game-feedback-card .profile-feedback { align-self: center; }

.profile-login-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.profile-login-line .btn { flex: 1; }
.profile-forgot-link {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font: 700 10px/1.3 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.profile-forgot-link:hover { color: #ede9fe; }
.profile-register-button { width: 100%; margin-top: 10px; }
.profile-theme-setting { padding-top: 18px; border-top: 1px solid var(--border); }
.theme-choice-grid--profile { margin-top: 10px; }

.form-field { min-width: 0; }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.field-error {
  display: none;
  margin: 5px 2px 0;
  color: #fca5a5;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}
.form-field.is-invalid .field-error { display: block; }

.import-help,
.algorithm-description {
  margin-top: 7px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.5;
}
.algorithm-description {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(139,92,246,.065);
  color: var(--text-1);
}
.whitelist-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.whitelist-import-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.cse-share-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(139,92,246,.055); }
.cse-share-panel > div:first-child p { margin: 5px 0 12px; color: var(--text-2); font-size: 10px; }
.cse-share-form { display: flex; gap: 8px; margin-top: 8px; }
.cse-share-form input { min-width: 0; flex: 1; }
.cse-share-form .btn { white-space: nowrap; }
.cse-admin-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.cse-admin-tools label { display: grid; gap: 6px; }
.cse-admin-tools label > span { color: var(--text-2); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }

.superadmin-page { width: min(1180px, calc(100% - 32px)); }
.superadmin-tabs {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.superadmin-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font: 750 11px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.superadmin-tabs button b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(148,163,184,.12); font-size: 9px; }
.superadmin-tabs button.active { background: var(--accent); color: #fff; box-shadow: 0 7px 22px rgba(124,58,237,.25); }
.superadmin-panel { display: none; }
.superadmin-panel.active { display: block; }
.superadmin-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.superadmin-panel-heading h2 { margin-top: 5px; }
.admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 15px; }
.admin-data-table { width: 100%; min-width: 820px; border-collapse: collapse; background: rgba(8,12,22,.24); }
.admin-data-table th,
.admin-data-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-data-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); color: var(--text-2); font-size: 9px; text-transform: uppercase; letter-spacing: .055em; }
.admin-data-table tbody tr:last-child td { border-bottom: 0; }
.admin-data-table tbody tr:hover { background: rgba(139,92,246,.055); }
.admin-data-table td { color: var(--text-1); font-size: 10px; line-height: 1.5; }
.admin-data-table td strong,
.admin-data-table td small { display: block; }
.admin-data-table td small { margin-top: 3px; color: var(--text-2); }
.admin-table-message { min-width: 260px; white-space: pre-wrap; }
.admin-rating { color: #fbbf24; font-size: 16px; white-space: nowrap; letter-spacing: 1px; }

.app-dialog {
  width: min(560px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-1);
  color: var(--text-0);
  box-shadow: 0 35px 100px rgba(0,0,0,.48);
}
.app-dialog::backdrop { background: rgba(2,6,23,.78); backdrop-filter: blur(7px); }
.app-dialog-shell,
.app-dialog-card { position: relative; display: grid; gap: 14px; padding: 28px; }
.app-dialog-shell h2,
.app-dialog-card h2 { padding-right: 35px; font-size: 26px; }
.app-dialog-shell > p,
.app-dialog-card > p { color: var(--text-2); font-size: 12px; }
.app-dialog-shell textarea,
.app-dialog-shell input,
.app-dialog-card textarea,
.app-dialog-card input { width: 100%; }
.app-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 22px;
  cursor: pointer;
}
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.app-dialog--info { width: min(450px, calc(100% - 28px)); }
.password-dialog-panel { display: grid; gap: 10px; }

/* Thème clair renforcé : surfaces opaques, textes et contrôles plus contrastés. */
html[data-theme="clair"] {
  --bg-0: #eef2f7;
  --bg-1: #ffffff;
  --bg-2: #f1f5f9;
  --bg-3: #e2e8f0;
  --border: #cbd5e1;
  --border-hover: #94a3b8;
  --text-0: #0f172a;
  --text-1: #263449;
  --text-2: #526176;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-2: #7c3aed;
  --accent-soft: rgba(109,40,217,.1);
  --accent-glow: rgba(109,40,217,.2);
}
html[data-theme="clair"],
html[data-theme="clair"] body {
  background: linear-gradient(180deg, #f8fafc 0, #edf2f7 60%, #e9eff6 100%);
  color: #0f172a;
}
html[data-theme="clair"] .topbar {
  border-color: #cbd5e1;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 25px rgba(15,23,42,.08);
}
html[data-theme="clair"] .topnav { border-color: #d2dae5; background: #f1f5f9; }
html[data-theme="clair"] .topnav button { color: #475569; }
html[data-theme="clair"] .topnav button.active { background: #ffffff; color: #5b21b6; box-shadow: 0 2px 8px rgba(15,23,42,.1); }
html[data-theme="clair"] .text-muted,
html[data-theme="clair"] .home-section-heading--games > p,
html[data-theme="clair"] .profile-hero-email,
html[data-theme="clair"] .import-help { color: #526176 !important; }
html[data-theme="clair"] .home-showcase,
html[data-theme="clair"] .home-action-card,
html[data-theme="clair"] .card,
html[data-theme="clair"] .lobby-roster,
html[data-theme="clair"] .lobby-config,
html[data-theme="clair"] .profile-auth-card,
html[data-theme="clair"] .profile-benefits-card,
html[data-theme="clair"] .profile-settings-card,
html[data-theme="clair"] .profile-account-card,
html[data-theme="clair"] .profile-activity-card,
html[data-theme="clair"] .superadmin-card,
html[data-theme="clair"] .round-command-bar,
html[data-theme="clair"] .round-context-bar,
html[data-theme="clair"] .round-result-hero,
html[data-theme="clair"] .result-ranking-card,
html[data-theme="clair"] .final-card,
html[data-theme="clair"] .game-feedback-card,
html[data-theme="clair"] .app-dialog {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 18px 45px rgba(15,23,42,.1);
}
html[data-theme="clair"] input,
html[data-theme="clair"] select,
html[data-theme="clair"] textarea {
  border-color: #94a3b8;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}
html[data-theme="clair"] input::placeholder,
html[data-theme="clair"] textarea::placeholder { color: #64748b; opacity: 1; }
html[data-theme="clair"] input:focus,
html[data-theme="clair"] select:focus,
html[data-theme="clair"] textarea:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
html[data-theme="clair"] .btn-secondary,
html[data-theme="clair"] .btn-ghost {
  border-color: #aebaca;
  background: #ffffff;
  color: #27364b;
}
html[data-theme="clair"] .btn-secondary:hover,
html[data-theme="clair"] .btn-ghost:hover { border-color: #7c3aed; background: #f5f3ff; color: #5b21b6; }
html[data-theme="clair"] .home-player-control,
html[data-theme="clair"] .quick-match-size,
html[data-theme="clair"] .config-game-card,
html[data-theme="clair"] .guest-game-item,
html[data-theme="clair"] .result-player-row,
html[data-theme="clair"] .profile-history-row,
html[data-theme="clair"] .social-row,
html[data-theme="clair"] .superadmin-game-row,
html[data-theme="clair"] .cse-admin-tools,
html[data-theme="clair"] .algorithm-description,
html[data-theme="clair"] .cse-share-panel,
html[data-theme="clair"] .superadmin-tabs {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}
html[data-theme="clair"] .home-game-tile {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 13px 32px rgba(15,23,42,.1);
}
html[data-theme="clair"] .home-game-tile-media { background: linear-gradient(145deg,#ede9fe,#dbeafe); }
html[data-theme="clair"] .home-game-tile-media::after { background: linear-gradient(transparent, rgba(255,255,255,.58)); }
html[data-theme="clair"] .home-game-tile-copy small { color: #526176; }
html[data-theme="clair"] .home-game-tile-action { border-color: #d6deea; color: #5b21b6; }
html[data-theme="clair"] .home-game-tile:hover { border-color: #7c3aed; box-shadow: 0 20px 45px rgba(76,29,149,.14); }
html[data-theme="clair"] .round-report-button { border-color: #dc2626; background: #fff1f2; color: #991b1b; }
html[data-theme="clair"] .profile-forgot-link { color: #5b21b6; }
html[data-theme="clair"] .theme-choice { border-color: #cbd5e1; background: #ffffff; color: #0f172a; }
html[data-theme="clair"] .theme-choice > span:nth-child(2) small { color: #526176; }
html[data-theme="clair"] .theme-choice[aria-checked="true"] { border-color: #6d28d9; background: #f5f3ff; }
html[data-theme="clair"] .field-error { color: #b91c1c; }
html[data-theme="clair"] .admin-data-table { background: #ffffff; }
html[data-theme="clair"] .admin-data-table th { background: #e8edf4; color: #334155; }
html[data-theme="clair"] .admin-data-table td { color: #263449; }
html[data-theme="clair"] .admin-data-table tbody tr:hover { background: #f5f3ff; }
html[data-theme="clair"] .scratch-outcome-badge.winner { background: #dcfce7; color: #166534; }
html[data-theme="clair"] .scratch-outcome-badge.loser { background: #fee2e2; color: #991b1b; }
html[data-theme="clair"] .profile-feedback.is-success { color: #047857; }
html[data-theme="clair"] .profile-feedback.is-error { color: #b91c1c; }
html[data-theme="clair"] .site-footer { border-color: #cbd5e1; background: rgba(255,255,255,.9); }

/* Les grands panneaux possèdent, en thème sombre, des dégradés codés en dur.
   On les remplace explicitement afin de conserver un contraste WCAG lisible
   en thème clair sur l'accueil, le profil et pendant les parties. */
html[data-theme="clair"] .home-play-section {
  border-color: #cbd5e1;
  background: linear-gradient(145deg, #ffffff, #f5f3ff 115%);
  color: #0f172a;
  box-shadow: 0 22px 55px rgba(15,23,42,.11), inset 0 1px 0 #ffffff;
}
html[data-theme="clair"] .home-play-section .panel-kicker { color: #6d28d9; }
html[data-theme="clair"] .home-play-section .home-section-heading h2,
html[data-theme="clair"] .home-play-section .home-section-heading > p { color: #0f172a; }
html[data-theme="clair"] .home-play-section .home-section-heading > p { color: #526176; }
html[data-theme="clair"] .home-reassurance {
  border-top-color: #d8e0eb;
  color: #526176;
}
html[data-theme="clair"] .home-reassurance span + span::before { color: #94a3b8; }

html[data-theme="clair"] .profile-hero-card {
  border-color: #c4b5fd;
  background:
    radial-gradient(circle at 4% 12%, rgba(124,58,237,.17), transparent 31%),
    radial-gradient(circle at 92% 100%, rgba(59,130,246,.12), transparent 35%),
    linear-gradient(145deg, #ffffff, #f1f5ff);
  color: #0f172a;
  box-shadow: 0 25px 60px rgba(30,41,59,.13), inset 0 1px 0 #fff;
}
html[data-theme="clair"] .profile-hero-card::after {
  border-color: rgba(109,40,217,.12);
  box-shadow: 0 0 0 38px rgba(109,40,217,.035), 0 0 0 76px rgba(59,130,246,.025);
}
html[data-theme="clair"] .profile-status-badge { color: #526176; }
html[data-theme="clair"] .profile-status-badge.is-connected { color: #047857; }
html[data-theme="clair"] .profile-identity h1 { color: #0f172a; }
html[data-theme="clair"] .profile-identity p { color: #526176; }
html[data-theme="clair"] .profile-overview-metrics {
  border-color: #cbd5e1;
  background: rgba(255,255,255,.82);
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(15,23,42,.07);
}
html[data-theme="clair"] .profile-overview-metrics > div + div { border-left-color: #d8e0eb; }
html[data-theme="clair"] .profile-overview-metrics span { color: #526176; }
html[data-theme="clair"] .profile-tabs {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
}
html[data-theme="clair"] .profile-tabs button { color: #526176; }
html[data-theme="clair"] .profile-tabs button:hover { color: #5b21b6; background: #f5f3ff; }
html[data-theme="clair"] .profile-tabs button.active {
  color: #ffffff;
  background: #6d28d9;
  box-shadow: 0 6px 16px rgba(109,40,217,.24);
}
html[data-theme="clair"] .profile-tabs button.active > span { color: #ede9fe; }

html[data-theme="clair"] .info-feature-grid article,
html[data-theme="clair"] .community-grid article,
html[data-theme="clair"] .privacy-stack article,
html[data-theme="clair"] .info-story-card,
html[data-theme="clair"] .faq-list details {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
}
html[data-theme="clair"] .community-primary-card {
  border-color: #a78bfa !important;
  background: linear-gradient(145deg, #faf5ff, #eef2ff) !important;
}
html[data-theme="clair"] .faq-list summary { color: #0f172a; }

html[data-theme="clair"] .matchmaking-card,
html[data-theme="clair"] .round-visual-panel,
html[data-theme="clair"] .round-answer-panel,
html[data-theme="clair"] .round-question-card,
html[data-theme="clair"] .round-duel-shell,
html[data-theme="clair"] .result-map-card {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 20px 48px rgba(15,23,42,.1);
}
html[data-theme="clair"] .matchmaking-metrics,
html[data-theme="clair"] .matchmaking-player-slot,
html[data-theme="clair"] .round-player-chip,
html[data-theme="clair"] .round-fact,
html[data-theme="clair"] .round-map-frame,
html[data-theme="clair"] .round-bet-panel {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}
html[data-theme="clair"] .matchmaking-metrics > div + div,
html[data-theme="clair"] .round-bet-panel { border-color: #d8e0eb; }
html[data-theme="clair"] .round-timer-gauge::after,
html[data-theme="clair"] .round-duel-versus {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #5b21b6;
}
html[data-theme="clair"] .round-result-hero p b,
html[data-theme="clair"] .result-answer-exact b,
html[data-theme="clair"] .result-score-copy strong { color: #5b21b6; }
html[data-theme="clair"] .round-player-chip.is-answered { color: #047857; }
html[data-theme="clair"] .cse-invite-context {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #ffffff, #f5f3ff);
  color: #0f172a;
  box-shadow: 0 14px 35px rgba(76,29,149,.09);
}

@media (max-width: 1100px) {
  .home-game-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-section-heading--games { align-items: flex-start; flex-direction: column; }
  .home-section-heading--games > p { text-align: left; }
  .home-game-mosaic { grid-template-columns: 1fr; }
  .home-game-tile { min-height: 0; }
  .home-game-tile-media { aspect-ratio: 16 / 8; }
  .round-header-actions { align-items: flex-end; flex-direction: column-reverse; gap: 7px; }
  .round-report-button { min-height: 32px; padding: 7px 10px; }
  .round-report-button--result { margin: 12px 0 0; align-self: flex-start; }
  .game-feedback-card { grid-template-columns: 1fr; padding: 19px; }
  .game-feedback-stars { justify-content: flex-start; }
  .profile-login-line { align-items: stretch; flex-direction: column; gap: 4px; }
  .profile-forgot-link { align-self: flex-start; }
  .theme-choice-grid--profile { grid-template-columns: 1fr; }
  .cse-share-form { align-items: stretch; flex-direction: column; }
  .cse-admin-tools { grid-template-columns: 1fr; }
  .superadmin-panel-heading { align-items: flex-start; flex-direction: column; }
  .app-dialog-shell, .app-dialog-card { padding: 22px 18px; }
}

/* ============================================================
   Réglages privés par jeu, tableaux administrables et rythme des manches
   ============================================================ */
.per-game-settings {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(139, 92, 246, .075), rgba(255, 255, 255, .018));
}
.per-game-settings[hidden] { display: none !important; }
.per-game-settings-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.per-game-settings-heading h4 { margin-top: 4px; font-size: 14px; }
.per-game-settings-heading > p { max-width: 330px; color: var(--text-2); font-size: 10px; text-align: right; }
.per-game-settings-list { display: grid; gap: 8px; }
.per-game-setting-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 100px 150px;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(7, 12, 22, .34);
}
.per-game-setting-identity { display: flex; align-items: center; min-width: 0; gap: 10px; }
.per-game-setting-identity > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  font-size: 18px;
}
.per-game-setting-identity > div { display: grid; min-width: 0; gap: 2px; }
.per-game-setting-identity strong { overflow: hidden; color: var(--text-0); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.per-game-setting-identity small { overflow: hidden; color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.per-game-setting-row label { display: grid; gap: 5px; }
.per-game-setting-row label > span { color: var(--text-2); font-size: 8.5px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.per-game-setting-row input,
.per-game-setting-row select { width: 100%; height: 39px; padding: 8px 10px; font-size: 10.5px; }
.guest-game-chip > span:last-child { display: grid; gap: 2px; }
.guest-game-chip small { color: var(--text-2); font-size: 8.5px; font-weight: 600; }

.admin-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.admin-sort-button span { min-width: 0; }
.admin-sort-button b { margin-left: auto; color: var(--text-3); font-size: 9px; font-weight: 900; }
.admin-sort-button:hover,
.admin-sort-button.is-active { color: var(--accent-2); }
.admin-id-cell code {
  display: inline-block;
  max-width: 210px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(139, 92, 246, .07);
  color: var(--text-1);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cse-manual-draw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid rgba(251, 191, 36, .32);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(251, 191, 36, .11), rgba(139, 92, 246, .055));
}
.cse-manual-draw[hidden] { display: none !important; }
.cse-manual-draw > div { display: grid; gap: 4px; }
.cse-manual-draw strong { color: var(--text-0); font-size: 12px; }
.cse-manual-draw p { color: var(--text-2); font-size: 10px; line-height: 1.45; }
.cse-manual-draw .btn { flex: 0 0 auto; }

/* Toutes les zones visuelles gardent une hauteur stable. Le média s'adapte
   à l'intérieur au lieu de modifier la mise en page à chaque question. */
#view-play { --round-media-height: 540px; }
.round-stage { min-height: var(--round-media-height); }
.round-visual-panel,
.round-chrono-image,
.flag-image-card {
  height: var(--round-media-height);
  min-height: var(--round-media-height);
  max-height: var(--round-media-height);
}
.round-visual-panel .pano-wrap,
.round-visual-panel .property-img,
.round-visual-panel .pixel-image-frame {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
.round-visual-panel .property-img,
.round-visual-panel .pixel-image-frame,
.round-chrono-image,
.flag-image-card,
.duel-card {
  background: radial-gradient(circle at 50% 35%, rgba(139, 92, 246, .1), transparent 55%), #080c16;
}
.round-visual-panel .property-img img,
.round-visual-panel .pixel-image-frame img,
.round-chrono-image img,
.flag-image-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}
.flag-image-card { padding: 24px; }
.flag-image-card img { width: min(100%, 760px); }
.round-duel-grid { align-items: stretch; }
.duel-card { overflow: hidden; }
.duel-card img {
  width: 100%;
  height: 270px;
  min-height: 270px;
  object-fit: contain;
}

/* Chronomètre plus lisible et alerte progressive dans les 10 dernières secondes. */
.round-timer {
  min-width: 184px;
  gap: 12px;
  padding: 9px 15px 9px 9px;
  border-radius: 16px;
}
.round-timer-gauge { width: 48px; height: 48px; }
.round-timer-gauge::after { width: 37px; height: 37px; font-size: 16px; }
.round-timer small { font-size: 9px; font-weight: 800; }
.round-timer strong { margin-top: 1px; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.round-timer.urgent {
  border-color: rgba(245, 158, 11, .58);
  background: rgba(120, 53, 15, .18);
}
.round-timer.urgent .round-timer-gauge { background: conic-gradient(#f59e0b var(--timer-progress), rgba(255, 255, 255, .07) 0); }
.round-timer.urgent strong { color: #fcd34d; }
.round-timer.critical {
  border-color: rgba(239, 68, 68, .78);
  background: rgba(127, 29, 29, .28);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12), 0 0 32px rgba(239, 68, 68, .22);
  animation: guessarena-timer-pulse .72s ease-in-out infinite alternate;
}
.round-timer.critical .round-timer-gauge { background: conic-gradient(#ef4444 var(--timer-progress), rgba(255, 255, 255, .07) 0); }
.round-timer.critical strong { color: #fecaca; }
#view-play.timer-critical .round-command-bar {
  border-color: rgba(239, 68, 68, .42);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2), 0 0 0 2px rgba(239, 68, 68, .08), inset 0 1px 0 rgba(255, 255, 255, .035);
}
#view-play.timer-critical .round-page::after {
  content: "";
  position: fixed;
  z-index: 1000;
  inset: 0;
  border: 5px solid rgba(239, 68, 68, .42);
  box-shadow: inset 0 0 70px rgba(239, 68, 68, .13);
  pointer-events: none;
  animation: guessarena-critical-frame .72s ease-in-out infinite alternate;
}
@keyframes guessarena-timer-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.025); }
}
@keyframes guessarena-critical-frame {
  from { opacity: .25; }
  to { opacity: .95; }
}

html[data-theme="clair"] .per-game-settings,
html[data-theme="clair"] .per-game-setting-row,
html[data-theme="clair"] .cse-manual-draw {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
html[data-theme="clair"] .per-game-setting-identity > span,
html[data-theme="clair"] .admin-id-cell code { border-color: #d8e0eb; background: #f5f3ff; color: #4c1d95; }
html[data-theme="clair"] .round-visual-panel .property-img,
html[data-theme="clair"] .round-visual-panel .pixel-image-frame,
html[data-theme="clair"] .round-chrono-image,
html[data-theme="clair"] .flag-image-card,
html[data-theme="clair"] .duel-card { background: radial-gradient(circle at 50% 35%, rgba(109, 40, 217, .08), transparent 55%), #eef2f7; }
html[data-theme="clair"] .round-timer { border-color: #cbd5e1; background: #ffffff; color: #0f172a; }
html[data-theme="clair"] .round-timer.urgent { border-color: #d97706; background: #fffbeb; }
html[data-theme="clair"] .round-timer.urgent strong { color: #92400e; }
html[data-theme="clair"] .round-timer.critical { border-color: #dc2626; background: #fff1f2; }
html[data-theme="clair"] .round-timer.critical strong { color: #991b1b; }

@media (max-width: 980px) {
  #view-play { --round-media-height: 440px; }
  .per-game-setting-row { grid-template-columns: minmax(180px, 1fr) 92px 140px; }
}
@media (max-width: 700px) {
  #view-play { --round-media-height: 350px; }
  .per-game-settings-heading { align-items: flex-start; flex-direction: column; }
  .per-game-settings-heading > p { text-align: left; }
  .per-game-setting-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .per-game-setting-identity { grid-column: 1 / -1; }
  .cse-manual-draw { align-items: stretch; flex-direction: column; }
  .round-timer { min-width: 168px; }
  .duel-card img { height: 205px; min-height: 205px; }
}
@media (prefers-reduced-motion: reduce) {
  .round-timer.critical,
  #view-play.timer-critical .round-page::after { animation: none !important; }
}

/* ============================================================
   Bêta publique, partage et SEO éditorial
   ============================================================ */
.noscript-notice {
  position: relative;
  z-index: 99999;
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-bottom: 1px solid #f59e0b;
  background: #451a03;
  color: #fffbeb;
  font-family: Arial, sans-serif;
  text-align: center;
}
.noscript-notice strong { font-size: 15px; }
.noscript-notice span { font-size: 13px; }

.home-discovery-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 22px;
  margin-top: 26px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, .19), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(34, 211, 238, .09), transparent 38%),
    linear-gradient(145deg, rgba(17, 24, 39, .92), rgba(8, 13, 25, .96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.home-discovery-copy { align-self: center; }
.home-discovery-copy h2 {
  max-width: 780px;
  margin-top: 8px;
  color: var(--text-0);
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.home-discovery-copy > p {
  max-width: 760px;
  margin-top: 14px;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.7;
}
.home-discovery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.home-discovery-actions .btn { min-height: 46px; }
.home-discovery-points { display: grid; align-content: center; gap: 10px; }
.home-discovery-points article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.home-discovery-points article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(139, 92, 246, .13);
  font-size: 22px;
}
.home-discovery-points strong { display: block; color: var(--text-0); font-size: 12px; }
.home-discovery-points p { margin-top: 4px; color: var(--text-2); font-size: 9.5px; line-height: 1.45; }

.home-action-card--join.is-invited {
  border-color: rgba(34, 197, 94, .55);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .1), 0 22px 60px rgba(0, 0, 0, .2);
}
.home-action-card--join.is-invited .home-action-label,
.home-action-card--join.is-invited .home-join-hint { color: #86efac; }

/* La consigne secondaire explique le comportement à l'expiration du chrono. */
.round-context-copy { display: grid; min-width: 0; gap: 4px; }
.round-context-copy p { margin: 0; }
.round-context-copy small {
  color: var(--text-3);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.4;
}
.round-answer-state.is-sent + * { opacity: .75; }

.property-minimap-help {
  display: block;
  margin-top: 7px;
  color: var(--text-3);
  font-size: 8.5px;
  line-height: 1.4;
}
.property-minimap { cursor: grab; }
.property-minimap:active { cursor: grabbing; }

/* Trois actions équilibrées à la fin : accueil, partage et revanche. */
.final-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#finalShareBtn { border-color: rgba(167, 139, 250, .3); }

/* Complète la hauteur stable des médias pour les cartes de duel et les jeux
   sans panneau latéral, sans étirer ni recadrer les images. */
.round-duel-shell { min-height: var(--round-media-height); }
.duel-card img {
  height: clamp(205px, calc(var(--round-media-height) - 270px), 300px);
  min-height: clamp(205px, calc(var(--round-media-height) - 270px), 300px);
  max-height: clamp(205px, calc(var(--round-media-height) - 270px), 300px);
  object-fit: contain;
}
.round-question-card { min-height: min(var(--round-media-height), 620px); }
.round-flag-layout,
.round-chrono-layout,
.round-media-layout,
.round-split { align-items: stretch; }

/* Le badge d'administration indique visuellement son actualisation. */
.superadmin-tabs button[aria-busy="true"] b { min-width: 18px; opacity: .72; animation: admin-badge-pulse .75s ease-in-out infinite alternate; }
@keyframes admin-badge-pulse { from { transform: scale(.92); } to { transform: scale(1.08); } }

html[data-theme="clair"] .home-discovery-section {
  border-color: #d8d3f6;
  background:
    radial-gradient(circle at 8% 0%, rgba(109, 40, 217, .09), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(8, 145, 178, .07), transparent 38%),
    linear-gradient(145deg, #ffffff, #f7f8fc);
  box-shadow: 0 24px 65px rgba(15, 23, 42, .09);
}
html[data-theme="clair"] .home-discovery-points article {
  border-color: #dce3ee;
  background: rgba(255, 255, 255, .82);
}
html[data-theme="clair"] .home-discovery-points article > span { background: #f1edff; }
html[data-theme="clair"] .home-action-card--join.is-invited {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .1), 0 18px 46px rgba(15, 23, 42, .08);
}
html[data-theme="clair"] .home-action-card--join.is-invited .home-action-label,
html[data-theme="clair"] .home-action-card--join.is-invited .home-join-hint { color: #166534; }
html[data-theme="clair"] .property-minimap-help,
html[data-theme="clair"] .round-context-copy small { color: #64748b; }

@media (max-width: 900px) {
  .home-discovery-section { grid-template-columns: 1fr; }
  .home-discovery-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-discovery-points article { grid-template-columns: 1fr; align-content: start; }
}
@media (max-width: 700px) {
  .home-discovery-section { padding: 20px; border-radius: 20px; }
  .home-discovery-points { grid-template-columns: 1fr; }
  .home-discovery-points article { grid-template-columns: 42px minmax(0, 1fr); }
  .home-discovery-points article > span { width: 42px; height: 42px; }
  .home-discovery-actions { display: grid; grid-template-columns: 1fr; }
  .round-context-bar { align-items: flex-start; }
  .round-context-copy small { max-width: 270px; }
  .final-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .superadmin-tabs button[aria-busy="true"] b { animation: none; }
}

/* ============================================================
   Économie, progression, classement et chrono prioritaire
   ============================================================ */

/* Solde visible dans la barre principale. */
.wallet-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(251, 191, 36, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(120, 53, 15, .18), rgba(139, 92, 246, .1));
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  font: 700 10px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.wallet-pill:hover,
.wallet-pill:focus-visible {
  border-color: rgba(251, 191, 36, .6);
  background: linear-gradient(135deg, rgba(120, 53, 15, .3), rgba(139, 92, 246, .16));
  transform: translateY(-1px);
  outline: none;
}
.wallet-pill > span:first-child { font-size: 15px; }
.wallet-pill strong { color: #fde68a; font-size: 12px; font-variant-numeric: tabular-nums; }
.wallet-pill i { width: 1px; height: 17px; background: rgba(255, 255, 255, .12); }
.wallet-pill b { color: #c4b5fd; font-size: inherit; }
.wallet-pill[hidden] { display: none !important; }

/* Coût et quota d'un salon avant sa création. */
.room-economy-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 18px 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(251, 191, 36, .25);
  border-radius: 17px;
  background:
    radial-gradient(circle at 0 0, rgba(251, 191, 36, .1), transparent 38%),
    linear-gradient(135deg, rgba(120, 53, 15, .11), rgba(15, 23, 42, .55));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.room-economy-card.is-free {
  border-color: rgba(16, 185, 129, .32);
  background:
    radial-gradient(circle at 0 0, rgba(16, 185, 129, .11), transparent 42%),
    linear-gradient(135deg, rgba(6, 78, 59, .12), rgba(15, 23, 42, .55));
}
.room-economy-card.is-blocked { border-color: rgba(239, 68, 68, .42); background: rgba(127, 29, 29, .13); }
.room-economy-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(251, 191, 36, .23);
  border-radius: 14px;
  background: rgba(251, 191, 36, .1);
  font-size: 22px;
}
.room-economy-card strong { display: block; color: var(--text-0); font-size: 12px; }
.room-economy-card p { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.room-economy-balance {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(0, 0, 0, .16);
  color: #fde68a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Réglages essentiels et panneau avancé replié. */
.config-primary-settings {
  border-color: rgba(139, 92, 246, .22);
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, .09), transparent 38%),
    rgba(255, 255, 255, .02);
}
.config-fields--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advanced-settings-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 13px;
  margin: 15px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.advanced-settings-toggle:hover,
.advanced-settings-toggle:focus-visible,
.advanced-settings-toggle.is-open {
  border-color: rgba(167, 139, 250, .42);
  background: rgba(139, 92, 246, .085);
  outline: none;
}
.advanced-settings-toggle:active { transform: scale(.997); }
.advanced-settings-toggle-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(139, 92, 246, .14);
  font-size: 19px;
}
.advanced-settings-toggle span:nth-child(2) { display: grid; gap: 4px; }
.advanced-settings-toggle strong { color: var(--text-0); font-size: 11.5px; }
.advanced-settings-toggle small { color: var(--text-2); font-size: 11px; line-height: 1.45; }
.advanced-settings-toggle > b { color: var(--accent-2); font-size: 22px; transition: transform .25s ease; }
.advanced-settings-toggle.is-open > b { transform: rotate(180deg); }
.advanced-room-settings {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid rgba(167, 139, 250, .21);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, .055), transparent 150px),
    rgba(3, 7, 15, .22);
  animation: advanced-settings-in .24s ease both;
}
.advanced-room-settings[hidden] { display: none !important; }
.advanced-room-settings > .config-section { margin: 0; }
@keyframes advanced-settings-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
.per-game-settings-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}
.per-game-settings-toggle-card h3 { margin-top: 4px; font-size: 14px; }
.per-game-settings-toggle-card p { margin-top: 5px; color: var(--text-2); font-size: 9.5px; line-height: 1.5; }
.switch-button {
  display: grid;
  grid-template-columns: 35px auto;
  align-items: center;
  gap: 8px;
  min-width: 116px;
  padding: 6px 9px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.switch-button span {
  position: relative;
  display: block;
  width: 35px;
  height: 21px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
}
.switch-button span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #cbd5e1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .25);
  transition: transform .22s ease, background .22s ease;
}
.switch-button b { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; }
.switch-button[aria-checked="true"] { border-color: rgba(16, 185, 129, .4); background: rgba(6, 78, 59, .15); color: #6ee7b7; }
.switch-button[aria-checked="true"] span { background: rgba(16, 185, 129, .55); }
.switch-button[aria-checked="true"] span::after { transform: translateX(14px); background: #ecfdf5; }

/* Le chrono est un composant d'action, pas une simple métadonnée. */
.round-command-bar { overflow: visible; }
.round-header-actions { flex: 0 0 auto; }
.round-timer {
  isolation: isolate;
  min-width: 286px;
  min-height: 76px;
  gap: 14px;
  padding: 9px 17px 11px 10px;
  overflow: hidden;
  border-color: rgba(167, 139, 250, .3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 0, rgba(139, 92, 246, .18), transparent 48%),
    rgba(3, 7, 15, .63);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.round-timer-gauge { flex: 0 0 auto; width: 58px; height: 58px; }
.round-timer-gauge::after { width: 45px; height: 45px; background: #0a1120; font-size: 18px; }
.round-timer-copy {
  display: grid;
  min-width: 104px;
  align-content: center;
  gap: 1px;
}
.round-timer-copy small {
  color: #c4b5fd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}
.round-timer-copy strong {
  margin: 1px 0 0;
  color: #fff;
  font-size: clamp(29px, 2.2vw, 35px);
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 0 24px rgba(139, 92, 246, .25);
}
.round-timer-copy > span {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.2;
}
.round-timer-urgency {
  align-self: center;
  margin-left: auto;
  padding: 7px 9px;
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 999px;
  background: rgba(139, 92, 246, .09);
  color: #ddd6fe;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.round-timer-track {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .055);
}
.round-timer-track i {
  display: block;
  width: var(--timer-percent);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c4b5fd);
  box-shadow: 0 0 12px rgba(139, 92, 246, .55);
  transition: width .1s linear;
}
.round-timer.tick-pulse .round-timer-copy strong { animation: round-timer-tick .28s ease; }
.round-timer.urgent {
  border-color: rgba(245, 158, 11, .7);
  background: radial-gradient(circle at 15% 0, rgba(245, 158, 11, .18), transparent 48%), rgba(69, 26, 3, .65);
}
.round-timer.urgent .round-timer-urgency { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .12); color: #fde68a; }
.round-timer.urgent .round-timer-track i { background: linear-gradient(90deg, #d97706, #fbbf24); box-shadow: 0 0 14px rgba(245, 158, 11, .62); }
.round-timer.critical {
  border-color: rgba(248, 113, 113, .9);
  background: radial-gradient(circle at 15% 0, rgba(239, 68, 68, .24), transparent 50%), rgba(69, 10, 10, .78);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .13), 0 12px 35px rgba(127, 29, 29, .3);
}
.round-timer.critical .round-timer-urgency { border-color: rgba(248, 113, 113, .52); background: rgba(239, 68, 68, .2); color: #fee2e2; }
.round-timer.critical .round-timer-track i { background: linear-gradient(90deg, #b91c1c, #fb7185); box-shadow: 0 0 16px rgba(239, 68, 68, .72); }
.round-timer.finished { border-color: rgba(148, 163, 184, .4); filter: saturate(.55); }
.round-timer.finished .round-timer-track i { width: 0 !important; }
@keyframes round-timer-tick {
  50% { transform: scale(1.06); }
}

/* Carte de gain affichée sur le résultat final. */
.match-reward-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 19px;
  background:
    radial-gradient(circle at 0 0, rgba(139, 92, 246, .14), transparent 38%),
    rgba(15, 23, 42, .58);
  box-shadow: 0 15px 40px rgba(0, 0, 0, .16);
}
.match-reward-card[hidden] { display: none !important; }
.match-reward-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(139, 92, 246, .14);
  font-size: 25px;
}
.match-reward-copy h2 { margin-top: 3px; font-size: 15px; }
.match-reward-copy p { margin-top: 5px; color: var(--text-2); font-size: 9.5px; line-height: 1.5; }
.match-reward-gains { display: grid; justify-items: end; gap: 4px; }
.match-reward-gains strong { color: #a7f3d0; font: 800 13px/1.25 var(--font-display); }
.match-reward-gains span { color: #c4b5fd; font-size: 9px; font-weight: 750; }
.match-reward-multiplier {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(251, 191, 36, .34);
  border-radius: 999px;
  background: rgba(251, 191, 36, .1);
  color: #fde68a;
  font-size: 8px;
  font-weight: 850;
}
.match-reward-card.is-success { border-color: rgba(16, 185, 129, .4); }
.match-reward-card.is-success .match-reward-icon { background: rgba(16, 185, 129, .12); }
.match-reward-card.is-error { border-color: rgba(248, 113, 113, .38); background: rgba(127, 29, 29, .12); }
.match-reward-card.is-guest { border-color: rgba(251, 191, 36, .32); }
.match-reward-loader {
  width: 31px;
  height: 31px;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: match-reward-spin .75s linear infinite;
}
@keyframes match-reward-spin { to { transform: rotate(360deg); } }

/* Classement public. */
.leaderboard-page {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 35px 24px 72px;
}
.leaderboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 18%, rgba(251, 191, 36, .17), transparent 24%),
    radial-gradient(circle at 0 100%, rgba(139, 92, 246, .16), transparent 42%),
    linear-gradient(135deg, rgba(30, 41, 59, .9), rgba(8, 12, 22, .94));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
}
.leaderboard-hero h1 { margin-top: 7px; font-size: clamp(28px, 5vw, 50px); line-height: 1; }
.leaderboard-hero p { max-width: 700px; margin-top: 14px; color: var(--text-2); font-size: 11px; line-height: 1.7; }
.leaderboard-hero-trophy {
  display: grid;
  place-items: center;
  width: clamp(90px, 13vw, 142px);
  height: clamp(90px, 13vw, 142px);
  border: 1px solid rgba(251, 191, 36, .25);
  border-radius: 34px;
  background: rgba(251, 191, 36, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 42px rgba(0, 0, 0, .2);
  font-size: clamp(46px, 8vw, 78px);
  transform: rotate(4deg);
}
.leaderboard-tabs {
  display: flex;
  width: fit-content;
  gap: 5px;
  margin: 21px auto 15px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
}
.leaderboard-tabs button {
  min-height: 37px;
  padding: 8px 17px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 750 10px/1 var(--font-body);
  cursor: pointer;
}
.leaderboard-tabs button.active { background: var(--accent); color: #fff; box-shadow: 0 5px 16px rgba(139, 92, 246, .28); }
.leaderboard-card {
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(15, 23, 42, .52);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
}
.leaderboard-status { min-height: 18px; color: var(--text-2); font-size: 9.5px; text-align: center; }
.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin: 19px 0 28px;
}
.leaderboard-podium-place {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 190px;
  gap: 6px;
  padding: 21px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .025);
  text-align: center;
}
.leaderboard-podium-place::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -42%;
  left: -20%;
  height: 80%;
  border-radius: 50%;
  background: rgba(139, 92, 246, .11);
  filter: blur(24px);
  pointer-events: none;
}
.leaderboard-podium-place.place-1 { min-height: 225px; border-color: rgba(251, 191, 36, .36); background: linear-gradient(180deg, rgba(251, 191, 36, .09), rgba(255, 255, 255, .02)); order: 2; }
.leaderboard-podium-place.place-2 { order: 1; }
.leaderboard-podium-place.place-3 { order: 3; border-color: rgba(217, 119, 6, .25); }
.leaderboard-podium-place > span { position: absolute; top: 12px; left: 13px; font-size: 23px; }
.leaderboard-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(139, 92, 246, .12);
  font-size: 31px;
}
.place-1 .leaderboard-avatar { width: 72px; height: 72px; border-color: rgba(251, 191, 36, .32); background: rgba(251, 191, 36, .1); font-size: 36px; }
.leaderboard-podium-place strong,
.leaderboard-podium-place b,
.leaderboard-podium-place small { position: relative; z-index: 1; }
.leaderboard-podium-place strong { color: var(--text-0); font-size: 12px; }
.leaderboard-podium-place b { color: #c4b5fd; font-size: 9px; }
.leaderboard-podium-place small { color: var(--text-2); font-size: 8.5px; line-height: 1.4; }
.leaderboard-podium-place.is-me,
.leaderboard-row.is-me { box-shadow: inset 0 0 0 2px rgba(16, 185, 129, .28); }
.leaderboard-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 17px; }
.leaderboard-table { min-width: 760px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 72px minmax(180px, 1.5fr) .8fr 1fr .75fr .85fr;
  align-items: center;
  min-height: 57px;
  gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 12, 22, .18);
  color: var(--text-1);
  font-size: 9.5px;
}
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row:not(.leaderboard-row--head):hover { background: rgba(139, 92, 246, .055); }
.leaderboard-row--head {
  min-height: 40px;
  background: rgba(255, 255, 255, .035);
  color: var(--text-2);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leaderboard-rank { color: #fde68a; font-family: var(--font-display); font-size: 13px; font-weight: 850; }
.leaderboard-player { display: flex; align-items: center; min-width: 0; gap: 10px; }
.leaderboard-player i { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; background: rgba(139, 92, 246, .11); font-style: normal; font-size: 17px; }
.leaderboard-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Progression, quêtes et boutique. */
.progression-loading { min-height: 24px; color: var(--text-2); font-size: 10px; text-align: center; }
#progressionDashboard { display: grid; gap: 17px; }
.progression-event-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(251, 191, 36, .34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(120, 53, 15, .22), rgba(139, 92, 246, .11));
}
.progression-event-banner > span { font-size: 24px; }
.progression-event-banner strong { color: #fde68a; font-size: 11px; }
.progression-event-banner p { margin-top: 3px; color: var(--text-1); font-size: 9px; line-height: 1.5; }
.progression-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, auto);
  align-items: center;
  gap: 22px;
  padding: clamp(20px, 4vw, 31px);
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 23px;
  background:
    radial-gradient(circle at 0 0, rgba(139, 92, 246, .16), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(14, 165, 233, .09), transparent 35%),
    rgba(15, 23, 42, .63);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .16);
}
.level-emblem {
  display: grid;
  place-items: center;
  width: 91px;
  height: 91px;
  border: 1px solid rgba(167, 139, 250, .32);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(139, 92, 246, .24), rgba(79, 70, 229, .11));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 15px 35px rgba(76, 29, 149, .16);
}
.level-emblem span { color: #ddd6fe; font-size: 7.5px; font-weight: 900; letter-spacing: .14em; }
.level-emblem strong { margin-top: -8px; color: #fff; font: 850 39px/1 var(--font-display); }
.level-copy h2 { margin-top: 4px; font-size: clamp(19px, 3vw, 28px); }
.level-copy p { margin-top: 7px; color: var(--text-2); font-size: 9.5px; }
.level-progress,
.quest-progress {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .075);
}
.level-progress span,
.quest-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #22d3ee);
  box-shadow: 0 0 14px rgba(139, 92, 246, .4);
}
.wallet-balance-card {
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 16px;
  background: rgba(120, 53, 15, .1);
}
.wallet-balance-card span { color: var(--text-2); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.wallet-balance-card strong { color: #fde68a; font: 800 20px/1.25 var(--font-display); }
.wallet-balance-card small { color: var(--text-2); font-size: 8px; }
.room-quota-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 21px;
  border: 1px solid rgba(16, 185, 129, .22);
  border-radius: 18px;
  background: rgba(6, 78, 59, .09);
}
.room-quota-card h3 { margin-top: 4px; font-size: 15px; }
.room-quota-card p { margin-top: 5px; color: var(--text-2); font-size: 9px; }
.progression-section {
  padding: clamp(18px, 3vw, 25px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(15, 23, 42, .4);
}
.progression-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.progression-section-heading h3 { margin-top: 4px; font-size: 16px; }
.progression-section-heading > span { color: var(--text-2); font-size: 8.5px; }
.quest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.quest-card {
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}
.quest-card.is-complete { border-color: rgba(16, 185, 129, .34); background: rgba(6, 78, 59, .08); }
.quest-card.is-claimed { opacity: .76; }
.quest-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.quest-card-top > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(139, 92, 246, .11); font-size: 17px; }
.quest-card-top strong { display: block; color: var(--text-0); font-size: 10.5px; }
.quest-card-top small { display: block; margin-top: 4px; color: var(--text-2); font-size: 8.5px; line-height: 1.45; }
.quest-card .btn { align-self: center; min-height: 31px; padding: 6px 9px; }
.quest-claimed { align-self: center; color: #6ee7b7; font-size: 8.5px; font-weight: 800; }
.quest-progress { height: 5px; margin-top: 0; }
.quest-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 8px; }
.quest-card-bottom b { color: #c4b5fd; font-size: 8px; }
.coin-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.coin-pack-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 190px;
  padding: 22px 17px 17px;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0, rgba(251, 191, 36, .11), transparent 44%),
    rgba(255, 255, 255, .025);
}
.coin-pack-card h4 { font-size: 13px; }
.coin-pack-card > strong { color: #fde68a; font: 800 22px/1.2 var(--font-display); }
.coin-pack-card > p { color: var(--text-1); font-size: 10px; font-weight: 700; }
.coin-pack-card .btn { align-self: end; margin-top: auto; }
.coin-pack-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  max-width: 100px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .16);
  color: #ddd6fe;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.coin-pack-badge:empty { display: none; }
.progression-transactions ul { margin: 0; padding: 0; list-style: none; }
.progression-transactions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
}
.progression-transactions li:last-child { border-bottom: 0; }
.progression-transactions li span { display: grid; gap: 3px; color: var(--text-1); }
.progression-transactions li small { color: var(--text-2); font-size: 7.5px; }
.progression-transactions li strong { font-size: 10px; }
.progression-transactions .is-positive { color: #6ee7b7; }
.progression-transactions .is-negative { color: #fca5a5; }

/* Administration de l'économie et des événements. */
.admin-economy-form { display: grid; gap: 18px; }
.admin-economy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-economy-grid label,
.admin-event-fields > label:not(.admin-event-check) {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
}
.admin-economy-grid label > span,
.admin-event-fields label > span { color: var(--text-2); font-size: 8.5px; font-weight: 750; line-height: 1.4; }
.admin-economy-grid input,
.admin-event-fields input[type="date"],
.admin-event-fields input[type="text"] { margin: 0; }
.admin-event-editor {
  display: grid;
  gap: 17px;
  margin-top: 29px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.admin-event-editor > div:first-child h3 { margin-top: 4px; font-size: 16px; }
.admin-event-editor > div:first-child p { margin-top: 5px; color: var(--text-2); font-size: 9px; }
.admin-event-fields {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) repeat(2, minmax(190px, 1fr));
  align-items: stretch;
  gap: 11px;
}
.admin-event-fields > label:last-of-type { grid-column: 1 / 3; }
.admin-event-fields > .btn { align-self: stretch; }
.admin-event-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  cursor: pointer;
}
.admin-event-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.admin-event-list { display: grid; gap: 8px; }
.admin-event-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(200px, auto) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.admin-event-row.is-today { border-color: rgba(16, 185, 129, .34); background: rgba(6, 78, 59, .08); }
.admin-event-row strong { display: block; font-size: 10px; }
.admin-event-row small { display: block; margin-top: 4px; color: var(--text-2); font-size: 8px; }
.admin-event-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-event-tags span { padding: 5px 8px; border-radius: 999px; background: rgba(139, 92, 246, .12); color: #ddd6fe; font-size: 7.5px; font-weight: 750; }

/* Thème clair. */
html[data-theme="clair"] .wallet-pill {
  border-color: #e5c35b;
  background: linear-gradient(135deg, #fffbeb, #f5f3ff);
  color: #334155;
}
html[data-theme="clair"] .wallet-pill strong { color: #92400e; }
html[data-theme="clair"] .wallet-pill b { color: #5b21b6; }
html[data-theme="clair"] .wallet-pill i { background: #d7dce5; }
html[data-theme="clair"] .room-economy-card,
html[data-theme="clair"] .advanced-room-settings,
html[data-theme="clair"] .leaderboard-card,
html[data-theme="clair"] .progression-hero-card,
html[data-theme="clair"] .progression-section,
html[data-theme="clair"] .match-reward-card {
  border-color: #d8e0eb;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
}
html[data-theme="clair"] .room-economy-card { border-color: #e5c35b; background: linear-gradient(135deg, #fffbeb, #fff); }
html[data-theme="clair"] .room-economy-card.is-free { border-color: #86d7b8; background: linear-gradient(135deg, #ecfdf5, #fff); }
html[data-theme="clair"] .room-economy-balance { border-color: #e6d59a; background: #fff; color: #92400e; }
html[data-theme="clair"] .advanced-settings-toggle,
html[data-theme="clair"] .per-game-settings-toggle-card,
html[data-theme="clair"] .quest-card,
html[data-theme="clair"] .coin-pack-card,
html[data-theme="clair"] .admin-economy-grid label,
html[data-theme="clair"] .admin-event-fields > label,
html[data-theme="clair"] .admin-event-row {
  border-color: #dce3ed;
  background: #fff;
  color: #0f172a;
}
html[data-theme="clair"] .advanced-settings-toggle:hover,
html[data-theme="clair"] .advanced-settings-toggle.is-open { border-color: #a78bfa; background: #f5f3ff; }
html[data-theme="clair"] .advanced-settings-toggle strong,
html[data-theme="clair"] .per-game-settings-toggle-card h3 { color: #0f172a; }
html[data-theme="clair"] .advanced-room-settings { background: #f8fafc; }
html[data-theme="clair"] .switch-button { border-color: #cbd5e1; background: #f1f5f9; color: #475569; }
html[data-theme="clair"] .round-timer {
  border-color: #a78bfa;
  background: linear-gradient(135deg, #fff, #f5f3ff);
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(76, 29, 149, .13);
}
html[data-theme="clair"] .round-timer-gauge::after { background: #fff; }
html[data-theme="clair"] .round-timer-copy strong { color: #111827; }
html[data-theme="clair"] .round-timer-copy > span { color: #64748b; }
html[data-theme="clair"] .round-timer-urgency { border-color: #c4b5fd; background: #f5f3ff; color: #5b21b6; }
html[data-theme="clair"] .round-timer.urgent { border-color: #d97706; background: #fffbeb; }
html[data-theme="clair"] .round-timer.critical { border-color: #dc2626; background: #fff1f2; }
html[data-theme="clair"] .leaderboard-hero {
  border-color: #e1c65d;
  background: radial-gradient(circle at 90% 10%, rgba(251, 191, 36, .16), transparent 26%), linear-gradient(135deg, #fff, #f7f5ff);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .09);
}
html[data-theme="clair"] .leaderboard-hero p,
html[data-theme="clair"] .leaderboard-status { color: #64748b; }
html[data-theme="clair"] .leaderboard-hero-trophy { border-color: #ecd773; background: #fffbeb; }
html[data-theme="clair"] .leaderboard-tabs { border-color: #d8e0eb; background: #fff; }
html[data-theme="clair"] .leaderboard-podium-place,
html[data-theme="clair"] .leaderboard-table-wrap { border-color: #dce3ed; background: #fff; }
html[data-theme="clair"] .leaderboard-podium-place.place-1 { border-color: #e5c35b; background: linear-gradient(180deg, #fffbeb, #fff); }
html[data-theme="clair"] .leaderboard-row { border-color: #e2e8f0; background: #fff; color: #334155; }
html[data-theme="clair"] .leaderboard-row--head { background: #f8fafc; color: #64748b; }
html[data-theme="clair"] .leaderboard-row:not(.leaderboard-row--head):hover { background: #f5f3ff; }
html[data-theme="clair"] .leaderboard-podium-place strong,
html[data-theme="clair"] .quest-card-top strong { color: #0f172a; }
html[data-theme="clair"] .progression-event-banner { border-color: #e5c35b; background: linear-gradient(135deg, #fffbeb, #f5f3ff); }
html[data-theme="clair"] .progression-event-banner p,
html[data-theme="clair"] .level-copy p,
html[data-theme="clair"] .room-quota-card p,
html[data-theme="clair"] .progression-section-heading > span,
html[data-theme="clair"] .quest-card-top small,
html[data-theme="clair"] .quest-card-bottom,
html[data-theme="clair"] .progression-transactions li small { color: #64748b; }
html[data-theme="clair"] .level-emblem { border-color: #a78bfa; background: linear-gradient(145deg, #ede9fe, #f5f3ff); }
html[data-theme="clair"] .level-emblem span { color: #6d28d9; }
html[data-theme="clair"] .level-emblem strong { color: #4c1d95; }
html[data-theme="clair"] .wallet-balance-card { border-color: #e5c35b; background: #fffbeb; }
html[data-theme="clair"] .wallet-balance-card strong { color: #92400e; }
html[data-theme="clair"] .room-quota-card { border-color: #86d7b8; background: #ecfdf5; }
html[data-theme="clair"] .coin-pack-card { border-color: #e5c35b; }
html[data-theme="clair"] .coin-pack-card > strong { color: #92400e; }
html[data-theme="clair"] .progression-transactions li { border-color: #e2e8f0; }
html[data-theme="clair"] .progression-transactions li span { color: #334155; }
html[data-theme="clair"] .match-reward-card.is-success { border-color: #86d7b8; background: #ecfdf5; }
html[data-theme="clair"] .match-reward-card.is-error { border-color: #fca5a5; background: #fff1f2; }
html[data-theme="clair"] .admin-event-tags span { background: #ede9fe; color: #5b21b6; }

/* Tablette et mobile. */
@media (max-width: 1060px) {
  .admin-economy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-event-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-event-fields > label:last-of-type { grid-column: auto; }
  .admin-event-fields > .btn { min-height: 48px; }
  .round-timer { min-width: 250px; }
  .round-timer-urgency { display: none; }
}

@media (max-width: 820px) {
  .progression-hero-card { grid-template-columns: auto minmax(0, 1fr); }
  .wallet-balance-card { grid-column: 1 / -1; }
  .quest-grid { grid-template-columns: 1fr; }
  .coin-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaderboard-page { padding-inline: 16px; }
  .admin-event-row { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-event-tags { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

@media (max-width: 700px) {
  .top-right { gap: 7px; }
  .wallet-pill { min-height: 34px; padding: 5px 8px; }
  .wallet-pill i,
  .wallet-pill > span:last-child { display: none; }
  .room-economy-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .room-economy-balance { grid-column: 2; justify-self: start; }
  .config-fields--primary { grid-template-columns: 1fr; }
  .advanced-settings-toggle { padding: 13px; }
  .advanced-room-settings { padding: 11px; }
  .per-game-settings-toggle-card { align-items: flex-start; flex-direction: column; }
  .switch-button { align-self: stretch; justify-content: center; }

  /* Le chrono reste en permanence dans la zone du pouce. */
  .view.active#view-play .round-page { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .view.active#view-play .round-command-bar { align-items: flex-start; }
  .view.active#view-play .round-header-actions { margin-left: auto; }
  .view.active#view-play .round-report-button { min-height: 36px; padding-inline: 10px; }
  .view.active#view-play .round-timer {
    position: fixed;
    z-index: 1100;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-width: 430px;
    min-width: 0;
    min-height: 100px;
    margin-inline: auto;
    gap: 14px;
    padding: 12px 16px 15px 12px;
    border-width: 2px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 13% 0, rgba(139, 92, 246, .24), transparent 48%),
      rgba(5, 9, 18, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  }
  .view.active#view-play .round-timer-gauge { width: 72px; height: 72px; }
  .view.active#view-play .round-timer-gauge::after { width: 57px; height: 57px; font-size: 23px; }
  .view.active#view-play .round-timer-copy { min-width: 0; flex: 1 1 auto; }
  .view.active#view-play .round-timer-copy small { font-size: 8.5px; }
  .view.active#view-play .round-timer-copy strong { font-size: clamp(36px, 12vw, 50px); }
  .view.active#view-play .round-timer-copy > span { font-size: 9px; }
  .view.active#view-play .round-timer-urgency {
    display: inline-flex;
    max-width: 82px;
    padding: 7px 8px;
    font-size: 7.5px;
  }
  .view.active#view-play .round-timer-track { height: 6px; }
  .view.active#view-play.timer-critical .round-page::after { z-index: 1090; border-width: 4px; }

  .match-reward-card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .match-reward-gains { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; gap: 10px 16px; padding-left: 69px; }
  .match-reward-loader { grid-column: 1 / -1; justify-self: center; }

  .leaderboard-hero { grid-template-columns: 1fr; padding: 27px 22px; }
  .leaderboard-hero-trophy { position: absolute; right: -17px; bottom: -20px; opacity: .2; transform: rotate(12deg); }
  .leaderboard-hero p { padding-right: 18px; }
  .leaderboard-podium { grid-template-columns: 1fr; align-items: stretch; }
  .leaderboard-podium-place,
  .leaderboard-podium-place.place-1 { min-height: 132px; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-content: center; text-align: left; }
  .leaderboard-podium-place.place-1,
  .leaderboard-podium-place.place-2,
  .leaderboard-podium-place.place-3 { order: initial; }
  .leaderboard-podium-place > span { left: auto; right: 13px; }
  .leaderboard-avatar,
  .place-1 .leaderboard-avatar { grid-row: 1 / 4; width: 62px; height: 62px; font-size: 31px; }

  .progression-hero-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .level-emblem { width: 82px; height: 82px; }
  .level-copy { width: 100%; }
  .wallet-balance-card { width: 100%; text-align: left; }
  .room-quota-card { align-items: stretch; flex-direction: column; }
  .progression-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .coin-pack-grid { grid-template-columns: 1fr; }
  .coin-pack-card { min-height: 170px; }

  .admin-economy-grid,
  .admin-event-fields { grid-template-columns: 1fr; }
  .admin-event-fields > label:last-of-type { grid-column: auto; }
  .admin-event-row { grid-template-columns: 1fr auto; }
}

@media (max-width: 480px) {
  .leaderboard-page { padding-inline: 10px; }
  .leaderboard-card { padding: 13px; }
  .leaderboard-tabs { width: 100%; }
  .leaderboard-tabs button { flex: 1 1 50%; padding-inline: 8px; }
  .view.active#view-play .round-timer { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; min-height: 92px; padding-inline: 10px 12px; }
  .view.active#view-play .round-timer-gauge { width: 63px; height: 63px; }
  .view.active#view-play .round-timer-gauge::after { width: 50px; height: 50px; }
  .view.active#view-play .round-timer-copy strong { font-size: 39px; }
  .view.active#view-play .round-timer-urgency { max-width: 68px; }
  .match-reward-gains { padding-left: 0; }
  .quest-card-top { grid-template-columns: auto minmax(0, 1fr); }
  .quest-card-top .btn,
  .quest-claimed { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .advanced-room-settings,
  .match-reward-loader,
  .round-timer.tick-pulse .round-timer-copy strong { animation: none !important; }
  .round-timer-track i { transition: none; }
}

/* ===== Correctif v5 : navigation Mapillary et chrono compact ===== */

/* During a round the centered navigation is replaced by the timer. */
body[data-view="play"] .topnav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(.96);
}

.game-timer-dock {
  position: fixed;
  z-index: 1300;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.game-timer-dock[hidden] { display: none !important; }
.game-timer-dock .round-timer {
  position: relative !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  width: 138px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 6px 12px 7px 7px;
  gap: 9px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(18, 24, 40, .96), rgba(7, 11, 21, .96));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .065);
}
.game-timer-dock .round-timer-gauge {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: conic-gradient(#9b7bff var(--timer-progress), rgba(255, 255, 255, .09) 0);
  box-shadow: 0 0 16px rgba(139, 92, 246, .18);
}
.game-timer-dock .round-timer-gauge::after {
  content: "";
  width: 26px;
  height: 26px;
  background:
    radial-gradient(circle at 50% 50%, #c4b5fd 0 1.5px, transparent 1.8px),
    linear-gradient(#c4b5fd, #c4b5fd) 50% 43% / 1.5px 7px no-repeat,
    linear-gradient(120deg, transparent 45%, #c4b5fd 46% 54%, transparent 55%) 54% 55% / 8px 8px no-repeat,
    #0b1020;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.game-timer-dock .round-timer-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
}
.game-timer-dock .round-timer-copy small,
.game-timer-dock .round-timer-copy > span { display: none !important; }
.game-timer-dock .round-timer-copy strong {
  margin: 0;
  color: #f8fafc;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
.game-timer-dock .round-timer-track {
  right: 11px;
  bottom: 4px;
  left: 49px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.game-timer-dock .round-timer-track i {
  background: linear-gradient(90deg, #7c3aed, #c4b5fd);
  box-shadow: none;
}
.game-timer-dock .round-timer.tick-pulse .round-timer-copy strong { animation: none; }
.game-timer-dock .round-timer.urgent {
  border-color: rgba(245, 158, 11, .6);
  background: linear-gradient(145deg, rgba(54, 32, 12, .97), rgba(20, 13, 8, .97));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(245, 158, 11, .08);
}
.game-timer-dock .round-timer.urgent .round-timer-gauge {
  background: conic-gradient(#f59e0b var(--timer-progress), rgba(255, 255, 255, .09) 0);
}
.game-timer-dock .round-timer.urgent strong { color: #fde68a; }
.game-timer-dock .round-timer.critical {
  border-color: rgba(248, 113, 113, .72);
  background: linear-gradient(145deg, rgba(63, 18, 23, .98), rgba(24, 9, 13, .98));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 3px rgba(239, 68, 68, .09);
  animation: timer-v5-critical 1s ease-in-out infinite alternate;
}
.game-timer-dock .round-timer.critical .round-timer-gauge {
  background: conic-gradient(#fb7185 var(--timer-progress), rgba(255, 255, 255, .09) 0);
}
.game-timer-dock .round-timer.critical strong { color: #ffe4e6; }
.game-timer-dock .round-timer.finished { opacity: .72; filter: saturate(.45); }
@keyframes timer-v5-critical {
  from { box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 2px rgba(239, 68, 68, .07); }
  to { box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 5px rgba(239, 68, 68, .13); }
}

body[data-view="play"] .round-command-bar { min-height: 74px; }
body[data-view="play"] .round-context-bar { min-height: 45px; padding-block: 10px 9px; }
body[data-view="play"] .round-context-bar > p { max-width: min(720px, 75vw); }

/* MapillaryJS keeps the street sequence and spatial arrows interactive. */
.geo-viewer-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--round-media-height, 540px);
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 42%, rgba(139, 92, 246, .13), transparent 34%), #03070f;
}
.geo-viewer-stage .pano-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #03070f;
  cursor: grab;
}
.geo-viewer-stage .pano-wrap:active { cursor: grabbing; }
.geo-viewer-hint {
  position: absolute;
  z-index: 17;
  top: 13px;
  left: 50%;
  max-width: calc(100% - 118px);
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(5, 10, 20, .76);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .24);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  animation: geo-viewer-hint-in .2s ease-out;
}
.geo-viewer-hint[hidden] { display: none !important; }
.geo-viewer-stage.has-navigation .geo-viewer-hint {
  border-color: rgba(167, 139, 250, .32);
  background: rgba(24, 15, 48, .78);
}
@keyframes geo-viewer-hint-in {
  from { opacity: 0; transform: translate(-50%, -5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.geo-viewer-stage .mapillary-direction-component,
.geo-viewer-stage .mapillary-sequence-component,
.geo-viewer-stage .mapillary-zoom-component,
.geo-viewer-stage [class*="mapillary-direction"],
.geo-viewer-stage [class*="mapillary-sequence"],
.geo-viewer-stage [class*="mapillary-zoom"] {
  z-index: 12;
}
.geo-viewer-stage .pano-wrap > div,
.geo-viewer-stage .pano-wrap canvas { border-radius: inherit; }
.geo-viewer-status {
  position: absolute;
  z-index: 18;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, .16), transparent 34%), rgba(3, 7, 15, .96);
  transition: opacity .22s ease;
}
.geo-viewer-status[hidden] { display: none !important; }
.geo-viewer-status.is-loading { pointer-events: none; }
.geo-viewer-status.is-loading i {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, .13);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: geo-viewer-spin .82s linear infinite;
}
.geo-viewer-status strong { font-family: var(--font-display); font-size: 14px; }
.geo-viewer-status small { max-width: 300px; color: var(--text-2); font-size: 9px; line-height: 1.45; }
.geo-viewer-status.has-error { pointer-events: auto; }
.geo-viewer-error-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 17px;
  background: rgba(139, 92, 246, .12);
  color: #ddd6fe;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}
.geo-viewer-status .btn { margin-top: 2px; }
@keyframes geo-viewer-spin { to { transform: rotate(360deg); } }

/* Reduce repeated subtitles without hiding useful controls or errors. */
#view-home .home-section-heading .panel-kicker,
#view-home .home-section-heading > p,
#view-home .home-discovery-copy > .panel-kicker,
#view-lobby .lobby-panel-heading .panel-kicker,
#view-lobby .config-section-heading > p,
#view-lobby .per-game-settings-toggle-card .panel-kicker,
#view-lobby .per-game-settings-toggle-card p,
#view-lobby .per-game-settings-heading .panel-kicker,
#view-lobby .per-game-settings-heading > p,
#view-leaderboard .leaderboard-hero .panel-kicker,
#view-profile .profile-panel .panel-kicker,
#view-play .panel-kicker,
#view-roundResult .panel-kicker,
#view-final .final-heading > .panel-kicker,
#view-final .final-heading > p,
#view-final .game-feedback-card .panel-kicker,
#view-final .game-feedback-card h2 + p { display: none !important; }
#view-home .home-section-heading { align-items: end; }
#view-home .home-section-heading h2,
#view-lobby .config-section-heading h2,
#view-play .round-answer-panel-header h2 { margin-top: 0; }
#view-home .home-discovery-copy > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#view-home .home-discovery-points article p { display: none; }
#view-home .home-discovery-points article { align-items: center; }
#view-home .home-reassurance span:nth-child(2) { display: none; }
#view-lobby .segmented-control small,
#view-lobby .public-config-stat small,
#view-lobby .public-fairness-note p { display: none; }
#view-leaderboard .leaderboard-hero p {
  display: -webkit-box;
  max-width: 680px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#view-profile .profile-benefits-card > p,
#view-profile .friends-invite-card > div > p,
#view-profile .profile-gated-card > p { max-width: 620px; }
#view-play .round-answer-panel-header { margin-bottom: 17px; }
#view-play .round-answer-panel-header h2 { font-size: clamp(21px, 2vw, 28px); }
#view-play .round-map-hint { padding: 7px 10px; font-size: 8px; }
#view-play .round-submit-button { min-height: 50px; }

html[data-theme="clair"] .game-timer-dock .round-timer {
  border-color: rgba(109, 40, 217, .36);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 24px rgba(76, 29, 149, .14), inset 0 1px 0 #fff;
}
html[data-theme="clair"] .game-timer-dock .round-timer-gauge::after {
  background:
    radial-gradient(circle at 50% 50%, #6d28d9 0 1.5px, transparent 1.8px),
    linear-gradient(#6d28d9, #6d28d9) 50% 43% / 1.5px 7px no-repeat,
    linear-gradient(120deg, transparent 45%, #6d28d9 46% 54%, transparent 55%) 54% 55% / 8px 8px no-repeat,
    #fff;
}
html[data-theme="clair"] .game-timer-dock .round-timer-copy strong { color: #111827; }
html[data-theme="clair"] .geo-viewer-status { background: radial-gradient(circle at 50% 40%, rgba(109, 40, 217, .12), transparent 34%), rgba(238, 242, 247, .98); color: #111827; }
html[data-theme="clair"] .geo-viewer-hint { border-color: rgba(76, 29, 149, .16); color: #111827; background: rgba(255, 255, 255, .88); }
html[data-theme="clair"] .geo-viewer-status small { color: #64748b; }

@media (max-width: 980px) {
  body[data-view="play"] .brand small { display: none; }
  body[data-view="play"] .avatar-pill #topName { display: none; }
  body[data-view="play"] .avatar-pill { padding-right: 6px; }
}

@media (max-width: 900px) {
  body[data-view="play"] .topnav { display: none; }
  .game-timer-dock {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    top: max(10px, env(safe-area-inset-bottom));
  }
  .game-timer-dock .round-timer {
    width: 132px;
    min-height: 47px;
    padding: 6px 11px 7px 7px;
  }
  .game-timer-dock .round-timer-gauge { width: 33px; height: 33px; }
  .game-timer-dock .round-timer-gauge::after { width: 25px; height: 25px; }
  .game-timer-dock .round-timer-copy strong { font-size: 24px; }
  .game-timer-dock .round-timer-track { left: 47px; right: 10px; }
  body[data-view="play"] .round-page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  body[data-view="play"] .round-command-bar { min-height: 0; padding-right: 0; }
  body[data-view="play"] .round-context-bar { align-items: flex-start; gap: 10px; }
  body[data-view="play"] .round-context-bar > p { max-width: none; }
  .geo-viewer-stage { min-height: var(--round-media-height, 350px); }
  .geo-viewer-hint { top: 10px; max-width: calc(100% - 88px); padding: 7px 10px; font-size: 9px; }
  #view-home .home-action-card { gap: 13px; }
  #view-home .home-discovery-copy > p { -webkit-line-clamp: 3; }
  #view-home .home-reassurance span:nth-child(3) { display: none; }
  #view-lobby .lobby-help { display: none; }
  #view-leaderboard .leaderboard-hero p { display: none; }
  #view-profile .profile-hero-card p { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
  body[data-view="play"] .top-auth-button { display: none; }
  .game-timer-dock { top: max(8px, env(safe-area-inset-bottom)); }
  .game-timer-dock .round-timer { width: 126px; min-height: 45px; }
  .game-timer-dock .round-timer-gauge { width: 31px; height: 31px; }
  .game-timer-dock .round-timer-gauge::after { width: 23px; height: 23px; }
  .game-timer-dock .round-timer-copy strong { font-size: 23px; }
  #view-play .round-panel-label { top: 10px; left: 10px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .geo-viewer-status.is-loading i,
  .geo-viewer-hint,
  .game-timer-dock .round-timer.critical { animation: none !important; }
}


/* ===== 2026-09 — accueil, sortie de partie et administration CSE ===== */
.home-room-economy{display:grid;gap:4px;margin-bottom:0.5rem;margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft,rgba(255,255,255,.035));font-size:12.5px}.home-room-economy strong{font-size:13px}.home-room-economy span{color:var(--muted)}
.room-exit-button{white-space:nowrap}.room-exit-button.is-host-close{border-color:rgba(239,68,68,.4);color:#f87171}.cse-commercial-link{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:3rem auto 18px;max-width:980px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--card)}.cse-commercial-link>div{display:grid;gap:3px}.cse-commercial-link strong{font-size:14px}.superadmin-campaign-rules{margin-top:30px}.superadmin-campaign-row{display:grid;grid-template-columns:minmax(220px,.35fr) 1fr;gap:18px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft,rgba(255,255,255,.025))}.superadmin-campaign-row>div:first-child{display:grid;gap:4px}.superadmin-campaign-row>div:first-child span{font-size:12px;color:var(--muted)}.cse-campaign-game-toggles{display:flex;flex-wrap:wrap;gap:8px}.cse-campaign-game-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px}.map-load-error{height:100%;min-height:120px;display:grid;place-items:center;padding:18px;text-align:center;color:var(--muted);background:var(--surface-soft,rgba(255,255,255,.03))}.round-bet-panel--choice-only{display:flex;align-items:center;justify-content:space-between;gap:16px}.round-bet-panel--choice-only p{margin:0;color:var(--muted)}
@media(max-width:760px){.room-exit-button{font-size:0}.room-exit-button::after{content:'Quitter';font-size:12px}.cse-commercial-link{align-items:flex-start;flex-direction:column}.superadmin-campaign-row{grid-template-columns:1fr}.round-bet-panel--choice-only{align-items:stretch;flex-direction:column}}

/* Parcours joueur PRO lancé depuis le shell Angular : aucune navigation publique
   ne parasite l'expérience, tandis que le moteur historique reste intact. */
body.pro-player-embedded .topbar,
body.pro-player-embedded .site-footer,
body.pro-player-embedded #cseInviteContext,
body.pro-player-embedded #view-cse > .view-cse {
  display: none !important;
}
body.pro-player-embedded #app { min-height: 100vh; }
body.pro-player-embedded .view.active { padding-top: 20px; }
body.pro-player-embedded.pro-player-autostarting #csePanel-jouer { opacity: 0; pointer-events: none; }
body.pro-player-embedded #csePanel-jouer { transition: opacity .18s ease; }
body.pro-player-embedded #cseCampaignPlayCard { max-width: 640px; margin: 0 auto; }
body.pro-player-embedded .top-room-exit { top: 14px; }

/* Authentification persistante du profil moteur. */
.profile-remember-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
}
.profile-remember-control input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.profile-remember-control > span { display: grid; gap: 3px; }
.profile-remember-control strong { color: var(--text-1); font-size: 12px; }
.profile-remember-control small { color: var(--text-2); font-size: 10px; line-height: 1.45; }

/* Le résumé joueur reste prioritaire dans la barre supérieure. */
.top-right { min-width: 0; flex: 0 0 auto; }
.wallet-pill { flex: 0 0 auto; visibility: visible; }

/* Le résumé niveau/pièces reste visible quand la barre manque de largeur. */
.topbar > .brand { min-width: 0; flex-shrink: 1; }
.top-right { margin-left: auto; }
.wallet-pill { position: relative; z-index: 3; }
@media (max-width: 720px) {
  .top-right .top-auth-button { display: none; }
  .top-right { gap: 6px; }
}
@media (max-width: 430px) {
  .top-right .avatar-pill { min-width: 38px; width: 38px; padding: 4px; justify-content: center; }
  .top-right .avatar-pill > span:not(.avatar-circ) { display: none; }
}

.good-answer {
  color: #26ba54 !important;
}

.bad-answer {
  color: #e05e5e !important;
}

/* ---------- Synchronisation de manche ---------- */
#view-play.round-preparing #playArea {
  pointer-events: none;
  opacity: .82;
  filter: saturate(.82);
  transition: opacity .2s ease, filter .2s ease;
}
#view-play.round-preparing #roundTimerShell {
  opacity: .78;
}

/* ---------- Invitation QR ---------- */
.room-qr-dialog {
  width: min(440px, calc(100% - 24px));
}
.room-qr-dialog-card {
  justify-items: center;
  text-align: center;
}
.room-qr-dialog-card h2,
.room-qr-dialog-card > p {
  text-align: center;
}
.room-qr-code {
  width: min(310px, 78vw);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.3);
}
.room-qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
}
.room-qr-label {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .12em;
}
.room-qr-link {
  width: 100%;
  overflow-wrap: anywhere;
  font-size: 11px !important;
}

/* ---------- Podium final séquencé ---------- */
.podium .place {
  opacity: 0;
  transform: translateY(34px) scale(.9);
  animation: gaPodiumReveal .58s cubic-bezier(.2,.8,.2,1) forwards;
}
.podium .place-1 { animation-delay: .12s; }
.podium .place-2 { animation-delay: .72s; }
.podium .place-3 { animation-delay: 1.32s; }
@keyframes gaPodiumReveal {
  0% { opacity: 0; transform: translateY(34px) scale(.9); }
  70% { opacity: 1; transform: translateY(-7px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 620px) {
  .invite-actions #qrCodeBtn { grid-column: 1 / -1; }
  .room-qr-dialog-card { padding: 22px 16px; }
  .room-qr-code { width: min(290px, 82vw); }
}

@media (prefers-reduced-motion: reduce) {
  .podium .place {
    opacity: 1;
    transform: none;
    animation: none;
  }
}