/* ─── LAYOUT ─── */
.room-page {
  display: flex; flex-direction: column;
  height: calc(100vh - 61px);
  height: calc(100dvh - 61px);
  overflow: hidden;
  /* Pas de padding-bottom ici : .bmc-footer est en position:fixed, donc il
     flotte par-dessus le contenu sans jamais avoir besoin d'espace réservé
     dans le flux — contrairement à une page qui scrolle normalement (où ce
     padding a du sens, voir body.page-home). En réserver un ici ne faisait
     que rétrécir .game-area pour rien, alors que .room-page est déjà
     cadrée sur la hauteur d'écran. La marge de sécurité pour ne pas finir
     masqué par le bouton flottant est posée plus bas, uniquement sur
     .game-area, qui est la seule zone qui scrolle réellement jusqu'à son
     tout dernier pixel. */
}

/* ─── ROOM HEADER ─── */
.room-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0; gap: 1rem; flex-wrap: wrap;
}
.room-info { display: flex; flex-direction: column; gap: 0.1rem; }
.room-name  { font-size: 1rem; font-weight: 700; }
.room-desc  { font-size: 0.75rem; color: var(--text-dim); }
.room-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.invite-box {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.3rem 0.6rem; font-family: var(--mono); font-size: 0.7rem;
  color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.invite-box:hover { border-color: var(--accent); color: var(--accent); }

/* Bandeau compact mobile : nom de salle + bouton pour déplier room-header/daily-banner.
   Masqué par défaut (desktop) — activé en media query plus bas. */
.room-topbar-toggle {
  display: none;
  width: 100%; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.9rem; background: var(--bg2); border: none;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  font-family: var(--sans); color: var(--text); cursor: pointer;
  text-align: left;
}
.room-topbar-toggle-name {
  font-size: 0.88rem; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.room-topbar-toggle-icon {
  color: var(--text-dim); font-size: 0.9rem; flex-shrink: 0; margin-left: 0.5rem;
  transition: transform 0.15s;
}

/* Conteneur des deux bandeaux : comportement normal sur desktop */
.room-topbars { display: flex; flex-direction: column; flex-shrink: 0; }

/* ─── DAILY GAME BANNER ─── */
.daily-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1.5rem; background: var(--bg3);
  border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 0.5rem;
  font-size: 0.82rem;
}
.daily-badge {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); color: var(--text-dim); font-size: 0.72rem;
}
.daily-badge strong { color: var(--accent); font-size: 0.88rem; }
.daily-game-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: 20px;
  background: rgba(124,106,255,0.12); border: 1px solid rgba(124,106,255,0.25);
  color: var(--accent); font-size: 0.7rem; font-family: var(--mono);
}

/* ─── TABS ─── */
.tabs-bar {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.tab-btn {
  flex: 1; padding: 0.7rem 1rem;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--text-dim); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── TAB CONTENT ─── */
.tab-content { display: none; flex: 1; overflow-y: auto; min-height: 0; }
.tab-content.active { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }

/* ─── GAME AREA ─── */
.game-area {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem) clamp(0.25rem, 2vw, 1rem);
  /* padding-bottom plus généreux que les autres côtés : seule marge de
     sécurité pour que le dernier élément scrollable (ex. le dropdown de
     suggestions des grilles) ne finisse pas sous le bouton BMC flottant
     une fois scrollé tout en bas. */
  padding-bottom: clamp(3.5rem, 8vh, 4.5rem);
  gap: clamp(0.6rem, 2vh, 1.2rem); overflow-y: auto;
}

/* ── DRAW ANIMATION ── */
.draw-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; justify-content: safe center;
  flex: 1; gap: 1.5rem; text-align: center; padding: 2rem;
  min-width: 0; width: 100%;
}
/* Les 2 roulettes (Catégorie / Thème) côte à côte, visibles en même temps.
   `min-width: 0` à chaque étage casse la chaîne de min-content qui, sans
   ça, empêche un texte long en nowrap de rétrécir sous sa taille naturelle
   (classique piège flexbox) — et le cap en vw garantit que les 2 colonnes
   tiennent toujours sur un écran de téléphone, même dans le pire des cas. */
.draw-reels {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center;
  gap: clamp(0.5rem, 3vw, 1.5rem); width: 100%; min-width: 0;
}
.draw-reel-col {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  flex: 1 1 0; min-width: 0; max-width: min(300px, 44vw);
}
.draw-reel {
  width: 100%; min-width: 0; height: 88px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  position: relative;
}
.draw-reel-inner {
  display: flex; flex-direction: column; gap: 0; min-width: 0;
  transition: transform 0.08s linear;
}
.draw-reel-item {
  height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: 0.01em;
  color: var(--text); flex-shrink: 0; min-width: 0; width: 100%; padding: 0 0.5rem;
  overflow: hidden;
}
/* Libellé court (1 mot) : une seule ligne compacte, comme avant. */
.draw-reel-item .dri-line {
  font-size: clamp(0.72rem, 3.4vw, 1.05rem); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Libellé long (2 mots ou plus) : emoji seul en 1ère ligne, puis un mot par
   ligne suivante — jamais de débordement même sur petit écran. */
.draw-reel-item .dri-emoji {
  display: block; font-size: clamp(0.9rem, 3.9vw, 1.2rem); line-height: 1.25;
}
.draw-reel-item .dri-word {
  display: block; max-width: 100%; font-size: clamp(0.6rem, 2.7vw, 0.86rem); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.draw-reel::before, .draw-reel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 24px; z-index: 2;
  pointer-events: none;
}
.draw-reel::before { top: 0; background: linear-gradient(to bottom, var(--bg2), transparent); }
.draw-reel::after  { bottom: 0; background: linear-gradient(to top, var(--bg2), transparent); }
.draw-title { font-size: 1rem; font-weight: 700; color: var(--text-dim); }
.draw-step-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.draw-sub-label {
  font-size: 0.85rem; color: var(--text-dim); font-family: var(--mono);
  animation: fadeUp 0.4s ease-out;
}
.draw-subtitle { font-size: 0.82rem; color: var(--text-dim); max-width: 260px; line-height: 1.5; }
.draw-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}

