/* Intentionally separate from the shared editor stylesheet. */
html[data-public-theme] {
  color-scheme: light;
  --public-bg: #fbfafc;
  --public-surface: #ffffff;
  --public-soft: #f5f2fa;
  --public-raised: #f8f5fb;
  --public-text: #29263b;
  --public-muted: #71617e;
  --public-accent: #7250ac;
  --public-accent-strong: #5c3c93;
  --public-selected: #ece6f3;
  --public-border: #e4ddeb;
  --public-control-border: #95849f;
  --public-focus: #7950b8;
  --public-button: #7351bb;
  --public-button-text: #ffffff;
  --public-button-hover: #5c3c93;
  --public-star: #88601f;
  --public-play-bg: #ffffffed;
  --public-play-border: #ffffffcc;
  --public-play-ink: #76529a;
  --public-art-bg: #eee8f7;
  --public-video-bg: #ffffff;
  --public-event-bg: linear-gradient(120deg, #f6effc, #f9faf2);
  --public-event-border: #cfb9e6;
  --public-shadow: 0 10px 35px #32203c1c;
  --public-card-shadow: 0 4px 16px #4d326b0c;
  --public-popularity-shadow: none;
  --public-banner: url("world-banner.84852895424d.webp");
  --public-banner-bg: #ece6fb;
  background: var(--public-bg);
}
/* The same palette is also available with JavaScript disabled. */
@media (prefers-color-scheme: dark) {
  html[data-public-theme]:not([data-color-theme]) {
    color-scheme: dark;
    --public-bg: #11131f;
    --public-surface: #1b1e2e;
    --public-soft: #222538;
    --public-raised: #202335;
    --public-text: #f0eef8;
    --public-muted: #b8b5ce;
    --public-accent: #bea6ff;
    --public-accent-strong: #d8c7ff;
    --public-selected: #302a45;
    --public-border: #34364b;
    --public-control-border: #74718d;
    --public-focus: #c6b1ff;
    --public-button: #ad91ef;
    --public-button-text: #1b142d;
    --public-button-hover: #c5adff;
    --public-star: #f0cc7a;
    --public-play-bg: #222235ed;
    --public-play-border: #a68bce;
    --public-play-ink: #f0e7ff;
    --public-art-bg: #272a3c;
    --public-video-bg: #292a3b;
    --public-event-bg: linear-gradient(120deg, #29233b, #1b2230);
    --public-event-border: #66517f;
    --public-shadow: 0 14px 38px #00000050;
    --public-card-shadow: 0 5px 20px #00000030;
    --public-popularity-shadow: drop-shadow(0 2px 7px #a261fc25);
    --public-banner: url("world-banner-night.73c63e5b5541.webp");
    --public-banner-bg: #11131f;
  }
}
html[data-public-theme][data-color-theme="dark"] {
  color-scheme: dark;
  --public-bg: #11131f;
  --public-surface: #1b1e2e;
  --public-soft: #222538;
  --public-raised: #202335;
  --public-text: #f0eef8;
  --public-muted: #b8b5ce;
  --public-accent: #bea6ff;
  --public-accent-strong: #d8c7ff;
  --public-selected: #302a45;
  --public-border: #34364b;
  --public-control-border: #74718d;
  --public-focus: #c6b1ff;
  --public-button: #ad91ef;
  --public-button-text: #1b142d;
  --public-button-hover: #c5adff;
  --public-star: #f0cc7a;
  --public-play-bg: #222235ed;
  --public-play-border: #a68bce;
  --public-play-ink: #f0e7ff;
  --public-art-bg: #272a3c;
  --public-video-bg: #292a3b;
  --public-event-bg: linear-gradient(120deg, #29233b, #1b2230);
  --public-event-border: #66517f;
  --public-shadow: 0 14px 38px #00000050;
  --public-card-shadow: 0 5px 20px #00000030;
  --public-popularity-shadow: drop-shadow(0 2px 7px #a261fc25);
  --public-banner: url("world-banner-night.73c63e5b5541.webp");
  --public-banner-bg: #11131f;
}
/* Reuse semantic colors without modifying the editor's root variables. */
html[data-public-theme] .public-v2 {
  --ink: var(--public-text);
  --muted: var(--public-muted);
  --purple: var(--public-accent);
  --purple-dark: var(--public-accent-strong);
  --line: var(--public-border);
  --canvas: var(--public-bg);
  --white: var(--public-surface);
  color: var(--public-text);
  background: var(--public-bg);
}
html[data-public-theme] ::selection { color: var(--public-text); background: var(--public-selected); }
html[data-public-theme] .skip-link { color: #29263b; }
html[data-public-theme] :is(button, a, input, select):focus-visible { outline-color: var(--public-focus); }
html[data-public-theme] .public-v2 .wordmark { color: var(--public-text); }
html[data-public-theme] .public-v2 .wordmark > span:not(.brand-block) { color: var(--public-accent); }
html[data-public-theme] .public-v2 .wordmark .brand-block { border-color: var(--public-accent); }
html[data-public-theme] .public-v2 .public-nav a { color: var(--public-muted); }
html[data-public-theme] .public-v2 .public-nav a[aria-current="page"] { color: var(--public-accent); }
html[data-public-theme] .public-v2 .public-nav a[aria-current="page"]::after { background: var(--public-accent); }

/* One compact search/control row, shared by the library and event search. */
html[data-public-theme] .public-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; width: 374px; min-width: 0; }
html[data-public-theme] .public-tools .header-search-wrap { flex: 1; width: auto; margin: 0; min-width: 0; }
html[data-public-theme] .public-v2 .header-search { min-width: 0; background: var(--public-surface); border-color: var(--public-control-border); }
html[data-public-theme] .header-search input { color: var(--public-text); }
html[data-public-theme] .header-search input::placeholder { color: var(--public-muted); opacity: 1; }
html[data-public-theme] .header-search button { color: var(--public-muted); }
html[data-public-theme] .search-dropdown { background: var(--public-surface); border-color: var(--public-border); box-shadow: var(--public-shadow); }
html[data-public-theme] .search-option:is(:hover, [aria-selected="true"]) { background: var(--public-selected); }
html[data-public-theme] :is(.search-option img, .search-image-placeholder) { background: var(--public-art-bg); }
html[data-public-theme] :is(.search-option small, .search-status:not(.sr-only)) { color: var(--public-muted); }
.theme-picker { display: none; position: relative; flex: 0 0 44px; z-index: 21; }
html[data-public-theme][data-theme-mode] .theme-picker { display: block; }
.theme-trigger { width: 44px; height: 44px; border: 1px solid transparent; border-radius: 10px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--public-muted); }
.theme-trigger span { display: grid; place-items: center; }
.theme-trigger .icon { width: 19px; height: 19px; }
.theme-trigger:is(:hover, [aria-expanded="true"]) { color: var(--public-accent); background: var(--public-soft); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 7px); width: 212px; max-width: calc(100vw - 36px); padding: 5px; background: var(--public-surface); color: var(--public-text); border: 1px solid var(--public-border); border-radius: 12px; box-shadow: var(--public-shadow); }
.theme-menu button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; min-height: 44px; padding: 10px 12px; background: transparent; color: var(--public-text); border: 0; border-radius: 7px; text-align: left; font-size: 13px; }
.theme-menu button small { display: block; color: var(--public-muted); font-size: 11px; margin-top: 1px; }
.theme-menu button:is(:hover, :focus-visible) { background: var(--public-soft); outline-offset: -2px; }
.theme-menu button[aria-checked="true"] { color: var(--public-accent); background: var(--public-selected); }
.theme-check { visibility: hidden; width: 17px !important; height: 17px !important; }
[aria-checked="true"] .theme-check { visibility: visible; }

/* A decorative CSS image fetches only the banner selected before first paint. */
html[data-public-theme] .world-banner { background-color: var(--public-banner-bg); background-image: var(--public-banner); background-size: cover; background-position: center 62%; border-color: var(--public-border); }
html[data-public-theme] :is(.catalog-filters, .filter-bottom, .mode-line) { border-color: var(--public-border); }
html[data-public-theme] .filter-options { scrollbar-color: var(--public-control-border) transparent; }
html[data-public-theme] .filter-label { color: var(--public-muted); }
html[data-public-theme] .filter-chip { background: var(--public-soft); color: var(--public-muted); }
html[data-public-theme] .filter-chip:hover { background: var(--public-selected); color: var(--public-text); }
html[data-public-theme] .filter-chip[aria-current="true"] { color: var(--public-accent); background: var(--public-selected); border-color: var(--public-border); }
html[data-public-theme] .creator-chip { background: transparent; }
html[data-public-theme] :is(.active-filter-note, .library-empty) { color: var(--public-muted); }
html[data-public-theme] .home-section-heading :is(h1 > span, h2 span) { color: var(--public-muted); }
html[data-public-theme] .home-section-heading h2 a:hover { color: var(--public-accent); }
html[data-public-theme] :is(.home-game-card, .home-video-card) { background: var(--public-surface); border-color: var(--public-border); }
html[data-public-theme] :is(.home-game-card, .home-video-card):hover { border-color: var(--public-accent); box-shadow: var(--public-card-shadow); }
html[data-public-theme] :is(.home-game-cover, .cover-placeholder) { background: var(--public-art-bg); color: var(--public-muted); }
html[data-public-theme] .home-video-artwork { background: var(--public-video-bg); }
html[data-public-theme] :is(.home-game-copy p, .home-video-copy p) { color: var(--public-muted); }
html[data-public-theme] .play-overlay { background: var(--public-play-bg); border-color: var(--public-play-border); color: var(--public-play-ink); }
html[data-public-theme] .home-video-card:focus-visible .play-overlay { background: var(--public-button); color: var(--public-button-text); }
@media (hover: hover) and (pointer: fine) {
  html[data-public-theme] .home-video-card:hover .play-overlay { background: var(--public-button); color: var(--public-button-text); }
}
html[data-public-theme] .game-score { background: var(--public-selected); color: var(--public-accent); }
html[data-public-theme] .game-score > span:first-child { color: var(--public-star); }
html[data-public-theme] .game-score small { color: var(--public-muted); }
html[data-public-theme] :is(.popularity-label, .popularity-bolts) { color: var(--public-muted); }
html[data-public-theme] .popularity-art { filter: var(--public-popularity-shadow); }
html[data-public-theme] .public-v2 .public-footer strong { color: var(--public-muted); border-color: var(--public-border); }

/* Game pages, galleries and linked creators. */
html[data-public-theme] .detail-breadcrumb { color: var(--public-muted); }
html[data-public-theme] .detail-breadcrumb a { color: var(--public-accent); }
html[data-public-theme] :is(.detail-summary > p, .rich-text, .section-description, .game-facts dt, .game-data-note, .carousel-controls, .carousel-rotation) { color: var(--public-muted); }
html[data-public-theme] .tag { background: var(--public-soft); color: var(--public-muted); border-color: var(--public-border); }
html[data-public-theme] .tag:hover { color: var(--public-accent); background: var(--public-selected); }
html[data-public-theme] .button-primary { background: var(--public-button); color: var(--public-button-text); box-shadow: none; }
html[data-public-theme] .button-primary:hover { background: var(--public-button-hover); }
html[data-public-theme] .button-outline { background: var(--public-surface); color: var(--public-accent); border-color: var(--public-control-border); }
html[data-public-theme] .button-outline:hover { background: var(--public-selected); }
html[data-public-theme] .carousel-stage { background: var(--public-art-bg); }
html[data-public-theme] .carousel-slide figcaption { background: var(--public-raised); color: var(--public-muted); }
html[data-public-theme] .carousel-thumbs [aria-pressed="true"] { background: var(--public-selected); border-color: var(--public-accent); }
html[data-public-theme] .game-creators-table { background: var(--public-surface); }
html[data-public-theme] .game-creators-table thead th { background: var(--public-raised); color: var(--public-muted); }
html[data-public-theme] :is(.public-film-byline, .film-person-role, .public-film-description, .public-film-guests, .public-film-games h2) { color: var(--public-muted); }
html[data-public-theme] .public-film-byline a { color: var(--public-accent); }
html[data-public-theme] .film-game-link { background: var(--public-surface); border-color: var(--public-border); }
html[data-public-theme] .film-game-link:hover { border-color: var(--public-accent); color: var(--public-accent); }
html[data-public-theme] :is(.public-creator-heading p, .public-creator-description) { color: var(--public-muted); }
html[data-public-theme] .pagination { color: var(--public-muted); }
html[data-public-theme] .pagination a { background: var(--public-surface); border-color: var(--public-control-border); color: var(--public-accent); }

/* Event listings, detail cards and the compact home countdown. */
html[data-public-theme] :is(.events-heading p, .events-heading h1 > span, .event-periods a, .event-search-note, .event-kind, .event-date, .event-description, .countdown-clock small, .game-card-event-heading, .game-card-event-status, .game-card-event-clock small) { color: var(--public-muted); }
html[data-public-theme] .event-periods a:is(:hover, [aria-current="page"]) { background: var(--public-selected); color: var(--public-accent); border-color: var(--public-border); }
html[data-public-theme] .game-event { background: var(--public-event-bg); border-color: var(--public-border); }
html[data-public-theme] .directory-event { background: var(--public-surface); }
html[data-public-theme] :is(.countdown-status, .event-game, .event-search-note a, .game-card-event-kind, .game-card-event-clock b) { color: var(--public-accent); }
html[data-public-theme] .event-game { border-color: var(--public-border); }
html[data-public-theme] .event-game-placeholder { background: var(--public-art-bg); }
html[data-public-theme] .events-empty { color: var(--public-muted); border-color: var(--public-border); }
html[data-public-theme] :is(.countdown-clock > span, .game-card-event-clock > span) { background: var(--public-raised); border-color: var(--public-border); }
html[data-public-theme] .home-game-card--event { border-color: var(--public-event-border); }
html[data-public-theme] .game-card-event { background: var(--public-event-bg); border-color: var(--public-border); }
html[data-public-theme] .game-card-event-title { color: var(--public-text); }

@media (max-width: 1000px) {
  html[data-public-theme] .public-tools { width: 304px; }
}
@media (max-width: 700px) {
  html[data-public-theme] .public-tools { width: 100%; flex: 1 0 100%; margin-top: 10px; gap: 8px; }
  html[data-public-theme] .public-tools .header-search-wrap { flex: 1; width: auto; margin: 0; }
  html[data-public-theme] .public-header { padding-bottom: 8px; }
  html[data-public-theme] .world-banner { background-position: center 64%; }
}