/* Nauvis Field Guide. Tokens first; the voxel cube is the one loud element, everything else stays quiet. */
:root {
  --paper: #f2f4f0;
  --surface: #ffffff;
  --sunk: #e6eae4;
  --ink: #18232b;
  --muted: #4f5f68;
  --line: #d3d9d2;
  --copper: #8f4f33;
  --copper-soft: #f3e3d8;
  --moss: #35603f;
  --moss-soft: #e0ece2;
  --warn: #8a5a00;
  --warn-soft: #f8edd2;
  --earth: #806228;
  --fire: #b73d28;
  --water: #256d99;
  --air: #307356;
  --neutral: #5c6971;
  --focus: #2a72a3;
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --top-h: 60px;
  /* type scale (px so small UI text doesn't drift with the 17px body) */
  --fs-2xs: 11.5px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-body: 17px;
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, .25);
  --shadow-drawer: 8px 0 30px rgba(0, 0, 0, .15);
  --scrim: rgba(10, 16, 20, .45);
  /* text on solid fills (biome tiles, cost bars): white on dark fills, ink on light ones; same in both themes */
  --on-fill: #fff; --on-fill-ink: #18232b;
  --art-glow: radial-gradient(circle at 50% 65%, var(--copper-soft), var(--sunk) 70%);
  /* stat-cost bar: cheap → expensive */
  --cost-0: #449b6a; --cost-1: #449b6a; --cost-2: #7e933e; --cost-3: #b0894a; --cost-4: #cf722b; --cost-5: #a33a2a;
  --cost-0-text: var(--on-fill-ink); --cost-1-text: var(--on-fill-ink); --cost-2-text: var(--on-fill-ink); --cost-3-text: var(--on-fill-ink); --cost-4-text: var(--on-fill-ink); --cost-5-text: var(--on-fill);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #11181d; --surface: #182229; --sunk: #0d1317; --ink: #e4e9e4; --muted: #9eabb1; --line: #2a363e;
    --copper: #dc9670; --copper-soft: #3a261d; --moss: #8cc49a; --moss-soft: #1b2e22; --warn: #e7bd63; --warn-soft: #33290f;
    --earth: #c9a35a; --fire: #ec7a5d; --water: #6fb3e0; --air: #73c799; --neutral: #9aa7ad; --focus: #6fb3e0;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #11181d; --surface: #182229; --sunk: #0d1317; --ink: #e4e9e4; --muted: #9eabb1; --line: #2a363e;
  --copper: #dc9670; --copper-soft: #3a261d; --moss: #8cc49a; --moss-soft: #1b2e22; --warn: #e7bd63; --warn-soft: #33290f;
  --earth: #c9a35a; --fire: #ec7a5d; --water: #6fb3e0; --air: #73c799; --neutral: #9aa7ad; --focus: #6fb3e0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--copper); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
button { font: inherit; color: inherit; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-name { font: 700 19px/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; }
.brand-tag { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--line); }
.search-trigger {
  flex: 1; max-width: 420px; margin-left: auto; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted); cursor: pointer; font-size: var(--fs-lg); text-align: left;
}
.search-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { font: 600 var(--fs-xs)/1 var(--font-display); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 3px 6px; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .menu-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid transparent; background: none; border-radius: var(--r-md); cursor: pointer; color: var(--muted); }
.icon-btn:hover, .menu-btn:hover { border-color: var(--line); color: var(--ink); }
.menu-btn { display: none; }
.play-link { font: 600 var(--fs-md)/1 var(--font-display); text-decoration: none; padding: 10px 14px; border-radius: var(--r-md); background: var(--copper); color: var(--paper); white-space: nowrap; }
.play-link:hover { filter: brightness(1.08); }

/* Three columns */
.layout { display: grid; grid-template-columns: 272px minmax(0, 1fr) 220px; min-height: calc(100vh - var(--top-h)); }
.sidebar {
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto;
  padding: 22px 14px 40px 20px; border-right: 1px solid var(--line);
}
.nav-group { margin-bottom: 22px; }
.nav-group h2 { font: 600 var(--fs-sm)/1.2 var(--font-display); letter-spacing: .04em; color: var(--muted); margin: 0 0 8px 8px; }
.nav-group ol, .nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group ol { counter-reset: step; }
.nav-link {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: var(--fs-lg); line-height: 1.35;
}
.nav-group ol .nav-link::before {
  counter-increment: step; content: counter(step);
  font: 600 var(--fs-xs)/1 var(--font-display); color: var(--muted); min-width: 14px;
}
.nav-link:hover { background: var(--sunk); }
.nav-link[aria-current='page'] { background: var(--copper-soft); color: var(--copper); font-weight: 700; }
.nav-link[aria-current='page']::before { color: var(--copper); }
.nav-sub { margin: 2px 0 6px 18px !important; border-left: 1px solid var(--line); }
.nav-link small { color: var(--muted); }
.nav-sub .nav-link { font-size: var(--fs-md); padding: 4px 8px; }

