/* Complete, opt-in appearance layers. No layout transforms, repaint loops,
   artwork filters, or changes to score/visibility/preview behavior. */
html:is([data-site-theme="afterhours"], [data-site-theme="stillwater"],
  [data-site-theme="parallax"], [data-site-theme="overtime"],
  [data-site-theme="resonance"], [data-site-theme="pale-lantern"],
  [data-site-theme="long-rest"], [data-site-theme="fathom"], [data-site-theme="wake"],
  [data-site-theme="oled"], [data-site-theme="last-caretaker"], [data-site-theme="pink-floyd"],
  [data-site-theme="bonfire"]) {
  color-scheme: var(--skin-scheme, dark);
  --bg: var(--skin-bg) !important;
  --bg-deep: var(--skin-deep) !important;
  --bg-glow: var(--skin-glow) !important;
  --panel: var(--skin-panel) !important;
  --panel-strong: var(--skin-well) !important;
  --paper: var(--skin-text) !important;
  --ink: var(--skin-text) !important;
  --muted: var(--skin-muted) !important;
  --line: var(--skin-line) !important;
  --accent: var(--skin-accent) !important;
  --accent-deep: var(--skin-secondary) !important;
  --accent-soft: var(--skin-highlight) !important;
  --wood-light: var(--skin-line) !important;
  --wood-mid: var(--skin-panel) !important;
  --wood-dark: var(--skin-deep) !important;
  --sage: var(--skin-muted) !important;
  --moss: var(--skin-secondary) !important;
  --ember: var(--skin-secondary) !important;
  --skin-radius: 5px;
  --skin-font: "Roboto", "Segoe UI", sans-serif;
  --skin-heading: var(--skin-font);
  --skin-positive: #b5e496;
  --skin-negative: #eea7a3;
  --skin-shadow: 0 3px 10px #0003;
  --skin-surface: linear-gradient(150deg, var(--skin-panel), var(--skin-well));
  --skin-button: linear-gradient(145deg, var(--skin-panel), var(--skin-well));
  --skin-header: var(--skin-panel);
  --skin-brand-spacing: -0.5px;
  background: var(--skin-backdrop);

  & body { font-family: var(--skin-font); }
  & ::selection { background: var(--skin-accent); color: var(--skin-on-accent); }
  & :focus-visible { outline-color: var(--skin-accent); }
  & :is(input, select, textarea) { accent-color: var(--skin-accent); }
  & input::placeholder { color: var(--skin-muted); opacity: 1; }
  & :is(.field input, .field select, .bucket-picker select, .catalog-search-control input,
    .site-theme-control select, .library-preferences-dialog input, .library-preferences-dialog select) {
    color: var(--skin-text);
    border-color: var(--skin-line);
    background-color: var(--skin-well);
    box-shadow: inset 0 1px 3px #0002;
  }
  & select option { color: var(--skin-text); background: var(--skin-well); }
  & :is(.field input:not([type="range"]), .site-theme-control select) { border-radius: var(--skin-radius) !important; }
  & :is(h1, h2, h3, .refine-panel-title) { color: var(--skin-text); font-family: var(--skin-heading); }

  &[data-header-style="clean"] :is(.top-layout, body.has-results .top-layout) {
    background: var(--skin-header);
    border-color: var(--skin-line);
    box-shadow: var(--skin-header-shadow, 0 1px 0 var(--skin-deep));
  }
  &[data-header-style="clean"] .brand-wordmark {
    color: var(--skin-highlight);
    font-family: var(--skin-heading);
    font-weight: 700;
    letter-spacing: var(--skin-brand-spacing);
    text-shadow: var(--skin-brand-shadow, none);
  }
  &[data-header-style="clean"] .brand-wordmark-accent { color: var(--skin-secondary); font-weight: 500; }
  &[data-header-style="clean"] .view-button {
    --view-accent: var(--skin-accent);
    color: var(--skin-muted);
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius) !important;
    background: var(--skin-button);
    box-shadow: var(--skin-nav-shadow, none);
    font-family: var(--skin-heading);
    text-shadow: none;
  }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] {
    color: var(--skin-on-accent);
    background: var(--skin-accent);
    border-color: var(--skin-accent);
    box-shadow: var(--skin-active-shadow, inset 0 -2px #0002);
  }
  &[data-header-style="clean"] .view-button:hover:not(:disabled) {
    color: var(--skin-text);
    border-color: var(--skin-accent);
    background: color-mix(in srgb, var(--skin-accent) 15%, var(--skin-well));
  }
  &[data-header-style="clean"] .view-button[aria-pressed="true"]:hover {
    color: var(--skin-on-accent);
    background: var(--skin-accent);
  }
  & :is(.refine-panel, .recommendations-panel, .privacy-panel, .release-calendar) {
    color: var(--skin-text);
    border-color: var(--skin-line);
    border-radius: var(--skin-radius) !important;
    background: var(--skin-surface);
    box-shadow: var(--skin-frame, var(--skin-shadow));
  }
  & :is(.refine-panel-head, .release-calendar-toolbar, .library-preferences-header) {
    background: var(--skin-header);
    border-color: var(--skin-line);
    border-radius: var(--skin-radius) !important;
  }
  & :is(#filter-gear-brass, #filter-gear-copper) stop:first-child { stop-color: var(--skin-highlight); }
  & :is(#filter-gear-brass, #filter-gear-copper) stop:nth-child(2) { stop-color: var(--skin-accent); }
  & :is(#filter-gear-brass, #filter-gear-copper) stop:nth-child(3) { stop-color: var(--skin-line); }
  & :is(#filter-gear-brass, #filter-gear-copper) stop:nth-child(4) { stop-color: var(--skin-secondary); }
  & :is(#filter-gear-brass, #filter-gear-copper) stop:last-child { stop-color: var(--skin-line); }
  & .filter-gear > path { stroke: var(--skin-secondary); }
  & .refine-panel-body { background: var(--skin-surface); box-shadow: none; }
  & .bucket {
    background: var(--skin-well);
    border-color: var(--skin-line);
    border-radius: var(--skin-radius) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--skin-text) 5%, transparent);
  }
  & .bucket-title-picker select {
    color: var(--skin-text);
    border-color: var(--skin-line);
    background-color: var(--skin-panel);
    font-family: var(--skin-heading);
  }
  & .rec-card:not(.release-calendar-card) { border-radius: var(--skin-card-radius, var(--skin-radius)) !important; }
  & .rec-card:not(.is-new):not(.is-gold-wrapped) { border-top-color: var(--skin-line); }
  & :is(.rec-price-final, .rec-score-sub, .rec-upcoming-release-date) { color: var(--skin-text); }
  & .rec-card:not(.rec-card-drag-ghost) .rec-price-badge { background: var(--skin-well); }
  & :is(.rec-price-badge.is-sale .rec-price-final, .rec-sale-percent, .tooltip-sale-discount) { color: var(--skin-positive); }
  & :is(.removed-panel, .range-field, .rail-checkbox-grid, .focus-game-reference) {
    background: var(--skin-well);
    border-color: var(--skin-line);
    box-shadow: none;
  }
  & :is(.removed-chip, .rail-checkbox-grid label) {
    color: var(--skin-text);
    background: var(--skin-button);
    border-color: var(--skin-line);
    box-shadow: var(--skin-control-shadow, inset 0 1px #ffffff05);
    border-radius: var(--skin-radius) !important;
  }
  & .rail-checkbox-grid label:has(input:checked) {
    background: color-mix(in srgb, var(--skin-accent) 12%, var(--skin-well));
    border-color: var(--skin-accent);
  }
  & :is(.removed-chip-action, #save-bucket-layout, #scan-button, .game-tooltip-preview-play) {
    color: var(--skin-on-accent);
    border-color: var(--skin-accent);
    background: var(--skin-accent);
    box-shadow: var(--skin-action-shadow, inset 0 -2px #0002);
    text-shadow: none;
    border-radius: var(--skin-radius) !important;
  }
  & :is(.catalog-search-control button, .mobile-filter-toggle, .mobile-filter-close, .mobile-bucket-tab, .release-calendar-nav, .release-calendar-today) {
    color: var(--skin-text);
    border-color: var(--skin-line);
    background: var(--skin-button);
  }
  & :is(.filter-autocomplete, .filter-autocomplete-item, .bucket-select-menu, .context-menu) {
    color: var(--skin-text); background-color: var(--skin-well); border-color: var(--skin-line);
  }
  & :is(.filter-autocomplete-item:hover, .filter-autocomplete-item.is-active) {
    background: color-mix(in srgb, var(--skin-accent) 15%, var(--skin-well));
  }
  & :is(.game-tooltip, .game-tooltip.game-tooltip--organized, .activity-tooltip, .library-preferences-dialog) {
    color: var(--skin-text);
    background: var(--skin-surface);
    border-color: var(--skin-line);
    border-radius: var(--skin-radius) !important;
    box-shadow: 0 14px 38px #0006;
    scrollbar-color: var(--skin-line) var(--skin-well);
  }
  & :is(.game-tooltip-head, .tooltip-section-title, .game-tooltip-scorecard h5,
    .game-tooltip-review-insights h5, .library-preferences-header h2) {
    color: var(--skin-highlight); font-family: var(--skin-heading);
  }
  & .game-tooltip-score { color: var(--skin-highlight); border-color: var(--skin-line); background: var(--skin-well); }
  & .game-tooltip-scorecard-metric > span small { color: var(--skin-muted); }
  & .tooltip-tag-legend { color: var(--skin-positive); }
  & .tooltip-tag-legend::before { background: var(--skin-positive); }
  & :is(.game-tooltip-key, .game-tooltip-copy, .game-tooltip-review-ratio small, .game-tooltip-scorecard > p,
    .game-tooltip-scorecard-reason dt, .game-tooltip-scorecard-metric > span, .game-tooltip-review-duration > small,
    .game-tooltip-scorecard-metric strong small, .game-tooltip-review-duration > span,
    .tooltip-original-price, .game-tooltip-hours-per-dollar) { color: var(--skin-muted); }
  & :is(.game-tooltip-value, .game-tooltip-scorecard-reason dd, .game-tooltip-scorecard-metric strong,
    .game-tooltip-review-duration > strong, .game-tooltip-price-value > span:first-child) { color: var(--skin-text); }
  & :is(.tooltip-about-section, .game-tooltip-details, .game-tooltip-scorecard, .game-tooltip-review-insights) { border-color: var(--skin-line); }
  & :is(.game-tooltip-scorecard-metric, .game-tooltip-review-duration, .game-tooltip-review-theme, .tooltip-tag) {
    color: var(--skin-muted); background: var(--skin-well); border-color: var(--skin-line);
  }
  & .tooltip-tag.game-tooltip-tag-positive { color: var(--skin-positive); background: color-mix(in srgb, var(--skin-positive) 8%, var(--skin-well)); }
  & :is(.tooltip-more-tags summary, .tooltip-read-more) { color: var(--skin-highlight); }
  & :is(.game-tooltip-preview, .game-tooltip-preview-warning) { border-color: var(--skin-line); background: var(--skin-well); }
  & .game-tooltip-preview-warning strong { color: var(--skin-highlight); }
  & .game-tooltip-review-ratio-labels > span:first-child { color: var(--skin-positive); }
  & .game-tooltip-review-ratio-labels > span:last-child { color: var(--skin-negative); }
  & :is(.library-preferences-description, .library-preferences-empty, .library-preferences-game-title) { color: var(--skin-text); }
  & :is(.library-preferences-game-meta, .library-preferences-count, .library-preferences-empty p) { color: var(--skin-muted); }
  & :is(.library-preferences-tabs, .library-preferences-game, .library-preferences-footer) { border-color: var(--skin-line); }
  & :is(.library-preferences-footer, .library-preferences-art) { background: var(--skin-well); border-color: var(--skin-line); }
  & .library-preferences-dialog :is(button, select, input) { border-color: var(--skin-line); background: var(--skin-well); color: var(--skin-text); }
  & .library-preferences-dialog button:hover:not(:disabled) { background: var(--skin-panel); border-color: var(--skin-accent); }
  & .library-preferences-dialog .library-preferences-tabs button { background: transparent; }
  & .library-preferences-dialog .library-preferences-tabs button[aria-selected="true"] { color: var(--skin-highlight); }
  & .library-preferences-tabs button[aria-selected="true"]::after { background: var(--skin-accent); }
  & :is(.library-preferences-notice, .library-ratings-update) { background: var(--skin-panel); border-color: var(--skin-line); color: var(--skin-text); }
  & .release-calendar-grid { background: var(--skin-deep); border-color: var(--skin-line); }
  & .release-calendar-toolbar { backdrop-filter: none; }
  & .release-calendar-heading h3 { font-family: var(--skin-heading); }
  & .release-calendar-weekday { color: var(--skin-highlight); border-color: var(--skin-line); background: var(--skin-header); font-family: var(--skin-heading); }
  & .release-calendar-day { border-color: var(--skin-line); background: var(--skin-panel); }
  & .release-calendar-day.is-outside-month { background: var(--skin-well); }
  & .release-calendar-day.is-today { border-color: var(--skin-accent); background: color-mix(in srgb, var(--skin-accent) 10%, var(--skin-panel)); }
  & .release-calendar-day-number { color: var(--skin-text); background: var(--skin-well); }
  & .release-calendar-day.is-today .release-calendar-day-number { color: var(--skin-on-accent); background: var(--skin-accent); }
  & .release-calendar-fan { --fan-light: var(--skin-highlight); --fan-core: var(--skin-accent); --fan-deep: var(--skin-panel); --fan-glow: var(--skin-secondary); }
  & .site-footer { color: var(--skin-muted); border-color: var(--skin-line); }
  & .site-footer a { color: var(--skin-highlight); }

  /* Re-skin the existing machine; its single composited rotor stays intact. */
  & .card-fan-station { background: var(--skin-surface); border-color: var(--skin-line); box-shadow: var(--skin-frame, var(--skin-shadow)); }
  & .card-fan-station::after { opacity: 0.35; }
  & .card-fan-toggle { background: linear-gradient(135deg, var(--skin-muted), var(--skin-panel)); }
  & .card-fan-toggle[aria-pressed="true"] .card-fan-switch-track {
    color: var(--skin-highlight); border-color: var(--skin-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--skin-accent) 30%, transparent);
  }
  & .card-fan-toggle[aria-pressed="true"] .card-fan-switch-track svg { filter: none; }
  & .card-fan-machine::before { background: radial-gradient(circle, var(--skin-deep) 0 57%, var(--skin-line) 59% 64%, transparent 66%), var(--skin-panel); box-shadow: inset 0 0 0 1px var(--skin-line); }
  & .card-fan-guard { border-color: var(--skin-secondary); box-shadow: inset 0 0 0 2px var(--skin-deep); }
  & .card-fan-guard svg { stroke: var(--skin-muted); }
  & #card-fan-blade-metal stop:nth-child(1) { stop-color: var(--skin-highlight); }
  & #card-fan-blade-metal stop:nth-child(2) { stop-color: var(--skin-accent); }
  & #card-fan-blade-metal stop:nth-child(3) { stop-color: var(--skin-secondary); }
  & #card-fan-blade-metal stop:nth-child(4) { stop-color: var(--skin-panel); }
  & .card-fan-hub { background: radial-gradient(circle at 35% 30%, var(--skin-muted), var(--skin-panel)); border-color: var(--skin-line); }
  & .card-fan-nozzle { background: var(--skin-button); border-color: var(--skin-line); }
  & .card-fan-nozzle::after { background: repeating-linear-gradient(0deg, var(--skin-muted) 0 1px, var(--skin-deep) 1px 4px); }

  & body:is(.is-scrolling, .is-rendering-constrained) :is(.bucket, .refine-panel, .recommendations-panel) { box-shadow: none; }
  @media (max-width: 980px) {
    & .refine-panel-body { background: var(--skin-surface); }
    & .mobile-results-toolbar { background: var(--skin-panel); border-color: var(--skin-line); }
  }
  @media (min-width: 981px) {
    & .refine-panel-head { position: relative; }
    & .refine-panel-head::after {
      content: "";
      position: absolute;
      right: 8px; top: 50%;
      width: 66px; height: 28px;
      transform: translateY(-50%);
      background: var(--skin-ornament, none) center / contain no-repeat;
      opacity: 0.7;
      pointer-events: none;
    }
  }
}

/* BONFIRE - Solaire's sun, muted olive fabric and unlit steel surfaces.
   A golden sun with burnt-orange rays is drawn with original CSS geometry. */
html[data-site-theme="bonfire"] {
  --skin-scheme: dark;
  --skin-bg: #000000; --skin-deep: #000000; --skin-glow: #000000;
  --skin-panel: #070a08; --skin-well: #020403; --skin-text: #c4c8bb;
  --skin-muted: #a1a99a; --skin-line: #46503b;
  --skin-accent: #b7a559; --skin-secondary: #8a9b68; --skin-highlight: #c8bc8c;
  --skin-on-accent: #0a0c08; --skin-positive: #acc28a; --skin-negative: #c99783;
  --skin-radius: 3px; --skin-card-radius: 4px;
  --skin-heading: "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  --skin-header: #000000;
  --skin-surface: #070a08;
  --skin-button: #070a08;
  --skin-backdrop: #000000;
  --skin-frame: inset 0 1px #46503b44;
  --skin-header-shadow: 0 1px #46503b;
  --skin-active-shadow: inset 0 -2px #8a9b68;
  --skin-action-shadow: none;
  --skin-brand-spacing: 0.02em;
  &[data-header-style="clean"] .brand-wordmark { font-weight: 700; color: var(--skin-text); }
  &[data-header-style="clean"] .brand-wordmark-accent { font-weight: 700; color: var(--skin-accent); }
  &[data-header-style="clean"] .view-button { border-bottom-width: 2px; font-family: var(--skin-font); }
  & a:not(.rec-card):not(.view-button) { color: var(--skin-highlight); }
  & :focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 3px; }
  & .refine-panel-head { position: relative; min-height: 58px; border-bottom: 2px solid #46503b; }
  & .bucket { border-top: 2px solid #46503b; background: #020403; }
  & .bucket-title-picker select { font-family: var(--skin-font); }
  & .rail-checkbox-grid label:has(input:checked) { border-color: #8a9b68; box-shadow: inset 2px 0 #8a9b68; }
  /* Scores retain their existing meaning on near-black steel card plates. */
  & .rec-card {
    --paper: #c4c8bb; --muted: #a1a99a; --accent-soft: #a5b97b;
    --skin-text: #c4c8bb; --skin-muted: #a1a99a; --skin-positive: #acc28a;
    --skin-well: #020403; --skin-line: #46503b;
    color: var(--paper);
  }
  & .rec-card:not(.is-gold-wrapped):not(.rec-card-drag-ghost) { background: #020403; }
  & .rec-score { color: #a5b97b; }
  & .game-tooltip.game-tooltip--organized { border-top: 2px solid #758347; box-shadow: 0 12px 28px #0008; }
  & .tooltip-section-title { letter-spacing: 0.06em; text-transform: uppercase; }
  & .card-fan-station { background: repeating-linear-gradient(45deg, #65705d08 0 1px, transparent 1px 5px), #020403; border-color: #46503b; }
  & .release-calendar-toolbar { border-bottom: 2px solid #46503b; }
  & .refine-panel-head::after {
    content: ""; position: absolute; right: 18px; top: 50%;
    transform: translateY(-50%); width: 46px; height: 46px;
    border-radius: 50% !important; pointer-events: none;
    background:
      radial-gradient(circle at 43% 47%, #222b18 0 1.1px, transparent 1.5px),
      radial-gradient(circle at 57% 47%, #222b18 0 1.1px, transparent 1.5px),
      radial-gradient(ellipse at 50% 60%, #7c552a 0 2px, transparent 2.5px),
      radial-gradient(circle, #c7ad55 0 33%, #92703d 34% 37%, transparent 38%),
      repeating-conic-gradient(from 10deg, #96713b 0deg 12deg, transparent 12deg 30deg);
    opacity: 1;
  }
  @media (max-width: 980px) {
    & .refine-panel-head::after { right: 96px; width: 40px; height: 40px; }
  }
}

/* SUNDIAL - aged copper clockwork, a golden sun and turquoise reflections.
   Keep the pink-floyd key so existing saved selections use the redesign. */
html[data-site-theme="pink-floyd"] {
  --skin-bg: #000000; --skin-deep: #000000; --skin-glow: #000000;
  --skin-panel: #080e12; --skin-well: #03070a; --skin-text: #bec6c1;
  --skin-muted: #9baaa7; --skin-line: #4d5b58;
  --skin-accent: #b99b64; --skin-secondary: #599b99; --skin-highlight: #c8b58e;
  --skin-on-accent: #090f12; --skin-positive: #a9c399; --skin-negative: #c99b91;
  --skin-radius: 9px; --skin-card-radius: 6px;
  --skin-heading: "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  --skin-header: radial-gradient(circle at 90% -40px, transparent 0 79px, #95665322 80px 81px, transparent 82px 101px, #b99b6415 102px 103px, transparent 104px), #000000;
  --skin-surface: #080e12;
  --skin-button: #060d11;
  --skin-backdrop: #000000;
  --skin-frame: inset 0 1px #95665333, inset 0 -1px #599b9922;
  --skin-header-shadow: 0 1px #715448;
  --skin-active-shadow: inset 0 -2px #599b99;
  --skin-action-shadow: none;
  --skin-brand-spacing: 0.02em;
  & :focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 3px; }
  &[data-header-style="clean"] .brand-wordmark { font-weight: 400; color: var(--skin-highlight); }
  &[data-header-style="clean"] .brand-wordmark-accent { font-weight: 400; color: var(--skin-secondary); }
  &[data-header-style="clean"] .view-button { font-family: var(--skin-font); border-bottom-width: 2px; }
  & .refine-panel-head { border-bottom: 2px solid #715448; }
  & .bucket {
    border-top: 2px solid #715448;
    border-bottom-color: #3b6464;
    background: #03070a;
  }
  & .bucket-title-picker select { font-family: var(--skin-font); }
  & .rail-checkbox-grid label:has(input:checked) { border-color: var(--skin-secondary); box-shadow: inset 2px 0 var(--skin-secondary); }
  & .rec-card:not(.is-gold-wrapped):not(.rec-card-drag-ghost) { background: #03070a; }
  & .game-tooltip.game-tooltip--organized { border-top: 2px solid #715448; border-bottom-color: #3b6464; }
  & .tooltip-section-title { letter-spacing: 0.035em; color: var(--skin-highlight); }
  & .card-fan-station { background: #03070a; border-color: #715448; }
  & .release-calendar-toolbar { border-bottom: 2px solid #715448; }
  @media (min-width: 981px) {
    & .refine-panel-head::after {
      right: 20px; width: 32px; height: 32px; border-radius: 50% !important;
      background:
        radial-gradient(circle, #b99b64 0 24%, #8b693f 25% 27%, transparent 28% 42%, #956653 43% 46%, transparent 47% 63%, #956653 64% 68%, transparent 69%),
        repeating-conic-gradient(from -1deg, #b99b64aa 0deg 2deg, transparent 2deg 30deg);
      box-shadow: 0 0 0 1px #95665344, 0 2px 0 #599b9944;
      opacity: 0.95;
    }
  }
}

/* Keep these two appearances dark even on selected controls and date badges. */
html:is([data-site-theme="bonfire"], [data-site-theme="pink-floyd"]) {
  & body { background: #000000; }
  & :is(.view-button, #scan-button, #save-bucket-layout, .removed-chip-action, .game-tooltip-preview-play) {
    transition-property: color, border-color, transform;
  }
  &[data-header-style="clean"] .view-button[aria-pressed="true"],
  &[data-header-style="clean"] .view-button[aria-pressed="true"]:hover {
    color: var(--skin-highlight); background: var(--skin-well);
    border-color: var(--skin-line); box-shadow: inset 0 -2px var(--skin-secondary);
  }
  & :is(#scan-button, #save-bucket-layout, .removed-chip-action, .game-tooltip-preview-play),
  & :is(#scan-button, #save-bucket-layout, .removed-chip-action, .game-tooltip-preview-play):hover:not(:disabled) {
    color: var(--skin-highlight); background: var(--skin-well);
    border-color: var(--skin-line); box-shadow: none;
  }
  & .release-calendar-day.is-today .release-calendar-day-number {
    color: var(--skin-highlight); background: var(--skin-well); border: 1px solid var(--skin-secondary);
  }
}

/* THE LAST CARETAKER - signal orange, steel lettering and ocean-dark instruments.
   Logo colors sampled from https://thelastcaretaker.com/images/logo-wordmark.png.
   The surrounding slate surfaces are adapted for readable dashboard controls. */
html[data-site-theme="last-caretaker"] {
  --skin-bg: #060c0f; --skin-deep: #060c0f; --skin-glow: #284352;
  --skin-panel: #161d24; --skin-well: #0e141a; --skin-text: #d2d6db;
  --skin-muted: #afbec8; --skin-line: #4a6372;
  --skin-accent: #ff5200; --skin-secondary: #8fb9cf; --skin-highlight: #d2d6db;
  --skin-on-accent: #101820; --skin-positive: #b5e496; --skin-negative: #ffb0a6;
  --skin-radius: 3px; --skin-card-radius: 3px;
  --skin-heading: "Bahnschrift", "Roboto", "Segoe UI", sans-serif;
  --skin-header: linear-gradient(110deg, #1c2d39, #0e141a 75%);
  --skin-surface: linear-gradient(145deg, #161d24, #0e141a 80%);
  --skin-button: linear-gradient(180deg, #233440, #161d24);
  --skin-backdrop: radial-gradient(ellipse at 80% 0%, #35586e45, transparent 55%), #060c0f;
  --skin-frame: inset 0 1px #d2d6db14, 0 4px 14px #0005;
  --skin-header-shadow: 0 1px #ff5200, 0 4px 0 #060c0f99;
  --skin-active-shadow: inset 0 -3px #9c3100;
  --skin-action-shadow: inset 0 1px #ffd6c144, inset 0 -2px #9c3100;
  --skin-brand-spacing: 0.02em;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%238fb9cf'%3E%3Cpath d='M2 5h62M2 23h62M8 9v10m8-7v7m8-10v10m18-10v10m8-7v7m8-10v10'/%3E%3Cpath d='M30 19V9h6v10' stroke='%23ff5200' stroke-width='2'/%3E%3C/svg%3E");
  & :focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 3px; }
  &[data-header-style="clean"] .brand-wordmark { color: var(--skin-highlight); font-weight: 700; }
  &[data-header-style="clean"] .brand-wordmark-accent { color: var(--skin-accent); font-weight: 700; }
  &[data-header-style="clean"] .view-button { border-bottom-width: 2px; }
  & .refine-panel-head { border-bottom: 2px solid var(--skin-accent); }
  & .bucket { border-top: 2px solid var(--skin-accent); }
  & .bucket-title-picker select { font-family: var(--skin-font); }
  & .rail-checkbox-grid label:has(input:checked) { box-shadow: inset 2px 0 var(--skin-accent); }
  & .game-tooltip.game-tooltip--organized { border-top: 2px solid var(--skin-accent); }
  & .tooltip-section-title { letter-spacing: 0.06em; text-transform: uppercase; }
  & .card-fan-station { border-top: 2px solid var(--skin-accent); background: var(--skin-header); }
  & .release-calendar-toolbar { border-bottom: 2px solid var(--skin-accent); }
}

/* OLED BLACK - unlit surfaces, soft white type, precise ice-blue edges.
   Large surfaces are literal black, including new cards and open overlays. */
html[data-site-theme="oled"] {
  --skin-bg: #000000; --skin-deep: #000000; --skin-glow: #000000;
  --skin-panel: #000000; --skin-well: #000000; --skin-text: #e4eaf0;
  --skin-muted: #a1acba; --skin-line: #28313b;
  --skin-accent: #8cdeef; --skin-secondary: #adbed6; --skin-highlight: #e9f6ff;
  --skin-on-accent: #061018; --skin-positive: #b5e496; --skin-negative: #eea7a3;
  --skin-radius: 7px; --skin-card-radius: 5px;
  --skin-font: "Roboto", "Segoe UI", sans-serif;
  --skin-heading: var(--skin-font);
  --skin-backdrop: #000000; --skin-header: #000000;
  --skin-surface: #000000; --skin-button: #000000;
  --skin-frame: none; --skin-shadow: none; --skin-header-shadow: none;
  --skin-nav-shadow: none; --skin-active-shadow: none;
  --skin-control-shadow: none; --skin-action-shadow: none;
  --shadow: none;
  background: #000000;
  scrollbar-color: #465363 #000000;

  & body { background: #000000; }
  & :focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 3px; }
  &[data-header-style="clean"] .brand-wordmark { color: var(--skin-highlight); letter-spacing: -0.6px; }
  &[data-header-style="clean"] .brand-wordmark-accent { color: var(--skin-accent); }
  &[data-header-style="clean"] .view-button { border-color: transparent; }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] {
    color: var(--skin-accent); background: #000000;
    border-color: #385766; box-shadow: inset 0 -1px var(--skin-accent);
  }
  &[data-header-style="clean"] .view-button[aria-pressed="true"]:hover {
    color: var(--skin-highlight); background: #080e14;
  }
  & :is(.bucket, .results-rail, .refine-panel-head,
    .discovery-intro, .discovery-view-copy, .mobile-results-toolbar, .mobile-bucket-nav,
    .game-comparison, .compare-tray, .library-preferences-game,
    .release-calendar-day, .release-calendar-day.is-today) {
    background: #000000;
    box-shadow: none;
  }
  & .rec-card:not(.rec-card-drag-ghost) :is(.rec-score-stack, .rec-price-badge) {
    background: #000000;
    box-shadow: none;
  }
  & .rec-card-drag-ghost .rec-price-badge { background: transparent; }
  & .bucket { border-top-color: #3b4857; }
  & .results-rail { backdrop-filter: none; }
  & :is(.field input:not([type="range"]), .field select, .site-theme-control select,
    .bucket-title-picker select, .rail-checkbox-grid label) {
    background-color: #000000; border-color: #465363; box-shadow: none;
  }
  & .rail-checkbox-grid input[type="checkbox"] {
    background-color: #000000; border-color: #728093;
  }
  & .rail-checkbox-grid label:has(input:checked) {
    color: var(--skin-highlight); background: #000000; border-color: var(--skin-accent);
    box-shadow: inset 2px 0 var(--skin-accent);
  }
  & .rail-checkbox-grid input[type="checkbox"]:checked { border-color: var(--skin-accent); }
  & :is(.rail-checkbox-grid label, .site-theme-control select):hover { border-color: var(--skin-accent); }
  & #save-bucket-layout { color: var(--skin-accent); background: #000000; border-color: #527b8a; }
  & #scan-button:hover:not(:disabled) { color: var(--skin-on-accent); background: #b2edfa; }
  & .range-field { background: #000000; border: 1px solid var(--skin-line); }
  /* Light the glass perimeter at rest, leaving the center and page black.
     Inset lighting also stays visible on touch devices and while scrolling.
     Lifted cards keep the shared translucent glass, rails, and raised edges. */
  & .rec-card:not(.rec-card-drag-ghost) {
    --oled-card-rim: #8fc8df;
    --oled-card-glow: #92d8f4;
    background: #000000;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--oled-card-rim) 24%, #000000),
      inset 0 2px 0 #dcf6ff1c,
      inset 0 0 12px -6px color-mix(in srgb, var(--oled-card-glow) 23%, transparent),
      0 2px 10px #83cfff06;
  }
  & .rec-card.is-new { --oled-card-rim: #8bbe86; --oled-card-glow: #b1dcc0; }
  & .rec-card.is-gold-wrapped { --oled-card-rim: #d8b46e; --oled-card-glow: #edce95; }
  & .rec-new-label { color: #c0e5b1; background: #000000; border: 1px solid #507847; }
  & .rec-score { text-shadow: none; }
  & .rec-card:not(.rec-card-drag-ghost)::after {
    border-radius: inherit;
    opacity: 0.4;
    background: linear-gradient(135deg, #dff8ffb3, var(--oled-card-rim) 16%, #31495840 45%, #85b9e966 78%, #e2f4ff99);
  }
  & .rec-card:not(.rec-card-drag-ghost):is(:hover, :focus-visible, :focus-within)::after {
    opacity: 0.5;
    background:
      radial-gradient(circle 150px at var(--cursor-x, 50%) var(--cursor-y, 50%), #e7faff, #92d8f499 45%, transparent 80%),
      linear-gradient(135deg, #dff8ffb3, var(--oled-card-rim) 16%, #31495840 45%, #85b9e966 78%, #e2f4ff99);
  }
  & :is(.game-tooltip, .game-tooltip.game-tooltip--organized, .activity-tooltip,
    .library-preferences-dialog, .game-comparison, .compare-tray, .bucket-select-menu,
    .filter-autocomplete, .context-menu) {
    background: #000000; border-color: #465363; box-shadow: 0 0 0 1px #151d25;
  }
  & :is(.game-tooltip-score, .game-tooltip-review-duration, .tooltip-tag,
    .tooltip-tag.game-tooltip-tag-positive, .game-tooltip-review-theme) { background: #000000; }
  & .release-calendar-day.is-today { box-shadow: inset 0 0 0 1px #527b8a; }
  & .release-calendar-day.is-today .release-calendar-day-number {
    color: var(--skin-accent); background: #000000; border: 1px solid #527b8a;
  }
  & .mobile-bucket-tab.is-active {
    color: var(--skin-accent); background: #000000; box-shadow: inset 0 -2px var(--skin-accent);
  }
  & .card-fan-station::after { opacity: 0; }
  & .card-fan-toggle { background: #000000; border-color: #465363; }
}

/* AFTERHOURS — electric signage, smoked glass, cut steel. */
html[data-site-theme="afterhours"] {
  --skin-bg: #100f1a; --skin-deep: #080a10; --skin-glow: #29182e;
  --skin-panel: #211c2b; --skin-well: #13131f; --skin-text: #f2f0e5;
  --skin-muted: #bdb6cb; --skin-line: #484054;
  --skin-accent: #ece65b; --skin-secondary: #ff798a; --skin-highlight: #9cedef;
  --skin-on-accent: #171923; --skin-radius: 0px;
  --skin-heading: "Bahnschrift", "Roboto", sans-serif;
  --skin-header: linear-gradient(100deg, #211425, #121621 70%);
  --skin-header-shadow: 0 1px #ece65b, 0 4px 0 #ece65b0b;
  --skin-surface: linear-gradient(130deg, #252033, #14151f 65%);
  --skin-backdrop: radial-gradient(ellipse at 85% 0%, #43203c88, transparent 48%), #0c0d15;
  --skin-frame: inset 2px 0 #ff798a33, 0 4px 14px #0004;
  --skin-active-shadow: inset 0 -3px #b5ab36;
  --skin-brand-spacing: -1px;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23ff798a'%3E%3Cpath d='M1 22h15l7-8h21l7-8h14M29 22h25l10-11'/%3E%3Cpath d='M40 3h14M4 26h15' stroke='%239cedef'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .brand-wordmark { font-style: italic; color: var(--skin-accent); }
  &[data-header-style="clean"] .view-button { border-width: 0 0 1px; }
  & :is(#scan-button, .removed-chip-action, .refine-panel-head) {
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }
  & .bucket { border-top: 2px solid var(--skin-secondary); }
  & .bucket-title-picker select { font-family: "Consolas", monospace; letter-spacing: -0.3px; }
  & .refine-panel-head { background: repeating-linear-gradient(110deg, transparent 0 8px, #ece65b05 8px 9px), var(--skin-panel); }
  & .game-tooltip.game-tooltip--organized { border-top: 2px solid var(--skin-accent); border-right-color: var(--skin-secondary); }
  & .tooltip-section-title { letter-spacing: 0.08em; text-transform: uppercase; }
  & .card-fan-station { border-left: 3px solid var(--skin-accent); }
}

/* STILLWATER — tarnished enamel and fog-softened, quiet typography. */
html[data-site-theme="stillwater"] {
  --skin-bg: #202522; --skin-deep: #111513; --skin-glow: #3b4640;
  --skin-panel: #2c332e; --skin-well: #202622; --skin-text: #e5e2d6;
  --skin-muted: #b9bdb2; --skin-line: #515c51;
  --skin-accent: #b4bba2; --skin-secondary: #c39487; --skin-highlight: #e5dfc9;
  --skin-on-accent: #1b231c; --skin-radius: 2px;
  --skin-heading: "Georgia", serif;
  --skin-header: linear-gradient(100deg, #39413b, #272e29 60%, #252924);
  --skin-surface: radial-gradient(ellipse at 100% 0%, #84907b12, transparent 65%), linear-gradient(155deg, #303931, #232a25);
  --skin-backdrop: radial-gradient(ellipse at 15% 0%, #66756644, transparent 65%), linear-gradient(180deg, #282f29, #141a17);
  --skin-frame: inset 0 0 0 1px #bec9aa07, 0 4px 12px #0003;
  --skin-button: linear-gradient(180deg, #373e35, #262e27);
  --skin-brand-spacing: 0.1px;
  &[data-header-style="clean"] .view-button { font-family: var(--skin-font); border-style: solid; }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] { border-bottom: 3px solid #c39487; }
  & .bucket { border-top-color: #8a9481; background-image: linear-gradient(170deg, #98a58d07, transparent 140px); }
  & .refine-panel-head { border-bottom-style: double; border-bottom-width: 3px; }
  & :is(.tooltip-section-title, .bucket-title-picker select) { font-family: "Georgia", serif; letter-spacing: 0.015em; }
  & .game-tooltip.game-tooltip--organized { box-shadow: 0 16px 42px #0008, inset 0 0 28px #0002; }
  & .card-fan-station { background: linear-gradient(165deg, #41483c, #252c26); border-color: #777e67; }
}

/* PARALLAX — muted slate panels and a blue/orange laboratory vocabulary. */
html[data-site-theme="parallax"] {
  --skin-scheme: dark;
  --skin-bg: #21323b; --skin-deep: #16252d; --skin-glow: #354e5b;
  --skin-panel: #34474f; --skin-well: #27383f; --skin-text: #e4ebec;
  --skin-muted: #b7c6cc; --skin-line: #5e7682;
  --skin-accent: #82c4df; --skin-secondary: #dea36e; --skin-highlight: #b9dde7;
  --skin-on-accent: #142a35; --skin-positive: #b5e496; --skin-negative: #eda7a8;
  --skin-radius: 12px; --skin-card-radius: 7px;
  --skin-heading: "Bahnschrift", "Roboto", sans-serif;
  --skin-header: linear-gradient(180deg, #3b515b, #2d414a);
  --skin-surface: linear-gradient(150deg, #374c56, #293c45);
  --skin-button: linear-gradient(180deg, #3b505a, #2b3e48);
  --skin-backdrop: repeating-linear-gradient(90deg, transparent 0 159px, #789da412 159px 160px), linear-gradient(#2c414b, #1c2c34);
  --skin-frame: inset 0 1px #dbe6e515, 0 4px 12px #0d1a222b;
  --skin-header-shadow: 0 1px #819aa633, 0 3px #14263055;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke-width='2'%3E%3Cellipse cx='22' cy='14' rx='7' ry='11' stroke='%2382c4df'/%3E%3Cellipse cx='44' cy='14' rx='7' ry='11' stroke='%23dea36e'/%3E%3Cpath d='M31 14h4' stroke='%23b7c6cc'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .view-button { border-radius: 20px !important; }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] { box-shadow: inset 0 -3px #37698466; }
  & .refine-panel-head { border-left: 3px solid #c78c5b; }
  & .bucket { border-top: 3px solid #609fbb; background: #263a43; }
  & .bucket:nth-child(even) { border-top-color: #c78c5b; }
  & .bucket-title-picker select { border-radius: 16px !important; }
  & .game-tooltip.game-tooltip--organized { border-top: 3px solid #609fbb; box-shadow: 0 14px 38px #0b192370; }
  & .game-tooltip-head { color: var(--skin-text); }
  /* Keep score hue/categories and inline score values intact on a dark rail. */
  & .rec-card:not(.rec-card-drag-ghost) .rec-score-stack { background: #1c303a; border-radius: 5px; padding: 5px 2px; }
  & .release-calendar-card.uses-portrait-art:not(.rec-card-drag-ghost) .rec-score-stack { background: #1c303a; border-radius: 0; }
  & .release-calendar-card.uses-portrait-art .release-calendar-countdown { color: var(--skin-highlight); }
  & .release-calendar-card.uses-portrait-art .release-calendar-countdown.is-released { color: var(--skin-positive); }
  & .release-calendar-card.uses-portrait-art .release-calendar-countdown.is-imminent { color: var(--skin-secondary); }
  & .rec-score-stack :is(.rec-score-sub, .rec-price-final, .rec-upcoming-release-date) { color: #edf3f5; }
  & .rec-score-stack :is(.rec-sale-percent, .is-sale .rec-price-final) { color: #b5e496; }
  & .rec-price-badge { background: transparent; }
  & .rec-card.is-new:not(.rec-card-drag-ghost) { box-shadow: inset 0 0 0 2px #538a4e; }
  & .rec-card.is-gold-wrapped:not(.rec-card-drag-ghost) { box-shadow: inset 0 0 0 2px #a87915; }
  & .rail-checkbox-grid input { border-color: #7896a4; }
  & .card-fan-station { background: #304650; border-color: #698693; }
  & .card-fan-station::after { opacity: 0.13; }
  & .card-fan-machine::before { background: radial-gradient(circle, #142630 0 57%, #698693 59% 64%, transparent 66%), #384f59; }
}

/* OVERTIME — painted red/blue equipment, canvas and heavy stamped headings. */
html[data-site-theme="overtime"] {
  --skin-bg: #342e29; --skin-deep: #231f1c; --skin-glow: #655744;
  --skin-panel: #4b4136; --skin-well: #332e28; --skin-text: #f1e6cf;
  --skin-muted: #c9bda7; --skin-line: #786651;
  --skin-accent: #d69b67; --skin-secondary: #b0c7ca; --skin-highlight: #f3d8a8;
  --skin-on-accent: #30271e; --skin-radius: 8px;
  --skin-heading: "Franklin Gothic Medium", "Arial Narrow", "Roboto", sans-serif;
  --skin-header: linear-gradient(90deg, #633d34, #483b31 48%, #35484c);
  --skin-surface: linear-gradient(165deg, #524737, #3b342a);
  --skin-button: linear-gradient(#5b5142, #443a31);
  --skin-backdrop: repeating-linear-gradient(0deg, transparent 0 3px, #c0a37903 3px 4px), #302a24;
  --skin-frame: inset 0 1px #e5cea322, 2px 3px 0 #1c1915;
  --skin-nav-shadow: 0 2px 0 #211d19;
  --skin-control-shadow: inset 0 1px #f1d6ae18, 0 2px 0 #211c18;
  --skin-action-shadow: inset 0 2px #fbe1b333, 0 3px 0 #70472c;
  --skin-brand-spacing: -0.9px;
  &[data-header-style="clean"] .brand-wordmark { font-family: "Impact", "Arial Narrow", sans-serif; letter-spacing: 0.4px; font-weight: 400; }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] { background: #ab5845; color: #fff0d8; border-color: #cd8c6d; }
  & .bucket { border-top: 4px solid #b96e54; box-shadow: inset 0 1px #0004; }
  & .bucket:nth-child(even) { border-top-color: #73979e; }
  & .bucket-title-picker select { font-weight: 900; }
  & .game-tooltip.game-tooltip--organized { border-width: 2px; box-shadow: 4px 5px 0 #211b17, 0 14px 30px #0006; }
  & .game-tooltip-head { font-family: "Impact", "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: 0.4px; }
  & .tooltip-section-title { text-transform: uppercase; }
  & .card-fan-station { background: linear-gradient(145deg, #745041, #473a2e); box-shadow: inset 0 1px #ecd1a822, 2px 3px 0 #211b17; }
}

/* RESONANCE — oxidized graphite, instrumentation and restrained hazard paint. */
html[data-site-theme="resonance"] {
  --skin-bg: #1c211f; --skin-deep: #101512; --skin-glow: #384133;
  --skin-panel: #2a3029; --skin-well: #1d231f; --skin-text: #e4e7d8;
  --skin-muted: #b2bbac; --skin-line: #535e49;
  --skin-accent: #f5a34b; --skin-secondary: #aec187; --skin-highlight: #ffd197;
  --skin-on-accent: #211e15; --skin-radius: 1px;
  --skin-heading: "Consolas", "Liberation Mono", monospace;
  --skin-header: #252c24;
  --skin-surface: linear-gradient(90deg, #40483410 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(#2c332b, #202720);
  --skin-backdrop: linear-gradient(90deg, #83976a08 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(#83976a08 1px, transparent 1px) 0 0 / 48px 48px, #161c17;
  --skin-header-shadow: 0 2px #f5a34b;
  --skin-frame: inset 0 0 0 3px #10151255;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23aec187'%3E%3Cpath d='M1 21h8l4-8 5 11 6-21 6 18h8l5-8 4 8h18M1 27h64'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .brand-wordmark { font-family: "Bahnschrift", sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: 23px; }
  &[data-header-style="clean"] .view-button { font-size: 11px; }
  & .bucket { border-top: 3px solid #aa783c; }
  & .refine-panel-head { border-left: 5px solid #f5a34b; }
  & .game-tooltip.game-tooltip--organized { border-left: 3px solid #f5a34b; }
  & :is(.tooltip-section-title, .game-tooltip-score) { font-family: var(--skin-heading); letter-spacing: 0.04em; }
  & .card-fan-station { border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(125deg, #a78944 0 7px, #242d23 7px 14px) 4; }
}

/* PALE LANTERN — moonlit stone, silver threads and quiet cathedral arches. */
html[data-site-theme="pale-lantern"] {
  --skin-bg: #101823; --skin-deep: #080e16; --skin-glow: #293950;
  --skin-panel: #202d40; --skin-well: #131e2d; --skin-text: #e6edf5;
  --skin-muted: #b2c0d3; --skin-line: #465974;
  --skin-accent: #becfe4; --skin-secondary: #9bb7da; --skin-highlight: #f0f2fa;
  --skin-on-accent: #152538; --skin-radius: 14px;
  --skin-card-radius: 5px;
  --skin-heading: "Fraunces", "Georgia", serif;
  --skin-header: radial-gradient(ellipse at 50% 100%, #2a3b55, #111c2b 75%);
  --skin-surface: radial-gradient(ellipse at 50% 0%, #30435d44, transparent 55%), linear-gradient(#1c2a3c, #141f30);
  --skin-backdrop: radial-gradient(ellipse at 50% 0%, #34486b77, transparent 55%), #0b1421;
  --skin-frame: inset 0 0 0 3px #101a29, inset 0 0 0 4px #7e9bbe20, 0 3px 12px #0003;
  --skin-brand-shadow: 0 0 16px #abcdf32b;
  --skin-header-shadow: 0 1px #6c82a344;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23becfe4' stroke-width='.9'%3E%3Cpath d='M4 23c9 0 12-7 12-15 8 2 14 6 17 17C36 14 42 10 50 8c0 8 3 15 12 15M13 25c6-2 9-6 9-10M53 25c-6-2-9-6-9-10M33 21C22 13 29 5 33 2c4 3 11 11 0 19Z'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .view-button { border-radius: 18px 18px 5px 5px !important; }
  & .refine-panel-head { border-radius: 14px 14px 0 0 !important; }
  & .bucket { border-radius: 24px 24px 7px 7px !important; border-top-color: #91a8c4; }
  & .bucket-title-picker select { border-radius: 14px 14px 5px 5px !important; }
  & .game-tooltip.game-tooltip--organized { border-radius: 20px 20px 8px 8px !important; box-shadow: 0 0 0 3px #0d1725, 0 0 0 4px #637e9d55, 0 16px 32px #0006; }
  & .tooltip-section-title { letter-spacing: 0.04em; }
  & .card-fan-station { border-radius: 22px 22px 8px 8px; border-top-color: #a8bbd3; }
}

/* LONG REST — dark leather, illuminated edges and antique gilt. */
html[data-site-theme="long-rest"] {
  --skin-bg: #201820; --skin-deep: #110e15; --skin-glow: #493044;
  --skin-panel: #352735; --skin-well: #241c27; --skin-text: #eee1c9;
  --skin-muted: #c5b5a9; --skin-line: #78624d;
  --skin-accent: #d9b879; --skin-secondary: #d2a5ae; --skin-highlight: #f4d9a0;
  --skin-on-accent: #2b2022; --skin-radius: 5px;
  --skin-heading: "Fraunces", "Palatino Linotype", "Georgia", serif;
  --skin-header: linear-gradient(100deg, #3b2330, #251c29 60%, #2e2537);
  --skin-surface: radial-gradient(ellipse at 0% 0%, #702d3e22, transparent 70%), linear-gradient(#332432, #211b27);
  --skin-button: linear-gradient(#41303c, #2d202c);
  --skin-backdrop: radial-gradient(ellipse at 8% 0%, #6b314b55, transparent 60%), linear-gradient(#241c2a, #100e16);
  --skin-frame: inset 0 0 0 3px #1c161d, inset 0 0 0 4px #c6a15d38, 0 3px 12px #0003;
  --skin-header-shadow: 0 1px #ba9355, 0 4px 0 #15101a, 0 5px #ba935544;
  --skin-action-shadow: inset 0 0 0 2px #fce5b633, inset 0 -3px #684b3344;
  --skin-brand-spacing: -0.7px;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23d9b879' stroke-width='.9'%3E%3Cpath d='m33 3 9 11-9 11-9-11ZM2 14h22m18 0h22M9 8c8 0 8 6 15 6M57 8c-8 0-8 6-15 6M9 20c8 0 8-6 15-6M57 20c-8 0-8-6-15-6M33 8v12'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .view-button { border-color: #846343; box-shadow: inset 0 0 0 2px #16121b; }
  &[data-header-style="clean"] .view-button[aria-pressed="true"] { background: linear-gradient(#e3c996, #c4a05d); }
  & .refine-panel-head { border-bottom: 3px double #a18351; }
  & .bucket { border-top: 3px double #b59561; }
  & .bucket-title-picker select { border: 1px solid #a18152; }
  & .game-tooltip.game-tooltip--organized { border-color: #c09b5b; box-shadow: inset 0 0 0 3px #201923, inset 0 0 0 4px #c09b5b44, 0 16px 40px #0009; }
  & .tooltip-section-title { letter-spacing: 0.035em; }
  & .card-fan-station { border: 3px double #a88956; background: linear-gradient(130deg, #442e39, #261e2b); }
}

/* FATHOM — deep-sea Art Deco, stepped framing and fine brass inlay. */
html[data-site-theme="fathom"] {
  --skin-bg: #0d2428; --skin-deep: #071719; --skin-glow: #235055;
  --skin-panel: #183a3e; --skin-well: #102c30; --skin-text: #ebe7cc;
  --skin-muted: #b4c7bc; --skin-line: #617568;
  --skin-accent: #d5be7a; --skin-secondary: #8ac9be; --skin-highlight: #f1dfaa;
  --skin-on-accent: #193233; --skin-radius: 2px;
  --skin-heading: "Bahnschrift", "Trebuchet MS", sans-serif;
  --skin-header: linear-gradient(110deg, #1a4548, #102b31 75%);
  --skin-surface: repeating-linear-gradient(90deg, transparent 0 7px, #c6bf7c04 7px 8px), linear-gradient(#193b3f, #102b2e);
  --skin-button: linear-gradient(#24474a, #17373b);
  --skin-backdrop: repeating-linear-gradient(90deg, transparent 0 79px, #bdaa6320 79px 80px, transparent 80px 84px, #bdaa6312 84px 85px, transparent 85px 164px), linear-gradient(#123236, #081b20);
  --skin-frame: inset 0 0 0 3px #0c282b, inset 0 0 0 4px #d5be7a35, 0 3px 12px #0003;
  --skin-header-shadow: 0 1px #b4a069, 0 3px #0b262a, 0 4px #b4a06955;
  --skin-brand-spacing: 0.3px;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23d5be7a' stroke-width='.9'%3E%3Cpath d='M3 25h60M33 25 9 10v15M33 25 18 5v20M33 25 26 2v23M33 25V1M33 25 40 2v23M33 25 48 5v20M33 25 57 10v15'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .brand-wordmark { text-transform: uppercase; font-size: 23px; font-weight: 400; }
  &[data-header-style="clean"] .view-button { border-bottom: 3px double #89906d; }
  & .refine-panel-head { background: linear-gradient(135deg, #a3925633 0 1px, transparent 1px), var(--skin-header); border-bottom: 3px double #af9d65; }
  & .bucket { border-top: 3px double #b5a773; }
  & .bucket-title-picker select { letter-spacing: 0.06em; font-size: 0.92rem; }
  & .game-tooltip.game-tooltip--organized { border: 3px double #baaa72; box-shadow: 0 0 0 2px #0d292b, 0 0 0 3px #baaa7244, 0 16px 36px #0008; }
  & :is(.game-tooltip-head, .tooltip-section-title) { text-transform: uppercase; letter-spacing: 0.07em; }
  & .card-fan-station { border: 3px double #ae9f69; }
}

/* WAKE — deep evergreen, moss, warm paper and quiet woodland details. */
html[data-site-theme="wake"] {
  --skin-bg: #0d1d13; --skin-deep: #07110b; --skin-glow: #29462e;
  --skin-panel: #1b3323; --skin-well: #102317; --skin-text: #eeeede;
  --skin-muted: #bcc8b2; --skin-line: #46624a;
  --skin-accent: #b8cf91; --skin-secondary: #d0c29f; --skin-highlight: #ecedcf;
  --skin-on-accent: #152419; --skin-radius: 7px; --skin-card-radius: 5px;
  --skin-heading: "Georgia", "Palatino Linotype", serif;
  --skin-header: radial-gradient(ellipse at 75% 0%, #52664030, transparent 55%), linear-gradient(110deg, #213d29, #102318 75%);
  --skin-surface: radial-gradient(ellipse at 0% 0%, #6d855018, transparent 55%), linear-gradient(160deg, #1b3523, #102418);
  --skin-button: linear-gradient(#24402b, #162e1d);
  --skin-backdrop: radial-gradient(ellipse at 15% 0%, #3b60334a, transparent 50%), radial-gradient(ellipse at 90% 15%, #52664018, transparent 50%), linear-gradient(#112619, #07110b);
  --skin-frame: inset 0 1px #c8d4ad0c, 0 4px 14px #030c0744;
  --skin-header-shadow: 0 1px #71845466, 0 3px #08160d;
  --skin-active-shadow: inset 0 -3px #627b4944;
  --skin-action-shadow: inset 0 1px #eef4d94d, inset 0 -2px #617a4a55;
  --skin-brand-spacing: 0.3px;
  --skin-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 28' fill='none' stroke='%23b8cf91' stroke-width='.9' stroke-linejoin='round'%3E%3Cpath d='M33 1 26 10h4l-7 8h6l-7 7h22l-7-7h6l-7-8h4ZM33 25v3M15 7 9 15h4l-6 8h16l-6-8h4ZM15 23v5M51 7 45 15h4l-6 8h16l-6-8h4ZM51 23v5'/%3E%3C/svg%3E");
  &[data-header-style="clean"] .brand-wordmark { font-weight: 400; color: #eeeede; }
  &[data-header-style="clean"] .brand-wordmark-accent { color: #b8cf91; }
  &[data-header-style="clean"] .view-button { font-family: var(--skin-font); border-radius: 5px !important; }
  & .refine-panel-head { border-bottom: 1px solid #71845477; }
  & .bucket { border-top: 2px solid #718454; background-image: linear-gradient(160deg, #577b3610, transparent 180px); }
  & .bucket-title-picker select { font-family: var(--skin-font); letter-spacing: 0.025em; }
  & .game-tooltip.game-tooltip--organized { border-color: #718454; box-shadow: 0 16px 38px #030c0788, inset 0 1px #dce4c21a; }
  & :is(.game-tooltip-head, .tooltip-section-title) { font-weight: 400; letter-spacing: 0.01em; }
  & .card-fan-station { background: linear-gradient(140deg, #2d462b, #152b1b); border-color: #60744c; }
}