/* Guild of Old Magick: a candlelit grimoire.
   Night room, lit parchment books, gold for headings and tooling, ember and frost only for spells.
   Fonts are self-hosted subsets under the SIL Open Font License (see /fonts). */

@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("../fonts/im-fell-english.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  /* Room */
  --night: #0e0c15;
  --night-2: #15121e;
  --night-3: #1a1622;
  --line: rgb(217 174 95 / .18);       /* gold hairline */
  --text: #ebe0c8;                     /* 14.8:1 */
  --text-2: #cfc3a8;                   /* 11:1 */
  --text-3: #a3957a;                   /* 6.6:1 */
  --gold: #d9ae5f;                     /* headings, tooling 9.4:1 */
  --gold-hi: #f0cf86;
  --gold-deep: #a9802f;
  --ember: #e2643a;                    /* pilcrows, fire */
  --link: #e3bc6e;                     /* gold links */

  /* Books */
  --parchment: #efe4c8;
  --parchment-edge: #d6c296;
  --ink: #2a2018;                      /* 11.7:1 on parchment */
  --ink-3: #6e5b46;
  --rubric: #a3261b;                   /* active spells 5.5:1 */
  --rubric-hot: #c2321f;
  --frost-ink: #23447a;
  --leather-a: #4a1c13;
  --leather-b: #18264a;

  /* Type */
  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "IM Fell English", "Alegreya", Georgia, serif;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-32: 2rem;
  --t-h1: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);

  /* Space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 2px; --r2: 4px; --r3: 8px; --r4: 12px;
  --fast: 150ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --measure: 40rem;
  --wide: 72rem;
  --stage: 90rem;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); background: var(--night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 400 var(--t-18)/1.6 var(--serif);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold-hi); text-decoration-thickness: 2px; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: var(--r1); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -100px; padding: var(--s2) var(--s3); background: var(--gold); color: var(--night); z-index: 10; }
.skip:focus { top: var(--s3); }

/* Drifting embers behind everything (assets/duel.js). */
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.masthead, main, .colophon { position: relative; z-index: 1; }

/* Header */
.masthead { border-bottom: 1px solid var(--line); background: rgb(14 12 21 / .85); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.wordmark { font: 400 var(--t-22)/1.2 var(--display); color: var(--gold); text-decoration: none; }
.wordmark:hover { color: var(--gold-hi); text-decoration: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); font-size: var(--t-16); text-decoration: none; }
.nav a:hover { color: var(--gold-hi); text-decoration: underline; }

/* Opening: the illuminated title over a candlelit room */
.opening {
  padding-block: var(--s7) 0;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgb(217 174 95 / .08), transparent 70%);
}
.opening-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.status { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--text-3); font-size: var(--t-16); font-variant-caps: all-small-caps; letter-spacing: .08em; }
.status span + span::before { content: "\2726"; margin-right: var(--s4); color: var(--gold-deep); font-size: .8em; }
@media (max-width: 600px) { .status span + span::before { content: none; } }
h1 {
  font: 400 var(--t-h1)/1 var(--display);
  color: var(--text);
  letter-spacing: -0.01em;
  text-shadow: 0 0 28px rgb(217 174 95 / .25);
  text-wrap: balance;
}
h1::first-letter {
  float: left;
  margin: .02em .12em 0 0;
  padding: .1em .16em .02em;
  font-size: 1.62em;
  line-height: .86;
  color: var(--gold-hi);
  text-shadow: 0 0 18px rgb(255 190 90 / .55);
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgb(217 174 95 / .22) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgb(217 174 95 / .22) 7px 8px),
    linear-gradient(160deg, #7a1d14, #4a0f0a);
  border: 5px double var(--gold);
  border-radius: var(--r1);
  box-shadow: 0 0 24px rgb(255 150 60 / .25);
}
.opening-row { display: grid; gap: var(--s5); }
.dek { max-width: 36rem; font-size: var(--t-22); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.dek strong { color: var(--text); font-weight: 600; }
.opening-actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s2) var(--s5);
  border: 1px solid var(--gold); border-radius: var(--r2); background: var(--gold); color: var(--night);
  font: 600 var(--t-16)/1.2 var(--serif); text-decoration: none; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { background: var(--gold-hi); color: var(--night); text-decoration: none; box-shadow: 0 0 20px rgb(240 207 134 / .35); }
.btn-quiet { background: transparent; color: var(--gold); }
.btn-quiet:hover { background: rgb(217 174 95 / .12); color: var(--gold-hi); }

