/* ════════════════════════════════════════════════════════
   Quel Acteur — couche Pop/Memphis (chargée APRÈS styles_acteurs.css)
   Remappe les tokens du jeu vers le design Zikof (cf zikof-theme.css /
   design.md) : couleurs pop, ombres dures sans flou, polices Bricolage/
   Hanken, fin des titres en texte-dégradé, backdrop de modale opaque.
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Hanken+Grotesk:wght@400..800&display=swap');

/* ── Remap des tokens du jeu vers Pop/Memphis ── */
:root,
[data-theme="dark"] {
  --primary-color: #2b2bff;          /* blue pop   */
  --primary-hover: #1a1aff;
  --accent-color:  #ffd23f;          /* yellow     */
  --success-color: #16c08a;          /* green      */
  --error-color:   #ff5da2;          /* pink       */
  /* ombres DURES (offset, sans flou) */
  --shadow-sm: 2px 2px 0 rgba(0,0,0,.9);
  --shadow-md: 4px 4px 0 rgba(0,0,0,.9);
  --shadow-lg: 4px 4px 0 rgba(0,0,0,.9);
}

/* ── Compteur relocalisé hors du header partagé (chip pop centré) ── */
.qa-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 4px;
  padding: 7px 16px;
  width: fit-content;
  background: var(--surf-2, #2d2740);
  border: 2px solid var(--line, #3a3550);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink, #f1f5f9);
}
.qa-countdown .header-countdown { color: var(--accent-color); font-variant-numeric: tabular-nums; }

/* ── Polices ── */
body { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
h1, h2, h3, h4,
.logo-text, .btn-primary, .stat-value, .game-section h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -.02em;
}

/* ── Fin des titres en texte-dégradé → couleur pleine ── */
.game-section h2,
.google-icon {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.game-section h2 { color: var(--accent-color) !important; }

/* ── Cartes / sections / champs : bordure nette + ombre dure ── */
.section,
.stat-card,
.search-input-wrapper input,
.scores-table,
.modal-content {
  border: 2px solid var(--line, #2d2a42) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .section,
[data-theme="dark"] .stat-card {
  border-color: var(--line, #3a3550) !important;
}

/* ── Boutons primaires : jaune pop + hover décalé ── */
.btn-primary {
  background: var(--accent-color) !important;
  color: #1a1a1a !important;
  border: 2px solid #1a1a1a !important;
  box-shadow: var(--shadow-md) !important;
  font-weight: 800 !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
.btn-primary:hover  { transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 rgba(0,0,0,.9) !important; }
.btn-primary:active { transform: translate(0,0) !important;       box-shadow: var(--shadow-sm) !important; }

/* ── Bug d'overlay : backdrops OPAQUES (sinon le jeu derrière transparaît) ── */
.modal-backdrop,
.auth-modal .modal-backdrop {
  background: rgba(10,8,20,.94) !important;
  backdrop-filter: blur(3px) !important;
}
/* L'onboarding "Comment jouer" restait faiblement rendu quand inactif (pas en
   display:none) → il transparaissait derrière le jeu. On le masque vraiment
   quand il n'est pas actif, et on l'opacifie quand il l'est. */
.onboarding-overlay:not(.onboarding-visible) {
  display: none !important;
}
.onboarding-overlay.onboarding-visible {
  background: rgba(10,8,20,.97) !important;
  backdrop-filter: blur(4px) !important;
}