/* =========================================================
   BELEGHOST — The Candlemark Chronicle
   A weathered campaign atlas, kept beside a tavern hearth.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Color: soot, old vellum, brass, and firelight --- */
  --bg-void:       #110e0a;   /* smoke-dark outer field */
  --bg-panel:      #211b14;   /* aged walnut / leather */
  --bg-panel-2:    #30271c;   /* lifted vellum case */
  --bg-inset:      #17120c;   /* ink-dark recess */

  --ink-bone:      #f0e3c5;   /* candlelit parchment */
  --ink-dim:       #c6b796;   /* weathered parchment */
  --ink-faint:     #8a7b64;   /* faded marginalia */

  --ghost:         #d7ae58;   /* antique brass — the Worldstone's mark */
  --ghost-dim:     #926f32;
  --ghost-glow:    rgba(215, 174, 88, 0.32);

  --arcane:        #a57dcc;   /* spell-ink violet */
  --arcane-dim:    #6f508e;

  --warn:          #c36a43;   /* ember rust — danger / unverified lore */
  --warn-glow:     rgba(195, 106, 67, 0.25);

  --good:          #91aa72;   /* hearthside green — confirmed / online */

  --line:          rgba(240, 227, 197, 0.12);
  --line-strong:   rgba(215, 174, 88, 0.32);

  /* --- Type --- */
  --font-display:  'Cinzel', serif;
  --font-body:     'Cormorant Garamond', serif;
  --font-ui:       'Inter', -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* --- Scale --- */
  --radius: 2px;
  --shadow-panel: 0 12px 38px rgba(0,0,0,0.48), inset 0 1px rgba(255,237,190,0.035);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-void);
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(139, 93, 35, 0.18), transparent 46rem),
    radial-gradient(circle at 18% 22%, rgba(255, 215, 144, 0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 65%, rgba(255, 215, 144, 0.025) 0 1px, transparent 1.5px);
  background-size: auto, 13px 13px, 17px 17px;
  color: var(--ink-bone);
  font-family: var(--font-ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ghost); color: #211708; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.045em;
  margin: 0;
  color: var(--ink-bone);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e1bd72;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--ghost-dim);
  display: inline-block;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Fracture rule: the site's recurring signature device --- */
.fracture-rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
  margin: 64px 0;
  overflow: visible;
}
.fracture-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--ghost);
  background: var(--bg-panel);
  box-shadow: 0 0 0 4px var(--bg-void);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--ghost-dim);
  cursor: pointer;
  transition: all 0.18s ease;
  background: linear-gradient(180deg, rgba(255,238,196,0.035), transparent), var(--bg-panel);
  color: var(--ink-bone);
}
.btn:hover { border-color: var(--ghost); color: var(--ghost); box-shadow: 0 0 18px rgba(215,174,88,0.12); }
.btn-primary {
  background: linear-gradient(180deg, #e5c373, #bd8a37);
  border-color: var(--ghost);
  color: #211708;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f2db9b, #d2a34e);
  border-color: #f2db9b;
  color: #211708;
}
.btn-discord {
  background: #404eed;
  border-color: #404eed;
  color: #fff;
}
.btn-discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; }

/* --- Nav --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 15, 9, 0.91);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.11em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-logo .sigil { width: 26px; height: 26px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-links a { color: var(--ink-dim); transition: color 0.15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ghost); }

/* --- Compendium nav dropdown --- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); display: flex; align-items: center; gap: 6px; padding: 0;
  transition: color 0.15s;
}
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--ghost); }
.nav-dropdown-toggle .caret { width: 8px; height: 8px; transition: transform 0.15s; flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: linear-gradient(145deg, rgba(255,231,174,0.04), transparent 36%), var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 10px;
  display: none;
  z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 0.86rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}
.nav-dropdown-menu a:hover { background: var(--bg-inset); color: var(--ghost); }
.nav-dropdown-menu .dd-divider { height: 1px; background: var(--line); margin: 8px 4px; }
.nav-dropdown-menu .dd-label {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 12px 4px;
}
@media (max-width: 720px) {
  .nav-dropdown-menu { position: static; transform: none; width: 100%; margin-top: 8px; box-shadow: none; }
}

/* --- Nav-bar server tracker + player count --- */
.nav-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-tracker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(48, 39, 28, 0.75);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 7px 14px 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s;
  text-decoration: none;
}
.status-tracker:hover { border-color: var(--ghost-dim); }
.status-tracker .tdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.status-tracker .tdot.online { background: var(--good); box-shadow: 0 0 0 0 rgba(122,157,111,0.55); animation: navping 2s infinite; }
.status-tracker .tdot.offline { background: var(--warn); }
@keyframes navping {
  0% { box-shadow: 0 0 0 0 rgba(122,157,111,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(122,157,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(122,157,111,0); }
}
.nav-player-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ghost);
  background: rgba(23, 18, 12, 0.84);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 7px 14px;
  white-space: nowrap;
}
.nav-player-count .lbl {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .nav-status { display: none; }
}

