/* The Kyrath Codex — core styles */

:root {
  --bg:            #0a0b10;
  --bg-parchment:  #f4e8c8;
  --bg-card:       #1a1a22;
  --fg:            #e8e4d8;
  --fg-muted:      #9d9a8f;
  --accent-gold:   #c9a84c;
  --accent-red:    #8b1a1a;
  --accent-green:  #6aa84f;
  --border-soft:   #2a2a35;
  --faction-primary:   #c9a84c;
  --faction-secondary: #6b5520;
  --card-primary:      #c9a84c;

  --font-display: "Cinzel", "Palatino Linotype", Georgia, serif;
  --font-lore:    "IM Fell English", Georgia, serif;
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-w: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

body {
  background: radial-gradient(circle at 50% -20%, #1a1a28, var(--bg) 60%);
}

a { color: var(--accent-gold); text-decoration: none; transition: color .15s; }
a:hover { color: #e0c068; text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--accent-gold);
  font-weight: 500;
  letter-spacing: 0.02em;
}
h1 { font-size: 2.5rem; margin: 0 0 .5em; }
h2 { font-size: 1.5rem; margin: 2em 0 .5em; border-bottom: 1px solid var(--border-soft); padding-bottom: .25em; }
h3 { font-size: 1.15rem; margin: 1.25em 0 .5em; color: var(--fg); }

p  { margin: 0 0 1em; }
em { font-family: var(--font-lore); font-style: italic; color: var(--fg); }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

/* Parent site strip — link back to frostywren.com from any codex page */
.parent-site-strip {
  background: #07080c;
  border-bottom: 1px solid var(--border-soft);
  font-size: .8rem;
}
.parent-site-strip .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 32px;
}
.parent-site-strip .parent-home {
  color: var(--fg-muted);
  font-family: var(--font-display);
  letter-spacing: .04em;
}
.parent-site-strip .parent-home:hover {
  color: var(--accent-gold);
  text-decoration: none;
}
.parent-site-strip .parent-links {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}
.parent-site-strip .parent-links a {
  color: var(--fg-muted);
}
.parent-site-strip .parent-links a:hover {
  color: var(--accent-gold);
  text-decoration: none;
}
@media (max-width: 600px) {
  .parent-site-strip .parent-links a:last-child { display: none; }
}

/* Site nav */
.site-nav {
  background: rgba(10, 11, 16, 0.92);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 10;
}
.site-nav .wrap { display: flex; align-items: center; gap: 2rem; height: 64px; }
.site-nav .brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent-gold);
  text-decoration: none;
  letter-spacing: .03em;
}
.site-nav nav.primary { display: flex; gap: 1.25rem; margin-left: auto; }
.site-nav nav.primary a { color: var(--fg); font-size: .95rem; }
.site-nav nav.primary a:hover { color: var(--accent-gold); text-decoration: none; }
.site-nav nav.primary a.nav-cta {
  background: var(--accent-gold);
  color: var(--bg);
  padding: .3rem .75rem;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: .02em;
}
.site-nav nav.primary a.nav-cta:hover { background: #e0c068; color: var(--bg); }

/* Breadcrumbs */
.breadcrumbs { padding: 1rem 1.5rem; font-size: .9rem; color: var(--fg-muted); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--fg-muted); margin-left: .5rem; }
.breadcrumbs a { color: var(--fg-muted); }
.breadcrumbs a:hover { color: var(--accent-gold); }

/* Main */
.codex-main { min-height: 60vh; padding-bottom: 4rem; }

/* Hero (home) */
.hero {
  padding: 5rem 0 3rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.05), transparent);
  border-bottom: 1px solid var(--border-soft);
}
.hero h1 { font-size: 3.5rem; margin-bottom: .25em; }
.hero .byline { color: var(--fg-muted); font-size: 1.1rem; }
.hero .hero-cta-row { margin-top: 1.5rem; }
.cta-large { padding: .7rem 1.4rem; font-size: 1.05rem; letter-spacing: .02em; }

