/* TIS Wiki — a deliberately more modern treatment than the retro-parchment game UI
   (game.css). Keeps the brand thread (dark base, gold accent, Georgia display type) but
   executes it with a contemporary docs-site layout: sticky sidebar, elevated cards,
   category color-coding, and a cleaner sans-serif for body/table copy so dense
   reference data actually stays readable. Self-contained — the wiki never loads
   game.css, so nothing here needs to coexist with the live game's own rules. */

* { box-sizing: border-box; }

:root {
  --wiki-bg: #120d08;
  --wiki-panel: #1c150e;
  --wiki-panel-2: #221a11;
  --wiki-border: rgba(158, 124, 66, 0.28);
  --wiki-border-strong: rgba(158, 124, 66, 0.55);
  --wiki-gold: #d4af37;
  --wiki-gold-bright: #f0c94f;
  --wiki-text: #e9dcc0;
  --wiki-text-dim: #a8967a;
  --wiki-text-faint: #776750;

  --wiki-harvest: #7fd1a8;
  --wiki-craft: #e0a854;
  --wiki-combat: #e0793f;
  --wiki-magic: #c495f0;
  --wiki-house: #6fa8dc;
  --wiki-cosmetic: #e58fbf;

  --wiki-radius: 14px;
  --wiki-radius-sm: 8px;
  --wiki-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.wiki-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(212, 175, 55, 0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(196, 149, 240, 0.06), transparent 55%),
    var(--wiki-bg);
  color: var(--wiki-text);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  cursor: url('/assets/sprites/cursors/default.png') 2 2, auto;
}

/* The game's own cursors, everywhere — a browser hand appearing over a wiki
   control breaks the illusion that this is part of the game rather than a site
   next to it. Covers every interactive element rather than listing them one at a
   time, so a control added later inherits it instead of being forgotten (which
   is exactly how the collapsible nav headers ended up with the default hand).
   Text inputs are deliberately excluded — a caret is the right cursor there. */
.wiki-page a,
.wiki-page button,
.wiki-page select,
.wiki-page summary,
.wiki-page [role='button'] {
  cursor: url('/assets/sprites/cursors/point.png') 4 2, pointer;
}

/* A disabled control should not invite the click it will ignore. */
.wiki-page button:disabled {
  cursor: url('/assets/sprites/cursors/default.png') 2 2, not-allowed;
}

::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

/* Dark, thin scrollbars — same treatment the live game uses, kept for continuity. */
.wiki-page * { scrollbar-width: thin; scrollbar-color: var(--wiki-border-strong) transparent; }
.wiki-page *::-webkit-scrollbar { width: 9px; height: 9px; }
.wiki-page *::-webkit-scrollbar-thumb { background: var(--wiki-border-strong); border-radius: 5px; }
.wiki-page *::-webkit-scrollbar-thumb:hover { background: var(--wiki-gold); }

/* ---------- Top bar (thin, just a wordmark + back-to-game) ---------- */

.wiki-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--wiki-border);
  background: rgba(18, 13, 8, 0.75);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.wiki-wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: var(--wiki-gold-bright);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wiki-wordmark::before { content: '\2726'; font-size: 15px; }

.wiki-topbar-back {
  color: var(--wiki-text-dim);
  text-decoration: none;
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.wiki-topbar-back:hover {
  color: var(--wiki-gold-bright);
  border-color: var(--wiki-border-strong);
  background: rgba(212, 175, 55, 0.08);
}

/* ---------- Shell: sticky sidebar + content ---------- */

.wiki-shell {
  display: flex;
  align-items: flex-start;
}

.wiki-sidebar {
  position: sticky;
  top: 57px; /* below the topbar */
  height: calc(100vh - 57px);
  width: 232px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 24px 14px 40px;
  border-right: 1px solid var(--wiki-border);
}

.wiki-nav-group { margin-bottom: 22px; }

.wiki-nav-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--wiki-text-faint);
  padding: 0 12px 8px;
}

.wiki-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  margin: 1px 0;
  border-radius: var(--wiki-radius-sm);
  color: var(--wiki-text-dim);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.wiki-nav-link:hover { background: rgba(212, 175, 55, 0.08); color: var(--wiki-text); }

.wiki-nav-link.current {
  background: rgba(212, 175, 55, 0.12);
  color: var(--wiki-gold-bright);
  border-left-color: var(--wiki-gold);
  font-weight: 600;
}

.wiki-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wiki-main {
  flex: 1;
  min-width: 0;
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 40px 100px;
}

.wiki-eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wiki-text-faint);
  margin: 0 0 8px;
}

/* An author's credit under a page title (today only /wiki/dyes carries one). Quiet and
   italic — a signature at the head of the page, not a second lede. */
.wiki-byline {
  margin: -4px 0 14px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--wiki-text-faint);
}

.wiki-main h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  color: var(--wiki-gold-bright);
  margin: 0 0 10px;
  letter-spacing: 0.2px;
}

.wiki-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--wiki-text-dim);
  max-width: 720px;
  margin: 0 0 36px;
}

/* ---------- Index page: hero + card grid ---------- */

.wiki-hero {
  padding: 46px 44px;
  margin-bottom: 40px;
  border-radius: var(--wiki-radius);
  border: 1px solid var(--wiki-border);
  background:
    radial-gradient(ellipse 500px 260px at 90% -20%, rgba(212, 175, 55, 0.14), transparent 65%),
    linear-gradient(160deg, var(--wiki-panel-2), var(--wiki-panel));
  box-shadow: var(--wiki-shadow);
}

