:root {
  --bg: #04050d;
  --bg-vignette: radial-gradient(
    circle at 12% 8%,
    rgba(152, 95, 255, 0.28) 0%,
    rgba(20, 26, 55, 0.82) 32%,
    rgba(5, 7, 15, 0.95) 68%,
    rgba(3, 4, 10, 1) 100%
  );
  --bg-stripe: linear-gradient(
    120deg,
    rgba(60, 16, 118, 0.45),
    rgba(15, 110, 147, 0.35) 42%,
    rgba(7, 23, 64, 0.85) 100%
  );
  --bg-veil: linear-gradient(
    120deg,
    rgba(60, 16, 118, 0.42),
    rgba(16, 68, 148, 0.28) 48%,
    rgba(10, 24, 58, 0.88) 100%
  );
  --ink: #f2f4ff;
  --muted: #bcc9e5;
  --accent: #4ce0ff;
  --accent-alt: #ff8df0;
  --frame: #2b355b;
  --frame-soft: rgba(142, 131, 255, 0.22);
  --panel: linear-gradient(
    150deg,
    rgba(24, 34, 78, 0.94),
    rgba(12, 20, 46, 0.9)
  );
  --panel-soft: linear-gradient(
    150deg,
    rgba(32, 46, 110, 0.94),
    rgba(18, 28, 68, 0.88)
  );
  --panel-outline: rgba(92, 138, 255, 0.3);
  --surface-border-muted: rgba(121, 205, 255, 0.32);
  --card-border: 1px solid var(--surface-border-muted);
  --card-shadow: 0 28px 48px rgba(6, 12, 32, 0.52);
  --radius: 18px;
  --gap: 24px;
  --pad: 26px;
  --ctrl-h: 42px;
  --btn-bg: rgba(18, 28, 66, 0.9);
  --btn-bg-hover: rgba(25, 38, 88, 0.95);
  --border: 1px solid var(--surface-border-muted);
  --border-strong: 1px solid rgba(255, 141, 240, 0.4);
  --shadow-deep: 0 30px 64px rgba(5, 10, 30, 0.65);
  --shadow-soft: 0 18px 42px rgba(6, 14, 34, 0.48);
  --green-bg: rgba(45, 188, 140, 0.2);
  --green-bd: rgba(61, 214, 158, 0.48);
  --red-bg: rgba(216, 66, 108, 0.18);
  --red-bd: rgba(244, 94, 140, 0.5);
  --glow: 0 0 22px rgba(113, 220, 233, 0.45);
  --rift-shell-bg: linear-gradient(
    160deg,
    rgba(16, 24, 60, 0.96),
    rgba(8, 14, 36, 0.95)
  );
  --rift-shell-border: 1px solid rgba(121, 205, 255, 0.28);
  --rift-shell-shadow: 0 24px 54px rgba(4, 8, 26, 0.58);
}

/* Shared-skin variable mappings */
:root {
  --bg-accent-splash: rgba(76, 224, 255, 0.18);
  --focus-ring: rgba(255, 141, 240, 0.92);
  --chrome-glow: linear-gradient(
    118deg,
    rgba(255, 141, 240, 0.12),
    rgba(76, 224, 255, 0.08) 48%,
    rgba(76, 224, 255, 0)
  );
}

/* Riftbound-specific shell differences */
body.riftbound-app::before {
  background-image: var(--bg-veil);
}

header::after {
  border: 1px solid rgba(255, 141, 240, 0.15);
  background: linear-gradient(
    120deg,
    rgba(53, 18, 104, 0.32),
    rgba(7, 30, 72, 0.24)
  );
  box-shadow:
    0 0 0 1px rgba(27, 43, 92, 0.6),
    0 24px 60px rgba(5, 10, 32, 0.55);
}

.site-header.is-floating .site-home-link {
  background: rgba(11, 20, 52, 0.85);
  border-color: rgba(121, 205, 255, 0.46);
}

.sub {
  display: block;
}

h1 {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}

/* Riftbound-specific calculator overrides */
footer:not(.site-footer) {
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer {
  border: var(--rift-shell-border);
  background: var(--rift-shell-bg);
  box-shadow: var(--rift-shell-shadow);
  color: var(--muted);
}

.site-footer .small {
  font-size: 0.84rem;
}

.riftbound-precon .table-wrap {
  padding: 0;
  border-radius: 0;
}

/* Hide calculator metadata pills across Riftbound calculator pages. */
.riftbound-app .pill {
  display: none;
}

@media (max-width: 720px) {
  .calc-page .monte-carlo-section {
    display: none;
  }
}