/* ---------- Ninefall · Manual ----------
   The player's manual in English (/manual/, and /manual.html, which the build writes from it) and Thai (/manual/th/), dressed as the
   About page is (static/about/about.css; owner, 21 Oct 2026: "Rededign the manual in English and thai to match about page"): its
   night, its gold hairlines, Playfair Display for the titles and Inter for the reading. Thai reads in the device's own Thai face, which
   the browser reaches past Inter, as the old manual's did. It runs under the site's policy (static/_headers: no inline style or script)
   and needs no script. The manual is precached for offline use (scripts/build.mjs) and the About page's files are not, so it keeps its
   own copy of the About page's tokens rather than leaning on that sheet. On a phone the long tables become stacked rows, each cell
   named by its column (the --c2..--c4 labels below, in each language). */
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --deep: #050813; --night: #0b1024; --navy: #121a40; --panel: #0f1633; --line: #27305a; --line-soft: #1a2147;
  --gold: #e2b458; --gold-soft: #f4d58f; --ivory: #f3ecdc; --mist: #b9bdcc; --muted: #8a90a8;
  --gut: clamp(16px, 5vw, 72px); --top: 60px;
  --thai: "Noto Sans Thai", "Sukhumvit Set", Thonburi, "Leelawadee UI", Tahoma;
  --sans: Inter, var(--thai), system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", "Noto Serif Thai", var(--thai), Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lead: 1.65;
}
:root:lang(th) { --lead: 1.85; }   /* Thai stacks its vowels and tone marks: it wants the taller line */
* { box-sizing: border-box; }
html { background: var(--deep); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 16px); }
body { margin: 0; background: var(--deep); color: var(--ivory); font: 400 16px/var(--lead) var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
a { color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 14px; color: var(--mist); max-width: 68ch; }
strong, b { color: var(--ivory); font-weight: 600; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: .01em; text-wrap: balance; color: var(--ivory); }
code { font: 13px/1.6 var(--mono); color: var(--gold-soft); overflow-wrap: anywhere; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--night); color: var(--ivory); }
.skip:focus { left: 16px; }
.eyebrow { margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--gold); color: var(--night); font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px #f4d58f66, 0 12px 34px -14px #e2b458cc; transition: transform .25s cubic-bezier(.2, .75, .12, 1), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #f4d58f99, 0 18px 40px -14px #e2b458; }

