/* ============================================================
   EDITOR THEME — surcharge du design "spectre des tiers"
   Chargé APRÈS tailwind.min.css et style.css : ne modifie aucun
   markup ni comportement JS, uniquement l'habillage.
   ============================================================ */
:root {
  --ink-0: #0c0d13;
  --ink-1: #12141d;
  --ink-2: #191c28;
  --line: #262a3a;
  --line-soft: #1e2230;
  --chalk: #eef0f6;
  --muted: #9aa0b4;
  --faint: #6b7188;
  --tier-s: #ff5c68;
  --tier-a: #ff9f45;
  --tier-b: #ffd644;
  --tier-c: #6fd96f;
  --tier-d: #57b3ff;
  --accent: var(--tier-s);
  --accent-ink: #2a0a0e;
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
}

/* ---------- Fond & surfaces (remap des utilitaires Tailwind) ---------- */
.bg-gray-950 { background-color: var(--ink-0) !important; }
.bg-gray-900, .bg-gray-900\/50, .bg-gray-900\/80 { background-color: var(--ink-1) !important; }
.bg-gray-800 { background-color: var(--ink-2) !important; }
.bg-gray-700 { background-color: var(--line) !important; }
.hover\:bg-gray-700:hover { background-color: var(--line) !important; }
.border-gray-800, .border-gray-800\/50 { border-color: var(--line-soft) !important; }
.border-gray-700 { border-color: var(--line) !important; }
.border-gray-900 { border-color: var(--line-soft) !important; }

/* ---------- Accent : bleu → S-tier ---------- */
.bg-blue-600 { background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.bg-blue-600 * { color: var(--accent-ink) !important; stroke: var(--accent-ink); }
.hover\:bg-blue-500:hover, .hover\:bg-blue-700:hover {
  background-color: #ff7580 !important; color: var(--accent-ink) !important;
}
.text-blue-500 { color: var(--tier-s) !important; }
.text-blue-400 { color: var(--tier-d) !important; }
.hover\:text-blue-300:hover, .hover\:text-blue-400:hover { color: #8ccaff !important; }
.shadow-blue-900\/20 { box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--tier-d) !important; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---------- Header éditeur ---------- */
.editor-wordmark {
  font-family: var(--font-display);
  font-size: 15px !important;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  color: var(--chalk);
}
.editor-wordmark .tick {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  background: conic-gradient(from 0deg, var(--tier-s) 0 90deg, var(--tier-a) 90deg 180deg, var(--tier-c) 180deg 270deg, var(--tier-d) 270deg 360deg);
}
.editor-wordmark span:not(.tick) { color: var(--chalk) !important; }

/* Badge BETA : jaune → tier-B (or) */
header .bg-yellow-500\/10 {
  background: color-mix(in srgb, var(--tier-b) 12%, transparent) !important;
  color: var(--tier-b) !important;
  border-color: color-mix(in srgb, var(--tier-b) 35%, transparent) !important;
}

/* ---------- Onglets sidebar ---------- */
.sidebar-tabs { background: var(--ink-1); border-bottom: 2px solid var(--line); }
.tab-btn { color: var(--faint); }
.tab-btn.active {
  color: var(--tier-a);
  background: var(--ink-0);
  border-bottom-color: var(--tier-a);
}
.tab-btn.active svg { stroke: var(--tier-a); }
.tab-btn:hover:not(.active) { background: var(--ink-2); color: var(--chalk); }

/* ---------- Zone d'attente : le spectre en signature ---------- */
.waiting-zone-fixed {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--tier-s) 0 20%, var(--tier-a) 20% 40%, var(--tier-b) 40% 60%, var(--tier-c) 60% 80%, var(--tier-d) 80% 100%) 1;
  background: var(--ink-0);
}
.waiting-zone-header {
  background: var(--ink-1);
  color: var(--muted);
}
.unranked-count {
  background: var(--tier-d);
  color: #0c1a26;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tier-d) 45%, transparent);
}

/* ---------- Badge custom : violet → tier-A ---------- */
.custom-badge {
  background: var(--tier-a);
  color: #241505;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--tier-a) 40%, transparent);
}

/* ---------- Recherche & résultats ---------- */
.search-input {
  background: var(--ink-2) !important;
  border-color: var(--line) !important;
  color: var(--chalk) !important;
}
.search-input:focus { border-color: var(--tier-d) !important; }
#results { background: var(--ink-1) !important; }