.wiki-hero h1 { font-size: 40px; margin-bottom: 14px; }
.wiki-hero p { font-size: 16px; color: var(--wiki-text-dim); max-width: 620px; line-height: 1.65; margin: 0; }

/* Front-page search (public/js/wikiSearch.js) — filters the card grid below it, same
   "search what's already rendered" idiom as the Item Database's own search box, just
   styled as a hero pill instead of a compact toolbar input. */
.wiki-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin-top: 24px;
  padding: 12px 18px;
  background: var(--wiki-panel-2);
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wiki-search-box:focus-within {
  border-color: var(--wiki-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.wiki-search-icon { font-size: 15px; opacity: 0.65; flex-shrink: 0; }

.wiki-search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  color: var(--wiki-text);
  font-size: 15px;
}

.wiki-search-input::placeholder { color: var(--wiki-text-faint); }

.wiki-search-empty {
  color: var(--wiki-text-dim);
  padding: 40px 4px;
  text-align: center;
  font-size: 14px;
}

/* --- Answer Engine (public/js/wikiAsk.js) -------------------------------------------
   The direct-answer panel above the topic cards. Styled as a distinct gold-edged slab
   rather than another card, so it reads as "here is your answer" instead of "here is
   another link to try". */
.wiki-ask-hint {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--wiki-text-faint);
}

.wiki-answer {
  margin: 22px 0 8px;
  padding: 20px 22px;
  background: linear-gradient(180deg, var(--wiki-panel-2), var(--wiki-panel));
  border: 1px solid var(--wiki-border-strong);
  border-left: 3px solid var(--wiki-gold);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.wiki-answer-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wiki-answer-icon {
  width: 44px;
  height: 44px;
  flex: none;
  image-rendering: pixelated;
}

.wiki-answer-kind {
  display: block;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wiki-gold);
}

.wiki-answer-name {
  margin: 2px 0 0;
  font-size: 22px;
  color: var(--wiki-text);
}

.wiki-answer-summary {
  margin: 12px 0 0;
  color: var(--wiki-text-dim);
  font-size: 14px;
  line-height: 1.5;
}

/* Two columns on desktop so label/value pairs scan quickly; collapses to a single
   stacked column on narrow screens (see the media query below). */
.wiki-answer-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 16px 0 0;
  font-size: 14px;
}

.wiki-answer-facts dt {
  color: var(--wiki-text-faint);
  white-space: nowrap;
}

.wiki-answer-facts dd {
  margin: 0;
  color: var(--wiki-text);
}

/* A pre-written sentence (an item's own detail line) rather than a label/value pair —
   spans both columns instead of being squeezed into the value column. */
.wiki-answer-facts .wiki-answer-fact-full {
  grid-column: 1 / -1;
  color: var(--wiki-text);
}

.wiki-answer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--wiki-border);
  font-size: 13px;
}

.wiki-answer-link {
  color: var(--wiki-gold);
  text-decoration: none;
  font-weight: 600;
}

.wiki-answer-link:hover { color: var(--wiki-gold-bright); }

.wiki-answer-related { color: var(--wiki-text-faint); }
.wiki-answer-related a { color: var(--wiki-text-dim); }
.wiki-answer-related a:hover { color: var(--wiki-text); }

/* "Did you mean" variant — same slab, muted edge, since it's an offer rather than an
   answer and shouldn't compete with a real one for attention. */
.wiki-answer-ambiguous { border-left-color: var(--wiki-text-faint); }

.wiki-suggest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.wiki-suggest-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  background: var(--wiki-panel);
  border: 1px solid var(--wiki-border);
  border-radius: 6px;
  color: var(--wiki-text);
  text-decoration: none;
  font-size: 13.5px;
}

.wiki-suggest-item:hover {
  border-color: var(--wiki-border-strong);
  color: var(--wiki-gold-bright);
}

.wiki-suggest-item span {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wiki-text-faint);
}

@media (max-width: 560px) {
  .wiki-answer-facts { grid-template-columns: 1fr; gap: 2px; }
  .wiki-answer-facts dt { margin-top: 8px; }
}

.wiki-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* A card grid butting straight into the next panel reads as one run-on block — the
   bottom row of cards and the "Every section" header below it looked like the same
   group. .wiki-section carries only a margin-BOTTOM, so nothing was separating them.
   Scoped to the adjacency rather than given to .wiki-card-grid outright: the front page
   ends on a grid, and a trailing margin there would just be dead space. */
.wiki-card-grid + .wiki-section,
.wiki-card-grid + .wiki-callout {
  margin-top: 34px;
}

/* An item cell: its sprite beside its name. The icon is decorative here (alt="") because
   the name is right next to it — announcing both would just repeat the label to a screen
   reader. Sized a little smaller than the Item Database's own 30px, since these sit on a
   text row rather than in a column of their own. */
.wiki-cell-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* A recipe cell listing several ingredients (views/partials/wikiBlocks.ejs) — one per
   line, icons aligned down the column. Inline with a "+" between them was the previous
   arrangement, and in a column this narrow it wrapped and stranded the plus at the end of
   a line on its own. A stack needs no separator: every line is an ingredient, and they are
   all required.

   align-items:flex-start keeps each row's icon hard against the left edge, so two rows of
   different text length still read as a column rather than as two floating labels. */
.wiki-cell-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Two classes deliberately: .wiki-icon is declared later in this file and would otherwise
   win on source order at equal specificity, keeping these at its 30px. */
