/* =====================================================================
   Halvel — "Champions Within" EPIC THEME
   Re-skins the community site to match the in-game login screen:
   deep violet/obsidian base, ember-orange accents, metallic gold crests,
   glowing title treatment, and an animated atmospheric backdrop.

   Loaded AFTER site.css so these rules win the cascade. The base site
   leans heavily on CSS custom properties, so the bulk of the re-skin is a
   token remap; the rest targets the few surfaces baked as light parchment.
   ===================================================================== */

:root {
  /* ---- Base surfaces: obsidian violet ---- */
  --bg: #0a0612;
  --bg-deep: #050308;
  --leather: #150a22;
  --wood: #1c0f2e;
  --wood-light: #2a1644;
  --wood-grain: rgba(0, 0, 0, 0.5);

  /* "parchment" surfaces become dark arcane panels */
  --parchment: #1a1030;
  --parchment-hi: #241742;
  --vellum: #2b1a4d;

  /* ---- Metals: ember + arcane gold ---- */
  --gold: #e8b24a;
  --gold-bright: #ffd87a;
  --gold-deep: #8a5a1b;
  --brass: #c98a3a;
  --copper: #ff7a45;

  /* ---- Ink/text: light on dark everywhere ---- */
  --ink: #efe6ff;       /* was dark-on-parchment; now light-on-arcane */
  --ink-soft: #c7b6ee;
  --text: #efe6ff;      /* light text on dark surfaces */
  --muted: #b8aad8;     /* muted on dark — bumped for readability */
  --muted-ink: #b8aad8; /* hints/secondary text on dark panels */

  /* ---- Accents: ember fire + arcane ---- */
  --accent: #ff5a2a;        /* ember orange — the login signature */
  --accent-bright: #ff7a45;
  --accent-glow: rgba(255, 90, 42, 0.55);
  --arcane: #b478ff;        /* violet crystal glow from the login crest */
  --arcane-glow: rgba(180, 120, 255, 0.45);
  --moss: #6b8c5a;
  --moss-deep: #243a1f;
  --wine: #7a1f1f;
  --wine-bright: #ff6b5a;
  --danger: #ff6b5a;

  --panel: var(--parchment);
  --border: rgba(232, 178, 74, 0.38);
  --gold-dim: var(--gold-deep);
}

/* ---------------------------------------------------------------------
   Page background — animated violet/ember atmosphere (login-style)
   --------------------------------------------------------------------- */
body {
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, #1a0b2e 0%, #0a0612 52%, #050308 100%) fixed,
    #050308 !important;
  color: var(--text);
}

/* Readable body copy on every community page (not login / game client). */
.main {
  color: var(--text);
}
.main p,
.main li,
.main td,
.main th,
.main dd,
.main dt {
  color: var(--text);
}
.main .muted,
.main .hint,
.panel .muted,
.panel .hint {
  color: var(--muted-ink) !important;
}
.panel p,
.panel li,
.panel td,
.panel th {
  color: var(--text) !important;
}
.panel strong,
.panel code,
.wiki-card strong,
.wiki-card code,
.stat-bullets strong {
  color: var(--gold-bright) !important;
}
.panel a:not(.btn) {
  color: var(--accent-bright) !important;
}
.panel a:not(.btn):hover {
  color: var(--gold-bright) !important;
}
.feature-card p {
  color: var(--ink-soft) !important;
}
.wiki-content > .hint,
.wiki-section > .hint {
  color: var(--muted-ink) !important;
}
.wiki-subh {
  color: var(--accent) !important;
}
.item-desc,
.ability-block p {
  color: var(--ink-soft) !important;
}

.site-bg {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(180, 120, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(255, 90, 42, 0.16), transparent 65%);
}
.site-bg__vignette {
  background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 45%, rgba(5, 3, 8, 0.85) 100%);
}
.site-bg__grain { opacity: 0.05; }

