/* Realm Guard unified site theme.
   This file loads last on every page so header, footer, cards, buttons, and
   page shells stay consistent across the main site and hosted server pages. */
:root {
  --rg-bg: #06111f;
  --rg-bg-deep: #020711;
  --rg-sky: #09233c;
  --rg-panel: #0b1a2b;
  --rg-panel-2: #102941;
  --rg-stone: #526477;
  --rg-line: rgba(75, 142, 194, .38);
  --rg-line-gold: rgba(231, 168, 41, .42);
  --rg-gold: #e7c56d;
  --rg-gold-2: #fff0b3;
  --rg-ember: #f28a1d;
  --rg-blue: #2b89d2;
  --rg-text: #f6f8fb;
  --rg-muted: #b9c3cf;
  --rg-cyan: #71dce9;
  --rg-width: 1180px;
  --rg-header-height: 58px;
  --rg-shield-size: 28px;
  --rg-brand-size: .88rem;
}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  margin: 0 !important;
  color: var(--rg-text) !important;
  background:
    linear-gradient(180deg, rgba(2, 7, 17, .30), rgba(2, 7, 17, .62)),
    url("/assets/images/site-background.png") center top / cover fixed,
    radial-gradient(circle at 50% 0, rgba(45, 146, 218, .20), transparent 34rem),
    radial-gradient(circle at 76% 22%, rgba(43, 137, 210, .13), transparent 30rem),
    radial-gradient(circle at 15% 26%, rgba(242, 138, 29, .08), transparent 24rem),
    linear-gradient(180deg, #071727 0%, #06111f 48%, #020711 100%),
    var(--rg-bg) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

a {
  color: inherit;
}

.site-header {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 3000 !important;
  height: var(--rg-header-height) !important;
  min-height: var(--rg-header-height) !important;
  background: linear-gradient(180deg, rgba(2, 7, 17, .98), rgba(5, 15, 27, .96)) !important;
  border-bottom: 1px solid rgba(75, 142, 194, .32) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.nav-shell {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  height: var(--rg-header-height) !important;
  min-height: var(--rg-header-height) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--rg-text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--rg-brand-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.brand-icon,
.brand-mark {
  width: var(--rg-shield-size) !important;
  height: var(--rg-shield-size) !important;
  flex: 0 0 var(--rg-shield-size) !important;
  display: block !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.brand-mark span {
  display: none !important;
}

.main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

.main-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #d5dde7 !important;
  font: 800 .84rem/1 Inter, "Segoe UI", Arial, sans-serif !important;
  text-decoration: none !important;
}

.main-nav a:hover,
.main-nav a.active,
.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  background: rgba(231, 168, 41, .12) !important;
  border-color: rgba(231, 168, 41, .38) !important;
  color: var(--rg-gold-2) !important;
}

.site-header .main-nav a,
.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  font: 800 .84rem/1 Inter, "Segoe UI", Arial, sans-serif !important;
}

.main-nav a::after,
.site-header .main-nav a::after {
  display: none !important;
  content: none !important;
}

.shell,
.section-shell,
.page-hero .shell,
.page-hero .section-shell,
.content-section .section-shell {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  max-width: var(--rg-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.realmguard-hero,
.hero {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  min-height: auto !important;
  aspect-ratio: 1680 / 910 !important;
  margin: 28px auto 0 !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.realmguard-hero {
  margin-bottom: 34px !important;
}

.hero {
  display: grid !important;
  place-items: center !important;
  background-size: cover !important;
  background-position: center !important;
}

.hero-content {
  width: min(900px, calc(100% - 40px)) !important;
  padding: 0 !important;
}

.hero-title,
.page-hero h1,
h1,
h2,
h3 {
  letter-spacing: 0 !important;
}

.hero-title {
  margin: 0 0 10px !important;
  font-size: clamp(2.4rem, 7vw, 5.6rem) !important;
}

.section-head .kicker,
.final-cta .kicker,
.product-intro .kicker,
.product-card .kicker,
.home-section .section-kicker {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--rg-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.75rem, 3.4vw, 2.85rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-hero .section-kicker,
.page-hero .kicker {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--rg-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.section-head > h2,
.final-cta h2,
.product-intro h2,
.home-section .section-title {
  max-width: 860px !important;
  margin: 0 0 14px !important;
  color: var(--rg-text) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
}

.product-card .kicker {
  font-size: 1.35rem !important;
}

.card .eyebrow,
.realm-card .section-kicker,
.rule-card .section-kicker,
.timeline span {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--rg-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.card h3,
.realm-card h2,
.rule-card h2,
.timeline h3 {
  margin: 0 0 10px !important;
  color: var(--rg-text) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

.hero-copy {
  margin: 0 auto !important;
  color: #e2e8ef !important;
  font-size: clamp(.84rem, 1.7vw, 1.08rem) !important;
}

.page-hero {
  padding: 30px 0 28px !important;
  background:
    linear-gradient(120deg, rgba(8, 28, 49, .68), rgba(4, 13, 24, .58)) !important;
  border-bottom: 1px solid rgba(75, 142, 194, .32) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

.page-hero h1 {
  margin: 0 0 10px !important;
  font-size: clamp(1.85rem, 3vw, 2.7rem) !important;
  line-height: 1.02 !important;
}

.page-hero p {
  max-width: 820px !important;
  margin: 0 !important;
  font-size: .96rem !important;
  line-height: 1.58 !important;
}

.section,
.home-section,
.content-section {
  padding: 72px 0 !important;
  background: transparent !important;
}

.home-section {
  margin-top: 0 !important;
}

.proof-band,
.section-alt {
  background:
    linear-gradient(90deg, rgba(4, 12, 23, .96), rgba(8, 29, 50, .92), rgba(4, 12, 23, .96)) !important;
  border-top: 1px solid rgba(75, 142, 194, .32) !important;
  border-bottom: 1px solid rgba(75, 142, 194, .32) !important;
}

.proof-band {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 0 auto 64px !important;
  border: 1px solid rgba(75, 142, 194, .38) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(4, 12, 23, .82), rgba(8, 29, 50, .74), rgba(4, 12, 23, .82)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.proof-band .shell {
  width: 100% !important;
  max-width: none !important;
}

#features.section-alt {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 0 auto 72px !important;
  padding: 58px 0 !important;
  border: 1px solid rgba(75, 142, 194, .38) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(4, 12, 23, .82), rgba(8, 29, 50, .74), rgba(4, 12, 23, .82)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#features.section-alt .shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px !important;
}

#availability.section-alt {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 0 auto 72px !important;
  padding: 58px 0 !important;
  border: 1px solid rgba(75, 142, 194, .38) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(4, 12, 23, .82), rgba(8, 29, 50, .74), rgba(4, 12, 23, .82)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#availability.section-alt .shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px !important;
}

.home-panel.section-alt {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 0 auto 72px !important;
  padding: 58px 0 !important;
  border: 1px solid rgba(75, 142, 194, .38) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(4, 12, 23, .82), rgba(8, 29, 50, .74), rgba(4, 12, 23, .82)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.home-panel.section-alt .shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px !important;
}

.home-panel:not(.section-alt) {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 0 auto 72px !important;
  padding: 58px 0 !important;
  border: 1px solid rgba(75, 142, 194, .30) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(4, 12, 23, .34) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

.home-panel:not(.section-alt) .shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px !important;
}

.compact-grid .card {
  min-height: 172px !important;
}

.subscription-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.subscription-card {
  min-height: 160px !important;
}

.subscription-card h3 {
  font-size: 1.25rem !important;
}

.home-note {
  margin-top: 16px !important;
}

.proof-grid div {
  border-left-color: rgba(75, 142, 194, .24) !important;
}

.proof-grid div:last-child {
  border-right-color: rgba(75, 142, 194, .24) !important;
}

.card,
.selection-card,
.portal-card,
.realm-card,
.rule-card,
.rules-notice,
.rules-admin-note,
.panel,
.code-card,
.effect,
.enchantment-card,
.enchantment-card-clean,
.live-members-shell,
.leaderboard-panel,
.stat,
.shop-card,
.category-section,
.shop-directory-card,
.product-card,
.timeline article,
.info-list.raised,
.cta-grid div {
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(12, 31, 51, .94), rgba(5, 16, 29, .96)) !important;
  box-shadow: none !important;
}

.portal-card::after {
  background: linear-gradient(180deg, rgba(4, 10, 18, .10), rgba(4, 10, 18, .92)) !important;
}

.button,
a.button,
button:not(.site-back-to-top),
input[type="button"],
input[type="submit"],
.tab-button,
.server-command-copy,
.emoji-copy-button,
.emoji-icon-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(16, 41, 65, .94), rgba(8, 24, 42, .96)) !important;
  color: var(--rg-text) !important;
  font: 800 .9rem/1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.button:hover,
a.button:hover,
button:not(.site-back-to-top):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.tab-button:hover,
.server-command-copy:hover,
.emoji-copy-button:hover,
.emoji-icon-copy:hover {
  background: linear-gradient(135deg, var(--rg-gold-2), var(--rg-gold)) !important;
  border-color: rgba(231, 168, 41, .72) !important;
  color: #17130a !important;
  transform: translateY(-1px) !important;
}

.tab-button.active {
  background: linear-gradient(180deg, rgba(20, 52, 82, .98), rgba(10, 31, 54, .98)) !important;
  border-color: rgba(75, 142, 194, .72) !important;
  color: var(--rg-text) !important;
}

.button.primary,
a.button.primary {
  background: linear-gradient(180deg, rgba(16, 41, 65, .94), rgba(8, 24, 42, .96)) !important;
  border-color: var(--rg-line) !important;
  color: var(--rg-text) !important;
}

.button.primary:hover,
a.button.primary:hover {
  background: linear-gradient(135deg, var(--rg-gold-2), var(--rg-gold)) !important;
  border-color: rgba(231, 168, 41, .72) !important;
  color: #17130a !important;
}

.main-nav a.active,
.site-header .main-nav a.active {
  border-color: rgba(231, 168, 41, .44) !important;
}

.product-helmet,
.final-cta > img,
.realmguard-helmet,
.expendables-server-logo {
  filter: none !important;
  box-shadow: none !important;
}

.final-cta > img,
.product-card img,
.product-helmet {
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(12, 31, 51, .94), rgba(5, 16, 29, .96)) !important;
}

.disabled-button,
.button.disabled-button {
  opacity: 1 !important;
  color: var(--rg-text) !important;
  background: linear-gradient(180deg, rgba(16, 41, 65, .70), rgba(8, 24, 42, .76)) !important;
  border: 1px solid var(--rg-line) !important;
  box-shadow: none !important;
  cursor: default !important;
}

.disabled-button:hover,
.button.disabled-button:hover {
  background: linear-gradient(180deg, rgba(16, 41, 65, .70), rgba(8, 24, 42, .76)) !important;
  color: var(--rg-text) !important;
  transform: none !important;
  border-color: var(--rg-line) !important;
}

.pr-back-row {
  height: auto !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
}

.pr-back-button,
html body .pr-back-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  background: rgba(12, 31, 51, .72) !important;
  color: var(--rg-text) !important;
  font: 800 .76rem/1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.pr-back-button:hover,
html body .pr-back-button:hover {
  background: rgba(231, 168, 41, .12) !important;
  border-color: rgba(231, 168, 41, .44) !important;
  color: var(--rg-gold-2) !important;
  transform: none !important;
}

html body .button,
html body a.button,
html body .button.primary,
html body a.button.primary,
html body .page-button,
html body .tab-button,
html body .server-command-copy,
html body .emoji-copy-button,
html body .emoji-icon-copy,
html body button:not(.site-back-to-top):not(.main-nav-toggle),
html body input[type="button"],
html body input[type="submit"] {
  background: linear-gradient(180deg, rgba(16, 41, 65, .94), rgba(8, 24, 42, .96)) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  color: var(--rg-text) !important;
  box-shadow: none !important;
}

html body .button:hover,
html body a.button:hover,
html body .button.primary:hover,
html body a.button.primary:hover,
html body .page-button:hover,
html body .tab-button:hover,
html body .server-command-copy:hover,
html body .emoji-copy-button:hover,
html body .emoji-icon-copy:hover,
html body button:not(.site-back-to-top):not(.main-nav-toggle):hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--rg-gold-2), var(--rg-gold)) !important;
  border-color: rgba(231, 168, 41, .72) !important;
  color: #17130a !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

html body .page-button.active,
html body .tab-button.active,
html body .tab-button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(20, 52, 82, .98), rgba(10, 31, 54, .98)) !important;
  border-color: rgba(75, 142, 194, .72) !important;
  color: var(--rg-text) !important;
}

html body .disabled-button,
html body .button.disabled-button,
html body .disabled-button:hover,
html body .button.disabled-button:hover {
  background: linear-gradient(180deg, rgba(16, 41, 65, .70), rgba(8, 24, 42, .76)) !important;
  border-color: var(--rg-line) !important;
  color: var(--rg-text) !important;
  transform: none !important;
  cursor: default !important;
}

.store-button,
html body .store-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 70px !important;
  width: min(100%, 330px) !important;
  padding: 11px 18px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #232323, #1d1d1d) !important;
  color: #f8f8f8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 20px rgba(0, 0, 0, .18) !important;
  text-decoration: none !important;
  transition: border-color .16s ease, background .16s ease, transform .08s ease, box-shadow .08s ease !important;
}