/* The duel: two big spell books on a dark table */
.duel {
  margin-top: var(--s6);
  padding: var(--s4) var(--gutter) var(--s4);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(ellipse 45% 70% at 25% 55%, rgb(255 160 70 / .12), transparent 70%),
    radial-gradient(ellipse 45% 70% at 75% 55%, rgb(110 140 255 / .10), transparent 70%),
    rgb(21 18 30 / .8);
}
.duel-stage { max-width: var(--stage); margin-inline: auto; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s7), 6vw, var(--s9)); padding: var(--s3) 0 var(--s5); }
.duel-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.book { position: relative; z-index: 1; }
.book-name { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); color: var(--text-3); font-size: var(--t-16); }
.book-name b { color: var(--gold); font-weight: 600; }
.cover {
  position: relative;
  padding: 22px;
  border-radius: var(--r4);
  background:
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / .06), transparent 60%),
    repeating-linear-gradient(115deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 6px),
    var(--leather-a);
  box-shadow:
    inset 0 0 0 1px rgb(240 207 134 / .35),
    0 2px 0 rgb(0 0 0 / .4),
    0 30px 60px -24px #000,
    0 0 90px -20px rgb(255 150 60 / .28);
  transition: box-shadow 400ms var(--ease);
}
.book[data-side="b"] .cover {
  background:
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / .06), transparent 60%),
    repeating-linear-gradient(115deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 6px),
    var(--leather-b);
  box-shadow:
    inset 0 0 0 1px rgb(240 207 134 / .35),
    0 2px 0 rgb(0 0 0 / .4),
    0 30px 60px -24px #000,
    0 0 90px -20px rgb(110 140 255 / .3);
}
/* Gold tooling: an inner rule and four corner studs */
.cover::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgb(217 174 95 / .5); border-radius: var(--r3); pointer-events: none; }
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--r4);
  background:
    radial-gradient(circle at 7px 7px, var(--gold) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--gold) 0 3px, transparent 3.5px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--gold) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--gold) 0 3px, transparent 3.5px);
}
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r2); overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.page {
  position: relative; display: grid; align-content: start; gap: var(--s1);
  min-height: 34rem; padding: var(--s5) var(--s5) var(--s7);
  list-style: none;
  background: linear-gradient(90deg, #e2d2ab 0%, var(--parchment) 4%, var(--parchment) 90%, #d3bf92 100%);
  transition: box-shadow 300ms var(--ease);
}
.page + .page { background: linear-gradient(90deg, #d3bf92 0%, var(--parchment) 8%, var(--parchment) 96%, #e2d2ab 100%); }
.page.is-hit { box-shadow: inset 0 0 60px rgb(255 120 50 / .28); }
.book[data-side="a"] .page.is-hit { box-shadow: inset 0 0 60px rgb(90 120 255 / .3); }
.folio { position: absolute; bottom: var(--s3); right: var(--s5); color: var(--ink-3); font-size: var(--t-14); font-variant-numeric: lining-nums tabular-nums; }
.page + .page .folio { right: auto; left: var(--s5); }
.spell { position: relative; padding-bottom: var(--s1); font-size: var(--t-16); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; transition: color var(--fast) var(--ease), text-shadow var(--fast) var(--ease); }
.spell-active { color: var(--rubric); font-weight: 700; letter-spacing: .04em; }
/* As in the game: a word's colour is its element (your book Fire, the saved book Water); passives are lowercase italics. */
.book[data-side="a"] .spell { color: #a3261b; }
.book[data-side="b"] .spell { color: #23447a; }
.spell-passive { font-style: italic; }
.cd { position: absolute; left: 0; bottom: 0; width: min(100%, 8.5rem); height: 2px; background: rgb(169 128 47 / .22); overflow: hidden; }
.cd::after { content: ""; display: block; height: 100%; background: var(--gold-deep); transform-origin: left; transform: scaleX(var(--p, .5)); }
.cd i { display: block; height: 100%; background: var(--gold-deep); transform-origin: left; }
.cd.has-fill::after { display: none; }
.spell.is-casting { color: var(--rubric-hot); text-shadow: 0 0 10px rgb(255 140 60 / .9), 0 0 2px rgb(255 200 120 / .9); }
.spell.is-hit { color: var(--frost-ink); text-shadow: 0 0 8px rgb(120 160 255 / .8); }
.sigil { position: absolute; left: 50%; top: 45%; width: 13rem; height: 13rem; margin: -6.5rem 0 0 -6.5rem; z-index: 0; fill: none; stroke: rgb(217 174 95 / .35); stroke-width: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgb(255 190 90 / .35)); }
@media (prefers-reduced-motion: no-preference) { .sigil { animation: turn 60s linear infinite; } .is-still .sigil { animation-play-state: paused; } }
@keyframes turn { to { transform: rotate(360deg); } }
.vs { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 2; color: var(--gold); font: 400 var(--t-32)/1 var(--display); text-shadow: 0 0 22px rgb(255 190 90 / .6); pointer-events: none; }
.duel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); width: min(100%, var(--wide)); margin-inline: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.duel-foot p { max-width: 48rem; color: var(--text-2); font-size: var(--t-16); }
.duel-toggle { min-width: 10rem; }

/* Sections */
.chapter { padding-block: var(--s8); border-top: 1px solid var(--line); }
.chapter:nth-of-type(odd) { background: linear-gradient(180deg, rgb(26 22 34 / .65), rgb(14 12 21 / 0)); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 20rem); justify-content: space-between; gap: var(--s5) var(--s8); align-items: start; }
.side { display: grid; gap: var(--s5); }
h2 { font: 400 var(--t-32)/1.15 var(--display); color: var(--gold); text-shadow: 0 0 20px rgb(217 174 95 / .2); text-wrap: balance; }
h2::before { content: "\00B6\00A0"; color: var(--ember); }
@supports (content: "x" / "") { h2::before { content: "\00B6\00A0" / ""; } }
.chapter-body > * + * { margin-top: var(--s4); }
.chapter-body > h2 + * { margin-top: var(--s5); }
.lead { font-size: var(--t-22); line-height: 1.45; color: var(--text-2); }
.margin-note { padding-top: var(--s2); border-top: 2px solid var(--gold-deep); color: var(--text-2); font-size: var(--t-16); line-height: 1.5; }
.margin-note b { color: var(--text); font-weight: 600; }

.round { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--s6); list-style: none; counter-reset: part; }
.round li { padding: var(--s1) var(--s5) var(--s2); border-left: 1px solid var(--line); counter-increment: part; }
.round li:first-child { padding-left: 0; border-left: 0; }
.round h3 { display: flex; align-items: baseline; gap: var(--s2); font: 400 var(--t-22)/1.2 var(--display); color: var(--text); }
.round h3::before { content: counter(part, upper-roman) "."; color: var(--gold); }
.round p { margin-top: var(--s2); color: var(--text-2); }

.rules { display: grid; gap: var(--s3); margin-top: var(--s5); list-style: none; }
.rules li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.rules .key { color: var(--text); font-weight: 600; }
.rules .key-active { color: var(--ember); font-weight: 700; letter-spacing: .04em; }
.rules span:last-child { color: var(--text-2); }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin-top: var(--s5); }
.facts dt { color: var(--text-3); font-variant-caps: all-small-caps; letter-spacing: .08em; }
.facts dd { color: var(--text); }
.facts-side { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; padding-top: var(--s2); border-top: 2px solid var(--gold-deep); }
.facts-side dd + dt { margin-top: var(--s3); }

