/* The Journey of Nux Flux — "Arcane night" */

:root {
  --bg: #11121a;
  --panel: #1a1c28;
  --panel-2: #222536;
  --panel-3: #1f2130;
  --line: #2a2d40;
  --line-2: #3a3f58;
  --text: #eee6d3;
  --text-2: #cfc6b1;
  --muted: #a8a08f;
  --frost: #8cc8e6;
  --frost-dim: #4f6f84;
  --gold: #e2b35c;
  --ember: #e0795a;
  --sage: #9cc59a;
  --bar: #c9a36a;
  --notice-bg: #2a2418;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-caps: Cinzel, "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: Karla, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 64px;
  --radius: 12px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  /* Cormorant defaults to old-style figures (1 looks like I, 0 like o). */
  font-variant-numeric: lining-nums;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; padding-bottom: 48px; }

a { color: var(--frost); text-decoration: none; }
a:hover { color: #b9e0f2; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.1; }
h2 { font-size: 28px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: #1a1408; padding: 10px 16px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }

.eyebrow { font-family: var(--font-caps); font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--frost); }
.eyebrow-small { font-size: 12px; letter-spacing: 3px; }

.tone-gold { background: var(--gold); }
.tone-frost { background: var(--frost); }
.tone-ember { background: var(--ember); }
.tone-sage { background: var(--sage); }
.tone-muted { background: var(--muted); }
.tone-text-gold { color: var(--gold); }
.tone-text-frost { color: var(--frost); }
.tone-text-ember { color: var(--ember); }
.tone-text-sage { color: var(--sage); }
.tone-text-muted { color: var(--muted); }

.diamond { display: inline-block; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); flex-shrink: 0; }

/* ---- header / footer ---------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--line); }
.header-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-medal { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #fff1c8, #e2b35c, #a9722b, #e2b35c, #fff1c8); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(226, 179, 92, 0.35), 0 0 16px rgba(226, 179, 92, 0.18); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.brand-medal img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.brand:hover .brand-medal { transform: rotate(-6deg) scale(1.05); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(226, 179, 92, 0.6), 0 0 22px rgba(226, 179, 92, 0.4); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-caps); font-weight: 600; font-size: 21px; letter-spacing: 0.05em; background: linear-gradient(180deg, #fff3cf 0%, #f3cf82 40%, #d99d3f 70%, #b07a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { margin-top: 5px; font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--frost); }
.nav-desktop { display: flex; align-items: center; gap: 30px; font-weight: 500; font-size: 15px; }
.nav-desktop > a, .nav-group > summary, .nav-mobile nav a { color: var(--muted); padding: 12px 0; border-bottom: 2px solid transparent; }
.nav-desktop > a:hover, .nav-group > summary:hover, .nav-group[open] > summary { color: var(--text); text-decoration: none; }
.nav-desktop > a[aria-current="page"], .nav-group.is-current > summary { color: var(--text); border-bottom-color: var(--gold); }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:focus-visible { outline: 2px solid var(--frost); outline-offset: 4px; border-radius: 4px; }
.caret { transition: transform 0.15s ease; opacity: 0.8; }
.nav-group[open] .caret { transform: rotate(180deg); }
.nav-panel { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); z-index: 20; min-width: 270px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 2px; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
.nav-panel::after { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); }
.nav-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; color: var(--text-2); }
.nav-item:hover, .nav-item:focus-visible { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--panel-2); }
.nav-item[aria-current="page"] .nav-item-label { color: var(--gold); }
.nav-item > span:last-child { display: flex; flex-direction: column; }
.nav-item-label { font-weight: 600; color: var(--text); }
.nav-item-note { font-size: 13px; color: var(--muted); font-weight: 400; }
.nav-icon { display: flex; flex-shrink: 0; color: var(--frost); }
.nav-item .nav-icon { width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-2); }
.updated { font-size: 13px; color: var(--muted); white-space: nowrap; }

.nav-mobile { display: none; position: relative; }
.nav-mobile summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; color: var(--text); }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile nav { position: absolute; right: 0; top: 52px; z-index: 5; min-width: 220px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 16px; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.nav-mobile nav { min-width: 250px; max-height: calc(100vh - 90px); overflow-y: auto; }
.nav-mobile nav a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.nav-mobile nav > a:last-child, .nav-mobile-group:last-child a:last-child { border-bottom: 0; }
.nav-mobile-group, .nav-mobile-solo { margin-top: 6px; border-top: 1px solid var(--line-2); }
.nav-mobile nav > a, .nav-mobile-group a:last-child, .nav-mobile-solo a { border-bottom: 0; }
.nav-mobile-solo a { padding: 13px 0; }
.nav-mobile-head { padding: 14px 0 4px; font-family: var(--font-caps); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.nav-mobile nav a[aria-current="page"] { color: var(--gold); }

.notice { background: var(--notice-bg); color: var(--gold); font-size: 14px; padding: 10px 0; }

.site-footer { border-top: 1px solid var(--line); padding: 32px 0; font-size: 13px; color: var(--muted); }
.footer-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---- shared blocks ------------------------------------------------------ */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.panel-head span.muted { font-size: 14px; }
.panel p { margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.panel-wide { grid-column: span 2; }

.button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); font-weight: 500; }
button.button { background: transparent; font: inherit; font-weight: 500; cursor: pointer; }
button.button:hover { background: rgba(140, 200, 230, 0.06); }
.button:hover { text-decoration: none; border-color: var(--frost); color: var(--text); }
.button-gold { background: var(--gold); border-color: var(--gold); color: #1a1408; font-weight: 700; }
.button-gold:hover { background: #ecc57a; color: #1a1408; }

.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--frost); border-radius: 4px; }

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.bar-track { height: 6px; background: var(--line); border-radius: 3px; margin-top: 6px; }
.bar-fill { height: 100%; background: var(--bar); border-radius: 3px; }
.bar-note { font-size: 12px; color: var(--muted); margin-top: 4px; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 14px; background: var(--panel-2); font-size: 14px; color: var(--text-2); }

/* ---- charts ------------------------------------------------------------- */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; fill: none; }
.chart .axis { fill: var(--muted); font-family: var(--font-body); }
.chart .area { fill: var(--frost); fill-opacity: 0.08; }
.chart .line { fill: none; stroke: var(--frost); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--bg); stroke-width: 2; }
.chart .dot-gold { fill: var(--gold); }
.chart .dot-ember { fill: var(--bg); stroke: var(--ember); }
.chart .dot-frost, .chart .dot-now { fill: var(--frost); }
.chart .label { fill: var(--text); font-family: var(--font-body); }
.chart .label-ember { fill: var(--ember); }
.chart-narrow { display: none; }

.strip { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: auto; }
.strip span { flex: 1 1 0; border-radius: 2px; background: var(--line); min-height: 3px; }
.strip span.on { background: var(--frost-dim); }
.strip span.today { background: var(--frost); }
.strip-legend { display: flex; justify-content: space-between; margin-top: -10px; font-size: 12px; }

/* ---- home --------------------------------------------------------------- */

