/* The wiki (docs/WEBSITE.md "Wiki"): a reference book inside the site's dark world. Dense, quiet, fast to scan:
   a sticky section list on the left, working tables in the middle, an item's card on the right. Rarity is the only
   color beyond the site's own ember and amber (plus the ok green of a Yes and the cold-to-hot swatch of a reading). */
.wiki { --r1: #a39c8f; --r2: #7fa36a; --r3: #5d9bd6; --r4: #a879d8; --r5: #e0a33a; padding-block: 22px 90px; }
.wiki.wrap { max-width: 1480px; }
@media (min-width: 1800px) { .wiki.wrap { max-width: 1680px; } }   /* a full-HD screen gives the data tables the room to fit */
.wiki a { text-decoration: none; }
.wiki section { margin-top: 34px; }
.wiki section > p + p { margin-top: 10px; }   /* a table with two intro paragraphs (the Skills table) */
.wiki h2 { font-size: clamp(22px, 2.4vw, 30px); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 16px; scroll-margin-top: 120px; }
.wiki h3 { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .16em; color: var(--bone-dim); margin: 22px 0 10px; }
.wiki .k { font-family: var(--label); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); }
.wiki p a:not(.wchip), .wiki dd a:not(.wchip), .wiki td > a:not(.wname):not(.wchip), .wprose a { color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.wiki p a:not(.wchip):hover, .wiki dd a:not(.wchip):hover, .wprose a:hover { border-bottom-color: var(--amber); }
.wiki code { font-family: var(--mono); font-size: 13px; color: var(--bone-dim); background: var(--ground-3); padding: 2px 6px; }
.wiki kbd { font-family: var(--mono); font-size: 12.5px; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--ground-3); color: var(--bone); white-space: nowrap; }
.wnote { color: var(--bone-dim); font-size: 14.5px; margin-bottom: 12px; }
.wtable-wrap + .wnote, .wtable-wrap + noscript + .wnote { margin-top: 12px; }

/* top row: breadcrumb and search */
.wtop { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wcrumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--label); font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.wcrumbs a { color: var(--bone-dim); }
.wcrumbs a:hover { color: var(--bone); }
.wcrumbs span { color: var(--bone); }
.wcrumbs i { font-style: normal; color: var(--ash); }
.wsearch { position: relative; flex: 1 1 320px; max-width: 520px; }
.wsearch input { width: 100%; background: var(--ground-2); border: 1px solid var(--line-2); color: var(--bone); font: 500 15.5px var(--body); padding: 11px 46px 11px 14px; }
.wsearch input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent), 0 0 22px color-mix(in srgb, var(--amber) 18%, transparent); }
.wsearch > kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wsearch input:focus ~ kbd, .wsearch input:not(:placeholder-shown) ~ kbd { display: none; }
.wmore { margin-top: 6px; }
.wmore summary { cursor: pointer; width: fit-content; padding: 5px 12px; border: 1px solid var(--line-2); font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); list-style: none; }
.wmore summary::-webkit-details-marker { display: none; }
.wmore summary:hover { color: var(--bone); border-color: var(--amber); }
.wmore[open] summary { margin-bottom: 6px; }
.wres { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: #0b0908; border: 1px solid var(--line-2); max-height: min(70vh, 560px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
.wres a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--bone); }
.wres a[aria-selected='true'], .wres a:hover { background: var(--ground-3); }
.wres img { width: 36px; height: 36px; object-fit: contain; }
.wres b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wres em { font: 700 11.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); font-style: normal; }
.wres .none { padding: 14px; color: var(--bone-dim); }