/* ---------- the bar: the name, the language, Play ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--top); padding: 0 var(--gut); background: var(--deep); box-shadow: 0 1px 0 var(--line-soft); }
.brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ivory); text-decoration: none; font: 400 22px/1 var(--serif); }
.brand small { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.lang a { padding: 7px 11px; border-radius: 999px; color: var(--muted); font: 600 13px/1 var(--sans); text-decoration: none; }
.lang a:hover { color: var(--ivory); }
.lang a[aria-current="page"] { background: var(--navy); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.top .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 400px) { .brand small { display: none; } }

/* ---------- the opening: the night, the ring, the title ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(52px, 9vh, 112px) var(--gut) clamp(44px, 7vh, 84px); border-bottom: 1px solid var(--line-soft); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse 80% 95% at 80% 35%, #1b2454 0%, #10173d 40%, #080c20 74%, var(--deep) 100%); }
/* a few stars, as the About page's sky has them (drawn here, so the page needs no script) */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .85; background-image:
  radial-gradient(1.3px 1.3px at 6% 18%, #e9ecf7 50%, transparent 55%), radial-gradient(1px 1px at 14% 72%, #e9ecf7bb 50%, transparent 55%),
  radial-gradient(1.6px 1.6px at 23% 34%, #f4d58f 50%, transparent 55%), radial-gradient(1px 1px at 31% 86%, #e9ecf799 50%, transparent 55%),
  radial-gradient(1.2px 1.2px at 44% 12%, #e9ecf7cc 50%, transparent 55%), radial-gradient(1px 1px at 52% 58%, #e9ecf788 50%, transparent 55%),
  radial-gradient(1.5px 1.5px at 61% 26%, #e9ecf7 50%, transparent 55%), radial-gradient(1px 1px at 68% 80%, #f4d58fcc 50%, transparent 55%),
  radial-gradient(1.2px 1.2px at 77% 9%, #e9ecf7bb 50%, transparent 55%), radial-gradient(1.6px 1.6px at 86% 64%, #e9ecf7 50%, transparent 55%),
  radial-gradient(1px 1px at 93% 30%, #e9ecf7aa 50%, transparent 55%), radial-gradient(1.2px 1.2px at 97% 88%, #f4d58f99 50%, transparent 55%); }
.ring { position: absolute; z-index: -1; right: clamp(-260px, -14vw, -80px); top: 50%; width: clamp(340px, 52vw, 660px); height: auto; transform: translateY(-50%); overflow: visible; }
.ring circle { fill: none; }
.ring .glow { stroke: #e2b45826; stroke-width: 7; }
.ring .core { stroke: var(--gold); stroke-width: 1.2; }
.ring .inner { stroke: #e2b45840; stroke-width: 1; stroke-dasharray: 2 9; }
@media (max-width: 699px) { .ring { opacity: .45; right: -46vw; } }
.hero-copy { position: relative; display: grid; gap: 16px; justify-items: start; max-width: 780px; }
.hero h1 { font-size: clamp(46px, 8.6vw, 108px); line-height: .98; }
:lang(th) .hero h1 { font-size: clamp(38px, 7vw, 84px); line-height: 1.22; }
.lede { margin: 0; color: var(--mist); font-size: clamp(16px, 1.6vw, 19px); max-width: 54ch; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.chips li { padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--mist); font: 600 12.5px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.chips b { color: var(--gold-soft); font-weight: 600; }

/* ---------- the reading: a contents rail beside the chapters on a wide screen, a folded list above them on a phone ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 1040px) { .layout { grid-template-columns: 250px minmax(0, 1fr); } }
.rail { display: none; }
@media (min-width: 1040px) { .rail { display: block; position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top)); overflow-y: auto; padding: 44px 4px 32px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } }
.rail .eyebrow { margin: 0 0 12px 10px; }
.toc { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.toc a { display: grid; grid-template-columns: 2.2ch minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--mist); text-decoration: none; font-size: 14px; line-height: 1.4; }
.toc a:hover { background: var(--panel); color: var(--ivory); }
.toc .n { font: 600 12.5px/1.55 var(--sans); color: var(--gold-soft); text-align: right; font-variant-numeric: tabular-nums; }
.toc .adv { margin-top: 8px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--line-soft); }
.contents { margin: 28px 0 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.contents summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; cursor: pointer; list-style: none; font: 600 14px/1.2 var(--sans); color: var(--ivory); }
.contents summary::-webkit-details-marker { display: none; }
.contents summary::after { content: "+"; font: 400 20px/1 var(--sans); color: var(--gold-soft); }
.contents[open] summary::after { content: "\2212"; }
.contents .toc { padding: 0 8px 12px; }
@media (min-width: 1040px) { .contents { display: none; } }

.doc { min-width: 0; max-width: 780px; padding-bottom: 32px; }
.chapter { padding: 56px 0 12px; border-top: 1px solid var(--line-soft); }
.chapter:first-of-type { border-top: 0; }
.chapter > .eyebrow { margin-bottom: 10px; }
/* a chapter's number leads its level, in Inter (the self-hosted Playfair's figures hang below the line, and read as subscripts) */
.chapter > .eyebrow .n { display: inline-block; margin-right: 10px; padding-right: 10px; box-shadow: inset -1px 0 0 var(--line); color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.chapter h2 { margin: 0 0 18px; font-size: clamp(31px, 4.4vw, 46px); line-height: 1.06; }
:lang(th) .chapter h2 { line-height: 1.3; }
.chapter h3 { margin: 32px 0 10px; font-size: 23px; line-height: 1.2; }
:lang(th) .chapter h3 { line-height: 1.4; }
.chapter ol, .chapter ul { margin: 0 0 16px; padding-left: 22px; color: var(--mist); max-width: 68ch; }
.chapter li { margin: 0 0 8px; padding-left: 4px; }
.chapter li::marker { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.small { font-size: 13px; color: var(--muted); }

/* ---------- panels: a tip, a note, a card, a formula ---------- */
.tip, .note { margin: 22px 0; padding: 16px 18px; border-radius: 16px; background: var(--panel); color: var(--mist); max-width: 68ch; }
.note { box-shadow: inset 0 0 0 1px var(--line); }
.tip { box-shadow: inset 0 0 0 1px #e2b45866; }
.tip > strong:first-child, .note > strong:first-child { color: var(--gold-soft); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 10px; }
.card { padding: 18px 18px 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.card h3, .card h4 { margin: 0 0 8px; font-size: 21px; line-height: 1.22; }
:lang(th) .card h3, :lang(th) .card h4 { line-height: 1.4; }
.card p { margin: 0 0 8px; font-size: 15px; }
.card p:last-child { margin-bottom: 0; }
.formula { margin: 18px 0; padding: 16px 18px; border-radius: 16px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.formula > strong:first-child { display: block; margin-bottom: 4px; color: var(--gold-soft); }
.formula p { margin: 0 0 8px; }
.formula p:last-child { margin-bottom: 0; }
.cards .formula { margin: 0; }

/* the three Lines and their rounds */
.rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.rounds div { display: grid; gap: 6px; align-content: start; padding: 16px 16px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.rounds b { font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.rounds span { font: 400 clamp(21px, 3.4vw, 30px)/1.1 var(--serif); color: var(--ivory); white-space: nowrap; }
.rounds small { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* the Sign ring: each Sign beats the next one round it, drawn in the game's line grammar (a hairline inside a soft glow) */
.wheel { margin: 22px 0; padding: 18px 12px 16px; display: grid; justify-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 46%, #141c46 0%, var(--panel) 68%); box-shadow: inset 0 0 0 1px var(--line); }
.wheel svg { display: block; width: min(100%, 420px); height: auto; overflow: visible; }
.wheel .track { fill: none; stroke: #e2b4581c; stroke-width: 1; }
.wheel .glow { fill: none; stroke: #e2b45830; stroke-width: 6; stroke-linecap: round; }
.wheel .arc { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.wheel .head { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wheel .node { fill: var(--deep); stroke: var(--gold-soft); stroke-width: 1.4; }
.wheel text { fill: var(--ivory); font: 600 13px var(--sans); letter-spacing: .06em; }
.wheel figcaption { margin-top: 6px; max-width: 46ch; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- tables: hairline rows ---------- */
.table-wrap { margin: 18px 0 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
:lang(th) table { line-height: 1.75; }
th { padding: 0 14px 10px 0; text-align: left; vertical-align: bottom; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
td { padding: 12px 14px 12px 0; vertical-align: top; color: var(--mist); border-bottom: 1px solid var(--line-soft); }
td:first-child { color: var(--ivory); }
th:last-child, td:last-child { padding-right: 0; }
.t-sign td:nth-child(2), .t-generic td:nth-child(3), .t-exact td:first-child, .t-quick td:first-child { white-space: nowrap; }
.t-accords td:first-child { width: 10.5em; }
.t-sig td:first-child, .t-anchor td:first-child { width: 11em; }
/* the Jobs: each name with its approach under it, its Skill, what matters - a grid of three at every width, not a table of four
   (the approach, a column of its own, wrapped every row onto three lines) */
table.t-jobs, .t-jobs thead, .t-jobs tbody { display: block; }
.t-jobs tr { display: grid; grid-template-columns: 10.5em 9.5em minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; border-bottom: 1px solid var(--line-soft); }   /* the approach right under the name; the rest of a long row below it */
.t-jobs thead tr { border-bottom-color: var(--line); }
.t-jobs th, .t-jobs td { display: block; padding: 0; border: 0; }
.t-jobs th { padding-bottom: 10px; }
.t-jobs th:nth-child(2) { display: none; }
.t-jobs th:nth-child(3), .t-jobs td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.t-jobs th:nth-child(4), .t-jobs td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.t-jobs tbody tr { padding: 12px 0; }
.t-jobs td:nth-child(1) { grid-column: 1; grid-row: 1; }
.t-jobs td:nth-child(2) { grid-column: 1; grid-row: 2; padding-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.t-jobs td:nth-child(3) { color: var(--gold-soft); }
/* each column's name, read before its cell where a phone stacks the rows */
.t-jobs { --c2: "Approach"; --c3: "Skill"; --c4: "What matters"; }
.t-marks, .t-runes { --c2: "Effect"; }
.t-marks { --c3: "Decay / threshold"; }
.t-reactions { --c2: "Sign on Mark"; --c3: "Effect"; }
.t-runes { --c3: "Good for"; }
.t-generic { --c2: "When"; --c3: "Effect"; }
.t-sig { --c2: "Combo"; --c3: "Effect"; }
.t-accords { --c2: "Activation"; --c3: "Effect / tradeoff"; }
.t-anchor { --c2: "Anchor passive"; --c3: "Watch out for"; }
.t-diff { --c2: "Structure"; --c3: "What it adds"; }
:lang(th) .t-jobs { --c2: "แนวทาง"; --c4: "สิ่งสำคัญ"; }
:lang(th) .t-runes { --c2: "Current effect"; --c3: "เหมาะกับ"; }
:lang(th) .t-generic { --c2: "เงื่อนไข"; }
:lang(th) .t-reactions { --c2: "Sign บน Mark"; }
:lang(th) .t-sig { --c3: "Effect หลัก"; }
:lang(th) .t-accords { --c3: "Current effect / tradeoff"; }
:lang(th) .t-anchor { --c3: "สิ่งที่ต้องระวัง"; }
:lang(th) .t-diff { --c2: "โครงสร้าง"; --c3: "สิ่งที่เพิ่ม"; }
@media (max-width: 699px) {
  table.stack, .stack tbody, .stack tr, .stack td { display: block; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack tr { padding: 14px 0 13px; border-bottom: 1px solid var(--line-soft); }
  .stack td { padding: 0; border: 0; white-space: normal; }
  .stack td + td { margin-top: 7px; }
  .stack td:first-child { font-size: 16px; }
  .stack td + td::before { display: block; margin-bottom: 1px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .stack td:nth-child(2)::before { content: var(--c2, none); }
  .stack td:nth-child(3)::before { content: var(--c3, none); }
  .stack td:nth-child(4)::before { content: var(--c4, none); }
  /* a Job: its name and its Skill on one line, its approach under them, then what matters */
  .t-jobs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 12px; }   /* over .stack tr's block */
  .t-jobs td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .t-jobs td:nth-child(3) { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
  .t-jobs td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
  .t-jobs td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
  .t-jobs td::before { content: none !important; }
  .t-accords td:first-child, .t-sig td:first-child, .t-anchor td:first-child { width: auto; }
  .t-exact td:first-child, .t-quick td:first-child { white-space: normal; }
}

/* ---------- the foot ---------- */
.foot { display: grid; gap: 20px; justify-items: center; padding: clamp(72px, 12vh, 140px) var(--gut) 40px; text-align: center; border-top: 1px solid var(--line-soft); background: radial-gradient(ellipse 70% 80% at 50% 100%, #1b2454 0%, #0b1024 55%, var(--deep) 100%); }
.foot h2 { font-size: clamp(38px, 6.6vw, 80px); line-height: 1.05; }
:lang(th) .foot h2 { line-height: 1.3; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 14px; }
.foot small { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .btn:hover { transform: none; } }