.store-button:hover,
html body .store-button:hover {
  background: linear-gradient(180deg, #2a2a2a, #202020) !important;
  border-color: rgba(231, 197, 109, .48) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.store-button:active,
html body .store-button:active,
.store-button.is-pressed,
html body .store-button.is-pressed {
  transform: translateY(1px) scale(.985) !important;
  background: linear-gradient(180deg, #1d1d1d, #171717) !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .42), 0 3px 8px rgba(0, 0, 0, .16) !important;
}

.store-button img {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  object-fit: contain !important;
}

.store-button span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.store-button small {
  color: #d7d7d7 !important;
  font: 500 1.05rem/1.05 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.store-button strong {
  color: #ffffff !important;
  font: 800 1.58rem/1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.site-footer,
.library-footer {
  display: block !important;
  width: 100% !important;
  padding: 28px 20px !important;
  margin: 0 !important;
  color: #94a3b5 !important;
  background: linear-gradient(180deg, #04101d, var(--rg-bg-deep)) !important;
  border-top: 1px solid rgba(75, 142, 194, .30) !important;
  text-align: center !important;
}

.home-footer {
  position: relative !important;
}

.home-footer a {
  position: absolute !important;
  top: 50% !important;
  right: max(20px, calc((100vw - var(--rg-width)) / 2)) !important;
  transform: translateY(-50%) !important;
  color: rgba(148, 163, 181, .42) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.home-footer a:hover {
  color: rgba(231, 197, 109, .82) !important;
}

body.subpage {
  padding-top: 0 !important;
  background:
    linear-gradient(180deg, rgba(2, 7, 17, .30), rgba(2, 7, 17, .62)),
    url("/assets/images/site-background.png") center top / cover fixed,
    radial-gradient(circle at 50% 0, rgba(45, 146, 218, .20), transparent 34rem),
    radial-gradient(circle at 76% 22%, rgba(43, 137, 210, .13), transparent 30rem),
    radial-gradient(circle at 15% 26%, rgba(242, 138, 29, .08), transparent 24rem),
    linear-gradient(180deg, #071727 0%, #06111f 48%, #020711 100%),
    var(--rg-bg) !important;
}

body.subpage .mc-content,
body.subpage .market-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.subpage .mc-content::before,
body.subpage .mc-content::after,
body.subpage .market-main::before,
body.subpage .market-main::after {
  content: none !important;
  display: none !important;
}

/* Restore Data Library folder tabs. These are navigation tabs, not action buttons. */
html body .site-nav {
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  margin: 0 0 -1px 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .site-nav .page-button {
  min-height: 38px !important;
  padding: 0 44px !important;
  border: 1px solid var(--rg-line) !important;
  border-bottom-color: var(--rg-line) !important;
  border-radius: 8px 8px 0 0 !important;
  background: linear-gradient(180deg, rgba(16, 41, 65, .92), rgba(8, 24, 42, .94)) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .site-nav .page-button:hover {
  background: linear-gradient(180deg, rgba(20, 52, 82, .98), rgba(10, 31, 54, .98)) !important;
  border-color: var(--rg-line) !important;
  border-bottom-color: var(--rg-line) !important;
  color: var(--rg-text) !important;
  transform: none !important;
}

html body .site-nav .page-button.active {
  background: linear-gradient(145deg, rgba(12, 31, 51, .94), rgba(5, 16, 29, .96)) !important;
  border-color: var(--rg-line) !important;
  border-bottom-color: transparent !important;
  color: var(--rg-text) !important;
}

/* Make Text Effects copy controls match the page action buttons. */
html body .effect [data-copy] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  margin-top: 8px !important;
}

html body .code-card .preview-code {
  color: var(--rg-text) !important;
}

html body .code-card .preview-sample {
  font-weight: inherit !important;
}

/* Castle Marketplace: kill pill styling without damaging cards or tables. */
html body .shop-card .shop-category,
html body .shop-card .shop-count {
  display: none !important;
}

html body .shop-card .type,
html body .shop-card .transaction-badge,
html body .shop-card .type-badge,
html body .shop-card .badge {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.reference-page .panel,
.panel,
.code-card,
.live-preview,
.color-card,
.effect,
.enchantment-card,
.enchantment-card-clean {
  border-color: var(--rg-line) !important;
}

html body main section.panel.panel,
html body main .reference-page section.panel.panel {
  border: 1px solid var(--rg-line) !important;
  border-top-color: var(--rg-line) !important;
}

.privacy-section {
  width: min(var(--rg-width), calc(100% - 40px)) !important;
  margin: 48px auto 72px !important;
  padding: 0 !important;
  background: transparent !important;
}

.privacy-document {
  padding: clamp(24px, 4vw, 48px) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(12, 31, 51, .94), rgba(5, 16, 29, .96)) !important;
  box-shadow: none !important;
}

.privacy-document h2,
.privacy-document h3 {
  color: var(--rg-gold) !important;
}

.privacy-document h2 {
  margin: 34px 0 12px !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height: 1.15 !important;
}

.privacy-document .privacy-title-source {
  margin-top: 0 !important;
}

.privacy-document h3 {
  margin: 24px 0 8px !important;
  font-size: 1.08rem !important;
  line-height: 1.25 !important;
}

.privacy-document p,
.privacy-document li {
  color: #d8e2ee !important;
  font-size: .98rem !important;
  line-height: 1.72 !important;
}

.privacy-document p {
  margin: 0 0 14px !important;
}

.privacy-document ul,
.privacy-document ol {
  margin: 0 0 18px 1.2rem !important;
  padding: 0 !important;
}

.privacy-document li {
  margin: 6px 0 !important;
}

.privacy-document strong {
  color: var(--rg-text) !important;
}

.privacy-document a {
  color: var(--rg-cyan) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

@media (max-width: 760px) {
  .site-header {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .nav-shell {
    width: min(var(--rg-width), calc(100% - 28px)) !important;
    height: auto !important;
    min-height: var(--rg-header-height) !important;
    padding: 10px 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  .brand {
    font-size: var(--rg-brand-size) !important;
  }

  .main-nav {
    gap: 8px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  .main-nav a {
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: .76rem !important;
  }

  .site-header .main-nav a,
  .site-header .main-nav a:hover,
  .site-header .main-nav a.active {
    min-height: 34px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
  }

  .shell,
  .section-shell,
  .page-hero .shell,
  .page-hero .section-shell,
  .content-section .section-shell,
  .realmguard-hero,
  .hero {
    width: min(var(--rg-width), calc(100% - 28px)) !important;
  }

  .realmguard-hero,
  .hero {
    margin-top: 18px !important;
    aspect-ratio: 16 / 11 !important;
  }

  .page-hero,
  .section,
  .home-section,
  .content-section {
    padding: 54px 0 !important;
  }

  .home-panel,
  .home-panel.section-alt,
  .home-panel:not(.section-alt) {
    width: min(var(--rg-width), calc(100% - 28px)) !important;
    margin-bottom: 52px !important;
    padding: 36px 0 !important;
  }

  .subscription-grid {
    grid-template-columns: 1fr !important;
  }

  .store-button,
  html body .store-button {
    min-height: 66px !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .store-button img {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .store-button small {
    font-size: .9rem !important;
  }

  .store-button strong {
    font-size: clamp(1.18rem, 6.4vw, 1.48rem) !important;
  }

  .home-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .home-footer a {
    position: static !important;
    transform: none !important;
    font-size: .72rem !important;
  }

  .page-hero {
    padding: 26px 0 24px !important;
  }

  .page-hero h1 {
    font-size: clamp(1.65rem, 8vw, 2.2rem) !important;
  }
}