/* layout */
.wgrid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 22px; }
.wside { position: sticky; top: 116px; max-height: calc(100vh - 132px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ground-3) transparent; }
.wside-in { display: grid; gap: 1px; padding-right: 6px; }
.wside h4 { font: 700 11.5px var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin: 18px 0 6px; }
.wside a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 10px; font-size: 14.5px; color: var(--bone-dim); border-left: 2px solid transparent; }
.wside a > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wside a .wi { width: 16px; height: 16px; color: var(--ash); transition: color .15s; }
.wside a:hover .wi, .wside a[aria-current] .wi { color: var(--amber); }
.wside a:hover { color: var(--bone); background: var(--ground-2); }
.wside a[aria-current] { color: var(--bone); border-left-color: var(--ember); background: var(--ground-2); }
.wside em { font: 400 12px var(--mono); color: var(--ash); font-style: normal; }
@media (max-width: 980px) {
    .wgrid { grid-template-columns: minmax(0, 1fr); }
    .wside { position: static; max-height: none; order: 2; border-top: 1px solid var(--line); padding-top: 10px; }
    .wside-in { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .wside h4 { grid-column: 1 / -1; }
}

/* headings */
.whead { display: grid; gap: 8px; }
.whead h1 { font-size: clamp(34px, 5vw, 62px); }
.whead .lede { color: var(--bone-dim); max-width: 78ch; font-size: 17px; }
.whead.hub h1 { font-size: clamp(48px, 8vw, 104px); }
.wstats { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 14px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.wstats div { background: var(--ground-2); padding: 12px 22px; display: grid; flex: 1 1 auto; }
.wstats b { font: 800 30px var(--display); }
.wstats span { font: 700 11.5px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }

/* tags and item chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-2); font: 600 13px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); background: var(--ground-2); }
.tag a { color: inherit; }
a.tag:hover { border-color: var(--amber); }
.tag.warn { border-color: color-mix(in srgb, var(--amber) 60%, transparent); color: var(--amber); }
.tag em { font-style: normal; color: var(--ash); font-family: var(--mono); font-weight: 400; }
.wchip { --rc: var(--r1); display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; background: var(--ground-2); border: 1px solid var(--line); border-left: 2px solid var(--rc); color: var(--bone); font-size: 14px; line-height: 1.2; transition: border-color .15s, background .15s; }
.wchip:hover { background: var(--ground-3); border-color: var(--rc); }
.wchip .ic { width: 30px; height: 30px; object-fit: contain; flex: none; }
.wchip .q { font: 400 13px var(--mono); color: var(--amber); }
.wchip .std { font: 700 10.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ok); font-style: normal; }
.chips.sm .wchip { font-size: 13px; padding-right: 8px; }
.chips.sm .wchip .ic { width: 24px; height: 24px; }
.r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); } .r5 { --rc: var(--r5); }
.rar { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--rc); white-space: nowrap; }
/* rarity reads by its word and its count of pips (1 to 5), not by color alone */
.rar i { display: inline-flex; gap: 3px; }
.rar i b { width: 6px; height: 6px; background: var(--rc); transform: rotate(45deg); box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 55%, transparent); }
.rar i b.o { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }

/* tables */
.wfilter { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.wfilter input { flex: 0 1 320px; background: var(--ground-2); border: 1px solid var(--line-2); color: var(--bone); font: 500 14.5px var(--body); padding: 8px 12px; }
.wfilter input:focus { outline: none; border-color: var(--amber); }
.wcount { font: 400 12.5px var(--mono); color: var(--ash); text-transform: uppercase; letter-spacing: .08em; }
.wtable-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); scrollbar-width: thin; }   /* relative: what sits inside (a screen-reader word) scrolls with the table, never widens the page */
.wtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.wtable th { position: sticky; top: 0; background: #0b0908; text-align: center; padding: 0; border-bottom: 1px solid var(--line-2); white-space: normal; vertical-align: bottom; }
/* a long title breaks into balanced lines instead of widening its column; the name column's title stays on one */
.wtable th button { all: unset; cursor: pointer; display: block; padding: 10px 10px; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); white-space: normal; text-wrap-style: balance; line-height: 1.35; }
.wtable th:first-child { white-space: nowrap; }
.wtable.plain th { padding: 10px 12px; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); white-space: normal; }
.wtable th button:hover, .wtable th button:focus-visible { color: var(--bone); }
.wtable th[aria-sort='ascending'] button::after { content: ' \25B2'; color: var(--ember); font-size: 9px; }
.wtable th[aria-sort='descending'] button::after { content: ' \25BC'; color: var(--ember); font-size: 9px; }
.wtable td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: center; }
/* Every value sits centred under its column title (owner 2026-10-25); the first column (the name, with its icon) reads
   from the left. Chip lists and bars in a cell centre the same way. */