/* ── START SCREEN ── */
.start-screen {
  display: flex; flex-direction: column; align-items: center;
  /* `safe center` évite qu'un contenu trop grand pour l'écran (ex: intro
     Frise, plus longue que les autres) soit centré hors-viewport et donc
     inaccessible au scroll — repli en flex-start pour les navigateurs qui
     ne le supportent pas encore. */
  justify-content: flex-start; justify-content: safe center;
  flex: 1; gap: clamp(0.6rem, 2vh, 1.1rem); text-align: center;
  padding: 0.5rem; width: 100%;
}
.start-game-title {
  font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.start-game-type {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: -0.3rem;
}
.start-subtitle { color: var(--text-dim); font-size: clamp(0.8rem, 2.5vw, 0.92rem); max-width: 340px; line-height: 1.6; }
.start-rules {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(0.7rem, 2vw, 1.1rem) clamp(0.9rem, 3vw, 1.4rem);
  text-align: left; max-width: 360px; width: 100%;
}
.start-rules h3 { font-size: 0.7rem; font-family: var(--mono); color: var(--text-dim); margin-bottom: 0.7rem; letter-spacing: 0.1em; }
.start-rules ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.start-rules li { font-size: clamp(0.76rem, 2.2vw, 0.83rem); color: var(--text); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; }
.start-rules li::before { content: '→'; color: var(--accent); flex-shrink: 0; margin-top: 0.05rem; }
.go-btn {
  padding: 0.85rem 3rem; background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white; border: none; border-radius: 50px; font-family: var(--sans);
  font-size: clamp(0.95rem, 3vw, 1.1rem); font-weight: 800; cursor: pointer;
  transition: all 0.25s; letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(124,106,255,0.35);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.go-btn:hover  { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 32px rgba(124,106,255,0.5); }
.go-btn:active { transform: scale(0.97); }

/* ── CHRONO BAR ── */
.game-playing { display: none; flex-direction: column; align-items: center; gap: clamp(0.6rem, 2vh, 1rem); width: 100%; }
.chrono-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 420px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.45rem 1rem;
}
.chrono {
  font-family: var(--mono); font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 500;
  color: var(--accent); letter-spacing: 0.08em;
  display: inline-block; transition: color 0.3s ease;
}
.attempts-left { font-family: var(--mono); font-size: clamp(0.68rem, 2vw, 0.78rem); color: var(--text-dim); }

/* ── CHRONO À REBOURS — utilisé quand un jeu a une limite de temps globale
   (Grille, Accumulation, Wordle). .chrono--countdown reste appliqué en continu
   pendant le compte à rebours, .chrono--warn s'ajoute une fois dans la zone
   rouge (voir startTimer(limitSeconds, onExpire) dans room-core.js). ── */
.chrono--countdown { font-variant-numeric: tabular-nums; }
.chrono--warn {
  color: var(--error);
  animation: chrono-pulse 0.6s ease-in-out infinite;
}
@keyframes chrono-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ── TEMPS PRESQUE ÉCOULÉ — vignette rouge pulsante sur tout l'écran,
   posée par n'importe quel chrono (global OU par question/carte/essai) une
   fois dans sa zone d'alerte (classe .time-urgent sur <body>). Discrète
   (transparente au centre) pour ne pas gêner la lecture. ── */
body.time-urgent::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(248,113,113,0.30) 100%);
  animation: time-urgent-pulse 0.9s ease-in-out infinite;
}
@keyframes time-urgent-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── WORDLE ── */
.wordle-grid { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 6px); }
/* Taille de tuile adaptée à la longueur du mot (set par JS via --word-len) */
.wordle-grid .wordle-row { display: flex; gap: clamp(3px, 0.8vw, 5px); justify-content: center; }
.wordle-row  { display: flex; gap: clamp(4px, 1vw, 6px); }
.tile {
  --tile-size: clamp(28px, calc((100vw - 80px) / 10), 50px);
  width: var(--tile-size); height: var(--tile-size);
  border: 2px solid var(--border); border-radius: clamp(4px, 1vw, 8px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.7rem, 2.5vw, 1.25rem); font-weight: 800;
  color: var(--text); text-transform: uppercase; transition: border-color 0.15s;
  background: var(--bg2); user-select: none; flex-shrink: 0;
}
.tile.filled     { border-color: #555; }
.tile.active-row { border-color: var(--accent); }
.tile.pop  { animation: tilePop 0.1s ease; }
@keyframes tilePop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.tile.flip { animation: flipIn 0.5s ease forwards; }
@keyframes flipIn {
  0%   { transform: rotateX(0deg); }
  49%  { transform: rotateX(-90deg); opacity: .5; }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.tile.correct { background: #22c55e; border-color: #22c55e; color: white; }
.tile.present { background: #f59e0b; border-color: #f59e0b; color: white; }
.tile.absent  { background: #374151; border-color: #374151; color: #9ca3af; }
.wordle-row.shake { animation: shakeRow 0.4s ease; }
@keyframes shakeRow { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ── KEYBOARD (Wordle) ── */
.keyboard { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 6px); align-items: center; width: 100%; max-width: 520px; padding: 0 4px; }
.kb-row   { display: flex; gap: clamp(3px, 0.8vw, 5px); justify-content: center; width: 100%; }
.kb-row-accents { flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.kb-key-accent  { padding: 0.28rem 0.38rem !important; font-size: 0.7rem !important; min-width: 0 !important; opacity: 0.8; }
.kb-key {
  height: clamp(40px, 6vh, 52px); flex: 1; max-width: clamp(28px, 8vw, 42px);
  min-width: 0; padding: 0 2px; border-radius: 7px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  font-family: var(--sans); font-size: clamp(0.62rem, 2vw, 0.82rem); font-weight: 600;
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.kb-key:active { transform: scale(0.93); background: var(--border); }
.kb-key.wide   { flex: 1.6; max-width: clamp(46px, 12vw, 66px); font-size: clamp(0.52rem, 1.6vw, 0.68rem); }
.kb-key.correct { background: #22c55e; border-color: #22c55e; color: white; }
.kb-key.present { background: #f59e0b; border-color: #f59e0b; color: white; }
.kb-key.absent  { background: #1f2937; border-color: #1f2937; color: #6b7280; }

/* ── COUNTRIES GAME ── */
.countries-game { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 560px; }

.countries-hint-card {
  width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.2rem 1.4rem; text-align: center;
}
.countries-hint-label { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.countries-hint-text  { font-size: clamp(0.9rem, 2.5vw, 1.05rem); font-weight: 700; color: var(--text); line-height: 1.4; }

.countries-stats {
  display: flex; gap: 0.75rem; width: 100%; justify-content: center; flex-wrap: wrap;
}
.cstat {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.5rem 0.9rem; min-width: 70px;
}
.cstat-val  { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.cstat-lbl  { font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim); }
.cstat.red  .cstat-val { color: var(--error); }
.cstat.green .cstat-val { color: var(--success); }

.countries-input-row {
  display: flex; gap: 0.5rem; width: 100%;
}
#country-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px;
  padding: 0.7rem 1.1rem; color: var(--text); font-family: var(--sans); font-size: 1rem;
  outline: none; transition: border-color 0.2s;
  touch-action: manipulation;
}
#country-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,255,0.12); }
#country-input:disabled { opacity: 0.5; cursor: not-allowed; }
.submit-country-btn {
  height: 44px; padding: 0 1.1rem; background: var(--accent); border: none; border-radius: 22px;
  color: white; font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.submit-country-btn:hover  { background: #6b59ee; }
.submit-country-btn:active { transform: scale(0.95); }
.submit-country-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.countries-stop-row { width: 100%; display: flex; justify-content: center; }
.stop-countries-btn {
  padding: 0.55rem 1.2rem; background: transparent; border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-dim); font-family: var(--mono); font-size: 0.78rem;
  cursor: pointer; transition: all 0.2s; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.stop-countries-btn:hover  { border-color: var(--accent2); color: var(--accent2); }
.stop-countries-btn:active { transform: scale(0.96); }
.stop-countries-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.countries-feedback {
  min-height: 28px; font-family: var(--mono); font-size: 0.8rem;
  text-align: center; transition: all 0.2s;
}
.countries-feedback.good { color: var(--success); }
.countries-feedback.bad  { color: var(--error); }
.countries-feedback.already { color: var(--warning); }

.countries-found {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.countries-found-header {
  padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim); letter-spacing: 0.08em; background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.found-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 0.9rem; min-height: 48px; }
.found-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25); border-radius: 20px;
  font-size: 0.78rem; color: var(--success); font-family: var(--mono);
  animation: chipIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes chipIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

.wrong-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.9rem 0.75rem; }
.wrong-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2); border-radius: 20px;
  font-size: 0.76rem; color: var(--error); font-family: var(--mono);
  text-decoration: line-through; opacity: 0.7;
}
.missed-chip {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem; background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2); border-radius: 20px;
  font-size: 0.76rem; color: var(--warning); font-family: var(--mono);
}

/* ── RESULT PANEL (commun aux deux jeux) ── */
.result-panel {
  display: none; flex-direction: column; align-items: center; gap: 0.9rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.8rem) clamp(0.9rem, 3vw, 2rem);
  width: 100%; max-width: 420px; text-align: center;
  animation: fadeUp 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fadeUp { from { opacity:0; transform: translateY(16px) scale(0.97); } to { opacity:1; transform: translateY(0) scale(1); } }
.result-emoji  { font-size: clamp(2rem, 6vw, 2.8rem); }
.result-title  { font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 800; }
.result-title.win  { color: #22c55e; }
.result-title.lose { color: var(--error); }
.score-breakdown {
  width: 100%; background: var(--bg3); border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border);
}
.score-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.9rem; font-size: clamp(0.78rem, 2vw, 0.85rem);
  border-bottom: 1px solid var(--border);
}
.score-row:last-child { border-bottom: none; }
.score-row .label { color: var(--text-dim); }
.score-row .pts   { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.score-row.total  { background: rgba(124,106,255,0.1); }
.score-row.total .label { color: var(--text); font-weight: 700; }
.score-row.total .pts   { font-size: 1.1rem; color: var(--accent2); }
.result-time { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); }
.result-hint { font-size: 0.8rem; color: var(--text-dim); }
.result-hint a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ═══ RÉCAP DÉPLIABLE EN FIN DE PARTIE — "Détails" ═══
   Bouton commun à tous les jeux + conteneur du contenu (frise complète,
   questions/réponses, historique d'indices, trouvés/manqués…), pour
   revoir la partie sans les boutons d'action ni les règles du jeu. */
.result-details-wrap { width: 100%; }
.result-details-toggle {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-dim);
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  padding: 0.55rem 0.9rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.result-details-toggle:hover { background: rgba(124,106,255,0.12); color: var(--text); }
.result-details {
  display: none; width: 100%; margin-top: 0.6rem; text-align: left;
  max-height: 340px; overflow-y: auto;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem;
}
.result-details.open { display: block; }
.result-details-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.3rem; font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.result-details-row:last-child { border-bottom: none; }
.result-details-row.wrong { background: rgba(248,113,113,0.08); }
.result-details-row.missed { opacity: 0.6; }
.result-details-row .rd-icon { flex-shrink: 0; font-size: 0.95rem; }
.result-details-row .rd-main { flex: 1; min-width: 0; }
.result-details-row .rd-label { color: var(--text); }
.result-details-row .rd-sub   { color: var(--text-dim); font-size: 0.74rem; margin-top: 1px; }
.result-details-row .rd-tag   { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); flex-shrink: 0; }

/* ─── SCOREBOARD ─── */
.scoreboard-area {
  flex: 1; padding: clamp(0.75rem, 2vw, 1.75rem); overflow-y: auto;
  max-width: 720px; margin: 0 auto; width: 100%;
}
.scoreboard-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 0.5rem;
}
.scoreboard-title { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 800; }
.scoreboard-subtitle { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); }
.refresh-btn {
  padding: 0.35rem 0.9rem; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  color: var(--text-dim); font-family: var(--sans); font-size: 0.78rem; cursor: pointer; transition: all 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
.sb-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.sb-table {
  width: 100%; min-width: 440px; border-collapse: collapse;
  background: var(--bg2); border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
}
.sb-table th {
  padding: 0.65rem 0.75rem; text-align: left;
  font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim);
  letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); background: var(--bg3); white-space: nowrap;
}
.sb-table td { padding: 0.75rem 0.75rem; font-size: 0.85rem; border-bottom: 1px solid rgba(42,42,58,0.5); white-space: nowrap; }
.sb-table tr:last-child td { border-bottom: none; }
.sb-table tr.rank-1 td { background: rgba(34,197,94,0.05); }
.sb-table tr.rank-2 td { background: rgba(251,191,36,0.04); }
.sb-table tr.rank-3 td { background: rgba(168,85,247,0.03); }
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; font-family: var(--mono);
}
.rank-badge.r1 { background: rgba(34,197,94,0.2);  color: #22c55e; }
.rank-badge.r2 { background: rgba(251,191,36,0.2); color: #f59e0b; }
.rank-badge.r3 { background: rgba(168,85,247,0.2); color: #a855f7; }
.rank-badge.rn { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); }
.sb-username   { font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.sb-score      { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.sb-score-locked {
  cursor: help; border-bottom: 1px dashed var(--border); padding-bottom: 1px;
}

/* ─── Encart au survol (score/pip verrouillés, anti-spoiler) ───
   Un petit encart stylé, pas le tooltip natif du navigateur (trop lent à
   apparaître, non personnalisable, texte tronqué sur certains navigateurs).
   Volontairement hover-only, pas de clic : cohérent avec le reste du
   scoreboard où seuls les scores DÉBLOQUÉS sont cliquables. */
.sb-lock-wrap { position: relative; display: inline-flex; }
.sb-lock-popover {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.5rem 0.7rem; font-family: var(--sans); font-size: 0.72rem;
  font-weight: 400; color: var(--text); line-height: 1.35;
  width: max-content; max-width: 190px; text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
.sb-lock-popover::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--border);
}
.sb-lock-wrap:hover .sb-lock-popover,
.day-pip-bar-locked:hover .sb-lock-popover {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.sb-score-cell { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sb-detail-btn {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: var(--accent); background: rgba(124,106,255,0.12);
  border: 1px solid rgba(124,106,255,0.35); border-radius: 10px;
  padding: 0.15rem 0.5rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-detail-btn:hover, .sb-detail-btn:active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.sb-detail-btn-icon {
  padding: 0.15rem 0.4rem; border-radius: 50%; font-size: 0.72rem; line-height: 1;
}
.sb-attempts, .sb-time { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); }
.not-played-row td { opacity: 0.5; }
.not-played-badge {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim);
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 0.12rem 0.5rem;
}
.sb-separator td {
  padding: 0.35rem 0.75rem; background: var(--bg3);
  font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.1em;
}
.sb-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; color: var(--text-dim); font-family: var(--mono); font-size: 0.82rem; gap: 0.6rem;
}
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── LEGEND TILES (start screen Wordle) ─── */
.legend-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 800; flex-shrink: 0;
}
.legend-tile.correct { background: #22c55e; color: white; }
.legend-tile.present { background: #f59e0b; color: white; }
.legend-tile.absent  { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); }

/* ─── TIMELINE GAME — frise "en direct" (placement séquentiel) ─── */
.timeline-game {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; width: 100%; max-width: 600px;
}
.timeline-instruction {
  font-size: clamp(0.78rem, 2.2vw, 0.88rem); color: var(--text-dim);
  text-align: center; line-height: 1.5;
}

/* Carte "à placer", flottant au-dessus de la frise */
.tl-live-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  width: 100%;
}
.tl-live-card {
  background: var(--bg2); border: 2px solid var(--accent); border-radius: 14px;
  padding: 0.8rem 1.3rem; min-width: 200px; max-width: 92%;
  text-align: center; box-shadow: 0 4px 18px rgba(124,106,255,0.25);
  transition: border-color 0.2s, background 0.2s;
}
.tl-live-card.tl-live-correct { border-color: #22c55e; background: rgba(34,197,94,0.1); }
.tl-live-card.tl-live-wrong   { border-color: var(--error); background: rgba(248,113,113,0.1); }
.tl-live-label {
  font-size: clamp(0.85rem, 2.4vw, 0.98rem); font-weight: 700; color: var(--text); line-height: 1.4;
}
.tl-live-feedback {
  font-family: var(--mono); font-size: 0.76rem; min-height: 1.1em; color: var(--text-dim);
}
.tl-live-feedback.ok  { color: #22c55e; }
.tl-live-feedback.bad { color: var(--error); }
.tl-live-arrow {
  color: var(--accent); font-size: 1.1rem; line-height: 1;
  animation: tl-bounce 1.4s infinite;
}
@keyframes tl-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Frise scrollable horizontalement, avec ancrage (snap) sur les emplacements */
/* .tl-reel-outer est le vrai référentiel de position pour les fondus de bord
   (tl-reel-fade-l/r) : ils doivent rester fixés sur les bords VISIBLES de
   l'écran, pas défiler avec le contenu. Placés directement dans
   .tl-reel-wrap (l'élément qui a overflow-x:auto), ils faisaient partie du
   contenu défilant et se décalaient avec lui — dès que le scroll n'était
   plus à zéro, le fondu ne recouvrait plus le vrai bord, laissant les
   cartes se faire couper net sans aucun adoucissement visuel. */
.tl-reel-outer { position: relative; width: 100%; }
.tl-reel-wrap {
  position: relative; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.tl-reel-wrap::-webkit-scrollbar { display: none; }
.tl-reel-wrap.tl-dragging {
  cursor: grabbing;
  scroll-snap-type: none; /* le snap gênerait le suivi 1:1 de la souris pendant le drag */
  user-select: none;
}
.tl-reel { display: flex; align-items: stretch; height: 100px; }
.tl-reel-pad { flex-shrink: 0; }

.tl-slot-card {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.5rem 0.55rem; text-align: center;
}
.tl-slot-card.wrong-reveal { border-color: var(--error); background: rgba(248,113,113,0.07); }
.tl-slot-label {
  font-size: 0.72rem; font-weight: 600; color: var(--text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-slot-year { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); font-weight: 700; }

.tl-gap {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; position: relative;
}
.tl-gap-line { width: 3px; height: 46px; border-radius: 3px; background: var(--border); transition: all 0.2s; }
.tl-gap.active .tl-gap-line {
  background: var(--accent); height: 68px; width: 4px;
  box-shadow: 0 0 6px rgba(124,106,255,0.5);
}
.tl-gap.active::after {
  content: '▾'; position: absolute; top: -18px; color: var(--accent); font-size: 0.85rem;
}

/* Position absolue relative à .tl-reel-outer (pas .tl-reel-wrap qui scrolle) :
   ces fondus restent donc fixés sur les bords visibles quel que soit le
   scroll de la frise en dessous. */
.tl-reel-fade { position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 2; }
.tl-reel-fade-l { left: 0;  background: linear-gradient(90deg,  var(--bg), transparent); }
.tl-reel-fade-r { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.timeline-validate-btn {
  padding: 0.75rem 2.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white; border: none; border-radius: 50px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.timeline-validate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,106,255,0.35); }
.timeline-validate-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.timeline-score-hint {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); text-align: center;
}

/* ─── DATE GUESS GAME ─── */
.dateguess-game {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; width: 100%; max-width: 560px;
}
.dg-progress {
  display: flex; gap: 0.35rem; width: 100%; justify-content: center;
}
.dg-pip {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border);
  transition: background 0.3s;
}
.dg-pip.done-perfect { background: var(--success); }
.dg-pip.done-good    { background: #f59e0b; }
.dg-pip.done-poor    { background: var(--error); }
.dg-pip.current      { background: var(--accent); }

.dg-card {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem; text-align: center;
  transition: border-color 0.3s;
}
.dg-card.revealed-perfect { border-color: var(--success); }
.dg-card.revealed-good    { border-color: #f59e0b; }
.dg-card.revealed-poor    { border-color: var(--error); }

.dg-counter {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  letter-spacing: 0.1em; margin-bottom: 0.75rem;
}
.dg-label {
  font-size: clamp(0.9rem, 2.5vw, 1.05rem); font-weight: 700;
  color: var(--text); line-height: 1.45; margin-bottom: 1.1rem;
}
.dg-answer-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; flex-wrap: wrap;
}
.dg-answer-reveal {
  display: none; flex-direction: column; gap: 0.3rem;
  align-items: center; animation: fadeUp 0.35s ease;
  margin-top: 0.75rem;
}
.dg-answer-reveal.visible { display: flex; }
.dg-true-year {
  font-family: var(--mono); font-size: 1.2rem; font-weight: 700;
  color: var(--success);
}
.dg-gap-label {
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim);
}
.dg-pts-earned {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: var(--accent);
}

.dg-input-row {
  display: flex; gap: 0.5rem; width: 100%; max-width: 340px;
}
#dg-year-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.7rem 1rem;
  color: var(--text); font-family: var(--mono); font-size: 1.1rem;
  font-weight: 600; outline: none; text-align: center;
  transition: border-color 0.2s;
  touch-action: manipulation;
}
#dg-year-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,255,0.12); }
#dg-year-input:disabled { opacity: 0.5; }
/* iOS : forcer font-size 16px pour éviter zoom */
@media (max-width: 768px) { #dg-year-input { font-size: 16px; } }

.dg-submit-btn {
  padding: 0.7rem 1.2rem; background: var(--accent); border: none;
  border-radius: 12px; color: white; font-family: var(--sans);
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dg-submit-btn:hover   { background: #6b59ee; }
.dg-submit-btn:active  { transform: scale(0.95); }
.dg-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.dg-next-btn {
  padding: 0.6rem 1.8rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 24px;
  color: var(--text); font-family: var(--sans); font-size: 0.88rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  display: none; margin-top: 1.1rem;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dg-next-btn.visible  { display: inline-flex; align-items: center; gap: 0.4rem; }
.dg-next-btn:hover    { border-color: var(--accent); color: var(--accent); }

.dg-score-running {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim);
  text-align: center;
}
.dg-score-running span { color: var(--accent); font-weight: 700; }

/* Barre de proximité animée */
.dg-proximity-bar {
  width: 100%; max-width: 340px; height: 6px;
  background: var(--bg3); border-radius: 3px; overflow: hidden;
  display: none; margin: 0 auto;
}
.dg-proximity-bar.visible { display: block; }
.dg-proximity-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1), background 0.6s;
}


/* ─── CITY GRID GAME ─── */
.citygrid-game {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; width: 100%; max-width: 660px;
  padding: 0 0.25rem;
}

.cg-grid-wrapper {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

.cg-grid {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) repeat(3, minmax(100px, 1fr));
  gap: 4px;
  min-width: 420px;
}

/* Coin vide */
.cg-corner {
  background: transparent;
}

/* En-têtes colonnes */
.cg-col-header {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.55rem 0.5rem;
  font-size: clamp(0.66rem, 1.8vw, 0.76rem); font-weight: 600;
  color: var(--text-dim); text-align: center; line-height: 1.35;
  display: flex; align-items: center; justify-content: center;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}

/* En-têtes lignes */
.cg-row-header {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.55rem 0.5rem;
  font-size: clamp(0.66rem, 1.8vw, 0.76rem); font-weight: 600;
  color: var(--text-dim); line-height: 1.35;
  display: flex; align-items: center;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}

/* Cases jouables */
.cg-cell {
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: 10px; min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.18s; position: relative;
  padding: 0.4rem;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cg-cell:hover:not(.filled):not(.locked) {
  border-color: var(--accent);
  background: rgba(124,106,255,0.06);
}
.cg-cell.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,106,255,0.2);
  background: rgba(124,106,255,0.08);
}
.cg-cell.correct {
  border-color: #22c55e; background: rgba(34,197,94,0.1);
  cursor: default;
}
.cg-cell.wrong-anim {
  animation: cgShake 0.35s ease;
  border-color: var(--error); background: rgba(248,113,113,0.08);
}
@keyframes cgShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
  80%      { transform: translateX(-3px); }
}
.cg-cell.locked { cursor: default; opacity: 0.55; }

.cg-cell-inner {
  font-size: clamp(0.7rem, 2vw, 0.82rem); font-weight: 700;
  text-align: center; line-height: 1.3; color: var(--text);
  word-break: break-word;
}
.cg-cell-correct-name { color: #22c55e; font-size: clamp(0.72rem, 2vw, 0.84rem); font-weight: 700; }
.cg-cell-icon {
  font-size: 1.4rem; color: var(--text-dim);
  transition: transform 0.15s;
}
.cg-cell:hover .cg-cell-icon { transform: scale(1.15); }
.cg-cell.correct .cg-cell-icon { display: none; }

/* Autocomplete input */
.cg-input-area {
  display: none; flex-direction: column; gap: 0.5rem;
  width: 100%; max-width: 420px; position: relative;
}
.cg-input-area.visible { display: flex; }

.cg-active-hint {
  font-size: 0.75rem; font-family: var(--mono); color: var(--text-dim);
  text-align: center; line-height: 1.4;
}
.cg-active-hint strong { color: var(--accent); }

.cg-input-row {
  display: flex; gap: 0.5rem;
}
#cg-city-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 24px; padding: 0.65rem 1.1rem;
  color: var(--text); font-family: var(--sans); font-size: 1rem;
  outline: none; transition: border-color 0.2s;
  touch-action: manipulation;
}
#cg-city-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,255,0.12); }
#cg-city-input:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 768px) { #cg-city-input { font-size: 16px; } }

.cg-submit-btn {
  padding: 0.65rem 1.1rem; background: var(--accent); border: none;
  border-radius: 22px; color: white; font-family: var(--sans);
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  transition: all 0.18s; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cg-submit-btn:hover  { background: #6b59ee; }
.cg-submit-btn:active { transform: scale(0.95); }

/* Dropdown suggestions */
.cg-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: none; max-height: 220px; overflow-y: auto;
}
.cg-suggestions.visible { display: block; }
.cg-suggestion {
  padding: 0.85rem 1rem; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center;
  font-size: 0.88rem; cursor: pointer;
  transition: background 0.12s; border-bottom: 1px solid var(--border);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cg-suggestion:last-child { border-bottom: none; }
.cg-suggestion:hover, .cg-suggestion.highlighted { background: rgba(124,106,255,0.12); color: var(--accent); }
.cg-suggestion mark { background: none; color: var(--accent2); font-weight: 700; }

.cg-feedback {
  min-height: 20px; font-family: var(--mono); font-size: 0.76rem;
  text-align: center;
}
.cg-feedback.good { color: var(--success); }
.cg-feedback.bad  { color: var(--error); }
.cg-feedback.already { color: var(--warning); }

/* Stats bar */
.cg-stats {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
}
.cg-stat {
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 0.2rem 0.6rem;
}
.cg-stat span { color: var(--accent); font-weight: 700; }

/* ─── SAISON & COUNTDOWN ─── */
.season-chip {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.55rem; border-radius: 20px;
  background: rgba(124,106,255,0.12); border: 1px solid rgba(124,106,255,0.25);
  color: var(--accent); font-size: 0.68rem; font-family: var(--mono);
  font-weight: 600; letter-spacing: 0.05em;
}

.countdown-box {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 1rem 1.5rem;
}
.countdown-unit {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; min-width: 48px;
}
.countdown-val {
  font-family: var(--mono); font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 800; color: var(--accent); line-height: 1;
}
.countdown-lbl {
  font-family: var(--mono); font-size: 0.62rem; color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.countdown-sep {
  font-family: var(--mono); font-size: 1.8rem; color: var(--border);
  line-height: 1; margin-bottom: 1rem;
}

/* ─── SCOREBOARD TOGGLE ─── */
.sb-toggle-bar {
  display: flex; gap: 4px; margin-bottom: 1rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.sb-toggle {
  flex: 1; padding: 0.45rem 0.75rem;
  background: none; border: none; border-radius: 8px;
  color: var(--text-dim); font-family: var(--sans); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: all 0.18s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sb-toggle:hover { color: var(--text); }
.sb-toggle.active { background: var(--bg); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* ─── SEASON BOARD ─── */
.season-board { display: flex; flex-direction: column; gap: 0.75rem; }

.season-player-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: border-color 0.2s;
}
.season-player-card.rank-1 { border-color: rgba(34,197,94,0.4); }
.season-player-card.rank-2 { border-color: rgba(251,191,36,0.3); }
.season-player-card.rank-3 { border-color: rgba(168,85,247,0.3); }

.season-player-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.season-player-name {
  flex: 1; font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.season-player-total {
  font-family: var(--mono); font-size: 1rem; font-weight: 800; color: var(--accent);
}
.season-days-played {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
}

.season-days-row {
  display: flex; gap: 4px; padding: 0.65rem 1rem; flex-wrap: wrap;
}
.day-pip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; min-width: 44px; max-width: 80px;
}
.day-pip-bar {
  width: 100%; height: 28px; border-radius: 6px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  transition: all 0.2s;
}
.day-pip-bar.played   { background: rgba(124,106,255,0.18); color: var(--accent); border: 1px solid rgba(124,106,255,0.3); }
.day-pip-bar.today    { background: rgba(124,106,255,0.08); color: var(--text-dim); border: 2px solid var(--accent); }
.day-pip-bar.future   { background: var(--bg3); color: var(--border); border: 1px solid var(--border); }
.day-pip-bar.missed   { background: rgba(248,113,113,0.08); color: var(--error); border: 1px solid rgba(248,113,113,0.2); }
.day-pip-label { font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim); text-align: center; }
.day-pip-bar-clickable { cursor: pointer; }
.day-pip-bar-locked { cursor: help; opacity: 0.85; }
.day-pip-detail-icon {
  position: absolute; bottom: -4px; right: -4px; font-size: 0.55rem; line-height: 1;
  background: var(--bg2); border-radius: 50%; padding: 1px 2px;
}

.day-pip-bar.played   { background: rgba(124,106,255,0.18); color: var(--accent); border: 1px solid rgba(124,106,255,0.3); }
.day-pip-bar.today    { background: rgba(124,106,255,0.08); color: var(--text-dim); border: 2px solid var(--accent); }
.day-pip-bar.future   { background: var(--bg3); color: var(--border); border: 1px solid var(--border); }
.day-pip-bar.missed   { background: rgba(248,113,113,0.08); color: var(--error); border: 1px solid rgba(248,113,113,0.2); }
.day-pip-label { font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim); text-align: center; }
.day-pip-game  { font-family: var(--mono); font-size: 0.55rem; color: var(--text-dim); text-align: center;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

/* ─── HISTORIQUE ─── */
.history-season {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 1rem;
}
.history-season-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; background: var(--bg3);
  border-bottom: 1px solid var(--border); cursor: pointer;
  touch-action: manipulation;
}
.history-season-title { font-weight: 700; font-size: 0.9rem; }
.history-season-dates { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); }
.history-season-chevron { color: var(--text-dim); font-size: 0.8rem; transition: transform 0.2s; }
.history-season.open .history-season-chevron { transform: rotate(180deg); }
.history-season-body { display: none; padding: 0.75rem 1rem; }
.history-season.open .history-season-body { display: block; }

/* Tableau historique compact */
.hist-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hist-table th {
  text-align: left; font-family: var(--mono); font-size: 0.65rem;
  color: var(--text-dim); letter-spacing: 0.07em; padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.hist-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(42,42,58,0.4); }
.hist-table tr:last-child td { border-bottom: none; }
.hist-table tr.hist-r1 td { color: #22c55e; }
.hist-table tr.hist-r2 td { color: #f59e0b; }
.hist-table tr.hist-r3 td { color: #a855f7; }
.hist-day-scores { display: flex; gap: 3px; flex-wrap: wrap; }
.hist-day-score {
  font-family: var(--mono); font-size: 0.62rem;
  padding: 0.1rem 0.35rem; border-radius: 4px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim);
  title: attr(data-title);
}
.hist-day-score.played { background: rgba(124,106,255,0.12); border-color: rgba(124,106,255,0.25); color: var(--accent); }
.hist-day-score.missed { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.15); color: var(--error); }

/* ── Statistiques globales historique ── */
.history-stats {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.history-stats-title {
  font-weight: 700; font-size: 0.9rem; margin-bottom: 0.75rem;
}
.history-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem;
}
.history-stat-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.history-stat-name {
  font-weight: 700; font-size: 0.85rem; margin-bottom: 0.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--text-dim);
}
.history-stat-row strong { color: var(--text); font-family: var(--mono); }


/* Podium inter-saison */
.podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0.5rem; padding: 0.5rem 0 1rem; width: 100%;
}
.podium-place {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  flex: 1; max-width: 140px;
}
.podium-block {
  width: 100%; border-radius: 8px 8px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.4rem; font-size: 1.4rem;
}
.podium-block.p1 { height: 90px; background: linear-gradient(to top, rgba(34,197,94,0.3), rgba(34,197,94,0.1)); border: 1px solid rgba(34,197,94,0.4); }
.podium-block.p2 { height: 65px; background: linear-gradient(to top, rgba(251,191,36,0.25), rgba(251,191,36,0.08)); border: 1px solid rgba(251,191,36,0.3); }
.podium-block.p3 { height: 48px; background: linear-gradient(to top, rgba(168,85,247,0.2), rgba(168,85,247,0.06)); border: 1px solid rgba(168,85,247,0.25); }
.podium-name  { font-weight: 700; font-size: 0.82rem; text-align: center; }
.podium-score { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); }

/* ─── INVENTAIRE MALUS ─── */
.shop-inventory {
  margin-bottom: 1rem; padding: 0.85rem 1rem;
  background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.2);
  border-radius: 12px;
}
.shop-inventory-title {
  font-family: var(--mono); font-size: 0.68rem; color: var(--error);
  letter-spacing: 0.08em; margin-bottom: 0.6rem;
}
.shop-inventory-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.malus-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border-radius: 20px; cursor: pointer;
  transition: all 0.18s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-size: 0.82rem; font-weight: 600;
  border: 1px solid rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.08); color: var(--error);
}
.malus-chip:hover { background: rgba(248,113,113,0.18); border-color: var(--error); transform: translateY(-1px); }
.malus-chip.targeted {
  border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); color: #f59e0b;
}
.malus-chip.targeted:hover { background: rgba(251,191,36,0.15); }
.malus-chip-target { font-family: var(--mono); font-size: 0.72rem; opacity: 0.8; }

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center;
  z-index: 500; padding: 1rem;
  backdrop-filter: blur(4px);
}
.modal-overlay.visible { display: flex; }

.modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 1.75rem; width: 100%;
  max-width: 400px; display: flex; flex-direction: column; gap: 1rem;
  animation: fadeUp 0.25s cubic-bezier(0.16,1,0.3,1);
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-title { font-size: 1.1rem; font-weight: 800; }
.modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 1.2rem;
  cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 6px; transition: color 0.15s;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); }

.modal-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.modal-flavor {
  font-size: 0.78rem; color: var(--text-dim); font-style: italic;
  border-left: 2px solid var(--border); padding-left: 0.6rem;
}

.modal-section-label {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.target-list { display: flex; flex-direction: column; gap: 0.4rem; }
.target-btn {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all 0.18s; text-align: left; width: 100%;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--text);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.target-btn:hover { border-color: var(--error); color: var(--error); background: rgba(248,113,113,0.06); }
.target-btn:active { transform: scale(0.98); }
.target-btn.current-target { border-color: rgba(251,191,36,0.35); }
.target-btn.current-target:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(251,191,36,0.06); }
.target-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--error), #f97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: white;
}
.target-empty { font-size: 0.85rem; color: var(--text-dim); text-align: center; padding: 0.5rem; }

/* ─── BOUTIQUE (suite) ─── */
.shop-area {
  flex: 1; padding: clamp(0.75rem, 2vw, 1.75rem);
  overflow-y: auto; max-width: 720px; margin: 0 auto; width: 100%;
}
.shop-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 0.75rem; flex-wrap: wrap;
}
.shop-title { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 800; }
.wallet-badge {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 24px; padding: 0.35rem 0.9rem;
  font-family: var(--mono); font-size: 0.88rem; font-weight: 700; color: var(--accent);
}
.wallet-badge .coin-icon { font-size: 1rem; }