/* --- Steam login / profile nav control (see js/steam-auth.js) --- */
.steam-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(23, 18, 12, 0.84);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ghost);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.steam-login-btn:hover { border-color: var(--ghost-dim); }
.steam-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-bone);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(23, 18, 12, 0.84);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 5px 14px 5px 5px;
  white-space: nowrap;
}
.steam-profile-link img {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 64px;
  color: var(--ink-faint);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
  font-size: 0.82rem;
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer a:hover { color: var(--ghost); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ghost-dim); }

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-links { display: none; }
}

/* =========================================================
   CASTLEWARD THEME — cool stone, iron, ivy, and candlelight
   ========================================================= */
:root {
  --bg-void: #111714;
  --bg-panel: #202a25;
  --bg-panel-2: #2c3932;
  --bg-inset: #141b18;
  --ink-bone: #edf0e7;
  --ink-dim: #c4cbbd;
  --ink-faint: #89958a;
  --ghost: #c7b66c;
  --ghost-dim: #81783f;
  --ghost-glow: rgba(199,182,108,.25);
  --arcane: #8ea69a;
  --arcane-dim: #526b60;
  --good: #7fa16f;
  --line: rgba(214,224,211,.14);
  --line-strong: rgba(139,164,137,.35);
  --shadow-panel: 0 16px 42px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.045);
}

