/* Shared site palette. Individual games and full-screen tools retain their own visual systems. */
html[data-zb-theme-page]:not([data-zb-theme="original"]) {
  color-scheme: light;
  --zb-bg: #f6f8fc;
  --zb-panel: #ffffff;
  --zb-panel-soft: #fbfcfd;
  --zb-text: #10213a;
  --zb-muted: #58708d;
  --zb-line: #d6e0eb;
  --zb-accent: #0f766e;
  --zb-accent-link: #0b5f70;
  --zb-accent-bright: #52dfe0;
  --zb-accent-soft: #e7fbf6;
  --zb-focus: #b57c00;
  --zb-shadow: 0 18px 50px rgba(16, 33, 58, .08);
  --zb-nav-bg: rgba(255, 255, 255, .94);
  --bg: var(--zb-bg);
  --panel: var(--zb-panel);
  --text: var(--zb-text);
  --muted: var(--zb-muted);
  --line: var(--zb-line);
  --accent: var(--zb-accent);
  --accent-strong: var(--zb-accent-link);
  --shadow: var(--zb-shadow);
  --zba-panel: var(--zb-panel);
  --zba-text: var(--zb-text);
  --zba-muted: var(--zb-muted);
  --zba-line: var(--zb-line);
  --zba-accent: var(--zb-accent);
  --zba-accent-strong: var(--zb-accent-link);
  --zba-surface: var(--zb-panel-soft);
  --zba-shadow: var(--zb-shadow);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) {
  color-scheme: dark;
  --zb-bg: #061722;
  --zb-panel: #0b2330;
  --zb-panel-soft: #102c3a;
  --zb-text: #f5f8fa;
  --zb-muted: #b9c7d0;
  --zb-line: #385160;
  --zb-accent-link: #7de8e8;
  --zb-accent-soft: #153a43;
  --zb-focus: #f7b731;
  --zb-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  --zb-nav-bg: rgba(3, 16, 25, .96);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] {
  --zb-bg: #020902;
  --zb-panel: #071909;
  --zb-panel-soft: #0b230f;
  --zb-text: #a7f9ad;
  --zb-muted: #77bc80;
  --zb-line: #2f6839;
  --zb-accent: #176c2b;
  --zb-accent-link: #bdffad;
  --zb-accent-bright: #9cff9f;
  --zb-accent-soft: #153b1a;
  --zb-focus: #d5ff8a;
  --zb-shadow: 0 0 0 1px rgba(74, 196, 91, .08), 0 12px 30px rgba(0, 0, 0, .4);
  --zb-nav-bg: rgba(2, 12, 3, .97);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) body {
  color: var(--zb-text);
  background: radial-gradient(850px 500px at 15% -10%, #153f50, transparent 70%),
    radial-gradient(750px 480px at 100% 0%, #12342f, transparent 68%), var(--zb-bg);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.home-surface, .map-surface, .learning-surface, .portal-card, .panel, .card, .zba-panel, .zbc-panel, .game-card, .metric, .stat-card, .purchase-row, .event-row, .community-poll, .poll-choice, .document-card, .empty-state) {
  border-color: var(--zb-line);
  background: var(--zb-panel);
  color: var(--zb-text);
  box-shadow: var(--zb-shadow);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) body:has(.home-surface) .hero {
  border-color: var(--zb-line);
  background: var(--zb-panel);
  color: var(--zb-text);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.pill, .page-version-tag, .event-source-link, .zba-button, .zba-panel button, .zba-link-button, .button-link, .history-tab, .poll-count) {
  border-color: var(--zb-line);
  background: var(--zb-panel-soft);
  color: var(--zb-text);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.zba-button.is-primary, .zba-panel button.is-primary, .zba-link-button.is-primary, .history-tab[aria-selected="true"]) {
  border-color: var(--zb-accent);
  background: var(--zb-accent);
  color: #fff;
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.zba-button.is-danger, .zba-panel button.is-danger) {
  border-color: #b96565;
  background: #3d2026;
  color: #ffb5b5;
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.portal-card p, .portal-kicker, .hero-copy, .footnote, .zba-summary, .zba-note) {
  color: var(--zb-muted);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .portal-card:hover,
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .portal-card:focus-visible {
  border-color: var(--zb-accent-link);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.eyebrow, .status.ok, .portal-arrow, .top-link, .story-body a, .cloud-word, .media-file-link, .document-heading a, .zba-text-link) {
  color: var(--zb-accent-link);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.zba-panel label, .zba-field, .form-grid label, .purchase-row label) {
  color: var(--zb-muted);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.zba-panel input, .form-grid input, .purchase-row input, .poll-comment textarea) {
  border-color: var(--zb-line);
  background: var(--zb-panel-soft);
  color: var(--zb-text);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) :is(.metric, .stat-card, .purchase-row, .event-row, .zba-reset-panel) {
  background: var(--zb-panel-soft);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .portal-card[class*="portal-card--"] {
  background: linear-gradient(155deg, var(--zb-panel-soft), var(--zb-panel));
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .portal-grid.portal-mode {
  background: radial-gradient(circle at 50% 50%, #143b45, var(--zb-bg) 65%);
}

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .progress-warning {
  border-color: #9b7818;
  background: #3c3217;
  color: #ffdf83;
}

/* The same navigation component follows the selected palette. */
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn { border-color: var(--zb-line); background: var(--zb-nav-bg); color: var(--zb-text); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__brand { color: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) :is(.zbn__link, .zbn__account-link, .zbn__menu, .zbn__theme) { color: var(--zb-text); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) :is(.zbn__link, .zbn__account-link, .zbn__menu, .zbn__theme):is(:hover, :focus-visible),
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__link[aria-current="page"] {
  border-color: var(--zb-line);
  background: var(--zb-accent-soft);
  color: var(--zb-accent-link);
}
html[data-zb-theme-page]:not([data-zb-theme="original"]) :is(.zbn__status, .zbn__account-link, .zbn__menu, .zbn__theme) {
  border-color: var(--zb-line);
  background: var(--zb-panel-soft);
}
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__status { color: var(--zb-muted); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__status.is-active { border-color: var(--zb-accent); background: var(--zb-accent-soft); color: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__account-link.is-primary { border-color: var(--zb-accent); background: var(--zb-accent); color: #fff; }
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__account-link.is-primary:is(:hover, :focus-visible) { border-color: var(--zb-accent-link); background: var(--zb-accent-link); color: var(--zb-bg); }
html[data-zb-theme-page]:not([data-zb-theme="original"]) .zbn__theme:focus-visible { outline: 3px solid var(--zb-focus); outline-offset: 2px; }

html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-background,
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) body.zsg-cards-hidden .zsg-background {
  background: radial-gradient(circle at 50% 40%, var(--zb-panel-soft), var(--zb-bg) 75%);
}
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-link { stroke: var(--zb-line); }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-node circle { fill: var(--zb-panel); stroke: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-label { fill: var(--zb-muted); stroke: var(--zb-bg); }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-map-toggle {
  border-color: var(--zb-line);
  background: var(--zb-panel);
  color: var(--zb-text);
}
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .zsg-map-toggle:is(:hover, :focus-visible) {
  border-color: var(--zb-accent-link);
  background: var(--zb-accent-soft);
  color: var(--zb-accent-link);
}

/* About keeps its illustrated layout while both palettes share the same tokens. */
html[data-zb-theme-page]:not([data-zb-theme="original"]) .about-page {
  --bg: var(--zb-bg);
  --panel: var(--zb-panel);
  --text: var(--zb-text);
  --muted: var(--zb-muted);
  --line: var(--zb-line);
  --accent: var(--zb-accent-bright);
  --accent-strong: var(--zb-accent-link);
}
html[data-zb-theme="light"] .about-page { --accent: var(--zb-accent); }
html[data-zb-theme="light"] .about-hero {
  background: radial-gradient(circle at 80% 35%, #d8f4f0, transparent 52%), linear-gradient(105deg, #f4f9fb, #e8f2f5);
}
html[data-zb-theme="light"] .about-sponsors { background: #e8f4f2; }
html[data-zb-theme="light"] .about-featured { background: #e9f2f5; }
html[data-zb-theme="light"] .about-button--primary { color: #fff; }

/* The advertising page uses the shared palette around its deliberately gold sponsor example. */
html[data-zb-theme-page]:not([data-zb-theme="original"]) body:has(.sponsor-card) { color: var(--zb-text); }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) body:has(.sponsor-card) {
  --ink: var(--zb-text);
  --muted: var(--zb-muted);
  --line: var(--zb-line);
}
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .sponsor-card { color: #173151; }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .back { color: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"]):is([data-zb-theme="dark"], [data-zb-theme="retro"]) .placement-link { color: #654100; }

html[data-zb-theme-page]:not([data-zb-theme="original"]) body a:focus-visible,
html[data-zb-theme-page]:not([data-zb-theme="original"]) body button:focus-visible { outline: 3px solid var(--zb-focus); outline-offset: 2px; }

/* Retro uses the same semantic surfaces with a monochrome terminal treatment. */
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] body {
  background: repeating-linear-gradient(180deg, rgba(99, 238, 113, .035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% -25%, #11341a, transparent 65%), var(--zb-bg);
  color: var(--zb-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  text-shadow: 0 0 7px rgba(100, 240, 119, .12);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] :is(.zbn, .zbn__link, .zbn__menu, .zbn__theme, .zbn__status, .zbn__account-link,
  .hero, .home-surface, .map-surface, .learning-surface, .portal-card, .panel, .card, .zba-panel, .zbc-panel,
  .game-card, .metric, .stat-card, .purchase-row, .event-row, .community-poll, .poll-choice, .document-card,
  .about-project-card, .about-sponsors__spot, .sponsor-card, .about-button, .placement-link) {
  border-radius: 2px;
  box-shadow: var(--zb-shadow);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .zbn {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .02em;
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] :is(.zbn__account-link.is-primary, .zba-button.is-primary,
  .zba-panel button.is-primary, .zba-link-button.is-primary, .history-tab[aria-selected="true"],
  .about-button--primary, .placement-link) {
  border-color: var(--zb-accent-link);
  background: var(--zb-accent-link);
  color: var(--zb-bg);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] :is(.about-hero, .about-sponsors, .about-featured) {
  background: linear-gradient(135deg, #031005, #0b2410);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .name-origin {
  border: 1px solid var(--zb-line);
  background: repeating-linear-gradient(0deg, #071909 0 27px, #20562a 28px);
  color: var(--zb-text);
}

html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .name-origin::before { border-color: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .name-origin__doodle { color: var(--zb-accent-link); }
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .about-sponsors__spot,
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .sponsor-card {
  border-color: var(--zb-line);
  background: var(--zb-panel-soft);
  color: var(--zb-text);
}
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] :is(.about-sponsors__label, .about-sponsors__spot a, .sponsor-card .label, .sponsor-card .example) { color: var(--zb-muted); }
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .sponsor-card::after { color: rgba(110, 245, 118, .22); }
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .progress-warning { border-color: var(--zb-line); background: var(--zb-panel-soft); color: var(--zb-text); }
html[data-zb-theme-page]:not([data-zb-theme="original"])[data-zb-theme="retro"] .portal-grid.portal-mode { background: radial-gradient(circle at 50% 50%, #174820, var(--zb-bg) 65%); }