*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #05040f;
  --white: #f0eeff;
  --silver: #c8c0e8;
  --font-display: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --nav-bg: rgba(5,4,15,0.92);
  --nav-border: rgba(160,140,255,0.1);
  --nav-text: rgba(200,190,240,0.7);
  --nav-btn-border: rgba(160,140,255,0.15);
  --nav-btn-hover-bg: rgba(124,77,255,0.1);
  --nav-btn-hover-border: rgba(160,140,255,0.45);
  --nav-dropdown-bg: rgba(8,6,22,0.96);
  --nav-dropdown-border: rgba(160,140,255,0.2);
  --nav-item-text: rgba(200,190,240,0.65);
  --nav-item-border: rgba(160,140,255,0.08);
  --nav-item-hover-bg: rgba(124,77,255,0.12);
  /* RGB triplets for theme-aware rgba() in inline styles */
  --text-rgb: 200,190,240;
  --accent-rgb: 160,140,255;
  --text2-rgb: 200,192,232;
  --bg-rgb: 5,4,15;
  --bg2-rgb: 8,6,22;
  --panel-rgb: 10,8,28;
}

[data-theme="light"] {
  --bg: #e8e4f6;
  --white: #120a28;
  --silver: #4e3f7a;
  --nav-bg: rgba(232,228,246,0.97);
  --nav-border: rgba(90,60,180,0.2);
  --nav-text: #3d2b7a;
  --nav-btn-border: rgba(90,60,180,0.3);
  --nav-btn-hover-bg: rgba(90,60,180,0.1);
  --nav-btn-hover-border: rgba(90,60,180,0.6);
  --nav-dropdown-bg: #ede9fc;
  --nav-dropdown-border: rgba(90,60,180,0.25);
  --nav-item-text: #4a3870;
  --nav-item-border: rgba(90,60,180,0.12);
  --nav-item-hover-bg: rgba(90,60,180,0.09);
}

/* Higher specificity to override per-page :root variable re-declarations */
html[data-theme="light"] {
  --bg2: #ddd8f4;
  --border: rgba(90,60,180,0.2);
  --muted: #5a4a88;
  --purple-dim: rgba(90,60,180,0.08);
  --purple: #6a3de8;
  --text-rgb: 50,35,100;
  --accent-rgb: 90,60,180;
  --text2-rgb: 60,45,110;
  --bg-rgb: 232,228,246;
  --bg2-rgb: 220,216,244;
  --panel-rgb: 215,210,242;
}

[data-theme="light"] body::after { opacity: 0; }

/* ── Sidebars — inline styles require !important ── */
[data-theme="light"] .div-aside { background: rgba(220,215,245,0.97) !important; }
[data-theme="light"] .page-root aside {
  background: rgba(220,215,245,0.97) !important;
  border-right-color: rgba(90,60,180,0.12) !important;
}

/* ── Page header banner ── */
[data-theme="light"] .ph-root {
  background: linear-gradient(180deg, rgba(100,60,200,0.18) 0%, rgba(80,50,160,0.08) 100%) !important;
  border-bottom-color: rgba(90,60,180,0.18) !important;
}

/* ── Float nav buttons ── */
[data-theme="light"] .float-nav-btn { background: rgba(210,205,242,0.9); color: #5a3fb5; border-color: rgba(90,60,180,0.25); }
[data-theme="light"] .float-nav-btn:hover { background: rgba(90,60,180,0.15); color: var(--white); }

/* ── Sort / filter buttons ── */
[data-theme="light"] .sort-btn { color: rgba(90,60,180,0.55) !important; }
[data-theme="light"] .sort-btn.active { background: rgba(90,60,180,0.12) !important; border-color: rgba(90,60,180,0.38) !important; color: var(--white) !important; }
[data-theme="light"] .sort-btn:hover:not(.active) { color: rgba(90,60,180,0.8) !important; background: rgba(90,60,180,0.06) !important; }

/* ── Home page ── */
[data-theme="light"] .home-title { color: var(--white); text-shadow: 0 0 60px rgba(90,60,180,0.25); }
[data-theme="light"] .home-subtitle { color: #4e3f7a; }
[data-theme="light"] .home-eyebrow { color: #5a3fb5; }
[data-theme="light"] .home-link { color: #3d22a8; border-color: rgba(90,60,180,0.4); background: rgba(90,60,180,0.07); }
[data-theme="light"] .home-link:hover { background: rgba(90,60,180,0.18); color: var(--white); }

/* ── Race/class stat tables ── */
[data-theme="light"] .stat-table td { border-bottom-color: rgba(90,60,180,0.12); }
[data-theme="light"] .stat-table td:first-child { color: #6050a0; }
[data-theme="light"] .stat-table td:last-child { color: var(--white); }
[data-theme="light"] .stat-table tr:hover td { background: rgba(90,60,180,0.05); }
[data-theme="light"] .roll-table td { border-bottom-color: rgba(90,60,180,0.1); }
[data-theme="light"] .roll-table td:last-child { color: var(--white); }
[data-theme="light"] .roll-table tr.highlight td { color: var(--white); }

/* ── Race/class feature blocks and labels ── */
[data-theme="light"] .feature-text { color: #2e1e58; }
[data-theme="light"] .name-cell { color: #4a3870; border-bottom-color: rgba(90,60,180,0.1); border-right-color: rgba(90,60,180,0.08); }
[data-theme="light"] .name-cell:hover { color: var(--white); }
[data-theme="light"] .name-cell .num { color: #7060b0; }
[data-theme="light"] .relation-pill { color: #4a3870; }
[data-theme="light"] .relation-pill:hover { color: var(--white); }
[data-theme="light"] .back-btn { color: #5a4888; }
[data-theme="light"] .back-btn:hover { color: var(--white); }

/* ── Monster page ── */
[data-theme="light"] .section-label { color: #5a3fb5; border-bottom-color: rgba(90,60,180,0.22); }
[data-theme="light"] .stat-divider { background: rgba(90,60,180,0.2); }

html { scrollbar-gutter: stable; }
html, body { width: 100%; min-height: 100%; background: var(--bg); color: var(--white); font-family: var(--font-body); overflow-x: hidden; }
#root { width: 100%; min-height: 100vh; }

body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,77,255,0.3); border-radius: 2px; }

.reveal-up   { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-up.visible   { opacity: 1; transform: translateY(0); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.page-root { position: relative; min-height: 100vh; }
.page-body { display: flex; align-items: flex-start; position: relative; z-index: 5; min-height: calc(100vh - var(--nav-h)); padding-left: var(--sidebar-w); }

.float-nav-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(8,6,22,0.88); border: 1px solid rgba(124,77,255,0.25); color: rgba(124,77,255,0.7); cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); }
.float-nav-btn:hover { background: rgba(124,77,255,0.18); border-color: rgba(124,77,255,0.55); color: var(--white); box-shadow: 0 0 14px rgba(124,77,255,0.25); }

.sort-btn { width: 100%; text-align: left; padding: 5px 8px; background: transparent; border: 1px solid transparent; border-radius: 2px; color: rgba(200,190,240,0.45); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; cursor: pointer; transition: all 0.15s; }
.sort-btn.active { background: rgba(160,140,255,0.1); border-color: rgba(160,140,255,0.35); color: var(--white); }
.sort-btn:hover:not(.active) { color: rgba(200,190,240,0.72); background: rgba(160,140,255,0.04); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-body { padding-left: 0 !important; }
  .page-root aside, .div-aside { display: none !important; }
}