.wtable th:first-child, .wtable td:first-child, .wtable th:first-child button { text-align: left; }
.wtable td:not(:first-child) .chips { justify-content: center; }
.wtable td .wchip, .wtable td:first-child { white-space: nowrap; }   /* a chip or a name never breaks word by word */
/* ...but a long name (a material, a rule) takes a second line at a sensible width instead of widening the table */
.wtable td:first-child .wname > span, .wtable td:first-child .wname > a, .wtable td:first-child .w0 { white-space: normal; max-width: 230px; text-wrap-style: balance; }
.wtable .w0 { display: inline-block; max-width: 300px; }
.wtable td:not(.num):not(:first-child) { min-width: 76px; }
.wtable tbody tr:hover { background: color-mix(in srgb, var(--ground-3) 70%, transparent); }
.wtable tbody tr:last-child td { border-bottom: 0; }
.wtable .num { text-align: center; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.wtable th.num button { text-align: center; }
.wtable th:not(:first-child) button { text-align: center; }
/* A block <button> doesn't stretch to its cell in Chrome: full width, or its centred text sits at the cell's left. */
.wtable th button { width: 100%; box-sizing: border-box; }
.wname { --rc: var(--r1); display: inline-flex; align-items: center; gap: 10px; color: var(--bone); min-width: 150px; }
.wname .ic { width: 40px; height: 40px; object-fit: contain; flex: none; background: var(--ground-2); border-bottom: 2px solid var(--rc); }
.wname span, .wname > a { display: grid; line-height: 1.25; }
.wname > a { color: var(--bone); }
.wname b { font-weight: 600; }
.wname small { color: var(--bone-dim); font-size: 12.5px; }
a.wname:hover b, .wname > a:hover b, .wname > a:focus-visible b { color: var(--amber); }
.wtable.recipes-t td { vertical-align: top; }

/* item page */
.witem { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; margin-top: 22px; }
.witem .wbody { order: 1; min-width: 0; }
.witem .wbody > :first-child { margin-top: 0; }
.wbox { --rc: var(--r1); order: 2; position: sticky; top: 116px; background: var(--ground-2); border: 1px solid var(--line); border-top: 3px solid var(--rc); }
.wbox-img { display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 68%), #0b0908; border-bottom: 1px solid var(--line); }
.wbox-img img { width: min(100%, 256px); height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)); }
.wbox h2 { font-size: 24px; padding: 14px 16px 12px; margin: 0; border-bottom: 1px solid var(--line); }
.wbox .wkv { padding: 6px 16px 12px; }
@media (max-width: 1180px) { .witem { grid-template-columns: minmax(0, 1fr); } .wbox { position: static; order: 0; max-width: 460px; } }
.wdesc { font-family: var(--type); font-size: 17px; line-height: 1.65; color: var(--bone); padding: 16px 18px; background: var(--ground-2); border-left: 3px solid var(--ember); }
.wkv { display: grid; margin: 0; }
.wkv > div { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.wkv > div:last-child { border-bottom: 0; }
.wkv dt { font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.wkv dd { margin: 0; font-size: 15px; }
.wbody .wkv { max-width: 720px; }
.wbars { display: grid; gap: 9px; max-width: 720px; margin-bottom: 18px; }
.wbar { display: grid; grid-template-columns: 172px minmax(0, 1fr) 130px; gap: 14px; align-items: center; }
.wbar span { font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.wbar i { height: 8px; background: var(--ground-3); display: block; }
.wbar b { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-deep), var(--ember)); }
.wbar em { font: 400 13.5px var(--mono); font-style: normal; text-align: right; }
@media (max-width: 560px) { .wbar { grid-template-columns: 118px minmax(0, 1fr) 84px; gap: 8px; } }
.ring { margin-top: 14px; display: grid; gap: 8px; }
.ring:first-child { margin-top: 0; }
.recipes { display: grid; gap: 14px; }
.recipe { border: 1px solid var(--line); background: var(--ground-2); padding: 14px 16px; }
.rneed { display: flex; flex-wrap: wrap; gap: 6px; }
.rmk { color: var(--bone-dim); margin-bottom: 8px; }
.rout { margin-bottom: 10px; }

/* tiles */
.wtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; padding: 1px; }
.wtile { outline: 1px solid var(--line); }
.wtile { position: relative; background: var(--ground-2); padding: 16px 18px; display: grid; gap: 4px; align-content: start; color: var(--bone); transition: background .15s; }
.wtile:hover { background: var(--ground-3); }
.wtile:hover b { color: var(--amber); }
.wtile b { font: 700 18px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.wtile span { color: var(--bone-dim); font-size: 14px; line-height: 1.45; }
.wtile em { font: 400 12px var(--mono); color: var(--ash); font-style: normal; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.wtile.pic { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
.wtile.pic .tp { grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.wtoc { margin: 18px 0 0; }
.wgls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 28px; }
.wgl { display: grid; gap: 4px; align-content: start; }
.wgl h3 { margin: 0 0 6px; }
.wgl a { color: var(--bone); font-size: 15px; padding: 2px 0; }
.wgl a:hover { color: var(--amber); }

/* guides */
.wguide { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 34px; align-items: start; margin-top: 24px; }
.wguide .wprose { order: 1; min-width: 0; max-width: 82ch; }
.wtocbox { order: 2; position: sticky; top: 116px; display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); background: var(--ground-2); }
.wtocbox a { color: var(--bone-dim); font-size: 14px; line-height: 1.35; }
.wtocbox a:hover { color: var(--amber); }
@media (max-width: 1180px) { .wguide { grid-template-columns: minmax(0, 1fr); } .wtocbox { position: static; order: 0; } }
.wprose > * + * { margin-top: 14px; }
.wprose h2 { margin-top: 34px; }
.wprose ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.wprose li::marker { color: var(--ember); }
.wprose strong { color: #fff; font-weight: 600; }
.wtip { padding: 12px 16px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--ground-2)); }
.wpn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.wpn a, .wpn > span { background: var(--ground-2); padding: 14px 18px; display: grid; gap: 2px; color: var(--bone); }
.wpn a:hover b { color: var(--amber); }
.wpn a.n { text-align: right; }
.wpn span span, .wpn a span { font: 700 11.5px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.wpn b { font: 700 17px var(--label); letter-spacing: .06em; text-transform: uppercase; }

/* ---- the visual layer (owner 2026-10-25): glyphs, meters, swatches and pictures --------------------------------------
   Glyphs are Tabler outline icons from the page's own inline sprite (wiki_render.py icon()), stroked in currentColor:
   amber on the dark ground, the same weight everywhere. Meters sit under the number they measure, scaled per column. */
.wsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wi { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* headings: a glyph plate before each section title; a page's own glyph beside its title */
.wh-i { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -6px 14px 0 0; vertical-align: middle; color: var(--amber);
    background: linear-gradient(180deg, var(--ground-3), var(--ground-2)); border: 1px solid var(--line-2); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--amber) 40%, transparent); }
.wh-i .wi { width: 20px; height: 20px; stroke-width: 1.6; }
.wh-i.pic .hp { width: 32px; height: 32px; object-fit: contain; }
.whead.gl { grid-template-columns: 72px minmax(0, 1fr); column-gap: 22px; }
.whead.gl > * { grid-column: 2; }
.whead.gl > .whead-g { grid-column: 1; grid-row: 1 / span 2; align-self: end; display: grid; place-items: center; width: 72px; height: 72px; color: var(--amber);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%), var(--ground-2); border: 1px solid var(--line-2); border-bottom: 2px solid var(--amber); }
.whead-g .wi { width: 38px; height: 38px; stroke-width: 1.4; }
.whead-g.pic .hp { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.whead-g.pic .hp.tg { display: grid; place-items: center; }
.whead.gl > .lede { grid-column: 1 / -1; }
@media (max-width: 560px) { .whead.gl { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; } .whead.gl > .whead-g { width: 52px; height: 52px; } .whead-g .wi { width: 28px; height: 28px; } }
.wprose h2::before { content: ''; display: inline-block; width: 9px; height: 9px; margin: 0 14px 0 2px; vertical-align: .18em; background: var(--ember); transform: rotate(45deg); box-shadow: 0 0 10px color-mix(in srgb, var(--ember) 60%, transparent); }
.wtocbox .k { display: flex; align-items: center; gap: 8px; }
.wtocbox .k .wi, .wgl h3 .wi { width: 16px; height: 16px; color: var(--amber); }
.wgl h3 { display: flex; align-items: center; gap: 9px; }

/* tags, stats and bars carry their glyph */
.tag .wi { width: 14px; height: 14px; color: var(--amber); }
.wkv dt { display: flex; align-items: center; gap: 9px; }
.wdi { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--amber); font-style: normal; }
.wdi .wi { width: 16px; height: 16px; }
.wbar span { display: flex; align-items: center; gap: 9px; }
.wbar span .wi { width: 15px; height: 15px; color: var(--amber); }
.wweb .wweb-pick button { display: inline-flex; align-items: center; gap: 8px; }
.wweb-pick .wi { width: 15px; height: 15px; color: var(--amber); }