.wiki-icon.wiki-icon-inline {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Centered quantity columns (views/partials/wikiBlocks.ejs's `align`). Applied to the
   header cell too, so the heading sits over its own column rather than off to the left
   of it. */
.wiki-table th.wiki-cell-center,
.wiki-table td.wiki-cell-center {
  text-align: center;
}

/* A reference card (Tools) sitting among skill cards — same shape, but dashed and
   accented so it reads as "here is a table you need" rather than "here is another skill
   you can train". */
.wiki-card-reference {
  border-style: dashed;
  border-color: var(--wiki-border-strong);
}

.wiki-card-reference h3::after {
  content: 'Reference';
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--wiki-craft);
  border: 1px solid var(--wiki-border);
  background: rgba(224, 168, 84, 0.1);
}

.wiki-card {
  display: block;
  padding: 22px 22px 20px;
  border-radius: var(--wiki-radius);
  border: 1px solid var(--wiki-border);
  background: linear-gradient(165deg, var(--wiki-panel-2), var(--wiki-panel));
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.wiki-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--wiki-gold));
  opacity: 0.85;
}

.wiki-card:hover {
  transform: translateY(-3px);
  border-color: var(--wiki-border-strong);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.wiki-card-icon { font-size: 22px; margin-bottom: 12px; display: block; }

.wiki-card h3 {
  margin: 0 0 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  color: var(--wiki-text);
}

.wiki-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--wiki-text-dim);
  line-height: 1.55;
}

/* ---------- Section blocks ---------- */

.wiki-section {
  border-radius: var(--wiki-radius);
  border: 1px solid var(--wiki-border);
  background: linear-gradient(165deg, var(--wiki-panel-2), var(--wiki-panel));
  padding: 24px 26px 26px;
  margin-bottom: 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  position: relative;
}

.wiki-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.wiki-section h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  color: var(--wiki-text);
  margin: 0 0 4px;
}

.wiki-section > p { color: var(--wiki-text-dim); font-size: 14px; line-height: 1.65; }

.wiki-section-note {
  color: var(--wiki-text-dim);
  font-size: 14px;
  line-height: 1.65;
}
.wiki-section-note + .wiki-section-note { margin-top: 8px; }

/* A heading INSIDE a wiki-section, for a page whose section has genuinely distinct parts
   worth naming (views/wiki/poison.ejs's four cures, its poison tiers). Every other page's
   h3 lives inside a .wiki-card and is styled by that; a free-standing one in prose had no
   rule at all and fell through to the browser's default, which is both too large and the
   wrong colour against this theme. */
.wiki-subheading {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wiki-gold-bright);
}
.wiki-section-header + .wiki-subheading,
.wiki-section-note + .wiki-subheading { margin-top: 18px; }

/* De-emphasised cell text — "not strong enough", an absent value — dimmer than the
   surrounding table without being invisible. */
.wiki-muted { color: var(--wiki-text-dim); font-style: italic; }

/* Patch Notes (views/wiki/patchNotes.ejs) — one labeled group per category
   (New Features/Balance Changes/Bug Fixes/Quality of Life) inside a patch's own
   wiki-section, each a real bulleted list — the wiki's existing .wiki-list is a bare
   nav-style list (no bullets, meant for links), which doesn't fit prose bullets here. */
.patch-note-group + .patch-note-group { margin-top: 18px; }

.patch-note-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wiki-gold-bright);
  margin-bottom: 8px;
}

.patch-note-group-icon { font-size: 14px; }

.patch-note-list {
  margin: 0;
  padding-left: 22px;
  color: var(--wiki-text-dim);
  font-size: 14px;
  line-height: 1.7;
}

.patch-note-list li { margin-bottom: 6px; }
.patch-note-list li::marker { color: var(--wiki-gold); }

/* Category badge — color set inline per-instance via style="--card-accent/--badge-color" */
.wiki-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--badge-color, var(--wiki-gold));
  background: color-mix(in srgb, var(--badge-color, var(--wiki-gold)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--wiki-gold)) 45%, transparent);
  white-space: nowrap;
}
.wiki-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--badge-color, var(--wiki-gold));
}

/* Dye Tub rarity band chips in the Item Database (views/wiki/items.ejs) — the classic
   RPG rarity colors, matching the in-game tooltip badge (public/css/game.css's
   .tooltip-dye-rarity-*). Just a --badge-color per band; .wiki-badge does the rest. */
.item-db-rarity-common { --badge-color: #b7bec8; }
.item-db-rarity-rare { --badge-color: #4d9fff; }
.item-db-rarity-veryRare { --badge-color: #c07bff; }
.item-db-rarity-ultraRare { --badge-color: #ffb020; }

/* Inline formula/number chip — monospace, subtle chip background, for "65% -> 10%" etc. */
.wiki-formula {
  font-family: 'Cascadia Code', 'Consolas', 'SFMono-Regular', Menlo, monospace;
  font-size: 0.92em;
  color: var(--wiki-gold-bright);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 5px;
  padding: 1px 6px;
}

/* Callout — a highlighted note/tip box, left-accent bar */
.wiki-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin: 14px 0 4px;
  border-radius: var(--wiki-radius-sm);
  border: 1px solid var(--wiki-border);
  border-left: 3px solid var(--callout-color, var(--wiki-gold));
  background: rgba(255, 255, 255, 0.02);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wiki-text-dim);
}
.wiki-callout-icon { font-size: 16px; flex-shrink: 0; line-height: 1.5; }
.wiki-callout strong { color: var(--wiki-text); }

/* ---------- Tables ---------- */

.wiki-table-wrap {
  overflow-x: auto;
  border-radius: var(--wiki-radius-sm);
  border: 1px solid var(--wiki-border);
  margin-top: 16px;
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 480px;
}

.wiki-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 10px 14px;
  background: #241a10;
  color: var(--wiki-text-faint);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--wiki-border-strong);
  white-space: nowrap;
}

