:root {
  --theme-font-ui: 'Inter', sans-serif;
  --theme-gold: #c9a84c;
  --theme-gold-light: #f5e6a3;
  --theme-blood: #c41e1e;
  --theme-blood-glow: #ff2a2a;
  --theme-page-width: min(1600px, calc(100vw - 54px));
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 26, 26, .25) var(--dark, #050508);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: var(--dark, #050508);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(139, 26, 26, .25);
  border-radius: 3px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 30, 30, .4);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: var(--dark, #050508);
}

:where(
  button,
  [type="button"],
  [type="submit"],
  [role="button"],
  .btn,
  .pacto-btn,
  .site-connect,
  .collection-guest-action,
  .unlock-action,
  .filter-btn,
  .page-btn,
  .tab,
  .mode-card,
  .auth-dropdown a,
  .auth-dropdown button,
  .gallery-tools button,
  .gate-button
) {
  font-family: var(--theme-font-ui) !important;
}

.tv-page .hero .kicker,
.tv-watch .prelude .kicker {
  color: var(--theme-gold-light) !important;
  text-shadow:
    0 0 16px rgba(201, 168, 76, .32),
    0 0 34px rgba(196, 30, 30, .12);
}

.tv-page .hero .kicker::before,
.tv-page .hero .kicker::after,
.tv-watch .prelude .kicker::before {
  box-shadow: 0 0 12px rgba(196, 30, 30, .32);
}

.site-topbar {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 96%), rgb(8 8 12 / 75%)) !important;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, .38),
    0 1px 0 rgba(255, 255, 255, .035),
    0 0 44px rgba(139, 26, 26, .12) !important;
}

.site-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 8, .72), rgba(5, 5, 8, 0));
}

:where(
  .tv-page .wrap,
  .tv-page .mode-panel,
  .tv-page .featured,
  .tv-page .archive,
  .tv-watch .wrap,
  .tv-watch .prelude,
  .tv-watch .hero,
  .tv-watch .player-card,
  .tv-watch .related,
  .characters-page .wrap,
  .characters-page .hero,
  .characters-page .section-head,
  .characters-page .featured-row,
  .characters-page .grid,
  .characters-page .empty,
  .collection-page .wrap,
  .collection-page .hero,
  .collection-page .stats,
  .collection-page .collection-tools,
  .collection-page .tabs,
  .collection-page .collection-wing,
  .wall-hero,
  .archive-list,
  .page > .wrap,
  .band-inner,
  .lore-page .wrap,
  .lore-page .hero,
  .lore-page .gateway,
  .lore-page .power-archive,
  .lore-page .section-head,
  .lore-page .grid,
  .contact-page .contact-wrap,
  .legal-page .legal-wrap,
  .blood-page .blood-wrap,
  .page .hero-inner,
  .community-page .community-shell,
  .community-page .community-container,
  .community-page .forum-shell,
  .community-page .thread-shell,
  .community-page .sublegion-shell,
  .community-page .results-shell,
  .sublegion-trend-panel .panel-heading,
  .sublegion-trend-grid,
  .sublegion-trend-legend
) {
  width: var(--theme-page-width) !important;
  max-width: var(--theme-page-width) !important;
}

@media (max-width: 900px) {
  :root { --theme-page-width: min(1510px, calc(100vw - 24px)); }
}

@media (max-width: 560px) {
  :root { --theme-page-width: min(1510px, calc(100vw - 26px)); }
}