.article-wrap { min-width: 0; padding: 36px 48px 60px; }
.article { max-width: 46rem; margin: 0 auto; outline: none; }
.toc { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 36px 20px 40px 8px; font-size: var(--fs-md); }
.toc h2 { font: 600 var(--fs-sm)/1.2 var(--font-display); letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0 4px 10px; border-left: 2px solid var(--line); line-height: 1.35; }
.toc a.sub { padding-left: 22px; font-size: var(--fs-sm); }
.toc a:hover, .toc a.active { color: var(--ink); border-left-color: var(--copper); }

/* Article typography: a 1.25 scale */
.crumbs { font-size: var(--fs-md); color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); }
.article h1 { font: 700 2.44rem/1.12 var(--font-display); margin: 0 0 14px; letter-spacing: -.005em; }
.article h2 { font: 700 1.56rem/1.25 var(--font-display); margin: 2.4em 0 .6em; padding-top: .9em; border-top: 1px solid var(--line); }
.article h3 { font: 600 1.25rem/1.3 var(--font-display); margin: 1.8em 0 .4em; }
.article h4 { font: 700 1rem/1.4 var(--font-body); margin: 1.4em 0 .3em; }
.article p, .article li { max-width: 68ch; }
.article .lede { font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.6em; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin: .3em 0; }
.article code { font: .88em/1 ui-monospace, 'SF Mono', Menlo, monospace; background: var(--sunk); padding: 2px 5px; border-radius: var(--r-xs); }
.article td code { overflow-wrap: anywhere; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.article img { max-width: 100%; }
.anchor { margin-left: 8px; color: var(--line); text-decoration: none; font-weight: 400; opacity: 0; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; color: var(--muted); }

/* Callouts carry meaning: tip = do this, warn = can't undo, source = where it comes from */
.callout { margin: 1.4em 0; padding: 14px 18px; border-radius: var(--r-md); border-left: 4px solid; }
.callout p { margin: .3em 0; }
.callout strong:first-child { font-family: var(--font-display); }
.callout.tip { background: var(--moss-soft); border-color: var(--moss); }
.callout.warn { background: var(--warn-soft); border-color: var(--warn); }
.callout.official { background: var(--sunk); border-color: var(--neutral); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--line); border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-lg); background: var(--surface); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 var(--fs-sm)/1.3 var(--font-display); color: var(--muted); background: var(--sunk); letter-spacing: .02em; position: sticky; top: 0; vertical-align: bottom; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num:first-child, th.num:first-child { width: 1%; }
.table-wrap.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.table-wrap.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.table-wrap.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]::after { content: ' ↕'; opacity: .4; }
th[aria-sort='ascending']::after { content: ' ↑'; opacity: 1; }
th[aria-sort='descending']::after { content: ' ↓'; opacity: 1; }

/* The voxel cube: element-coloured isometric block */
.cube { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }
.cube .t { fill: var(--c); opacity: .55; }
.cube .l { fill: var(--c); }
.cube .r { fill: var(--c); filter: brightness(.7); }
.el { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.el-earth { --c: var(--earth); color: var(--earth); }
.el-fire { --c: var(--fire); color: var(--fire); }
.el-water { --c: var(--water); color: var(--water); }
.el-air { --c: var(--air); color: var(--air); }
.el-neutral, .el- { --c: var(--neutral); color: var(--neutral); }

/* Class grid */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 1.4em 0; }
.class-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'art art' 'name stack' 'title stack';
  gap: 2px 10px; align-items: center; padding: 0 14px 14px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  text-decoration: none; color: var(--ink);
}
.class-card:hover { border-color: var(--copper); }
.class-card .portrait {
  grid-area: art; width: calc(100% + 28px); max-width: none; margin: 0 -14px 10px; aspect-ratio: 4 / 3; object-fit: cover; object-position: top;
  background: var(--art-glow); border-bottom: 1px solid var(--line);
}
.class-card .stack { grid-area: stack; display: flex; gap: 3px; font-size: var(--fs-body); line-height: 1; }
.class-card b { grid-area: name; font: 700 18px/1.1 var(--font-display); }
.class-card > span:last-child { grid-area: title; font-size: var(--fs-md); color: var(--muted); }
.class-hero { display: flex; gap: 18px; align-items: center; margin: 0 0 8px; flex-wrap: wrap; }
.class-hero .lede { margin: 0; }
.class-hero .portraits { display: flex; gap: 8px; }
.class-hero .portrait {
  width: 132px; height: 132px; object-fit: cover; object-position: top; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--art-glow);
}

