/* Zuxiroq — onyx, graphite, gold and silver theme (loaded last on every page) */
:root {
  --bg-deep: #050506;
  --bg-mid: #0b0b0e;
  --bg-soft: #131317;
  --surface: rgba(20, 20, 24, 0.88);
  --surface-2: rgba(212, 175, 55, 0.10);
  --border: rgba(212, 175, 55, 0.30);
  --text: #f5f4f1;
  --muted: #a9aab1;
  --accent: #d4af37;
  --accent-2: #cfd4dc;
  --warning: #f0c34a;
  --ink-strong: #fbf7ec;
  --ink: #e6e3dc;
  --ink-soft: #b9bcc4;
  --ink-link: #e2c56a;
  --gold-soft: #f6e3a8;
  --gold-deep: #8a6a15;
  --silver-soft: #eef1f6;
  --silver-deep: #767b85;
  --gold-grad: linear-gradient(135deg, #f6e3a8 0%, #d4af37 46%, #8a6a15 100%);
  --silver-grad: linear-gradient(135deg, #f4f6f9 0%, #cfd4dc 46%, #7d838d 100%);
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
  --card-glow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.14);
}

body {
  background:
    radial-gradient(1000px 560px at 15% 0%, rgba(212, 175, 55, 0.16), transparent 52%),
    radial-gradient(820px 460px at 86% 8%, rgba(207, 212, 220, 0.09), transparent 52%),
    radial-gradient(700px 360px at 50% 100%, rgba(212, 175, 55, 0.08), transparent 55%),
    linear-gradient(180deg, #17171b 0%, #101014 24%, #0a0a0d 58%, #050506 100%) !important;
  color: var(--text);
}

body::before,
body::after {
  opacity: 0.6;
  filter: blur(30px);
}

body::before {
  background:
    radial-gradient(closest-side, rgba(212, 175, 55, 0.22), transparent 72%) 10% 40% / 300px 120px no-repeat,
    radial-gradient(closest-side, rgba(207, 212, 220, 0.14), transparent 72%) 54% 24% / 360px 130px no-repeat,
    radial-gradient(closest-side, rgba(212, 175, 55, 0.12), transparent 72%) 86% 58% / 280px 110px no-repeat !important;
}

body::after {
  background:
    radial-gradient(closest-side, rgba(207, 212, 220, 0.12), transparent 72%) 24% 52% / 320px 120px no-repeat,
    radial-gradient(closest-side, rgba(212, 175, 55, 0.14), transparent 72%) 74% 38% / 300px 100px no-repeat !important;
}

a {
  color: var(--ink-link);
}

a:hover {
  color: var(--gold-soft);
}

h1,
.hero h1,
.hs-hero h1,
.doc-hero h1 {
  color: var(--ink-strong) !important;
}

.eyebrow,
.lead,
.hs-intro,
.section-head p,
.doc-hero .lead,
.hero .lead {
  color: var(--ink-soft) !important;
}

.section-head h2,
.store-head h2,
.play-for-fun h2,
.support-banner h3,
.important-disclaimer h2,
.step h3,
.feature h3,
.trust h4,
details summary,
article.section h2,
section.block h2,
.toc h2,
.hs-card h2,
.help-item h3,
.hs-resp h2,
.urgent-box h3 {
  color: var(--ink-strong) !important;
}

code {
  color: var(--gold-soft);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.20);
  border-radius: 8px;
  padding: 0.12rem 0.38rem;
}

header,
.site-header,
.game-top {
  background: rgba(10, 10, 13, 0.90) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
}

footer,
.page-footer {
  background: rgba(8, 8, 10, 0.96) !important;
}

footer::before,
.game-top::after {
  background: linear-gradient(90deg, transparent 0%, var(--accent) 32%, var(--silver-soft) 55%, var(--accent) 74%, transparent 100%) !important;
}

.brand,
.brand:hover,
.page-footer .logo {
  color: var(--text) !important;
}

.brand span {
  background: var(--gold-grad) !important;
  color: #12100a !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16), 0 10px 28px rgba(212, 175, 55, 0.26) !important;
}

.pill,
.game-notice,
.combo-pill,
.store-badge,
.play-badge,
.game-tag {
  background: rgba(24, 24, 28, 0.82) !important;
  border-color: rgba(212, 175, 55, 0.26) !important;
  color: var(--text) !important;
}

.pill strong,
.store-badge,
.game-tag,
.help-item h3,
.hs-card h2,
.toc h2,
.chat-head strong {
  color: var(--accent) !important;
}

.eyebrow::before {
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.65) !important;
}

.btn-primary,
.btn-gen,
.chat-send,
.chat-toggle {
  background: var(--gold-grad) !important;
  color: #12100a !important;
  box-shadow: 0 16px 34px rgba(212, 175, 55, 0.24) !important;
}