.shop-pending {
  margin-bottom: 1rem; padding: 0.75rem 1rem;
  background: rgba(124,106,255,0.08); border: 1px solid rgba(124,106,255,0.2);
  border-radius: 12px;
}
.shop-pending-title {
  font-family: var(--mono); font-size: 0.68rem; color: var(--accent);
  letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.shop-pending-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pending-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.65rem; border-radius: 20px;
  background: rgba(124,106,255,0.15); border: 1px solid rgba(124,106,255,0.3);
  font-size: 0.78rem; color: var(--accent); font-family: var(--mono);
}

.shop-section-title {
  font-size: 0.72rem; font-family: var(--mono); color: var(--text-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 1rem 0 0.65rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem; margin-bottom: 1rem;
}
.shop-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 1rem; display: flex; flex-direction: column;
  gap: 0.5rem; transition: all 0.18s; position: relative; overflow: hidden;
}
.shop-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity 0.18s;
}
.shop-card.bonus::before { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.shop-card.malus::before  { background: linear-gradient(90deg, var(--error), #f97316); }
.shop-card:hover { border-color: var(--accent); }
.shop-card:hover::before { opacity: 1; }
.shop-card.malus:hover { border-color: var(--error); }

.shop-card-header { display: flex; align-items: center; gap: 0.5rem; }
.shop-card-icon   { font-size: 1.5rem; flex-shrink: 0; }
.shop-card-name   { font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.shop-card-desc   { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; flex: 1; }
.shop-card-flavor {
  font-size: 0.7rem; color: var(--text-dim); font-style: italic;
  border-left: 2px solid var(--border); padding-left: 0.5rem;
}
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.shop-card-price {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--accent); display: flex; align-items: center; gap: 0.25rem;
}
.shop-buy-btn {
  padding: 0.35rem 0.85rem; border: none; border-radius: 20px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.shop-card.bonus .shop-buy-btn { background: var(--accent); color: white; }
.shop-card.bonus .shop-buy-btn:hover { background: #6b59ee; transform: translateY(-1px); }
.shop-card.malus .shop-buy-btn  { background: var(--error); color: white; }
.shop-card.malus .shop-buy-btn:hover  { background: #ef4444; transform: translateY(-1px); }
.shop-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.shop-buy-btn.bought {
  background: rgba(74,222,128,0.15); color: var(--success);
  border: 1px solid rgba(74,222,128,0.3);
}

/* Toast notification achat */
.shop-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.75rem 1.25rem; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
  opacity: 0; white-space: nowrap;
}
.shop-toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.shop-toast.success { border-color: rgba(74,222,128,0.4); color: var(--success); }
.shop-toast.error   { border-color: rgba(248,113,113,0.4); color: var(--error); }

/* Indicateur items actifs dans l'onglet jeu */
.active-effects-bar {
  display: none; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.4rem 0.75rem; background: rgba(124,106,255,0.06);
  border-bottom: 1px solid rgba(124,106,255,0.15); flex-shrink: 0;
  font-size: 0.75rem;
}
.active-effects-bar.visible { display: flex; }
.active-effects-label { font-family: var(--mono); color: var(--text-dim); font-size: 0.68rem; }
.effect-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.55rem; border-radius: 20px;
  background: rgba(124,106,255,0.15); border: 1px solid rgba(124,106,255,0.25);
  color: var(--accent); font-family: var(--mono); font-size: 0.7rem;
}

/* ─── SCOREBOARD — Effets bonus/malus (affichés dans la modale de détail) ─── */
.sb-detail-effect {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; font-size: 0.8rem; color: var(--text);
  padding: 0.2rem 0;
}
.sb-detail-from {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  margin-left: 0.3rem;
}

/* ─── ONGLET ADMIN ─── */
.admin-area {
  flex: 1; padding: clamp(0.75rem, 2vw, 1.75rem);
  max-width: 720px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.admin-section {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.admin-section-header {
  padding: 0.85rem 1.1rem;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.admin-section-title {
  font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.admin-section-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Jeux */
.admin-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}
.admin-game-toggle {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; transition: all 0.18s;
  touch-action: manipulation;
}
.admin-game-toggle:hover { border-color: var(--accent); }
.admin-game-toggle.active {
  background: rgba(124,106,255,0.1); border-color: var(--accent);
}
.admin-game-toggle.active .admin-toggle-dot { background: var(--accent); }
.admin-toggle-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--border); transition: background 0.18s;
}
.admin-game-name { font-size: 0.85rem; font-weight: 600; }
.admin-game-tags { font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim); }
.admin-save-btn {
  align-self: flex-end;
  padding: 0.5rem 1.4rem; background: var(--accent); border: none;
  border-radius: 20px; color: white; font-family: var(--sans);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
  touch-action: manipulation;
}
.admin-save-btn:hover { background: #6b59ee; transform: translateY(-1px); }
.admin-save-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Config saison */
.admin-form-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.admin-form-label {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
  letter-spacing: 0.05em; min-width: 160px; flex-shrink: 0;
}
.admin-select, .admin-number {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.45rem 0.75rem;
  color: var(--text); font-family: var(--sans); font-size: 0.88rem;
  outline: none; transition: border-color 0.2s; cursor: pointer;
}
.admin-select:focus, .admin-number:focus { border-color: var(--accent); }
.admin-number { width: 80px; text-align: center; }
.admin-hint {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  margin-top: 0.2rem;
}
.admin-preview {
  padding: 0.6rem 0.85rem;
  background: rgba(124,106,255,0.06); border: 1px solid rgba(124,106,255,0.15);
  border-radius: 8px; font-family: var(--mono); font-size: 0.75rem;
  color: var(--text-dim); line-height: 1.6;
}
.admin-skip-days {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.admin-skip-day {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem; border-radius: 20px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 600; color: var(--text-dim);
  transition: all 0.18s; user-select: none;
  touch-action: manipulation;
}
.admin-skip-day input[type="checkbox"] { display: none; }
.admin-skip-day:hover { border-color: var(--error); color: var(--error); }
.admin-skip-day.checked {
  background: rgba(248,113,113,0.1); border-color: var(--error); color: var(--error);
}

.admin-preview strong { color: var(--accent); }

/* Membres / admins */
.admin-member-list { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-member-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
}
.admin-member-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: white;
}
.admin-member-name { flex: 1; font-size: 0.88rem; font-weight: 600; }
.admin-member-badge {
  font-family: var(--mono); font-size: 0.65rem; padding: 0.15rem 0.5rem;
  border-radius: 20px; flex-shrink: 0;
}
.admin-member-badge.owner { background: rgba(251,191,36,0.15); color: #f59e0b; border: 1px solid rgba(251,191,36,0.3); }
.admin-member-badge.admin-badge { background: rgba(124,106,255,0.15); color: var(--accent); border: 1px solid rgba(124,106,255,0.25); }
.admin-toggle-admin-btn {
  padding: 0.25rem 0.7rem; border-radius: 20px; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.18s;
  flex-shrink: 0; touch-action: manipulation;
}
.admin-toggle-admin-btn.give {
  background: rgba(124,106,255,0.1); color: var(--accent);
  border: 1px solid rgba(124,106,255,0.25);
}
.admin-toggle-admin-btn.give:hover { background: rgba(124,106,255,0.2); }
.admin-toggle-admin-btn.revoke {
  background: rgba(248,113,113,0.08); color: var(--error);
  border: 1px solid rgba(248,113,113,0.2);
}
.admin-toggle-admin-btn.revoke:hover { background: rgba(248,113,113,0.15); }
.admin-kick-btn {
  font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(248,113,113,0.35); background: transparent;
  color: var(--error); font-family: var(--mono); transition: all 0.15s;
  margin-left: 0.25rem;
}
.admin-kick-btn:hover { background: rgba(248,113,113,0.12); }

.admin-feedback {
  font-family: var(--mono); font-size: 0.75rem; text-align: center;
  min-height: 18px; transition: all 0.2s;
}
.admin-feedback.ok    { color: var(--success); }
.admin-feedback.error { color: var(--error); }

/* ─── QUIZ GAME ─── */
.quiz-game {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; width: 100%; max-width: 580px;
}

/* Barre de progression */
.quiz-progress-bar {
  width: 100%; height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden;
}
.quiz-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px; transition: width 0.4s ease;
}
.quiz-progress-label {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim);
  text-align: right; width: 100%;
}

/* Carte question */
#quiz-card-area {
  /* Sans ce display:flex, l'align-self: flex-end de .quiz-next-btn n'a
     aucun effet (il lui faut un parent flex) : le bouton retombe en
     inline-block par défaut, collé sans espacement sous la carte — d'où
     le chevauchement visuel avec le bord arrondi de .quiz-card. */
  display: flex; flex-direction: column; gap: 0.85rem; width: 100%;
}
.quiz-card {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem;
  transition: border-color 0.3s;
}
.quiz-card.correct  { border-color: #22c55e; }
.quiz-card.wrong    { border-color: var(--error); }
.quiz-card.revealed { border-color: #f59e0b; }

.quiz-q-label {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  letter-spacing: 0.1em; margin-bottom: 0.65rem;
}
.quiz-question {
  font-size: clamp(0.92rem, 2.5vw, 1.05rem); font-weight: 700;
  color: var(--text); line-height: 1.5; margin-bottom: 1rem;
}

.quiz-input-row {
  display: flex; gap: 0.5rem;
}
#quiz-answer-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 24px; padding: 0.65rem 1.1rem;
  color: var(--text); font-family: var(--sans); font-size: 1rem;
  outline: none; transition: border-color 0.2s;
  touch-action: manipulation;
}
#quiz-answer-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,255,0.12); }
#quiz-answer-input:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 768px) { #quiz-answer-input { font-size: 16px; } }

.quiz-submit-btn {
  padding: 0.65rem 1.1rem; background: var(--accent); border: none;
  border-radius: 22px; color: white; font-family: var(--sans);
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  transition: all 0.18s; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.quiz-submit-btn:hover   { background: #6b59ee; }
.quiz-submit-btn:active  { transform: scale(0.95); }
.quiz-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Feedback */
.quiz-feedback {
  min-height: 22px; font-size: 0.82rem;
  transition: all 0.2s; margin-top: 0.5rem;
}
.quiz-feedback.correct  { color: var(--success); font-weight: 600; }
.quiz-feedback.wrong    { color: var(--error); }
.quiz-feedback.hint-msg { color: #f59e0b; }

.quiz-fun-fact {
  display: none; margin-top: 0.65rem; padding: 0.6rem 0.85rem;
  background: rgba(124,106,255,0.07); border: 1px solid rgba(124,106,255,0.18);
  border-radius: 10px; font-size: 0.8rem; color: var(--text-dim);
  line-height: 1.5; animation: fadeUp 0.35s ease;
}
.quiz-fun-fact.visible { display: block; }
.quiz-fun-fact.wrong-fact { background: rgba(124,106,255,0.07); border-color: rgba(124,106,255,0.25); }
.quiz-fun-fact::before { content: '💡 '; }

/* Bouton suivant */
.quiz-next-btn {
  display: none; align-self: flex-end;
  padding: 0.5rem 1.4rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 22px;
  color: var(--text); font-family: var(--sans); font-size: 0.88rem;
  font-weight: 600; cursor: pointer; transition: all 0.18s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.quiz-next-btn.visible { display: inline-flex; align-items: center; gap: 0.4rem; }
.quiz-next-btn:hover { border-color: var(--accent); color: var(--accent); }
.quiz-next-btn:focus { outline: 2px solid var(--accent); outline-offset: 3px;
  border-color: var(--accent); color: var(--accent); }

/* Pastilles score running */
.quiz-score-dots {
  display: flex; gap: 0.4rem; justify-content: center; width: 100%;
}
.quiz-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; font-family: var(--mono);
  border: 2px solid var(--border); background: var(--bg3);
  transition: all 0.3s; color: var(--text-dim);
}
.quiz-dot.perfect { background: rgba(34,197,94,0.2);  border-color: #22c55e; color: #22c55e; }
.quiz-dot.good    { background: rgba(251,191,36,0.2); border-color: #f59e0b; color: #f59e0b; }
.quiz-dot.missed  { background: rgba(248,113,113,0.15); border-color: var(--error); color: var(--error); }
.quiz-dot.current { border-color: var(--accent); background: rgba(124,106,255,0.12); color: var(--accent); cursor: pointer; }
.quiz-dot.current:hover { filter: brightness(1.2); }
.quiz-dot.done    { cursor: pointer; }
.quiz-dot.done:hover { border-color: var(--accent); filter: brightness(1.2); }
.quiz-card.review { border-color: rgba(124,106,255,0.35); opacity: 0.95; }
.quiz-review-banner {
  font-size: 0.75rem; color: var(--accent); font-family: var(--mono);
  letter-spacing: 0.08em; margin-bottom: 0.5rem; text-align: center;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {
  .draw-screen { padding: 1.1rem 0.8rem; gap: 1rem; }

  /* Bandeau compact visible, header/daily-banner repliés par défaut */
  .room-topbar-toggle { display: flex; }
  .room-topbars { display: none; }
  .room-topbars.expanded { display: flex; }

  .room-header { padding: 0.6rem 0.9rem; flex-wrap: wrap; }
  .room-desc { display: none; } /* redondant, gagne une ligne */
  .room-home-link { display: none; } /* déjà accessible via le logo CLASH ROOM en haut */
  .room-actions .btn-sm, .invite-box { padding: 0.28rem 0.55rem; font-size: 0.72rem; }

  .daily-banner { padding: 0.4rem 0.9rem; font-size: 0.76rem; flex-wrap: wrap; }

  .tabs-bar { flex-shrink: 0; }
  .tab-btn { padding: 0.55rem 0.4rem; font-size: 0.78rem; }

  .game-area { padding: 0.4rem 0.2rem; gap: 0.5rem; }
  .go-btn { padding: 0.75rem 2.5rem; }
  .result-panel { padding: 1rem 0.9rem; border-radius: 14px; }
  .countries-input-row { gap: 0.35rem; }
  #country-input { font-size: 16px; }
  .scoreboard-area { padding: 0.75rem 0.5rem; }

  /* ── Frise chronologique : le bouton "Placer ici" reste toujours
     atteignable (sticky), et la frise/les cartes sont réduites pour
     laisser de la place à l'écran ── */
  .timeline-game { gap: 0.6rem; padding-bottom: 0.5rem; }
  .tl-live-card { padding: 0.6rem 1rem; min-width: 160px; }
  .tl-reel { height: 88px; }
  .tl-slot-label { font-size: 0.68rem; -webkit-line-clamp: 3; }
  .tl-slot-year { font-size: 0.68rem; }
  .timeline-validate-btn {
    position: sticky; bottom: 0.5rem; z-index: 5;
    width: calc(100% - 1rem); margin: 0.2rem auto 0;
    padding: 0.7rem 1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  }

  /* ── Grille (citygrid) : la colonne des critères reste visible pendant
     le scroll horizontal ── */
  .cg-grid {
    grid-template-columns: minmax(78px, 0.95fr) repeat(3, minmax(84px, 1fr));
    min-width: 330px;
  }
  .cg-row-header, .cg-corner {
    position: sticky; left: 0; z-index: 2;
  }
  .cg-corner { background: var(--bg); } /* évite la transparence pendant le scroll */
  .cg-cell { min-height: 62px; padding: 0.3rem; }
}
@media (max-width: 380px) {
  .start-rules { display: none; }
  .countries-stats { gap: 0.5rem; }
  .cstat { padding: 0.4rem 0.6rem; min-width: 55px; }
  .cg-grid { grid-template-columns: minmax(68px, 0.9fr) repeat(3, minmax(76px, 1fr)); min-width: 296px; }
}

/* ═══════════════════════════════════════════
   🚩 FLAG & 🎬 FILM & 🎵 LYRICS MYSTÈRE (partagé)
   ═══════════════════════════════════════════ */
.flag-game {
  display: flex; flex-direction: column; gap: 0.7rem;
  width: 100%; max-width: 620px; margin: 0 auto;
}
.flag-header { text-align: center; }
.flag-title { font-size: 1.1rem; font-weight: 800; }
.flag-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem; }

/* ── Bloc gauche (indices, 70%) + bloc droit (historique, 30%) ── */
.flag-body {
  display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem;
  width: 100%;
}
.flag-clues-col {
  flex: 0 0 70%; max-width: 70%; min-width: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.flag-side-col {
  flex: 0 0 30%; max-width: 30%; min-width: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 9px;
  padding: 0.5rem 0.5rem;
  align-self: stretch;
}
.flag-side-title {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.flag-side-log {
  display: flex; flex-direction: column; gap: 0.28rem;
  max-height: 210px; overflow-y: auto;
}
.flag-side-empty { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }
.flag-side-entry {
  font-size: 0.7rem; line-height: 1.35; padding: 0.15rem 0;
  border-bottom: 1px solid var(--border); word-break: break-word;
}
.flag-side-entry:last-child { border-bottom: none; }
.flag-side-entry--wrong { color: var(--error); }
.flag-side-entry--skip  { color: var(--text-dim); font-style: italic; }

/* Indice courant : bien visible. Indices passés : compacts et discrets,
   pour économiser la place et mettre le focus sur le plus récent. */
.flag-clue {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; transition: all 0.2s;
}
.flag-clue-current {
  padding: 0.6rem 0.85rem; font-size: 0.875rem; font-weight: 700;
  border-color: rgba(124,106,255,0.45); color: var(--text);
  animation: clue-pop 0.3s ease;
}
.flag-clue-past {
  padding: 0.35rem 0.7rem; font-size: 0.76rem; font-weight: 400;
  color: var(--text-dim); opacity: 0.75;
}
@keyframes clue-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flag-clue-num {
  flex-shrink: 0; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: var(--bg3);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim);
}

.flag-input-row {
  display: flex; gap: 0.5rem;
}
.flag-input-row input {
  flex: 1; padding: 0.55rem 0.8rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text); font-size: 0.9rem; font-family: var(--sans);
  outline: none; transition: border-color 0.15s;
}
.flag-input-row input:focus { border-color: var(--accent); }
.flag-submit-btn {
  padding: 0.55rem 1rem; border-radius: 9px; font-weight: 700;
  border: none; background: var(--accent); color: #000; cursor: pointer;
  font-size: 0.88rem; transition: opacity 0.15s;
}
.flag-submit-btn:hover { opacity: 0.85; }
.flag-submit-btn:disabled { opacity: 0.45; cursor: default; }

.flag-feedback {
  min-height: 1.2rem; font-size: 0.85rem; font-weight: 600;
  padding: 0.15rem 0; text-align: center;
}
.flag-feedback.correct { color: var(--success); }
.flag-feedback.wrong   { color: var(--error); }

.flag-actions-row { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.flag-next-clue-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.78rem;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.flag-next-clue-btn:hover { border-color: var(--accent); color: var(--text); }
.flag-giveup-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.78rem;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.flag-giveup-btn:hover { border-color: var(--error); color: var(--error); }
.flag-giveup-btn.armed {
  border-color: var(--error); color: var(--error); background: rgba(248,113,113,0.1);
  font-weight: 700;
}

/* Écran étroit : la colonne "historique" passe sous les indices plutôt
   que de s'écraser à quelques dizaines de pixels de large. */
@media (max-width: 380px) {
  .flag-body { flex-direction: column; }
  .flag-clues-col, .flag-side-col { flex: 1 1 auto; max-width: 100%; }
  .flag-side-log { max-height: 110px; }
}

/* ═══ MODE DIFFICILE — badge ═══ */
.hard-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(248,113,113,0.12);
  border: 1.5px solid var(--error);
  color: var(--error);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
  animation: hard-pulse 1.8s ease-in-out infinite;
}
@keyframes hard-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50%      { box-shadow: 0 0 0 6px rgba(248,113,113,0.15); }
}

/* ═══ COMPTE À REBOURS PAR ÉLÉMENT — question de quiz (20s/10s en mode
   difficile), carte de frise (60s), essai de jeu Mystère (60s). Même style
   partagé, rouge + oscillation dans les dernières secondes. ═══ */
.quiz-hard-countdown,
.mystery-guess-countdown,
.tl-card-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text-dim);
  padding: 0.3rem 0;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.quiz-hard-countdown .urgent,
.mystery-guess-countdown .urgent,
.tl-card-countdown .urgent {
  color: var(--error);
  font-size: 1.05rem;
  font-weight: 700;
  animation: countdown-urgent 0.5s ease-in-out infinite alternate;
}
@keyframes countdown-urgent {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0.7; transform: scale(1.12); }
}

/* ═══ MODE DIFFICILE — glitch tuiles Wordle ═══ */
.tile.glitch-a {
  background: #7c3aed !important;  /* violet inattendu */
  border-color: #7c3aed !important;
  color: #fff !important;
}
.tile.glitch-b {
  background: #0891b2 !important;  /* cyan inattendu */
  border-color: #0891b2 !important;
  color: #fff !important;
}
.tile.glitch-c {
  background: #d97706 !important;  /* orange inattendu (ni jaune present ni vert correct) */
  border-color: #d97706 !important;
  color: #fff !important;
}
.tile.glitch-pop {
  animation: glitch-flash 0.4s ease-out;
}
@keyframes glitch-flash {
  0%   { transform: scale(1); filter: brightness(2); }
  40%  { transform: scale(1.15) rotate(-3deg); }
  70%  { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ═══ CITYGRID — mise en avant ligne/colonne + intersection au clic ═══ */
.cg-col-header.cg-highlight, .cg-row-header.cg-highlight {
  background: rgba(124,106,255,0.16); color: var(--text);
  border-color: var(--accent); font-weight: 700;
}
.cg-cell.cg-highlight-line:not(.active):not(.correct):not(.filled) {
  background: rgba(255,255,255,0.05); border-color: rgba(124,106,255,0.35);
}

/* ═══ CITYGRID — flash rouge sur headers ═══ */
.cg-col-header, .cg-row-header {
  transition: background 0.15s, color 0.15s;
}
.cg-header-error {
  background: rgba(248,113,113,0.22) !important;
  color: var(--error) !important;
  animation: cg-header-shake 0.35s ease-out;
}
@keyframes cg-header-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* ═══ CITYGRID — stat mode difficile ═══ */
.cg-hard-stat { color: var(--error); font-weight: 700; }

/* ═══ CITYGRID — récap erreurs ═══ */
.cg-error-recap-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.cg-error-recap-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cg-err-city {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}
.cg-err-conditions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cg-err-cond {
  font-size: 0.78rem;
  color: var(--error);
  font-family: var(--sans);
  line-height: 1.4;
}
.cg-err-cond.cg-err-row { border-left: 2px solid #f87171; padding-left: 0.4rem; }
.cg-err-cond.cg-err-col { border-left: 2px solid #fb923c; padding-left: 0.4rem; }
.cg-err-info {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* Ligne "Détails" dans le récap déjà-joué */
.already-details-toggle:hover { background: rgba(124,106,255,0.08); border-radius: 6px; }
.already-details-toggle { transition: background 0.15s; margin: 0 -0.4rem; padding: 0.1rem 0.4rem; border-radius: 6px; }
.already-yt-block { margin-top: 0.75rem; }
#already-yt-wrapper { max-width: 360px; width: 100%; margin-top: 0.5rem; }
.mystery-media-card { margin-top: 0.75rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg3); }
.mystery-media-card a { display: block; }
.mystery-media-card img { width: 100%; display: block; object-fit: cover; max-height: 260px; border-radius: 0; transition: opacity 0.2s; }
.mystery-media-card a:hover img { opacity: 0.85; }
.mystery-media-caption { padding: 0.4rem 0.7rem; font-size: 0.75rem; color: var(--text-dim); font-family: var(--mono); border-top: 1px solid var(--border); }
#mystery-media-wrap { max-width: 360px; width: 100%; }

/* DateGuess — label tolérance */
.dg-tolerance-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
  opacity: 0.8;
}

/* ── Admin game cards — catégorie et thèmes ── */
.admin-game-category {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 0.15rem;
  letter-spacing: 0.03em;
}
.admin-game-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}
.admin-game-theme-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--mono);
  background: rgba(124,106,255,0.12);
  color: var(--accent);
  border: 1px solid rgba(124,106,255,0.25);
  white-space: nowrap;
}
.admin-game-toggle.active .admin-game-theme-badge {
  background: rgba(124,106,255,0.25);
  color: var(--accent);
  border-color: rgba(124,106,255,0.5);
}