/* Dark gallery surfaces. Game artwork, rarity tile colors, and animation pixels are unchanged. */
html[data-theme="dark"] .gallery-page {
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .gallery-page button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .gallery-page button:hover {
  background: var(--theme-hover);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page :is(button, a, input, select):focus-visible {
  outline-color: var(--accent);
}

html[data-theme="dark"] .gallery-page :is(.intro, .collection) {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 3px 14px #0000000a;
}
html[data-theme="dark"] .gallery-page :is(.intro h1, .collection-heading h2, .featured-bottom b) {
  color: var(--text);
}
html[data-theme="dark"] .gallery-page .intro h1 span { color: var(--accent); }
html[data-theme="dark"] .gallery-page .intro-divider { color: var(--muted); }
html[data-theme="dark"] .gallery-page .eyebrow { color: var(--teal); }
html[data-theme="dark"] .gallery-page :is(.intro-sub, .featured-label, .featured-bottom small) {
  color: var(--muted);
}
html[data-theme="dark"] .gallery-page .featured {
  background: linear-gradient(120deg, var(--surface-muted), var(--theme-accent-bg));
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .featured:hover {
  background: linear-gradient(120deg, var(--theme-hover), var(--theme-accent-bg));
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .collection-heading h2 span {
  color: var(--muted);
  background: var(--surface-muted);
}
html[data-theme="dark"] .gallery-page .quiet-button {
  background: transparent;
  color: var(--muted);
}
html[data-theme="dark"] .gallery-page .quiet-button:hover {
  background: transparent;
  color: var(--accent);
}

html[data-theme="dark"] .gallery-page .category-tabs { border-color: var(--line); }
html[data-theme="dark"] .gallery-page .category-tabs button {
  background: var(--surface-muted);
  color: var(--muted);
  border-color: transparent;
}
html[data-theme="dark"] .gallery-page .category-tabs button:hover {
  color: var(--text);
  background: var(--theme-hover);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .category-tabs button span { color: var(--muted); }
html[data-theme="dark"] .gallery-page .category-tabs button[aria-pressed="true"] {
  color: var(--text);
  background: var(--theme-accent-bg);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .category-tabs button[aria-pressed="true"] span {
  color: var(--text);
}
html[data-theme="dark"] .gallery-page :is(.search, .select-field) {
  background: var(--surface-muted);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page :is(.search > span, .select-field > span) { color: var(--muted); }
html[data-theme="dark"] .gallery-page .search input { color: var(--text); }
html[data-theme="dark"] .gallery-page .search input::placeholder { color: var(--muted); }
html[data-theme="dark"] .gallery-page .search:focus-within {
  border-color: var(--accent);
  background: var(--surface-muted);
}
html[data-theme="dark"] .gallery-page .select-field select {
  background: var(--surface-muted);
  color: var(--text);
}
html[data-theme="dark"] .gallery-page .favorite-filter {
  background: var(--surface-muted);
  color: var(--muted);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .favorite-filter[aria-pressed="true"] {
  background: var(--theme-accent-bg);
  color: var(--text);
  border-color: var(--accent);
}

html[data-theme="dark"] .gallery-page .item-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 7px #0000000a;
}
html[data-theme="dark"] .gallery-page .item-card:hover {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 7px 20px #00000026;
}
html[data-theme="dark"] .gallery-page .card-art { background: var(--surface-muted); }
html[data-theme="dark"] .gallery-page .card-name { color: var(--text); }
html[data-theme="dark"] .gallery-page .card-price {
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .card-rarity {
  background: color-mix(in srgb, var(--quality) 15%, var(--surface-muted));
  color: color-mix(in srgb, var(--quality) 65%, #fff);
}
html[data-theme="dark"] .gallery-page .empty-state {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .gallery-page .empty-state h3 { color: var(--text); }
html[data-theme="dark"] .gallery-page .load-more {
  background: var(--theme-accent-bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .load-more:hover {
  background: var(--theme-hover);
  border-color: var(--accent);
}

html[data-theme="dark"] .gallery-page dialog {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 24px 100px #00000080;
}
html[data-theme="dark"] .gallery-page dialog::backdrop { background: #10121dcc; }
html[data-theme="dark"] .gallery-page .dialog-top {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .dialog-top button {
  background: var(--surface-muted);
  color: var(--muted);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .dialog-top button:hover {
  background: var(--theme-hover);
  color: var(--text);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .exhibit-left {
  background: var(--surface-muted);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .media-controls button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .media-controls button:hover {
  background: var(--theme-hover);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .media-controls button[aria-pressed="true"] {
  background: var(--theme-accent-bg);
  color: var(--text);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .item-tags span:first-child {
  background: color-mix(in srgb, var(--quality) 12%, var(--surface-muted));
  border-color: color-mix(in srgb, var(--quality) 35%, var(--line));
  color: color-mix(in srgb, var(--quality) 65%, #fff);
}
html[data-theme="dark"] .gallery-page .exhibit-info h2 { color: var(--text); }
html[data-theme="dark"] .gallery-page .item-facts {
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .item-facts dd.fact-price { color: var(--teal); }
html[data-theme="dark"] .gallery-page .item-actions button {
  background: var(--theme-accent-bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .item-actions button:hover {
  background: var(--theme-hover);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .item-actions button[aria-pressed="true"] {
  background: var(--theme-accent-bg);
  color: var(--text);
  border-color: var(--accent);
}
html[data-theme="dark"] .gallery-page .action-status { color: var(--teal); }

html[data-theme="dark"] .gallery-page .item-drop-sources { border-color: var(--line); }
html[data-theme="dark"] .gallery-page :is(.item-drop-sources h3, .drop-source-heading b) { color: var(--text); }
html[data-theme="dark"] .gallery-page .drop-source-row {
  background: var(--surface-muted);
  border-color: var(--line);
}
html[data-theme="dark"] .gallery-page .drop-source-heading > span {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .gallery-page .drop-container-tags span {
  background: var(--theme-accent-bg);
  color: var(--text);
}
html[data-theme="dark"] .gallery-page :is(.drop-links a, .source-details a, .about-content a, footer a) {
  color: var(--teal);
}
html[data-theme="dark"] .gallery-page :is(.drop-links a, .source-details a, .about-content a, footer a):hover {
  color: var(--text);
}
html[data-theme="dark"] .gallery-page .source-details { border-color: var(--line); }
html[data-theme="dark"] .gallery-page .source-details summary { color: var(--teal); }
html[data-theme="dark"] .gallery-page :is(.about-content h3, .about-content dd) { color: var(--text); }
html[data-theme="dark"] .gallery-page :is(
  .coverage, .result-bar p, .card-category, .card-price small, .item-tags,
  .dialog-top > span, .item-facts dt, .media-note, .drop-title > span,
  .drop-footnote, .drop-difficulty, .source-details, .drop-note, .drop-more,
  .item-description, .about-content, footer
) { color: var(--muted); }