.hero { display: flex; align-items: center; gap: 64px; padding-top: 80px; padding-bottom: 88px; }
.hero-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero-name { position: relative; align-self: flex-start; font-family: var(--font-caps); font-weight: 600; font-size: clamp(58px, 8.2vw, 122px); line-height: 1; letter-spacing: 0.04em; margin: 2px 0 2px -0.03em; }
.hero-identity { font-size: 20px; color: var(--text-2); }
.hero-line { margin: 8px 0 0; max-width: 760px; font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

.hero-ring { position: relative; width: 380px; height: 380px; flex-shrink: 0; }
.ring { width: 100%; height: 100%; display: block; }
.ring circle, .ring path { fill: none; }
.ring-outer { stroke: #2e3247; stroke-width: 1; }
.ring-dots { stroke: var(--frost); stroke-width: 1.5; stroke-dasharray: 2 10; }
.ring-track { stroke: #2e3247; stroke-width: 18; }
.ring-fill { stroke: var(--frost); stroke-width: 18; stroke-linecap: round; }
.ring-inner { stroke: var(--gold); stroke-width: 1; }
.ring-star { stroke: var(--gold); stroke-width: 1; opacity: 0.3; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ring-caption { font-family: var(--font-caps); font-size: 13px; letter-spacing: 3px; color: var(--muted); }
.ring-level { font-family: var(--font-display); font-size: 112px; font-weight: 600; line-height: 1; }
.ring-sub { font-size: 14px; color: var(--frost); margin-top: 6px; }

.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile-label { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.tile-value { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.05; overflow-wrap: anywhere; }
.tile-sub { font-size: 13px; color: var(--frost); }
.tile-muted .tile-value { color: var(--muted); font-size: 26px; }

.chapter-card { color: var(--text); border-color: var(--line-2); gap: 14px; }
.chapter-card:hover { text-decoration: none; color: var(--text); border-color: var(--frost-dim); }
.chapter-card-title { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1.05; }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.mini-stats b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; }
.mini-stats span { font-size: 13px; color: var(--muted); }
.card-link { margin-top: auto; font-weight: 700; color: var(--frost); }

.milestones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.milestones li { display: flex; gap: 14px; align-items: flex-start; }
.milestones .diamond { margin-top: 7px; }
.m-title { font-size: 16px; font-weight: 500; }
.m-meta { font-size: 13px; color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts div { background: var(--panel-2); border-radius: 8px; padding: 12px 16px; }
.facts span { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.facts b { font-family: var(--font-display); font-size: 28px; font-weight: 600; }

.data-note { margin-top: 24px; }

/* ---- journey ------------------------------------------------------------ */

.page-head { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 28px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.page-title { font-size: clamp(48px, 6vw, 80px); line-height: 1; margin-top: 10px; }

.view-toggle { display: flex; gap: 8px; }
.view-toggle[hidden] { display: none; }
.view-toggle button { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 500 14px var(--font-body); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { border-color: var(--gold); background: var(--notice-bg); color: var(--gold); }

.chapter-rail { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.chapter-rail li { min-width: 0; flex-basis: 0; }
.chapter-rail a { display: flex; flex-direction: column; gap: 10px; color: var(--text); padding-bottom: 4px; }
.chapter-rail a:hover { text-decoration: none; }
.chapter-rail a:hover .rail-title { color: var(--frost); }
.rail-bar { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.rail-bar span { display: block; height: 100%; border-radius: 5px; background: var(--frost-dim); }
.rail-current span { background: var(--frost); }
.chapter-rail a[aria-current] .rail-label { color: var(--frost); }
.rail-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rail-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }

.chapters { display: flex; flex-direction: column; gap: 20px; }
.chapter { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.chapter[open] { padding-bottom: 12px; }
.chapter-summary { list-style: none; display: flex; align-items: center; gap: 28px; padding: 28px 48px; cursor: pointer; }
.chapter-summary::-webkit-details-marker { display: none; }
.chapter-roman { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 0.9; color: var(--muted); min-width: 1.4em; }
.chapter[open] .chapter-roman { font-size: 96px; color: var(--gold); }
.chapter[open] .chapter-roman.tone-text-frost { color: var(--frost); }
.chapter-heading { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.chapter-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.05; }
.chapter[open] .chapter-title { font-size: 48px; }
.chapter-meta { font-size: 15px; color: var(--muted); }
.chapter-toggle { width: 14px; height: 14px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-right: 6px; flex-shrink: 0; transition: transform 0.15s; }
.chapter[open] .chapter-toggle { transform: rotate(-135deg); }

.chapter-body { padding: 0 48px 32px; display: flex; flex-direction: column; gap: 28px; }
.stat-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.stat-strip div { background: var(--panel-3); padding: 16px 20px; }
.stat-strip b { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.1; }
.stat-strip span { font-size: 13px; color: var(--muted); }

.chapter-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.chapter-grid.no-side { grid-template-columns: minmax(0, 1fr); }

.timeline { list-style: none; margin: 0; padding: 0; }
.t-item { display: grid; grid-template-columns: 56px 22px minmax(0, 1fr); column-gap: 16px; }
.t-level { text-align: right; padding-top: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.t-rail { position: relative; display: flex; justify-content: center; }
.t-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #2e3247; }
.t-item:first-child .t-rail::before { top: 18px; }
.t-item:last-child .t-rail::before { bottom: auto; height: 18px; }
.t-rail .diamond { position: relative; margin-top: 14px; width: 12px; height: 12px; }
.t-body { padding: 8px 0 22px; min-width: 0; }
.t-kind { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.t-title { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.t-meta { font-size: 14px; color: var(--muted); }
.t-quote { margin: 10px 0 0; padding: 14px 18px; background: var(--panel-2); border-radius: 8px; font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text); }
.t-quote::before { content: "“"; }
.t-quote::after { content: "”"; }
.chapters[data-view="major"] .t-minor { display: none; }
.minor-note { display: none; margin: 0 0 0 94px; }
.chapters[data-view="major"] .minor-note { display: block; }

.chapter-side { display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--panel-2); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.side-card .bar-track { background: #2e3247; }
.side-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.boss-list, .growth { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.boss-list li, .growth li { display: flex; justify-content: space-between; gap: 12px; }

.not-found { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 16px; }

/* ---- shared page parts --------------------------------------------------- */

.page-intro { max-width: 760px; margin: 14px 0 0; font-size: 18px; color: var(--text-2); }
.wrap-strip { margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.empty { align-items: flex-start; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px; }
.legend i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.tone-fill-gold { fill: var(--gold); }
.tone-fill-frost { fill: var(--frost); }
.tone-fill-ember { fill: var(--ember); }
.tone-fill-sage { fill: var(--sage); }
.tone-fill-muted { fill: var(--muted); }
.fact-text { font-family: var(--font-body) !important; font-size: 17px !important; font-weight: 500 !important; }

/* ---- atlas --------------------------------------------------------------- */

.zone-wide { grid-column: span 2; }
.zone-body { display: flex; flex-direction: column; gap: 18px; }
.zone-map, .zone-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zone-wide .zone-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.zone-wide .zone-stats { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 48px; row-gap: 14px; }
.layer-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.layer-bar[hidden] { display: none; }
.layer { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font: 500 14px var(--font-body); cursor: pointer; }
.layer[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.layer .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.area-swatch { width: 16px; height: 11px; border-radius: 6px; background: rgba(140, 200, 230, 0.16); border: 1px solid rgba(140, 200, 230, 0.35); display: inline-block; }
.stat-strip .has-icon { display: flex; align-items: center; gap: 14px; }
.stat-icon-wrap { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-2); flex-shrink: 0; }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; margin-bottom: 24px; }
.zone h2 { font-size: 30px; }
.sketch { width: 100%; height: auto; display: block; background: var(--panel-3); border-radius: 10px; }
.sketch .sk-bg { fill: var(--panel-3); }
.sketch .sk-grid { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.sketch .sk-frame { fill: none; stroke: var(--line); }
.sketch .sk-path { fill: none; stroke: var(--frost-dim); stroke-width: 1.3; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0.8; }
.sketch .sk-label { fill: var(--muted); font-family: var(--font-body); pointer-events: none; }
.sketch .sk-count { fill: #11121a; font-family: var(--font-body); font-weight: 700; text-anchor: middle; pointer-events: none; }
.atlas .layer-off { display: none; }
/* Solid fill + stroke with element opacity, so the padded edge blends in evenly. */
.sketch .sk-area { fill: var(--frost); stroke: var(--frost); stroke-linejoin: round; stroke-linecap: round; opacity: 0.08; }
.atlas.hide-area .sk-area { display: none; }
.sketch-caption { margin-top: -6px; font-size: 12px; }
.sketch .sk-point circle { stroke: var(--bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sketch .sk-point circle.sk-hit { stroke: none; }
.sketch-empty { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.zone-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; }
.zone-stats b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.zone-stats span { font-size: 13px; color: var(--muted); }
.chips-small { margin-top: 10px; }
.chips-small li { font-size: 13px; padding: 4px 10px; }

/* ---- tables (bestiary, sessions) ------------------------------------------ */

.table-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.table-tools[hidden] { display: none; }
.table-tools input { min-height: 44px; width: min(320px, 100%); padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 400 16px var(--font-body); }
.table-tools input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.table-panel { padding: 8px 12px; overflow-x: auto; margin-bottom: 20px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger th, .ledger td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger thead th { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody th { font-weight: 500; }
.ledger .rank { color: var(--muted); width: 3em; }
.ledger .kills { white-space: nowrap; min-width: 180px; }
.ledger .num { display: inline-block; min-width: 3.2em; font-weight: 700; }
.inline-bar { display: inline-block; width: 110px; height: 6px; background: var(--line); border-radius: 3px; vertical-align: middle; margin-left: 8px; }
.inline-bar span { display: block; height: 100%; background: var(--bar); border-radius: 3px; }
.filter-empty { padding: 12px 14px; margin: 0; }

/* ---- dungeons ------------------------------------------------------------ */

.dungeon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 24px; }
.dungeon h2 { font-size: 32px; margin-top: 4px; }
.boss-table { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.boss-table li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.boss-table li:last-child { border-bottom: 0; }
.boss-name { font-weight: 500; font-size: 15px; }
.runs summary { cursor: pointer; color: var(--frost); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.run-list li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- collections ------------------------------------------------------- */

.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.prof-list, .rep-list, .dated-list, .feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.prof-list li, .rep-list li { display: flex; flex-direction: column; gap: 6px; }
.prof-head { display: flex; justify-content: space-between; gap: 12px; }
.progress-sage span { background: var(--sage); }
.rep-scale { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.rep-scale span { height: 6px; border-radius: 2px; background: var(--line); }
.rep-scale span.on.tone-muted { background: #6d6a62; }
.dated-list { gap: 10px; }
.dated-list li, .feature-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dated-list li:last-child, .feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-list { gap: 10px; }
.q-rare { color: #5aa7f0; }
.q-epic { color: #c08af5; }
.q-legendary { color: #ff9b3d; }
a.q-rare:hover, a.q-epic:hover, a.q-legendary:hover { color: var(--text); }

/* ---- sessions ------------------------------------------------------------ */

.calendar-wrap { display: flex; flex-direction: column; gap: 12px; overflow-x: auto; }
.calendar { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; width: max-content; }
.cal-months { grid-column: 2; display: grid; grid-template-columns: repeat(var(--weeks), 18px); gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cal-days { grid-row: 2; display: grid; grid-template-rows: repeat(7, 18px); gap: 4px; font-size: 11px; color: var(--muted); line-height: 18px; }
.cal-grid { grid-row: 2; grid-column: 2; display: grid; grid-template-rows: repeat(7, 18px); grid-auto-flow: column; grid-auto-columns: 18px; gap: 4px; }
.cal-grid span, .cal-legend span { width: 18px; height: 18px; border-radius: 3px; display: inline-block; }
.cal-grid .pad { visibility: hidden; }
.h0 { background: var(--line); }
.h1 { background: #2f4553; }
.h2 { background: #3f6378; }
.h3 { background: #5f93b0; }
.h4 { background: var(--frost); }
.cal-legend { display: flex; align-items: center; gap: 4px; }
.sessions-table th[scope="row"] { white-space: nowrap; }
.sessions-table td { white-space: nowrap; }
.cal-panel { margin-bottom: 24px; }

/* ---- about --------------------------------------------------------------- */

.about-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.prose h2 { font-size: 26px; margin-top: 8px; }
.prose p { margin: 0; line-height: 1.65; color: var(--text-2); max-width: 70ch; }
.prose code { font-size: 14px; background: var(--panel-2); padding: 2px 6px; border-radius: 4px; }

/* ---- preview ------------------------------------------------------------- */

.drop { border-style: dashed; border-color: var(--line-2); gap: 14px; }
.drop.dragging { border-color: var(--gold); background: var(--notice-bg); }
.drop-label { display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.drop input[type="file"] { max-width: 100%; }
.drop-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.drop input[type="file"] { color: var(--text-2); font: 400 15px var(--font-body); }
.drop input[type="file"]::file-selector-button { min-height: 44px; margin-right: 14px; padding: 0 18px; border-radius: 6px; border: 0; background: var(--gold); color: #1a1408; font: 700 15px var(--font-body); cursor: pointer; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); }
.status { margin: 0; }
.preview-tabs { flex-wrap: wrap; margin: 28px 0 8px; }
.preview-frame { border: 1px solid var(--line); border-radius: 14px; padding-bottom: 24px; overflow: hidden; }
.preview-frame .wrap { padding-left: 24px; padding-right: 24px; }

/* ---- icons, badges, tooltips ------------------------------------------- */

.hero-identity .guild { color: var(--gold); }
.hero-identity .hardcore { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--ember); border-radius: 10px; font-size: 13px; color: var(--ember); vertical-align: 2px; }
.crest, .level-badge, .medal { display: block; }
.m-badge { flex-shrink: 0; margin: -3px 0 0 -9px; width: 30px; }
.milestones li:has(.m-badge) { gap: 5px; }
.t-badge { position: relative; margin-top: 6px; display: flex; line-height: 0; border-radius: 50%; }
/* achievement badges have see-through corners: hide the rail line behind them with a small disc only */
.t-badge:has(.ach-badge) { background: radial-gradient(circle, #1c1e2c 0 52%, transparent 54%); }

.sketch-wrap { position: relative; }
.sketch .sk-hit { fill: transparent; }
.sketch .sk-point { cursor: pointer; outline: none; }
.sketch .sk-point:focus-visible circle:not(.sk-hit), .sketch .sk-point.active circle:not(.sk-hit) { stroke: var(--text); stroke-width: 2; }
.sketch .sk-point:focus-visible .sk-hit { stroke: var(--gold); stroke-width: 1.5; }
.map-tip { position: absolute; z-index: 4; max-width: 260px; min-width: 160px; padding: 10px 12px; background: #0c0d14; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); pointer-events: none; font-size: 13px; line-height: 1.4; }
.map-tip[hidden] { display: none; }
.sketch .sk-ring { fill: none; stroke: var(--text-2); stroke-width: 1; opacity: 0.7; }
.tip-item + .tip-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tip-kind { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; }
.tip-title { font-weight: 700; font-size: 14px; color: var(--text); }
.tip-meta { color: var(--muted); }
.tip-quote { margin-top: 6px; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--text-2); }

/* Bestiary podium */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; margin: 0 0 28px; }
.podium-step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.podium-1 { order: 2; padding-top: 30px; padding-bottom: 34px; border-color: #6b5a33; background: #211d15; }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-medal { margin-bottom: 4px; }
.podium-place { font-family: var(--font-caps); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.podium-1 .podium-place { color: var(--gold); }
.podium-name { font-size: 28px; line-height: 1.1; }
.podium-1 .podium-name { font-size: 34px; }
.podium-kills { font-size: 15px; color: var(--text-2); }
.podium-kills b { font-family: var(--font-display); font-size: 30px; color: var(--text); }
.ledger .rank .medal { width: 28px; height: 28px; }

/* Raids: coming soon */
.coming-soon { flex-direction: row; align-items: center; gap: 40px; padding: 40px 44px; }
.coming-emblem { flex-shrink: 0; }
.coming-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.coming-text h2 { font-size: 36px; }
.coming-text p { margin: 0; color: var(--text-2); }
.coming-list { margin: 0; padding-left: 20px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.progress-gold span { background: var(--gold); }

/* Notable gear */
.gear-firsts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gear-firsts li { display: grid; grid-template-columns: 12px 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.gear-firsts li:last-child { border-bottom: 0; }
.gear-label { color: var(--muted); font-size: 14px; }
.quality-dot { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.q-rare-bg { background: #5aa7f0; }
.q-epic-bg { background: #c08af5; }
.q-legendary-bg { background: #ff9b3d; }
.not-yet .quality-dot { opacity: 0.35; }
.big-drops li > span:first-child { min-width: 0; }
.item { position: relative; display: inline-block; }
.item-name { font-weight: 500; }
.item-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.item-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; width: 270px; padding: 12px 14px; background: #0c0d14; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.item:hover .item-tip, .item:focus-within .item-tip { display: flex; }
.item-tip .tip-title { font-size: 15px; }
.item-tip .tip-title.q-rare { color: #5aa7f0; }
.item-tip .tip-title.q-epic { color: #c08af5; }
.item-tip .tip-title.q-legendary { color: #ff9b3d; }
.q-rare-edge { border-color: #2f5b85; }
.q-epic-edge { border-color: #5d3f7c; }
.q-legendary-edge { border-color: #7d4d1f; }
.tip-line { display: block; }
.tip-foot { display: block; margin-top: 6px; font-size: 12px; color: var(--frost); }

/* ---- hero: the waving portrait inside the level ring --------------------- */

.hero-ring.has-video .ring-star { display: none; }
.hero-portrait { position: absolute; inset: 17.6%; border-radius: 50%; overflow: hidden; background: #cfe0ea; box-shadow: inset 0 0 0 1px rgba(226, 179, 92, 0.5); }
.hero-portrait img, .hero-portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ring-medal { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); width: 104px; height: 104px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.ring-medal .ring-level { font-size: 48px; }
.ring-medal .ring-caption { font-size: 10px; letter-spacing: 2px; }
.ring-medal .ring-sub { font-size: 11px; margin-top: 2px; }
.video-toggle { position: absolute; right: 8%; bottom: 8%; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.85); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.video-toggle[hidden] { display: none; }
.video-toggle:hover, .video-toggle:focus-visible { color: var(--gold); border-color: var(--gold); }
.video-toggle path { fill: currentColor; }
.video-toggle .i-play, .video-paused .video-toggle .i-pause { display: none; }
.video-paused .video-toggle .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .hero-ring:not([data-ready]) .hero-video { display: none; }
}

/* ---- achievements -------------------------------------------------------- */

.ach-teaser { display: flex; align-items: center; gap: 14px; max-width: 460px; padding: 10px 18px 10px 10px; border: 1px solid var(--line-2); border-radius: 40px; background: var(--panel); color: var(--text); margin-top: 4px; }
.ach-teaser:hover { text-decoration: none; border-color: var(--gold); }
.ach-teaser-art { flex-shrink: 0; display: flex; }
.ach-teaser-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ach-teaser-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.ach-teaser-next .ach-badge { filter: grayscale(1) brightness(0.55); }

.ach-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; margin-top: 8px; margin-bottom: 28px; }
.ach-count { display: flex; align-items: baseline; gap: 10px; }
.ach-count b { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--gold); }
.ach-count span { color: var(--muted); }
.ach-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ach-tiers li { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.ach-tiers b { font-size: 18px; color: var(--text); }
.ach-tiers .ach-none .ach-badge { filter: grayscale(1) brightness(0.5); }
.ach-latest { display: flex; flex-direction: column; padding-left: 24px; border-left: 1px solid var(--line-2); }
.ach-latest-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; }

.ach-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ach { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--line); }
.ach-art { display: flex; }
.ach-is-earned { border-color: rgba(226, 179, 92, 0.45); background: linear-gradient(90deg, rgba(226, 179, 92, 0.08), transparent 60%), var(--panel-3); }
.ach-is-earned.ach-tier-legendary { border-color: rgba(224, 120, 47, 0.7); box-shadow: 0 0 24px rgba(224, 120, 47, 0.12); }
.ach-is-locked .ach-badge, .ach-is-launch .ach-badge, .ach-is-missed .ach-badge { filter: grayscale(1) brightness(0.42) contrast(1.1); opacity: 0.8; }
.ach-is-launch .ach-title, .ach-is-missed .ach-title { color: var(--text-2); }
.ach-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ach-tier { font-family: var(--font-caps); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ach-tier-bronze.ach-is-earned .ach-tier { color: #e2ad85; }
.ach-tier-silver.ach-is-earned .ach-tier { color: #e3e7ee; }
.ach-tier-gold.ach-is-earned .ach-tier { color: var(--gold); }
.ach-tier-legendary.ach-is-earned .ach-tier { color: #ffae5e; }
.ach-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; }
.ach-desc { font-size: 14px; color: var(--text-2); }
.ach-status { font-size: 13px; margin-top: 4px; }
.ach-progress { margin-top: 8px; height: 6px; }
.ach-progress span { background: var(--frost-dim); }
.chip-soon { display: inline-block; padding: 2px 10px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 12px; letter-spacing: 0.5px; }
.t-achievement .t-title { color: var(--gold); }

/* ---- story ---------------------------------------------------------------- */


/* ---- about: the player ---------------------------------------------------- */

.about-me { margin-bottom: 24px; }
.about-player { max-width: 880px; }
.about-name { font-size: 44px; margin: 0; }
.about-quote { margin: 4px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--text); }

/* ---- home: the scene, the journal and the road ---------------------------- */

.hero-scene { position: relative; isolation: isolate; overflow: hidden; }
.hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.hero-backdrop::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(17, 18, 26, 0.86) 24%, rgba(17, 18, 26, 0.25) 58%, rgba(17, 18, 26, 0) 100%),
    linear-gradient(180deg, rgba(17, 18, 26, 0.3) 0%, rgba(17, 18, 26, 0) 35%, rgba(17, 18, 26, 0.55) 84%, var(--bg) 100%),
    linear-gradient(rgba(22, 26, 56, 0.22), rgba(22, 26, 56, 0.22)); }
.hero-slide { position: absolute; inset: -4%; background-position: 60% 40%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 2s ease; }
.hero-slide.is-on { opacity: 1; animation: drift 24s ease-in-out infinite alternate; }
.scene-caption { position: absolute; right: var(--gutter); bottom: 14px; margin: 0; font-size: 12px; letter-spacing: 0.04em; color: rgba(238, 230, 211, 0.55); transition: opacity 0.8s ease; pointer-events: none; }
.scene-caption.is-fading { opacity: 0; }
.scene-place { font-family: var(--font-caps); letter-spacing: 0.12em; color: rgba(238, 230, 211, 0.75); }
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); } }
.snowfall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* the launch countdown, at the top of the hero */
.launch-bar { display: flex; justify-content: center; padding-top: 28px; }
.launch-bar + .hero { padding-top: 36px; }
.launch-count { display: inline-flex; align-items: center; gap: 22px; padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(226, 179, 92, 0.5); background: rgba(17, 18, 26, 0.62); box-shadow: 0 0 34px rgba(226, 179, 92, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.launch-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost); white-space: nowrap; }
.launch-spark { width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 3.6s ease-in-out infinite; }
.launch-units { display: inline-flex; align-items: baseline; gap: 16px; }
.launch-unit { display: inline-flex; align-items: baseline; gap: 5px; }
.launch-unit b { font-family: var(--font-caps); font-size: 28px; font-weight: 600; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.launch-unit small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.launch-when { padding-left: 22px; border-left: 1px solid rgba(226, 179, 92, 0.3); font-family: var(--font-display); font-style: italic; font-size: 17px; color: rgba(238, 230, 211, 0.8); white-space: nowrap; }
.launch-count.is-live .launch-label { color: var(--gold); }

.hero-eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow-line { width: 40px; height: 1px; background: currentColor; opacity: 0.6; }
.hero-eyebrow .eyebrow-line:first-child { display: none; }

.hero-name-text {
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 251, 235, 0.95) 48%, transparent 58%),
    linear-gradient(180deg, #fff3cf 0%, #f3cf82 36%, #d99d3f 62%, #a9722b 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(70, 40, 6, 0.65)) drop-shadow(0 0 28px rgba(226, 179, 92, 0.32));
  animation: shimmer 8s ease-in-out 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 160% 0, 0 0; } 30%, 100% { background-position: -60% 0, 0 0; } }
.hero-name::before, .hero-name::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 3.6s ease-in-out infinite; }
.hero-name::before { right: -26px; top: 2px; }
.hero-name::after { right: -8px; top: 34px; width: 10px; height: 10px; background: var(--frost); animation-delay: 1.4s; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.hero-ring::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(140, 200, 230, 0.22), rgba(140, 200, 230, 0) 62%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.03); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.coins { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 0.35em; white-space: nowrap; }
.coin { display: inline-flex; align-items: center; gap: 0.14em; }
.coin-icon { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -0.06em 0 rgba(0, 0, 0, 0.35), 0 0 0 0.05em rgba(0, 0, 0, 0.45); }
.coin-gold { background: radial-gradient(circle at 35% 30%, #fff1b8 0 12%, #f2c94c 38%, #b8861f 100%); }
.coin-silver { background: radial-gradient(circle at 35% 30%, #ffffff 0 12%, #d3d9e2 40%, #7f8896 100%); }
.coin-copper { background: radial-gradient(circle at 35% 30%, #ffd2ad 0 12%, #d98b4f 40%, #8a4a22 100%); }
.tally-value .coins { gap: 0 0.28em; }
.tally-value .coin-icon { width: 0.5em; height: 0.5em; }
.tally ul { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tally li { display: flex; }
.tally li + li { border-left: 1px solid rgba(226, 179, 92, 0.22); }
.tally a, .tally-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px; color: var(--text); text-align: center; border-radius: 10px; transition: transform 0.25s ease; }
.tally a:hover { text-decoration: none; transform: translateY(-3px); }
.tally a:hover .tally-value { color: #f6d58d; text-shadow: 0 0 18px rgba(226, 179, 92, 0.45); }
.tally-icon { display: flex; color: var(--frost); margin-bottom: 2px; }
.tally-value { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; color: var(--gold); transition: color 0.25s ease, text-shadow 0.25s ease; }
.tally-label { font-family: var(--font-caps); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

.home-divider { display: flex; justify-content: center; margin: 40px 0 8px; }
.ornament path, .ornament circle { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.7; }
.ornament path:nth-child(2) { fill: var(--gold); opacity: 0.9; }

.home-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 28px; align-items: stretch; }
.home-pair-b { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-top: 64px; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 24px; row-gap: 4px; }
.home-head .eyebrow { flex-basis: 100%; }
.home-head h2 { flex: 1 1 auto; font-size: 40px; }
.home-link { font-weight: 500; }

.journal-entry { position: relative; padding: 34px 40px 32px; border-radius: 14px; border: 1px solid rgba(226, 179, 92, 0.3); box-shadow: inset 0 0 0 7px var(--panel), inset 0 0 0 8px rgba(226, 179, 92, 0.14), 0 24px 48px rgba(0, 0, 0, 0.25);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(226, 179, 92, 0.07), rgba(226, 179, 92, 0) 45%),
    var(--panel); }
.journal-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.journal-date { font-family: var(--font-caps); font-size: 26px; letter-spacing: 0.05em; color: var(--gold); margin: 10px 0 14px; }
.journal-text { margin: 0; font-family: var(--font-display); font-size: 23px; line-height: 1.55; color: var(--text); }
.journal-text::first-letter { float: left; font-family: var(--font-caps); font-size: 64px; line-height: 0.82; padding: 6px 10px 0 0; color: var(--gold); }
.journal-highlights { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.journal-highlights li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 14px; font-size: 14px; color: var(--text-2); background: rgba(17, 18, 26, 0.4); }
.journal-highlights li::before { content: "✦ "; color: var(--gold); }
.journal-note { margin: 20px 0 0; padding-left: 18px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--text); }
.journal-sign { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }

.book-page, .nemesis { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: 14px; color: var(--text); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.book-page:hover, .nemesis:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.book-page { border: 1px solid var(--line-2); background: radial-gradient(circle at 100% 0%, rgba(140, 200, 230, 0.12), transparent 55%), var(--panel); }
.book-page:hover { border-color: var(--gold); color: var(--text); }
.book-roman { position: absolute; right: 16px; top: -26px; font-family: var(--font-caps); font-size: 170px; font-weight: 600; line-height: 1; color: rgba(226, 179, 92, 0.09); pointer-events: none; }
.book-title { font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1.05; }
.book-levels { font-size: 14px; color: var(--muted); }
.book-progress { height: 3px; margin: 12px 0 8px; border-radius: 2px; background: var(--line); }
.book-progress span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--frost), var(--gold)); box-shadow: 0 0 10px rgba(226, 179, 92, 0.5); }
.book-quote { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.45; }
.book-quote::before { content: "“"; color: var(--gold); }
.book-quote::after { content: "”"; color: var(--gold); }
.book-summary { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.45; color: var(--text-2); }
.book-turn { margin-top: auto; padding-top: 16px; font-weight: 500; color: var(--gold); }
.book-page:hover .book-turn { letter-spacing: 0.02em; }

.road-section { margin-top: 72px; }
.road-frame { margin-top: 20px; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, #1e2444, var(--bg) 72%); overflow: hidden; }
.road { display: block; width: 100%; height: auto; }
.road-tall-wrap { display: none; }
.road-star { fill: #d8e2ff; opacity: 0.45; }
.road-star:nth-child(3n) { animation: twinkle-dot 4s ease-in-out infinite; }
.road-star:nth-child(4n) { animation: twinkle-dot 5.5s ease-in-out 1s infinite; }
@keyframes twinkle-dot { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.8; } }
.road-far { fill: #1a1e36; }
.road-near { fill: #151829; }
.road-ahead { fill: none; stroke: #3a3f58; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.road-done { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(226, 179, 92, 0.55)); }
.reveal-armed .road-done { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-armed.is-visible .road-done { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(0.3, 0.6, 0.3, 1) 0.3s; }
.waymark polygon { fill: var(--panel-2); stroke: var(--muted); stroke-width: 1.5; }
.waymark.reached polygon { fill: var(--gold); stroke: #f6dc98; }
.waymark circle { fill: var(--gold); }
.waymark text { fill: var(--muted); font-family: var(--font-caps); font-size: 15px; font-weight: 600; }
.waymark.reached text { fill: var(--text); }
.waymark .waymark-sub { fill: var(--frost); font-family: var(--font-body); font-size: 12px; font-weight: 400; }
.waymark.summit text { fill: var(--gold); }
.summit-flag { fill: rgba(226, 179, 92, 0.25); stroke: var(--gold); stroke-width: 1.5; }
.road-marker circle { fill: var(--bg); stroke-width: 2; }
.marker-ember circle { stroke: var(--ember); }
.marker-gold circle { stroke: var(--gold); }
.road-marker text { fill: var(--muted); font-family: var(--font-body); font-size: 12px; }
.here-pulse { fill: rgba(140, 200, 230, 0.35); transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.45); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.here-dot { fill: var(--frost); stroke: #fff; stroke-width: 2; }
.here-tag { fill: var(--bg); stroke: var(--frost); stroke-width: 1.2; }
.here-text { fill: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.here-stem { stroke: var(--frost); stroke-width: 1.2; }
.road-caption { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.road-key { white-space: nowrap; margin-left: 12px; }
.road-key::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--gold); vertical-align: -1px; }
.marker-key-ember::before { border-color: var(--ember); }

.trail { list-style: none; position: relative; margin: 20px 0 0; padding: 0; }
.trail::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; border-left: 2px dashed rgba(226, 179, 92, 0.3); }
.trail-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center; padding: 9px 0; }
.trail-mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); }
.trail-mark .diamond { width: 12px; height: 12px; }
.trail-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.trail-meta { font-size: 13px; color: var(--muted); }

.nemesis { align-items: center; text-align: center; justify-content: center; border: 1px solid rgba(224, 121, 90, 0.3); background: radial-gradient(circle at 50% 28%, rgba(224, 121, 90, 0.16), transparent 62%), var(--panel); }
.nemesis:hover { border-color: var(--ember); color: var(--text); }
.nemesis .eyebrow { color: var(--ember); }
.nemesis-mark { color: var(--ember); margin: 6px 0 2px; filter: drop-shadow(0 0 12px rgba(224, 121, 90, 0.5)); }
.nemesis-name { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.1; }
.nemesis-count { color: var(--muted); }
.nemesis-count b { font-size: 20px; color: var(--ember); }
.nemesis-line { margin: 6px 0 0; font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--text-2); }
.nemesis-rest { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

.countdown { display: inline-flex; flex-direction: column; gap: 4px; align-self: flex-start; padding: 16px 26px; border-radius: 14px; border: 1px solid rgba(226, 179, 92, 0.45); background: rgba(17, 18, 26, 0.6); box-shadow: 0 0 30px rgba(226, 179, 92, 0.12); }
.countdown-value { font-family: var(--font-caps); font-size: 34px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); }
.countdown-note { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--frost); }
.waiting-panel p { font-family: var(--font-display); font-size: 22px; }
.waiting-panel p.muted { font-family: var(--font-body); font-size: 15px; }

.reveal-armed { opacity: 0; transform: translateY(28px); }
.reveal-armed.is-visible { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-name-text, .hero-name::before, .hero-name::after, .hero-ring::before, .here-pulse, .road-star, .launch-spark { animation: none !important; }
  .reveal-armed { opacity: 1; transform: none; }
  .reveal-armed .road-done { stroke-dashoffset: 0; }
}

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --gutter: 40px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-wide { grid-column: span 2; }
  .nav-desktop { gap: 22px; }
  .updated { display: none; }
  .hero-ring { width: 300px; height: 300px; }
  .ring-level { font-size: 88px; }
  .chapter-grid { grid-template-columns: minmax(0, 1fr); }
  .chapter-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .header-row { min-height: 60px; }
  .brand-name { font-size: 18px; }
  .brand-medal { width: 38px; height: 38px; }
  .brand-medal img { width: 34px; height: 34px; }
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
  .hero-ring { width: 150px; height: 150px; align-self: flex-end; margin-bottom: -150px; }
  .ring-medal { width: 50px; height: 50px; bottom: -8%; border-width: 1.5px; }
  .ring-medal .ring-level { font-size: 24px; }
  .ring-medal .ring-caption, .ring-medal .ring-sub { display: none; }
  .video-toggle { width: 28px; height: 28px; right: -2%; bottom: 2%; }
  .ach-categories { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ach { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .ach-art .ach-badge { width: 60px; height: 60px; }
  .ach-count b { font-size: 48px; }
  .ach-latest { padding-left: 0; border-left: 0; }
  .ach-teaser { max-width: 100%; }
  .about-name { font-size: 34px; }
  .about-quote { font-size: 22px; }
  .hero-text { width: 100%; }
  .hero-name { font-size: 50px; max-width: calc(100% - 150px); line-height: 1.02; }
  .hero-name::before { right: -18px; }
  .hero-eyebrow .eyebrow-line { display: none; }
  .hero { padding-top: 28px; padding-bottom: 40px; }
  .launch-bar { padding-top: 16px; }
  .launch-bar + .hero { padding-top: 18px; }
  .launch-count { flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 10px 18px; border-radius: 18px; width: 100%; }
  .launch-label { font-size: 11px; width: 100%; justify-content: center; }
  .launch-unit b { font-size: 24px; }
  .launch-when { width: 100%; text-align: center; padding-left: 0; border-left: 0; font-size: 15px; }
  .hero-backdrop::after { background:
      linear-gradient(180deg, rgba(17, 18, 26, 0.55) 0%, rgba(17, 18, 26, 0.75) 45%, var(--bg) 100%),
      linear-gradient(rgba(22, 26, 56, 0.5), rgba(22, 26, 56, 0.5)); }
  .hero-slide { background-position: 70% 30%; }
  .scene-caption { bottom: 8px; font-size: 11px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.coins { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 0.35em; white-space: nowrap; }
.coin { display: inline-flex; align-items: center; gap: 0.14em; }
.coin-icon { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -0.06em 0 rgba(0, 0, 0, 0.35), 0 0 0 0.05em rgba(0, 0, 0, 0.45); }
.coin-gold { background: radial-gradient(circle at 35% 30%, #fff1b8 0 12%, #f2c94c 38%, #b8861f 100%); }
.coin-silver { background: radial-gradient(circle at 35% 30%, #ffffff 0 12%, #d3d9e2 40%, #7f8896 100%); }
.coin-copper { background: radial-gradient(circle at 35% 30%, #ffd2ad 0 12%, #d98b4f 40%, #8a4a22 100%); }
.tally-value .coins { gap: 0 0.28em; }
.tally-value .coin-icon { width: 0.5em; height: 0.5em; }
.tally ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; padding: 22px 0; }
  .tally li:nth-child(3n + 1) { border-left: 0; }
  .tally-value { font-size: 34px; }
  .tally-label { font-size: 10px; letter-spacing: 1.5px; }
  .home-divider { margin: 28px 0 0; }
  .home-pair, .home-pair-b { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-pair-b { margin-top: 48px; }
  .journal-entry { padding: 24px 20px; }
  .journal-text { font-size: 20px; }
  .journal-text::first-letter { font-size: 52px; }
  .book-page, .nemesis { padding: 24px 20px; }
  .book-title { font-size: 30px; }
  .book-roman { font-size: 120px; }
  .home-head h2 { font-size: 30px; }
  .road-section { margin-top: 48px; }
  .road-wide-wrap { display: none; }
  .road-tall-wrap { display: block; }
  .ring-level { font-size: 44px; }
  .ring-caption { font-size: 10px; letter-spacing: 2px; }
  .ring-sub { font-size: 11px; }
  .ring-dots, .ring-star, .ring-inner { display: none; }
  .hero-identity { font-size: 16px; }
  .hero-line { font-size: 21px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 16px; }
  .tile-value { font-size: 30px; }
  .tile-sub { font-size: 12px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .panel-wide { grid-column: auto; }
  .panel { padding: 20px 16px; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .page-head { padding-top: 32px; gap: 20px; }
  .chapter-rail { flex-direction: column; gap: 14px; }
  .chapter-rail li { flex-grow: 1 !important; }
  .chapter-rail a { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
  .rail-bar { grid-column: 1 / -1; }
  .rail-title { font-size: 20px; }
  .chapter-summary { padding: 20px 16px; gap: 16px; }
  .chapter-roman { font-size: 40px; }
  .chapter[open] .chapter-roman { font-size: 56px; }
  .chapter-title { font-size: 24px; }
  .chapter[open] .chapter-title { font-size: 30px; }
  .chapter-body { padding: 0 16px 20px; gap: 20px; }
  .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-strip div { padding: 12px 14px; }
  .stat-strip b { font-size: 24px; }
  .chapter-side { display: flex; }
  .t-item { grid-template-columns: 40px 18px minmax(0, 1fr); column-gap: 10px; }
  .t-title { font-size: 16px; }
  .t-quote { font-size: 18px; }
  .minor-note { margin-left: 0; }
  .footer-row { flex-direction: column; }
  .page-intro { font-size: 16px; }
  .wrap-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .podium-1, .podium-2, .podium-3 { order: 0; }
  .podium-step { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; column-gap: 14px; padding: 16px; }
  .podium-1 { padding: 16px; }
  .podium-medal { margin: 0; }
  .podium-medal .medal { width: 48px; height: 48px; }
  .podium-name, .podium-1 .podium-name { font-size: 24px; flex: 1 1 60%; }
  .podium-place { flex-basis: 100%; order: -1; }
  .coming-soon { flex-direction: column; align-items: flex-start; padding: 24px 16px; gap: 20px; }
  .coming-text h2 { font-size: 28px; }
  .gear-firsts li { grid-template-columns: 12px minmax(0, 1fr); row-gap: 2px; }
  .gear-firsts li > .gear-item, .gear-firsts li > .small { grid-column: 2; }
  .item-tip { width: min(270px, 80vw); }
  .wrap-strip > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zone-grid, .dungeon-grid, .collection-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .zone-wide { grid-column: auto; }
  .zone-wide .zone-body { display: flex; }
  .zone-wide .zone-stats { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 10px; }
  .stat-strip .has-icon { gap: 10px; }
  .stat-icon-wrap { width: 34px; height: 34px; }
  .zone h2, .dungeon h2 { font-size: 26px; }
  .zone-stats b { font-size: 22px; }
  .boss-table li { grid-template-columns: minmax(0, 1fr) auto; }
  .boss-table li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .table-panel { padding: 4px 12px; }
  /* Tables become stacked cards on phones. */
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr { display: block; width: 100%; }
  .ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .ledger tr[hidden] { display: none; }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger th, .ledger td { display: block; padding: 0; border: 0; white-space: normal; }
  .ledger tbody th { grid-column: 1 / -1; font-size: 17px; }
  .ledger td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .ledger .rank { display: none; }
  .ledger .kills { grid-column: 1 / -1; min-width: 0; }
  .inline-bar { width: calc(100% - 4.5em); }
  .preview-frame .wrap { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- page banners: a slim scene behind each page's title ------------------ */

.page-banner { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(240px, 23vw, 330px); display: flex; align-items: flex-end; }
.banner-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.banner-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: drift 30s ease-in-out infinite alternate; }
.banner-backdrop::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 18, 26, 0.72) 0%, rgba(17, 18, 26, 0.42) 32%, rgba(17, 18, 26, 0.06) 62%, rgba(17, 18, 26, 0) 100%),
    linear-gradient(180deg, rgba(17, 18, 26, 0.25) 0%, rgba(17, 18, 26, 0) 28%, rgba(17, 18, 26, 0.2) 70%, var(--bg) 100%); }
.page-banner .page-head { position: relative; width: 100%; padding-top: 72px; padding-bottom: 30px; }
.page-banner .page-head-text { min-width: 0; }
.page-banner .page-title, .page-banner .eyebrow, .page-banner .page-intro { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5); }
.page-banner .page-intro { color: var(--text); }
.page-banner .scene-caption { top: 12px; bottom: auto; }
.page-banner .view-toggle button { background: rgba(17, 18, 26, 0.6); }
.page-banner .view-toggle button[aria-pressed="true"] { background: rgba(40, 32, 18, 0.85); }
.rail-wrap { padding-top: 8px; padding-bottom: 32px; }
.not-found { padding-top: 24px; }

@media (max-width: 860px) {
  .page-banner { min-height: 210px; }
  .page-banner .page-head { padding-top: 56px; padding-bottom: 22px; }
  .banner-backdrop::after { background:
    linear-gradient(180deg, rgba(17, 18, 26, 0.35) 0%, rgba(17, 18, 26, 0.25) 40%, rgba(17, 18, 26, 0.6) 78%, var(--bg) 100%); }
  .page-banner .scene-caption { top: 8px; }
}

/* ---- home: the waving ring wakes up under the pointer --------------------- */

.hero-ring .ring-dots, .hero-ring .ring-outer { transform-box: view-box; transform-origin: 50% 50%; }
.hero-ring .ring-dots { transition: stroke 0.6s ease, opacity 0.6s ease; animation: ring-spin 40s linear infinite; animation-play-state: paused; }
.hero-ring .ring-fill { transition: stroke 0.6s ease, filter 0.6s ease; }
.hero-ring .ring-inner { transition: stroke-width 0.6s ease, filter 0.6s ease; }
.hero-portrait { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.7s ease; }
.ring-medal { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease; }
.hero-ring::after { content: ""; position: absolute; inset: 1%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.7s ease;
  background: conic-gradient(from 0deg, rgba(226, 179, 92, 0) 0deg, rgba(226, 179, 92, 0.55) 40deg, rgba(226, 179, 92, 0) 80deg, rgba(226, 179, 92, 0) 180deg, rgba(140, 200, 230, 0.45) 220deg, rgba(140, 200, 230, 0) 260deg);
  -webkit-mask: radial-gradient(circle, transparent 69%, #000 70%, #000 72%, transparent 73%);
  mask: radial-gradient(circle, transparent 69%, #000 70%, #000 72%, transparent 73%);
  animation: ring-spin 7s linear infinite; animation-play-state: paused; }
.hero-ring:hover .ring-dots, .hero-ring:focus-within .ring-dots { animation-play-state: running; stroke: var(--gold); }
.hero-ring:hover .ring-fill, .hero-ring:focus-within .ring-fill { stroke: #a9dcf2; filter: drop-shadow(0 0 6px rgba(140, 200, 230, 0.8)); }
.hero-ring:hover .ring-inner, .hero-ring:focus-within .ring-inner { stroke-width: 2; filter: drop-shadow(0 0 4px rgba(226, 179, 92, 0.9)); }
.hero-ring:hover .hero-portrait, .hero-ring:focus-within .hero-portrait { transform: scale(1.045); box-shadow: inset 0 0 0 1px rgba(226, 179, 92, 0.9), 0 0 28px rgba(140, 200, 230, 0.45); }
.hero-ring:hover .ring-medal, .hero-ring:focus-within .ring-medal { transform: translateX(-50%) translateY(-5px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 18px rgba(226, 179, 92, 0.55); }
.hero-ring:hover::after, .hero-ring:focus-within::after { opacity: 1; animation-play-state: running; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .banner-backdrop img, .hero-ring .ring-dots, .hero-ring::after { animation: none !important; }
  .hero-slide { transition: none; }
  .hero-ring:hover .hero-portrait, .hero-ring:focus-within .hero-portrait { transform: none; }
  .hero-ring:hover .ring-medal, .hero-ring:focus-within .ring-medal { transform: translateX(-50%); }
}

/* ---- story: a storybook treasure hunt --------------------------------------- */

:root { --parchment: #efe2c4; --parchment-2: #e0cb9d; --ink: #4a3420; --ink-soft: #7a5a38; --seal: #a3342a; }

.story-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(460px, 72vh, 760px); display: flex; align-items: flex-end; }
.story-hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.story-hero-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; animation: drift 26s ease-in-out infinite alternate; }
.story-hero-backdrop::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 70%, rgba(17, 18, 26, 0.72) 0%, rgba(17, 18, 26, 0.35) 45%, rgba(17, 18, 26, 0) 75%),
    linear-gradient(180deg, rgba(17, 18, 26, 0.35) 0%, rgba(17, 18, 26, 0) 30%, rgba(17, 18, 26, 0.35) 70%, var(--bg) 100%),
    linear-gradient(rgba(22, 26, 56, 0.18), rgba(22, 26, 56, 0.18)); }
.story-hero-text { position: relative; padding-top: 96px; padding-bottom: 64px; }
@media (min-width: 861px) { .story-hero-backdrop img { left: auto; right: -34%; width: 134%; object-position: 50% 55%; } }
.story-title { position: relative; display: inline-block; margin-top: 14px; font-family: var(--font-caps); font-weight: 600; font-size: clamp(44px, 7.4vw, 108px); line-height: 1.02; letter-spacing: 0.02em; max-width: 12ch; }
.story-tagline { max-width: 620px; margin: 22px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; color: var(--text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); }
.story-hero .eyebrow { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.story-begin { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(226, 179, 92, 0.6); background: rgba(17, 18, 26, 0.55); color: var(--gold); font-family: var(--font-caps); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(4px); }
.story-begin:hover { text-decoration: none; background: rgba(226, 179, 92, 0.16); color: #ffe3a6; }
.story-begin svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.story-book { padding-bottom: 72px; }
.story-intro { display: flex; align-items: center; gap: 44px; max-width: 1080px; padding-top: 40px; padding-bottom: 12px; }
.story-portrait { position: relative; margin: 0; flex-shrink: 0; width: 230px; }
.story-portrait img { display: block; width: 230px; height: 230px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 0 9px var(--panel), 0 0 0 10px var(--line-2), 0 0 60px rgba(140, 200, 230, 0.28); }
.story-portrait::after { content: ""; position: absolute; right: 6px; top: 8px; width: 22px; height: 22px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 3.6s ease-in-out infinite; }
.story-lede { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.4; color: var(--text); }
.story-lede::first-letter { float: left; font-family: var(--font-caps); font-style: normal; font-size: 3.2em; line-height: 0.82; padding: 6px 12px 0 0; color: var(--gold); }
.story-motto { display: inline-flex; align-items: center; gap: 12px; margin: 20px 0 0; font-family: var(--font-caps); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.story-motto::before, .story-motto::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

/* the map */
.story-map { padding-top: 48px; padding-bottom: 24px; }
.story-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.map-frame { position: relative; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55)); transform: rotate(-0.4deg); }
.treasure-map { display: block; width: 100%; height: auto; }
.map-tall { display: none; }
.map-border { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 10 5 2 5; opacity: 0.55; }
.map-ink { opacity: 0.8; }
.map-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.map-thin { stroke-width: 1.4; }
.map-water { stroke: #56708a; }
.map-fill-hill { fill: #d6bf8e; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.map-snow { fill: #fbf6ea; }
.map-fill-tree { fill: #7d8a5a; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.map-fill-ink { fill: var(--ink); }
.map-fill-paper { fill: var(--parchment); }
.map-compass { opacity: 0.75; }
.map-compass-n { font-family: var(--font-caps); font-size: 16px; fill: var(--ink); text-anchor: middle; }
.map-region { font-family: var(--font-display); font-style: italic; font-size: 24px; fill: var(--ink-soft); text-anchor: middle; }
.map-region-faint { opacity: 0.6; }
.map-trail { fill: none; stroke: #9b3b2a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 13; }
.map-trail-mask { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal-armed .map-trail-mask { stroke-dashoffset: 1; }
.reveal-armed.is-visible .map-trail-mask { stroke-dashoffset: 0; transition: stroke-dashoffset 3.2s cubic-bezier(0.35, 0.5, 0.3, 1) 0.4s; }
.map-stop { cursor: pointer; }
.map-stop-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; transform-box: fill-box; transform-origin: center; transition: transform 0.4s ease; }
.map-stop-dot { fill: var(--parchment); stroke: var(--ink); stroke-width: 2.5; transition: fill 0.3s ease; }
.map-stop-num { font-family: var(--font-caps); font-weight: 600; font-size: 17px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.map-stop-label { font-family: var(--font-caps); font-weight: 600; font-size: 19px; letter-spacing: 0.04em; fill: var(--ink); }
.map-stop:hover .map-stop-dot, .map-stop:focus-visible .map-stop-dot { fill: #f6d58d; }
.map-stop:hover .map-stop-ring, .map-stop:focus-visible .map-stop-ring { transform: scale(1.25) rotate(30deg); }
.map-stop:focus { outline: none; }
.map-stop:focus-visible .map-stop-ring { stroke: #9b3b2a; stroke-width: 3; }
.map-x path { fill: none; stroke: #b3362a; stroke-width: 9; stroke-linecap: round; }
.map-x-ring { fill: none; stroke: #b3362a; stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.7; animation: ring-spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
.map-x-label { fill: #9b3b2a; text-anchor: middle; }

/* chapters */
.tales { max-width: 1240px; }
.tale { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 64px; padding: 72px 0 8px; }
.tale + .tale::before { content: ""; position: absolute; top: 18px; left: 50%; width: 180px; height: 12px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--gold) 0 3px, transparent 4px) center / 12px 12px no-repeat, linear-gradient(90deg, transparent, rgba(226, 179, 92, 0.6) 30%, rgba(226, 179, 92, 0.6) 70%, transparent) center / 100% 1px no-repeat; }
.tale.has-picture { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }
.tale.pic-left .snapshot { order: -1; }
.tale:not(.has-picture) .tale-text { max-width: 800px; }
.tale-num { position: absolute; top: 34px; left: -14px; z-index: -1; font-family: var(--font-caps); font-weight: 600; font-size: 170px; line-height: 1; color: rgba(226, 179, 92, 0.07); pointer-events: none; }
.tale.pic-left .tale-num { left: auto; right: -14px; }
.tale-kicker { font-size: 14px; letter-spacing: 0.06em; color: var(--frost); margin-bottom: 10px; }
.tale-chapter { font-family: var(--font-caps); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.tale h2 { font-size: clamp(34px, 3.6vw, 50px); margin: 0 0 18px; }
.tale p { font-family: var(--font-display); font-size: 21px; line-height: 1.62; color: var(--text-2); margin: 0 0 16px; }
.tales .tale:first-child .tale-text > p:first-of-type::first-letter { float: left; font-family: var(--font-caps); font-size: 78px; line-height: 0.82; padding: 8px 12px 0 0; color: var(--gold); }

.snapshot { position: relative; margin: 0; padding: 12px 12px 0; background: #f4ecd9; border-radius: 4px; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.25); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; }
.snapshot::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(236, 222, 180, 0.72); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.snapshot img { display: block; width: 100%; height: auto; border-radius: 2px; }
.snapshot figcaption { padding: 10px 6px 14px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.3; color: #4a3a28; }
.tilt-a { transform: rotate(1.6deg); }
.tilt-b { transform: rotate(-1.8deg); }
.tilt-c { transform: rotate(0.8deg); }
.snapshot:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 179, 92, 0.5); z-index: 1; }
.snapshot-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 16px; }

/* Pip's note */
.pip-note { position: relative; margin: 26px 0 8px; padding: 30px 36px 26px; max-width: 620px; color: var(--ink); transform: rotate(-1deg);
  background: radial-gradient(ellipse at 30% 20%, #f8eed6 0%, var(--parchment) 45%, var(--parchment-2) 100%);
  clip-path: polygon(0 2%, 6% 0, 18% 1.5%, 31% 0, 47% 1%, 63% 0, 78% 1.8%, 92% 0, 100% 2%, 99% 20%, 100% 42%, 98.8% 63%, 100% 84%, 99% 100%, 84% 98.5%, 67% 100%, 50% 98.4%, 33% 100%, 16% 98.6%, 2% 100%, 0 82%, 1.2% 60%, 0 38%, 1% 18%);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); }
.pip-note-title { font-family: var(--font-caps); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.tale .pip-note p { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; }
.tale .pip-note .pip-note-signed { text-align: right; font-size: 20px; color: var(--ink-soft); margin: 6px 64px 0 0; }
.wax-seal { position: absolute; right: 26px; bottom: 16px; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-caps); font-weight: 600; font-size: 17px; color: rgba(255, 220, 200, 0.85); transform: rotate(-12deg);
  background: radial-gradient(circle at 35% 30%, #d4574a 0%, var(--seal) 45%, #6e1d16 100%); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 0 7px rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.35); }

/* the riddle in invisible ink */
.riddle { position: relative; margin: 24px 0 8px; padding: 26px 30px; max-width: 620px; border-radius: 10px; cursor: help; outline: none;
  background: linear-gradient(135deg, #1c2233 0%, #161a28 100%); border: 1px solid rgba(140, 200, 230, 0.28); box-shadow: inset 0 0 40px rgba(140, 200, 230, 0.06); }
.riddle-hint { display: block; margin-bottom: 10px; font-family: var(--font-caps); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--frost); transition: opacity 0.6s ease; }
.tale .riddle-ink { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.55; color: rgba(140, 200, 230, 0.1); text-shadow: 0 0 1px rgba(140, 200, 230, 0.12); transition: color 1.2s ease, text-shadow 1.2s ease; }
.riddle:hover .riddle-ink, .riddle:focus .riddle-ink, .riddle:focus-within .riddle-ink { color: #e4f5ff; text-shadow: 0 0 12px rgba(140, 200, 230, 0.85), 0 0 28px rgba(140, 200, 230, 0.45); }
.riddle:hover .riddle-hint, .riddle:focus .riddle-hint { opacity: 0.35; }
.riddle:focus-visible { border-color: var(--frost); }
@media (hover: none) { .tale .riddle-ink { color: rgba(140, 200, 230, 0.38); } }

/* the pack */
.tale-pack h2 { margin-bottom: 8px; }
.pack { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pack-slot { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.pack-slot:hover { transform: translateY(-4px); border-color: rgba(226, 179, 92, 0.7); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(226, 179, 92, 0.18); }
.pack-art { flex-shrink: 0; width: 58px; height: 58px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #2c3148, #171a26); border: 1px solid rgba(226, 179, 92, 0.55); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); }
.pack-icon { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pack-icon .pk-accent { stroke: var(--gold); }
.pack-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pack-text b { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--text); }
.pack-text span { font-size: 14px; color: var(--muted); }

/* the finale */
.story-finale { padding-top: 88px; }
.finale-card { position: relative; overflow: hidden; max-width: 960px; margin: 0 auto; padding: 56px 48px 52px; text-align: center; border-radius: 18px; border: 1px solid rgba(226, 179, 92, 0.45);
  background: radial-gradient(ellipse at 50% 0%, rgba(226, 179, 92, 0.16), rgba(226, 179, 92, 0) 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.finale-x { width: 96px; height: 96px; }
.finale-x path { fill: none; stroke: #c9433a; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(201, 67, 58, 0.55)); }
.finale-x-ring { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 7; transform-box: fill-box; transform-origin: center; animation: ring-spin 22s linear infinite; }
.finale-card h2 { margin-top: 18px; font-family: var(--font-caps); font-size: clamp(32px, 4vw, 52px); letter-spacing: 0.03em; color: var(--gold); }
.finale-text { max-width: 640px; margin: 16px auto 0; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--text); }
.finale-actions { justify-content: center; margin-top: 30px; }

@media (max-width: 1200px) { .pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .story-hero { min-height: 480px; }
  .story-hero-text { padding-top: 72px; padding-bottom: 40px; }
  .story-hero-backdrop img { object-position: 38% 50%; }
  .story-hero-backdrop::after { background: linear-gradient(180deg, rgba(17, 18, 26, 0.3) 0%, rgba(17, 18, 26, 0.2) 35%, rgba(17, 18, 26, 0.72) 75%, var(--bg) 100%); }
  .story-intro { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 28px; }
  .story-portrait, .story-portrait img { width: 150px; height: 150px; }
  .story-motto { font-size: 12px; letter-spacing: 0.12em; }
  .map-wide { display: none; }
  .map-tall { display: block; max-width: 420px; margin: 0 auto; }
  .map-frame { transform: none; }
  .tale, .tale.has-picture { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 60px; }
  .tale.pic-left .snapshot { order: 0; }
  .tale-num { font-size: 120px; left: auto; right: -6px; top: 30px; }
  .tale p { font-size: 19px; }
  .snapshot { padding: 8px 8px 0; }
  .snapshot figcaption { font-size: 17px; }
  .snapshot-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pip-note { padding: 24px 22px 22px; }
  .tale .pip-note p { font-size: 20px; }
  .tale .pip-note .pip-note-signed { margin-right: 58px; font-size: 18px; }
  .wax-seal { width: 48px; height: 48px; font-size: 14px; right: 16px; bottom: 12px; }
  .riddle { padding: 20px; }
  .tale .riddle-ink { font-size: 20px; }
  .pack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .finale-card { padding: 40px 22px 36px; }
  .finale-text { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero-backdrop img, .story-begin svg, .story-portrait::after, .map-x-ring, .finale-x-ring { animation: none !important; }
  .snapshot, .pack-slot, .map-stop-ring, .riddle-ink { transition: none; }
  .snapshot:hover, .pack-slot:hover { transform: none; }
  .reveal-armed .map-trail-mask { stroke-dashoffset: 0; }
}

/* ---- atlas: the explorer's world map and notebook ----------------------------- */

/* ink colours for symbols on parchment (brighter versions on dark buttons) */
.sym path, .sym circle { stroke: #f1e5c6; stroke-width: 1.2; paint-order: stroke; stroke-linejoin: round; }
.sym .sym-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sym .sym-thick { stroke-width: 2.4; }
.sym .sym-hole { fill: #f1e5c6; stroke: none; }
.sym .sym-cut { fill: none; stroke: #f1e5c6; stroke-width: 1.3; stroke-linecap: round; }
.ink-frost { color: #2f6f93; fill: #2f6f93; }
.ink-gold { color: #a8741d; fill: #a8741d; }
.ink-sage { color: #4f7d43; fill: #4f7d43; }
.ink-ember { color: #b23f2a; fill: #b23f2a; }
.ink-muted { color: #6a5d4a; fill: #6a5d4a; }
.sym-icon { display: inline-block; flex-shrink: 0; overflow: visible; }
.layer .sym path, .layer .sym circle, .zone-tally .sym path, .zone-tally .sym circle { stroke: var(--panel); }
.layer .sym .sym-hole, .zone-tally .sym .sym-hole { fill: var(--panel); }
.layer .sym .sym-cut, .zone-tally .sym .sym-cut { stroke: var(--panel); }
.layer .ink-frost, .zone-tally .ink-frost { color: var(--frost); fill: var(--frost); }
.layer .ink-gold, .zone-tally .ink-gold { color: var(--gold); fill: var(--gold); }
.layer .ink-sage, .zone-tally .ink-sage { color: var(--sage); fill: var(--sage); }
.layer .ink-ember, .zone-tally .ink-ember { color: var(--ember); fill: var(--ember); }
.layer .ink-muted, .zone-tally .ink-muted { color: var(--text-2); fill: var(--text-2); }

/* the world map */
.world { margin: 12px 0 28px; }
.world-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.world-head h2, .notebook-head h2 { font-family: var(--font-caps); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.03em; color: var(--gold); }
.world-count { margin: 0; font-size: 15px; color: var(--muted); }
.world-count b { font-family: var(--font-display); font-size: 26px; color: var(--text); }
.world-frame { filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55)); }
.world-map { display: block; width: 100%; height: auto; }
.world-part + .world-part { margin-top: 22px; }
.world-part h3 { margin: 0 0 8px; font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.world-focus { display: none; }
.wm-coast { fill: none; stroke: #8fb1c0; stroke-width: 14; stroke-linejoin: round; opacity: 0.35; }
.wm-land { fill: #d8c18b; }
.wm-island { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.wm-shore { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.wm-fog { opacity: 0.72; }
.wm-seas .map-line { opacity: 0.7; }
.wm-sea { font-family: var(--font-display); font-style: italic; font-size: 24px; fill: #56708a; letter-spacing: 0.06em; }
.wm-region { font-family: var(--font-caps); font-size: 17px; letter-spacing: 0.22em; fill: var(--ink-soft); opacity: 0.8; }
.wm-unknown circle { fill: none; stroke: #6d6252; stroke-width: 1.3; opacity: 0.55; }
.wm-unknown { cursor: help; }
.wm-trail { fill: none; stroke: #9b3b2a; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1 11; }
.wm-zone { cursor: pointer; }
.wm-zone:focus { outline: none; }
.wm-hit { fill: transparent; }
.wm-dot { fill: var(--parchment); stroke: var(--ink); stroke-width: 2.4; transition: fill 0.3s ease; }
.wm-num { font-family: var(--font-caps); font-weight: 600; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.wm-label { font-family: var(--font-caps); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: rgba(243, 230, 200, 0.85); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.wm-note { font-family: var(--font-display); font-style: italic; fill: var(--ink-soft); }
.wm-zone:hover .wm-dot, .wm-zone:focus-visible .wm-dot { fill: #f6d58d; }
.wm-zone:focus-visible .wm-dot { stroke: #9b3b2a; stroke-width: 3.5; }
.wm-zone.is-here .wm-dot { fill: #f6d58d; stroke: #9b3b2a; }
.wm-pin { fill: #b3362a; stroke: #5e1a12; stroke-width: 1.6; }
.wm-face-ring { fill: none; stroke: #f6e3b4; stroke-width: 2; }
.wm-here-label { font-family: var(--font-caps); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; fill: #9b3b2a; paint-order: stroke; stroke: rgba(243, 230, 200, 0.9); stroke-width: 4px; }
.wm-pulse { fill: none; stroke: #b3362a; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.4s ease-out infinite; }
@keyframes pin-pulse { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }
.wm-hearth-house { fill: #7a4e2c; stroke: var(--ink); stroke-width: 1.4; }
.wm-hearth-flame { fill: #f2a33a; stroke: none; }
.world-key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--text-2); }
.world-key li { display: inline-flex; align-items: center; gap: 8px; }
.key-num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--parchment); border: 2px solid var(--ink); color: var(--ink); font: 600 11px var(--font-caps); }
.key-trail { width: 28px; height: 3px; background: radial-gradient(circle, #d0563f 0 1.5px, transparent 2px) 0 0 / 7px 3px repeat-x; }
.key-pin { width: 12px; height: 16px; background: #b3362a; clip-path: path("M6 16 C1.5 10 0 7.5 0 5.5 A6 6 0 0 1 12 5.5 C12 7.5 10.5 10 6 16 Z"); }
.key-hearth { width: 14px; height: 14px; background: linear-gradient(#f2a33a, #f2a33a) 50% 80% / 5px 6px no-repeat, #7a4e2c; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.key-fog { width: 22px; height: 14px; border-radius: 4px; background: repeating-linear-gradient(35deg, #b9ab8c 0 5px, #8d8069 5px 6.5px); }

/* the route ribbon */
.route { margin: 0 0 36px; }
.route ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.route li { display: flex; align-items: center; }
.route li + li::before { content: ""; width: 26px; height: 3px; margin: 0 4px; background: radial-gradient(circle, var(--ember) 0 1.4px, transparent 1.8px) 0 0 / 7px 3px repeat-x; opacity: 0.85; }
.route a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 14px; transition: border-color 0.25s ease, background 0.25s ease; }
.route a:hover { text-decoration: none; border-color: var(--gold); background: var(--panel-2); }
.route-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--parchment); color: var(--ink); font: 600 12px var(--font-caps); }
.route-lv { font-size: 12px; color: var(--muted); }
.route .is-here a { border-color: #c9433a; box-shadow: 0 0 0 3px rgba(201, 67, 58, 0.18); }
.route .is-here .route-num { background: #c9433a; color: #fff3e0; }

/* the notebook */
.notebook-head { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin: 8px 0 22px; }
.notebook-head .layer-bar { margin: 0; }
.layer { gap: 7px; }
.zone-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 28px; }
.zone-page { position: relative; padding: 26px 26px 24px; border-radius: 16px; background: linear-gradient(165deg, #232638 0%, #1a1c28 60%, #181a25 100%); border: 1px solid var(--line-2); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); }
.zone-page::before { content: ""; position: absolute; inset: 7px; border-radius: 11px; border: 1px dashed rgba(226, 179, 92, 0.22); pointer-events: none; }
.zone-page.is-here { margin-bottom: 28px; border-color: rgba(201, 67, 58, 0.6); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 67, 58, 0.25), 0 0 40px rgba(201, 67, 58, 0.12); }
.zone-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.zone-title { min-width: 0; flex: 1; }
.zone-page h2 { font-size: 30px; }
.zone-page.is-here h2 { font-size: clamp(32px, 3.4vw, 46px); }
.zone-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.zone-seal { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-caps); font-weight: 600; font-size: 19px; color: #ffe2d2; transform: rotate(-8deg);
  background: radial-gradient(circle at 35% 30%, #d4574a 0%, var(--seal) 45%, #6e1d16 100%); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.14), inset 0 0 0 6px rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.4); }
.zone-seal small { font-size: 9px; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: 2px; }
.here-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(201, 67, 58, 0.16); border: 1px solid rgba(201, 67, 58, 0.55); color: #ffb8a8; font-family: var(--font-caps); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.here-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0594a; box-shadow: 0 0 0 0 rgba(224, 89, 74, 0.7); animation: here-ping 2s ease-out infinite; }
@keyframes here-ping { 0% { box-shadow: 0 0 0 0 rgba(224, 89, 74, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(224, 89, 74, 0); } }
.zone-page .zone-body { display: flex; flex-direction: column; gap: 18px; }
.zone-page.is-here .zone-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }
.zone-map { position: relative; }
.zone-page .sketch-wrap { transform: rotate(-0.6deg); }
.zone-grid .zone-page:nth-child(even) .sketch-wrap { transform: rotate(0.7deg); }
.zone-page .sketch { background: var(--parchment); border-radius: 3px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(120, 90, 50, 0.28); }
.zone-page .sketch .sk-bg { fill: var(--parchment); }
.zone-page .sketch .sk-grid { stroke: rgba(122, 90, 56, 0.16); }
.zone-page .sketch .sk-area { fill: #7a5a38; stroke: #7a5a38; opacity: 0.12; }
.zone-page .sketch .sk-label { fill: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 600; paint-order: stroke; stroke: rgba(239, 226, 196, 0.9); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.zone-page .sketch .sk-many { stroke: #f1e5c6; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.zone-page .sketch .sk-count { fill: #fff6e2; }
.zone-page .sketch .sk-point.active .sym, .zone-page .sketch .sk-point:focus-visible .sym, .zone-page .sketch .sk-point.active .sk-many, .zone-page .sketch .sk-point:focus-visible .sk-many { filter: drop-shadow(0 0 3px rgba(155, 59, 42, 0.9)); }
.zone-page .sketch .sk-point:focus-visible .sk-hit { stroke: #9b3b2a; }
.zone-page .sketch-caption { margin-top: 10px; color: var(--muted); }
.zone-page .sketch-empty { background: var(--parchment); color: var(--ink-soft); }
.sketch-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.zone-page .sketch-foot .sketch-caption { margin: 0; }
.zone-stamp { flex-shrink: 0; padding: 4px 10px; border: 2px solid rgba(155, 59, 42, 0.75); border-radius: 4px; color: rgba(155, 59, 42, 0.85); font-family: var(--font-caps); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-3deg); pointer-events: none; color: #e07a66; border-color: rgba(224, 122, 102, 0.7); }
.zone-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zone-last { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--text); }
.zone-last b { font-style: normal; color: #ffb8a8; font-weight: 600; }
.zone-tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; }
.zone-page.is-here .zone-tally { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; row-gap: 14px; }
.zone-tally li { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; }
.zone-tally b { font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; }
.zone-tally span { grid-column: 1 / -1; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.signposts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.signposts li { position: relative; padding: 5px 20px 5px 12px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fbeccb; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #8a5a32 0%, #6e4424 100%); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.signposts li:nth-child(even) { transform: rotate(-1.2deg); }
.signposts li:nth-child(odd) { transform: rotate(0.8deg); }

@media (max-width: 860px) {
  .world-wide { display: none; }
  .world-focus { display: block; }
  .world-key { font-size: 13px; gap: 8px 16px; }
  .route ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .route li { flex-shrink: 0; }
  .zone-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .zone-page { padding: 20px 16px 18px; }
  .zone-page.is-here .zone-body { display: flex; }
  .zone-head { flex-wrap: wrap; gap: 12px; }
  .zone-title { flex-basis: calc(100% - 64px); }
  .here-badge { margin-left: 58px; }
  .zone-seal { width: 46px; height: 46px; font-size: 16px; }
  .zone-page h2, .zone-page.is-here h2 { font-size: 26px; }
  .zone-tally b { font-size: 22px; }
  .zone-page.is-here .zone-tally { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-pulse, .here-dot { animation: none !important; }
}

/* ---- achievements: the trophy wall -------------------------------------------- */

:root { --t-bronze: #e2ad85; --t-silver: #e3e7ee; --t-gold: #e2b35c; --t-legendary: #ffae5e; }
.trophy-shelf { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 24px 40px; margin: 8px auto 30px; }
.shelf-count { position: relative; width: 128px; height: 128px; }
.ach-ring { width: 128px; height: 128px; display: block; }
.ach-ring .ring-back { fill: none; stroke: var(--line-2); stroke-width: 10; }
.ach-ring .ring-front { fill: none; stroke: url(#none); stroke: var(--gold); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(226, 179, 92, 0.6)); }
.shelf-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.shelf-num b { font-family: var(--font-display); font-size: 48px; color: var(--gold); }
.shelf-num span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.shelf-tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.shelf-tier { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.shelf-tier .ach-badge { grid-row: 1 / 3; filter: grayscale(1) brightness(0.45); transition: transform 0.4s ease; }
.shelf-tier.has .ach-badge { filter: drop-shadow(0 0 10px rgba(226, 179, 92, 0.35)); }
.shelf-tier:hover .ach-badge { transform: rotate(-8deg) scale(1.08); }
.shelf-tier b { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--text); }
.shelf-tier small { font-size: 13px; color: var(--muted); margin-left: 3px; }
.shelf-tier em { font-style: normal; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.shelf-tier.has.tier-bronze em { color: var(--t-bronze); }
.shelf-tier.has.tier-silver em { color: var(--t-silver); }
.shelf-tier.has.tier-gold em { color: var(--t-gold); }
.shelf-tier.has.tier-legendary em { color: var(--t-legendary); }
.shelf-cards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.shelf-card { display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 330px; padding: 10px 16px 10px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); }
.shelf-card:hover { text-decoration: none; border-color: var(--gold); }
.shelf-card > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.shelf-card b { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.1; }
.shelf-card.is-latest { border-color: rgba(226, 179, 92, 0.5); background: linear-gradient(100deg, rgba(226, 179, 92, 0.12), transparent 70%), var(--panel); }
.shelf-card.is-next .ach-badge { filter: grayscale(1) brightness(0.55); }
.shelf-art { display: flex; flex-shrink: 0; }

.trophy-wall { display: flex; flex-direction: column; gap: 10px; }
.ach-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 12px 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(90deg, var(--panel) 0%, rgba(26, 28, 40, 0.55) 100%); }
.ach-row.has-earned { border-color: rgba(226, 179, 92, 0.28); }
.ach-row-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-emblem { display: flex; flex-shrink: 0; }
.ach-row:not(.has-earned) .row-emblem .ach-badge { filter: grayscale(1) brightness(0.5); }
.row-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-name h2 { font-family: var(--font-caps); font-size: 17px; letter-spacing: 0.06em; }
.row-count { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.row-pips { display: inline-flex; gap: 3px; }
.pip { width: 14px; height: 4px; border-radius: 2px; background: var(--line-2); }
.pip.on.tier-bronze { background: var(--t-bronze); }
.pip.on.tier-silver { background: var(--t-silver); }
.pip.on.tier-gold { background: var(--t-gold); }
.pip.on.tier-legendary { background: var(--t-legendary); box-shadow: 0 0 6px var(--t-legendary); }
.ach-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ach-tile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(17, 18, 26, 0.55); cursor: help; outline: none; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; }
.ach-tile:hover, .ach-tile:focus-visible { transform: translateY(-2px); border-color: var(--line-2); background: var(--panel-2); z-index: 5; }
.ach-tile:focus-visible { border-color: var(--frost); }
.tile-art { display: flex; flex-shrink: 0; }
.tile-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; }
.tile-tier { font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tile-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.12; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-status { font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.tile-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--frost-dim), var(--frost)); }
.ach-tile.is-locked .ach-badge, .ach-tile.is-launch .ach-badge, .ach-tile.is-missed .ach-badge { filter: grayscale(1) brightness(0.42) contrast(1.1); }
.ach-tile.is-launch { border-style: dashed; }
.ach-tile.is-launch .tile-title, .ach-tile.is-missed .tile-title { color: var(--text-2); }
.ach-tile.is-earned { overflow: hidden; }
.ach-tile.is-earned .ach-badge { filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.35)); }
.ach-tile.is-earned::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 248, 225, 0.16) 45%, transparent 60%); transform: translateX(-110%); pointer-events: none; }
.ach-tile.is-earned:hover::after { transform: translateX(110%); transition: transform 0.9s ease; }
.ach-tile.is-earned.tier-bronze { border-color: rgba(226, 173, 133, 0.6); background: linear-gradient(100deg, rgba(226, 173, 133, 0.16), rgba(17, 18, 26, 0.5) 70%); }
.ach-tile.is-earned.tier-silver { border-color: rgba(227, 231, 238, 0.55); background: linear-gradient(100deg, rgba(227, 231, 238, 0.14), rgba(17, 18, 26, 0.5) 70%); }
.ach-tile.is-earned.tier-gold { border-color: rgba(226, 179, 92, 0.7); background: linear-gradient(100deg, rgba(226, 179, 92, 0.18), rgba(17, 18, 26, 0.5) 70%); }
.ach-tile.is-earned.tier-legendary { border-color: rgba(255, 174, 94, 0.8); background: linear-gradient(100deg, rgba(255, 174, 94, 0.2), rgba(60, 30, 80, 0.35) 70%); box-shadow: 0 0 22px rgba(255, 140, 60, 0.18); }
.ach-tile.is-earned .tile-tier { color: var(--text-2); }
.ach-tile.is-earned.tier-bronze .tile-tier { color: var(--t-bronze); }
.ach-tile.is-earned.tier-silver .tile-tier { color: var(--t-silver); }
.ach-tile.is-earned.tier-gold .tile-tier { color: var(--t-gold); }
.ach-tile.is-earned.tier-legendary .tile-tier { color: var(--t-legendary); }
.tile-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 10; width: max(100%, 250px); padding: 10px 12px; border-radius: 10px; background: #0c0d14; border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); font-size: 13px; line-height: 1.45; color: var(--text-2); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.tile-pop b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--text); margin-bottom: 2px; }
.tile-pop em { display: block; margin-top: 4px; font-style: normal; color: var(--muted); font-size: 12px; }
.ach-tile:hover .tile-pop, .ach-tile:focus .tile-pop { opacity: 1; transform: none; }
/* the description stays available to screen readers even when hidden */
.tile-pop { clip-path: none; }

@media (max-width: 1200px) and (min-width: 861px) {
  .ach-ladder .tier-bronze { grid-column: 1; }
  .ach-ladder .tier-silver { grid-column: 2; }
  .ach-ladder .tier-gold { grid-column: 3; }
  .ach-ladder .tier-legendary { grid-column: 4; }
}
@media (max-width: 1200px) {
  .trophy-shelf { grid-template-columns: auto minmax(0, 1fr); }
  .shelf-cards { grid-column: 1 / -1; justify-content: flex-start; }
  .ach-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 860px) {
  .trophy-shelf { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
  .shelf-tiers { flex-wrap: wrap; gap: 14px 18px; }
  .shelf-tier .ach-badge { width: 42px; height: 42px; }
  .shelf-card { min-width: 0; max-width: none; width: 100%; }
  .ach-row { padding: 12px; }
  .ach-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ach-tile { min-height: 58px; gap: 6px; padding: 5px 6px 5px 4px; }
  .ach-tile .ach-badge { width: 38px; height: 38px; }
  .tile-title { font-size: 15px; white-space: normal; }
  .tile-status { white-space: normal; }
  .tile-pop { width: calc(200% + 6px); }
  .ach-ladder .ach-tile:nth-child(even) .tile-pop { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ach-tile, .shelf-tier .ach-badge { transition: none; }
  .ach-tile:hover, .ach-tile:focus-visible { transform: none; }
  .ach-tile.is-earned:hover::after { transition: none; }
}
@media (min-width: 1201px) {
  .ach-ladder .tier-bronze { grid-column: 1; }
  .ach-ladder .tier-silver { grid-column: 2; }
  .ach-ladder .tier-gold { grid-column: 3; }
  .ach-ladder .tier-legendary { grid-column: 4; }
  .ach-row { grid-template-columns: 210px minmax(0, 1fr); }
}

/* ---- collections: the treasury ------------------------------------------------ */

.t-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.t-icon .ic-accent { stroke: var(--gold); }
.treasury { display: flex; flex-direction: column; gap: 28px; }
.sheet { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 28px; align-items: center; padding: 26px 28px; border-radius: 18px;
  border: 1px solid rgba(226, 179, 92, 0.45); background: radial-gradient(ellipse at 0% 0%, rgba(140, 200, 230, 0.12), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(226, 179, 92, 0.1), transparent 55%), linear-gradient(160deg, #22253a, #181a26);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.sheet::before { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgba(226, 179, 92, 0.18); pointer-events: none; }
.sheet-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.sheet-portrait { position: relative; flex-shrink: 0; }
.sheet-portrait img { display: block; width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 6px rgba(17, 18, 26, 0.9), 0 0 0 7px rgba(226, 179, 92, 0.35), 0 0 36px rgba(140, 200, 230, 0.35); }
.sheet-level { position: absolute; right: -6px; bottom: -4px; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 2px solid var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--gold); }
.sheet-name { min-width: 0; }
.sheet-name h2 { font-family: var(--font-caps); font-size: clamp(26px, 2.6vw, 36px); letter-spacing: 0.03em; color: var(--gold); }
.sheet-who { margin-top: 2px; color: var(--text-2); }
.sheet-facts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.sheet-facts li { display: flex; align-items: center; gap: 8px; }
.sheet-facts .t-icon { color: var(--frost); }
.sheet-purse { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.glance-tile { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(17, 18, 26, 0.55); border: 1px solid var(--line-2); color: var(--text); transition: border-color 0.25s ease, transform 0.25s ease; }
.glance-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--gold); }
.glance-tile .t-icon { grid-row: 1 / 4; align-self: start; margin-top: 2px; }
.glance-tile.tone-sage .t-icon { color: var(--sage); }
.glance-tile.tone-frost .t-icon { color: var(--frost); }
.glance-tile.tone-gold .t-icon { color: var(--gold); }
.glance-label { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.glance-value { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.glance-sub { font-size: 12.5px; color: var(--muted); }

.treasury-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.vault { min-width: 0; padding: 22px 24px 24px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(165deg, #22253a 0%, #1a1c28 60%); }
.vault-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vault-head .t-icon { color: var(--gold); }
.vault-head h2 { font-family: var(--font-caps); font-size: 22px; letter-spacing: 0.04em; color: var(--text); }
.vault-count { margin-left: auto; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(226, 179, 92, 0.14); color: var(--gold); font-weight: 700; font-size: 13px; }
.vault-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; }
.sub-title { margin: 22px 0 12px; font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }

/* professions */
.prof-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.prof-card { display: flex; gap: 14px; align-items: flex-start; }
.prof-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--sage); background: radial-gradient(circle at 40% 35%, #2c3148, #171a26); border: 1px solid rgba(156, 197, 154, 0.45); }
.prof-main { flex: 1; min-width: 0; }
.prof-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prof-top h3 { font-size: 22px; }
.prof-rank { color: var(--muted); font-size: 14px; }
.prof-rank b { font-family: var(--font-display); font-size: 24px; color: var(--text); }
.skill-bar { position: relative; height: 12px; margin: 8px 0 4px; border-radius: 6px; background: #12141d; border: 1px solid var(--line-2); overflow: hidden; }
.skill-cap { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(156, 197, 154, 0.14) 0 6px, transparent 6px 12px); }
.skill-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4f7d43, var(--sage)); box-shadow: 0 0 10px rgba(156, 197, 154, 0.5); border-radius: 6px 0 0 6px; }
.skill-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.55); }
.skill-mark { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #f6e3b4; box-shadow: 0 0 6px rgba(246, 227, 180, 0.8); }
.skill-ranks { display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5e6070; }
.skill-ranks .on { color: var(--sage); }
.prof-when { margin-top: 4px; }

/* reputation */
.rep-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rep-row { display: flex; gap: 14px; align-items: flex-start; --st: #8a8f9e; }
.rep-row.st-1, .rep-row.st-2 { --st: #d4513f; }
.rep-row.st-3 { --st: #e08a45; }
.rep-row.st-4 { --st: #e6c14a; }
.rep-row.st-5 { --st: #79c35f; }
.rep-row.st-6, .rep-row.st-7 { --st: #3fbfa6; }
.rep-row.st-8 { --st: #5fd7ff; }
.rep-crest { position: relative; flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: var(--st); }
.rep-crest .t-icon { width: 46px; height: 46px; fill: rgba(17, 18, 26, 0.8); stroke-width: 1.4; }
.rep-crest b { position: absolute; top: 12px; font-family: var(--font-caps); font-size: 17px; color: var(--text); }
.rep-main { flex: 1; min-width: 0; }
.rep-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rep-top h3 { font-size: 21px; }
.rep-pill { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--st); color: var(--st); font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.rep-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin: 8px 0 3px; }
.rep-track .seg { height: 8px; border-radius: 2px; background: #1e2130; border: 1px solid var(--line); }
.rep-track .seg.on { background: var(--st); border-color: transparent; opacity: 0.55; }
.rep-track .seg.now { opacity: 1; box-shadow: 0 0 8px var(--st); }
.rep-ends { display: flex; justify-content: space-between; font-size: 10.5px; margin-bottom: 2px; }

/* treasure */
.loot-firsts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.loot-slot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.5); }
.loot-slot.empty { border-style: dashed; opacity: 0.8; }
.loot-slot.empty .loot-frame { filter: grayscale(1); opacity: 0.45; }
.loot-frame { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, #2d3248, #12141d); border: 2px solid var(--q, #5aa7f0); color: var(--q, #5aa7f0); box-shadow: 0 0 18px color-mix(in srgb, var(--q, #5aa7f0) 45%, transparent), inset 0 0 14px rgba(0, 0, 0, 0.6); }
.q-rare-frame { --q: #5aa7f0; }
.q-epic-frame { --q: #c08af5; }
.q-legendary-frame { --q: #ff9b3d; }
.loot-slot.has { border-color: color-mix(in srgb, var(--q2, #5aa7f0) 45%, var(--line-2)); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--q2, #5aa7f0) 14%, transparent), transparent 70%), rgba(17, 18, 26, 0.5); }
.q-rare-slot { --q2: #5aa7f0; }
.q-epic-slot { --q2: #c08af5; }
.q-legendary-slot { --q2: #ff9b3d; }
.loot-label { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.loot-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.loot-slot .item-tip { left: 50%; transform: translateX(-50%); text-align: left; }
.drops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.drop { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--q2, #c08af5) 40%, var(--line-2)); background: rgba(17, 18, 26, 0.5); }
.drop .loot-frame { width: 44px; height: 44px; border-radius: 9px; }
.drop-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

/* mounts and flight paths */
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.5); font-size: 14px; }
.chip-list .t-icon { color: var(--frost); }
.chip-list em { font-style: normal; font-size: 12px; color: var(--muted); }

@media (max-width: 1200px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sheet { padding: 20px 16px; gap: 20px; }
  .sheet-id { gap: 16px; }
  .sheet-portrait img { width: 84px; height: 84px; }
  .sheet-level { min-width: 32px; height: 32px; font-size: 17px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .glance-tile { padding: 10px; column-gap: 8px; }
  .glance-value { font-size: 18px; }
  .treasury-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vault { padding: 18px 14px 18px; }
  .loot-firsts { grid-template-columns: minmax(0, 1fr); }
  .loot-slot { flex-direction: row; text-align: left; padding: 12px; }
  .loot-slot .loot-frame { width: 48px; height: 48px; }
  .loot-slot > .loot-label { display: none; }
  .drops { grid-template-columns: minmax(0, 1fr); }
  .prof-icon, .rep-crest { width: 42px; height: 42px; }
  .rep-crest .t-icon { width: 38px; height: 38px; }
  .rep-crest b { top: 9px; font-size: 14px; }
}

/* ---- bestiary: the hall of trophies ------------------------------------------ */

.bestiary { display: flex; flex-direction: column; }
.hunt-tally { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 48px; margin: 6px 0 30px; }
.tally-big { display: flex; flex-direction: column; line-height: 1; }
.tally-big b { font-family: var(--font-caps); font-size: clamp(56px, 7vw, 92px); font-weight: 600; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3cf 0%, #f3cf82 40%, #d99d3f 70%, #a9722b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(226, 179, 92, 0.3)); }
.tally-big span { margin-top: 6px; font-family: var(--font-caps); font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.tally-small { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.tally-small li { display: flex; flex-direction: column; padding-left: 16px; border-left: 2px solid var(--line-2); }
.tally-small b { font-family: var(--font-display); font-size: 32px; line-height: 1.05; color: var(--text); }
.tally-small span { font-size: 13px; color: var(--muted); }
.tally-small .is-ember { border-left-color: rgba(224, 121, 90, 0.6); }
.tally-small .is-ember b { color: var(--ember); }

.trophy-hall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 26px; padding: 34px 26px 26px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(226, 179, 92, 0.12), transparent 60%), repeating-linear-gradient(90deg, #1d1712 0 46px, #221a13 46px 48px), #1c1611;
  border: 1px solid #3b2d1d; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 20px 44px rgba(0, 0, 0, 0.4); }
.plaque { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plaque-1 { order: 2; }
.plaque-2 { order: 1; }
.plaque-3 { order: 3; }
.plaque-glow { position: absolute; top: -34px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 230, 170, 0.22), transparent 65%); pointer-events: none; }
.plaque-1 .plaque-glow { width: 280px; height: 280px; background: radial-gradient(circle, rgba(255, 220, 140, 0.32), transparent 65%); animation: breathe 5s ease-in-out infinite; }
.trophy-shield { position: relative; width: 104px; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); transition: transform 0.4s ease; }
.plaque-1 .trophy-shield { width: 138px; }
.plaque:hover .trophy-shield { transform: rotate(-4deg) scale(1.04); }
.plaque-board { position: relative; width: 100%; margin-top: -8px; padding: 18px 16px 16px; border-radius: 12px; background: linear-gradient(180deg, #5a3b22 0%, #3f2915 100%); border: 1px solid #7a5530; box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.25), 0 10px 20px rgba(0, 0, 0, 0.45); }
.plaque-1 .plaque-board { padding-top: 22px; padding-bottom: 20px; }
.plaque-place { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #e8cfa4; }
.plaque-1 .plaque-place { color: #ffe3a6; }
.plaque-name { margin-top: 4px; font-size: 26px; color: #fff4dc; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.plaque-1 .plaque-name { font-size: 32px; }
.plaque-kills { color: #e8cfa4; font-size: 14px; }
.plaque-kills b { font-family: var(--font-display); font-size: 34px; color: #fff4dc; }
.plaque-share { height: 5px; margin: 8px auto 8px; max-width: 200px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.plaque-share span { display: block; height: 100%; background: linear-gradient(90deg, #d99d3f, #f6dc98); }
.plaque .small.muted { color: #cdb690; }

.feats { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.feat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 1px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #22253a, #1a1c28); }
.feat .sym-icon { grid-row: 1 / 4; align-self: center; }
.feat .sym path, .feat .sym circle { stroke: #1d2030; }
.feat .sym .sym-hole { fill: #1d2030; }
.feat .sym .sym-cut { stroke: #1d2030; }
.feat .ink-frost { color: var(--frost); fill: var(--frost); }
.feat .ink-gold { color: var(--gold); fill: var(--gold); }
.feat .ink-ember { color: var(--ember); fill: var(--ember); }
.feat-label { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.feat-value { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.feat-sub { font-size: 12.5px; color: var(--muted); }

.ledger-title { margin-bottom: 14px; font-family: var(--font-caps); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.03em; color: var(--gold); }
.bestiary .table-panel { border-radius: 16px; background: linear-gradient(165deg, #202336, #191b27); }
.bestiary .ledger tbody tr { transition: background 0.2s ease; }
.bestiary .ledger tbody tr:hover { background: rgba(226, 179, 92, 0.06); }
.bestiary .ledger tbody tr:nth-child(-n + 3) th { font-family: var(--font-display); font-size: 19px; color: var(--gold); }
.bestiary .ledger tbody tr:nth-child(-n + 10) .inline-bar span { background: linear-gradient(90deg, #d99d3f, #f6dc98); }
.bestiary .inline-bar span { background: linear-gradient(90deg, var(--frost-dim), var(--frost)); }

@media (max-width: 860px) {
  .hunt-tally { gap: 16px; }
  .tally-small { gap: 12px 20px; }
  .tally-small b { font-size: 24px; }
  .trophy-hall { grid-template-columns: minmax(0, 1fr); padding: 26px 14px 16px; gap: 30px; }
  .plaque-1, .plaque-2, .plaque-3 { order: 0; }
  .plaque-1 .trophy-shield { width: 112px; }
  .feats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .plaque-1 .plaque-glow { animation: none; }
  .trophy-shield { transition: none; }
}

/* ---- dungeons and raids: portals and progress ---------------------------------- */

.instances { display: flex; flex-direction: column; gap: 24px; }
.instance-summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.instance-summary li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #22253a, #1a1c28); display: flex; flex-direction: column; }
.instance-summary b { font-family: var(--font-display); font-size: 32px; line-height: 1.05; }
.instance-summary span { font-size: 13px; color: var(--muted); }
.instance-summary .is-ember b, .instance-stats .is-ember b { color: var(--ember); }
.portal { flex-shrink: 0; overflow: visible; --pc: var(--frost); }
.portal-arcane { --pc: #b58cf0; }
.portal-ember { --pc: var(--ember); }
.portal-stone { fill: #262a3b; stroke: #4b5068; stroke-width: 2; }
.portal-glow { fill: var(--pc); opacity: 0.22; filter: blur(0.3px); }
.portal-rim { fill: none; stroke: var(--pc); stroke-width: 2; filter: drop-shadow(0 0 5px var(--pc)); }
.portal-swirl { fill: none; stroke: var(--pc); stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.portal-step { stroke: #4b5068; stroke-width: 3; stroke-linecap: round; }
.portal-star { fill: var(--gold); }
.endgame-banner { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 16px; border: 1px solid rgba(181, 140, 240, 0.45); background: radial-gradient(ellipse at 0% 50%, rgba(181, 140, 240, 0.18), transparent 60%), linear-gradient(160deg, #24203a, #1a1c28); color: var(--text); }
.endgame-banner:hover { text-decoration: none; border-color: #b58cf0; }
.endgame-banner > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.endgame-banner b { font-family: var(--font-caps); font-size: 18px; letter-spacing: 0.04em; color: #d9c2ff; }
.endgame-banner.is-ready { border-color: var(--gold); background: radial-gradient(ellipse at 0% 50%, rgba(226, 179, 92, 0.2), transparent 60%), linear-gradient(160deg, #2a2418, #1a1c28); }
.endgame-banner.is-ready b { color: var(--gold); }
.endgame-go { font-size: 26px; color: #b58cf0; transition: transform 0.25s ease; }
.endgame-banner:hover .endgame-go { transform: translateX(4px); }
.endgame-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); overflow: hidden; max-width: 520px; }
.endgame-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7a5cc9, #b58cf0, var(--gold)); box-shadow: 0 0 10px rgba(181, 140, 240, 0.6); }
.endgame-bar.big { height: 10px; border-radius: 5px; margin: 14px 0 6px; }

.instance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 24px; }
.instance { --ic: var(--frost); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ic) 35%, var(--line-2));
  background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--ic) 16%, transparent), transparent 55%), linear-gradient(165deg, #22253a 0%, #1a1c28 65%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.instance.tone-arcane { --ic: #b58cf0; }
.instance.tone-ember { --ic: var(--ember); }
.instance.is-cleared { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); }
.instance-head { display: flex; align-items: center; gap: 16px; }
.instance-title { flex: 1; min-width: 0; }
.instance-type { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic); }
.instance-type b { color: var(--gold); font-weight: 600; }
.instance h2 { font-size: 30px; line-height: 1.1; margin: 2px 0 4px; }
.boss-progress { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; text-align: right; justify-items: end; }
.boss-progress b { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--gold); }
.boss-progress > span { font-size: 18px; color: var(--muted); }
.boss-progress em { grid-column: 1 / -1; font-style: normal; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.boss-pips { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: 6px; }
.boss-pips i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--line-2); background: #1a1c28; }
.boss-pips i.down { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px rgba(226, 179, 92, 0.7); }
.instance-stats { list-style: none; margin: 0; padding: 12px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.instance-stats li { display: flex; flex-direction: column; }
.instance-stats b { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.instance-stats span { font-size: 12px; color: var(--muted); }
.boss-list-x { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.boss-list-x li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.boss-list-x li:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.boss-mark { grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); }
.is-down .boss-mark { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 38%, transparent 42%); box-shadow: 0 0 8px rgba(226, 179, 92, 0.5); }
.boss-name { font-weight: 600; }
.is-up .boss-name { color: var(--text-2); }
.boss-when { grid-column: 2; color: var(--muted); }
.boss-tags { grid-column: 3; grid-row: 1 / 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.tag-ember { border-color: rgba(224, 121, 90, 0.5); color: var(--ember); }
.tag-farm { border-color: rgba(226, 179, 92, 0.6); color: var(--gold); }
.run-chart { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin: 12px 0 8px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.run-chart span { flex: 1; max-width: 26px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ic) 55%, transparent); }
.run-chart span.is-best { background: var(--gold); box-shadow: 0 0 8px rgba(226, 179, 92, 0.6); }

/* raids */
.raid-board { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(181, 140, 240, 0.35); background: linear-gradient(160deg, #24203a, #1a1c28); }
.raid-line { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr) auto; align-items: center; gap: 16px; color: var(--text); }
.raid-line:hover { text-decoration: none; }
.raid-line:hover .raid-line-name { color: #d9c2ff; }
.raid-line-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.raid-line-bar { position: relative; height: 12px; border-radius: 6px; background: #14151f; border: 1px solid var(--line-2); }
.raid-line-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #7a5cc9, #b58cf0); box-shadow: 0 0 12px rgba(181, 140, 240, 0.5); }
.raid-line-bar i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg); background: #2b2e42; border: 1px solid #555a74; }
.raid-line-bar i.down { background: var(--gold); border-color: #fff0c8; }
.raid-line-count { color: var(--muted); }
.raid-line-count b { font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.raid-loot .drops { margin-top: 10px; }
.sealed-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px 36px; border-radius: 18px; border: 1px solid rgba(181, 140, 240, 0.35);
  background: radial-gradient(ellipse at 18% 50%, rgba(181, 140, 240, 0.2), transparent 55%), linear-gradient(160deg, #24203a, #181a26); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.gate-art { position: relative; display: flex; justify-content: center; }
.gate-art .raid-emblem { filter: drop-shadow(0 0 24px rgba(181, 140, 240, 0.55)); animation: breathe 6s ease-in-out infinite; }
.gate-seal { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%) rotate(-6deg); padding: 4px 14px; border: 2px solid rgba(224, 121, 90, 0.8); border-radius: 4px; font-family: var(--font-caps); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #ffb8a8; background: rgba(17, 18, 26, 0.85); }
.sealed-gate h2 { font-size: clamp(30px, 3vw, 40px); margin: 6px 0 10px; }

@media (max-width: 1200px) { .instance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .instance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .instance-summary b { font-size: 26px; }
  .endgame-banner { padding: 14px; gap: 12px; }
  .endgame-banner .portal { width: 44px; height: 44px; }
  .instance-grid { grid-template-columns: minmax(0, 1fr); }
  .instance { padding: 18px 14px; }
  .instance-head { flex-wrap: wrap; gap: 12px; }
  .instance-head .portal { width: 56px; height: 56px; }
  .boss-progress { width: 100%; grid-template-columns: auto auto 1fr; justify-items: start; text-align: left; }
  .boss-progress em { grid-column: auto; margin-left: 8px; }
  .instance-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .boss-list-x li { grid-template-columns: 22px minmax(0, 1fr); }
  .boss-tags { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 4px; }
  .raid-line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .raid-line-bar { grid-column: 1 / -1; grid-row: 2; }
  .sealed-gate { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 20px; }
  .gate-art .raid-emblem { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) { .gate-art .raid-emblem { animation: none; } .endgame-go { transition: none; } }
.instance-grid:has(> :only-child) { grid-template-columns: minmax(0, 820px); }

/* ---- sessions: the play-time dashboard -------------------------------------------- */

.hud { --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --hud: #6fd3ff; display: flex; flex-direction: column; gap: 20px; }
.hud-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.hud-kpis li { position: relative; padding: 12px 14px; border: 1px solid rgba(111, 211, 255, 0.28); background: linear-gradient(180deg, rgba(111, 211, 255, 0.07), rgba(17, 18, 26, 0.4)); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.hud-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(111, 211, 255, 0.75); }
.hud-v { display: block; margin-top: 4px; font-family: var(--mono); font-size: 22px; font-weight: 600; color: #e6f7ff; text-shadow: 0 0 12px rgba(111, 211, 255, 0.35); white-space: nowrap; }
.hud-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; }
.hud-panel { position: relative; padding: 18px 20px; border-radius: 6px; border: 1px solid rgba(111, 211, 255, 0.22);
  background: linear-gradient(rgba(111, 211, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, rgba(111, 211, 255, 0.04) 1px, transparent 1px) 0 0 / 22px 100%, #141724; }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--hud); border-style: solid; opacity: 0.8; }
.hud-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hud-title { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.hud-title::before { content: "▸ "; opacity: 0.7; }
.hud-note { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hud-note b { color: #e6f7ff; }
.hud-clock { display: flex; flex-direction: column; align-items: center; }
.clock { width: 100%; max-width: 230px; height: auto; }
.clk-ring { fill: none; stroke: rgba(111, 211, 255, 0.25); stroke-width: 1; }
.clk-outer { stroke-dasharray: 2 5; }
.clk-bar { stroke: var(--hud); stroke-width: 6; stroke-linecap: round; opacity: 0.8; }
.clk-bar.is-zero { stroke: rgba(111, 211, 255, 0.18); stroke-width: 3; }
.clk-bar.is-peak { stroke: var(--gold); opacity: 1; filter: drop-shadow(0 0 5px rgba(226, 179, 92, 0.8)); }
.clk-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); text-anchor: middle; }
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 190px; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wk-bar { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; border-radius: 3px; background: rgba(111, 211, 255, 0.06); }
.wk-bar span { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--hud), rgba(111, 211, 255, 0.35)); box-shadow: 0 0 10px rgba(111, 211, 255, 0.25); }
.wk-bar span.is-peak { background: linear-gradient(180deg, var(--gold), rgba(226, 179, 92, 0.35)); }
.wk-day { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.wk-min { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.recent-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 6px; }
.rb { flex: 1; max-width: 22px; min-width: 3px; border-radius: 2px 2px 0 0; background: rgba(111, 211, 255, 0.55); position: relative; }
.rb.has-level { background: linear-gradient(180deg, var(--gold), rgba(226, 179, 92, 0.45)); }
.rb.has-fall::after { content: ""; position: absolute; top: -8px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px var(--ember); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.key-lv { background: var(--gold); }
.key-fall { border-radius: 50%; background: var(--ember); margin-left: 10px; }
.hud .calendar-wrap { gap: 10px; }
.hud .cal-grid .h0 { background: rgba(111, 211, 255, 0.06); }
.hud .cal-grid .h1 { background: rgba(111, 211, 255, 0.25); }
.hud .cal-grid .h2 { background: rgba(111, 211, 255, 0.5); }
.hud .cal-grid .h3 { background: rgba(111, 211, 255, 0.78); }
.hud .cal-grid .h4 { background: #bff0ff; box-shadow: 0 0 6px rgba(111, 211, 255, 0.8); }
.hud .cal-legend .h0 { background: rgba(111, 211, 255, 0.06); }
.hud .cal-legend .h1 { background: rgba(111, 211, 255, 0.25); }
.hud .cal-legend .h2 { background: rgba(111, 211, 255, 0.5); }
.hud .cal-legend .h3 { background: rgba(111, 211, 255, 0.78); }
.hud .cal-legend .h4 { background: #bff0ff; }
.hud .cal-months, .hud .cal-days, .hud .cal-legend { font-family: var(--mono); }
.log-scroll { overflow-x: auto; }
.log { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.log th, .log td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed rgba(111, 211, 255, 0.14); white-space: nowrap; }
.log thead th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(111, 211, 255, 0.75); font-weight: 600; }
.log tbody th { font-weight: 600; color: #e6f7ff; }
.log tbody tr:hover { background: rgba(111, 211, 255, 0.06); }
.log .is-level th { color: var(--gold); }
.lv-up { color: var(--gold); }
.len-bar { display: inline-block; width: 44px; height: 6px; margin-right: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--hud) var(--w), rgba(111, 211, 255, 0.12) var(--w)); vertical-align: 1px; }

@media (max-width: 1200px) {
  .hud-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hud-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hud-wide { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hud-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hud-v { font-size: 19px; }
  .hud-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hud-panel { padding: 16px 12px; }
  .week-bars { height: 150px; gap: 4px; }
  .recent-bars { height: 130px; gap: 2px; }
  .log { font-size: 12px; }
}
.log-scroll { contain: paint; }
.hud-panel::before { top: 0; left: 0; }
.hud-panel::after { bottom: 0; right: 0; }
.trophy-hall { overflow: hidden; }

/* ---- journey: the chronicle ------------------------------------------------- */

/* the level road: one glowing bar from level 1 to the cap */
.rail-wrap .chapter-rail { gap: 0; padding: 16px 18px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1f2233, #171924); }
.rail-wrap .chapter-rail li + li { border-left: 1px solid rgba(0, 0, 0, 0.6); }
.rail-wrap .chapter-rail a { padding: 0 10px; gap: 8px; }
.rail-wrap .rail-bar { height: 12px; border-radius: 0; background: #11131c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.rail-wrap .chapter-rail li:first-child .rail-bar { border-radius: 6px 0 0 6px; }
.rail-wrap .chapter-rail li:last-child .rail-bar { border-radius: 0 6px 6px 0; }
.rail-wrap .rail-bar span { border-radius: 0; background: linear-gradient(180deg, #7ad0f2, #3f8fb3); }
.rail-wrap .rail-current span { background: linear-gradient(90deg, #7ad0f2, #bff0ff); box-shadow: 0 0 12px rgba(140, 200, 230, 0.8); position: relative; }
.rail-wrap .rail-complete span { background: linear-gradient(180deg, #f3cf82, #b8862b); }
.rail-wrap .chapter-rail a[aria-current] .rail-title { color: var(--frost); }

/* chapters as glowing chronicle cards */
.chapters .chapter { position: relative; background: linear-gradient(165deg, #202336 0%, #181a26 70%); border-color: var(--line-2); transition: border-color 0.3s ease; }
.chapters .chapter:hover { border-color: rgba(140, 200, 230, 0.45); }
.chapters .chapter[open] { border-color: rgba(140, 200, 230, 0.5); box-shadow: 0 0 0 1px rgba(140, 200, 230, 0.12), 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 50px rgba(140, 200, 230, 0.08); }
.chapter-roman { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.chapter-summary { gap: 24px; padding: 22px 32px; }
.chapter-summary .chapter-heading { gap: 5px; }
.chapter-chips { display: flex; gap: 14px; flex-shrink: 0; color: var(--text-2); font-size: 14px; }
.chapter-chips > span { display: inline-flex; align-items: center; gap: 5px; }
.chapter-chips .sym path, .chapter-chips .sym circle { stroke: #1d2030; }
.chapter-chips .sym .sym-hole { fill: #1d2030; }
.chapter-chips .sym .sym-cut { stroke: #1d2030; }
.chapter-chips .ink-frost, .chapter-highlights .ink-frost { color: var(--frost); fill: var(--frost); }
.chapter-chips .ink-sage, .chapter-highlights .ink-sage { color: var(--sage); fill: var(--sage); }
.chapter-chips .ink-ember, .chapter-highlights .ink-ember { color: var(--ember); fill: var(--ember); }
.chapter-highlights .ink-gold { color: var(--gold); fill: var(--gold); }
.chapter[open] .chapter-chips { display: none; }
.xp-bar { position: relative; display: block; height: 8px; max-width: 520px; margin-top: 6px; border-radius: 4px; background: #11131c; border: 1px solid #2e3247; overflow: hidden; }
.xp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #f3cf82, #b8862b); }
.xp-bar.is-current .xp-fill { background: linear-gradient(90deg, #5aa7d0, #bff0ff); box-shadow: 0 0 10px rgba(140, 200, 230, 0.8); }
.xp-bar.is-current .xp-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: xp-shine 2.8s ease-in-out infinite; }
@keyframes xp-shine { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.xp-bar i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.55); }
.chapter[open] .xp-bar { height: 12px; border-radius: 6px; }
.chapter-body { padding: 0 32px 28px; }
.chapter-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chapter-highlights li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.5); }
.chapter-highlights .sym-icon { grid-row: 1 / 4; align-self: start; margin-top: 3px; }
.chapter-highlights .sym path, .chapter-highlights .sym circle { stroke: #181a26; }
.chapter-highlights .sym .sym-hole { fill: #181a26; }
.chapter-highlights .sym .sym-cut { stroke: #181a26; }
.hl-label { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hl-value { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.hl-sub { font-size: 12.5px; color: var(--muted); }
.chapter-highlights .is-ember .hl-value { color: var(--ember); }

/* the timeline, day by day */
.chapters .t-rail::before { width: 2px; margin-left: -1px; background: rgba(140, 200, 230, 0.34); }
/* one even line through the whole day; it only fades out after the last moment */
.chapters .t-item:last-child .t-rail::before { background: linear-gradient(180deg, rgba(140, 200, 230, 0.34), rgba(140, 200, 230, 0)); }
.t-day { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px 72px; padding: 5px 12px; border-radius: 8px; background: linear-gradient(90deg, rgba(140, 200, 230, 0.1), transparent 70%); border-left: 2px solid var(--frost); }
.t-day:first-child { margin-top: 0; }
.t-day-num { font-family: var(--font-caps); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; color: var(--frost); }
.t-day-date { font-size: 13px; color: var(--muted); }
.t-day-recap { margin-left: auto; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.t-quiet .t-title-quiet { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; color: var(--text-2); }
.diamond-small { transform: scale(0.7) rotate(45deg); opacity: 0.7; }
.chapters .t-item .t-body { transition: transform 0.2s ease; }
.chapters .t-item:hover .t-body { transform: translateX(3px); }
.chapters .t-item:not(.t-minor) .t-badge .ach-badge, .chapters .t-item .t-badge svg { filter: drop-shadow(0 0 6px rgba(226, 179, 92, 0.35)); }

@media (max-width: 1200px) { .chapter-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .rail-wrap .chapter-rail { padding: 12px; }
  .rail-wrap .chapter-rail li + li { border-left: 0; }
  .rail-wrap .rail-bar, .rail-wrap .chapter-rail li:first-child .rail-bar, .rail-wrap .chapter-rail li:last-child .rail-bar { border-radius: 6px; }
  .chapter-summary { padding: 18px 16px; gap: 14px; flex-wrap: wrap; }
  .chapter-chips { width: 100%; order: 3; gap: 12px; font-size: 13px; }
  .chapter-body { padding: 0 14px 20px; }
  .chapter-highlights { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .t-day { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-bar.is-current .xp-fill::after { animation: none; display: none; }
  .chapters .t-item:hover .t-body { transform: none; }
}

/* ---- Alts: the rest of the family (25 Sep 2026) --------------------------------- */
.alt-card { --cls: var(--gold); }
.cls-warrior { --cls: #c9a27a; } .cls-paladin { --cls: #e6a6c4; } .cls-hunter { --cls: #9cc59a; }
.cls-rogue { --cls: #e8d36a; } .cls-priest { --cls: #eee6d3; } .cls-shaman { --cls: #6fa8e0; }
.cls-mage { --cls: #8cc8e6; } .cls-warlock { --cls: #a98bd8; } .cls-druid { --cls: #e0955a; } .cls-death-knight { --cls: #b0d4e8; }

.family, .alts, .workshop { margin-top: 44px; }
.family-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.family-head h2 { font-family: var(--font-caps); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: 0.02em; }
.family-head p { margin: 0; max-width: 680px; }
.family-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; align-items: stretch; }
.family-main { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 16px; color: var(--text);
  border: 1px solid rgba(226, 179, 92, 0.5); background: radial-gradient(ellipse at 0% 50%, rgba(226, 179, 92, 0.16), transparent 60%), linear-gradient(160deg, #23263a, #181a26);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.family-main:hover, .family-main:focus-visible { text-decoration: none; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(226, 179, 92, 0.18); }
.fm-medal img { display: block; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(17, 18, 26, 0.9), 0 0 22px rgba(140, 200, 230, 0.3); }
.fm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-tag { font-family: var(--font-caps); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.fm-name { font-family: var(--font-caps); font-size: 24px; line-height: 1.15; }
.fm-who { color: var(--text-2); }
.fm-go { margin-left: auto; font-size: 22px; color: var(--gold); }
.family-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.family-tally div { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; background: var(--panel); min-width: 0; }
.family-tally dt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.family-tally dt .t-icon { color: var(--frost); }
.family-tally dd { margin: 0; font-family: var(--font-caps); font-size: 26px; color: var(--gold); line-height: 1.1; overflow-wrap: anywhere; }
.family-tally dd .coins { font-size: 22px; }

.alt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.alt-grid.single { grid-template-columns: minmax(0, 720px); }
.alt-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px 26px 20px; border-radius: 18px; min-width: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cls) 45%, transparent);
  background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--cls) 22%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 14px), linear-gradient(170deg, #212436, #16181f);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.alt-card::before { content: ""; position: absolute; inset: 7px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--cls) 16%, transparent); pointer-events: none; }
.alt-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 34px color-mix(in srgb, var(--cls) 18%, transparent); }
.alt-top { display: flex; align-items: center; gap: 20px; min-width: 0; }
.alt-medal { position: relative; flex-shrink: 0; width: 116px; height: 116px; color: var(--cls); }
.am-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-outer { fill: #12141d; stroke: color-mix(in srgb, var(--cls) 35%, transparent); stroke-width: 1; }
.am-track { fill: none; stroke: #2a2d40; stroke-width: 6; }
.am-fill { fill: none; stroke: var(--cls); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cls) 60%, transparent)); }
.am-tick { stroke: rgba(238, 230, 211, 0.35); stroke-width: 1.2; }
.am-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.am-icon .t-icon { stroke-width: 1.5; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cls) 45%, transparent)); }
.am-level { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 38px; height: 26px; padding: 0 8px; display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: #12141d; border: 1.5px solid var(--cls); font-family: var(--font-caps); font-size: 15px; color: var(--text); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.alt-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alt-name { font-family: var(--font-caps); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: 0.02em; color: var(--text); overflow-wrap: anywhere; margin: 0; }
.alt-who { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--cls); }
.alt-realm { margin: 0; }
.alt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.alt-stats div { padding: 10px 12px; border-radius: 10px; background: rgba(17, 18, 26, 0.55); border: 1px solid var(--line); min-width: 0; }
.alt-stats dt { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.alt-stats dt .t-icon { color: var(--cls); }
.alt-stats dd { margin: 4px 0 0; font-family: var(--font-caps); font-size: 19px; color: var(--text); overflow-wrap: anywhere; }
.alt-stats dd .coins { font-family: var(--font-body); font-size: 15px; }
.alt-label { margin: 0 0 8px; font-family: var(--font-caps); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.alt-profs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alt-profs li { display: grid; grid-template-columns: 28px minmax(84px, 0.9fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; }
.ap-icon { display: flex; color: var(--sage); }
.ap-name { font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-bar { position: relative; height: 9px; border-radius: 5px; background: #12141d; border: 1px solid var(--line-2); overflow: hidden; }
.ap-rank { font-size: 14px; white-space: nowrap; text-align: right; }
.ap-rank b { color: var(--text); font-weight: 600; }
.alt-empty { margin: 0; }
.alt-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed var(--line-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.alt-facts li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); align-items: baseline; gap: 8px; font-size: 14px; min-width: 0; }
.af-icon { display: flex; align-self: center; color: var(--frost); }
.af-label { color: var(--muted); white-space: nowrap; }
.af-value { color: var(--text); overflow-wrap: anywhere; }
.alt-seen { margin: auto 0 0; padding-top: 12px; color: var(--muted); }
.alt-seen b { color: var(--text-2); font-weight: 600; }
.alt-none { flex-direction: row; align-items: center; gap: 18px; }
.alt-none p { margin: 0; }
.alt-none-icon { color: var(--frost); display: flex; }

.workshop-top { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 22px; }
.craft-wheel { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.craft-wheel > svg { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
.cw-ring { fill: none; stroke: rgba(238, 230, 211, 0.08); stroke-dasharray: 2 4; }
.cw-ring-max { stroke: rgba(226, 179, 92, 0.25); stroke-dasharray: none; }
.cw-track { fill: rgba(26, 28, 40, 0.75); stroke: var(--line); stroke-width: 1; }
.cw-slice { --k: var(--gold); }
.cw-slice.k-gather, .lg.k-gather, .sl-node.k-gather, .bench.k-gather { --k: var(--sage); }
.cw-slice.k-craft, .lg.k-craft, .sl-node.k-craft, .bench.k-craft { --k: var(--gold); }
.cw-slice.k-second, .lg.k-second, .sl-node.k-second, .bench.k-second { --k: var(--frost); }
.cw-fill { fill: color-mix(in srgb, var(--k) 70%, transparent); stroke: var(--k); stroke-width: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--k) 45%, transparent)); transition: fill 0.2s ease; }
.cw-slice:hover .cw-fill { fill: var(--k); }
.cw-slice:hover .cw-track { stroke: color-mix(in srgb, var(--k) 60%, transparent); }
.cw-icon { color: var(--muted); opacity: 0.45; }
.cw-slice.lit .cw-icon { color: var(--k); opacity: 1; }
.cw-hub { fill: #12141d; stroke: rgba(226, 179, 92, 0.5); stroke-width: 1.5; }
.cw-count { font-family: var(--font-caps); font-size: 40px; fill: var(--gold); }
.cw-of { font-size: 18px; fill: var(--muted); }
.cw-sub { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--muted); }
.cw-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 12px; height: 12px; border-radius: 3px; background: var(--k); box-shadow: 0 0 8px color-mix(in srgb, var(--k) 50%, transparent); }
.lg-note { color: var(--muted); }

.supply { min-width: 0; }
.supply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(26, 28, 40, 0.6); border: 1px solid var(--line); }
.sl-node { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); }
.sl-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #151722; border: 1px dashed var(--line-2); opacity: 0.6; }
.sl-node.lit { color: var(--text); }
.sl-node.lit .sl-icon { color: var(--k); opacity: 1; border: 1.5px solid var(--k); box-shadow: 0 0 14px color-mix(in srgb, var(--k) 35%, transparent); }
.sl-text { display: flex; flex-direction: column; min-width: 0; }
.sl-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-who { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-link svg { width: 100%; height: 12px; display: block; }
.sl-link path { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.s-full .sl-link path { stroke: var(--gold); stroke-dasharray: 6 6; animation: supply-flow 1.2s linear infinite; filter: drop-shadow(0 0 3px rgba(226, 179, 92, 0.7)); }
.s-full .sl-link .sl-arrow { animation: none; stroke-dasharray: none; }
.s-gather .sl-link path, .s-craft .sl-link path { stroke: rgba(226, 179, 92, 0.45); }
@keyframes supply-flow { to { stroke-dashoffset: -12; } }
.sl-state { display: flex; flex-direction: column; font-family: var(--font-caps); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); min-width: 0; }
.sl-note { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--muted); opacity: 0.8; }
.s-full { border-color: rgba(226, 179, 92, 0.45); background: radial-gradient(ellipse at 50% 50%, rgba(226, 179, 92, 0.08), transparent 70%), rgba(26, 28, 40, 0.6); }
.s-full .sl-state { color: var(--gold); }
.s-gather .sl-state, .s-craft .sl-state { color: var(--text-2); }

.benches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bench { --k: var(--gold); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px;
  border: 1px dashed var(--line-2); background: rgba(26, 28, 40, 0.45); color: var(--muted); min-width: 0; }
.bench-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #151722; border: 1px solid var(--line); opacity: 0.5; }
.bench-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bench:not(.lit) .bench-main { justify-content: center; min-height: 44px; gap: 2px; }
.bench-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bench-name { font-weight: 600; font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-title { flex-shrink: 0; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k); padding: 2px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); }
.bench-who { color: var(--muted); }
.bench.lit { border-style: solid; border-color: color-mix(in srgb, var(--k) 40%, transparent); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--k) 12%, transparent), transparent 60%), var(--panel); }
.bench.lit .bench-icon { opacity: 1; color: var(--k); border-color: color-mix(in srgb, var(--k) 50%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--k) 25%, transparent); }
.bench.lit .bench-name { color: var(--text); }
.bench-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bench-people li { --cls: var(--gold); display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(40px, 0.8fr) 30px; align-items: center; gap: 8px; font-size: 13px; }
.bp-dot { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #12141d; background: var(--cls); }
.bp-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-main { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.bp-bar { position: relative; height: 6px; border-radius: 3px; background: #12141d; border: 1px solid var(--line); overflow: hidden; }
.bp-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cls); border-radius: 3px; }
.bp-rank { text-align: right; color: var(--text); font-weight: 600; }

@media (max-width: 1200px) {
  .family-row { grid-template-columns: minmax(0, 1fr); }
  .alt-grid { grid-template-columns: minmax(0, 1fr); }
  .alt-grid.single { grid-template-columns: minmax(0, 1fr); }
  .benches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .supply { width: 100%; }
}
@media (max-width: 860px) {
  .family, .alts, .workshop { margin-top: 32px; }
  .family-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-tally dd { font-size: 22px; }
  .alt-card { padding: 20px 18px 16px; }
  .alt-top { gap: 16px; }
  .alt-medal { width: 92px; height: 92px; }
  .am-icon .t-icon { width: 32px; height: 32px; }
  .alt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-facts { grid-template-columns: minmax(0, 1fr); }
  .alt-profs li { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "icon name rank" "icon bar bar"; gap: 4px 10px; }
  .ap-icon { grid-area: icon; } .ap-name { grid-area: name; } .ap-rank { grid-area: rank; } .ap-bar { grid-area: bar; }
  .benches { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bench { padding: 12px; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; }
  .bench-icon { width: 38px; height: 38px; }
  .sl-row { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); row-gap: 8px; }
  .sl-row { column-gap: 8px; padding: 10px 12px; }
  .sl-icon { width: 30px; height: 30px; }
  .sl-icon .t-icon { width: 18px; height: 18px; }
  .sl-node { gap: 8px; }
  .sl-state { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-card, .family-main { transition: none; }
  .s-full .sl-link path { animation: none; }
  .alt-card:hover, .family-main:hover { transform: none; }
}

/* ===== Round 12: firsts, photos, what's next, nemesis, polish ============== */

/* Stickers (the firsts) */
.sticker { --s: 64px; --tone: var(--frost); position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(238, 230, 211, 0.34); border: 2px dashed rgba(168, 160, 143, 0.35); background: rgba(17, 18, 26, 0.5); }
.sticker.tone-gold { --tone: var(--gold); }
.sticker.tone-sage { --tone: var(--sage); }
.sticker.tone-ember { --tone: var(--ember); }
.sticker.is-earned { color: #1a1510; border: 0; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%), var(--tone); box-shadow: 0 0 0 3px #f3ead6, 0 0 0 4px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.45); transform: rotate(-6deg); }
.sticker.is-earned .stat-icon { stroke-width: 2.1; }
.sticker-num { font: 700 calc(var(--s) * 0.34) / 1 var(--font-caps); letter-spacing: -0.5px; }
.sticker-book { margin-top: 28px; margin-bottom: 8px; }
.sticker-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sticker-head h2 { margin: 2px 0 4px; font-size: clamp(30px, 3.2vw, 40px); }
.sticker-head p { margin: 0; }
.sticker-count { font-family: var(--font-display); font-size: 20px; color: var(--text-2); margin: 0; }
.sticker-count b { font-size: 34px; color: var(--gold); }
.sticker-grid { list-style: none; margin: 0; padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 22px 14px; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(circle at 20% 0%, rgba(140, 200, 230, 0.07), transparent 55%), var(--panel); }
.sticker-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 4px; border-radius: 10px; outline: none; cursor: help; }
.sticker-item:focus-visible { box-shadow: 0 0 0 2px var(--frost); }
.sticker-item .sticker { transition: transform 0.25s ease; }
.sticker-item:hover .sticker.is-earned, .sticker-item:focus .sticker.is-earned { transform: rotate(4deg) scale(1.06); }
.sticker-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.15; color: var(--muted); }
.sticker-item.is-earned .sticker-title { color: var(--text); }
.sticker-when { color: var(--muted); line-height: 1.35; font-size: 12px; }
.sticker-item .tile-pop { left: 50%; width: 230px; margin-left: -115px; text-align: left; }
.sticker-item:hover .tile-pop, .sticker-item:focus .tile-pop { opacity: 1; transform: none; }
/* the firsts: groups of small pips */
.firsts-book { margin-top: 10px; margin-bottom: 24px; }
.firsts-total { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 200px; }
.firsts-total .fg-bar { width: 100%; }
.fg-bar { display: block; height: 4px; border-radius: 4px; background: rgba(168, 160, 143, 0.18); overflow: hidden; }
.fg-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #f3d58f); }
.first-groups { display: grid; gap: 14px; }
.first-group { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px 12px; }
.first-group.has-earned { background: radial-gradient(circle at 0% 0%, rgba(226, 179, 92, 0.06), transparent 45%), var(--panel); }
.fg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.fg-head h3 { margin: 0; font-family: var(--font-caps); font-size: 17px; letter-spacing: 0.06em; color: var(--text); }
.fg-blurb { font-size: 13px; color: var(--muted); min-width: 0; }
.fg-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fg-count b { font-family: var(--font-caps); font-size: 17px; color: var(--gold); }
.fg-head .fg-bar { grid-column: 1 / -1; height: 3px; }
.pip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 2px 12px; }
.pip-item { --tone: var(--frost); position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 8px; border-radius: 8px; outline: none; cursor: help; }
.pip-item.pip-gold { --tone: var(--gold); }
.pip-item.pip-sage { --tone: var(--sage); }
.pip-item.pip-ember { --tone: var(--ember); }
.pip-item:hover, .pip-item:focus { background: rgba(255, 255, 255, 0.04); }
.pip-item:focus-visible { box-shadow: 0 0 0 2px var(--frost); }
.pip-gem { flex: none; width: 10px; height: 10px; margin: 0 2px; transform: rotate(45deg); border-radius: 2px; border: 1.5px solid color-mix(in srgb, var(--tone) 60%, rgba(168, 160, 143, 0.4)); background: transparent; }
.pip-item.is-earned .pip-gem { border-color: transparent; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), transparent 55%), var(--tone); box-shadow: 0 0 8px color-mix(in srgb, var(--tone) 70%, transparent); }
.pip-item.is-big .pip-gem { width: 12px; height: 12px; }
.pip-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--muted); }
.pip-item.is-earned .pip-title { color: var(--text); }
.pip-meta { flex: none; font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
.pip-item.is-earned .pip-meta { color: color-mix(in srgb, var(--tone) 75%, var(--text)); }
.pip-item .tile-pop { left: 0; width: 250px; }
.pip-item:hover .tile-pop, .pip-item:focus .tile-pop { opacity: 1; transform: none; }
.ach-divider-top { margin-top: 26px; }
.ach-divider { display: flex; align-items: center; gap: 16px; margin: 34px 0 6px; }
.ach-divider::before, .ach-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ach-teaser-art .sticker { margin: 0; }

/* Home: the chapter's "next" line, the true nemesis */
.book-next { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.book-next b { color: var(--gold); font-weight: 600; }
.nemesis.is-true .nemesis-count b { font-size: 22px; }

/* Photos: thumbnails, strips and the album */
.photo-link { display: block; position: relative; overflow: hidden; border-radius: 10px; background: #0c0d14; border: 1px solid var(--line-2); color: var(--text); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.photo-link img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s ease, filter 0.3s ease; }
.photo-link:hover { text-decoration: none; border-color: var(--gold); }
.photo-link:hover img, .photo-link:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 18px 0 0; }
.photo-strip .photo-link { transform: rotate(-1deg); }
.photo-strip .photo-link:nth-child(even) { transform: rotate(1.2deg); }
.photo-more { align-self: center; font-size: 14px; }
.t-photo { max-width: 420px; margin-top: 10px; }
.zone-photos { margin-top: 18px; }
.zone-photos .photo-strip { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.album-count { font-family: var(--font-display); font-size: 21px; color: var(--text-2); margin: 28px 0 10px; }
.album-count b { color: var(--gold); font-size: 30px; }
.album-chapter { margin: 26px 0 40px; }
.album-chapter-title { display: flex; align-items: baseline; gap: 14px; font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 18px; }
.album-roman { font-family: var(--font-caps); color: var(--frost); font-size: 0.8em; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.album-photo { margin: 0; }
.album-photo .photo-link { background: #f3ead6; padding: 10px 10px 0; border: 0; border-radius: 4px; transform: rotate(-0.8deg); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.album-grid .album-photo:nth-child(3n + 2) .photo-link { transform: rotate(0.9deg); }
.album-grid .album-photo:nth-child(3n) .photo-link { transform: rotate(-0.3deg); }
.album-photo .photo-link:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5); }
.album-photo .photo-link img { border-radius: 2px; }
.album-photo .photo-link:hover img { transform: none; }
.photo-cap { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px 12px; color: #3b2c1c; }
.photo-cap-text { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.25; }
.photo-cap-meta { font-size: 12.5px; color: #6f5a42; }

/* The lightbox */
.lightbox { width: min(1200px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: #0c0d14; color: var(--text); overflow: visible; }
.lightbox::backdrop { background: rgba(6, 7, 12, 0.86); }
.lb-figure { margin: 0; display: flex; flex-direction: column; }
.lb-img { display: block; width: 100%; max-height: calc(94vh - 90px); object-fit: contain; border-radius: 14px 14px 0 0; background: #000; }
.lb-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px 16px; }
.lb-text { font-family: var(--font-display); font-style: italic; font-size: 21px; }
.lb-meta { color: var(--muted); font-size: 14px; }
.lb-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.lightbox button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12, 13, 20, 0.82); color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { border-color: var(--gold); color: var(--gold); }
.lightbox button[hidden] { display: none; }
.lb-close { top: -16px; right: -16px; }
.lb-prev { left: 12px; top: 40%; }
.lb-next { right: 12px; top: 40%; }

/* Journey: what's next, quests of note, a fresh chapter */
.next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.next-list li { display: flex; gap: 12px; align-items: flex-start; }
.next-list li > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.next-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border: 1px dashed rgba(226, 179, 92, 0.5); }
.next-icon b { font: 700 12px var(--font-caps); }
.next-title { font-weight: 600; font-size: 15px; }
.next-card { border: 1px solid rgba(226, 179, 92, 0.28); background: radial-gradient(circle at 90% 0%, rgba(226, 179, 92, 0.1), transparent 60%), var(--panel-2); }
.quest-list li span:first-child { font-family: var(--font-display); font-size: 17px; }
.chapter-fresh { font-family: var(--font-display); font-style: italic; font-size: 20px; }

/* Atlas: a lone zone page gets the wide layout */
.zone-page.is-solo { margin-bottom: 24px; }
.zone-page.is-solo .zone-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }

/* Bestiary: the ones that got away, and the ledger */
.got-away { margin: 32px 0 8px; padding: 24px 26px; border-radius: 14px; border: 1px solid rgba(224, 121, 90, 0.32); background: radial-gradient(circle at 10% 20%, rgba(224, 121, 90, 0.14), transparent 60%), var(--panel); }
.got-away-head { display: flex; gap: 18px; align-items: center; }
.got-away-head h2 { margin: 2px 0; font-size: clamp(26px, 2.6vw, 34px); }
.got-away-head p { margin: 0; }
.got-away-mark { flex: none; filter: drop-shadow(0 0 12px rgba(224, 121, 90, 0.5)); }
.got-away-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 22px; }
.got-away-list li { display: flex; flex-direction: column; padding-top: 10px; border-top: 1px solid var(--line); }
.ledger.is-collapsed:not(.is-searching) tr.is-extra { display: none; }
.ledger-more { margin: 16px auto 4px; display: flex; }
.ledger-note { margin-top: 12px; }

/* About: where to find him */
.on-the-road h2 { margin: 4px 0 16px; }
.road-facts { margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.road-facts div { padding: 14px 16px; border-radius: 10px; background: var(--panel-2); }
.road-facts dt { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.road-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--text); }

@media (max-width: 860px) {
  .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 16px 10px; gap: 18px 6px; }
  .pip-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 6px; }
  .pip-item { padding: 5px 4px; gap: 7px; }
  .pip-title { font-size: 15px; white-space: normal; line-height: 1.15; }
  .pip-meta { display: none; }
  .pip-item .tile-pop { width: min(250px, calc(100vw - 48px)); }
  .pip-item:nth-child(even) .tile-pop { left: auto; right: 0; }
  .first-group { padding: 12px 10px 10px; }
  .fg-head { grid-template-columns: minmax(0, 1fr) auto; }
  .fg-blurb { grid-row: 2; grid-column: 1 / -1; }
  .firsts-total { align-items: flex-start; width: 100%; }
  .sticker-item .sticker { --s: 54px !important; }
  .sticker-title { font-size: 16px; }
  .sticker-when { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sticker-item .tile-pop { display: none; }
  .album-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .zone-page.is-solo .zone-body { display: flex; }
  .road-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .got-away { padding: 20px 16px; }
  .lb-close { top: 8px; right: 8px; }
  .lb-prev, .lb-next { top: auto; bottom: 10px; }
  .lb-caption { padding-bottom: 64px; }
  /* Bestiary on phones: one compact line per creature */
  .ledger tr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; align-items: baseline; }
  .ledger tbody th { grid-column: 1; font-size: 16px; }
  .ledger .kills { grid-column: 2; grid-row: 1; text-align: right; }
  .ledger .kills .inline-bar { display: none; }
  .ledger .kills::before, .ledger td[data-label="Levels"], .ledger td[data-label="First"] { display: none !important; }
  .ledger td[data-label="Where"] { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
  .ledger td[data-label="Where"]::before { display: none; }
  .ledger .num { min-width: 0; }
  /* The purse fits one line in the phone tally */
  .tally li:last-child .tally-value { font-size: 30px; white-space: nowrap; }
  .tally li:last-child .coins { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-link img, .sticker-item .sticker, .album-photo .photo-link { transition: none; }
  .photo-link:hover img { transform: none; }
}

/* ---- Nux's Backpack (26 Sep 2026) ------------------------------------------ */

/* Item quality, in the site's palette (poor → heirloom) */
.q0 { color: #a29c90; }
.q1 { color: var(--text); }
.q2 { color: #62d173; }
.q3 { color: #5aa7f0; }
.q4 { color: #c08af5; }
.q5 { color: #ff9b3d; }
.q6 { color: #e6cc80; }
.q7 { color: #7fd6f0; }
.q0-frame, .q0-glyph, .q0-chip, .q0-edge { --q: #7d786e; }
.q1-frame, .q1-glyph, .q1-chip, .q1-edge { --q: #b9b1a0; }
.q2-frame, .q2-glyph, .q2-chip, .q2-edge { --q: #62d173; }
.q3-frame, .q3-glyph, .q3-chip, .q3-edge { --q: #5aa7f0; }
.q4-frame, .q4-glyph, .q4-chip, .q4-edge { --q: #c08af5; }
.q5-frame, .q5-glyph, .q5-chip, .q5-edge { --q: #ff9b3d; }
.q6-frame, .q6-glyph, .q6-chip, .q6-edge { --q: #e6cc80; }
.q7-frame, .q7-glyph, .q7-chip, .q7-edge { --q: #7fd6f0; }

.backpack-page { display: flex; flex-direction: column; gap: 28px; }
.pack-section { position: relative; }
.pack-asof { margin-left: auto; font-size: 13px; color: var(--muted); }
.pack-foot { margin: -8px 0 0; text-align: right; }

/* the summary tiles */
.pack-summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pack-tile { height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 15px; border-radius: 14px; color: var(--text);
  border: 1px solid rgba(226, 179, 92, 0.32); background: radial-gradient(ellipse at 0% 0%, rgba(140, 200, 230, 0.1), transparent 60%), linear-gradient(160deg, #22253a, #181a26);
  transition: border-color 0.25s ease, transform 0.25s ease; }
.pack-tile:hover { text-decoration: none; color: var(--text); border-color: var(--gold); transform: translateY(-2px); }
.pack-tile-label { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost); }
.pack-tile-value { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--gold); }
.pack-tile-value small { font-size: 17px; color: var(--text-2); font-weight: 500; }
.pack-tile-value .coins { font-size: 24px; }
.pack-tile-sub { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.pack-meter { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #11121a; border: 1px solid var(--line-2); overflow: hidden; }
.pack-meter span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--frost-dim), var(--frost)); }

/* the paper doll */
.doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.doll-col, .doll-weapons { list-style: none; margin: 0; padding: 0; }
.doll-col { display: flex; flex-direction: column; gap: 8px; }
.doll-slot { position: relative; min-width: 0; }
.doll-slot > .pack-item > summary, .doll-slot.is-empty { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 12px; }
.doll-col-right .doll-slot > .pack-item > summary, .doll-col-right .doll-slot.is-empty { flex-direction: row-reverse; text-align: right; }
.doll-frame { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--q, var(--muted)); border: 2px solid var(--q, var(--line-2));
  background: radial-gradient(circle at 40% 30%, #2d3248, #12141d);
  box-shadow: 0 0 14px color-mix(in srgb, var(--q, transparent) 35%, transparent), inset 0 0 12px rgba(0, 0, 0, 0.6); }
.doll-slot.is-empty .doll-frame { border-style: dashed; border-color: var(--line-2); color: #4a4f68; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); background: #151722; }
.doll-ench, .pack-ench { color: #7ff09a; text-shadow: 0 0 8px rgba(98, 209, 115, 0.8); }
.doll-ench { position: absolute; right: -6px; top: -8px; font-size: 13px; }
.pack-ench { margin-left: 6px; font-size: 12px; }
.doll-text { display: flex; flex-direction: column; min-width: 0; }
.doll-label { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.doll-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.doll-slot.is-empty .doll-name { color: #5d6178; font-weight: 400; font-style: italic; }
.doll-centre { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 6px; }
.doll-portrait { position: relative; width: min(220px, 100%); aspect-ratio: 1; }
.doll-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold);
  box-shadow: 0 0 0 7px rgba(17, 18, 26, 0.9), 0 0 0 8px rgba(226, 179, 92, 0.35), 0 0 48px rgba(140, 200, 230, 0.3); }
.doll-level { position: absolute; right: 6%; bottom: 2%; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 23px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 2px solid var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--gold); }
.doll-name-plate { display: flex; flex-direction: column; align-items: center; text-align: center; }
.doll-name-plate b { font-family: var(--font-caps); font-size: 22px; letter-spacing: 0.05em; color: var(--gold); font-weight: 600; }
.doll-name-plate span { color: var(--text-2); font-size: 14px; }
.doll-weapons { display: flex; justify-content: center; gap: 10px; width: 100%; }
.doll-weapons .doll-slot { flex: 1 1 0; }
.doll-weapons .doll-slot > .pack-item > summary, .doll-weapons .doll-slot.is-empty { flex-direction: column; text-align: center; gap: 6px; padding: 6px 4px; }
.doll-weapons .doll-name { font-size: 13.5px; }

/* the filter */
.pack-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.6); position: sticky; top: 8px; z-index: 4; backdrop-filter: blur(6px); }
.pack-filter[hidden] { display: none; }
.pack-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 20px; border: 1px solid var(--line-2); background: #11121a; color: var(--muted); flex: 1 1 220px; max-width: 340px; }
.pack-search:focus-within { border-color: var(--frost); color: var(--frost); }
.pack-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.pack-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 600 13.5px var(--font-body); cursor: pointer; }
.pack-chip:hover { border-color: var(--frost-dim); color: var(--text); }
.pack-chip[aria-pressed="true"] { border-color: var(--q, var(--gold)); color: var(--text); background: color-mix(in srgb, var(--q, var(--gold)) 14%, transparent); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--q); box-shadow: 0 0 6px var(--q); }
.chip-n { color: var(--muted); font-weight: 400; }
.pack-status { margin: 0; flex-basis: 100%; }
.pack-status:empty { display: none; }

/* bags and bank tabs */
.bag-grid { columns: 3 340px; column-gap: 16px; }
.bag-card { break-inside: avoid; margin-bottom: 16px; min-width: 0; padding: 16px 16px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.55); transition: opacity 0.2s ease; }
.bag-card.is-full { border-color: rgba(224, 121, 90, 0.4); }
.bag-card.no-match { opacity: 0.45; }
.bag-head { display: flex; align-items: center; gap: 12px; }
.bag-glyph { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gold); background: rgba(226, 179, 92, 0.1); border: 1px solid rgba(226, 179, 92, 0.3); }
.bag-title { min-width: 0; display: flex; flex-direction: column; }
.bag-title h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.bag-sub { font-size: 12.5px; color: var(--muted); }
.bag-fill { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.bag-fill b { font-family: var(--font-display); font-size: 22px; color: var(--text); font-weight: 600; }
.bag-card.is-full .bag-fill b { color: var(--ember); }
.slot-map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 12px 0 6px; }
.slot-map.is-wide { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.slot-map .cell { display: block; aspect-ratio: 1; border-radius: 3px; background: #141620; border: 1px solid #262939; }
.slot-map .cell[class*="-cell"] { border-color: color-mix(in srgb, var(--q) 70%, transparent); background: color-mix(in srgb, var(--q) 30%, #141620); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); }
.q0-cell { --q: #7d786e; } .q1-cell { --q: #b9b1a0; } .q2-cell { --q: #62d173; } .q3-cell { --q: #5aa7f0; } .q4-cell { --q: #c08af5; } .q5-cell { --q: #ff9b3d; } .q6-cell { --q: #e6cc80; } .q7-cell { --q: #7fd6f0; }
.bag-empty, .bag-none { margin: 10px 0 4px; font-size: 14px; color: var(--muted); font-style: italic; }
.pack-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.pack-row { border-top: 1px solid rgba(42, 45, 64, 0.7); }
.pack-row:first-child { border-top: 0; }
.pack-row.is-hidden, .doll-slot.is-hidden { display: none; }
.doll-slot.is-dim { opacity: 0.3; }
.pack-item > summary { list-style: none; cursor: pointer; }
.pack-item > summary::-webkit-details-marker { display: none; }
.pack-row .pack-item > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; }
.pack-item > summary:hover, .pack-item[open] > summary { background: rgba(140, 200, 230, 0.06); }
.pack-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pack-glyph { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--q); border: 1px solid color-mix(in srgb, var(--q) 55%, transparent); background: radial-gradient(circle at 40% 30%, #262a3d, #12141d); }
.pack-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pack-kind { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pack-count { min-width: 34px; text-align: right; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--gold); }

/* the tooltip: the game's item card, redrawn in arcane-night colours */
.wow-tip { display: none; position: relative; width: 300px; max-width: 100%; padding: 10px 13px 11px; border-radius: 6px;
  font: 400 13.5px/1.38 var(--font-body); color: var(--text); text-align: left;
  background: linear-gradient(180deg, #11142a, #08091a);
  border: 1px solid color-mix(in srgb, var(--q, #6b7090) 55%, #4a4f68);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(226, 179, 92, 0.08), 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 22px color-mix(in srgb, var(--q, transparent) 16%, transparent); }
.pack-item[open] > .wow-tip { display: block; margin: 6px 0 10px 40px; width: auto; max-width: 340px; }
.doll-col-right .pack-item[open] > .wow-tip { margin-left: auto; margin-right: 8px; }
/* weapon slots are narrow: their card opens as an overlay below, at full width */
.doll-weapons .pack-item[open] > .wow-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 8; width: 300px; max-width: min(300px, calc(100vw - 32px)); margin: 0; }
.doll-weapons .doll-slot:first-child .pack-item[open] > .wow-tip { left: 0; transform: none; }
.doll-weapons .doll-slot:last-child:not(:first-child) .pack-item[open] > .wow-tip { left: auto; right: 0; transform: none; }
.wow-tip.is-floating { display: block; position: fixed; z-index: 60; margin: 0; pointer-events: none; }
.wt-corner { position: absolute; width: 12px; height: 12px; border: 0 solid var(--gold); opacity: 0.75; }
.wt-tl { left: -1px; top: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.wt-br { right: -1px; bottom: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
.wt-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; margin-bottom: 2px; }
.wt-line { display: flex; gap: 12px; }
.wt-r { margin-left: auto; text-align: right; white-space: nowrap; }
.t-white { color: var(--text); }
.t-green { color: #46dc68; }
.t-yellow { color: #f2c94c; }
.t-red { color: var(--ember); }
.t-grey { color: var(--muted); }
.t-blue { color: var(--frost); }
.wt-enchant { color: #7ff09a; text-shadow: 0 0 10px rgba(98, 209, 115, 0.35); }
.wt-spark { color: var(--gold); margin-right: -6px; }
.wt-sell { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 5px; color: var(--text); }
.wt-sell .coins { color: var(--text); }
.wt-each { color: var(--muted); }
.wt-stack { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.wt-stack .coins { color: var(--text-2); }
.wt-novalue { margin-top: 5px; font-size: 12.5px; }

@media (max-width: 1200px) {
  .pack-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doll { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 860px) {
  .backpack-page { gap: 22px; }
  .pack-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pack-summary li:first-child { grid-column: 1 / -1; }
  .pack-tile { padding: 12px 13px; }
  .pack-tile-value { font-size: 24px; }
  .pack-tile-value .coins { font-size: 20px; }
  .doll { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .doll-centre { order: -1; }
  .doll-portrait { width: 150px; }
  .doll-level { min-width: 38px; height: 38px; font-size: 20px; }
  .doll-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .doll-slot > .pack-item > summary, .doll-slot.is-empty { gap: 8px; padding: 4px 2px; }
  .doll-name { font-size: 13.5px; }
  .doll-slot.is-empty .doll-frame { width: 34px; height: 34px; }
  .doll-slot.is-empty .doll-frame .t-icon { width: 20px; height: 20px; }
  .doll-slot:has(.pack-item[open]) { grid-column: 1 / -1; }
  .doll-col-right .doll-slot > .pack-item > summary, .doll-col-right .doll-slot.is-empty { flex-direction: row; text-align: left; }
  .doll-col-right .pack-item[open] > .wow-tip { margin-left: 40px; }
  .doll-frame { width: 40px; height: 40px; }
  .doll-weapons { gap: 6px; }
  .pack-filter { position: static; padding: 12px; }
  .pack-search { max-width: none; flex-basis: 100%; }
  .bag-card { padding: 14px 12px 10px; }
  .pack-row .pack-item > summary { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .pack-kind { display: none; }
  .pack-item[open] > .wow-tip { margin-left: 0; max-width: none; }
  .doll-weapons .pack-item[open] > .wow-tip { max-width: min(300px, calc(100vw - 32px)); }
  .doll-col-right .pack-item[open] > .wow-tip { margin-left: 0; }
  .pack-asof { font-size: 12px; }
}
/* stats: the character sheet's numbers */
.st-attrs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.st-attr { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 14px 8px 12px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(226, 179, 92, 0.28); background: radial-gradient(ellipse at 50% 0%, rgba(226, 179, 92, 0.12), transparent 70%), rgba(17, 18, 26, 0.55); }
.st-attr-value { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; color: var(--gold); }
.st-attr-label { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; }
.st-attr-label .short { display: none; text-decoration: none; border: 0; cursor: default; }
.st-attr-bonus { font-size: 13px; font-weight: 700; color: var(--muted); min-height: 1.2em; }
.st-attr-bonus.up { color: #62d173; }
.st-attr-bonus.down { color: var(--ember); }
.st-int .st-attr-value, .st-spi .st-attr-value { color: #f0c873; text-shadow: 0 0 18px rgba(140, 200, 230, 0.35); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; align-items: start; }
.st-group { min-width: 0; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.55); }
.st-title { margin: 0 0 8px; font-family: var(--font-caps); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost); font-weight: 600; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px dashed rgba(58, 63, 88, 0.7); }
.st-row:first-child { border-top: 0; }
.st-label { color: var(--text-2); font-size: 14.5px; }
.st-value { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text); white-space: nowrap; }
.st-value small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--muted); }
.st-spell .st-value { color: #c9a8ff; }
.st-resist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rs { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); }
.rs b { font-family: var(--font-display); font-size: 18px; color: var(--text-2); font-weight: 600; }
.rs.on b { color: var(--text); }
.rs-gem { width: 22px; height: 22px; transform: rotate(45deg); border-radius: 5px; border: 1.5px solid var(--rs); background: color-mix(in srgb, var(--rs) 18%, #12141d); box-shadow: 0 0 10px color-mix(in srgb, var(--rs) 35%, transparent); opacity: 0.55; margin: 2px 0 4px; }
.rs.on .rs-gem { opacity: 1; }
.rs-fire { --rs: var(--ember); } .rs-nature { --rs: var(--sage); } .rs-frost { --rs: var(--frost); } .rs-shadow { --rs: #9a7ad6; } .rs-arcane { --rs: #e38ae0; }
.st-foot { margin: 14px 0 0; }
@media (max-width: 860px) {
  .st-attrs { gap: 6px; }
  .st-attr { padding: 10px 2px 8px; border-radius: 10px; }
  .st-attr-value { font-size: 25px; }
  .st-attr-label { font-size: 10px; letter-spacing: 0.08em; }
  .st-attr-label .long { display: none; }
  .st-attr-label .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-tile, .bag-card { transition: none; }
  .pack-tile:hover { transform: none; }
}

/* ---- festivals: the site dresses up while one is on ------------------------
   html[data-festival="hallows|winterveil|midsummer|noblegarden"] is set by the
   build and corrected by /assets/festival.js. Pictures in /media/festival/ are
   only downloaded while their festival shows. Everything here is decoration:
   the page reads exactly the same without it. */

.festival-deco, .festival-note, .fest-only-noblegarden, .fest-only-midsummer, .fest-only-hallows, .fest-only-winterveil { display: none; }
html[data-festival] .festival-deco { display: block; }
html[data-festival] .festival-note { display: flex; }
html[data-festival="noblegarden"] .fest-only-noblegarden,
html[data-festival="midsummer"] .fest-only-midsummer,
html[data-festival="hallows"] .fest-only-hallows,
html[data-festival="winterveil"] .fest-only-winterveil,
html[data-festival-off="noblegarden"] .festival-toggle .fest-only-noblegarden,
html[data-festival-off="midsummer"] .festival-toggle .fest-only-midsummer,
html[data-festival-off="hallows"] .festival-toggle .fest-only-hallows,
html[data-festival-off="winterveil"] .festival-toggle .fest-only-winterveil { display: inline-flex; }

html[data-festival="noblegarden"], html[data-festival-off="noblegarden"] { --fest: #f0b8c8; --fest-2: #b9d99a; --fest-glow: 240, 184, 200; }
html[data-festival="midsummer"], html[data-festival-off="midsummer"] { --fest: #f2a14a; --fest-2: #e0795a; --fest-glow: 242, 140, 60; }
html[data-festival="hallows"], html[data-festival-off="hallows"] { --fest: #f0913a; --fest-2: #a57ad8; --fest-glow: 240, 145, 58; }
html[data-festival="winterveil"], html[data-festival-off="winterveil"] { --fest: #f08378; --fest-2: #6fbf8a; --fest-glow: 226, 179, 92; }

/* the little emblem in the header: switch to the Standard theme and back */
.header-tools { display: flex; align-items: center; gap: 16px; }
.festival-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--fest-glow, 226, 179, 92), 0.45); background: radial-gradient(circle, rgba(var(--fest-glow, 226, 179, 92), 0.16), rgba(var(--fest-glow, 226, 179, 92), 0) 70%); color: var(--fest, var(--gold)); cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.festival-toggle[hidden] { display: none; }
.festival-toggle:hover { border-color: var(--fest, var(--gold)); box-shadow: 0 0 14px rgba(var(--fest-glow, 226, 179, 92), 0.45); }
.festival-toggle .fest-emblem { transition: transform 0.3s ease; }
.festival-toggle:hover .fest-emblem { transform: rotate(-10deg) scale(1.08); }
html[data-festival] .site-header, html[data-festival-off] .site-header { position: relative; z-index: 40; }
.festival-toggle[aria-pressed="false"] { color: var(--muted); border-color: var(--line-2); background: none; opacity: 0.7; }
.festival-toggle[aria-pressed="false"] .fest-emblem { filter: grayscale(1); }
.festival-toggle[aria-pressed="false"]:hover { opacity: 1; color: var(--fest); box-shadow: none; }
html[data-festival] .festival-toggle .fest-emblem { animation: fest-bob 5s ease-in-out infinite; }
@keyframes fest-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-6deg); } }
.festival-tip { position: absolute; right: -6px; top: calc(100% + 12px); z-index: 30; width: max-content; max-width: 240px; padding: 9px 13px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); font: 400 13px/1.35 var(--font-body); color: var(--muted); text-align: left; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.festival-tip::before { content: ""; position: absolute; top: -6px; right: 18px; width: 10px; height: 10px; background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
.festival-tip b { display: block; font-family: var(--font-caps); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--fest); margin-bottom: 2px; }
.festival-toggle:hover .festival-tip, .festival-toggle:focus-visible .festival-tip { opacity: 1; transform: none; }

/* a festive seam under the header, on every page */
html[data-festival] .site-header { border-bottom-color: transparent; border-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--fest) 22%, var(--fest-2) 50%, var(--fest) 78%, rgba(0, 0, 0, 0) 100%) 1; }

/* the line in the hero naming the festival */
.festival-note { margin: 0; align-items: center; gap: 10px; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--fest); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.festival-note > span { align-items: center; gap: 10px; }
.festival-note .fest-emblem { flex-shrink: 0; display: inline-block; filter: drop-shadow(0 0 6px rgba(var(--fest-glow), 0.6)); }

/* decoration layers (behind the text, above the picture) */
.festival-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.festival-deco > span { position: absolute; inset: 0; background-repeat: no-repeat; }
.fest-top { bottom: auto !important; height: 64px; background-repeat: repeat-x !important; background-size: auto 100%; background-position: 0 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.fest-bottom { top: auto !important; height: 100%; background-position: 50% 100%; background-size: max(100%, 1100px) auto; }
.festival-deco-banner .fest-bottom { display: none; }
.festival-deco-banner .fest-top { height: 52px; }

/* Hallow's End: violet dusk, drifting fog, lanterns along a crooked fence */
html[data-festival="hallows"] .fest-wash { background: linear-gradient(180deg, rgba(58, 28, 86, 0.42), rgba(40, 20, 60, 0.18) 55%, rgba(20, 10, 30, 0) 80%); mix-blend-mode: multiply; }
html[data-festival="hallows"] .festival-deco-hero .fest-glow { background: radial-gradient(ellipse 34% 26% at 18% 100%, rgba(240, 145, 58, 0.22), rgba(240, 145, 58, 0) 70%), radial-gradient(ellipse 30% 22% at 88% 100%, rgba(240, 145, 58, 0.18), rgba(240, 145, 58, 0) 70%); animation: fest-flicker 4s ease-in-out infinite; }
html[data-festival="hallows"] .fest-air { top: 45%; left: -30%; right: -30%; background:
    radial-gradient(ellipse 22% 38% at 12% 80%, rgba(170, 170, 200, 0.16), rgba(170, 170, 200, 0) 70%),
    radial-gradient(ellipse 26% 34% at 42% 90%, rgba(170, 170, 200, 0.14), rgba(170, 170, 200, 0) 70%),
    radial-gradient(ellipse 24% 40% at 70% 85%, rgba(170, 170, 200, 0.15), rgba(170, 170, 200, 0) 70%),
    radial-gradient(ellipse 20% 30% at 94% 88%, rgba(170, 170, 200, 0.12), rgba(170, 170, 200, 0) 70%);
  animation: fest-fog 38s ease-in-out infinite alternate; }
html[data-festival="hallows"] .festival-deco-hero .fest-bottom { background-image: url("/media/festival/hallows-bottom.svg"); }
html[data-festival="hallows"] .fest-ring { background-image: url("/media/festival/hallows-ring.svg"); }
html[data-festival="hallows"] .hero-ring::before { background: radial-gradient(circle, rgba(240, 145, 58, 0.2), rgba(165, 122, 216, 0.08) 45%, rgba(165, 122, 216, 0) 64%); }
html[data-festival="hallows"] .hero-name-text { filter: drop-shadow(0 2px 0 rgba(70, 40, 6, 0.65)) drop-shadow(0 0 30px rgba(240, 145, 58, 0.42)); }

/* Feast of Winter Veil: evergreen garland, presents, a tree, deeper snow */
html[data-festival="winterveil"] .fest-wash { background: radial-gradient(ellipse 60% 70% at 78% 30%, rgba(255, 196, 120, 0.12), rgba(255, 196, 120, 0) 70%), linear-gradient(180deg, rgba(40, 70, 120, 0.2), rgba(40, 70, 120, 0) 70%); }
html[data-festival="winterveil"] .fest-top { background-image: url("/media/festival/winterveil-garland.svg"); height: 76px; }
html[data-festival="winterveil"] .festival-deco-banner .fest-top { height: 60px; }
html[data-festival="winterveil"] .festival-deco-hero .fest-glow { background: radial-gradient(ellipse 22% 30% at 92% 100%, rgba(255, 214, 130, 0.2), rgba(255, 214, 130, 0) 70%); animation: fest-flicker 6s ease-in-out infinite; }
html[data-festival="winterveil"] .festival-deco-hero .fest-bottom { background-image: url("/media/festival/winterveil-bottom.svg"); }
html[data-festival="winterveil"] .fest-ring { background-image: url("/media/festival/winterveil-ring.svg"); }
html[data-festival="winterveil"] .hero-ring::before { background: radial-gradient(circle, rgba(255, 214, 130, 0.2), rgba(232, 87, 79, 0.06) 45%, rgba(232, 87, 79, 0) 64%); }

/* Midsummer Fire Festival: sunset light, ribbons, bonfires and embers */
html[data-festival="midsummer"] .fest-wash { background: linear-gradient(180deg, rgba(120, 60, 150, 0.3) 0%, rgba(230, 110, 70, 0.22) 55%, rgba(255, 150, 70, 0.3) 100%); mix-blend-mode: overlay; }
html[data-festival="midsummer"] .fest-top { background-image: url("/media/festival/midsummer-bunting.svg"); height: 70px; }
html[data-festival="midsummer"] .festival-deco-hero .fest-glow { background: radial-gradient(ellipse 30% 34% at 14% 100%, rgba(255, 140, 50, 0.3), rgba(255, 140, 50, 0) 70%), radial-gradient(ellipse 18% 22% at 92% 100%, rgba(255, 140, 50, 0.22), rgba(255, 140, 50, 0) 70%); animation: fest-flicker 2.6s ease-in-out infinite; }
html[data-festival="midsummer"] .festival-deco-hero .fest-bottom { background-image: url("/media/festival/midsummer-bottom.svg"); }
html[data-festival="midsummer"] .fest-ring { background-image: url("/media/festival/midsummer-ring.svg"); }
html[data-festival="midsummer"] .hero-ring::before { background: radial-gradient(circle, rgba(255, 150, 60, 0.28), rgba(224, 121, 90, 0.08) 45%, rgba(224, 121, 90, 0) 64%); }
html[data-festival="midsummer"] .hero-name-text { filter: drop-shadow(0 2px 0 rgba(70, 40, 6, 0.65)) drop-shadow(0 0 30px rgba(255, 140, 50, 0.45)); }

/* Noblegarden: soft spring dawn, a meadow of flowers and painted eggs */
html[data-festival="noblegarden"] .fest-wash { background: linear-gradient(180deg, rgba(240, 184, 200, 0.14), rgba(240, 184, 200, 0) 45%, rgba(150, 200, 130, 0.1) 100%); mix-blend-mode: screen; }
html[data-festival="noblegarden"] .festival-deco-hero .fest-bottom { background-image: url("/media/festival/noblegarden-bottom.svg"); }
html[data-festival="noblegarden"] .fest-ring { background-image: url("/media/festival/noblegarden-ring.svg"); }
html[data-festival="noblegarden"] .hero-ring::before { background: radial-gradient(circle, rgba(240, 184, 200, 0.2), rgba(185, 217, 154, 0.08) 45%, rgba(185, 217, 154, 0) 64%); }

/* the ornament around the level ring */
.fest-ring { display: none; position: absolute; inset: -9%; z-index: 1; pointer-events: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
html[data-festival] .fest-ring { display: block; }
.hero-ring .ring-medal, .hero-ring .video-toggle { z-index: 2; }

/* room for the garland above the launch countdown */
html[data-festival="winterveil"] .hero-scene > .launch-bar, html[data-festival="midsummer"] .hero-scene > .launch-bar { padding-top: 64px; }
html[data-festival="winterveil"] .hero-scene > .launch-bar + .hero, html[data-festival="midsummer"] .hero-scene > .launch-bar + .hero { padding-top: 36px; }
html[data-festival="winterveil"] .hero-scene > canvas + .hero, html[data-festival="midsummer"] .hero-scene > canvas + .hero { padding-top: 104px; }

html[data-festival="winterveil"] .page-banner .scene-caption, html[data-festival="midsummer"] .page-banner .scene-caption { top: 70px; }

@keyframes fest-flicker { 0%, 100% { opacity: 0.8; } 30% { opacity: 1; } 55% { opacity: 0.7; } 75% { opacity: 0.95; } }
@keyframes fest-fog { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -2%, 0); } }

@media (max-width: 860px) {
  .header-tools { gap: 10px; }
  .festival-toggle { width: 34px; height: 34px; }
  .festival-note { font-size: 17px; align-items: flex-start; }
  .festival-note .fest-emblem { margin-top: 1px; }
  .fest-top { height: 46px !important; }
  html[data-festival="winterveil"] .page-banner .scene-caption, html[data-festival="midsummer"] .page-banner .scene-caption { top: 50px; }
  .fest-bottom { background-size: 1000px auto; background-position: 18% 100%; }
  .fest-ring { inset: -12%; }
  html[data-festival="winterveil"] .hero-scene > .launch-bar, html[data-festival="midsummer"] .hero-scene > .launch-bar { padding-top: 44px; }
  html[data-festival="winterveil"] .hero-scene > canvas + .hero, html[data-festival="midsummer"] .hero-scene > canvas + .hero { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .festival-deco > span, html[data-festival] .festival-toggle .fest-emblem { animation: none !important; }
  .festival-toggle:hover .fest-emblem { transform: none; }
}

/* Supporters: the family vault ("who has what") and each supporter's bags & bank */
.family-vault, .alt-packs { margin-top: 56px; }
.fv-people { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.fv-person { display: flex; align-items: center; gap: 8px; }
.fv-who { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; font: inherit; font-size: 14px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 40%, transparent); background: rgba(17, 18, 26, 0.6); cursor: pointer; }
.fv-who:disabled { cursor: default; }
.fv-who:not(:disabled):hover { border-color: var(--cls, var(--gold)); }
.fv-who[aria-pressed="true"] { border-color: var(--cls, var(--gold)); background: color-mix(in srgb, var(--cls, var(--gold)) 18%, #12141d); box-shadow: 0 0 14px color-mix(in srgb, var(--cls, var(--gold)) 30%, transparent); }
.fv-dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #12141d; background: var(--cls, var(--gold)); }
.fv-asof { font-size: 12px; }
.fv-filter { margin-bottom: 12px; }
.fv-box { position: relative; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1d2031, #151722); padding: 6px 10px; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; }
.fv-list { list-style: none; margin: 0; padding: 0; }
.fv-row { border-top: 1px solid rgba(42, 45, 64, 0.7); }
.fv-row:first-child { border-top: 0; }
.fv-row.is-hidden { display: none; }
.fv-row .pack-item > summary { display: grid; grid-template-columns: 30px minmax(150px, 1.1fr) minmax(0, 2fr) 52px; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 8px; cursor: pointer; list-style: none; }
.fv-row .pack-item > summary::-webkit-details-marker { display: none; }
.fv-row .pack-item > summary:hover { background: rgba(140, 200, 230, 0.06); }
.fv-item { display: flex; flex-direction: column; min-width: 0; }
.fv-item .pack-kind { font-size: 12px; }
.fv-holders { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-holder { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 35%, transparent); background: rgba(17, 18, 26, 0.55); white-space: nowrap; }
.fv-holder b { font-weight: 600; color: var(--text); }
.fv-holder .fv-dot { width: 18px; height: 18px; font-size: 10px; }
.fv-n { color: var(--gold); font-weight: 600; }
.fv-holder small { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }
.fv-total { text-align: right; font-family: var(--font-caps); color: var(--gold); }
.fv-row .pack-item[open] > .wow-tip { margin-left: 42px; }
.fv-none { margin: 14px 8px; }

.alt-bags-link { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border-radius: 10px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 30%, transparent); background: rgba(17, 18, 26, 0.45); }
.alt-bags-link:hover { text-decoration: none; color: var(--text); border-color: var(--cls, var(--gold)); }
.alt-bags-link .t-icon { color: var(--cls, var(--gold)); }
.abl-meta { margin-left: auto; color: var(--muted); font-size: 13px; }

.alt-pack { margin-bottom: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 35%, transparent);
  background: radial-gradient(ellipse at 6% 0%, color-mix(in srgb, var(--cls, var(--gold)) 14%, transparent), transparent 50%), linear-gradient(160deg, #1d2031, #151722); scroll-margin-top: 24px; }
.alt-pack > summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.alt-pack > summary::-webkit-details-marker { display: none; }
.alt-pack-icon { color: var(--cls, var(--gold)); display: flex; }
.alt-pack-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alt-pack-title b { font-family: var(--font-caps); font-weight: 500; font-size: 19px; letter-spacing: 0.02em; }
.alt-pack-worth { margin-left: auto; white-space: nowrap; }
.alt-pack-chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease; margin: 0 4px 4px 6px; flex-shrink: 0; }
.alt-pack[open] > summary .alt-pack-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.alt-pack-body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.alt-pack-body .alt-label { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.alt-pack-body .pack-foot { margin: 0; }
.alt-packs-note { margin-top: 4px; }

@media (max-width: 720px) {
  .fv-box { max-height: 70vh; padding: 4px 6px; }
  .fv-row .pack-item > summary { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "g i t" "g h h"; gap: 6px 8px; }
  .fv-row .pack-glyph { grid-area: g; align-self: start; }
  .fv-item { grid-area: i; }
  .fv-holders { grid-area: h; }
  .fv-total { grid-area: t; }
  .fv-row .pack-item[open] > .wow-tip { margin-left: 0; }
  .fv-holder { white-space: normal; }
  .alt-pack > summary { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .alt-pack-title b { font-size: 17px; }
  .alt-pack-worth { margin-left: 36px; order: 3; }
  .alt-pack-chev { margin-left: auto; }
  .alt-pack-body { padding: 2px 12px 14px; }
}

/* The recipe book (Supporters and Nux's Backpack) */
.recipe-book-section { margin-top: 56px; }
.rb-chip { display: inline-flex; align-items: center; gap: 6px; }
.rb-chip-icon { display: inline-flex; color: var(--gold); }
.rb-chip-icon .t-icon { width: 16px; height: 16px; }
.rb-intro { margin: 0 0 12px; }
.recipe-book .fv-holders:empty { display: none; }
.recipe-book .fv-row .pack-item > summary:has(.fv-holders:empty) { grid-template-columns: 30px minmax(0, 1fr); }
.ap-recipes { grid-column: 2 / -1; margin-top: -4px; color: var(--frost); font-size: 12px; }
.alt-profs li:has(.ap-recipes) { row-gap: 2px; }
@media (max-width: 720px) {
  .recipe-book .fv-row .pack-item > summary:has(.fv-holders:empty) { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "g i"; }
}

/* Supporters v2: compact roster cards + one tabbed bench (27 Sep, round 21) */
.sup-roster { margin-top: 8px; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sup-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px; scroll-margin-top: 24px;
  border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 40%, transparent);
  background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cls, var(--gold)) 16%, transparent), transparent 55%), linear-gradient(160deg, #1d2031, #151722); }
.sup-head { display: flex; align-items: center; gap: 12px; }
.sup-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cls, var(--gold));
  border: 1.5px solid var(--cls, var(--gold)); background: #12141d; box-shadow: 0 0 14px color-mix(in srgb, var(--cls, var(--gold)) 25%, transparent); }
.sup-id { display: flex; flex-direction: column; min-width: 0; }
.sup-name { margin: 0; font-family: var(--font-caps); font-weight: 500; font-size: 21px; letter-spacing: 0.02em; line-height: 1.15; }
.sup-class { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cls, var(--gold)); }
.sup-purse { margin-left: auto; white-space: nowrap; font-size: 14px; }
.sup-profs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sup-profs li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; font-size: 14px; }
.sup-profs li .sp-bar { grid-column: 2 / -1; grid-row: 2; }
.sp-icon { display: flex; color: var(--gold); }
.sp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar { position: relative; height: 4px; border-radius: 3px; background: rgba(140, 200, 230, 0.12); overflow: hidden; }
.sp-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--cls, var(--gold)); }
.sp-rank { text-align: right; font-size: 13px; }
.sp-recipes { text-align: right; font-size: 12px; white-space: nowrap; min-width: 64px; }
a.sp-recipes { color: var(--frost); }
.sup-none { margin: 0; }
.sup-store { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(42, 45, 64, 0.8); color: var(--text-2); }
.sup-store .t-icon { color: var(--cls, var(--gold)); }
.sup-store .sep { color: var(--muted); }
.sup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.sup-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--cls, var(--gold)) 50%, transparent); background: color-mix(in srgb, var(--cls, var(--gold)) 12%, #12141d); }
.sup-btn:hover { text-decoration: none; color: var(--text); border-color: var(--cls, var(--gold)); }
.sup-btn-quiet { background: transparent; font-weight: 500; color: var(--text-2); }
.sup-btn .t-icon { color: var(--cls, var(--gold)); }

.sup-bench { margin-top: 34px; scroll-margin-top: 12px; }
.sup-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 5px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(17, 18, 26, 0.6); }
.sup-tabs[hidden] { display: none; }
.sup-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.03em; color: var(--text-2); background: transparent; }
.sup-tab:hover { color: var(--text); background: rgba(140, 200, 230, 0.06); }
.sup-tab[aria-selected="true"] { color: #12141d; background: var(--gold); }
.sup-tab-n { font-family: var(--font-body, inherit); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: rgba(17, 18, 26, 0.25); }
.sup-tab[aria-selected="false"] .sup-tab-n { background: rgba(140, 200, 230, 0.1); color: var(--muted); }
.sup-panel { display: block; }
.sup-panel[hidden] { display: none; }
.sup-panel + .sup-panel { margin-top: 36px; }
.sup-bench:has(.sup-tabs:not([hidden])) .sup-panel + .sup-panel { margin-top: 0; }
.sup-panel-head { margin-bottom: 12px; }
.sup-panel-head h2 { margin: 0 0 4px; font-family: var(--font-caps); font-weight: 500; font-size: 24px; }
.sup-bench:has(.sup-tabs:not([hidden])) .sup-panel-head h2 { display: none; }
.sup-panel-head p { margin: 0; }
.sup-panel .recipe-book .rb-intro { font-size: 14px; }
.sup-panel.family-vault, .sup-panel.alt-packs { margin-top: 0; }

@media (max-width: 720px) {
  .sup-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sup-card { padding: 14px; }
  .sup-tab { flex: 1 1 30%; padding: 9px 8px; font-size: 13px; flex-direction: column; gap: 2px; }
  .sup-btn { padding: 7px 10px; }
}

/* Supporters v3: one slim row per supporter, so 9 alts still fit (round 22) */
.sup-list { list-style: none; margin: 0; padding: 4px 0; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1d2031, #151722); }
.sup-row { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(0, 2.6fr) minmax(130px, 0.9fr) 88px 212px; align-items: center; gap: 14px;
  padding: 9px 16px; border-top: 1px solid rgba(42, 45, 64, 0.7); scroll-margin-top: 24px; position: relative; }
.sup-row:first-child, .sup-row-head + .sup-row { border-top: 0; }
.sup-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cls, var(--gold)); opacity: 0.8; }
.sup-row:not(.sup-row-head):hover { background: rgba(140, 200, 230, 0.04); }
.sup-row-head { padding-top: 8px; padding-bottom: 6px; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(42, 45, 64, 0.9); }
.sup-row-head::before { display: none; }
.sup-row-head small { text-transform: none; letter-spacing: 0.02em; font-family: var(--font-body, inherit); }
.sr-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sr-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cls, var(--gold)); border: 1.5px solid var(--cls, var(--gold)); background: #12141d; }
.sr-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sr-name { font-family: var(--font-caps); font-weight: 500; font-size: 17px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-class { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cls, var(--gold)); }
.sr-profs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-prof { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 999px; font-size: 13px; border: 1px solid rgba(140, 200, 230, 0.16); background: rgba(17, 18, 26, 0.5); white-space: nowrap; }
.sr-prof:not(:has(.sr-rec)) { padding-right: 10px; }
.sr-prof-icon { display: flex; color: var(--gold); }
.sr-prof b { color: var(--gold); font-weight: 600; }
.sr-rec { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 12px; color: var(--frost); background: rgba(140, 200, 230, 0.12); }
.sr-rec:hover { text-decoration: none; background: rgba(140, 200, 230, 0.22); }
.sr-rec .t-icon { color: var(--frost); }
.sr-none { font-size: 13px; }
.sr-store { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.sr-store .t-icon { color: var(--cls, var(--gold)); }
.sr-store .sep { color: var(--muted); }
.sr-purse { font-size: 13px; white-space: nowrap; text-align: right; }
.sr-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sr-actions .sup-btn { padding: 5px 11px; font-size: 12.5px; }
.sup-btn.is-off { opacity: 0.28; pointer-events: none; }
@media (max-width: 1120px) {
  .sup-row { grid-template-columns: minmax(190px, 1fr) minmax(0, 2fr) auto; grid-template-areas: "id profs purse" "store store actions"; row-gap: 8px; }
  .sup-row-head { display: none; }
  .sr-id { grid-area: id; } .sr-profs { grid-area: profs; } .sr-store { grid-area: store; } .sr-purse { grid-area: purse; } .sr-actions { grid-area: actions; }
}
@media (max-width: 620px) {
  .sup-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id id purse" "profs profs profs" "store actions actions"; gap: 7px 10px; padding: 11px 12px 11px 14px; }
  .sr-store { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .sr-name { font-size: 16px; }
  .sr-prof { font-size: 12.5px; }
}

/* ---- About v2: portrait, quote, the road since 2004, small print ---------- */
.about-me { margin-bottom: 56px; }
.about-hero { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; padding: 44px 52px; border-radius: 16px; border: 1px solid rgba(226, 179, 92, 0.3);
  box-shadow: inset 0 0 0 7px var(--panel), inset 0 0 0 8px rgba(226, 179, 92, 0.14), 0 24px 48px rgba(0, 0, 0, 0.25);
  background: radial-gradient(circle at 16% 40%, rgba(140, 200, 230, 0.14), transparent 45%), linear-gradient(180deg, rgba(226, 179, 92, 0.06), rgba(226, 179, 92, 0) 50%), var(--panel); }
.about-portrait { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.about-medal { position: relative; width: 300px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px var(--gold), 0 0 0 15px rgba(226, 179, 92, 0.18), 0 22px 50px rgba(0, 0, 0, 0.55); }
.about-medal::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(140, 200, 230, 0.22), rgba(140, 200, 230, 0) 62%); }
.about-medal img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.about-portrait figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.about-portrait-name { font-family: var(--font-caps); font-size: 20px; letter-spacing: 0.08em; color: var(--gold); }
.about-portrait-who { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.about-intro { min-width: 0; }
.about-hero .about-name { font-size: 54px; line-height: 1.05; margin: 8px 0 0; }
.about-since { margin: 10px 0 0; font-family: var(--font-caps); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--frost); }
.about-hero .about-quote { position: relative; margin: 30px 0 26px; padding: 6px 0 0 58px; border: 0; font-size: inherit; }
.about-hero .about-quote::before { content: "“"; position: absolute; left: -4px; top: -26px; font-family: var(--font-display); font-size: 130px; line-height: 1; color: var(--gold); opacity: 0.85; }
.about-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 29px; line-height: 1.42; color: var(--text); text-wrap: pretty; }
.about-lead { margin: 0; max-width: 62ch; line-height: 1.65; color: var(--text-2); }

.about-road { margin-top: 56px; }
.about-road h2 { font-size: 36px; margin: 4px 0 30px; }
.player-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; position: relative; }
.player-road::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 72%, rgba(140, 200, 230, 0.5) 86%, rgba(140, 200, 230, 0) 100%); opacity: 0.7; }
.player-stop { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 34px; min-width: 0; }
.player-stop-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(226, 179, 92, 0.55); }
.player-stop-year { font-family: var(--font-caps); font-size: 22px; letter-spacing: 0.04em; color: var(--gold); line-height: 1.1; }
.player-stop-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.player-stop-text { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.player-stop.is-ahead .player-stop-dot { background: var(--bg); border: 2px dashed var(--frost); box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(140, 200, 230, 0.45); }
.player-stop.is-ahead .player-stop-year { color: var(--frost); }
.player-stop-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--frost-dim); border-radius: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; vertical-align: middle; color: var(--frost); }

section.on-the-road { margin-bottom: 56px; }
section.on-the-road h2 { font-size: 36px; margin: 4px 0 26px; }
section.on-the-road .road-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.on-the-road .road-facts div { background: none; border-radius: 0; padding: 4px 16px; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; text-align: center; }
section.on-the-road .road-facts div + div { border-left: 1px solid rgba(226, 179, 92, 0.22); }
section.on-the-road .road-facts dd { margin: 0; font-size: 30px; font-weight: 600; color: var(--gold); line-height: 1.1; }
section.on-the-road .road-facts dt { font-family: var(--font-caps); font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.road-seen { margin: 14px 0 0; text-align: center; }

.about-foot { margin-bottom: 24px; }
.about-foot-inner { max-width: 860px; margin: 0 auto; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.about-foot p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.about-foot b { font-weight: 700; color: var(--text-2); }
.about-foot-links { font-size: 13px !important; }

@media (max-width: 1120px) {
  .about-hero { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; padding: 36px 36px; }
  .about-medal { width: 240px; }
  .player-road { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 34px; }
  .player-road::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 70%, rgba(140, 200, 230, 0.5) 88%, rgba(140, 200, 230, 0) 100%); }
  .player-stop { padding-top: 0; }
  .player-stop-dot { left: -34px; top: 4px; }
  .player-stop-text { max-width: 60ch; }
}
@media (max-width: 860px) {
  .about-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 22px; }
  .about-medal { width: 200px; }
  .about-intro { text-align: left; }
  .about-hero .about-name { font-size: 38px; }
  .about-hero .about-quote { padding-left: 40px; margin: 22px 0 20px; }
  .about-hero .about-quote::before { font-size: 96px; top: -18px; }
  .about-quote p { font-size: 23px; }
  .about-road h2, section.on-the-road h2 { font-size: 30px; }
  section.on-the-road .road-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; padding: 20px 0; }
  section.on-the-road .road-facts div:nth-child(3) { border-left: 0; }
  section.on-the-road .road-facts dd { font-size: 23px; }
}

/* ---- In game / Offline, beside the logo ------------------------------------ */
.brand-group { display: flex; align-items: center; gap: 18px; min-width: 0; }
.live-status { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 10px; white-space: nowrap; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(17, 18, 26, 0.55); font-family: var(--font-caps); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.live-status[hidden] { display: none; }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #6d6a63; flex: none; }
.live-status.is-ingame { border-color: rgba(156, 197, 154, 0.55); color: var(--sage); }
.live-status.is-ingame .live-dot { background: #7fdc86; box-shadow: 0 0 8px rgba(127, 220, 134, 0.85); }
.live-status.is-ingame .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(127, 220, 134, 0.7); animation: live-ping 2.4s ease-out infinite; }
@keyframes live-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-status.is-ingame .live-dot::after { animation: none; opacity: 0; } }
@media (max-width: 1200px) and (min-width: 861px) { .brand-group { gap: 12px; } }
@media (max-width: 420px) { .brand-group { gap: 10px; } .live-status { padding: 4px 9px 4px 8px; font-size: 10.5px; letter-spacing: 1.4px; gap: 6px; } }

/* line parts of ink symbols always draw in the symbol's own colour (kept last) */
/* ---- Journey: the chapter replay ------------------------------------------ */
.replay { padding-top: 4px; padding-bottom: 36px; }
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-titles h2 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; }
.rp-chapters { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 14px 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1f2233, #171924); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.rp-chip b { grid-row: 1 / 3; font-family: var(--font-caps); font-size: 20px; color: var(--gold); min-width: 26px; text-align: center; }
.rp-chip span { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.1; }
.rp-chip small { color: var(--muted); font-size: 12px; }
.rp-chip:hover { border-color: var(--frost-dim); }
.rp-chip[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(226, 179, 92, 0.18); }
.rp-chip-all b { color: var(--frost); }

.rp-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "zone side" "feed feed"; align-items: start; gap: 18px; padding: 18px; border-radius: 18px; border: 1px solid var(--line-2); background: radial-gradient(ellipse at 30% 0%, rgba(140, 200, 230, 0.07), transparent 60%), linear-gradient(170deg, #1d2030, #14161f); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.rp-zone-pane { grid-area: zone; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-zone-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-height: 34px; }
.rp-zone-name { font-family: var(--font-caps); font-size: clamp(20px, 2.2vw, 26px); color: var(--text); letter-spacing: 0.04em; }
.rp-zone-sub { color: var(--muted); font-size: 14px; }
.rp-sketch-frame { position: relative; }
.rp-sketch { background: var(--parchment); border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(120, 90, 50, 0.3); aspect-ratio: 3 / 2; }
.rp-sketch .sk-bg { fill: var(--parchment); }
.rp-sketch .sk-grid { stroke: rgba(122, 90, 56, 0.16); }
.rp-sketch .sk-label { fill: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 600; paint-order: stroke; stroke: rgba(239, 226, 196, 0.9); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.rp-pt { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rp-pt.on { opacity: 1; transform: none; }
.rp-pt.on.was { opacity: 0.38; }
.rp-lab { opacity: 0; transition: opacity 0.5s ease 0.15s; }
.rp-lab.on { opacity: 1; }
.rp-lab.on.was { opacity: 0.5; }
.rp-me { transition: transform 0.55s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease; }
.rp-me-ring { fill: #f6e3b4; stroke: #9b3b2a; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.rp-me-pulse { fill: none; stroke: #b3362a; stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.4s ease-out infinite; }

.rp-flash { position: absolute; left: 50%; top: 50%; width: 92%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; text-align: center; }
.rp-flash b { font-family: var(--font-caps); font-size: clamp(22px, 3.4vw, 40px); color: #fff3d6; padding: 10px 22px; border-radius: 10px; background: rgba(28, 22, 14, 0.78); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); text-shadow: 0 0 18px rgba(226, 179, 92, 0.6); max-width: 100%; }
.rp-flash.kind-level_up b { color: #ffe3a1; }
.rp-flash.kind-death b { color: #ffb39e; }
.rp-flash img { width: min(320px, 60vw); border: 8px solid #f6efdf; border-bottom-width: 26px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); transform: rotate(-2deg); }
.rp-flash.show { animation: rp-flash 2.4s ease forwards; }
@keyframes rp-flash { 0% { opacity: 0; transform: translate(-50%, -44%) scale(0.92); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1); } }

.rp-big-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 2px solid rgba(255, 243, 214, 0.9); background: rgba(28, 22, 14, 0.72); color: #ffe3a1; font-size: 30px; cursor: pointer; box-shadow: 0 0 0 8px rgba(226, 179, 92, 0.18), 0 12px 30px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease, opacity 0.3s ease; }
.rp-big-play span { margin-left: 6px; }
.rp-big-play:hover { transform: scale(1.06); }
.replay:not(.is-fresh) .rp-big-play { opacity: 0; pointer-events: none; }

.rp-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-world-wrap { border-radius: 4px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); background: var(--parchment); }
.rp-world { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.rp-world .rp-lift, .rp-world .rp-seg, .rp-world .rp-zone, .rp-world .rp-island { display: none; }
.rp-world .rp-lift.on, .rp-world .rp-island.on { display: inline; }
.rp-world .rp-seg.on, .rp-world .rp-zone.on { display: inline; animation: rp-pop 0.5s ease; }
.rp-world .rp-seg.on.was, .rp-world .rp-zone.on.was { animation: none; opacity: 0.6; }
.rp-world .rp-zone-name { font-size: 15px; }
.rp-pin { opacity: 0; transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease; }
@keyframes rp-pop { from { opacity: 0; } to { opacity: 1; } }

.rp-when { display: flex; align-items: baseline; gap: 10px; }
.rp-day { font-family: var(--font-caps); color: var(--gold); font-size: 18px; letter-spacing: 0.06em; }
.rp-date { color: var(--text-2); }
.rp-level { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; }
.rp-level-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }
.rp-level-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: #f3cf82; text-shadow: 0 0 16px rgba(226, 179, 92, 0.35); }
.rp-level-bar { height: 8px; border-radius: 4px; background: #11131c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); overflow: hidden; }
.rp-level-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8862b, #f3cf82); transition: width 0.5s ease; }
.rp-played { grid-column: 1 / 4; color: var(--muted); font-size: 13px; }
.rp-counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rp-counts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.rp-counts b { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.rp-counts span { color: var(--muted); font-size: 12px; }
.rp-feed { grid-area: feed; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 64px; }
.rp-item { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 7px 10px 7px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--line-2); }
.rp-item.tone-gold { border-left-color: var(--gold); }
.rp-item.tone-frost { border-left-color: var(--frost); }
.rp-item.tone-sage { border-left-color: var(--sage); }
.rp-item.tone-ember { border-left-color: var(--ember); }
.rp-item:nth-child(n+2) { opacity: 0.68; }
.rp-item:first-child { background: rgba(226, 179, 92, 0.07); }
.rp-item.is-major .rp-title { font-weight: 700; }
.rp-item.is-new { animation: rp-in 0.4s ease; }
@keyframes rp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rp-kind { grid-column: 1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.rp-title { grid-column: 1; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.rp-thumb { grid-column: 2; grid-row: 1 / 3; width: 64px; height: 40px; object-fit: cover; border-radius: 4px; }

.rp-controls { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.rp-play { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--gold); color: #1a1408; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(226, 179, 92, 0.3); }
.rp-play .rp-icon-pause, .replay.is-playing .rp-play .rp-icon-play { display: none; }
.replay.is-playing .rp-play .rp-icon-pause { display: inline; }
.rp-play .rp-icon-play { margin-left: 3px; }
.rp-speed { flex: none; min-width: 52px; height: 36px; border-radius: 18px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 600 14px var(--font-body); cursor: pointer; }
.rp-speed:hover, .rp-chip:focus-visible, .rp-speed:focus-visible { border-color: var(--frost); }
.rp-track { position: relative; flex: 1; min-width: 0; padding-bottom: 22px; }
.rp-scrub { width: 100%; margin: 0; accent-color: var(--gold); cursor: pointer; }
.rp-ticks { position: absolute; left: 8px; right: 8px; bottom: 0; height: 22px; pointer-events: none; }
.rp-tick { position: absolute; top: 0; width: 1px; height: 6px; background: var(--line-2); }
.rp-tick-day { height: 8px; background: var(--frost-dim); }
.rp-tick-day[data-label]::after { content: attr(data-label); position: absolute; top: 8px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--muted); }
.rp-tick-level { width: 5px; height: 5px; top: 1px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.rp-status { margin: 10px 0 0; }

.rp-open-row { margin: 0 0 14px; }
.rp-open { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(226, 179, 92, 0.6); background: rgba(226, 179, 92, 0.08); color: #f3cf82; font: 600 14px var(--font-body); cursor: pointer; }
.rp-open:hover { background: rgba(226, 179, 92, 0.16); }
.rp-link { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(226, 179, 92, 0.6); color: #f3cf82; font-weight: 600; font-size: 14px; }
.rp-link:hover { text-decoration: none; background: rgba(226, 179, 92, 0.12); }

@media (max-width: 1100px) {
  .rp-stage { grid-template-columns: 1fr; }
  .rp-stage { grid-template-areas: "zone" "side" "feed"; }
  .rp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
  .rp-world-wrap { grid-row: 1 / 5; }
  .rp-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-item:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
  .rp-chapters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .rp-chip { flex: none; }
  .rp-stage { padding: 12px; gap: 12px; }
  .rp-side { display: flex; align-items: stretch; }
  .rp-counts b { font-size: 20px; }
  .rp-feed { grid-template-columns: 1fr; }
  .rp-controls { gap: 10px; }
  .rp-big-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-pt, .rp-lab, .rp-me, .rp-pin, .rp-level-bar span { transition: none; }
  .rp-me-pulse, .rp-world .rp-seg.on, .rp-world .rp-zone.on, .rp-item.is-new { animation: none; }
  .rp-flash { display: none; }
}

/* ---- two brothers, two sites (Oct 2026) ------------------------------------ */
.footer-links { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }
.brother-link { color: var(--gold); }
.hero-portrait.is-still { background: #1a1410; }
.sup-row.is-brother { border-color: rgba(226, 179, 92, 0.45); background: linear-gradient(90deg, rgba(226, 179, 92, 0.08), transparent 55%); }
.live-acct { margin-right: -4px; }
.live-acct[hidden] { display: none; }
@media (max-width: 480px) { .live-status .live-acct { display: none; } }
.sr-brother { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--gold); }

svg .sym path.sym-line { stroke: currentColor; }