/* Game art */
img.art { display: inline-block; }
.ilink { white-space: nowrap; }
img.ico { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.32em; margin-right: .3em; }
img.ico.mob { border-radius: 50%; background: var(--sunk); object-fit: cover; object-position: top; }
.art-hero { display: flex; gap: 20px; align-items: center; margin: 0 0 8px; }
.art-hero h1 { margin-top: 0; }
.art-hero .hero-art {
  flex: none; width: 150px; height: 150px; object-fit: contain; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--art-glow);
}
.art-hero .item-art { padding: 14px; }
.art-figure { margin: 1.4em 0; }
.art-figure img { display: block; max-width: 220px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--sunk); }
.art-figure.wide img { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-figure figcaption { font-size: var(--fs-md); color: var(--muted); margin-top: 8px; }
.element-web { margin: 1.4em 0; text-align: center; }
.element-web svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.element-web figcaption { font-size: .9em; color: var(--muted); max-width: 60ch; margin: .6em auto 0; }
.ew-edge path { fill: none; stroke: var(--c); stroke-linecap: round; opacity: .85; }
.ew-edge circle { fill: var(--paper); stroke: var(--c); stroke-width: 2; }
.ew-edge text { fill: currentColor; font-size: var(--fs-sm); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ew-edge:hover path { opacity: 1; }
.ew-node circle { fill: color-mix(in srgb, var(--c) 18%, var(--paper)); stroke: var(--c); stroke-width: 3; }
.ew-node text { fill: currentColor; text-anchor: middle; }
.ew-name { font-size: 19px; font-weight: 700; fill: var(--c) !important; }
.ew-stat { font-size: var(--fs-sm); }
.art-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin: 1.2em 0; }
.art-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-md); line-height: 1.3;
}
a.art-card:hover { border-color: var(--copper); }
.art-card .card-art { width: 96px; height: 96px; object-fit: contain; border-radius: var(--r-md); background: radial-gradient(circle at 50% 60%, var(--copper-soft), transparent 70%); }
.boss-card {
  float: right; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 10px 16px; padding: 8px;
  width: 140px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: var(--ink); text-align: center;
}
.boss-card .boss-art { width: 120px; height: 120px; object-fit: contain; }
.boss-card small { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Spell list */
.rank-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 1em 0; padding: 10px 14px; background: var(--sunk); border-radius: var(--r-md); font-size: var(--fs-lg); }
.rank-picker button { min-width: 36px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: 600 var(--fs-md)/1 var(--font-display); }
.rank-picker button[aria-pressed='true'] { background: var(--copper); border-color: var(--copper); color: var(--paper); }

/* Stat-cost chart */
.cost-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; margin: 6px 0; font-size: var(--fs-md); }
.cost-bar { display: flex; height: 22px; border-radius: var(--r-xs); overflow: hidden; background: var(--sunk); }
.cost-bar span { display: grid; place-items: center; font: 600 var(--fs-2xs)/1 var(--font-display); color: var(--fill-text, var(--on-fill)); border-right: 1px solid var(--surface); white-space: nowrap; overflow: hidden; }
.cost-bar .bar-accent { background: var(--copper); color: var(--paper); }
.cost-legend { font-size: var(--fs-sm); color: var(--muted); }

/* Biome grid: the world's 3 x 3 climate slots as voxel tiles */
.biome-grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px; margin: 1.2em 0; font-size: var(--fs-md); }
.biome-grid .axis { color: var(--muted); font-size: var(--fs-sm); display: grid; place-items: center; text-align: center; }
.biome-tile { padding: 12px 10px; border-radius: var(--r-sm); text-align: center; font: 600 var(--fs-md)/1.2 var(--font-display); color: var(--fill-text, var(--on-fill)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); text-decoration: none; }
.b-plains { background: #7e933e; --fill-text: var(--on-fill-ink); } .b-forest { background: #3f6b3a; } .b-rainforest { background: #2e6f62; }
.b-highlands { background: #6b767c; } .b-desert { background: #b0894a; --fill-text: var(--on-fill-ink); } .b-ocean { background: #2f5f8a; }
.b-taiga { background: #3e6a6e; } .b-frostfen { background: #537b82; } .b-black_ice { background: #3b4a5a; }
.b-ice_peaks { background: #7d95a6; --fill-text: var(--on-fill-ink); } .b-blue_steppe { background: #587891; } .b-caldera { background: #8d4433; }
.minimap-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1.2em 0; }
.minimap-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.minimap-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-lg); border: 2px solid var(--line); image-rendering: pixelated; }
.minimap-card:hover img { border-color: var(--ink); }
.biome-chip { display: inline-block; padding: 1px 8px; border-radius: var(--r-xs); color: var(--fill-text, var(--on-fill)); font: 600 var(--fs-sm)/1.6 var(--font-display); text-decoration: none; margin: 1px 0; }

/* Mob and item lists */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0; }
.filters input, .filters select { font: inherit; font-size: var(--fs-lg); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.filters input { flex: 1; min-width: 180px; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin: 1em 0; font-size: var(--fs-lg); }
.stat-strip div { display: flex; flex-direction: column; }
.stat-strip span { font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-display); }
.stat-strip b { font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font: 600 var(--fs-xs)/1.55 var(--font-display); padding: 0 7px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.boss, .tag.buff { color: var(--copper); border-color: var(--copper); }
.tag.archi, .tag.debuff { color: var(--warn); border-color: var(--warn); }
.tag.protector, .tag.heal { color: var(--moss); border-color: var(--moss); }

/* Steps (the onboarding path is a real sequence) */
.steps { list-style: none; padding: 0 !important; counter-reset: s; }
.steps > li { position: relative; padding: 0 0 18px 48px; margin: 0; max-width: none; }
.steps > li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--copper); color: var(--paper); font: 700 var(--fs-lg)/1 var(--font-display);
}
.steps > li::after { content: ''; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--line); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: 4px 0 4px; font-size: 1.12rem; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.2em 0; }
.choice > div { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; background: var(--surface); }
.choice h4 { margin-top: 0; font-family: var(--font-display); font-size: 1.05rem; }

