/* Site-owned seasonal appearance. Change the artwork here for the next season.
   Shared by every route, the installed app and the offline page. */
html:root {
  color-scheme: dark;
  --ks-season-art: url('/assets/profile-themes/haunted-legacy-landscape.webp');
  --ks-season-position: center center;
  --ks-season-shade: linear-gradient(90deg, rgba(4, 5, 8, .83), rgba(4, 5, 8, .47) 56%, rgba(4, 5, 8, .27));
  --ks-season-panel: rgba(12, 12, 15, .9);
  --ks-season-panel-raised: rgba(25, 20, 23, .96);
  --color-background: #08090b;
}

html:root body {
  isolation: isolate;
  background: #08090b;
}

html:root body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--ks-season-shade), var(--ks-season-art);
  background-position: center, var(--ks-season-position);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Clear full-page shells; forms, games and reading panels keep their surfaces. */
html:root body #root :is(.tl-public-shell, .tl-mobile-app.ks-mobile-identity, .tl-maintenance, .tl-system-interruption, .legacy-trivia-page, .tl-cinema) {
  background: transparent;
}

html:root body #root .tl-public-shell.ks-public-identity {
  --ks-site-bg: #08090b;
  --ks-site-surface: var(--ks-season-panel);
  --ks-site-surface-raised: var(--ks-season-panel-raised);
  --ks-site-muted: #c7c5c7;
}

html:root body #root .tl-public-status-strip,
html:root body #root .tl-public-header,
html:root body #root .tl-public-footer {
  background: rgba(8, 9, 11, .92);
}

html:root body #root .tl-public-hero__copy {
  text-shadow: 0 2px 16px #000;
}

html:root body #root .tl-public-hero__body { color: #d1cdd0; }

html:root body #root .tl-prize-fund-shell__header,
html:root body #root .tl-prize-fund-shell__footer {
  background: var(--ks-season-panel);
}

/* Loading and exceptional states inherit the same site backdrop. */
html:root body #root .tl-launch {
  background: radial-gradient(ellipse at 50% 45%, rgba(200, 16, 46, .1), rgba(0, 0, 0, .75));
}

html:root body #root .tl-maintenance__panel { border-top-color: #c8102e; }
html:root body #root .tl-system-interruption__panel { border-color: #ffffff30; border-left-color: #c8102e; }
html:root body #root :is(.tl-maintenance__signal, .tl-system-interruption__signal) { color: #f3f3f3; }
html:root body #root .tl-system-interruption__action:is(:hover, :focus-visible) { border-color: #fff; color: #fff; }
html:root body #root :is(.tl-maintenance__action--primary, .tl-system-interruption__action--primary) {
  border-color: #b30725;
  color: #fff;
  background: #b30725;
}
html:root body #root :is(.tl-maintenance__action--primary, .tl-system-interruption__action--primary):is(:hover, :focus-visible) {
  border-color: #c8102e;
  color: #fff;
  background: #c8102e;
}

html:root.tl-mobile-mode {
  --ks-season-art: url('/assets/profile-themes/haunted-legacy-portrait.webp');
  --ks-season-position: center top;
  --ks-season-shade: linear-gradient(180deg, rgba(4, 5, 8, .34), rgba(4, 5, 8, .58) 42%, rgba(4, 5, 8, .72));
  background: #08090b;
}

html:root.tl-mobile-mode body #root .tl-mobile-app.ks-mobile-identity {
  --app-surface: var(--ks-season-panel);
  --app-raised: var(--ks-season-panel-raised);
  --app-muted: #c7c5c7;
}

html:root.tl-mobile-mode body #root .tl-app-header,
html:root.tl-mobile-mode body #root .tl-app-bottom {
  background: rgba(8, 9, 11, .94);
}

html:root.tl-mobile-mode body #root .tl-app-welcome {
  text-shadow: 0 2px 14px #000;
}

@media (max-width: 900px) {
  html:root {
    --ks-season-art: url('/assets/profile-themes/haunted-legacy-portrait.webp');
    --ks-season-position: center top;
    --ks-season-shade: linear-gradient(180deg, rgba(4, 5, 8, .34), rgba(4, 5, 8, .58) 42%, rgba(4, 5, 8, .72));
  }
}

@media print {
  html:root body::before { display: none; }
}