/* Page header */
.page-header { padding: 3rem 1.5rem 1rem; max-width: var(--max-w); margin: 0 auto; }
.page-header h1 { margin-bottom: .25em; }
.page-header .lede { color: var(--fg-muted); font-size: 1.15rem; margin: 0; }

/* Home cards grid */
.home-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  padding: 3rem 1.5rem;
}
.home-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1.5rem;
}
.home-card h2 { margin-top: 0; border: none; padding: 0; }
.home-links { list-style: none; padding: 0; margin: 1rem 0 0; }
.home-links li { margin-bottom: .5em; }
.home-links .count { color: var(--fg-muted); font-size: .85em; }
.cta {
  display: inline-block;
  margin-top: .5rem;
  padding: .4rem .9rem;
  background: var(--accent-gold);
  color: var(--bg);
  border-radius: 3px;
  font-weight: bold;
}
.cta:hover { background: #e0c068; color: var(--bg); text-decoration: none; }
.cta-disabled { background: var(--border-soft); color: var(--fg-muted); cursor: default; }
.cta-disabled:hover { background: var(--border-soft); color: var(--fg-muted); text-decoration: none; }

/* Card grid (index pages) */
.card-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--card-primary);
  border-radius: 4px;
  padding: 1.25rem;
  transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-2px); border-color: var(--card-primary); }