/* ---------- Boutons upload (violet → accent dégradé spectre chaud) ---------- */
[data-action="custom-image"] {
  background: var(--tier-a) !important;
  color: #241505 !important;
}
[data-action="custom-image"]:hover { filter: brightness(1.08); }
[data-action="custom-image"] svg { stroke: #241005; }

/* Jauge stockage : dégradé spectre */
#storage-usage-bar { background: var(--tier-d) !important; }
#storage-usage-text { color: var(--tier-d) !important; }

/* ---------- Bouton communauté ---------- */
.btn-community, .btn-community-exit {
  background: color-mix(in srgb, var(--tier-d) 10%, transparent) !important;
  color: var(--tier-d) !important;
  border: 1px solid color-mix(in srgb, var(--tier-d) 30%, transparent) !important;
}
.btn-community:hover, .btn-community-exit:hover {
  background: color-mix(in srgb, var(--tier-d) 20%, transparent) !important;
  color: #8ccaff !important;
}

/* Feedback : bleu → tier-D discret */
#open-feedback-btn {
  background: color-mix(in srgb, var(--tier-d) 8%, transparent) !important;
  color: var(--tier-d) !important;
  border-color: color-mix(in srgb, var(--tier-d) 25%, transparent) !important;
}

/* ---------- Bouton "add row" ---------- */
.btn-add-row {
  background: var(--ink-1) !important;
  border: 1px dashed var(--line) !important;
  color: var(--muted) !important;
}
.btn-add-row:hover { border-color: var(--tier-c) !important; color: var(--tier-c) !important; }

/* ---------- Loader ---------- */
.loader { border-color: var(--line); border-top-color: var(--tier-a); }

/* ---------- Board : la DA dans les tiers ---------- */
.tier-row { background: var(--ink-1); border-bottom: 1px solid var(--line-soft); }
.tier-items { background: var(--ink-1); }
.tier-label {
  font-family: var(--font-display);
  font-size: 22px;
  text-shadow: none;
  color: #14151c;
}
@media (min-width: 1024px) { .tier-label { font-size: 24px; } }
.tier-settings { background-color: var(--ink-2); border-right: 1px solid var(--line); }
.setting-btn { color: var(--faint); }
.setting-btn:hover { background: var(--line); color: var(--chalk); }
.setting-btn.btn-trash:hover { background: color-mix(in srgb, var(--tier-s) 15%, transparent); color: var(--tier-s); }
.color-wrapper { border-color: var(--line); box-shadow: none; }

/* ---------- Cartes de jeu : plat, net ---------- */
.game-card {
  background: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.game-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--faint) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45) !important;
}

/* ---------- Résultats de recherche ---------- */
.search-result img { border-radius: 8px; border: 2px solid transparent; }
.search-result:hover img { border-color: var(--tier-d); }
.search-result-title { color: var(--muted); }

/* ---------- Filtres : chips plates aux couleurs du spectre ---------- */
.filter-chip {
  font-family: var(--font-mono, monospace);
  letter-spacing: .04em;
  border-radius: 7px;
  filter: none;
  opacity: 1;
  background: var(--ink-2);
  color: var(--faint);
  border: 1px solid var(--line);
}
.filter-chip.active { transform: none; border-color: transparent; }
.filter-chip.bg-main.active { background: var(--tier-d); color: #0c1a26; }
.filter-chip.bg-remake.active { background: var(--tier-a); color: #241505; }
.filter-chip.bg-remaster.active { background: var(--tier-c); color: #0e2410; }
.filter-chip.bg-dlc.active { background: var(--tier-b); color: #241f05; }
.filter-chip.bg-fangame.active { background: var(--tier-s); color: var(--accent-ink); }
.filter-chip.bg-junk.active { background: var(--line); color: var(--chalk); }

/* Badges catégorie sur les covers (mêmes couleurs que les chips actives) */
.cat-badge { border-radius: 4px; box-shadow: none; }
.cat-badge.bg-main { background: var(--tier-d); color: #0c1a26; }
.cat-badge.bg-remake { background: var(--tier-a); color: #241505; }
.cat-badge.bg-remaster { background: var(--tier-c); color: #0e2410; }
.cat-badge.bg-dlc { background: var(--tier-b); color: #241f05; }
.cat-badge.bg-fangame { background: var(--tier-s); color: var(--accent-ink); }
.cat-badge.bg-junk { background: var(--line); color: var(--chalk); }

/* ---------- Zone d'attente : header mono ---------- */
.waiting-zone-header {
  font-family: var(--font-mono, monospace);
  letter-spacing: .12em;
}

/* ---------- Communauté (community.html, surcharge de community.css) ---------- */
.community-mode .border-purple-500\/30 { border-color: var(--line) !important; }
.community-mode .text-purple-400, .community-mode .text-purple-300 { color: var(--tier-a) !important; }
.community-mode .bg-purple-500\/20, .community-mode .bg-purple-500\/10 {
  background: color-mix(in srgb, var(--tier-a) 12%, transparent) !important;
}
.community-mode .border-purple-500 { border-color: var(--tier-a) !important; }
.community-mode #tab-browse.border-purple-500, .community-mode #tab-create.border-purple-500 {
  border-color: var(--tier-a) !important; color: var(--tier-a) !important;
}