/* Iblis Bonus shared red/black theme override - 2026-04-26 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Outfit:wght@400;600;700;800;900&display=swap');

:root {
  --bg: #030000;
  --bg-soft: #120202;
  --bg-card: rgba(18, 2, 2, 0.78);
  --bg-card-strong: rgba(10, 0, 0, 0.94);
  --line: rgba(220, 38, 38, 0.24);
  --line-gold: rgba(251, 146, 60, 0.32);
  --text: #fff7ed;
  --muted: #f5c2c2;
  --gold: #f97316;
  --gold-light: #fed7aa;
  --crimson: #dc2626;
  --crimson-hover: #991b1b;
  --shadow: 0 28px 70px -34px rgba(220, 38, 38, 0.72);
}

html,
body {
  background: #030000 !important;
  color: var(--text) !important;
  font-family: 'Outfit', 'Segoe UI', sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(220, 38, 38, 0.28), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(249, 115, 22, 0.17), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(127, 29, 29, 0.36), transparent 44%),
    linear-gradient(180deg, #030000 0%, #0b0000 54%, #160303 100%) !important;
}

body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 20% 16%, rgba(239, 68, 68, 0.22), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(249, 115, 22, 0.16), transparent 38%) !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
}

::selection {
  background: #dc2626 !important;
  color: #fff !important;
}

.site-header {
  background: rgba(3, 0, 0, 0.9) !important;
  border-bottom: 1px solid rgba(220, 38, 38, 0.28) !important;
  box-shadow: 0 18px 44px -30px rgba(220, 38, 38, 0.85) !important;
}

.brand {
  color: #fff !important;
  font-family: 'Cinzel', 'Outfit', serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
}

.brand img {
  border-color: rgba(220, 38, 38, 0.7) !important;
  background: #050000 !important;
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.22),
    0 0 26px rgba(220, 38, 38, 0.36) !important;
}

.brand strong,
.brand span {
  color: #fff !important;
  text-shadow:
    0 0 12px rgba(220, 38, 38, 0.78),
    0 0 28px rgba(249, 115, 22, 0.28) !important;
}

.nav-link,
.chip,
.outline-link {
  color: #fee2e2 !important;
  background: rgba(24, 3, 3, 0.72) !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
}

.nav-link:hover,
.nav-link.active,
.chip:hover,
.outline-link:hover {
  color: #fff !important;
  border-color: rgba(249, 115, 22, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.34), rgba(249, 115, 22, 0.18)) !important;
  box-shadow: 0 14px 34px -20px rgba(220, 38, 38, 0.95) !important;
}

.hero,
.panel,
.topic-card,
.list-card,
.content-card,
.bonus-card,
.site-card,
.category-card,
.legal-card,
.info-card {
  border-color: rgba(220, 38, 38, 0.22) !important;
  background:
    radial-gradient(circle at top right, rgba(220, 38, 38, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(18, 2, 2, 0.93), rgba(5, 0, 0, 0.96)) !important;
  box-shadow:
    0 26px 68px -36px rgba(220, 38, 38, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.hero {
  border-radius: 34px !important;
}

.hero::after {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.24), transparent 72%) !important;
}

.eyebrow,
.section-kicker,
.kicker,
.label,
.meta,
.breadcrumb,
.crumbs,
.muted,
.hero-copy p,
.panel p,
.topic-card p,
.content-card p {
  color: #f5c2c2 !important;
}

h1,
h2,
h3,
.hero-title,
.section-title {
  color: #fff7ed !important;
  font-family: 'Outfit', 'Segoe UI', sans-serif !important;
}

h1,
.hero-title {
  letter-spacing: -0.045em !important;
  text-shadow: 0 0 34px rgba(220, 38, 38, 0.28) !important;
}

a {
  color: #fb923c;
}

a:hover {
  color: #fed7aa;
}

.btn,
.button,
.cta,
.primary-btn,
.hero-cta,
.cta-list,
button[type='submit'],
input[type='submit'] {
  color: #fff !important;
  border-color: rgba(249, 115, 22, 0.62) !important;
  background:
    linear-gradient(135deg, #dc2626 0%, #ea580c 100%) !important;
  box-shadow:
    0 18px 38px -20px rgba(220, 38, 38, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn:hover,
.button:hover,
.cta:hover,
.primary-btn:hover,
.hero-cta:hover,
.cta-list:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 46px -22px rgba(249, 115, 22, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

table,
thead,
tbody,
tr,
td,
th {
  border-color: rgba(220, 38, 38, 0.18) !important;
}

thead,
th {
  background: rgba(127, 29, 29, 0.32) !important;
  color: #fff7ed !important;
}

input,
select,
textarea {
  background: rgba(10, 0, 0, 0.88) !important;
  border-color: rgba(220, 38, 38, 0.32) !important;
  color: #fff7ed !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(249, 115, 22, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12) !important;
}

.footer,
.legal-footer,
footer {
  background: rgba(2, 0, 0, 0.94) !important;
  border-top: 1px solid rgba(220, 38, 38, 0.24) !important;
  color: #f5c2c2 !important;
}

.footer a,
.legal-footer a,
footer a {
  color: #fed7aa !important;
}

@media (max-width: 760px) {
  .site-header {
    position: sticky !important;
  }

  .topbar {
    gap: 10px !important;
  }

  .hero {
    border-radius: 24px !important;
    padding: 22px !important;
  }

  .nav {
    justify-content: flex-start !important;
  }
}