.btn-primary:hover,
.btn-gen:hover,
.chat-send:hover,
.chat-toggle:hover {
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.34) !important;
}

.btn-ghost,
.btn-secondary {
  border-color: rgba(207, 212, 220, 0.32) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--silver-soft) !important;
}

.hero-card,
.card,
.store-shell,
.store-card,
.disclaimer-panel,
.step,
.hi,
.feature,
.trust,
details,
.support-banner,
.support-logos a,
.play-for-fun-panel,
.toc,
section.block .card,
article.section,
.hs-card,
.urgent-box,
.chat-panel,
.panel {
  background:
    linear-gradient(160deg, rgba(26, 26, 31, 0.94), rgba(11, 11, 14, 0.96)) !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
  box-shadow: var(--card-glow) !important;
  backdrop-filter: blur(16px);
  color: var(--text) !important;
}

.card::before,
.store-card::before,
.panel::before,
.hi::before {
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--accent) 40%, var(--silver-soft) 70%, var(--accent) 100%) !important;
}

.store-title-line,
.play-for-fun .title-line,
.doc-hero .accent-bar,
.hero .bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--silver-soft) 100%) !important;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.28) !important;
}

.stat,
.stat-grid-2 > div,
.store-note,
.card-front,
.paytable,
.reels-frame,
.cell,
.meter,
.wheel-glow,
.chat-bubble.bot,
.chat-bubble.user,
.hs-form input[type="email"],
.hs-form select,
.hs-form textarea,
.chat-input-row input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
  color: var(--ink-strong) !important;
}

.stat b,
.stat-grid-2 strong,
.hi strong,
.store-price,
.row-stats strong,
.msg,
.hs-email {
  color: var(--accent) !important;
  text-shadow: none !important;
}

.reels-frame,
.cell,
.card-back,
.card-front {
  border-color: rgba(212, 175, 55, 0.22) !important;
}

.card-back {
  background: linear-gradient(145deg, #26262c, #0f0f13) !important;
  color: var(--accent) !important;
}

.card-btn.matched .card-front,
.cell.win {
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.45) !important;
}

.pointer {
  border-top-color: var(--accent) !important;
}

.wheel-glow {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.30), transparent 66%) !important;
}

.play-for-fun::before,
.store-shell::before,
.support-banner::after,
.disclaimer-panel::before {
  opacity: 0.7;
}

.play-for-fun-rail,
.play-for-fun-rail-mobile {
  background: linear-gradient(180deg, #f6e3a8 0%, #d4af37 30%, #eef1f6 62%, #8a6a15 100%) !important;
}

.support-logos span.desc,
.card p,
.store-card p,
.feature p,
.trust p,
details p,
.play-for-fun-prose p,
article.section p,
article.section ul,
.help-item p,
.hs-resp > p,
.urgent-box p,
.fineprint,
.hs-note,
.chat-head span {
  color: var(--muted) !important;
}

.stat span,
.store-note,
.paytable,
.chat-bubble.bot,
.chat-bubble.user,
.hs-form input[type="email"],
.hs-form select,
.hs-form textarea,
.chat-input-row input,
.row-stats,
.sub-hint {
  color: var(--ink-soft) !important;
}

.page-footer nav a,
footer a,
nav a,
.back {
  color: var(--muted) !important;
}

.page-footer nav a:hover,
footer a:hover,
nav a:hover,
.back:hover {
  color: var(--accent) !important;
}

.urgent-box,
.chat-panel,
.chat-input-row,
.chat-head {
  background:
    linear-gradient(160deg, rgba(24, 24, 29, 0.96), rgba(8, 8, 11, 0.98)) !important;
}

.hero-card h2,
.hero-card h3,
.card h3,
.store-head h2,
.store-card h3,
.play-for-fun h2,
.disclaimer-panel h2,
.important-disclaimer h2,
.step h3,
.feature h3,
.trust h4,
.details summary,
details summary,
.toc h2,
.hs-card h2,
.help-item h3,
.hs-resp h2,
.urgent-box h3,
.doc article.section h2,
.doc-hero + article.section h2,
article.section h2,
section.block h2,
.support-banner h3,
.panel .game-title,
.panel strong,
.game-notice {
  color: var(--text) !important;
}

.combo-pill,
.play-badge,
.store-badge,
.game-tag {
  color: var(--accent) !important;
}

.hero-card .lead,
.play-for-fun-prose p,
.card p,
.store-card p,
.feature p,
.trust p,
details p,
.disclaimer-panel p,
.support-banner p,
article.section p,
article.section ul,
section.block p,
section.block li,
.hs-card p,
.help-item p,
.hs-resp > p,
.urgent-box p,
.chat-head span,
.fineprint {
  color: var(--muted) !important;
}

section:nth-of-type(even) {
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.04) 42%, transparent) !important;
}