/* tiles: a glyph plate wherever there is no picture; guides carry their topic glyph */
.wtile.pic .tp.tg { display: grid; place-items: center; color: var(--amber); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 70%); filter: none; }
.wtile.pic .tp.tg .wi { width: 34px; height: 34px; stroke-width: 1.4; }
.wtile.gl { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
.wtile.gl > * { grid-column: 2; }
.wtile.gl > .tg { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; color: var(--amber); background: var(--ground-3); border: 1px solid var(--line-2); }
.wtile.gl > .tg .wi { width: 22px; height: 22px; stroke-width: 1.6; }
.wtile:hover .tg { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }

/* table cells: Yes and No */
.yn { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.yn .wi { width: 15px; height: 15px; stroke-width: 2.4; }
.yn.y { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 50%, transparent); }
.yn.n { color: var(--ash); box-shadow: inset 0 0 0 1px rgba(232, 225, 211, .1); }
.yn.n.s { box-shadow: none; opacity: .7; }
/* meters: the number, and under it a hairline filled to its share of the column's largest */
.wm { --mc: var(--amber); display: inline-grid; justify-items: center; gap: 5px; width: 100%; min-width: 48px; max-width: 150px; white-space: nowrap; }
.wm::after { content: ''; width: 100%; height: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 45%, transparent), var(--mc)) 0 0 / var(--p) 100% no-repeat, rgba(232, 225, 211, .08); }
.wm.em { --mc: var(--ember); }
.wm.neg { --mc: #5d9bd6; }
.wtable td.mtr { min-width: 70px; }
.wtable .u { font: 600 11.5px var(--label); letter-spacing: .06em; color: var(--bone-dim); }
.wtable td.nw { white-space: nowrap; }
.wtable td:not(.prose) { text-wrap-style: balance; }   /* the style only: the shorthand would undo nowrap 
/* item chips inside a table cell are the compact size, so a row of them does not widen the table */
.wtable td:not(:first-child) .wchip { font-size: 13.5px; padding-right: 9px; }
.wtable td:not(:first-child) .wchip .ic { width: 26px; height: 26px; }
tr:hover .wm::after { background-color: rgba(232, 225, 211, .14); }
/* a °F reading: its swatch runs cold blue to ember hot */
.wtc { display: inline-flex; align-items: center; gap: 8px; }
.wtc::before { content: ''; width: 7px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent); }
/* Low / Normal / High: three pips and the word */
.wlv { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wlv i { width: 5px; height: 14px; background: rgba(232, 225, 211, .12); transform: skewX(-12deg); }
.wlv.l1 i:nth-child(-n+1), .wlv.l2 i:nth-child(-n+2), .wlv.l3 i:nth-child(-n+3) { background: var(--amber); }
.wlv span { margin-left: 8px; }
/* enumerations: a glyph before the word; in the name column a glyph plate where an item would show its picture */
.wen { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wen .wi { width: 16px; height: 16px; color: var(--amber); }
.wname .ic.gl { display: grid; place-items: center; color: var(--amber); border-bottom-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.wname .ic.gl .wi { width: 22px; height: 22px; stroke-width: 1.6; }
.wname .ic.rp { width: 64px; object-fit: contain; }
.wrimg { display: block; width: 112px; height: 63px; object-fit: contain; margin: 0 auto; }
.wtable th .th-i { display: block; width: 18px; height: 18px; margin: 0 auto 5px; color: var(--amber); }
/* prose columns (Notes, What it does): left-aligned, wrapping at a reading width; values and short labels stay centred */
.wtable th.prose, .wtable td.prose, .wtable th.prose button { text-align: left; }
.wtable td.prose:not(.num):not(:first-child) { white-space: normal; min-width: 260px; }
.wtable .pz { max-width: 52ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--bone) 88%, var(--bone-dim)); text-wrap-style: pretty; }
/* wide tables scroll inside their frame: the name column stays put, a fade on the right says there is more */
.wtable td:first-child, .wtable th:first-child { position: sticky; left: 0; z-index: 1; }
.wtable th:first-child { z-index: 3; }
.wtable td:first-child { background: var(--ground); }
.wtable tbody tr:hover td:first-child { background: color-mix(in srgb, var(--ground-3) 70%, var(--ground)); }
.wtable-wrap.scrolls td:first-child, .wtable-wrap.scrolls th:first-child { box-shadow: inset -1px 0 0 var(--line-2); }
.wtable-wrap.scrolls:not(.end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); }
@media (max-width: 640px) {
    .wname { min-width: 0; gap: 8px; }
    .wname .ic { width: 32px; height: 32px; }
    .wname .ic.rp { width: 48px; }
    .wtable td, .wtable th button { padding-inline: 9px; }
    .wtable td.prose { min-width: 200px; }
}

