/* ============================================================
   Pixel Hub - Thème noir épuré (global)
   Chargé en dernier sur toutes les pages.
   Remplace l'ancien style néon par un noir propre et minimal.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg2: #101010;
  --bg3: #151515;
  --panel: #131313;
  --panel-strong: #0d0d0d;
  --surface: #131313;
  --surface-strong: #101010;
  --surface-soft: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f0f0f0;
  --muted: #9a9a9a;
  --accent: #a9bce0;
  --accent-2: #8fa3c8;
  --accent-soft: #c3d1ea;
  --accent-strong: #eaf0fb;
  --accent-glow: rgba(169, 188, 224, 0.18);
  --accent-grad: linear-gradient(135deg, #c3d1ea, #8fa3c8);
  --color-ai-primary: #a9bce0;
  --color-ai-primary-hover: #c3d1ea;
  --color-ai-glow: rgba(169, 188, 224, 0.22);
  --color-ai-glow-strong: rgba(169, 188, 224, 0.35);
  --color-ai-bg-subtle: rgba(169, 188, 224, 0.1);
  --color-ai-bg-hover: rgba(169, 188, 224, 0.16);
  --color-ai-secondary: #b9c8e2;
  --gradient-ai-primary: linear-gradient(135deg, #c3d1ea, #8fa3c8);
  --gradient-ai-secondary: linear-gradient(135deg, #b9c8e2, #8fa3c8);
  --gradient-ai-hero: linear-gradient(135deg, #0a0a0a 0%, #101215 50%, #0d0d0d 100%);
  --gradient-card: linear-gradient(145deg, rgba(19, 19, 19, 0.98), rgba(13, 13, 13, 0.96));
  --gradient-border: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.6), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(169, 188, 224, 0.28), 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-ai: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-ai-strong: 0 16px 48px rgba(0, 0, 0, 0.6);
  --hot: #c3d1ea;
  --lime: #bcd9c0;
  --glow: rgba(169, 188, 224, 0.16);
  --danger: #ff8b8b;
  --success: #9edea5;
  --warning: #f0c060;
  --error: #ff8b8b;
  --info: #b8c7e8;
  --color-success-glow: rgba(158, 222, 165, 0.3);
  --color-warning-glow: rgba(240, 192, 96, 0.3);
  --color-error-glow: rgba(255, 139, 139, 0.3);
  /* Noms d'accents utilisés par les pages individuelles : tons pastel adoucis */
  --cyan: #bdd2e8;
  --mint: #bcd9c0;
  --pink: #e0c8d8;
  --purple: #cfc8e0;
  --orange: #e0cfc0;
  --green: #c5d5c5;
  --gold: #ddd0b5;
  --blue: #b9c8e2;
  --accent2: #8fa3c8;
  --accent-2: #8fa3c8;
  --accent3: #cfd9ec;
  --accent-3: #cfd9ec;
  --accent-grad: linear-gradient(135deg, #c3d1ea, #8fa3c8);
  --good: #9edea5;
  --warn: #f0c060;
  --bad: #ff8b8b;
  --correct: #9edea5;
  --wrong: #ff8b8b;
  --ok: #9edea5;
  --brand: #a9bce0;
  --brand2: #8fa3c8;
  --brand-2: #8fa3c8;
  --sky: #bdd2e8;
  --sky2: #a9c4dc;
  --accent-hover: #c3d1ea;
  --accent-hover-bg: #c3d1ea;
  --ball: #b9c8e2;
  --pop: #ddd0b5;
  --cell: #1c1c1c;
  --cell-filled: #b9c8e2;
}

/* ── Blocs injectés "dodosi-ai-upgrade" : neutralisés ── */
[class*="dodosi-ai-upgrade"],
[data-dodosi-ai-improvement] {
  background-color: #141414 !important;
  background-image: none !important;
  border-color: rgba(169, 188, 224, 0.25) !important;
  color: #f0f0f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
[class*="dodosi-ai-upgrade"]::before,
[class*="dodosi-ai-upgrade"]::after {
  background: none !important;
  display: none !important;
}

/* ── Fond global : noir pur, plus aucun dégradé coloré ── */
html,
body {
  background-color: #0a0a0a !important;
  background-image: none !important;
}

/* ── Suppression du text-shadow uniquement sur les éléments interactifs (pas sur le texte de contenu) ── */
button,
[class*="btn"],
[class*="chip"],
[class*="badge"],
[class*="label"] {
  text-shadow: none !important;
}

/* Glows : seuls les focus accessibles gardent une lueur neutre */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(169, 188, 224, 0.8) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(169, 188, 224, 0.15) !important;
}

