/* Spectral: midnight violet, lavender cinema and turquoise games. */
:root {
  --bg: #0c0b15;
  --surface: #191725;
  --ink: #f3f1fa;
  --muted: #bcb8cc;
  --line: #b79aff33;
  --accent: #65e5e0;
  --header: #0c0b15e6;
  --film-accent: #b79aff;
  --game-accent: #65e5e0;
  --film-deep: #6742c2;
  --game-deep: #007572;
  --violet: var(--film-accent);
  --pink: var(--film-accent);
  --cyan: var(--game-accent);
  --lime: var(--game-accent);
}
:root[data-theme="light"] {
  --bg: #f5f3fa;
  --surface: #eae6f2;
  --ink: #211d30;
  --muted: #5c566d;
  --line: #211d3033;
  --accent: #007572;
  --header: #f5f3faeb;
  --film-accent: #6742c2;
  --game-accent: #007572;
  --violet: var(--film-accent);
  --pink: var(--film-accent);
  --cyan: var(--game-accent);
  --lime: var(--game-accent);
}
:root, :root[data-collection="cinema"] {
  --experience: var(--film-accent);
  --experience-dark: var(--film-deep);
}
:root[data-collection="games"] {
  --experience: var(--game-accent);
  --experience-dark: var(--game-deep);
}
.page-progress { background: linear-gradient(90deg, var(--film-accent), var(--game-accent)); }
.artwork-window { background: #0c0b15; color: #f3f1fa; }
.opening-shade {
  background: linear-gradient(90deg, #0c0b1594, #0c0b1514), linear-gradient(0deg, #0c0b15f2, #0c0b1530 80%);
}
.window-caption h1 > span { color: #f3f1fa; }
.opening-baseline > p { color: #e6e2f0; }
.opening-edition { color: #c3bdd3; }
.opening-frame { border-color: #65e5e066; }
.opening-frame::after { border-color: #b79aff3d; }
.opening-facet { background: linear-gradient(115deg, #65e5e018, transparent 75%); }
.round-link { background: #0c0b1538; border-color: #b79aff73; }
.round-link:hover { background: #b79aff; color: #0c0b15; }
.choice-diamond { border-color: color-mix(in srgb, var(--film-accent) 18%, transparent); }
.choice-diamond::after { border-color: color-mix(in srgb, var(--game-accent) 20%, transparent); }

/* Card imagery retains its colour; the surrounding surfaces use the chosen palette. */
#choose-world .choice-shell { --fx-colour: var(--film-accent); }
#choose-world .games-shell { --fx-colour: var(--game-accent); }
#choose-world .collection-choice {
  --card-accent: var(--film-accent);
  --card-tone: #211a31;
  --card-bottom: #191323;
  --card-ink: #f3f1fa;
  --card-muted: #e8e3f2;
  --card-action-ink: #0c0b15;
  color: var(--card-ink);
  background: var(--card-tone);
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
}
#choose-world .choice-games {
  --card-accent: var(--game-accent);
  --card-tone: #10282b;
  --card-bottom: #0e2025;
}
#choose-world .collection-choice::after {
  background: linear-gradient(0deg, var(--card-tone) 4%, color-mix(in srgb, var(--card-tone) 94%, transparent) 29%, color-mix(in srgb, var(--card-tone) 54%, transparent) 58%, transparent 90%), linear-gradient(90deg, #0c0b1559, transparent 78%);
}
#choose-world .choice-count,
#choose-world .choice-selection { color: var(--card-ink); }
#choose-world .choice-description { color: var(--card-muted); }
#choose-world .choice-check {
  color: var(--card-action-ink);
  border-color: color-mix(in srgb, var(--card-ink) 65%, transparent);
  background: color-mix(in srgb, var(--card-tone) 25%, transparent);
}
#choose-world .collection-choice[aria-pressed="true"] .choice-check {
  background: var(--card-accent);
  border-color: var(--card-accent);
}
#choose-world .collection-choice[aria-pressed="true"] .choice-selection { color: var(--card-accent); }
#choose-world .collection-choice[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--card-accent), 0 18px 45px color-mix(in srgb, var(--card-accent) 20%, transparent);
}
#choose-world .choice-bottomline,
#choose-world .choice-arrow,
#choose-world .collection-choice[aria-pressed="true"] .choice-arrow { color: var(--card-action-ink); }
#choose-world .choice-scan {
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--card-accent) 5%, transparent) 42%, color-mix(in srgb, var(--card-accent) 30%, transparent) 49.8%, transparent 50.3%);
}
#choose-world .choice-games .choice-scan {
  background: linear-gradient(0deg, transparent, color-mix(in srgb, var(--card-accent) 12%, transparent) 48%, color-mix(in srgb, var(--card-accent) 45%, transparent) 50%, transparent 50.5%);
}

[data-theme="light"] #choose-world .collection-choice {
  --card-accent: #b79aff;
  --card-action-bg: var(--film-deep);
  --card-action-ink: #ffffff;
  --fx-colour: var(--card-accent);
}
[data-theme="light"] #choose-world .choice-games {
  --card-accent: #65e5e0;
  --card-action-bg: var(--game-deep);
}
/* Retain the photograph's contrast; only the copy area needs a dark scrim. */
[data-theme="light"] #choose-world .choice-backdrop {
  opacity: 1;
  filter: saturate(1);
}
[data-theme="light"] #choose-world .collection-choice::after {
  background: linear-gradient(0deg, var(--card-tone) 4%, color-mix(in srgb, var(--card-tone) 94%, transparent) 29%, color-mix(in srgb, var(--card-tone) 58%, transparent) 58%, transparent 84%), linear-gradient(180deg, #0c0b1566, transparent 25%);
}
[data-theme="light"] #choose-world .choice-bottomline {
  background: var(--card-action-bg);
}
[data-theme="light"] #choose-world .collection-choice:hover .choice-bottomline {
  background: color-mix(in srgb, var(--card-action-bg) 88%, #0c0b15);
}
[data-theme="light"] #choose-world .collection-choice[aria-pressed="true"] .choice-check {
  color: #0c0b15;
}
[data-theme="light"] #choose-world .choice-vfx { mix-blend-mode: screen; }
[data-theme="light"] #choose-world .choice-aura { color: var(--fx-colour); }
[data-theme="light"] #choose-world .choice-prism i:first-child {
  background: color-mix(in srgb, var(--fx-colour) 17%, transparent);
}
[data-theme="light"] #choose-world .choice-prism i:nth-child(2) {
  border-color: color-mix(in srgb, var(--fx-colour) 55%, transparent);
}

.index-collection,
[data-theme="light"] .index-collection { --catalog-accent: var(--film-accent); }
.index-collection[data-index-collection="games"],
[data-theme="light"] .index-collection[data-index-collection="games"] { --catalog-accent: var(--game-accent); }
