/* Castlevania: Belmont's Curse Theme */
:root {
  --bg-dark: #0b0b0b;
  --bg-card: #1c0d17;
  --bg-card-hover: #2d1928;
  --bg-subtle: #241520;
  --border: #472b3d;
  --border-highlight: #968138;
  --text-main: #e0e0e0;
  --text-muted: #b3a5b0;
  --text-dim: #8b7a87;
  --accent-cyan: #e3da63;
  --accent-emerald: #a85656;
  --accent-amber: #968138;
  --accent-rose: #774445;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* Links Hover */
a:hover {
  color: #fdf58f;
}

/* Header */
.site-header {
  background-color: rgba(11, 11, 11, 0.94);
}

/* Hero Section */
.hero-medieval {
  background: radial-gradient(ellipse at 80% 20%, rgba(168, 86, 86, 0.15) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(150, 129, 56, 0.1) 0%, transparent 50%),
              linear-gradient(180deg, rgba(45, 25, 40, 0.7) 0%, rgba(11, 11, 11, 0.98) 100%);
  border-bottom: 1px solid #2d1928;
  border-top: 1px solid rgba(168, 86, 86, 0.2);
}

.hero-eyebrow {
  color: #e3da63;
  background: rgba(168, 86, 86, 0.15);
  border: 1px solid rgba(168, 86, 86, 0.3);
}

.live-dot-green {
  background-color: #e3da63;
  box-shadow: 0 0 8px #e3da63;
}

.hero-title-accent {
  background: linear-gradient(135deg, #e3da63 0%, #968138 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */
.btn-primary {
  background: #774445;
  color: #e0e0e0;
  border: 1px solid #a85656;
}

.btn-primary:hover {
  background: #a85656;
  border-color: #e3da63;
  box-shadow: 0 4px 14px rgba(168, 86, 86, 0.4);
}

.btn-gold {
  background: rgba(150, 129, 56, 0.15);
  color: #e3da63;
  border: 1px solid rgba(150, 129, 56, 0.4);
}

/* Cards */
.hero-cover-card {
  background: linear-gradient(145deg, #2d1928 0%, #150a12 100%);
  border: 2px solid #472b3d;
}

.hero-image-card {
  background: linear-gradient(145deg, #1c0d17 0%, #0b0b0b 100%);
  border: 1px solid rgba(168, 86, 86, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(168, 86, 86, 0.18);
}

.hero-image-wrap {
  background: #0b0b0b;
}

.hero-image-badge {
  background: rgba(11, 11, 11, 0.88);
}

.hero-image-caption {
  background: #1c0d17;
}

.preview-figure-card {
  background: linear-gradient(180deg, #1c0d17 0%, #0b0b0b 100%);
  border: 1px solid #2d1928;
}

.preview-figure-header {
  background: #150a12;
  border-bottom: 1px solid #2d1928;
}

.preview-figure-img-wrap {
  background: #0b0b0b;
}

.preview-figure-caption {
  background: #150a12;
  border-top: 1px solid #2d1928;
}

.guide-count-badge {
  color: #e3da63;
  background: rgba(150, 129, 56, 0.12);
  border: 1px solid rgba(150, 129, 56, 0.25);
}

.card-thumb-wrap {
  background: #150a12;
}

.visual-slot-frame {
  background: radial-gradient(circle, rgba(45, 25, 40, 0.8) 0%, rgba(17, 10, 15, 0.95) 100%);
  border: 1px dashed rgba(168, 86, 86, 0.35);
}

.card-badge-verified {
  background: rgba(150, 129, 56, 0.15);
  color: #e3da63;
  border: 1px solid rgba(150, 129, 56, 0.3);
}

.card-badge-emerald {
  background: rgba(168, 86, 86, 0.15);
  color: #a85656;
  border: 1px solid rgba(168, 86, 86, 0.3);
}

.card-badge-blue {
  background: rgba(227, 218, 99, 0.15);
  color: #e3da63;
  border: 1px solid rgba(227, 218, 99, 0.3);
}

.card-badge-preview {
  background: rgba(119, 68, 69, 0.15);
  color: #e0e0e0;
  border: 1px solid rgba(119, 68, 69, 0.3);
}

/* Article Tables */
.article-content table th {
  background: #2d1928;
  color: #e3da63;
}

.article-content table td {
  background: rgba(28, 13, 23, 0.6);
}

.status-pill-ready {
  background: rgba(150, 129, 56, 0.15);
  color: #e3da63;
  border: 1px solid rgba(150, 129, 56, 0.3);
}

.status-pill-draft {
  background: rgba(168, 86, 86, 0.15);
  color: #a85656;
  border: 1px solid rgba(168, 86, 86, 0.3);
}

.status-pill-candidate {
  background: rgba(119, 68, 69, 0.15);
  color: #e0e0e0;
  border: 1px solid rgba(119, 68, 69, 0.3);
}

/* Features.css Overrides */
.data-table tbody tr:nth-child(even) {
  background: rgba(45, 25, 40, 0.3);
}

.data-table tbody tr:hover {
  background: rgba(45, 25, 40, 0.6);
}

.data-table th.calc-col,
.data-table td.calc-col {
  background-color: rgba(168, 86, 86, 0.15);
}

.data-table th button:hover {
  background: rgba(168, 86, 86, 0.15);
}