.wiki-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--wiki-border);
  vertical-align: middle;
  color: var(--wiki-text);
}

.wiki-table tbody tr:last-child td { border-bottom: none; }
.wiki-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.wiki-table tbody tr { transition: background 120ms ease; }
.wiki-table tbody tr:hover { background: rgba(212, 175, 55, 0.06); }

.wiki-icon {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  display: block;
}

/* Boss portraits (/wiki/bosses). The source sprites are 66x66 — rendered at their native
   size rather than the 30px .wiki-icon used for table rows, since a boss card is the one
   place on the wiki where the art is the point rather than a row label. Shrinks on a
   narrow screen so the header can't push the card into a horizontal scroll. */
.wiki-boss-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.wiki-boss-head > div { flex: 1; min-width: 0; }

.wiki-boss-portrait {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  image-rendering: pixelated;
  display: block;
}

@media (max-width: 560px) {
  .wiki-boss-head { gap: 10px; }
  .wiki-boss-portrait { width: 48px; height: 48px; }
}

.wiki-heal { color: var(--wiki-harvest); font-weight: 600; }
.wiki-num { font-family: 'Cascadia Code', 'Consolas', monospace; color: var(--wiki-text-dim); }

/* Circle badge for spell tables — a small numbered ring */
.wiki-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--wiki-magic);
  color: var(--wiki-magic);
  font-size: 11px;
  font-weight: bold;
}

.wiki-list { line-height: 2; padding-left: 0; list-style: none; }
.wiki-list a { color: var(--wiki-gold-bright); text-decoration: none; }
.wiki-list a:hover { text-decoration: underline; }

/* Cross-reference links inside prose ("see Smelting", "a Tinkering tool") — scoped to
   the actual prose containers rather than a blanket `.wiki-main a` so it can never
   collide with .wiki-card's own color/text-decoration reset (same equal-specificity,
   later-wins cascade trap the game CSS has hit before with shared classes). These were
   previously unstyled and rendering as default browser blue against this dark gold
   theme — every existing "see X" link in the page bodies picks this up retroactively. */
.wiki-section a, .wiki-lede a, .wiki-callout a {
  color: var(--wiki-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.35);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.wiki-section a:hover, .wiki-lede a:hover, .wiki-callout a:hover {
  color: #fff;
  text-decoration-color: var(--wiki-gold-bright);
}

/* The Item Database's "How to Obtain" links. The prose-link rule above is scoped to
   .wiki-section/.wiki-lede/.wiki-callout, and a table cell is none of those — so these
   were falling through to the browser's default blue-and-underlined anchor, which stood
   out badly against the dark table.

   Deliberately quieter than a prose link rather than identical to one: this column has
   one on nearly every row, and 600-odd gold underlined links would read as noise. It
   sits in the body text colour with a faint dotted underline, and only warms to gold on
   hover — present when you look for it, invisible when you are scanning the table. */
.item-db-source-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(212, 175, 55, 0.3);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.item-db-source-link:hover {
  color: var(--wiki-gold-bright);
  text-decoration-style: solid;
  text-decoration-color: var(--wiki-gold-bright);
}

@media (max-width: 860px) {
  .wiki-sidebar { display: none; }
  .wiki-main { padding: 32px 20px 80px; }
}

/* ============ Virtue Binding talent tree (views/wiki/virtues.ejs) ============
   Eight branch cards, four tier nodes each, connected top-to-bottom by a spine line so
   the strict tier-order prerequisite reads visually, not just in the prose. */
.virtue-tree {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.virtue-branch {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(196, 149, 240, 0.25);
  border-top: 2px solid var(--wiki-magic);
  border-radius: 8px;
  padding: 14px 16px;
}

.virtue-branch-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.virtue-branch-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  color: var(--wiki-magic);
}

.virtue-branch-theme {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

/* The spine: one continuous line the nodes sit on, drawn as a left border on the
   node column so it naturally spans exactly from the first node to the last. */
.virtue-branch-nodes {
  display: flex;
  flex-direction: column;
}

.virtue-node {
  position: relative;
  padding: 10px 0 10px 22px;
  border-left: 2px solid rgba(196, 149, 240, 0.35);
}

/* The node dot, centered on the spine. */
.virtue-node::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1626;
  border: 2px solid var(--wiki-magic);
}

.virtue-node-tier {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(196, 149, 240, 0.7);
}

.virtue-node-name {
  display: block;
  font-weight: bold;
  margin: 1px 0 2px;
}

.virtue-node-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}

/* ============ Item Database (views/wiki/items.ejs) ============
   Search input + category <select>, both filtering the same server-rendered table
   client-side (public/js/wikiItems.js) — the first free-text search/filter controls
   anywhere in the wiki, so these are new base styles rather than reused ones. */
.item-db-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.item-db-search {
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  background: var(--wiki-panel-2);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius-sm);
  color: var(--wiki-text);
  font-size: 14px;
}

.item-db-search:focus {
  outline: none;
  border-color: var(--wiki-border-strong);
}

.item-db-search::placeholder {
  color: var(--wiki-text-faint);
}

.item-db-select {
  padding: 9px 12px;
  background: var(--wiki-panel-2);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius-sm);
  color: var(--wiki-text);
  font-size: 14px;
}