/* ── Couleurs texte épurées ── */
body {
  color: #f0f0f0 !important;
}
a,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li,
label,
td,
th,
strong,
b,
small,
code,
pre {
  color: inherit;
}

/* ── Surfaces : fond sombre pour cartes génériques ── */
/* IMPORTANT: On ne touche pas aux éléments avec des gradients intentionnels (sidebar AI, chat, hero-card) */
[class*="panel"],
[class*="window"],
[class*="modal"],
[class*="popup"],
[class*="toast"],
[class*="dropdown"],
[class*="menu-dropdown"],
[class*="tooltip"],
[class*="update-box"],
[class*="guide"],
[class*="version-box"],
[class*="sidebar-card"],
[class*="profile-card"],
[class*="table"] {
  background-color: #141414 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Cartes de contenu — pas de gradient override pour les hero-card et feature-card qui ont leurs propres designs */
.stat,
.mini,
.foot,
.catalog {
  background-color: #141414;
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Boutons : fonds sobres, accent acier sur le primaire ── */
/* On conserve les gradients et les glows des boutons primaires */
button,
[class*="btn"],
[class*="button"] {
  border-color: rgba(255, 255, 255, 0.2);
  color: #f0f0f0;
  text-shadow: none !important;
}

/* Chips et tabs uniquement */
[class*="chip"],
[class*="menu-btn"],
[class*="back"],
[class*="restart"] {
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f0f0f0 !important;
}

/* Boutons primaires — on garde le gradient et la couleur de fond acier */
button[class*="primary"],
[class*="btn-primary"],
[class*="btn"].primary,
a[class*="btn-primary"],
[class*="cta-primary"] {
  background-color: #b9c8e2;
  color: #0a0a0a;
  border-color: #b9c8e2;
}

button[class*="primary"]:hover,
[class*="btn-primary"]:hover,
[class*="btn"].primary:hover {
  background-color: #c9d6ec;
}

/* ── Entrées de formulaire ── */
input,
select,
textarea {
  background-color: #181818 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
}
input::placeholder,
textarea::placeholder {
  color: #777 !important;
}

/* ── Chips/pills actifs : accent acier doux ── */
[class*="chip"].active,
[class*="tab"].active,
[class*="filter"].active,
[class*="badge"].active {
  background-color: #b9c8e2 !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border-color: #b9c8e2 !important;
}

/* ── Badges neutres ── */
[class*="badge"],
[class*="tag"],
[class*="meta"],
[class*="signal"] {
  background-image: none !important;
  background-color: #1c1c1c !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #d5d5d5 !important;
}

/* ── En-têtes / navigation ── */
header,
nav,
[class*="header"],
[class*="navbar"],
[class*="nav-"],
[class*="topbar"],
[class*="shell-top"],
[class*="titlebar"] {
  background-color: #0d0d0d !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

footer,
[class*="footer"] {
  background-color: #0b0b0b !important;
  background-image: none !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Tables ── */
table {
  background-color: transparent !important;
}
th,
td {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ── Bordures uniformes ── */
[class*="border"],
[class*="line"],
[class*="separator"],
[class*="divider"],
[class*="rule"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Ombre portée — panel et modal seulement, on préserve les box-shadows des cartes de jeu ── */
[class*="panel"],
[class*="modal"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb {
  background: #2a2a2a !important;
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: #0d0d0d !important;
}
::selection {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* ── Notifications / erreurs : couleurs adoucies ── */
[class*="error"],
[class*="alert-danger"],
[class*="error-msg"] {
  background-color: rgba(255, 139, 139, 0.12) !important;
  background-image: none !important;
  border-color: rgba(255, 139, 139, 0.35) !important;
  color: #ffb4b4 !important;
}
[class*="success"],
[class*="alert-success"],
[class*="ok-msg"] {
  background-color: rgba(158, 222, 165, 0.12) !important;
  background-image: none !important;
  border-color: rgba(158, 222, 165, 0.35) !important;
  color: #b8e8bd !important;
}

/* ── Canvas de jeux : bordure nette ── */
canvas,
[class*="board"],
[class*="grid"],
[class*="arena"],
[class*="play-area"] {
  box-shadow: none !important;
  filter: none !important;
}

/* ── Émojis / logos : pas de filtre coloré ── */
[class*="logo"],
[class*="icon"] {
  filter: none !important;
}

/* ── Clics tactiles : pas de surbrillance ── */
* {
  -webkit-tap-highlight-color: transparent !important;
}