.card a { color: inherit; display: block; }
.card a:hover { text-decoration: none; }
.card h3 { margin-top: 0; color: var(--accent-gold); }
.card .summary { color: var(--fg); font-size: .95rem; }
.card-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  margin: -1.25rem -1.25rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-soft);
}
.card-thumb img {
  max-height: 120px;
  max-width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Pills */
.pill {
  display: inline-block;
  padding: .15em .7em;
  margin: 0 .25em .25em 0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: .8rem;
  color: var(--fg-muted);
  text-transform: capitalize;
}
.pill-faction { background: var(--faction-primary); color: var(--bg); border-color: var(--faction-primary); font-weight: 600; }
.pill-faction:hover { text-decoration: none; filter: brightness(1.1); }
.pill-defender { background: rgba(106, 168, 79, 0.15); color: var(--accent-green); border-color: var(--accent-green); }
.pill-foe { background: rgba(139, 26, 26, 0.2); color: #d96a6a; border-color: var(--accent-red); }
.stars { color: var(--accent-gold); letter-spacing: 1px; font-size: 1.05em; }
.pill-tier-cheap     { background: rgba(170, 170, 170, 0.1); }
.pill-tier-mid       { background: rgba(107, 197, 246, 0.1); color: #8ec7e8; border-color: #3a6b85; }
.pill-tier-expensive { background: rgba(201, 168, 76, 0.15); color: var(--accent-gold); border-color: var(--accent-gold); }
.pill-tier-premium   { background: rgba(210, 106, 42, 0.15); color: #d26a2a; border-color: #d26a2a; }
.pill-warning { background: rgba(139, 26, 26, 0.15); color: #d96a6a; border-color: var(--accent-red); }
.pill-draft   { background: rgba(255, 200, 80, 0.15); color: #ffc850; border-color: #ffc850; }

/* Entity pages (warden / faction / region) */
.entity-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--faction-primary);
}
.entity-header h1 { margin: 0 0 .25em; }
.entity-header .also-known-as { color: var(--fg-muted); margin-bottom: .5em; }
.entity-header .badges { margin: 0; }
.entity-hero-sprite {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1rem;
  max-width: 280px;
}
.entity-hero-sprite img {
  max-width: 100%;
  max-height: 260px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .entity-header { grid-template-columns: 1fr; }
  .entity-hero-sprite { max-width: 200px; margin: 0 auto; }
}

/* Quick facts */
.quick-facts { margin: 2rem 0; }
.quick-facts dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin: 0;
}
.quick-facts dl > div {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--faction-primary);
  padding: .75rem 1rem;
  border-radius: 3px;
}
.quick-facts dt { color: var(--fg-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.quick-facts dd { margin: .25em 0 0; font-size: 1.05rem; color: var(--fg); font-family: var(--font-display); }

/* Progression table */
.progression-table-wrap { overflow-x: auto; margin-top: 1rem; }
.progression-table {
  border-collapse: collapse;
  min-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.progression-table th, .progression-table td {
  padding: .6rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.progression-table thead th {
  background: rgba(255,255,255,0.04);
  color: var(--faction-primary);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .03em;
}
.progression-table tbody th { text-align: left; color: var(--fg-muted); font-weight: normal; }
.progression-table tr.sep { border-top: 2px solid var(--border-soft); }
.progression-meta { color: var(--fg-muted); font-size: .9rem; }

/* Warden stat row (index cards) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 1rem 0;
  font-size: .85rem;
}
.stat-row > div { text-align: center; background: rgba(255,255,255,0.03); padding: .4rem .25rem; border-radius: 3px; }
.stat-row dt { color: var(--fg-muted); font-size: .75rem; }
.stat-row dd { margin: 0; color: var(--fg); font-family: var(--font-display); font-size: 1rem; }

/* Lore & prose sections */
.lore .summary { font-size: 1.15rem; color: var(--fg); font-family: var(--font-lore); padding: 1rem 1.5rem; border-left: 3px solid var(--faction-primary); background: rgba(255,255,255,0.02); }
.lore-sections p, .prose-sections p { max-width: 70ch; }
.prose-sections ul { max-width: 70ch; }

/* Cross-references */
.xref {
  display: inline-block;
  padding: .15em .55em;
  margin: .1em 0;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
  color: var(--accent-gold);
  font-size: .9em;
}
.xref:hover { background: rgba(201, 168, 76, 0.2); text-decoration: none; }
.xref-pending { background: rgba(100,100,100,0.1); color: var(--fg-muted); border-color: var(--border-soft); cursor: default; }
.xref-list { list-style: none; padding: 0; margin: .5rem 0; }
.xref-list li { display: inline-block; margin: .25rem .25rem 0 0; }

/* Prose sections — each one is optional; render only when authored */
.prose-section { margin: 2rem 0; max-width: 70ch; }
.prose-section p { max-width: 70ch; }

/* Game appearance cross-section */
.appears-in .game-appearance {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}
.appears-in h3 { margin-top: 0; }

/* Talent cards */
.talent-tier .talent-card { padding: 1rem; }
.talent-card h3 { font-size: 1.05rem; color: var(--fg); }
.effect-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; font-size: .85rem; }
.effect-list > div { background: rgba(255,255,255,0.03); padding: .15em .6em; border-radius: 3px; }
.effect-list dt { display: inline; color: var(--fg-muted); margin-right: .3em; }
.effect-list dt::after { content: ":"; }
.effect-list dd { display: inline; margin: 0; color: var(--accent-gold); font-family: var(--font-display); }
.requires-pillar { margin: .5rem 0; }
.capstone-card { border-top-color: var(--accent-red); }

/* Edict effects list */
.effects-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.effects-list > div { background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--faction-primary); padding: .75rem 1rem; border-radius: 3px; }
.effects-list dt { color: var(--fg-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.effects-list dd { margin: .25em 0 0; color: var(--fg); font-family: var(--font-display); }

.edict-negative { border-top-color: var(--accent-red); }
.edict-positive { border-top-color: var(--accent-green); }

/* Consolidated edicts/boons index */
.edicts-section { margin-bottom: 2rem; }
.edict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.edict-entry {
  scroll-margin-top: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--fg-muted);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  transition: border-color .15s, transform .15s;
}
.edict-entry:target { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2); }
.edict-entry.edict-negative { border-top-color: var(--accent-red); }
.edict-entry.edict-positive { border-top-color: var(--accent-green); }
.edict-entry-header h3 { margin: 0 0 .25em; font-size: 1.1rem; color: var(--fg); }
.edict-entry .badges { margin: 0 0 .75em; }
.edict-description { margin: 0 0 .75em; font-size: .95rem; }
.edict-effects {
  margin: .5rem 0 0;
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.edict-effects > div {
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  padding: .2em .6em;
}
.edict-effects dt { display: inline; color: var(--fg-muted); margin-right: .3em; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.edict-effects dt::after { content: ":"; }
.edict-effects dd { display: inline; margin: 0; color: var(--accent-gold); font-family: var(--font-display); }
.edict-flavor { color: var(--fg-muted); margin: .75em 0 0; font-family: var(--font-lore); }
.edict-note { margin: .4em 0 0; font-size: .9rem; }
.edict-note strong { color: var(--faction-primary); }

/* Boss card highlight */
.card-boss { border-top-color: var(--accent-red); box-shadow: 0 0 0 1px rgba(139, 26, 26, 0.2); }

/* Achievements
   Category color flows in via a CSS custom property set on .achievement-category
   in the template (--category-color: #rrggbb), sourced from the in-game
   AchievementManager.CATEGORIES registry via the codex_export. */
.achievement-category { margin-bottom: 2.5rem; }
.achievement-category-heading {
  color: var(--category-color, var(--accent-gold));
  border-bottom: 1px solid var(--category-color, var(--border-soft));
  font-size: 1.5rem;
  margin: 2em 0 .5em;
  padding-bottom: .25em;
}
.achievements-grid .achievement-card { border-top-color: var(--category-color, var(--accent-gold)); }

/* Variant of */
.variant-of { margin: 1rem 0; color: var(--fg-muted); font-size: .95rem; }

/* Titles list */
.titles-list { list-style: decimal; padding-left: 1.5rem; }
.titles-list li { margin-bottom: .25rem; }
.fg-muted { color: var(--fg-muted); }

/* Tier breakpoints */
.breakpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.breakpoints > div { background: var(--bg-card); border: 1px solid var(--border-soft); padding: .6rem 1rem; border-radius: 3px; }
.breakpoints dt { color: var(--faction-primary); font-family: var(--font-display); font-size: .9rem; }
.breakpoints dd { margin: .2em 0 0; font-size: .95rem; }

/* Pillar cards — home of talent tree overview */
.pillar-card h3 { color: var(--accent-gold); }

/* Level pages */
.card-thumb-map { height: 160px; background: #141420; padding: 0; }
.card-thumb-map svg { width: 100%; height: 100%; display: block; }
.level-header { padding: 2rem 0 1rem; border-bottom: 2px solid var(--accent-gold); }
.level-header h1 { margin: 0 0 .5em; }
.map-figure { margin: 2rem 0; }
.map-frame {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  max-width: 100%;
}
.level-map-svg { display: block; width: 100%; height: auto; }
.path-line {
  fill: none;
  stroke: rgba(255, 200, 80, 0.85);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.7));
}
.path-spawn { fill: #d96a6a; stroke: rgba(255, 255, 255, 0.8); stroke-width: 3; }
.path-end { fill: var(--accent-gold); stroke: rgba(255, 255, 255, 0.8); stroke-width: 3; }
.map-figure figcaption { margin-top: .5rem; color: var(--fg-muted); font-size: .9rem; text-align: center; }

/* Difficulty layers */
.difficulty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.difficulty-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--fg-muted);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}
.difficulty-card h3 { margin-top: 0; color: var(--fg); }
.difficulty-normal   { border-top-color: var(--accent-green); }
.difficulty-expert   { border-top-color: var(--accent-gold); }
.difficulty-infernal { border-top-color: var(--accent-red); }
.difficulty-card .note { font-style: italic; color: var(--fg-muted); font-size: .95rem; }
.edict-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.edict-list li { padding: .3em 0; font-size: .9rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 2rem 0;
  color: var(--fg-muted);
  font-size: .9rem;
  text-align: center;
}
.site-footer p { margin: 0 0 .25em; }
.site-footer .version { font-size: .8rem; }