.next-prev { display: flex; justify-content: space-between; gap: 12px; margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.next-prev a { display: flex; flex-direction: column; text-decoration: none; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); max-width: 48%; }
.next-prev a span { font-size: var(--fs-sm); color: var(--muted); }
.next-prev a b { font-family: var(--font-display); }
.next-prev a.next { margin-left: auto; text-align: right; }
.next-prev a:hover { border-color: var(--copper); }

.site-foot { max-width: 46rem; margin: 4em auto 0; font-size: var(--fs-sm); color: var(--muted); }
.made-by .heart { color: var(--fire); }
.data-stamp { font-size: var(--fs-xs); }
.loading { color: var(--muted); }

/* Search */
.search-dialog { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: grid; justify-items: center; align-items: start; padding: 10vh 16px 0; }
.search-dialog[hidden] { display: none; }
body.search-open { overflow: hidden; }
.nav-scrim[hidden] { display: none; }
.search-panel { width: min(640px, 100%); background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
#search-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font: inherit; font-size: 18px; background: transparent; color: var(--ink); outline: none; }
#search-input:focus-visible { box-shadow: inset 0 -2px 0 var(--focus); }
.search-results { list-style: none; margin: 0; padding: 6px; max-height: 55vh; overflow-y: auto; }
.search-results li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 12px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.search-results li a small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results li a em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-display); }
.search-results li[aria-selected='true'] a { background: var(--copper-soft); }
.search-results .empty { padding: 14px; color: var(--muted); }
.search-hint { margin: 0; padding: 8px 18px; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); }

@media (max-width: 1200px) {
  .layout { grid-template-columns: 260px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: grid; }
  .sidebar {
    position: fixed; top: var(--top-h); left: 0; bottom: 0; height: auto; width: min(300px, 86vw);
    background: var(--paper); z-index: 30; transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-drawer); transition: transform .2s ease; }
  body.nav-open { overflow: hidden; }
  .nav-scrim { position: fixed; inset: var(--top-h) 0 0; z-index: 25; background: var(--scrim); }
  .brand-tag, .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { flex: none; width: 38px; padding: 0; justify-content: center; margin-left: auto; }
  .topbar { padding: 0 12px; gap: 8px; }
  .article-wrap { padding: 24px 16px 48px; }
  .article h1 { font-size: 1.95rem; }
  .choice { grid-template-columns: 1fr; }
  /* touch: 16px fields stop iOS zooming in; 36px minimum tap targets */
  .filters input, .filters select { font-size: 16px; }
  .nav-link { padding: var(--sp-2); }
  .chip, .view-switch a { display: inline-flex; align-items: center; min-height: 36px; }
  .btn, .rank-picker button { min-height: 36px; }
  .sp-ranks button { min-height: 40px; justify-content: center; }
  .rm-node { min-height: 32px; }
}
@media (max-width: 560px) {
  .art-hero { flex-direction: column; align-items: flex-start; }
  .art-hero .hero-art { width: 120px; height: 120px; }
  .boss-card { float: none; margin: 0 0 10px; }
  .class-hero .portrait { width: 104px; height: 104px; }
  .rank-picker { gap: 6px; }
  .rank-picker span { flex-basis: 100%; }
  .rank-picker button { flex: 1; min-width: 0; }
  th, td { padding: 6px var(--sp-2); }
  table { font-size: var(--fs-md); }
  /* table({ stack: true }): each row becomes a card, labels come from data-label */
  .stack-wrap { overflow: visible; border: 0; border-radius: 0; }
  table.stack { background: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr[hidden] { display: none; }
  table.stack thead tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--sp-2); }
  table.stack th { display: none; position: static; }
  table.stack th[data-sort] { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--sunk); }
  table.stack thead tr:has(th[data-sort])::before { content: 'Sort by'; font-size: var(--fs-sm); color: var(--muted); }
  table.stack tbody tr { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  table.stack td { position: relative; padding: 3px 0 3px 7.5em; border: 0; text-align: left; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 7em; font: 600 var(--fs-xs)/1.9 var(--font-display); color: var(--muted); }
  table.stack td:first-child:not(.num) { padding: 0 0 4px; font-weight: 700; }
  table.stack td:first-child:not(.num)::before, table.stack td[colspan]::before { content: none; }
  table.stack td[colspan] { padding-left: 0; }
  table.stack td.num:first-child { padding-left: 0; font: 700 var(--fs-sm)/1.6 var(--font-display); color: var(--muted); }
  table.stack td.num:first-child::before { position: static; content: attr(data-label) ' '; font: inherit; }
  table.stack .ing { grid-template-columns: max-content minmax(0, max-content); }
}
@media (max-width: 420px) {
  .play-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
.ing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(8em, max-content); column-gap: .4em; row-gap: .1em; }
.article .ing { padding-left: 0; }
.article > .ing { margin: 0 0 1em; }
.ing li { display: contents; }
.ing .ilink { white-space: normal; }
.ing-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cell-list { list-style: none; margin: 0; padding: 0; }
.cell-list li { margin: 0 0 .15em; break-inside: avoid; }
.cell-list .cell-list { padding-left: .9em; }
.article > .cell-list { margin: 0 0 1em; }
.cell-list.cols { columns: 2 11.5em; column-gap: 1.2em; }
.cell-list small { color: var(--muted); white-space: nowrap; }
.cell-list .city-tag { font-style: italic; }
.biome-table td { width: 50%; }
.biome-table .biome-row th { background: none; padding-bottom: 0; border-bottom: 0; }
.biome-table .biome-row + tr td { border-top: 0; }
.btn { font: 600 var(--fs-lg)/1 var(--font-display); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1em; }
.chip { font: inherit; font-size: var(--fs-md); padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--sunk); color: var(--ink); cursor: pointer; }
.filters label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-lg); color: var(--muted); }
.filters label.inline input { flex: 0 0 5em; min-width: 0; width: 5em; }
.filters > span { align-self: center; color: var(--muted); font-size: var(--fs-lg); }
.nowrap { white-space: nowrap; }
/* Spell card. Reading order: name, what it does, then the clip with its numbers beside it,
   then the rank switcher. The element colour (--c) only tints the area diagram and focus. */