.item-db-count {
  color: var(--wiki-text-faint);
  font-size: 12.5px;
  white-space: nowrap;
}

.item-db-table {
  min-width: 640px;
}

.item-db-category-badge {
  white-space: nowrap;
}

.item-db-empty {
  color: var(--wiki-text-dim);
  padding: 20px 4px;
  text-align: center;
}

.item-db-row {
  cursor: url('/assets/sprites/cursors/point.png') 4 2, pointer;
}

.item-db-detail-row td {
  background: rgba(0, 0, 0, 0.12);
}

.item-db-detail-list {
  margin: 4px 0;
  padding-left: 18px;
  color: var(--wiki-text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.item-db-detail-none {
  color: var(--wiki-text-faint);
  font-size: 12.5px;
  font-style: italic;
}

.item-db-detail-description {
  color: var(--wiki-text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

/* The "you can lose this" caveat (config/itemFlavorText.js's ITEM_WARNING_TEXT) — its own
   line below whatever detail lines or description precede it, in the same warning red the
   in-game tooltip uses for it (public/css/game.css's .tooltip-warning), so the item reads
   the same way in both places. */
.item-db-detail-warning {
  display: block;
  margin-top: 5px;
  color: #d97b7b;
  font-size: 12.5px;
  font-weight: bold;
}

.item-db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}

.item-db-page-btn {
  padding: 7px 14px;
  background: var(--wiki-panel-2);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius-sm);
  color: var(--wiki-text);
  font-size: 13px;
  cursor: url('/assets/sprites/cursors/point.png') 4 2, pointer;
}

.item-db-page-btn:hover:not(:disabled) {
  border-color: var(--wiki-border-strong);
  color: var(--wiki-gold-bright);
}

.item-db-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.item-db-page-indicator {
  color: var(--wiki-text-dim);
  font-size: 13px;
  white-space: nowrap;
}

/* Numbered step lists (views/wiki/housing.ejs's furniture placement walkthrough) —
   no bespoke list styling existed anywhere in the wiki before this, so this is the
   one generic .wiki-steps rule any future page can reuse rather than each inventing
   its own. */
.wiki-steps {
  margin: 8px 0 0;
  padding-left: 22px;
  color: var(--wiki-text);
  line-height: 1.6;
}
.wiki-steps li {
  margin-bottom: 6px;
}
.wiki-steps li::marker {
  color: var(--wiki-house);
}

/* Dye palette (wiki/dyes.ejs) — one swatch chip per color, its gradient sampled straight
   from config/dyes.js's dark->base->accent ramp so the wiki shows the actual in-game hue
   the Dye Tub recolors gear to. */
.wiki-dye-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.wiki-dye-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--wiki-panel-2);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius-sm);
}
.wiki-dye-swatch {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wiki-dye-name {
  font-size: 13px;
  color: var(--wiki-text);
  line-height: 1.25;
}
/* Dungeon-exclusive dyes carry a source line under the name. */
.wiki-dye-source {
  display: block;
  font-size: 11px;
  color: var(--wiki-text-dim);
  margin-top: 2px;
}

/* --- The Premium shelf (views/wiki/dyes.ejs) ------------------------------------------
   Two colours whose whole pitch is luxury, so the section is dressed for it: a gilded
   frame around the section, a gold badge, and chips that glow with their OWN dye's
   accent (--premium-glow, set inline per chip from config/dyes.js's colour ramp) over a
   larger swatch with a slow-moving sheen. Everything still renders from the same live
   colour data as every other chip — only the tailoring differs. */
.wiki-premium-section {
  padding: 16px 18px;
  background:
    linear-gradient(160deg, rgba(240, 207, 114, 0.07), transparent 45%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(240, 207, 114, 0.45);
  border-radius: var(--wiki-radius-sm);
  box-shadow: 0 0 18px rgba(240, 207, 114, 0.08), inset 0 1px 0 rgba(240, 207, 114, 0.25);
}

.wiki-badge-premium {
  --badge-color: #f0cf72;
  color: #16110b;
  background: linear-gradient(180deg, #ffe9a8, #d9b356);
  border: 1px solid #f0cf72;
  font-weight: 700;
}

.wiki-premium-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.wiki-dye-chip-premium {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid rgba(240, 207, 114, 0.6);
  background: linear-gradient(180deg, rgba(240, 207, 114, 0.08), var(--wiki-panel-2) 60%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--premium-glow, #f0cf72) 22%, transparent);
}

.wiki-dye-chip-premium .wiki-dye-swatch {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border-color: rgba(240, 207, 114, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 10px color-mix(in srgb, var(--premium-glow, #f0cf72) 45%, transparent);
}

.wiki-dye-chip-premium .wiki-dye-name {
  font-weight: 600;
  color: #f4e6bf;
}

/* The sheen: a light pass that sweeps the chip every few seconds — the same trick the
   game header's wordmark plays, at wiki pace. Decorative, so reduced-motion stills it. */
.wiki-dye-chip-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: wiki-premium-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wiki-premium-sheen {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-dye-chip-premium::after { animation: none; }
}

/* ============================================================================
   Skill pages (views/wiki/skill.ejs, skillCategory.ejs, skillIndex.ejs)
   ========================================================================= */

/* The two-line "how you train it / what you need" header that opens every skill
   page — the answers a player wants before any table. */
.wiki-skill-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.wiki-skill-meta-item {
  padding: 14px 16px;
  background: var(--wiki-panel);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
  border-left: 2px solid var(--wiki-gold);
}

.wiki-skill-meta-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wiki-gold);
}

.wiki-skill-meta-value {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wiki-text-dim);
}

/* Definition list for the short "the numbers" blocks. */
.wiki-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 0;
  font-size: 13px;
}

.wiki-facts dt { color: var(--wiki-text-dim); }
.wiki-facts dd { margin: 0; color: var(--wiki-text); }

/* Sibling-skill links at the foot of a page, and the section switcher. */
.wiki-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.wiki-chip {
  padding: 5px 12px;
  background: var(--wiki-panel);
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--wiki-text-dim);
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out, transform 140ms ease-out;
}

.wiki-chip:hover {
  border-color: var(--wiki-gold);
  color: var(--wiki-gold-bright);
  transform: translateY(-1px);
}

.wiki-chip-current {
  border-color: var(--wiki-gold);
  color: var(--wiki-gold-bright);
}

/* A plain name/subtitle grid — used for the tamed-companion roster, which lists
   names and species and deliberately nothing else. */
.wiki-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.wiki-roster-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--wiki-panel);
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
}

