/* Madboys V123 — site-wide Dark Dungeon theme
   The homepage is the visual source of truth. This file extends that system to
   every static route, popup, sitemap page and comparison page. */

:root {
  color-scheme: dark;
  --dd-bg: #05070d;
  --dd-bg-soft: #080c15;
  --dd-surface: #0d1422;
  --dd-surface-2: #131c2c;
  --dd-surface-3: #182338;
  --dd-border: rgba(132, 154, 193, 0.34);
  --dd-border-strong: rgba(174, 195, 228, 0.52);
  --dd-text: #f1f4f9;
  --dd-muted: #b8c2d4;
  --dd-subtle: #8f9db5;
  --dd-gold: #dfb75e;
  --dd-gold-soft: #9d7131;
  --dd-blue: #82a9e8;
  --dd-violet: #a887ea;
  --dd-red: #ea7b78;
  --dd-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --dd-panel: linear-gradient(180deg, rgba(20, 29, 46, 0.97), rgba(8, 12, 21, 0.985));
  --db-surface: #101e31;
  --db-surface-2: #162a43;
  --db-surface-3: #1b3553;
  --db-border: rgba(79, 121, 163, 0.58);
  --db-border-hot: rgba(112, 161, 210, 0.72);
  --db-text: #edf3f9;
  --db-muted: #b8c8da;
  --db-blue: #6d9bc9;
  --db-panel: linear-gradient(180deg, rgba(23, 43, 68, 0.97), rgba(11, 23, 39, 0.985));
}

html,
body.madboys-site,
body.comparison-page {
  background: var(--dd-bg);
}