body {
  background-color: #101612;
  background-image:
    linear-gradient(rgba(10,16,13,.78), rgba(10,16,13,.9)),
    url('../images/castle-ivy-wall.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 8%, rgba(177,190,169,.1), transparent 46rem);
}

.site-nav {
  background: rgba(12,19,15,.94);
  border-bottom: 1px solid rgba(137,164,135,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.36);
}

.nav-dropdown-menu,
.status-tracker,
.nav-player-count,
.gateway-card,
.server-card {
  background-color: rgba(27,38,32,.94);
  border-color: var(--line-strong);
}

.site-footer {
  background: rgba(10,16,13,.88);
  border-top-color: rgba(137,164,135,.3);
}

.compendium-main,
.compendium-sidebar {
  background: rgba(18,27,22,.9);
  backdrop-filter: blur(4px);
}

/* =========================================================
   THE BELEGHOST COMMONS — campaign folio refresh
   The prior cinematic/glow treatment was replaced with the things a
   roleplaying table actually feels like: paper, ink, wood, brass, and inked
   cartography. These values are deliberately shared by the site tools too.
   ========================================================= */
:root {
  --bg-void: #d9ccb0;
  --bg-panel: #f1e7d0;
  --bg-panel-2: #e7d8b8;
  --bg-inset: #d4c3a0;
  --ink-bone: #29261e;
  --ink-dim: #5b5546;
  --ink-faint: #7d745f;
  --ghost: #8c4d27;
  --ghost-dim: #9e7041;
  --ghost-glow: rgba(140, 77, 39, .16);
  --arcane: #5b657a;
  --arcane-dim: #4b5668;
  --warn: #9d4435;
  --warn-glow: rgba(157, 68, 53, .14);
  --good: #436349;
  --line: rgba(62, 50, 31, .22);
  --line-strong: rgba(106, 75, 40, .46);
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Inter', Arial, sans-serif;
  --shadow-panel: 0 5px 18px rgba(62, 45, 22, .13), inset 0 1px rgba(255,255,255,.48);
}

body {
  color: var(--ink-bone);
  background-color: var(--bg-void);
  background-image: radial-gradient(rgba(77, 59, 34, .2) .55px, transparent .7px), linear-gradient(100deg, rgba(255,255,255,.12), rgba(114,88,48,.05));
  background-size: 5px 5px, auto;
  background-attachment: scroll;
}
body::before { display: none; }
h1, h2, h3, h4 { color: var(--ink-bone); letter-spacing: .03em; }
a { text-underline-offset: 3px; }
.site-nav {
  background: #29271f;
  border-bottom: 4px solid #8c4d27;
  box-shadow: 0 3px 0 rgba(255,245,219,.28), 0 8px 22px rgba(38,29,16,.25);
}
.site-logo, .site-logo:hover { color: #f2e8d0; }
.site-logo .sigil { color: #d8a45a; }
.nav-links a, .nav-dropdown-toggle { color: #d8cfba; }
.nav-links a:hover, .nav-links a.active, .nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: #e8b762; }
.nav-dropdown-menu { background: #f1e7d0; border-color: #9e7041; box-shadow: 0 8px 20px rgba(30,22,13,.3); }
.nav-dropdown-menu a { color: #4a4030; }.nav-dropdown-menu a:hover { background: #e3d3b2; color: #743c20; }.nav-dropdown-menu .dd-divider { background: rgba(80,58,28,.25); }
.status-tracker, .nav-player-count { background: #3a362a; border-color: rgba(224,184,98,.45); color: #eee3cc; }
.nav-player-count { color: #e4b968; }.nav-player-count .lbl { color: #c9bda3; }
.btn { background: #f4ead4; border-color: #8f6438; color: #33281b; box-shadow: 0 2px 0 rgba(65,44,22,.18); }
.btn:hover { background: #e8d6af; border-color: #6d3a20; color: #4e2915; box-shadow: 0 3px 0 rgba(65,44,22,.22); transform: translateY(-1px); }
.btn-primary { background: #7e3f22; border-color: #623019; color: #fff4df; }.btn-primary:hover { background: #9a522b; border-color: #6d351b; color: #fff7e9; }
.btn-discord { background: #56627d; border-color: #3f4a61; color: #fff; }.btn-discord:hover { background: #687596; border-color: #4b5873; }
.site-footer { background: #29271f; border-top: 4px solid #8c4d27; color: #d5cab3; }.site-footer a:hover { color: #e7b967; }
::-webkit-scrollbar-track { background: #d2c2a2; }::-webkit-scrollbar-thumb { background: #84633e; }::-webkit-scrollbar-thumb:hover { background: #663c22; }

/* =========================================================
   NIGHTWATCH — the dark fantasy campaign theme
   Black stone, rain-soaked iron, old blood, tarnished gold, and the small
   pools of warmth that make a dangerous world feel inhabited.
   ========================================================= */
:root {
  --bg-void: #0d0e10;
  --bg-panel: #19191b;
  --bg-panel-2: #252427;
  --bg-inset: #111114;
  --ink-bone: #e6ded0;
  --ink-dim: #b9afa0;
  --ink-faint: #817970;
  --ghost: #bf9048;
  --ghost-dim: #805d32;
  --ghost-glow: rgba(191, 144, 72, .14);
  --arcane: #7e739d;
  --arcane-dim: #514969;
  --warn: #b14b43;
  --warn-glow: rgba(177, 75, 67, .17);
  --good: #728b66;
  --line: rgba(222, 211, 190, .13);
  --line-strong: rgba(191, 144, 72, .35);
  --shadow-panel: 0 14px 32px rgba(0,0,0,.48), inset 0 1px rgba(255,245,223,.035);
}
body {
  color: var(--ink-bone);
  background-color: #0d0e10;
  background-image: radial-gradient(ellipse at 50% -20%, rgba(112, 69, 30, .17), transparent 46rem), radial-gradient(rgba(228,214,188,.075) .55px, transparent .7px), linear-gradient(90deg, rgba(255,255,255,.012), transparent 36%, rgba(0,0,0,.16));
  background-size: auto, 5px 5px, auto;
}
h1, h2, h3, h4 { color: var(--ink-bone); }
.site-nav { background: rgba(13,14,16,.96); border-bottom-color: #8b5a2a; box-shadow: 0 1px 0 rgba(255,226,166,.12), 0 10px 28px rgba(0,0,0,.45); }
.site-logo, .site-logo:hover { color: #eee3d1; }.site-logo .sigil { color: #d1a659; }.nav-links a, .nav-dropdown-toggle { color: #c1b6a4; }.nav-links a:hover, .nav-links a.active, .nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: #d9a957; }
.nav-dropdown-menu { background: #1c1b1d; border-color: #6d512e; box-shadow: 0 12px 28px rgba(0,0,0,.6); }.nav-dropdown-menu a { color: #c9beab; }.nav-dropdown-menu a:hover { background: #282529; color: #e0b362; }.nav-dropdown-menu .dd-divider { background: rgba(228,211,184,.12); }
.status-tracker, .nav-player-count { background: #1c1b1e; border-color: rgba(191,144,72,.38); color: #ded4c3; }.nav-player-count { color: #d7a756; }.nav-player-count .lbl { color: #9b9184; }
.btn { background: #222124; border-color: #825b2e; color: #e7ddcc; box-shadow: 0 2px 0 rgba(0,0,0,.45); }.btn:hover { background: #302d2b; border-color: #bd8d49; color: #ffe4ae; box-shadow: 0 3px 0 rgba(0,0,0,.58), 0 0 15px rgba(191,144,72,.09); }.btn-primary { background: #7e332c; border-color: #a94d3d; color: #fff0d7; }.btn-primary:hover { background: #984034; border-color: #ca6a50; color: #fff4df; }.btn-discord { background: #3d496b; border-color: #59688d; }.btn-discord:hover { background: #4b5980; border-color: #7180a5; }
.site-footer { background: #101012; border-top-color: #6f4927; color: #a99f91; }.site-footer a:hover { color: #dcad5c; }
::-webkit-scrollbar-track { background: #0c0d0e; }::-webkit-scrollbar-thumb { background: #4b4034; }::-webkit-scrollbar-thumb:hover { background: #8a6334; }

/* Shared dark-fantasy furniture for the reference and character pages. */
.compendium-shell, .planner-shell { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 31%); }
.compendium-sidebar, .planner-sidebar {
  background: #121214;
  border-color: rgba(191,144,72,.24);
  box-shadow: inset -1px 0 rgba(255,242,212,.025);
}
.compendium-main, .planner-main { background: rgba(20,20,23,.86); }
.compendium-sidebar .cs-label, .planner-sidebar .field-label { color: #c79751; }
.compendium-sidebar a { border-left: 2px solid transparent; border-radius: 0; }
.compendium-sidebar a:hover, .compendium-sidebar a.active { background: linear-gradient(90deg, rgba(191,144,72,.13), transparent); border-left-color: #9f6b34; color: #e4bb70; }
.compendium-main h2, .planner-main h2, .drawer-section h5 {
  color: #e8dece;
  border-bottom: 1px solid rgba(191,144,72,.27);
  padding-bottom: 10px;
}
.compendium-main h2::before, .drawer-section h5::before { content: '✦'; color: #a87538; font-size: .7em; margin-right: .7em; vertical-align: middle; }
.info-box, .system-card, .rarity-row, .summary-card, .prc-card, .note-box, .warn-box, .drawer-section {
  background: linear-gradient(135deg, rgba(228,185,104,.045), transparent 44%), #222124;
  border-color: rgba(191,144,72,.28);
  box-shadow: inset 0 1px rgba(255,244,220,.025);
}
.system-card:hover, .prc-card:hover { border-color: #a9783b; box-shadow: 0 7px 18px rgba(0,0,0,.26); }
.field-input, .field-select, .ability-input, .skill-search { background: #111114; border-color: rgba(191,144,72,.36); color: #e6ded0; }
.field-input:focus, .field-select:focus, .ability-input:focus, .skill-search:focus { border-color: #d4a451; box-shadow: 0 0 0 2px rgba(191,144,72,.13); }
.chip { background: #222124; border-color: rgba(191,144,72,.3); color: #beb3a3; }.chip:hover, .chip.active { background: #44241f; border-color: #a94d3d; color: #f1d8b1; }
.drawer { background: #19191b; border-left-color: #805d32; }.drawer-backdrop { background: rgba(0,0,0,.67); }

/* =========================================================
   WORLDSTONE TEMPEST — smoke, stormglass, gold, and embers
   ========================================================= */
:root {
  --bg-void: #05080d;
  --bg-panel: rgba(16, 25, 34, .82);
  --bg-panel-2: rgba(37, 52, 62, .88);
  --bg-inset: #0a1017;
  --ink-bone: #f1f1e8;
  --ink-dim: #bdc8c9;
  --ink-faint: #849198;
  --ghost: #f0b94e;
  --ghost-dim: #9f6b28;
  --ghost-glow: rgba(240, 185, 78, .3);
  --arcane: #68cdf4;
  --arcane-dim: #317b9d;
  --warn: #e46b2c;
  --warn-glow: rgba(228, 107, 44, .25);
  --good: #72c794;
  --line: rgba(224, 239, 239, .14);
  --line-strong: rgba(240, 185, 78, .38);
  --shadow-panel: 0 18px 44px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.09);
}

body {
  color: var(--ink-bone);
  background-color: var(--bg-void);
  background-image: radial-gradient(ellipse at 50% -12%, rgba(231, 106, 25, .27), transparent 42rem), radial-gradient(ellipse at 92% 56%, rgba(38, 151, 209, .16), transparent 32rem), radial-gradient(ellipse at 8% 77%, rgba(93, 109, 116, .14), transparent 30rem), radial-gradient(rgba(255,226,155,.48) .5px, transparent .8px);
  background-size: auto, auto, auto, 8px 8px;
}
body::before { display: block; background: linear-gradient(130deg, rgba(0,0,0,.16), transparent 45%, rgba(15,50,67,.16)); }
.site-nav { background: rgba(6, 12, 18, .86); border-bottom-color: rgba(240,185,78,.37); box-shadow: 0 10px 30px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.site-logo, .site-logo:hover { color: #fff2c7; }.site-logo .sigil { color: var(--ghost); }
.nav-links a, .nav-dropdown-toggle { color: #b9c4c4; }.nav-links a:hover, .nav-links a.active, .nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--ghost); }
.nav-dropdown-menu { background: linear-gradient(145deg, rgba(66,83,91,.46), rgba(8,15,22,.96)); border-color: var(--line-strong); box-shadow: var(--shadow-panel); backdrop-filter: blur(18px); }.nav-dropdown-menu a { color: var(--ink-dim); }.nav-dropdown-menu a:hover { background: rgba(240,185,78,.12); color: #ffe4a1; }
.status-tracker, .nav-player-count { background: rgba(16,28,37,.78); border-color: rgba(240,185,78,.31); color: var(--ink-dim); backdrop-filter: blur(10px); }.nav-player-count { color: var(--ghost); }.nav-player-count .lbl { color: var(--ink-faint); }
.btn { background: rgba(20,32,41,.8); border-color: rgba(240,185,78,.48); color: var(--ink-bone); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.23); }.btn:hover { background: rgba(47,62,69,.86); border-color: var(--ghost); color: #fff0c0; box-shadow: 0 0 20px rgba(240,185,78,.16); }.btn-primary { background: linear-gradient(135deg, #ffe6a5, #efb548 49%, #b5601d); border-color: #ffd27b; color: #231504; }.btn-primary:hover { background: linear-gradient(135deg, #fff2bf, #f3c45c 49%, #cf7628); color: #1d1205; }.btn-discord { background: #284b67; border-color: #4e8eb5; }.btn-discord:hover { background: #366889; border-color: #75c9f2; }
.site-footer { background: rgba(4,8,12,.9); border-top-color: rgba(240,185,78,.28); color: var(--ink-faint); }.site-footer a:hover { color: var(--ghost); }
.compendium-main, .planner-main { background: rgba(12,20,28,.83); }.compendium-sidebar, .planner-sidebar { background: rgba(8,15,21,.9); border-color: rgba(240,185,78,.22); }.info-box, .system-card, .rarity-row, .summary-card, .prc-card, .note-box, .warn-box, .drawer-section { background: linear-gradient(135deg, rgba(240,185,78,.07), transparent 46%), rgba(24,36,45,.84); border-color: rgba(240,185,78,.25); }.field-input, .field-select, .ability-input, .skill-search { background: rgba(4,10,15,.86); border-color: rgba(105,207,249,.34); color: var(--ink-bone); }.drawer { background: #0d161e; border-left-color: var(--ghost-dim); }

/* =========================================================
   THE DYING AGE — shared inner-page system
   Boss Compendium opts out with body.boss-compendium.
   ========================================================= */
body:not(.boss-compendium) {
  --bg-void:#07090b;--bg-panel:rgba(18,22,25,.88);--bg-panel-2:rgba(29,34,37,.94);--bg-inset:#0b0e10;
  --ink-bone:#e8e2d7;--ink-dim:#aaa9a3;--ink-faint:#747771;--ghost:#bd914f;--ghost-dim:#77502a;
  --ghost-glow:rgba(189,145,79,.2);--arcane:#7e98a4;--arcane-dim:#405761;--warn:#a95747;--warn-glow:rgba(169,87,71,.18);--good:#758c6c;
  --line:rgba(213,202,182,.11);--line-strong:rgba(189,145,79,.29);--radius:1px;--shadow-panel:0 20px 45px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
  color:var(--ink-bone);background-color:#07090b;background-image:radial-gradient(ellipse at 82% 0,rgba(89,64,37,.16),transparent 38rem),radial-gradient(ellipse at 9% 75%,rgba(45,59,65,.13),transparent 31rem),radial-gradient(rgba(224,216,199,.055) .5px,transparent .7px);background-size:auto,auto,6px 6px;background-attachment:fixed;
}
body:not(.boss-compendium)::before{display:block;z-index:-1;background:linear-gradient(115deg,rgba(0,0,0,.22),transparent 42%,rgba(19,29,34,.12))}
body:not(.boss-compendium) h1,body:not(.boss-compendium) h2,body:not(.boss-compendium) h3,body:not(.boss-compendium) h4{color:var(--ink-bone);font-weight:500;letter-spacing:.025em}
body:not(.boss-compendium) ::selection{color:#16110b;background:#c39a58}
body:not(.boss-compendium) .site-nav{background:rgba(6,8,10,.9);border-bottom:1px solid rgba(189,145,79,.27);box-shadow:0 10px 32px rgba(0,0,0,.36);backdrop-filter:blur(18px)}
body:not(.boss-compendium) .site-logo,body:not(.boss-compendium) .site-logo:hover{color:#eee7db}body:not(.boss-compendium) .site-logo .sigil{color:#ba8742}
body:not(.boss-compendium) .nav-links a,body:not(.boss-compendium) .nav-dropdown-toggle{color:#9d998f}body:not(.boss-compendium) .nav-links a:hover,body:not(.boss-compendium) .nav-links a.active,body:not(.boss-compendium) .nav-dropdown-toggle:hover,body:not(.boss-compendium) .nav-dropdown.open .nav-dropdown-toggle{color:#d3aa68}
body:not(.boss-compendium) .nav-dropdown-menu{background:linear-gradient(145deg,rgba(56,61,61,.3),transparent 40%),rgba(10,13,15,.97);border-color:rgba(189,145,79,.3);box-shadow:0 22px 45px rgba(0,0,0,.58);backdrop-filter:blur(18px)}body:not(.boss-compendium) .nav-dropdown-menu a{color:#aaa69d}body:not(.boss-compendium) .nav-dropdown-menu a:hover{color:#d4ad6b;background:rgba(189,145,79,.1)}
body:not(.boss-compendium) .status-tracker,body:not(.boss-compendium) .nav-player-count{background:rgba(17,21,24,.78);border-color:rgba(189,145,79,.24);color:#aaa69d}body:not(.boss-compendium) .nav-player-count{color:#c49a58}
body:not(.boss-compendium) .btn{border-radius:1px;border-color:rgba(189,145,79,.38);color:#d8d1c5;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),rgba(20,24,27,.88);box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 16px rgba(0,0,0,.2)}body:not(.boss-compendium) .btn:hover{color:#e5c58d;border-color:#b98947;background:rgba(34,37,38,.95);box-shadow:0 0 20px rgba(189,145,79,.1)}body:not(.boss-compendium) .btn-primary{color:#18120b;background:linear-gradient(180deg,#cfac6d,#8e6032);border-color:#c7a363}body:not(.boss-compendium) .btn-primary:hover{color:#17110a;background:linear-gradient(180deg,#ddbd83,#a8753e)}
body:not(.boss-compendium) .site-footer{color:#73746f;background:#050607;border-top:1px solid rgba(213,202,182,.1)}body:not(.boss-compendium) .site-footer a:hover{color:#cda666}
body:not(.boss-compendium) ::-webkit-scrollbar-track{background:#07090b}body:not(.boss-compendium) ::-webkit-scrollbar-thumb{background:#303236;border-radius:0}body:not(.boss-compendium) ::-webkit-scrollbar-thumb:hover{background:#77502a}

/* Preserve the established Boss Compendium palette. */
body.boss-compendium{--bg-void:#0d0e10;--bg-panel:#19191b;--bg-panel-2:#252427;--bg-inset:#111114;--ink-bone:#e6ded0;--ink-dim:#b9afa0;--ink-faint:#817970;--ghost:#bf9048;--ghost-dim:#805d32;--arcane:#7e739d;--arcane-dim:#514969;--warn:#b14b43;--good:#728b66;--line:rgba(222,211,190,.13);--line-strong:rgba(191,144,72,.35);color:var(--ink-bone);background:#0d0e10 radial-gradient(ellipse at 50% -20%,rgba(112,69,30,.17),transparent 46rem)}
body.boss-compendium .site-nav{background:rgba(13,14,16,.96);border-bottom-color:#8b5a2a}body.boss-compendium .compendium-sidebar{background:#121214}body.boss-compendium .compendium-main{background:rgba(20,20,23,.86)}