/* The creature's own sprite, decorative (alt="") since the species is named beside it.
   Pet art is a two-frame 48x20 sheet, so this is a cropping window rather than a plain
   image: the inner <img> is drawn at 2x (96x40) and the 48x40 window shows only the first
   24x20 cell. Same crop game.css's .dfp-pet performs with background-size, done with
   overflow so the URL can stay in the markup and out of an inline style. */
.wiki-roster-icon {
  display: block;
  width: 48px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
}

.wiki-roster-icon img {
  display: block;
  width: 96px;
  height: 40px;
  image-rendering: pixelated;
}

.wiki-roster-name {
  display: block;
  font-size: 13px;
  color: var(--wiki-gold-bright);
}

.wiki-roster-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--wiki-text-faint);
}

/* Collapsible nav sections (views/partials/wikiNav.ejs). A <details> rather than
   JS: it keeps its own state, works without scripting, and the route marks the
   section containing the current page `open` so it never collapses under you. */
.wiki-nav-section { margin-bottom: 14px; }

.wiki-nav-section-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: url('/assets/sprites/cursors/point.png') 4 2, pointer;
  list-style: none;
  user-select: none;
}

.wiki-nav-section-summary::-webkit-details-marker { display: none; }

/* The disclosure caret, drawn rather than relying on the default marker so it can
   rotate smoothly with the section. */
.wiki-nav-section-summary::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.5;
  transform: rotate(-45deg);
  transition: transform 160ms ease-out;
}

.wiki-nav-section[open] > .wiki-nav-section-summary::after { transform: rotate(45deg); }

.wiki-nav-section-count {
  font-size: 10px;
  font-weight: normal;
  opacity: 0.45;
}

.wiki-nav-link-skill { padding-left: 20px; }

.wiki-nav-link-all {
  padding-left: 20px;
  font-style: italic;
  opacity: 0.75;
}

/* ============================================================================
   Motion
   ----------------------------------------------------------------------------
   The wiki is server-rendered with ordinary full-page navigation — there is no
   router and no client-side view swapping. That makes cross-document view
   transitions exactly the right tool: the browser holds the outgoing page,
   fetches the next, and animates between them, with no JavaScript involved.
   Browsers that don't support it simply navigate as before; nothing degrades.

   Durations and easings are taken from public/css/game.css's existing vocabulary
   (100-350ms, ease-out) rather than invented here, so the wiki moves like the
   game does. Everything is disabled under prefers-reduced-motion, matching the
   five blocks game.css already carries.
   ========================================================================= */

@view-transition { navigation: auto; }

/* Only the content pane crossfades. The topbar and sidebar are given stable
   names so the browser treats them as the SAME element across the navigation
   and leaves them alone — the page changes without the chrome flickering. */
.wiki-topbar { view-transition-name: wiki-topbar; }
.wiki-sidebar { view-transition-name: wiki-sidebar; }
.wiki-main { view-transition-name: wiki-main; }

::view-transition-old(wiki-main) {
  animation: wiki-fade-out 90ms ease-in both;
}

::view-transition-new(wiki-main) {
  animation: wiki-rise-in 220ms ease-out both;
}

/* The chrome is named so it transitions in PLACE rather than sliding with the
   content — but it still needs a real cross-fade.

   An earlier version set `animation: none` on these four pseudo-elements, which
   was wrong in a way that only shows up on pages whose sidebar differs: with no
   animation the browser paints the outgoing AND incoming snapshots on top of
   each other at full opacity, so the moved "current" highlight and any newly
   opened section rendered as doubled, ghosted text. A short cross-fade is what
   was actually wanted. The topbar is pixel-identical between pages so its fade
   is invisible; the sidebar's is what fixes the ghosting. */
::view-transition-old(wiki-topbar),
::view-transition-old(wiki-sidebar) {
  animation: wiki-fade-out 90ms ease-in both;
}

::view-transition-new(wiki-topbar),
::view-transition-new(wiki-sidebar) {
  animation: wiki-fade-in 120ms ease-out both;
}

@keyframes wiki-fade-out {
  to { opacity: 0; }
}

@keyframes wiki-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Arrival stagger. Sections ease up in sequence rather than all at once, which
   reads as the page settling instead of snapping. Capped at six steps — beyond
   that the last section would visibly lag behind the scroll.

   This runs on every load, including for browsers with no view-transition
   support, so those still get a considered entrance rather than nothing. */