body.madboys-site {
  color: var(--dd-text);
  background:
    radial-gradient(circle at 50% -18%, rgba(59, 88, 139, 0.22), transparent 42%),
    linear-gradient(180deg, #080d18 0%, var(--dd-bg) 38%, #04060b 100%);
}

body.madboys-site a:focus-visible,
body.comparison-page a:focus-visible,
body.madboys-site button:focus-visible,
body.comparison-page button:focus-visible,
body.madboys-site input:focus-visible,
body.madboys-site textarea:focus-visible {
  outline: 3px solid var(--dd-gold);
  outline-offset: 3px;
}

/* Shared header and route shell */
body.site-final .static-topbar {
  color: var(--dd-text);
  background: rgba(7, 11, 19, 0.94);
  border-bottom-color: var(--dd-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

body.site-final .static-brand {
  color: var(--dd-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

body.site-final .static-brand small {
  color: var(--dd-gold);
}

body.site-final .static-topbar nav a {
  color: #dbe3f0;
  background: linear-gradient(180deg, rgba(26, 37, 57, 0.98), rgba(12, 18, 30, 0.98));
  border: 1px solid var(--dd-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

body.site-final .static-topbar nav a:hover {
  color: #fff8e5;
  border-color: rgba(223, 183, 94, 0.62);
  background: linear-gradient(180deg, #26344c, #131c2c);
}

body.site-final .static-page-shell {
  color: var(--dd-text);
}

body.site-final .static-landing-slice,
body.site-final.static-feature-page:not(.static-contact-page) .static-landing-slice > .screen {
  border-color: var(--dd-border);
  box-shadow: var(--dd-shadow);
}

body.site-final .static-more-links,
body.site-final .static-readable-card,
body.site-final .static-article-hero,
body.site-final.static-contact-page .contact-hero-card,
body.site-final .contact-form,
body.site-final .privacy-doc,
body.site-final.explore-page .explore-lang {
  color: var(--dd-text);
  background: var(--dd-panel);
  border: 1px solid var(--dd-border);
  box-shadow: var(--dd-shadow);
}

body.site-final .static-more-links h1,
body.site-final .static-more-links h2,
body.site-final .static-readable-card h1,
body.site-final .static-readable-card h2,
body.site-final .static-article-hero h1,
body.site-final .static-article-hero h2,
body.site-final.static-contact-page .contact-hero-card h1,
body.site-final .privacy-doc h1,
body.site-final .privacy-doc h2,
body.site-final .privacy-doc h3,
body.site-final.explore-page .explore-lang h2 {
  color: var(--dd-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
}

body.site-final .static-readable-card p,
body.site-final .static-readable-card li,
body.site-final .static-article-hero p,
body.site-final.static-contact-page .contact-hero-card p,
body.site-final .privacy-doc p,
body.site-final .privacy-doc li,
body.site-final .contact-note {
  color: var(--dd-muted);
}

body.site-final .static-kicker {
  color: var(--dd-gold);
}

body.site-final .static-more-links a,
body.site-final .static-readable-card a {
  color: #dbe7f8;
  background: linear-gradient(180deg, rgba(26, 38, 59, 0.98), rgba(12, 18, 30, 0.99));
  border: 1px solid var(--dd-border);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

body.site-final .static-more-links a:hover,
body.site-final .static-readable-card a:hover {
  color: #fff7df;
  border-color: rgba(223, 183, 94, 0.58);
  background: linear-gradient(180deg, #263650, #141e31);
}

body.site-final .static-cta {
  color: #101828;
  background: linear-gradient(180deg, #f0cf74, #c99334 58%, #936020);
  border-color: rgba(255, 224, 145, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 10px 24px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Popups on the homepage and their static deep-link pages */
body.site-final .usp-modal,
body.site-final .lazy-popup,
body.site-final .region-modal,
body.site-final .gift-modal,
body.site-final .menu {
  background: rgba(1, 3, 8, 0.88);
}

body.site-final .static-popup-card,
body.site-final .usp-panel,
body.site-final .lazy-popup .usp-panel,
body.site-final .region-panel,
body.site-final .gift-panel,
body.site-final .menu-panel {
  color: var(--dd-text);
  background: linear-gradient(180deg, #111827 0%, #070b13 68%, #05070d 100%);
  border-color: var(--dd-border-strong);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.site-final .usp-panel::before {
  opacity: 0.92;
  filter: saturate(1.12) brightness(0.92) contrast(1.03);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.62) 66%, rgba(0, 0, 0, 0.22) 76%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.62) 66%, rgba(0, 0, 0, 0.22) 76%, transparent 86%);
}

body.site-final .usp-panel::after {
  background:
    linear-gradient(150deg, rgba(5, 8, 15, 0.01) 0%, rgba(5, 8, 15, 0.04) 34%, rgba(5, 8, 15, 0.18) 52%, rgba(5, 8, 15, 0.52) 66%, rgba(5, 8, 15, 0.88) 78%, #05070d 92%),
    linear-gradient(180deg, transparent 0%, transparent 44%, rgba(5, 8, 15, 0.16) 51%, rgba(5, 8, 15, 0.54) 60%, rgba(5, 8, 15, 0.88) 69%, #05070d 79%, #05070d 100%);
}

body.site-final .usp-panel .popup-hero::before,
body.site-final .lazy-popup .popup-hero::before,
body.site-final .static-popup-page .popup-hero::before {
  background: linear-gradient(180deg, rgba(3, 6, 12, 0), rgba(4, 7, 14, 0.18));
}

body.site-final .usp-panel .popup-hero::after,
body.site-final .lazy-popup .popup-hero::after,
body.site-final .static-popup-page .popup-hero::after,
body.site-final .region-modal .popup-hero::after {
  inset: 0 0 -2px;
  height: auto;
  background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(7, 11, 19, 0.12) 52%, rgba(7, 11, 19, 0.46) 67%, rgba(7, 11, 19, 0.82) 82%, #070b13 100%) !important;
}

body.site-final .usp-panel .usp-scroll,
body.site-final .lazy-popup .usp-scroll,
body.site-final.static-popup-page .usp-scroll {
  color: var(--dd-text);
  background: transparent;
}

body.site-final .usp-panel .usp-header,
body.site-final .lazy-popup .usp-header,
body.site-final.static-popup-page .usp-header,
body.site-final .region-copy {
  color: var(--dd-text);
  background: linear-gradient(180deg, rgba(25, 35, 54, 0.92), rgba(10, 15, 25, 0.95));
  border-color: var(--dd-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.site-final .usp-header h1,
body.site-final .usp-header h2,
body.site-final .usp-header h3,
body.site-final .region-copy h2,
body.site-final .gift-panel h2,
body.site-final .menu-panel h2 {
  color: var(--dd-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

body.site-final .usp-kicker,
body.site-final .usp-kicker span,
body.site-final .usp-gold-line,
body.site-final .usp-bottom-line .hl-gold {
  color: var(--dd-gold);
}

body.site-final .usp-hook {
  color: #e8edf6;
}

body.site-final .usp-intro,
body.site-final .usp-header p,
body.site-final .region-copy p,
body.site-final .region-copy small {
  color: var(--dd-muted);
}

body.site-final .usp-panel article,
body.site-final .usp-panel .usp-visual-box,
body.site-final .usp-panel .hero-carousel,
body.site-final .usp-panel .hero-profile,
body.site-final .usp-panel .hero-card,
body.site-final .usp-panel .hero-copy-card,
body.site-final .usp-panel .hero-slide-counter,
body.site-final .usp-panel .hero-carousel-topnote,
body.site-final .usp-panel .hero-info-card,
body.site-final .usp-panel .usp-note,
body.site-final .usp-panel .usp-visual-placeholder,
body.site-final .usp-panel .usp-key-grid article,
body.site-final .usp-panel .usp-rich-card,
body.site-final .usp-panel .usp-example-box,
body.site-final .usp-panel .usp-chain-box,
body.site-final .usp-panel .usp-experiment-box,
body.site-final .usp-panel .usp-memory-box,
body.site-final .usp-panel .ritual-ending-card,
body.site-final .usp-panel .jackpot-power-state,
body.site-final .usp-panel .jackpot-loop-card,
body.site-final .usp-panel .jackpot-rule-card,
body.site-final .usp-panel .jackpot-combo-card,
body.site-final .usp-panel .jackpot-stage-card,
body.site-final .usp-panel .usp-stage-note,
body.site-final .usp-panel .usp-summary,
body.site-final .usp-panel .usp-callout,
body.site-final .usp-panel .usp-quote,
body.site-final .usp-panel .usp-fact,
body.site-final .usp-panel .usp-grid article,
body.site-final .gift-grid article,
body.site-final .ritual-beyond-card {
  color: var(--dd-text);
  background: var(--dd-panel);
  border-color: var(--dd-border);
  box-shadow: var(--dd-shadow);
}

/* Deep navy surfaces for content that was still inheriting the light theme. */
body.site-final .usp-panel--ai-stories .ai-memory-box .ai-memory-grid article,
body.site-final .usp-panel .usp-example-box article,
body.site-final .usp-panel .usp-memory-box article {
  color: #edf3fb !important;
  background: linear-gradient(180deg, #172b48 0%, #0b1729 100%) !important;
  border: 1px solid rgba(103, 151, 210, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

body.site-final .usp-panel--ai-stories .ai-memory-box .ai-memory-grid article :is(h3, h4, strong, b),
body.site-final .usp-panel .usp-example-box article :is(h3, h4, strong, b),
body.site-final .usp-panel .usp-memory-box article :is(h3, h4, strong, b) {
  color: #fff8e9 !important;
}

body.site-final .usp-panel--ai-stories .ai-memory-box .ai-memory-grid article :is(p, li, small),
body.site-final .usp-panel .usp-example-box article :is(p, li, small),
body.site-final .usp-panel .usp-memory-box article :is(p, li, small) {
  color: #c7d2e3 !important;
}

/* Reward labels: dark, readable and subtly varied by rarity. */
body.site-final .reward-grid b,
body.site-final .gift-grid small {
  color: #eee5ff !important;
  background: linear-gradient(180deg, #3c2c64 0%, #201735 100%) !important;
  border: 1px solid rgba(173, 141, 226, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 12px rgba(0, 0, 0, 0.28) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86) !important;
}

body.site-final .reward-grid article:nth-child(2) b,
body.site-final .gift-grid article:nth-child(2) small,
body.site-final .reward-grid article:nth-child(4) b,
body.site-final .gift-grid article:nth-child(4) small {
  color: #dceaff !important;
  background: linear-gradient(180deg, #284a78 0%, #142741 100%) !important;
  border-color: rgba(113, 168, 231, 0.62) !important;
}

body.site-final .reward-grid article:nth-child(3) b,
body.site-final .gift-grid article:nth-child(3) small {
  color: #ffe7a8 !important;
  background: linear-gradient(180deg, #514124 0%, #2b2111 100%) !important;
  border-color: rgba(220, 177, 83, 0.58) !important;
}

/* Dotabuff-like accordions on Rewards and other FAQ sections. */
body.site-final .faq-list,
body.site-final section.rewards .faq-list,
body.site-final .static-slice-screen .faq-list {
  color: #eaf1fa !important;
  background: linear-gradient(180deg, #0d1b2f 0%, #07111e 100%) !important;
  border-color: rgba(91, 139, 198, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 16px 34px rgba(0, 0, 0, 0.4) !important;
}

body.site-final .faq-list details,
body.site-final section.rewards .faq-list details,
body.site-final .static-slice-screen .faq-list details {
  color: #eaf1fa !important;
  background: linear-gradient(180deg, #142640 0%, #0b1729 100%) !important;
  border: 1px solid rgba(86, 132, 189, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body.site-final .faq-list details[open],
body.site-final section.rewards .faq-list details[open],
body.site-final .static-slice-screen .faq-list details[open] {
  background: linear-gradient(180deg, #193353 0%, #0d1c31 100%) !important;
  border-color: rgba(111, 164, 228, 0.64) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

body.site-final .faq-list summary,
body.site-final section.rewards .faq-list summary,
body.site-final .static-slice-screen .faq-list summary {
  color: #f5f7fb !important;
  background: transparent !important;
}

body.site-final .faq-list details[open] summary,
body.site-final section.rewards .faq-list details[open] summary,
body.site-final .static-slice-screen .faq-list details[open] summary {
  color: #fff !important;
  border-bottom-color: rgba(122, 169, 226, 0.3) !important;
}

body.site-final .faq-list p,
body.site-final section.rewards .faq-list p,
body.site-final .static-slice-screen .faq-list p {
  color: #c8d4e5 !important;
  background: linear-gradient(180deg, rgba(16, 35, 59, 0.96), rgba(10, 23, 40, 0.98)) !important;
}

body.site-final .usp-panel :is(h1, h2, h3, h4, h5, strong, b),
body.site-final .gift-panel :is(h1, h2, h3, h4, strong, b),
body.site-final .region-panel :is(h1, h2, h3, h4, strong, b) {
  color: var(--dd-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.76);
}

body.site-final .usp-panel :is(p, li, small),
body.site-final .gift-panel :is(p, li, small),
body.site-final .region-panel :is(p, li, small) {
  color: var(--dd-muted);
}

body.site-final .hero-thumb {
  color: #d7dfec;
  background: linear-gradient(180deg, #1a2538, #0c1320);
  border-color: var(--dd-border);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}

body.site-final .hero-thumb:hover {
  color: #fff;
  border-color: rgba(130, 169, 232, 0.62);
  background: linear-gradient(180deg, #243653, #121d30);
}

body.site-final .hero-thumb.is-active {
  color: #fff8e7;
  background: linear-gradient(180deg, #365888, #1c355d);
  border-color: rgba(157, 191, 240, 0.72);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.site-final .hero-class {
  color: #17110a;
  background: linear-gradient(180deg, #efd37f, #bd8739);
  border-color: rgba(255, 229, 157, 0.58);
}

body.site-final .hero-carousel-topnote span,
body.site-final .hero-slide-counter span {
  color: var(--dd-gold);
}

body.site-final .hero-carousel-topnote small,
body.site-final .hero-slide-counter small {
  color: var(--dd-muted);
}

body.site-final .usp-bottom-line {
  color: #dde4ef;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.88);
}

body.site-final .usp-close,
body.site-final .region-close,
body.site-final .gift-close,
body.site-final .menu-close {
  color: #f8f3e8;
  background: linear-gradient(180deg, #6f57a8, #43306f);
  border-color: rgba(205, 188, 239, 0.58);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.44);
}

body.site-final .menu-panel nav a,
body.site-final .menu-panel nav a.privacy {
  color: #dce5f2;
  background: linear-gradient(180deg, #1a2538, #0c131f);
  border-color: var(--dd-border);
}

body.site-final .menu-panel nav a:hover {
  color: #fff7df;
  border-color: rgba(223, 183, 94, 0.58);
}

/* Contact, privacy, success and sitemap/explore pages */
body.site-final.static-contact-page .contact-form label {
  color: #e4eaf3;
}

body.site-final .contact-form input,
body.site-final .contact-form textarea {
  color: var(--dd-text);
  background: #080d17;
  border-color: var(--dd-border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.32);
}

body.site-final .contact-form input::placeholder,
body.site-final .contact-form textarea::placeholder {
  color: #7f8da5;
  opacity: 1;
}

body.site-final .contact-form input:focus,
body.site-final .contact-form textarea:focus {
  border-color: rgba(130, 169, 232, 0.72);
  background: #0b1220;
}

body.site-final .contact-form button {
  color: #101621;
  background: linear-gradient(180deg, #efd174, #bd8737);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 10px 20px rgba(0, 0, 0, 0.34);
}

body.site-final.privacy-page {
  color: var(--dd-text);
  background:
    radial-gradient(circle at 50% -10%, rgba(76, 103, 154, 0.22), transparent 40%),
    var(--dd-bg);
}

body.site-final .privacy-doc a {
  color: var(--dd-blue);
}

body.site-final.explore-page .explore-lang {
  padding: 20px;
}

body.site-final.explore-page .explore-link-grid a,
body.site-final.explore-page .explore-link-grid a.explore-main-link,
body.site-final.explore-page .explore-link-grid a.explore-popup-link,
body.site-final.explore-page .explore-link-grid a.explore-other-link,
body.site-final.explore-page .explore-link-grid a.explore-similar-link {
  color: #dce5f2;
  background: linear-gradient(180deg, #1b273b, #0d1422);
  border-color: var(--dd-border);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.26);
}

body.site-final.explore-page .explore-link-grid a.explore-main-link {
  border-color: rgba(111, 151, 214, 0.48);
}

body.site-final.explore-page .explore-link-grid a.explore-popup-link {
  color: #eadffc;
  border-color: rgba(168, 135, 234, 0.48);
  background: linear-gradient(180deg, #251d38, #100d1b);
}

body.site-final.explore-page .explore-link-grid a.explore-other-link {
  color: #c8d3e3;
  border-color: rgba(143, 157, 180, 0.34);
}

body.site-final.explore-page .explore-link-grid a.explore-similar-link {
  color: #f0d99b;
  border-color: rgba(223, 183, 94, 0.5);
  background: linear-gradient(180deg, #2b2418, #151109);
}

/* Dotabuff layer: selective cold-blue information surfaces over Dark Dungeon. */
body.site-final :is(
  .home-cards,
  .mission-cards,
  .bonus-cards,
  .expansion-cards,
  .blood-cards
) .feature-card,
body.site-final .item-card,
body.site-final .ruler-cards article,
body.site-final .process-row article,
body.site-final .ability-row article,
body.site-final .journey-step {
  --db-marker: #5f8fc3;
  color: var(--db-text) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(83, 132, 184, 0.13), transparent 42%),
    var(--db-panel) !important;
  border-color: var(--db-border) !important;
  box-shadow:
    inset 3px 0 0 var(--db-marker),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.34) !important;
}

body.site-final :is(
  .home-cards,
  .mission-cards,
  .bonus-cards,
  .expansion-cards,
  .blood-cards
) .feature-card:nth-child(2),
body.site-final .ruler-cards article:nth-child(2),
body.site-final .process-row article:nth-of-type(2),
body.site-final .ability-row article:nth-child(2),
body.site-final .journey-step:nth-of-type(2) {
  --db-marker: #866eb7;
}

body.site-final :is(
  .home-cards,
  .mission-cards,
  .bonus-cards,
  .expansion-cards,
  .blood-cards
) .feature-card:nth-child(3),
body.site-final .ruler-cards article:nth-child(3),
body.site-final .process-row article:nth-of-type(3),
body.site-final .ability-row article:nth-child(3),
body.site-final .journey-step:nth-of-type(3) {
  --db-marker: #b48a45;
}

body.site-final .bonus-cards .feature-card:nth-child(4),
body.site-final .ability-row article:nth-child(4),
body.site-final .journey-step:nth-of-type(4) {
  --db-marker: #4f8f8e;
}

body.site-final :is(
  .home-cards .feature-card,
  .mission-cards .feature-card,
  .bonus-cards .feature-card,
  .expansion-cards .feature-card,
  .blood-cards .feature-card,
  .item-card,
  .ruler-cards article,
  .process-row article,
  .ability-row article
) :is(h3, h4, b, strong) {
  color: #f4f7fb !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body.site-final :is(
  .home-cards .feature-card,
  .mission-cards .feature-card,
  .bonus-cards .feature-card,
  .expansion-cards .feature-card,
  .blood-cards .feature-card,
  .item-card,
  .ruler-cards article,
  .process-row article,
  .ability-row article
) :is(p, small, em) {
  color: var(--db-muted) !important;
}

body.site-final :is(.stats-row, .chips-row, .map-pills, .story-facts, .flow-row, .benefits-row) > span,
body.site-final .artifact-row > span {
  color: var(--db-text) !important;
  background: linear-gradient(180deg, rgba(27, 52, 82, 0.96), rgba(12, 27, 46, 0.98)) !important;
  border-color: rgba(76, 122, 168, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

body.site-final :is(.stats-row, .chips-row, .map-pills, .story-facts, .flow-row, .benefits-row) > span :is(b, strong),
body.site-final .artifact-row > b {
  color: #f3f6fa !important;
}

body.site-final :is(.stats-row, .chips-row, .map-pills, .story-facts, .flow-row, .benefits-row) > span :is(small, p) {
  color: #afc0d4 !important;
}

body.site-final :is(.influence, .blood-power, .artifact-row, .wide-table, .shift, .choice-box) {
  color: var(--db-text) !important;
  background:
    linear-gradient(90deg, rgba(91, 137, 184, 0.08), transparent 32%),
    var(--db-panel) !important;
  border-color: var(--db-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 28px rgba(0, 0, 0, 0.36) !important;
}

body.site-final .flow-row > i,
body.site-final .journey-row > i,
body.site-final .process-row > i {
  color: var(--db-blue) !important;
  text-shadow: 0 0 12px rgba(109, 155, 201, 0.38) !important;
}

body.site-final .usp-panel :is(
  .usp-key-grid article,
  .kingdom-grid article,
  .usp-rich-card,
  .usp-example-box,
  .usp-chain-box,
  .usp-experiment-box,
  .usp-memory-box,
  .usp-note,
  .usp-summary,
  .usp-callout,
  .usp-fact,
  .ritual-ending-card,
  .jackpot-rule-card,
  .jackpot-combo-card,
  .jackpot-stage-card
) {
  color: var(--db-text) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(91, 143, 195, 0.12), transparent 40%),
    var(--db-panel) !important;
  border-color: var(--db-border) !important;
  box-shadow: inset 3px 0 0 rgba(91, 143, 195, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

body.site-final .usp-panel :is(.core-raid-types li, .usp-tight-list li, .ritual-bullets li) {
  color: #c6d3e2 !important;
  background: rgba(20, 40, 65, 0.84) !important;
  border-color: rgba(79, 125, 171, 0.42) !important;
}

/* Remove the remaining legacy light surfaces inside popup families. */
body.site-final :is(.usp-shell, .jackpot-panel, .jackpot-panel-rich, .ritual-panel) {
  color: var(--dd-text) !important;
  background: linear-gradient(180deg, #101c2d 0%, #070d17 72%, #05070d 100%) !important;
  border-color: var(--dd-border-strong) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.site-final :is(.jackpot-combo-grid, .jackpot-combo-flow) > div {
  color: var(--db-text) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(83, 135, 190, 0.14), transparent 42%),
    linear-gradient(180deg, #19304d 0%, #0d1d32 100%) !important;
  border-color: rgba(91, 143, 195, 0.54) !important;
  box-shadow: inset 3px 0 0 rgba(105, 154, 202, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body.site-final :is(.jackpot-combo-grid, .jackpot-combo-flow) > div b {
  color: #f4f7fb !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body.site-final :is(.jackpot-combo-grid, .jackpot-combo-flow) > div span {
  color: #bdcce0 !important;
}

body.site-final :is(.jackpot-result-box, .jackpot-result-strip) {
  color: #f9e6ae !important;
  background:
    linear-gradient(90deg, rgba(220, 174, 76, 0.09), transparent 44%),
    linear-gradient(180deg, #40341d 0%, #211a0e 100%) !important;
  border-color: rgba(218, 175, 83, 0.58) !important;
  box-shadow: inset 3px 0 0 rgba(226, 184, 91, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body.site-final :is(.jackpot-result-box, .jackpot-result-strip) b {
  color: #f0cb72 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body.site-final :is(.jackpot-result-box, .jackpot-result-strip) span {
  color: #e4d7b5 !important;
}

body.site-final :is(.core-raid-video-frame, .usp-video-frame) {
  background: #08111f !important;
  border-color: rgba(83, 130, 178, 0.46) !important;
}

body.site-final :is(.hero-nav, .jackpot-close, .ritual-close) {
  color: #edf3fb !important;
  background: linear-gradient(180deg, #2b4f78, #162b48) !important;
  border-color: rgba(113, 161, 209, 0.62) !important;
}

/* Founder Rewards is a natural full Dotabuff secondary module. */
body.site-final .gift-panel {
  color: var(--db-text) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(76, 130, 188, 0.22), transparent 38%),
    linear-gradient(180deg, #142942 0%, #0b182a 56%, #070e19 100%) !important;
  border: 2px solid rgba(91, 137, 184, 0.66) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

body.site-final .gift-panel > :is(h2, p) {
  color: var(--db-text) !important;
}

body.site-final .gift-panel > p {
  color: #bdcadb !important;
}

body.site-final .gift-grid article {
  --gift-accent: #648fc0;
  color: var(--db-text) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(83, 133, 186, 0.13), transparent 45%),
    linear-gradient(180deg, #172a43 0%, #0a1627 100%) !important;
  border: 1px solid rgba(82, 127, 173, 0.54) !important;
  box-shadow: inset 0 3px 0 var(--gift-accent), inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 9px 20px rgba(0, 0, 0, 0.3) !important;
}

body.site-final .gift-grid article:nth-child(1) {
  --gift-accent: #8a6bb8;
}

body.site-final .gift-grid article:nth-child(3) {
  --gift-accent: #b88b42;
}

body.site-final .gift-grid article:nth-child(4) {
  --gift-accent: #4e88b9;
}

body.site-final .gift-grid article h3 {
  color: #f4f7fb !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body.site-final .gift-cta {
  background: linear-gradient(180deg, #2a67b3, #164582) !important;
  border: 1px solid rgba(115, 169, 224, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(0, 0, 0, 0.34) !important;
}

/* The Builds label belongs to the panel, not to a separate white lozenge. */
body.site-final section.builds .artifact-row > b {
  color: #e8f0f8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82) !important;
}

/* Journey thumbnails stay neutral: no rarity-style vertical markers here. */
body.site-final .journey-step,
body.site-final .journey-step:nth-of-type(2),
body.site-final .journey-step:nth-of-type(3),
body.site-final .journey-step:nth-of-type(4) {
  border-color: rgba(76, 119, 162, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body.site-final :is(
  .static-more-links,
  .static-readable-card,
  .static-article-hero,
  .contact-form,
  .privacy-doc,
  .explore-lang
) {
  background:
    radial-gradient(circle at 100% 0, rgba(81, 128, 179, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(18, 35, 57, 0.985), rgba(7, 16, 28, 0.995)) !important;
  border-color: rgba(76, 119, 162, 0.5) !important;
}

body.site-final :is(.static-more-links a, .static-readable-card a, .menu-panel nav a) {
  background: linear-gradient(180deg, #1b3553, #0e1d31) !important;
  border-color: rgba(82, 130, 180, 0.5) !important;
}

body.site-final :is(.static-more-links a, .static-readable-card a, .menu-panel nav a):hover {
  color: #fff !important;
  background: linear-gradient(180deg, #264b73, #142a46) !important;
  border-color: var(--db-border-hot) !important;
}

body.site-final.explore-page .explore-link-grid a.explore-main-link {
  background: linear-gradient(180deg, #21466f, #102742) !important;
  border-color: var(--db-border-hot) !important;
}

/* The 1,515 Games Like pages use a separate CSS family. */
body.comparison-page {
  --cmp-blue: var(--dd-blue);
  --cmp-deep: #111b2d;
  --cmp-gold: var(--dd-gold);
  --cmp-purple: var(--dd-violet);
  --cmp-ink: var(--dd-text);
  --cmp-soft: rgba(13, 20, 34, 0.96);
  --cmp-border: var(--dd-border);
  --cmp-shadow: var(--dd-shadow);
  color: var(--dd-text);
  background:
    radial-gradient(circle at 16% 4%, rgba(74, 104, 161, 0.24), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(114, 76, 162, 0.18), transparent 32%),
    linear-gradient(180deg, #090e19 0%, #05070d 46%, #04060a 100%);
}

body.comparison-page::before {
  background:
    linear-gradient(135deg, rgba(126, 155, 205, 0.045), transparent 35%),
    radial-gradient(circle at 50% 0, rgba(84, 111, 162, 0.1), transparent 36%);
  opacity: 1;
}

.comparison-topbar,
.comparison-hero,
.comparison-card,
.comparison-cta-banner {
  color: var(--dd-text);
  background:
    radial-gradient(circle at 100% 0, rgba(82, 132, 184, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(21, 40, 64, 0.98), rgba(9, 19, 33, 0.99));
  border-color: rgba(76, 121, 166, 0.52);
  box-shadow: var(--dd-shadow);
}

.comparison-topbar {
  background: rgba(9, 14, 24, 0.92);
  backdrop-filter: blur(16px);
}

.comparison-logo,
.comparison-mini-nav a,
.comparison-footer a,
.related-grid a,
.comparison-breadcrumbs,
.comparison-breadcrumbs a {
  color: #dbe5f3;
}

.comparison-logo-gem {
  color: var(--dd-violet);
  text-shadow: 0 2px 0 #6f4d22, 0 0 14px rgba(168, 135, 234, 0.45);
}

.comparison-mini-nav a,
.related-grid a {
  background: linear-gradient(180deg, #1b273b, #0d1422);
  border-color: var(--dd-border);
}

.comparison-back {
  color: #17120a;
  background: linear-gradient(180deg, #efd47d, #bd8739);
  border-color: rgba(255, 231, 164, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 18px rgba(0, 0, 0, 0.32);
}

.comparison-hero {
  background:
    radial-gradient(circle at 92% 8%, rgba(127, 91, 188, 0.18), transparent 34%),
    linear-gradient(125deg, rgba(20, 30, 48, 0.98), rgba(8, 12, 21, 0.99));
}

.comparison-kicker {
  color: var(--dd-gold);
  background: rgba(157, 113, 49, 0.16);
  border-color: rgba(223, 183, 94, 0.42);
}

body.comparison-page h1,
.comparison-card h2,
.comparison-cta-banner h2,
.comparison-game-card strong {
  color: var(--dd-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

body.comparison-page h1 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64), 0 0 20px rgba(223, 183, 94, 0.12);
}

.comparison-subtitle,
.comparison-card p,
.comparison-cta-banner p,
.comparison-row div,
.comparison-faq p {
  color: var(--dd-muted);
}

.comparison-chip-row span {
  color: #ded2f4;
  background: rgba(126, 89, 187, 0.18);
  border-color: rgba(168, 135, 234, 0.3);
}

.comparison-secondary-cta {
  color: #dfe7f3;
  background: linear-gradient(180deg, #1c293e, #0d1422);
  border-color: var(--dd-border);
}

.comparison-primary-cta {
  color: #17120a;
  background: linear-gradient(180deg, #f0d77f, #ca943e 58%, #966223);
  border-color: rgba(255, 231, 164, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 22px rgba(0, 0, 0, 0.34);
}

.comparison-answer,
.comparison-deep-dive {
  background: linear-gradient(180deg, rgba(27, 53, 83, 0.98), rgba(12, 27, 46, 0.99));
  border-color: rgba(91, 143, 195, 0.54);
  box-shadow: inset 3px 0 0 rgba(111, 156, 201, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.comparison-row {
  color: var(--dd-muted);
  background: linear-gradient(180deg, rgba(22, 43, 69, 0.94), rgba(12, 26, 44, 0.96));
  border-color: rgba(75, 119, 163, 0.34);
}

.comparison-row--head {
  color: var(--dd-text);
  background: linear-gradient(90deg, rgba(157, 113, 49, 0.24), rgba(101, 72, 151, 0.22));
}

.comparison-row div:first-child,
.comparison-faq summary {
  color: #e7edf6;
}

.comparison-faq details {
  border-top-color: rgba(132, 154, 193, 0.2);
}

.comparison-faq details[open] {
  background: linear-gradient(180deg, rgba(25, 52, 82, 0.96), rgba(12, 27, 46, 0.98));
  border-color: rgba(91, 143, 195, 0.5);
  box-shadow: inset 3px 0 0 rgba(104, 151, 198, 0.56);
}

.comparison-game-card {
  color: var(--dd-text);
  background: linear-gradient(180deg, #182338, #0c1320);
  border-color: var(--dd-border);
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.3);
}

.comparison-game-card:hover {
  border-color: rgba(223, 183, 94, 0.56);
  background: linear-gradient(180deg, #23324a, #111a2a);
}

.comparison-game-card span {
  color: #c2addf;
}

@media (max-width: 860px) {
  .comparison-topbar {
    background: rgba(9, 14, 24, 0.97);
  }

  .comparison-row div:nth-child(1)::before,
  .comparison-row div:nth-child(2)::before,
  .comparison-row div:nth-child(3)::before {
    color: var(--dd-gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.madboys-site *,
  body.comparison-page * {
    scroll-behavior: auto;
  }
}