.sp { --c: var(--neutral); display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'head side' 'main side' 'ranks ranks'; grid-template-rows: auto 1fr auto; column-gap: 22px; padding: 16px 18px 12px; margin: 14px 0; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--r-xs) var(--r-xl) var(--r-xl) var(--r-xs); }
.sp.sp-earth { --c: var(--earth); } .sp.sp-fire { --c: var(--fire); } .sp.sp-water { --c: var(--water); } .sp.sp-air { --c: var(--air); }
.sp-head { grid-area: head; display: flex; gap: 12px; align-items: flex-start; }
.sp-icon { width: 44px; height: 44px; border-radius: var(--r-lg); flex: none; }
.sp-head h3 { margin: 0; font: 700 1.3rem/1.15 var(--font-display); letter-spacing: -.01em; }
.sp-sub { margin: 3px 0 0; font-size: var(--fs-md); color: var(--muted); line-height: 1.5; }
.sp-tags { white-space: normal; }
.sp-tags .el, .sp-tags .tag { vertical-align: 1px; }
.sp-main { grid-area: main; padding-top: 12px; align-self: start; }
.sp-fx { margin: 0; padding: 0; list-style: none; }
.sp-fx > li { font-size: 16.5px; line-height: 1.45; padding: 3px 0 3px 14px; position: relative; }
.sp-fx > li::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 1px; background: var(--c); transform: rotate(45deg); }
.sp-fx ul { margin: 2px 0 0; padding-left: 1.1em; font-size: var(--fs-lg); }
.sp-scale { margin: 10px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.sp-scale b { color: var(--ink); }
.sp-crit { margin-top: 10px; font-size: var(--fs-md); color: var(--muted); }
.sp-crit h4 { margin: 0; font: 600 var(--fs-sm)/1.3 var(--font-display); color: var(--muted); }
.sp-crit ul { margin: 4px 0 0; padding-left: 1.1em; }
.sp-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; }
.sp-clip { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--sunk); }
.sp-clip.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.sp-clip-icon { width: 48px; height: 48px; border-radius: var(--r-lg); opacity: .45; }
.sp-plate { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; }
.sp-area { margin: 0; }
.sp-area svg { display: block; width: 92px; height: 92px; }
.sp-area rect { fill: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.sp-area rect.can { fill: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.sp-area rect.hit { fill: var(--c); }
.sp-area rect.me { fill: var(--ink); }
.sp-area figcaption { margin-top: 4px; font-size: var(--fs-2xs); line-height: 1.3; color: var(--muted); }
.sp-specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.sp-specs dt { font-size: var(--fs-2xs); color: var(--muted); order: 2; }
.sp-specs div { min-width: 0; display: flex; flex-direction: column-reverse; }
.sp-specs dd { margin: 0; }
.sp-specs b { display: block; font: 700 1.25rem/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.sp-specs small { display: block; font-size: var(--fs-2xs); line-height: 1.3; color: var(--muted); }
.sp-ranks { grid-area: ranks; display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.sp-ranks-label { align-self: center; font-size: var(--fs-xs); color: var(--muted); margin-right: 6px; }
.sp-ranks button { flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink); cursor: pointer; font: inherit; }
.sp-ranks button span { font-size: var(--fs-2xs); color: var(--muted); }
.sp-ranks button b { font: 600 var(--fs-md)/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.sp-ranks button:hover { border-color: var(--line); }
.sp-ranks button[aria-pressed='true'] { background: var(--surface); border-color: var(--c); box-shadow: inset 0 -2px 0 var(--c); }
.sp-ranks button:focus-visible { outline-offset: 1px; }
@media (max-width: 760px) {
  .sp { grid-template-columns: 1fr; grid-template-areas: 'head' 'side' 'main' 'ranks'; padding: 14px; }
  .sp-side { margin-top: 12px; }
  .sp-ranks button { min-width: calc(33% - 4px); }
}

/* ---------- recipe views ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 0 0 14px; }
.view-switch a { padding: 4px 16px; text-decoration: none; color: var(--muted); font: 600 var(--fs-sm)/1.7 var(--font-display); }
.view-switch a + a { border-left: 1px solid var(--line); }
.view-switch a[aria-current] { background: var(--sunk); color: var(--ink); }
.article.wide { max-width: 72rem; }
.rm-info { position: sticky; top: calc(var(--top-h) + 8px); z-index: 3; min-height: 2.6em; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-md); }
.rm-info .btn { margin-left: .4em; padding: 1px 10px; font-size: var(--fs-sm); }
.rm-key { font-weight: 600; }
.rm-key.up { color: var(--water); } .rm-key.down { color: var(--copper); }
.rm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rm { position: relative; display: grid; grid-template-columns: repeat(5, 172px); column-gap: 56px; align-items: start; width: max-content; padding: 14px 16px 18px; }
.rm-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rm-edges path { fill: none; stroke: var(--ink); stroke-opacity: .07; stroke-width: 1; }
.rm.focus .rm-edges path { stroke-opacity: .025; }
.rm.focus .rm-edges path.up { stroke: var(--water); stroke-opacity: .75; stroke-width: 1.5; }
.rm.focus .rm-edges path.down { stroke: var(--copper); stroke-opacity: .75; stroke-width: 1.5; }
.rm-col { position: relative; display: flex; flex-direction: column; gap: 3px; }
.rm-head { font: 600 var(--fs-sm)/1.3 var(--font-display); color: var(--muted); margin: 0 0 6px; }
.rm-head small { font-weight: 400; }
.rm-node { display: flex; align-items: center; gap: 5px; width: 100%; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: var(--fs-sm)/1.35 var(--font-body); text-align: left; cursor: pointer; }
.rm-node:hover { border-color: var(--muted); }
.rm-node img.ico { width: 18px; height: 18px; margin: 0; flex: none; }
.rm-node span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-node small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rm.focus .rm-node { opacity: .32; }
.rm.focus .rm-node.sel, .rm.focus .rm-node.up, .rm.focus .rm-node.down { opacity: 1; }
.rm-node.up { border-color: var(--water); }
.rm-node.down { border-color: var(--copper); }
.rm-node.sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--focus); }

/* ---------- wallet button replica + funding flow (account page) ---------- */
/* The chip copies the game's HUD wallet button (world_chrome.css), so it keeps the game's own colours in both themes. */
.wallet-chip { display: inline-flex; align-items: center; gap: 12px; height: 38px; padding: 6px 10px; border: 1px solid #444a51; border-radius: 7px; background: #20252d; font: 700 13px/18px var(--font-body); white-space: nowrap; vertical-align: middle; }
.wallet-chip > span { display: inline-flex; align-items: center; gap: 6px; }
.wallet-chip .wc-sui { color: #8cc8f4; }
.wallet-chip .wc-kares { color: #e3bd77; }
.wallet-chip .wc-icon { width: 16px; height: 16px; flex: none; }

.flow { list-style: none; margin: 1.4em 0; padding: 0; counter-reset: flow; }
.flow-step { position: relative; counter-increment: flow; padding: 0 0 var(--sp-5) 44px; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.flow-step::before { content: counter(flow); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--copper); color: var(--on-fill); font: 700 var(--fs-md)/30px var(--font-display); text-align: center; }
.flow-step:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 4px; border-left: 2px solid var(--line); }
.flow-step > b { font-family: var(--font-display); }
.flow-step > span { color: var(--muted); font-size: var(--fs-md); }
.flow-fork > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2); width: 100%; }
.flow-fork > ul > li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-md); }
.flow-fork > ul > li span { color: var(--muted); }

/* Add funds window replica: the game's dark window colours (account.css, tailwind.css) in both themes. */
.funds-window { max-width: 512px; margin: 1.4em 0 .5em; border: 1px solid #2c3540; border-radius: var(--r-md); background: #12121a; color: #e0e7e9; font: 400 14px/1.4 var(--font-body); overflow: hidden; }
.funds-window .lucide { width: 16px; height: 16px; flex: none; }
.funds-window small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #899097; }
.fw-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #1e1e2e; background: #171720; color: #c8963c; }
.fw-head b { flex: 1; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #e8e4dc; }
.fw-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.fw-body h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c8963c; }
.fw-body p { margin: 0 0 10px; font-size: 11px; color: #899097; }
.fw-address { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px; border: 1px solid #aab98a4d; border-radius: 5px; background: #101f2b; color: #d2c397; }
.fw-address span { flex: 1; min-width: 0; font: 11px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.fw-address > .lucide:first-child { color: #c8963c; opacity: .6; width: 14px; height: 14px; }
.fw-dim { opacity: .4; }
.fw-ok { color: #34d399; }
.fw-balance { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.fw-balance b { font: 600 15px ui-monospace, monospace; }
.fw-from { display: flex; flex-direction: column; gap: 8px; }
.fw-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid #ffffff1a; border-radius: 5px; background: linear-gradient(160deg, #222930, #181c22); }
.fw-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.fw-row small { letter-spacing: normal; text-transform: none; font-weight: 400; font-size: 12px; }
.fw-row em { font-style: normal; font-size: 12px; color: #8abde1; }
.fw-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #2a313a; font-weight: 700; }
.fw-card { border-top: 1px solid #1e1e2e; padding-top: 16px; }
.fw-card h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 400; color: #899097; }
.fw-card > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 8px; }
.fw-card span { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; border: 1px solid #79868b55; border-radius: 6px; background: #18232b; color: #cbd4d7; font-size: 12px; }
.fw-card span .lucide { width: 12px; height: 12px; }
.funds-window.fw-solo { padding: 12px; }
.fw-note { margin: -8px 0 0 !important; padding: 12px; border: 1px solid #c8963c40; border-radius: 4px; background: #c8963c0d; color: #c8963c !important; font-size: 12px !important; }

/* The wallet button's popup (WalletCard.tsx, app_layout.css), game colours in both themes. */
.wallet-pop { display: flex; flex-direction: column; gap: 10px; width: min(330px, 100%); padding: 12px; border: 1px solid #2c3540; border-radius: var(--r-md); background: #12121a; color: #e0e7e9; font: 400 14px/1.35 var(--font-body); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.wallet-pop .lucide { width: 16px; height: 16px; flex: none; }
.wp-id { display: flex; align-items: center; gap: 8px; }
.wp-id > .lucide:first-child { width: 20px; height: 20px; color: #c9af7b; }
.wp-id b { flex: 1; color: #e2cfaa; font-size: 14px; }
.wp-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wp-bal > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 3px 8px; align-items: center; padding: 10px; border: 1px solid #ffffff0d; border-radius: 5px; background: #171c22; }
.wp-bal :is(svg, img) { grid-row: span 2; width: 24px; height: 24px; color: #82b7d8; }
.wp-bal span { font-size: 11px; color: #99aab9; }
.wp-bal b { font-size: 18px; color: #e6dfce; font-variant-numeric: tabular-nums; }
.wp-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 5px 12px; border: 1px solid #141620; border-radius: 4px; background: #343b44; color: #e0e7e9; font-size: 13px; }
.wp-primary { background: #dea855; border-color: #4c371d; color: #231e19; box-shadow: inset 0 1px #ffe3a566, inset 0 -2px #754e3266, 0 0 0 3px var(--copper); }
.wp-gas { display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid #ffffff12; font-size: 11px; color: #a0a9b4; }
.wp-gas b { color: #d1d8e0; font-weight: 400; }

/* Exchange → game address picture (account page). */
.send-diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); width: 100%; margin: var(--sp-2) 0; }
.send-diagram .sd-box { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.send-diagram .lucide { width: 28px; height: 28px; color: var(--copper); }
.send-diagram small { color: var(--muted); font-size: var(--fs-xs); }
.sd-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 7.5rem; text-align: center; }
.sd-arrow .lucide { color: var(--water); }
@media (max-width: 520px) {
  .send-diagram, .send-diagram.sd-bridge { grid-template-columns: 1fr; }
  .sd-arrow .lucide { transform: rotate(90deg); }
}
.flow-step > p { margin: 0; }
.flow-step > h4 { margin: var(--sp-2) 0 0; font-family: var(--font-display); }
.send-diagram.sd-bridge { grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-2); }
.sd-bridge .sd-arrow { max-width: 4.5rem; }
/* A smaller numbered flow nested inside a step. */
.flow.flow-sub { margin: var(--sp-2) 0 0; width: 100%; }
.flow-sub .flow-step { padding: 0 0 var(--sp-3) 34px; gap: 2px; }
.flow-sub .flow-step::before { width: 24px; height: 24px; line-height: 24px; font-size: var(--fs-sm); background: var(--water); }
.flow-sub .flow-step:not(:last-child)::after { left: 11px; top: 26px; }
.flow-sub .flow-step > b { font-family: var(--font-body); }
@media (max-width: 520px) {
  .send-diagram.sd-bridge { grid-template-columns: 1fr; }
  .sd-bridge .sd-arrow { max-width: none; }
}

/* ---------- class overview (Create your character) ---------- */
.class-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-3); margin: 1.4em 0; }
.co-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.co-card:hover { border-color: var(--copper); }
.co-pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.co-pics .portrait { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: var(--r-md); background: var(--art-glow); }
.co-card h3 { margin: 0; font: 700 18px/1.2 var(--font-display); }
.co-card h3 a { color: var(--ink); text-decoration: none; }
.co-card h3 span { font: 400 var(--fs-md) var(--font-body); color: var(--muted); }
.co-card p { margin: 0; }
.co-sum { font-size: var(--fs-md); color: var(--muted); }
.co-start { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.co-start small { color: var(--muted); font-size: var(--fs-xs); }
.co-start span { display: flex; align-items: center; gap: 6px; }
.co-start .ico { width: 20px; height: 20px; border-radius: var(--r-xs); }
.co-more { margin-top: auto; font-size: var(--fs-md); font-weight: 700; }
.co-split { display: flex; flex-direction: column; gap: 5px; }
.co-start small { color: var(--muted); font-size: var(--fs-xs); }
.co-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--sunk); }
.co-bar span { background: var(--c); border-right: 1px solid var(--surface); }
.co-split p { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-md); }
.co-split p > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.co-split p b { color: var(--ink); }

/* ---------- drop flow: mob → drop → crafted tool (First hour) ---------- */
.drop-flow { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 1.2em 0; }
.df-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.df-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.df-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 7.5rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-align: center; text-decoration: none; }
a.df-card:hover { border-color: var(--copper); }
.df-card b { font-size: var(--fs-md); }
.df-card small { color: var(--muted); font-size: var(--fs-xs); }
.df-art { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-md); background: radial-gradient(circle at 50% 60%, var(--copper-soft), transparent 70%); }
.df-none { color: var(--muted); font-size: var(--fs-sm); }
.df-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--water); text-align: center; }
.df-arrow .lucide { width: 22px; height: 22px; }
.df-arrow small { max-width: 6.5rem; color: var(--muted); font-size: var(--fs-xs); }
.df-join { align-self: center; }
.drop-flow > .df-card { border-color: var(--copper); border-width: 2px; }
@media (max-width: 640px) {
  .drop-flow { grid-template-columns: 1fr; justify-items: center; }
  .df-join .lucide { transform: rotate(90deg); }
  .df-card { min-width: 0; width: 100%; padding: var(--sp-2); }
  .df-rows, .df-row { width: 100%; }
}

/* Zone grid: terrain render with the world map's zone lines, labels and city box on top. */
.zone-grid { margin: 1.2em 0; }
.zg-map { position: relative; max-width: 640px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--line); }
.zg-map img { display: block; width: 100%; height: auto; }
.zg-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); }
.zg-cell { border: 1px solid rgba(200, 150, 60, 0.55); padding: 3px 5px; font: 600 clamp(9px, 1.6vw, 12px) / 1 var(--font-mono, ui-monospace, monospace); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.zg-cell.origin { background: rgba(255, 255, 255, 0.14); }
.zg-city { position: absolute; border: 2px solid rgba(245, 196, 92, 0.95); box-shadow: 0 0 8px rgba(245, 196, 92, 0.8); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; pointer-events: none; }
.zg-city b { background: rgba(20, 16, 10, 0.75); color: #f5c45c; font-size: clamp(10px, 1.8vw, 13px); padding: 1px 6px; border-radius: 4px; }
.zg-gate { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #58ff94; border: 2px solid #0b3; box-shadow: 0 0 6px #58ff94; font-size: 0; }
.zone-grid figcaption { max-width: 640px; margin: 8px auto 0; }
.cost-axis { margin-bottom: 0; font-size: var(--fs-2xs); color: var(--muted); }
.cost-axis > div { position: relative; height: 1.4em; }
.cost-axis b { position: absolute; transform: translateX(-50%); font-weight: 600; }
.cost-axis b:first-child { transform: none; }
.cost-axis b:last-child { transform: translateX(-100%); }

/* Spawn map on mob pages: terrain render, zones the mob can't use dimmed, its zones outlined. */
.spawn-map { margin: 1.2em 0; }
.sm-map { position: relative; max-width: 560px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--line); }
.sm-map img, .sm-map svg { display: block; width: 100%; height: auto; }
.sm-map svg { position: absolute; inset: 0; height: 100%; }
.sm-dim { fill: rgba(5, 5, 8, 0.6); shape-rendering: crispEdges; }
.sm-hit { fill: none; stroke: rgba(255, 211, 107, 0.7); stroke-width: 0.05; }
.sm-city { fill: none; stroke: rgba(245, 196, 92, 0.95); stroke-width: 0.12; }
.sm-gate { fill: #58ff94; stroke: #0b3; stroke-width: 0.08; }
.sm-label { position: absolute; transform: translate(-50%, 4px); background: rgba(20, 16, 10, 0.75); color: #f5c45c; font-size: var(--fs-2xs); padding: 1px 6px; border-radius: 4px; }
.spawn-map figcaption { max-width: 560px; margin: 8px auto 0; font-size: var(--fs-sm); color: var(--muted); }
.df-tail { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.df-tail .df-card:last-child { border-color: var(--copper); border-width: 2px; }