/* Drifting embers + arcane motes layered over the whole site */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 80%, rgba(255, 140, 70, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 90, 42, 0.8), transparent),
    radial-gradient(2px 2px at 40% 40%, rgba(180, 120, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 85% 30%, rgba(255, 200, 120, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 10% 50%, rgba(180, 120, 255, 0.7), transparent);
  background-size: 100% 100%;
  animation: epic-embers 26s linear infinite;
  opacity: 0.5;
}
@keyframes epic-embers {
  0%   { transform: translateY(0) translateX(0); opacity: 0.45; }
  50%  { opacity: 0.7; }
  100% { transform: translateY(-40px) translateX(12px); opacity: 0.45; }
}

/* ---------------------------------------------------------------------
   Top bar / nav
   --------------------------------------------------------------------- */
.topbar {
  background:
    linear-gradient(180deg, rgba(26, 11, 46, 0.96), rgba(10, 6, 18, 0.92)) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 90, 42, 0.25) inset;
  backdrop-filter: blur(8px);
}
.brand-name {
  color: var(--gold-bright) !important;
  text-shadow: 0 0 14px rgba(255, 90, 42, 0.5), 0 2px 0 #1a0b2e;
}
.brand-tagline { color: var(--accent) !important; letter-spacing: 0.18em; }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--gold-bright); text-shadow: 0 0 10px var(--accent-glow); }
.nav-play {
  background: linear-gradient(180deg, #ff7a45, #cf3a16) !important;
  color: #fff3e6 !important;
  border: 1px solid rgba(255, 200, 150, 0.5) !important;
  box-shadow: 0 0 18px var(--accent-glow), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.nav-play:hover { box-shadow: 0 0 28px var(--accent-glow); }

/* ---------------------------------------------------------------------
   Panels / cards — dark arcane glass
   --------------------------------------------------------------------- */
.panel,
.feature-card,
.wiki-card,
.wiki-section.panel,
.decree-strip,
.auth-modal,
.thread-list > li,
.ability-block {
  background:
    linear-gradient(165deg, rgba(36, 22, 64, 0.82), rgba(16, 9, 30, 0.92)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(180, 120, 255, 0.06) inset;
  border-radius: 14px;
}
.feature-card:hover,
.wiki-card:hover {
  border-color: rgba(255, 122, 69, 0.55) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 22px var(--accent-glow);
  transform: translateY(-2px);
}
.feature-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.feature-card-icon { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* ---------------------------------------------------------------------
   Hero — the login screen centerpiece, ported to the home page
   --------------------------------------------------------------------- */
.hero-box {
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(180, 120, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 120%, rgba(255, 90, 42, 0.22), transparent 60%),
    linear-gradient(165deg, rgba(26, 11, 46, 0.9), rgba(8, 5, 16, 0.96)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(180, 120, 255, 0.12) inset;
  border-radius: 18px;
  overflow: hidden;
}
.hero-title {
  color: var(--gold-bright) !important;
  text-shadow:
    0 0 18px rgba(255, 90, 42, 0.6),
    0 0 46px rgba(180, 120, 255, 0.5),
    0 3px 0 #160a26;
  letter-spacing: 0.04em;
}
.hero-sub { color: var(--accent) !important; letter-spacing: 0.32em; text-transform: uppercase; }
.hero-lead { color: var(--ink-soft) !important; }

/* ---------------------------------------------------------------------
   Buttons — ember-forged
   --------------------------------------------------------------------- */
.btn {
  background: linear-gradient(180deg, rgba(43, 26, 77, 0.95), rgba(22, 13, 38, 0.95)) !important;
  color: var(--gold-bright) !important;
  border: 1px solid var(--border) !important;
  text-shadow: 0 1px 0 #0a0612;
  transition: box-shadow 0.16s ease, transform 0.08s ease, border-color 0.16s ease;
}
.btn:hover { border-color: var(--accent) !important; box-shadow: 0 0 18px var(--accent-glow); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #ff7a45, #cf3a16) !important;
  color: #fff3e6 !important;
  border: 1px solid rgba(255, 200, 150, 0.55) !important;
  box-shadow: 0 0 20px var(--accent-glow), 0 2px 0 rgba(0, 0, 0, 0.45);
}
.btn-primary:hover { box-shadow: 0 0 32px var(--accent-glow); }

/* ---------------------------------------------------------------------
   Wiki sidebar + jump links
   --------------------------------------------------------------------- */
.wiki-sidebar-inner {
  background: linear-gradient(165deg, rgba(30, 18, 54, 0.9), rgba(14, 8, 26, 0.94)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
}
.wiki-sidebar-title { color: var(--gold-bright) !important; }
.wiki-nav-list a { color: var(--ink-soft) !important; }
.wiki-nav-list a:hover { color: var(--accent-bright) !important; }
.wiki-card-title,
.wiki-section h2,
.wiki-section h3,
.panel h2,
.panel h3 { color: var(--gold-bright) !important; }
.wiki-subh { color: var(--accent) !important; }

/* Tags / pills */
.tag-boss {
  background: linear-gradient(180deg, #ff7a45, #cf3a16) !important;
  color: #fff3e6 !important;
  box-shadow: 0 0 12px var(--accent-glow);
}
.role-pill {
  background: rgba(180, 120, 255, 0.16) !important;
  color: #d9c7ff !important;
  border: 1px solid rgba(180, 120, 255, 0.4) !important;
}

/* ---------------------------------------------------------------------
   Tables (hiscores, xp, armory)
   --------------------------------------------------------------------- */
table.data, .data {
  color: var(--text);
}
table.data thead th {
  background: linear-gradient(180deg, rgba(43, 26, 77, 0.95), rgba(26, 11, 46, 0.95)) !important;
  color: var(--gold-bright) !important;
  border-bottom: 1px solid var(--border) !important;
}
table.data tbody td { border-bottom: 1px solid rgba(180, 120, 255, 0.12) !important; }
table.data tbody tr:hover td { background: rgba(255, 90, 42, 0.08) !important; }
table.data {
  background: rgba(20, 12, 36, 0.85) !important;
  border-color: var(--border) !important;
}
table.data th,
table.data td {
  border-color: rgba(180, 120, 255, 0.15) !important;
  color: var(--text) !important;
}
table.data tbody tr:nth-child(even) {
  background: rgba(180, 120, 255, 0.06) !important;
}
table.data tbody tr:nth-child(1) td:first-child { color: var(--gold-bright) !important; }
table.data tbody tr:nth-child(2) td:first-child { color: #c8c8d8 !important; }
table.data tbody tr:nth-child(3) td:first-child { color: #d4a574 !important; }

/* Forums / tavern */
.forum-hero-lead,
.thread-body,
.post-body {
  color: var(--ink-soft) !important;
}
.forum-thread-meta,
.forum-char-count,
.thread-meta,
.post-head,
.thread-date {
  color: var(--muted-ink) !important;
}
.forum-thread-title a,
.breadcrumb a {
  color: var(--accent-bright) !important;
}
.forum-thread-title a:hover,
.breadcrumb a:hover {
  color: var(--gold-bright) !important;
}
/* All text/password inputs: dark arcane background so the light --ink text
   is always readable. The base site.css bakes a cream background which is
   invisible once --ink is overridden to near-white by this theme. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea {
  background: rgba(14, 8, 26, 0.88) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  caret-color: var(--gold-bright) !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--muted-ink) !important;
  opacity: 1 !important;
}
.forum-composer textarea,
.forum-composer input[type="text"] {
  background: rgba(14, 8, 26, 0.92) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.tabs a,
.tabs button {
  background: rgba(30, 18, 54, 0.85) !important;
  color: var(--ink-soft) !important;
  border-color: var(--border) !important;
}
.tabs a.active,
.tabs button.active {
  background: linear-gradient(180deg, rgba(255, 122, 69, 0.35), rgba(207, 58, 22, 0.45)) !important;
  color: var(--gold-bright) !important;
  border-color: var(--accent) !important;
}
.post {
  background: rgba(26, 16, 48, 0.75) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.download-notes li,
.download-notes p {
  color: var(--ink-soft) !important;
}
.page-head .breadcrumb {
  color: var(--muted-ink);
}

/* Links inside content */
.wiki-content a, .main a:not(.btn):not(.nav-play) { color: var(--accent-bright); }
.wiki-content a:hover, .main a:not(.btn):not(.nav-play):hover { color: var(--gold-bright); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer {
  background: linear-gradient(180deg, rgba(10, 6, 18, 0.6), rgba(26, 11, 46, 0.92)) !important;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
}
.footer-cta {
  background: linear-gradient(180deg, #ff7a45, #cf3a16) !important;
  color: #fff3e6 !important;
  border: 1px solid rgba(255, 200, 150, 0.5) !important;
  box-shadow: 0 0 18px var(--accent-glow);
}

/* ---------------------------------------------------------------------
   Auth modal
   --------------------------------------------------------------------- */
.auth-modal-overlay { background: rgba(5, 3, 8, 0.78) !important; }
.auth-tab.active { color: var(--gold-bright) !important; border-color: var(--accent) !important; }
.btn.is-loading { opacity: 0.6; }

/* Decree / news strip glows ember */
.decree-strip-tag {
  background: linear-gradient(180deg, #ff7a45, #cf3a16) !important;
  color: #fff3e6 !important;
}

/* News feed — arcane panel on dark theme */
.news-list {
  border-color: rgba(232, 178, 74, 0.28) !important;
  background: linear-gradient(180deg, rgba(26, 16, 48, 0.95), rgba(10, 6, 18, 0.98)) !important;
}
.news-item { border-bottom-color: rgba(232, 178, 74, 0.15) !important; }
.news-item-art { border-right-color: rgba(232, 178, 74, 0.12) !important; }
.news-item-cat {
  background: rgba(180, 120, 255, 0.15) !important;
  border-color: rgba(180, 120, 255, 0.4) !important;
  color: #d4b8ff !important;
}
.news-section-header { border-bottom-color: rgba(232, 178, 74, 0.35) !important; }
.panel--article {
  background: linear-gradient(165deg, rgba(36, 22, 64, 0.82), rgba(16, 9, 30, 0.92)) !important;
  border: 1px solid rgba(232, 178, 74, 0.28) !important;
}
.news-tip {
  border-left-color: var(--accent) !important;
  background: rgba(255, 90, 42, 0.1) !important;
}

/* Reduced motion: drop the ember drift */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .zone-map-node { animation: none; }
}

/* =====================================================================
   Codex (multi-page wiki) components
   ===================================================================== */

/* Sidebar section links */
.wiki-nav-link {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 9px;
  color: var(--ink-soft) !important;
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-size: 0.92rem;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.wiki-nav-link:hover { background: rgba(180, 120, 255, 0.12); color: var(--gold-bright) !important; }
.wiki-nav-link.is-active {
  background: linear-gradient(180deg, rgba(255, 122, 69, 0.22), rgba(255, 90, 42, 0.1));
  color: var(--gold-bright) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Codex hub cards */
.wiki-hub-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wiki-hub-card { text-decoration: none; display: block; }
.wiki-hub-card h3 { color: var(--gold-bright); font-family: "Cinzel", serif; }

/* Clickable cards */
.wiki-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.wiki-card--link:hover { border-color: rgba(255, 122, 69, 0.6) !important; }

/* Level + rarity badges */
.lvl-badge {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(180, 120, 255, 0.18);
  border: 1px solid rgba(180, 120, 255, 0.4);
  color: #d9c7ff;
  white-space: nowrap;
}
.rar-pill {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  border: 1px solid currentColor;
}
.rar-common { color: #c9c2d8; }
.rar-uncommon { color: #5fd17a; }
.rar-rare { color: #5aa9ff; }
.rar-epic { color: #c478ff; }
.rar-legendary { color: #ffb347; }
.wiki-card--item.rar-uncommon { border-color: rgba(95, 209, 122, 0.45) !important; }
.wiki-card--item.rar-rare { border-color: rgba(90, 169, 255, 0.45) !important; }
.wiki-card--item.rar-epic { border-color: rgba(196, 120, 255, 0.5) !important; }
.wiki-card--item.rar-legendary { border-color: rgba(255, 179, 71, 0.55) !important; box-shadow: 0 0 16px rgba(255, 179, 71, 0.18) !important; }
.item-tags { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.2rem 0 0.4rem; }

/* Item controls (search + filter chips) */
.item-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.5rem 0 1rem; }
.item-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  background: rgba(10, 6, 18, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "EB Garamond", serif;
  font-size: 1rem;
}
.item-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.item-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.item-chip {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(43, 26, 77, 0.7);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.item-chip:hover { color: var(--gold-bright); }
.item-chip.is-active {
  background: linear-gradient(180deg, #ff7a45, #cf3a16);
  color: #fff3e6;
  border-color: rgba(255, 200, 150, 0.5);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Bestiary list */
.beast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; margin-bottom: 1.5rem; }
.beast-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(165deg, rgba(36, 22, 64, 0.7), rgba(16, 9, 30, 0.85));
  border: 1px solid var(--border);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}
.beast-row:hover { border-color: rgba(255, 122, 69, 0.6); box-shadow: 0 0 16px var(--accent-glow); transform: translateY(-1px); }
.beast-name { font-family: "Cinzel", serif; color: var(--gold-bright); }
.beast-meta { display: flex; gap: 0.4rem; align-items: center; }

/* Zones / dungeons */
.zone-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; }
.monster-detail-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* Zone map schematic */
.zone-map-figure {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 1rem;
  margin: 0.5rem 0;
  border-radius: 12px;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(180,120,255,0.12), transparent 60%), rgba(10, 6, 18, 0.6);
  border: 1px dashed rgba(232, 178, 74, 0.3);
}
.zone-map-node {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #fff3e6;
  background: linear-gradient(180deg, #ff7a45, #cf3a16);
  box-shadow: 0 0 14px var(--accent-glow);
  animation: epic-embers 6s ease-in-out infinite;
}
.zone-map-link { flex: 1 1 14px; height: 2px; min-width: 14px; background: linear-gradient(90deg, var(--accent), var(--arcane)); opacity: 0.6; border-radius: 2px; }
.zone-map-legend { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.zone-map-legend li { display: flex; align-items: center; gap: 0.5rem; }
.zone-map-pin { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-family: "Cinzel", serif; background: rgba(255, 90, 42, 0.25); border: 1px solid var(--accent); color: var(--gold-bright); }

/* Quest list */
.quest-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.quest-list li { padding-bottom: 0.6rem; border-bottom: 1px solid rgba(180, 120, 255, 0.12); }
.quest-list strong { color: var(--gold-bright); }

/* Faction list */
.faction-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem; }
.faction-list li { display: flex; align-items: center; gap: 0.5rem; }
.faction-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); }