/* =====================================================================
   vp-tome-lore.css — Per-lore theming layer on top of vp-tome.css
   ---------------------------------------------------------------------
   Apply a lore class to .vp-tome (e.g. .vp-tome.lore-orange) and the
   page picks up that lore's accent, paper tint, glow, and scene gradient.
   ===================================================================== */

/* Lore palette — each lore has a hue, deep tone, paper tint, and scene */
.vp-tome.lore-rod {
  --lore-hue:        #c0392b;
  --lore-deep:       #6b1f16;
  --lore-glow:       rgba(192, 57, 43, 0.18);
  --lore-paper-tint: linear-gradient(180deg, #fbeee7 0%, #f5dcca 100%);
  --lore-scene:
    radial-gradient(ellipse 80% 50% at 50% 100%, #2a0807 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 60%, #6b1808 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 70% 40%, #b04020 0%, transparent 70%),
    linear-gradient(180deg, #3a0e08 0%, #6b1f16 40%, #c04525 100%);
}
.vp-tome.lore-gron {
  --lore-hue:        #4a7c3a;
  --lore-deep:       #1e4020;
  --lore-glow:       rgba(74, 124, 58, 0.20);
  --lore-paper-tint: linear-gradient(180deg, #f0f4e8 0%, #d8e4c8 100%);
  --lore-scene:
    radial-gradient(ellipse 80% 50% at 50% 100%, #0e2412 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 70%, #1e4020 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 80% 30%, #5a8a4a 0%, transparent 70%),
    linear-gradient(180deg, #1e3020 0%, #2e5028 40%, #6a8a52 100%);
}
.vp-tome.lore-gul {
  --lore-hue:        #c89630;
  --lore-deep:       #6b4a10;
  --lore-glow:       rgba(200, 150, 48, 0.22);
  --lore-paper-tint: linear-gradient(180deg, #fbf3dd 0%, #f0e0a8 100%);
  --lore-scene:
    radial-gradient(ellipse 90% 50% at 50% 100%, #4a3008 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 60%, #8a6018 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 70% 30%, #d8a838 0%, transparent 70%),
    linear-gradient(180deg, #5a4010 0%, #a87820 40%, #e8c050 100%);
}
.vp-tome.lore-lila {
  --lore-hue:        #6a3a8a;
  --lore-deep:       #2a1042;
  --lore-glow:       rgba(106, 58, 138, 0.20);
  --lore-paper-tint: linear-gradient(180deg, #f4ecf6 0%, #dcc8e2 100%);
  --lore-scene:
    radial-gradient(ellipse 80% 50% at 50% 100%, #150828 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 60%, #2a1042 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 70% 30%, #6a3a8a 0%, transparent 70%),
    linear-gradient(180deg, #1a0828 0%, #3a2050 40%, #7a508a 100%);
}
.vp-tome.lore-orange {
  --lore-hue:        #b8651e;
  --lore-deep:       #6b3010;
  --lore-glow:       rgba(184, 101, 30, 0.22);
  --lore-paper-tint: linear-gradient(180deg, #fbeede 0%, #f0d5b0 100%);
  /* Desert: sand, stone, sky */
  --lore-scene:
    radial-gradient(ellipse 100% 40% at 50% 100%, #4a1f08 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 20% 75%, #8a4818 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 80% 65%, #a85820 0%, transparent 60%),
    radial-gradient(ellipse 100% 30% at 50% 30%, #d8884a 0%, transparent 65%),
    linear-gradient(180deg, #6a3818 0%, #a85820 40%, #d49060 100%);
}
.vp-tome.lore-bla {
  --lore-hue:        #2c6a9a;
  --lore-deep:       #0e2a50;
  --lore-glow:       rgba(44, 106, 154, 0.20);
  --lore-paper-tint: linear-gradient(180deg, #e8effa 0%, #c8d8ea 100%);
  --lore-scene:
    radial-gradient(ellipse 80% 50% at 50% 100%, #051828 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 60%, #0e2a50 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 70% 30%, #2c6a9a 0%, transparent 70%),
    linear-gradient(180deg, #082040 0%, #1a4870 40%, #6090b8 100%);
}

/* When a lore class is on .vp-tome, override paper background, head color,
   drop-cap, dividers, section labels — keep parchment readable, sprinkle hue */
.vp-tome[class*="lore-"] {
  background:
    radial-gradient(ellipse at 30% 0%, var(--lore-glow) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, var(--lore-glow) 0%, transparent 55%),
    var(--tome-paper-tint, var(--tome-bg-warm));
  /* The base parchment underneath the tint */
  background-color: #efe6cf;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    inset 0 0 80px var(--lore-glow),
    inset 0 0 160px rgba(120, 90, 50, 0.12);
}
.vp-tome[class*="lore-"] .vp-tome__dropcap { color: var(--lore-deep); }
.vp-tome[class*="lore-"] .vp-tome__title   { color: var(--lore-deep); }
.vp-tome[class*="lore-"] .vp-tome__title-amp { color: var(--lore-hue); }
.vp-tome[class*="lore-"] .vp-tome__eyebrow { color: var(--lore-hue); }

/* --------------------------------------------------------------------
   PAGE FRAME — the desert / scene background wraps the parchment card.
   Use .vp-lore-frame as an outer wrapper; .vp-tome sits inside.
   -------------------------------------------------------------------- */
.vp-lore-frame {
  background: var(--lore-scene, linear-gradient(180deg, #2a1f10, #1a1510));
  padding: 32px 28px;
  position: relative;
  min-height: 100%;
}
/* Atmospheric overlay — faint vignette + film grain feel */
.vp-lore-frame::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.vp-lore-frame > * { position: relative; z-index: 1; }

/* Inherit lore-scene from .vp-tome class on the inner card */
.vp-lore-frame.lore-rod    { --lore-scene: radial-gradient(ellipse 80% 50% at 50% 100%, #2a0807 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 30% 60%, #6b1808 0%, transparent 65%), radial-gradient(ellipse 90% 60% at 70% 40%, #b04020 0%, transparent 70%), linear-gradient(180deg, #3a0e08 0%, #6b1f16 40%, #c04525 100%); }
.vp-lore-frame.lore-gron   { --lore-scene: radial-gradient(ellipse 80% 50% at 50% 100%, #0e2412 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 20% 70%, #1e4020 0%, transparent 65%), radial-gradient(ellipse 90% 60% at 80% 30%, #5a8a4a 0%, transparent 70%), linear-gradient(180deg, #1e3020 0%, #2e5028 40%, #6a8a52 100%); }
.vp-lore-frame.lore-gul    { --lore-scene: radial-gradient(ellipse 90% 50% at 50% 100%, #4a3008 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 30% 60%, #8a6018 0%, transparent 65%), radial-gradient(ellipse 90% 60% at 70% 30%, #d8a838 0%, transparent 70%), linear-gradient(180deg, #5a4010 0%, #a87820 40%, #e8c050 100%); }
.vp-lore-frame.lore-lila   { --lore-scene: radial-gradient(ellipse 80% 50% at 50% 100%, #150828 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 30% 60%, #2a1042 0%, transparent 65%), radial-gradient(ellipse 90% 60% at 70% 30%, #6a3a8a 0%, transparent 70%), linear-gradient(180deg, #1a0828 0%, #3a2050 40%, #7a508a 100%); }
.vp-lore-frame.lore-orange { --lore-scene: radial-gradient(ellipse 100% 40% at 50% 100%, #4a1f08 0%, transparent 70%), radial-gradient(ellipse 80% 40% at 20% 75%, #8a4818 0%, transparent 60%), radial-gradient(ellipse 80% 40% at 80% 65%, #a85820 0%, transparent 60%), radial-gradient(ellipse 100% 30% at 50% 30%, #d8884a 0%, transparent 65%), linear-gradient(180deg, #6a3818 0%, #a85820 40%, #d49060 100%); }
.vp-lore-frame.lore-bla    { --lore-scene: radial-gradient(ellipse 80% 50% at 50% 100%, #051828 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 30% 60%, #0e2a50 0%, transparent 65%), radial-gradient(ellipse 90% 60% at 70% 30%, #2c6a9a 0%, transparent 70%), linear-gradient(180deg, #082040 0%, #1a4870 40%, #6090b8 100%); }

/* --------------------------------------------------------------------
   LÄROR-CARD — illuminated grid of the 6 lores (replaces the table)
   "Fire-tree lighting": each card glows in its own colour from a single
   point. Use on the Kristallsejdare overview page.
   -------------------------------------------------------------------- */
.vp-lore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 8px;
}
.vp-lore-card {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 10% 0%, var(--lc-glow) 0%, transparent 60%),
    linear-gradient(180deg, #fdf8ee 0%, #f3e8d0 100%);
  border: 1px solid var(--tome-border-2, #c7b89d);
  border-radius: 2px;
  padding: 18px 18px 16px 56px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 0 #e9dcb8;
  overflow: hidden;
}
.vp-lore-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.7),
    inset 0 0 30px var(--lc-glow),
    0 6px 18px rgba(0,0,0,0.12);
}
/* Left-edge accent stripe in lore colour */
.vp-lore-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--lc-hue);
  box-shadow: 0 0 12px var(--lc-glow);
}
/* Wax-seal medallion */
.vp-lore-seal {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 50%),
    var(--lc-hue);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.3),
    inset 0 2px 2px rgba(255,255,255,0.4),
    0 0 16px var(--lc-glow);
}
.vp-lore-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--lc-deep);
  margin-bottom: 4px;
}
.vp-lore-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 12.5px;
  color: var(--tome-ink, #2b241c);
  margin-top: 6px;
}
.vp-lore-meta-key {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tome-muted-2, #8a7a62);
  padding-top: 2px;
}
.vp-lore-meta-val { color: var(--tome-ink, #2b241c); }

/* --------------------------------------------------------------------
   STAT-TABLE — clean parchment table for inline data
   (replaces the boring HTML tables in the Kristallsejdare overview)
   -------------------------------------------------------------------- */
.vp-tome__stat-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 14px;
}
.vp-tome__stat-table th {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tome-muted-2, #8a7a62);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--tome-gold, #a8935e);
}
.vp-tome__stat-table td {
  padding: 10px 14px;
  border-bottom: 1px dotted var(--tome-border-2, #c7b89d);
  vertical-align: middle;
}
.vp-tome__stat-table tr:last-child td { border-bottom: none; }
.vp-tome__stat-table tbody tr:nth-child(even) td {
  background: rgba(214, 198, 162, 0.14);
}

/* --------------------------------------------------------------------
   EVOLUTION-BLOCK — a numbered spell/evolution like "5. Kung kallus arsenal"
   with CV thresholds as inset rows.
   -------------------------------------------------------------------- */
.vp-tome__evolution { margin: 18px 0; }
.vp-tome__evo-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
}
.vp-tome__evo-num {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--lore-hue, var(--tome-gold, #a8935e));
  line-height: 1;
  text-shadow: 0 0 16px var(--lore-glow, transparent);
}
.vp-tome__evo-name {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tome-ink, #2b241c);
}
.vp-tome__evo-tagline {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: var(--tome-muted, #6b5b47);
  font-size: 15px;
  margin: 2px 0 12px;
  padding-left: 44px;
}
.vp-tome__evo-tier {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 10px 0 10px 44px;
  border-top: 1px dotted var(--tome-border-2, #c7b89d);
}
.vp-tome__evo-tier:last-child { border-bottom: 1px dotted var(--tome-border-2, #c7b89d); }
.vp-tome__evo-cv {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--lore-deep, var(--tome-ink, #2b241c));
  letter-spacing: 0.04em;
}
.vp-tome__evo-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tome-ink, #2b241c);
  max-width: 64ch;
}

/* Lore hero image — doubled height (200px → 400px) */
.vp-tome[class*="lore-"] > img:not(.vp-lore-symbol) {
    max-height: 400px !important;
}