/* the skill web (data/skills.html "Skill web"): the game's board as one inline SVG that wiki.js draws, the tree picker
   above it, the chosen node's card beside it. On a phone the board keeps its size and pans sideways. */
.wweb { margin-top: 14px; container-type: inline-size; }
.wweb-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wweb-pick button { all: unset; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line-2); font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); background: var(--ground-2); }
.wweb-pick button:hover, .wweb-pick button:focus-visible { color: var(--bone); border-color: var(--amber); }
.wweb-pick button[aria-selected='true'] { color: var(--bone); border-color: var(--ember); background: var(--ground-3); box-shadow: inset 0 -2px 0 var(--ember); }
.wweb-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.wweb-board { overflow-x: auto; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--ember-deep) 30%, transparent), transparent 70%), #0b0908; scrollbar-width: thin; }
.wweb-board svg { display: block; width: 100%; min-width: 760px; height: auto; }
.wweb-detail { position: sticky; top: 116px; min-height: 120px; padding: 16px 18px; border: 1px solid var(--line); border-top: 3px solid var(--ash); background: var(--ground-2); }
.wweb.has-pin .wweb-detail { border-top-color: var(--ember); }
.wweb-detail h3 { margin: 6px 0 0; font-size: 20px; letter-spacing: .08em; color: var(--bone); }
.wweb-detail p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; }
.wweb-detail .wweb-ranks { margin-top: 4px; font: 400 13px var(--mono); color: var(--bone-dim); }
.wweb-detail .wweb-desc { font-family: var(--type); font-size: 15.5px; line-height: 1.6; color: var(--bone); padding: 10px 12px; background: var(--ground-3); border-left: 3px solid var(--ember); }
.wweb-way i { font-style: normal; color: var(--ash); }
.wweb-detail .wweb-choice { font-size: 14px; color: var(--bone-dim); padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--amber) 55%, transparent); }
.wweb-detail .wweb-choice b { color: var(--bone); }
.wweb-detail .wweb-choice.end { border-left-color: color-mix(in srgb, var(--ember) 65%, transparent); }
.wweb-wire .k { display: block; margin-bottom: 2px; }
.wweb-empty { color: var(--bone-dim); }
/* the card sits beside the board only when both fit; narrower than that (most laptops, every phone) it goes under */
@media (max-width: 1100px) { .wweb-stage { grid-template-columns: minmax(0, 1fr); } .wweb-detail { position: static; } }
@container (max-width: 1110px) { .wweb-stage { grid-template-columns: minmax(0, 1fr); } .wweb-detail { position: static; } }
.wweb .wt line { stroke: rgba(232, 225, 211, .07); stroke-dasharray: 2 6; }
.wweb .wt-t { fill: var(--bone-dim); font: 700 12px var(--label); letter-spacing: .3em; text-anchor: middle; }
.wweb .wt-r { fill: var(--ash); font: 600 10px var(--label); letter-spacing: .2em; text-transform: uppercase; text-anchor: middle; }
.wweb .wt-g { fill: var(--bone-dim); font: 600 9.5px var(--label); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.wweb .we rect { fill: rgba(216, 53, 42, .05); stroke: rgba(216, 53, 42, .4); stroke-width: 1; stroke-dasharray: 5 4; }
.wweb .we-t { fill: #e87a62; font: 700 12px var(--label); letter-spacing: .3em; text-anchor: middle; }
.wweb .ww { stroke: rgba(232, 225, 211, .14); stroke-width: 1.5; }
.wweb .ww.path { stroke: rgba(232, 225, 211, .85); stroke-width: 2; stroke-dasharray: 6 5; }
.wweb .wn { cursor: pointer; outline: none; }
.wweb .wn .rim { fill: rgba(232, 225, 211, .18); transition: fill .15s; }
.wweb .wn .core { fill: #15110e; }
.wweb .wn .tn { fill: var(--bone-dim); font: 700 15px var(--label); letter-spacing: .06em; text-anchor: middle; }
.wweb .wn .nn { fill: var(--bone-dim); font: 600 11.5px var(--label); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.wweb .wn .pip { fill: rgba(232, 225, 211, .38); transform: skewX(-25deg); transform-box: fill-box; transform-origin: center; }
.wweb .wn.sel .pip, .wweb .wn:hover .pip { fill: var(--amber); }
.wweb .wn:hover .rim, .wweb .wn:focus-visible .rim, .wweb .wn.path .rim { fill: rgba(232, 225, 211, .5); }
.wweb .wn.sel .rim { fill: var(--bone); }
.wweb .wn.sel .nn, .wweb .wn:hover .nn, .wweb .wn.path .nn { fill: var(--bone); }
.wweb .wn.sel .tn { fill: var(--amber); }
.wweb .wn.fork .rim { fill: color-mix(in srgb, var(--amber) 42%, transparent); }
.wweb .wn.fork .tn { fill: var(--amber); }
.wweb .wn.fork:hover .rim, .wweb .wn.fork.sel .rim, .wweb .wn.fork.path .rim { fill: var(--amber); }
.wweb .wn.end .rim { fill: rgba(216, 53, 42, .3); }
.wweb .wn.end:hover .rim, .wweb .wn.end.path .rim { fill: rgba(232, 125, 98, .6); }
.wweb .wn.cap .rim { fill: rgba(216, 53, 42, .45); }
.wweb .wn.cap .core { fill: #221210; }
.wweb .wn.cap .tn { fill: #e87a62; font-size: 18px; }
.wweb .wn.cap .nn { fill: #ff9a82; letter-spacing: .22em; }
.wweb .wn.cap:hover .rim, .wweb .wn.cap.sel .rim { fill: var(--ember); }
.wweb .wn.cap.sel .tn { fill: #fff; }

/* ---- pictures that open big (owner 2026-10-25: "click the image to enlarge it, and click the name to go to the wiki
   page"). A content picture is a button.wzoom (wiki_render.py zoom()); the name beside it is the link. ------------------ */
.wzoom { all: unset; position: relative; display: inline-grid; place-items: center; flex: none; cursor: zoom-in; border-radius: 1px; }
.wzoom img { transition: filter .15s, transform .15s; }
.wzoom:hover img { filter: brightness(1.18) drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 35%, transparent)); }
.wzoom:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wzoom:active img { transform: scale(.96); }
.wbox-img .wzoom { display: grid; }
.wres img.wide { object-fit: contain; }

/* ---- vehicle pages (wiki/vehicle/<model>.html): the render big, the spec card beside it, the class's other bodies --- */
.wvhero { margin: 0; position: relative; display: grid; gap: 8px; }
.wvhero .wzoom { display: block; width: 100%; padding: clamp(10px, 2.4vw, 26px) clamp(10px, 3vw, 36px) 6px; box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 66%), linear-gradient(180deg, #0b0908, var(--ground-2));
    border: 1px solid var(--line); border-bottom: 2px solid var(--amber); }
.wvhero img { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto; }
.wvhero .wzoom::after { content: ''; position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; opacity: .55; transition: opacity .15s;
    background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a33a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h4v4M14 10l6-6M8 20H4v-4M4 20l6-6M16 20h4v-4M14 14l6 6M8 4H4v4M4 4l6 6'/%3E%3C/svg%3E"), rgba(11, 9, 8, .7);
    border: 1px solid var(--line-2); }
.wvhero .wzoom:hover::after, .wvhero .wzoom:focus-visible::after { opacity: 1; }
.wvhero .wzoom:hover img { filter: none; }
.wvhero figcaption { font: 600 12.5px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.wveh .wbody > section:first-of-type { margin-top: 26px; }
.wvbox h2 { display: flex; align-items: center; gap: 10px; }
.wvbox h2 .wi { width: 22px; height: 22px; color: var(--amber); }
.wveh .wbody > section p + p { margin-top: 10px; }
.wveh .wbody > section p .wchip { vertical-align: middle; margin: 2px 2px; }
.wvcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; padding: 1px; }
.wvcard { outline: 1px solid var(--line); background: var(--ground-2); padding: 10px 12px 12px; display: grid; gap: 2px; color: var(--bone); transition: background .15s; }
.wvcard:hover { background: var(--ground-3); }
.wvcard:hover b { color: var(--amber); }
.wvcard .vc { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.wvcard b { font: 700 15px var(--label); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.wvcard span { color: var(--bone-dim); font-size: 13.5px; }
.wvcard em { font: 400 12px var(--mono); color: var(--ash); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) { .wvcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wvcard { padding: 8px; } }

/* ---- the lightbox (wiki.js): the page dims, the picture big and sharp with its name, X, arrows and a count ---------- */
html.wlb-on { overflow: hidden; }
.wlb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(6, 5, 4, .9); opacity: 0; transition: opacity .16s ease-out;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
.wlb[hidden] { display: none; }
.wlb.on { opacity: 1; }
.wlb-stage { display: grid; place-items: center; max-width: 100%; }
.wlb-fig { margin: 0; display: grid; gap: 12px; justify-items: center; transform: scale(.975); transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.wlb.on .wlb-fig { transform: none; }
.wlb-frame { position: relative; display: grid; place-items: center; max-width: 100%;
    background: radial-gradient(ellipse at 50% 56%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 70%); }
.wlb-frame img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .7)); }
.wlb-ph { filter: blur(6px) saturate(.8) !important; opacity: 0; transition: opacity .12s; }
.wlb.loading .wlb-ph { opacity: .6; }
.wlb-img { opacity: 1; transition: opacity .16s; }
.wlb.loading .wlb-img { opacity: 0; }
.wlb figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; width: min(100%, max(320px, 100%)); min-width: min(560px, 92vw);
    padding: 12px 16px; background: rgba(13, 11, 10, .92); border: 1px solid var(--line); border-left: 3px solid var(--amber); box-sizing: border-box; }
.wlb-txt { display: grid; gap: 2px; min-width: 0; }
.wlb-txt b { font: 800 clamp(20px, 2.4vw, 28px) / 1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--bone); }
.wlb-cap { font: 600 13px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.wlb-side { display: flex; align-items: center; gap: 16px; }
.wlb-n { font: 400 12.5px var(--mono); color: var(--ash); font-style: normal; letter-spacing: .08em; }
.wlb-go { font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); padding-bottom: 1px; }
.wlb-go:hover, .wlb-go:focus-visible { border-bottom-color: var(--amber); outline: none; }
.wlb-go[hidden] { display: none; }
.wlb-btn { all: unset; position: fixed; display: grid; place-items: center; width: 46px; height: 46px; cursor: pointer; color: var(--bone); background: rgba(21, 18, 15, .82);
    border: 1px solid var(--line-2); transition: border-color .15s, color .15s, background .15s; box-sizing: border-box; }
.wlb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wlb-btn:hover, .wlb-btn:focus-visible { color: var(--amber); border-color: var(--amber); background: rgba(29, 25, 21, .95); }
.wlb-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wlb-btn[hidden] { display: none; }
.wlb-x { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.wlb-prev, .wlb-next { top: 50%; margin-top: -23px; }
.wlb-prev { left: 14px; }
.wlb-next { right: 14px; }
@media (max-width: 700px) {
    .wlb { padding-inline: 0; }
    .wlb figcaption { min-width: 0; width: 100%; padding: 10px 14px; border-left-width: 0; border-top: 2px solid var(--amber); }
    .wlb-prev, .wlb-next { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); margin-top: 0; width: 42px; height: 42px; }
    .wlb-prev { left: auto; right: 64px; }
    .wlb-next { right: 14px; }
    .wlb-side { width: 100%; padding-right: 100px; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .wlb, .wlb-fig, .wlb-img, .wlb-ph { transition: none; } .wlb-fig { transform: none; } }
/* an item list in words, as chips: "A or B" keeps its "or", a lead ("Only the bigger packs:") stays as words */
.chips .wor { align-self: center; font: 600 12px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); font-style: normal; }
.chips .chl { align-self: center; color: var(--bone-dim); font-size: 13.5px; margin-right: 2px; }
.wveh .wbody > section > p + .chips, .wveh .wbody > section > .chips + p, .wveh .wbody > section > .wkv + p, .wveh .wbody > section > .chips + .wnote { margin-top: 12px; }
.wveh .wbody > section > p.wtip { margin-top: 14px; }
/* an item named inside a sentence: its picture and name inline, linking its page (a chip would break the line) */
.wil { display: inline-flex; align-items: baseline; gap: 5px; color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); white-space: nowrap; }
.wil img { width: 20px; height: 20px; object-fit: contain; align-self: center; }
.wil:hover { border-bottom-color: var(--amber); }
/* narrower than the card can sit beside it: the render first, then the spec card, then the sections */
@media (max-width: 1180px) {
    .witem.wveh { display: flex; flex-direction: column; gap: 22px; }
    .wveh .wbody { display: contents; }
    .wveh .wvhero { order: 0; }
    .wveh .wvbox { order: 1; max-width: none; width: 100%; align-self: stretch; box-sizing: border-box; }
    .wveh .wbody > section { order: 2; margin-top: 12px; }
}