.wiki-main > .wiki-section,
.wiki-main > .wiki-card-grid,
.wiki-main > .wiki-skill-meta,
.wiki-main > .wiki-callout {
  animation: wiki-rise-in 260ms ease-out both;
}

.wiki-main > *:nth-child(1) { animation-delay: 0ms; }
.wiki-main > *:nth-child(2) { animation-delay: 40ms; }
.wiki-main > *:nth-child(3) { animation-delay: 80ms; }
.wiki-main > *:nth-child(4) { animation-delay: 120ms; }
.wiki-main > *:nth-child(5) { animation-delay: 160ms; }
.wiki-main > *:nth-child(n+6) { animation-delay: 200ms; }

/* Nav links and cards lift on hover — the same 140ms ease-out the chips use. */
.wiki-nav-link {
  transition: color 140ms ease-out, background-color 140ms ease-out, padding-left 140ms ease-out;
}

.wiki-nav-link:hover { padding-left: 4px; }
.wiki-nav-link-skill:hover { padding-left: 24px; }
.wiki-nav-link-all:hover { padding-left: 24px; }

.wiki-card {
  transition: border-color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}

.wiki-card:hover { transform: translateY(-2px); }

/* Item Database rows animate on filter rather than snapping in and out — see
   public/js/wikiItems.js, which toggles this class instead of display alone. */
.item-db-row { transition: opacity 140ms ease-out; }
.item-db-row-entering { animation: wiki-fade-in 180ms ease-out both; }

@keyframes wiki-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kill the navigation animation itself, not just the in-page motion — a
     cross-document transition is exactly the kind of movement this setting is
     asking us not to make. */
  @view-transition { navigation: none; }

  .wiki-main > .wiki-section,
  .wiki-main > .wiki-card-grid,
  .wiki-main > .wiki-skill-meta,
  .wiki-main > .wiki-callout,
  .item-db-row-entering {
    animation: none;
  }

  .wiki-nav-link:hover,
  .wiki-nav-link-skill:hover,
  .wiki-nav-link-all:hover { padding-left: inherit; }

  .wiki-card:hover,
  .wiki-chip:hover { transform: none; }

  .wiki-nav-section-summary::after { transition: none; }
}

/* ============================================================================
   Getting Started (views/wiki/gettingStarted.ejs)
   ----------------------------------------------------------------------------
   The one wiki page written as a journey rather than a reference table, so it is
   also the one page with layout of its own. Everything here is prefixed `gs-`
   and used nowhere else — the shared vocabulary above (wiki-section, wiki-table,
   wiki-callout, wiki-facts) still carries the bulk of the page, and these cover
   only the parts a table genuinely cannot say: the opening image, the shape of a
   225-point budget, the shape of a cap with room left in it, and the two columns
   of what death does and does not take.

   The imagery is the game's OWN backdrop art, item sprites and world map, served
   from the same paths the game serves them from. That is deliberate: a mock-up
   of a panel is out of date the first time the panel is restyled, whereas these
   files ARE what the player is looking at.
   ========================================================================= */

.gs-hero {
  position: relative;
  margin-bottom: 26px;
  padding: 44px 40px 38px;
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
  overflow: hidden;
  box-shadow: var(--wiki-shadow);
  isolation: isolate;
}

/* The backdrop sits on a pseudo-element rather than on the section itself so the
   scrim can be a second layer over it. One background-image plus one gradient on
   the same box paints the gradient UNDER the art, and the title has to stay
   readable over a painting that was never designed to have text on it. */
.gs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--gs-hero-img);
  background-size: cover;
  background-position: center 38%;
  transform: scale(1.02);
}

.gs-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(18, 13, 8, 0.94) 0%, rgba(18, 13, 8, 0.82) 42%, rgba(18, 13, 8, 0.42) 100%),
    linear-gradient(to top, rgba(18, 13, 8, 0.85), transparent 55%);
}

.gs-hero-inner { max-width: 640px; }

.gs-hero h1 {
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.1;
}

.gs-hero-lede {
  margin: 0;
  color: var(--wiki-text-dim);
  font-size: 16px;
  line-height: 1.65;
}

.gs-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--wiki-border);
}

.gs-hero-stats div { display: flex; flex-direction: column; gap: 2px; }

.gs-hero-stats strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1;
  color: var(--wiki-gold-bright);
}

.gs-hero-stats span {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wiki-text-faint);
}

/* ---- The chapter rail ---------------------------------------------------- */

.gs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.gs-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
  background: var(--wiki-panel);
  color: var(--wiki-text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out, background-color 140ms ease-out;
}

.gs-toc a:hover {
  border-color: var(--wiki-border-strong);
  background: var(--wiki-panel-2);
  color: var(--wiki-text);
}

.gs-toc a span {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  color: var(--wiki-gold);
}

/* ---- The 225-point budget ------------------------------------------------ */

.gs-statbar { margin: 22px 0 6px; }

.gs-statbar-track {
  display: flex;
  height: 46px;
  border: 1px solid var(--wiki-border-strong);
  border-radius: var(--wiki-radius-sm);
  overflow: hidden;
}

.gs-statbar-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #120d08;
  white-space: nowrap;
  /* The segments are sized by the build being illustrated, and the smallest of
     them can be narrow: a 25 out of 225 is one ninth of the track. Without this,
     a label too wide for its own segment spills out over BOTH neighbours — the
     centring pushes it out symmetrically — and reads as two overlapping words
     rather than as a bar too small to label. */
  overflow: hidden;
}