/* Footer */
.colophon { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--t-16); }
.colophon .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6); }
.colophon .mark { font: 400 var(--t-22)/1.2 var(--display); color: var(--gold); }

/* Desktop: keep the books on the first screen */
@media (min-width: 1000px) {
  .opening { padding-block: clamp(var(--s3), 3vh, var(--s6)) 0; }
  .opening-grid { gap: clamp(var(--s2), 1.8vh, var(--s4)); }
  h1 { font-size: min(var(--t-h1), 8.5vh); }
  .opening-row { grid-template-columns: minmax(0, 36rem) auto; justify-content: start; align-items: end; gap: var(--s7); }
  .duel { margin-top: clamp(var(--s4), 2.5vh, var(--s5)); padding-top: var(--s3); }
}

/* Phones and narrow windows */
@media (max-width: 900px) {
  .chapter-grid { grid-template-columns: minmax(0, 1fr); }
  .margin-note, .side { max-width: var(--measure); }
  .round { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .round li, .round li:first-child { padding: var(--s3) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .opening { padding-block: var(--s6) var(--s5); }
  .duel { padding-inline: var(--gutter); }
  .duel-stage { gap: var(--s5); padding-block: var(--s2); }
  .book-name { display: grid; gap: 0; font-size: var(--t-14); }
  .cover { padding: 9px; border-radius: var(--r3); }
  .cover::before { inset: 4px; }
  .spread { grid-template-columns: 1fr; }
  .page + .page { display: none; }
  .page { min-height: 0; gap: var(--s1); padding: var(--s3) var(--s2) var(--s6) var(--s3); background: linear-gradient(90deg, #e2d2ab 0%, var(--parchment) 4%, var(--parchment) 96%, #e2d2ab 100%); }
  .page .spell:nth-of-type(n+13) { display: none; }
  .folio { right: var(--s3); bottom: var(--s2); }
  .spell { padding-bottom: var(--s1); font-size: 0.8125rem; line-height: 1.25; letter-spacing: 0; }
  .spell-active { letter-spacing: .01em; }
  .cd { width: 100%; }
  .vs { font-size: var(--t-22); top: 50%; }
  .sigil { width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; top: 50%; }
  h1::first-letter { float: none; margin: 0 .04em 0 0; padding: .02em .1em 0; font-size: 1em; line-height: 1; border-width: 4px; }
  .rules li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .chapter { padding-block: var(--s7); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd + dt { margin-top: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Patch notes (homepage) */
.patch-when { color: var(--text-3); font-variant-caps: all-small-caps; letter-spacing: .08em; }
.patch-next > * + * { margin-top: var(--s2); }
.patch-next ul { padding-left: 1.2em; list-style: disc; }
.patch-next li + li { margin-top: var(--s1); }