/* =====================================================================
   Halvel — "RUNESTONE SAGA" THEME
   An 80s/90s tabletop-RPG rulebook: one great parchment page floating
   in an indigo night, flanked by heavy carved runestones whose runes
   burn with neon light.

   Loaded AFTER site.css so these rules win the cascade. Strategy:
   1. Re-skin the world (night sky, stars, nebula glow).
   2. Turn .main into a continuous parchment tome page and remap the
      dark-surface text tokens (--text/--muted/--gold*) to ink within it.
   3. Restore light tokens inside the dark "illustration plate" boxes
      (hero, forum hero, hub cards, buttons).
   4. Add the runestone monoliths.
   ===================================================================== */

:root {
  /* Night-sky world surfaces */
  --bg: #0a0618;
  --bg-deep: #050310;
  --leather: #171028;
  --wood: #221634;
  --wood-light: #32204a;

  /* Neon rune palette */
  --rune-cyan: #46f3ff;
  --rune-magenta: #ff4fd8;
  --rune-venom: #82ff5a;
  --rune-ember: #ffa235;
  --rune-violet: #b08cff;
  --rune-gold: #ffd24a;

  --accent: #46f3ff;

  /* Ink used on the parchment page */
  --page-ink: #2f2008;
  --page-ink-soft: #54401f;
  --page-muted: #6d5836;
  --page-amber: #8a4a0e;
  --page-heading: #4a2406;

  --stone-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.34  0 0 0 0 0.4  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

::selection { background: rgba(70, 243, 255, 0.3); color: #04121a; }

/* ---------------------------------------------------------------------
   Night sky — indigo void, nebula glow, pinprick stars
   --------------------------------------------------------------------- */
.site-bg {
  background-image:
    radial-gradient(1px 1px at 24px 38px, rgba(255, 255, 255, 0.8), transparent 1.5px),
    radial-gradient(1px 1px at 142px 116px, rgba(180, 230, 255, 0.7), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 230px 60px, rgba(255, 220, 255, 0.65), transparent 2px),
    radial-gradient(1px 1px at 86px 196px, rgba(255, 255, 255, 0.5), transparent 1.5px),
    radial-gradient(1px 1px at 196px 230px, rgba(170, 255, 220, 0.45), transparent 1.5px),
    radial-gradient(ellipse 60% 40% at 12% 12%, rgba(255, 79, 216, 0.13), transparent 60%),
    radial-gradient(ellipse 60% 42% at 88% 18%, rgba(70, 243, 255, 0.11), transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 108%, rgba(120, 60, 200, 0.22), transparent 60%),
    linear-gradient(180deg, #181034 0%, #0a0618 48%, #050310 100%);
  background-size:
    280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px,
    auto, auto, auto, auto;
  background-repeat:
    repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;
}
.site-bg__vignette {
  background: radial-gradient(ellipse 85% 65% at 50% 38%, transparent, rgba(2, 1, 8, 0.6) 100%);
}
.site-bg__grain { opacity: 0.14; }

/* Retint the old gold corner sprites to fit the night */
.site-deco__sprite { opacity: 0.07; }
.site-deco__torch {
  background: radial-gradient(circle, #b9f6ff 0%, #46c8ff 45%, rgba(70, 200, 255, 0) 75%);
  box-shadow:
    0 0 36px 18px rgba(70, 220, 255, 0.25),
    0 0 80px 40px rgba(120, 80, 255, 0.18);
}

/* ---------------------------------------------------------------------
   Topbar — midnight wood, gold rules, neon tagline
   --------------------------------------------------------------------- */
.topbar {
  background:
    linear-gradient(180deg, #2b1c44 0%, #170f29 100%),
    var(--wood-noise);
  background-blend-mode: multiply;
  border-bottom-color: #4a3566;
  box-shadow:
    inset 0 -1px 0 rgba(176, 140, 255, 0.25),
    0 4px 22px rgba(0, 0, 0, 0.65);
}
.brand-tagline {
  font-family: "Uncial Antiqua", "MedievalSharp", serif;
  color: var(--rune-cyan);
  text-shadow: 0 0 8px rgba(70, 243, 255, 0.55);
}
.nav > a:hover {
  color: var(--rune-cyan);
  text-shadow: 0 0 10px rgba(70, 243, 255, 0.45);
}
.nav > a::after {
  background: linear-gradient(90deg, transparent, var(--rune-cyan), transparent);
}

/* Neon pennant bunting */
.bunting > span:nth-child(5n+1) { background: linear-gradient(180deg, #ff4fd8, #8a1070); }
.bunting > span:nth-child(5n+2) { background: linear-gradient(180deg, #ffd24a, #8a6a1b); }
.bunting > span:nth-child(5n+3) { background: linear-gradient(180deg, #46f3ff, #0e5d8a); }
.bunting > span:nth-child(5n+4) { background: linear-gradient(180deg, #82ff5a, #1f6a18); }
.bunting > span:nth-child(5n)   { background: linear-gradient(180deg, #b08cff, #4a2a8a); }

/* ---------------------------------------------------------------------
   THE TOME PAGE — .main becomes one continuous parchment sheet
   --------------------------------------------------------------------- */
.main {
  /* Remap dark-surface tokens to ink: every var(--text)/var(--muted)/
     var(--gold-bright) descendant turns parchment-readable. */
  --text: var(--page-ink);
  --muted: var(--page-muted);
  --ink-soft: var(--page-ink-soft);
  --gold-bright: var(--page-amber);
  --gold: #8a5a14;

  background:
    var(--parchment-noise),
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255, 250, 225, 0.55), transparent 55%),
    linear-gradient(180deg, var(--vellum) 0%, var(--parchment) 45%, var(--parchment-2) 100%);
  color: var(--page-ink);
  border: 1px solid #8a6a1b;
  border-radius: 8px;
  margin: 1.75rem auto 2rem;
  padding: 2.5rem clamp(1.1rem, 4vw, 3rem) 3rem;
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.5),
    inset 0 0 0 4px rgba(138, 106, 27, 0.85),
    inset 0 0 0 5px rgba(255, 240, 200, 0.35),
    inset 0 0 70px rgba(110, 70, 20, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 90px rgba(120, 80, 255, 0.12);
}
/* Gold corner scrollwork on the page itself */
.main::before,
.main::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 44px;
  height: 44px;
  background: var(--deco-corner) center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
}
.main::before { left: 12px; }
.main::after  { right: 12px; transform: scaleX(-1); }

/* Page headings: illuminated-manuscript ink instead of glowing gold */
.main > h1,
.wiki-content > h1,
.news-page-header h1,
.news-article-header h1,
.thread-title-row h1,
.forum-page-title,
.download-header-title {
  color: var(--page-heading);
  text-shadow: 0 1px 0 rgba(255, 246, 215, 0.7);
  filter: none;
}
.legal-section h2,
.news-article-content h3 {
  color: var(--page-heading);
}
.news-item-title a:hover { color: #7a3a08; }

/* Links written in red-brown chapter ink (:where keeps specificity low
   so plate-local link colors below can still win) */
.main a:where(:not(.btn):not(.nav-play):not(.wiki-hub-card-link):not(.footer-cta)) {
  color: #8a3f12;
}
.main a:where(:not(.btn):not(.nav-play):not(.wiki-hub-card-link):not(.footer-cta)):hover {
  color: #c8642b;
}
.decree-strip a:not(.btn),
.hero-content a:not(.btn),
.forum-hero a:not(.btn),
.forum-guest-banner a:not(.btn),
.wiki-detail-hero a:not(.btn),
.wiki-hub-card a,
.news-article-hero a {
  color: #ffd87a;
}
.decree-strip a:not(.btn):hover,
.hero-content a:not(.btn):hover,
.forum-hero a:not(.btn):hover,
.forum-guest-banner a:not(.btn):hover,
.wiki-detail-hero a:not(.btn):hover {
  color: #fff3c7;
}

/* Surfaces that were dark-translucent now read as aged-paper insets */
.gear-tier-block {
  background: rgba(255, 246, 215, 0.5);
  border-color: rgba(122, 86, 28, 0.5);
}
.gear-tier-block[open] { background: rgba(255, 246, 215, 0.65); }
.gear-tier-class-tip {
  background: rgba(120, 80, 200, 0.1);
  border-color: rgba(110, 70, 190, 0.3);
}
.download-notes code {
  background: rgba(122, 86, 28, 0.14);
  color: #6b3a08;
}
.wiki-cat-pill {
  background: rgba(122, 86, 28, 0.1);
  border-color: rgba(122, 86, 28, 0.5);
  color: #6b3a08;
}
.wiki-cat-pill:hover {
  background: rgba(201, 162, 39, 0.22);
  border-color: rgba(122, 86, 28, 0.8);
}
.wiki-items-search {
  background: rgba(255, 250, 230, 0.9);
  border-color: rgba(122, 86, 28, 0.55);
  color: var(--page-ink);
}

/* News feed becomes an aged-paper chronicle inset */
.news-list {
  background: rgba(255, 246, 215, 0.5);
  border-color: rgba(122, 86, 28, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.6), 0 4px 14px rgba(60, 35, 8, 0.25);
}
.news-item { border-bottom-color: rgba(122, 86, 28, 0.4); }
.news-item-cat {
  background: rgba(60, 90, 150, 0.12);
  border-color: rgba(60, 90, 150, 0.45);
  color: #2a4a7a;
}

/* Panels become quires laid on the page — soften their shadows */
.panel,
.forum-cat-card,
.download-card,
.forum-composer,
.thread-reply-box,
.wiki-sidebar-inner {
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.45),
    inset 0 0 0 3px #8a6a1b,
    0 6px 18px rgba(60, 35, 8, 0.3);
}

/* ---------------------------------------------------------------------
   Dark "illustration plates" inside the page keep light lettering
   --------------------------------------------------------------------- */
.hero-content,
.forum-hero,
.forum-guest-banner,
.wiki-hub-card,
.armory-view-root,
.news-article-hero,
.decree-strip,
.wiki-detail-hero,
.wiki-monster-viewer-toolbar,
.wiki-map-toolbar {
  --text: #f3e7cb;
  --muted: #b5a279;
  --ink-soft: #d4c5a0;
  --gold-bright: #ffd87a;
  --gold: #c9a227;
}
.wiki-monster-anim-btn { color: #ffd87a; }
.btn { color: #f3e7cb; }
.btn-primary { color: #1c1306; }
.btn-ghost { color: #b5a279; }
.btn-ghost:hover { color: #ffd87a; }

/* Hero plate — 80s box-art dusk with a neon horizon */
.hero-box {
  border-color: rgba(176, 140, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 18px 50px rgba(10, 4, 30, 0.7),
    inset 0 0 90px rgba(120, 80, 255, 0.14);
}
.hero-art {
  background:
    radial-gradient(ellipse 90% 70% at 50% 112%, rgba(255, 79, 216, 0.3), transparent 55%),
    radial-gradient(ellipse 60% 50% at 22% 18%, rgba(70, 243, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 26%, rgba(176, 140, 255, 0.2), transparent 60%),
    linear-gradient(170deg, #150d33 0%, #2a1244 48%, #0c1230 100%);
}
.hero-title {
  filter:
    drop-shadow(0 0 16px rgba(70, 243, 255, 0.22))
    drop-shadow(0 0 34px rgba(255, 79, 216, 0.16));
}
.hero-sub {
  font-family: "Uncial Antiqua", "MedievalSharp", serif;
  color: var(--rune-cyan);
  text-shadow: 0 0 10px rgba(70, 243, 255, 0.6);
}
.hero-sub::before,
.hero-sub::after {
  background: linear-gradient(90deg, transparent, var(--rune-cyan));
}
.hero-deco--dragon-tl { display: none; }
.hero-deco--swords-br { opacity: 0.12; }

/* ---------------------------------------------------------------------
   Footer — carved into the night below the page
   --------------------------------------------------------------------- */
.footer { border-top-color: rgba(176, 140, 255, 0.3); }
.footer-cta:hover {
  box-shadow: 0 0 22px rgba(70, 243, 255, 0.25);
}

/* =====================================================================
   THE RUNESTONES
   Heavy basalt monoliths fixed at the page gutters, carved with
   Elder Futhark words that burn in neon. Markup:
     .runestones > .runestone--left/right > .runestone__rock > .rune-word*
   ===================================================================== */
.runestones {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.runestone {
  position: absolute;
  top: 52%;
  height: min(76vh, 780px);
  width: var(--stone-w, 132px);
}
.runestone--left  { left: clamp(8px, calc((100vw - 1180px) / 2 - var(--stone-w) - 18px), 120px); transform: translateY(-50%) rotate(-1.6deg); }
.runestone--right { right: clamp(8px, calc((100vw - 1180px) / 2 - var(--stone-w) - 18px), 120px); transform: translateY(-50%) rotate(1.8deg); }

/* Ambient neon halo bleeding onto the night around the stone */
.runestone::before {
  content: "";
  position: absolute;
  inset: -18% -55%;
  filter: blur(34px);
  opacity: 0.55;
  animation: runeHalo 7s ease-in-out infinite;
}
.runestone--left::before {
  background:
    radial-gradient(ellipse 60% 28% at 50% 16%, rgba(70, 243, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 60% 28% at 50% 50%, rgba(255, 79, 216, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 28% at 50% 84%, rgba(130, 255, 90, 0.3), transparent 70%);
}
.runestone--right::before {
  background:
    radial-gradient(ellipse 60% 28% at 50% 16%, rgba(255, 162, 53, 0.36), transparent 70%),
    radial-gradient(ellipse 60% 28% at 50% 50%, rgba(176, 140, 255, 0.36), transparent 70%),
    radial-gradient(ellipse 60% 28% at 50% 84%, rgba(255, 210, 74, 0.32), transparent 70%);
}
@keyframes runeHalo {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.7; }
}

/* Ground shadow + reflected light at the foot */
.runestone::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -26px;
  height: 44px;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 75%);
  filter: blur(4px);
}

/* The monolith itself — chunky, hand-hewn, 80s-module-cover heavy */
/* Wrapper carries the drop-shadow rim (a filter on the clipped element
   itself would have its shadow clipped away with the rest of the overflow) */
.runestone__cast {
  position: absolute;
  inset: 0;
  filter:
    drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95))
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65));
}
.runestone__rock {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    24% 0%, 74% 1.5%, 92% 7%, 99% 18%, 95% 34%,
    100% 52%, 96% 72%, 99% 88%, 94% 100%,
    6% 100%, 1% 86%, 5% 66%, 0% 46%, 4% 28%, 1% 13%, 10% 4%
  );
  background:
    var(--stone-noise),
    linear-gradient(105deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
    linear-gradient(285deg, rgba(0, 0, 0, 0.55) 0%, transparent 30%),
    linear-gradient(170deg, #3e4453 0%, #2d3240 28%, #222633 56%, #181a24 82%, #0e0f16 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 9% 0 12%;
}
/* Cracks and weathering carved across the face */
.runestone__rock::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(74deg, transparent 31.4%, rgba(0, 0, 0, 0.55) 31.8%, rgba(0, 0, 0, 0.55) 32.1%, rgba(160, 170, 190, 0.18) 32.5%, transparent 33%),
    linear-gradient(118deg, transparent 63.4%, rgba(0, 0, 0, 0.45) 63.8%, rgba(0, 0, 0, 0.45) 64%, rgba(160, 170, 190, 0.14) 64.4%, transparent 64.9%),
    radial-gradient(ellipse 80% 22% at 50% 101%, rgba(36, 70, 34, 0.55), transparent 70%);
  pointer-events: none;
}

/* Neon rune words, written top-to-bottom with upright staves */
.rune-word {
  position: relative;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Sans Runic", "Segoe UI Historic", serif;
  font-size: var(--rune-size, 1.7rem);
  letter-spacing: 0.32em;
  line-height: 1;
  color: var(--rune-color);
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.85),
    0 0 8px var(--rune-color),
    0 0 20px var(--rune-color),
    0 0 42px var(--rune-glow),
    1px 1px 1px rgba(0, 0, 0, 0.9);
  animation: runeBurn var(--rune-period, 4.6s) ease-in-out infinite;
}
.rune-word:nth-child(2) { animation-delay: -1.6s; }
.rune-word:nth-child(3) { animation-delay: -3.1s; }

.rune-word--cyan    { --rune-color: var(--rune-cyan);    --rune-glow: rgba(70, 243, 255, 0.55);  --rune-period: 4.2s; }
.rune-word--magenta { --rune-color: var(--rune-magenta); --rune-glow: rgba(255, 79, 216, 0.55);  --rune-period: 5.1s; }
.rune-word--venom   { --rune-color: var(--rune-venom);   --rune-glow: rgba(130, 255, 90, 0.5);   --rune-period: 3.8s; }
.rune-word--ember   { --rune-color: var(--rune-ember);   --rune-glow: rgba(255, 162, 53, 0.55);  --rune-period: 4.8s; }
.rune-word--violet  { --rune-color: var(--rune-violet);  --rune-glow: rgba(176, 140, 255, 0.55); --rune-period: 5.6s; }
.rune-word--gold    { --rune-color: var(--rune-gold);    --rune-glow: rgba(255, 210, 74, 0.55);  --rune-period: 4.4s; }

@keyframes runeBurn {
  0%, 100% { opacity: 1; }
  47%      { opacity: 0.92; }
  50%      { opacity: 0.6; }
  53%      { opacity: 0.95; }
  72%      { opacity: 0.85; }
}

/* Reveal the stones only when the gutters can hold them */
@media (min-width: 1360px) {
  .runestones { display: block; }
  .runestone { --stone-w: 96px; --rune-size: 1.35rem; }
}
@media (min-width: 1560px) {
  .runestone { --stone-w: 140px; --rune-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rune-word,
  .runestone::before { animation: none; }
}