.gs-statbar-str { background: linear-gradient(180deg, #e0793f, #c25f2c); }
.gs-statbar-dex { background: linear-gradient(180deg, #7fd1a8, #57ab82); }
.gs-statbar-int { background: linear-gradient(180deg, #c495f0, #9d6ecb); }

.gs-statbar-note {
  margin: 10px 0 0;
  color: var(--wiki-text-faint);
  font-size: 13px;
  font-style: italic;
}

/* The same three colours as inline tags in the training table, so "this trains
   Str and Dex" reads at a glance rather than as two more words. */
.gs-stat-tag {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #120d08;
}

.gs-stat-str { background: #e0793f; }
.gs-stat-dex { background: #7fd1a8; }
.gs-stat-int { background: #c495f0; }

/* ---- Figures (the game's own art) ---------------------------------------- */

.gs-figure { margin: 26px 0; padding: 0; }

.gs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
  box-shadow: var(--wiki-shadow);
}

.gs-figure figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--wiki-border-strong);
  color: var(--wiki-text-dim);
  font-size: 13.5px;
  line-height: 1.65;
}

.gs-figure figcaption strong { color: var(--wiki-text); }

/* A backdrop is a wide painting with the interesting part in the middle band;
   letting it run to its natural height pushes the whole chapter off the screen. */
.gs-figure-wide img {
  max-height: 300px;
  object-fit: cover;
  object-position: center 45%;
}

/* The world map is the one image that must NOT be cropped — the whole point of it
   is the relative position of the pins. */
.gs-figure-map img {
  background: #0d0906;
  object-fit: contain;
  max-height: 520px;
}

/* ---- The cap dial -------------------------------------------------------- */

.gs-capdial {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 22px;
}

.gs-capdial-figure { flex-shrink: 0; }

/* A conic gradient stopped at --gs-cap-pct: how much of the 3,700 ceiling a fresh
   character's 1,000 actually is. Seeing that it is about a quarter is the point —
   the number alone reads as "a lot" until it is drawn against the room above it. */
.gs-capdial-ring {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--wiki-panel) 0 62%, transparent 63%),
    conic-gradient(var(--wiki-gold) 0 calc(var(--gs-cap-pct) * 1%), rgba(158, 124, 66, 0.22) 0);
}

.gs-capdial-ring span {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  color: var(--wiki-gold-bright);
}

.gs-capdial-body { flex: 1; min-width: 0; }
.gs-capdial-body .wiki-subheading { margin-top: 0; }

.gs-cap-list { line-height: 1.75; }
.gs-cap-list li { margin-bottom: 6px; color: var(--wiki-text-dim); }
.gs-cap-list strong { color: var(--wiki-text); }

/* ---- The free tool kit --------------------------------------------------- */

.gs-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 20px 0 6px;
}

.gs-tool-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius-sm);
  background: var(--wiki-panel);
  text-align: center;
}

.gs-tool-cell img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.gs-tool-cell span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--wiki-text-dim);
}

/* ---- The ore-to-tool loop ------------------------------------------------ */

.gs-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.gs-flow li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--wiki-border);
  border-left: 3px solid var(--wiki-craft);
  border-radius: var(--wiki-radius-sm);
  background: var(--wiki-panel);
}

.gs-flow-step {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wiki-craft);
  color: #120d08;
  font-size: 12px;
  font-weight: 700;
}

.gs-flow li div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-flow li strong { font-size: 13.5px; color: var(--wiki-text); }
.gs-flow li em { font-size: 12px; color: var(--wiki-text-faint); font-style: normal; }

/* ---- What death takes, and what it leaves -------------------------------- */

.gs-death-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.gs-death-card {
  padding: 18px 20px;
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
  background: var(--wiki-panel);
}

.gs-death-card h4 {
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 400;
}

.gs-death-card ul { margin: 0; padding-left: 18px; }

.gs-death-card li {
  margin-bottom: 8px;
  color: var(--wiki-text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.gs-death-card strong { color: var(--wiki-text); }
.gs-death-bad { border-top: 3px solid var(--wiki-combat); }
.gs-death-bad h4 { color: var(--wiki-combat); }
.gs-death-bad li::marker { color: var(--wiki-combat); }
.gs-death-good { border-top: 3px solid var(--wiki-harvest); }
.gs-death-good h4 { color: var(--wiki-harvest); }
.gs-death-good li::marker { color: var(--wiki-harvest); }

/* The two warnings on this page are the ones a player pays for by not reading —
   the tool ceiling and boss perma-loss — so they get their own weight rather than
   sharing the neutral callout's gold. */
.gs-callout-warn { border-left-color: var(--wiki-combat); }

.gs-checklist li { margin-bottom: 10px; }

@media (max-width: 900px) {
  .gs-hero { padding: 32px 24px 28px; }
  .gs-hero h1 { font-size: 30px; }
  .gs-hero-stats { gap: 18px; }
  /* The whole track is only ~280px on a phone, so the smallest segment of a
     lopsided build is around 30px — not enough for "Int 25" at the desktop size,
     and a clipped number is worse than a small one. */
  .gs-statbar-fill { font-size: 10.5px; letter-spacing: 0; }
  .gs-capdial { flex-direction: column; align-items: center; text-align: center; }
  .gs-capdial-body { text-align: left; }
}

/* The hero and the chapter rail are not .wiki-section, so the arrival stagger
   further up passes them by — given their own, on the same curve. */
.gs-hero, .gs-toc { animation: wiki-rise-in 260ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .gs-hero, .gs-toc { animation: none; }
  .gs-toc a { transition: none; }
}