/* Layout shared by both styles. Each style file sets the variables and its own touches. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); min-height: 100vh; display: flex; flex-direction: column; }
:lang(zh-CN) body, html[lang="zh-CN"] body { line-height: 1.7; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.15; margin: 0; }
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--panel); padding: .5rem 1rem; }
code, .q, .count, kbd, .hub-n { font-family: var(--mono); }
.note { color: var(--muted); font-size: .88rem; }
[hidden] { display: none !important; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: var(--top-bg); border-bottom: var(--rule); backdrop-filter: blur(6px); }
.top-in { max-width: 1180px; margin: 0 auto; padding: .6rem 1.25rem; display: flex; gap: 1rem; align-items: center; }
.brand { display: flex; gap: .55rem; align-items: center; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--accent); color: var(--on-accent); font: 800 .95rem/1 var(--head); letter-spacing: .02em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font: 700 1rem/1.1 var(--head); }
.brand-text i { font-style: normal; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.switches { margin-left: auto; display: flex; gap: .4rem; flex: none; }
.sw { font-size: .8rem; padding: .3rem .6rem; border: var(--rule); color: var(--ink); white-space: nowrap; }
.sw:hover { background: var(--panel); text-decoration: none; }
button.sw { background: none; font-family: inherit; line-height: inherit; cursor: pointer; }

/* Search */
.search { position: relative; flex: 1; max-width: 560px; }
.search input { width: 100%; font: inherit; color: var(--ink); background: var(--field); border: var(--field-border); padding: .55rem 2.4rem .55rem .8rem; outline: none; border-radius: var(--radius); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.search kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--muted); border: var(--rule); padding: 0 .35rem; border-radius: 3px; pointer-events: none; }
.instant { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel); border: var(--field-border); box-shadow: var(--shadow); max-height: min(70vh, 520px); overflow: auto; z-index: 30; border-radius: var(--radius); }
.instant a { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem .7rem; color: var(--ink); border-bottom: 1px solid var(--hair); }
.instant a:hover, .instant a.on { background: var(--hl); text-decoration: none; }
.instant img, .instant .ic-none { width: 2rem; height: 2rem; object-fit: contain; }
.instant .i-n small { display: block; color: var(--muted); font-size: .78rem; }
.instant .i-k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.instant .i-all { display: block; text-align: center; font-size: .85rem; color: var(--link); }
.instant .i-none { margin: 0; padding: .8rem; color: var(--muted); }

/* Icons and chips */
.ic { display: inline-grid; place-items: center; object-fit: contain; flex: none; image-rendering: auto; }
/* A small icon or letter badge in running text sits on the line: centred on the text, and its negative margins keep it from making the line taller. */
.ic-xs { width: 1.25em; height: 1.25em; vertical-align: -.3em; margin-block: -.15em; }
.ic-s { width: 1.9rem; height: 1.9rem; }
.ic-m { width: 2.75rem; height: 2.75rem; }
.ic-l { width: 5.5rem; height: 5.5rem; }
.ic-none { background: var(--hl); color: var(--muted); font: 700 .8rem var(--head); border-radius: var(--radius); }
.ic-l.ic-none { font-size: 2rem; }
.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem; }
.chips.inline { display: flex; flex-wrap: wrap; }
.chips.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.chip { display: flex; align-items: center; gap: .55rem; padding: .35rem .6rem .35rem .4rem; background: var(--chip); border: var(--chip-border); color: var(--ink); min-height: 2.75rem; border-radius: var(--radius); font: inherit; text-align: left; cursor: pointer; }
.chip:hover { border-color: var(--accent); text-decoration: none; background: var(--hl); }
.chip-t { display: flex; flex-direction: column; min-width: 6rem; flex: 1; }
.chip-n { font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.chip-k, .chip-alt { font-size: .7rem; color: var(--muted); letter-spacing: .04em; }
.chip .q { margin-left: auto; font-size: .8rem; color: var(--accent-ink); padding-left: .4rem; max-width: 55%; text-align: right; }
.who { display: block; font-size: .68rem; color: var(--muted); margin-left: auto; text-align: right; max-width: 7rem; line-height: 1.2; }
.crumbs { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); }
.count { font-size: .8em; color: var(--muted); font-weight: 400; }

/* Home */
.hero { padding: 3.5rem 0 2.5rem; max-width: 820px; margin: 0 auto; text-align: center; }
.hero-k { margin: 0 0 .7rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .22em; color: var(--accent-ink); }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); letter-spacing: -.01em; }
.search-hero { max-width: 680px; margin: 1.8rem auto .8rem; display: flex; }
.search-hero input { font-size: 1.15rem; padding: .95rem 1.1rem; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.search-hero button { font: 600 1rem var(--body); padding: 0 1.4rem; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; }
.search-hero .instant { text-align: left; }
.hero-n { margin: 0; font-size: .85rem; color: var(--muted); }
.popular { margin-top: 2rem; }
.popular h2, .sec-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); font-family: var(--body); font-weight: 600; margin-bottom: .8rem; }
.popular .chips { justify-content: center; }
.hubs { margin-top: 1rem; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem; }
.hub { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: .2rem .8rem; padding: 1rem 1.1rem; background: var(--panel); border: var(--card-border); color: var(--ink); border-radius: var(--radius); animation: rise .5s both; animation-delay: calc(var(--i) * 40ms); }
.hub:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.hub-t { font: 700 1.25rem var(--head); grid-row: 1; grid-column: 1; }
.hub-n { grid-row: 1; grid-column: 2; color: var(--accent-ink); font-size: .9rem; align-self: center; }
.hub-b { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hub { animation: none; } }

/* Entity page */
.scene { height: 200px; margin: -1.25rem -1.25rem 0; background-size: cover; background-position: center; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); }
.ent-h { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 0 1rem; }
.scene + .ent-h { margin-top: -4rem; position: relative; }
.ent-ic { background: var(--panel); border: var(--card-border); padding: .5rem; flex: none; border-radius: var(--radius); }
.ent-t h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.alt { margin: .15rem 0 0; color: var(--muted); font-size: 1.05rem; }
.desc { margin: .7rem 0 0; max-width: 68ch; }
.jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; position: sticky; top: 3.4rem; z-index: 5; padding: .45rem 0; background: var(--bg); }
.jump a { font-size: .85rem; padding: .3rem .7rem; border: var(--rule); color: var(--ink); border-radius: 999px; white-space: nowrap; }
.jump a span { color: var(--muted); font-family: var(--mono); font-size: .78rem; margin-left: .2rem; }
.ent-grid { display: grid; grid-template-columns: 270px 1fr; gap: 1.5rem; align-items: start; }
/* A page with no "At a glance" box gives the whole width to its content. */
.ent-grid.solo { grid-template-columns: 1fr; }
.card { background: var(--panel); border: var(--card-border); padding: 1rem 1.1rem; border-radius: var(--radius); }
.card h2 { font-size: 1rem; margin-bottom: .6rem; }
.facts { position: sticky; top: 7rem; }
.facts dl { margin: 0; }
.facts dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; border-bottom: 1px dashed var(--hair); font-size: .88rem; }
.facts dt { color: var(--muted); flex: none; }
.facts dd { margin: 0; min-width: 0; text-align: right; font-family: var(--mono); font-size: .84rem; overflow-wrap: anywhere; }
/* A fact naming several places reads as a line under its label, not a narrow right-aligned column. */
.facts dl div:has(dd a ~ a) { flex-direction: column; gap: .2rem; }
.facts dl div:has(dd a ~ a) dd { text-align: left; font-family: inherit; line-height: 1.5; }
.ent-main { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.bucket-h { display: flex; align-items: baseline; gap: .6rem; font-size: 1.45rem; margin: .4rem 0 .5rem; padding-bottom: .35rem; border-bottom: var(--rule-strong); }
.group { margin: 0 0 1rem; }
.group-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.group-h h2, .group-h h3 { font: 600 .95rem var(--body); }
.gfilter { margin-left: auto; font: inherit; font-size: 16px; padding: .25rem .5rem; background: var(--field); border: var(--field-border); color: var(--ink); width: 11rem; border-radius: var(--radius); }
.gfilter.big { margin-left: 0; width: 100%; max-width: 420px; font-size: .95rem; padding: .5rem .7rem; }
details.more { margin-top: .4rem; }
details.more > summary { cursor: pointer; font-size: .85rem; color: var(--link); padding: .3rem 0; }
details.more > .chips { margin-top: .4rem; }
.beyond { display: inline-block; margin-top: .5rem; font-size: .85rem; }
.unlock { list-style: none; margin: 0; padding: 0; }
.unlock li { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px dashed var(--hair); align-items: center; }
.ul-k { color: var(--muted); font-size: .88rem; }
.tags code { background: var(--hl); padding: .1rem .4rem; margin-right: .3rem; font-size: .8rem; }
.tags + .note { display: block; margin-top: .25rem; font-size: .76rem; }
.spoiler > summary { cursor: pointer; color: var(--link); }
.spoiler[open] > summary { margin-bottom: .5rem; }
.card > .spoiler { margin: .4rem 0 .6rem; padding: .5rem .7rem; border: 1px dashed var(--hair); border-radius: var(--radius); }
.etext small { display: block; color: var(--muted); font-size: .78rem; margin-bottom: .2rem; }
/* The story archive: lines of text, quotes and phone threads. */
.lore-fold { padding: .55rem .75rem; border: 1px dashed var(--hair); border-radius: var(--radius); }
.lore-fold h4 { margin: .9rem 0 .35rem; font-size: .9rem; }
.lore-table th { width: 11rem; white-space: nowrap; vertical-align: top; color: var(--muted); font-weight: normal; }
.lore-table td { line-height: 1.5; }
.lore-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.lore-cards h4 { margin: 0 0 .4rem; }
.lore-quotes { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.lore-thread { padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.lore-chat { margin: .5rem 0 0; padding-left: 1.6rem; display: grid; gap: .6rem; }
.lore-chat li { display: grid; gap: .15rem; line-height: 1.5; }
@media (max-width: 640px) { .lore-table th { width: auto; white-space: normal; } }
/* How a guide's system works: cards of rules, notes under a table, picks with what they do. */
.g-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); align-items: start; }
.g-cards > .card h4 { margin: 0 0 .5rem; font-size: .95rem; }
.g-cards > .card h5 { margin: .7rem 0 .3rem; font-size: .82rem; }
.g-cards > .card .tbl-w { margin: 0; }
.g-notes { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; }
/* A place: each counter, each container and each ground group as a card of inventory slots with their chances. */
.g-cards.boxes { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.g-cards > .card.box h4, .g-cards > .card.shelf h4 { display: flex; gap: .5rem; align-items: baseline; }
.g-cards > .card.box h4 .q, .g-cards > .card.shelf h4 .n { margin-left: auto; color: var(--muted); font-size: .82rem; }
.card.box .set + .set { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--hair); }
.card.box .set-h { margin: 0 0 .4rem; color: var(--muted); font-size: .8rem; }
.card.box :target, .card.box:target { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Plans and abilities: one card each with its price, tags, facts or levels, what it needs and what it opens. */
.chips.talents { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; align-items: stretch; }
.card.talent { display: flex; flex-direction: column; gap: .5rem; height: 100%; box-sizing: border-box; }
.card.talent.is-off, .card.talent.is-never { opacity: .8; }
.card.talent:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-head { display: flex; gap: .7rem; align-items: flex-start; }
.tl-head h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.tl-tags { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tl-tags .tag { margin-left: 0; }
.tl-tags .tag.is-who { color: var(--ink); }
.tl-cost { font: 600 .8rem var(--mono); color: var(--accent); white-space: nowrap; }
.tl-cost.is-pp { color: var(--ok); }
.tl-desc { margin: 0; }
.tl-facts { margin: 0; display: grid; gap: .2rem; font-size: .85rem; }
.tl-facts > div { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr; gap: .5rem; }
.tl-facts dt { color: var(--muted); }
.tl-facts dd { margin: 0; }
.tl-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-size: .85rem; }
.tl-levels li { display: grid; grid-template-columns: 2.6rem 2.2rem 1fr; gap: .4rem; align-items: baseline; }
.tl-levels .tl-cost { text-align: right; }
.tl-next { margin: 0; font-size: .85rem; }
.tl-more { display: inline; }
.tl-more > summary { display: inline; cursor: pointer; color: var(--muted); font-size: .8rem; }
.tl-more[open] > summary { display: none; }
#income h4 { margin: 1rem 0 .4rem; }
.card.talent .conds { font-size: .85rem; }
.fx-link.is-good { color: var(--ok); }
.fx-link.is-bad { color: var(--bad, #d9826a); }
.chips.moments { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.chips.moments .q { color: var(--ok); margin-left: .3rem; }

.g-step { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: .3rem; border-radius: 50%; background: var(--line); font-size: .78rem; }
.g-picks { margin: 0; padding-left: 1rem; display: grid; gap: .35rem; font-size: .86rem; line-height: 1.45; }
.en-waves { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; min-width: 15rem; }
.en-waves small { display: block; color: var(--muted); font-size: .76rem; }
.unlock-card { border-left: 4px solid var(--accent); }
/* Achievements: what unlocks one, and every one by the game's tabs and order. */
.unlock-conds { font-size: .95rem; }
.unlock-conds > li { padding: .35rem 0; border-bottom: 1px dashed var(--hair); }
.unlock-conds > li:last-child { border-bottom: 0; }
.unlock-conds .pk { margin: .35rem 0 0 .2rem; display: grid; grid-template-columns: 10rem 1fr; align-items: start; gap: .3rem .6rem; }
.unlock-conds .pk > b { padding-top: .55rem; }
@media (max-width: 640px) { .unlock-conds .pk { grid-template-columns: 1fr; } }
.ach-group + .ach-group { margin-top: 1.4rem; }
.ach-group > h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.ach-list { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.ach-row { display: flex; gap: .7rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--hair); border-radius: var(--radius); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.ach-row:hover { background: var(--hl); }
.ach-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ach-n { font-weight: 700; color: var(--link); }
.ach-d { font-size: .86rem; color: var(--muted); }
.ach-hidden > summary { padding: .5rem .6rem; border: 1px dashed var(--hair); border-radius: var(--radius); font-size: .88rem; }
.ach-hidden[open] > summary { margin-bottom: .3rem; }
.recipe-card .rc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.rc-arrow { font: 800 2rem var(--head); color: var(--accent); }
.rc-side h4 { font: 600 .74rem var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: .2rem 0 .4rem; }
.rc-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--hair); font-size: .88rem; }
.rc-meta b { color: var(--muted); font-weight: 500; margin-right: .3rem; }
.rawrow summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.rawrow table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .8rem; }
.rawrow th { text-align: left; color: var(--muted); font-weight: 500; padding: .2rem .8rem .2rem 0; vertical-align: top; white-space: nowrap; }
.rawrow td { font-family: var(--mono); overflow-wrap: anywhere; padding: .2rem 0; }
.rawrow tr { border-bottom: 1px dashed var(--hair); }

/* Browse, search */
.browse h1, .results h1, .cook h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.cats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.cat { font-size: .85rem; padding: .3rem .7rem; border: var(--rule); color: var(--ink); border-radius: 999px; }
.cat span { color: var(--muted); font-family: var(--mono); font-size: .75rem; }
.cat.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cat.on span { color: inherit; }
.cat-tools { display: grid; gap: .5rem; margin-bottom: 1rem; }
.cat-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
button.cat { font: inherit; font-size: .85rem; background: none; cursor: pointer; }
button.cat.on { background: var(--accent); }
.cat-lbl { font-size: .78rem; color: var(--muted); margin-right: .15rem; }
.cfilter { font: inherit; font-size: 16px; width: 100%; max-width: 420px; padding: .5rem .7rem; background: var(--field); border: var(--field-border); color: var(--ink); border-radius: var(--radius); }
.h1-alt { font-size: .55em; color: var(--muted); font-weight: 400; margin-left: .25rem; }
.catpage .chip .q:empty { display: none; }
.bgroup { content-visibility: auto; contain-intrinsic-size: auto 30rem; scroll-margin-top: 4rem; }
.bgroup + .bgroup { margin-top: 1.5rem; }
.bgroup h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.bgroup h2 .count { font-size: .8rem; }

/* Cooking */
.lede { margin: -.5rem 0 1.2rem; color: var(--muted); }
.cook-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: start; }
.cook-f { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: .8rem; }
.cook-f label > span, .cook-f legend { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .25rem; }
.cook-f input:not([type=checkbox]), .cook-f select { width: 100%; font: inherit; padding: .5rem .6rem; background: var(--field); border: var(--field-border); color: var(--ink); border-radius: var(--radius); }
.cook-f fieldset { border: 0; padding: 0; margin: 0; }
.cook-f .ck { display: flex; gap: .45rem; align-items: center; font-size: .9rem; padding: .15rem 0; }
.cook-f .note { margin: -.4rem 0 0; }
.chip.have { min-height: 2.2rem; padding: .2rem .5rem .2rem .3rem; }
.dishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .6rem; }
.dish { background: var(--panel); border: var(--card-border); padding: .7rem .8rem; border-radius: var(--radius); display: flex; flex-direction: column; gap: .5rem; }
.dish-h { display: flex; gap: .6rem; align-items: center; color: var(--ink); }
.dish-h:hover { text-decoration: none; }
.dish-h:hover b { text-decoration: underline; }
.dish-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dish-t small { color: var(--muted); font-size: .76rem; }
.badge { font-size: .7rem; padding: .15rem .45rem; border: var(--rule); color: var(--muted); white-space: nowrap; border-radius: 3px; }
.badge.go { background: var(--ok); color: var(--on-accent); border-color: var(--ok); }
.badge.good { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--bad, #d9826a); border-color: var(--bad, #d9826a); }
.dish-m { display: flex; gap: .8rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); flex-wrap: wrap; }
.dish-i { display: flex; flex-wrap: wrap; gap: .3rem; }
.need { display: inline-flex; gap: .3rem; align-items: center; font-size: .78rem; padding: .15rem .45rem .15rem .25rem; border: 1px dashed var(--hair); color: var(--muted); border-radius: 3px; }
.need.slot { padding-left: .45rem; font-style: italic; }
.need.ok { border-style: solid; border-color: var(--ok); color: var(--ink); background: var(--ok-bg); }

/* Footer */
.foot { border-top: var(--rule); color: var(--muted); font-size: .8rem; }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.25rem 2rem; display: grid; gap: .45rem; }
.foot-in p { margin: 0; max-width: 72ch; line-height: 1.5; }
.foot-about { color: var(--ink); }
.foot-mods a { font-weight: 600; }
.share { border-top: var(--rule); }
.share-in { max-width: 1180px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.share-h { margin-right: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent-ink); }
.share-b { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .8rem; font: 600 .82rem var(--body); color: var(--ink); background: transparent; border: 1px solid var(--hair); border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.share-b:hover { border-color: var(--accent); background: var(--hl); text-decoration: none; }
.share-b[hidden] { display: none; }

/* Phones */
@media (max-width: 760px) {
  main { padding: 1rem .9rem 3rem; }
  .top-in { flex-wrap: wrap; padding: .5rem .9rem; gap: .5rem .8rem; }
  .search-top { order: 3; flex-basis: 100%; max-width: none; }
  .search kbd { display: none; }
  .brand-text i { display: none; }
  .hero { padding: 1.8rem 0 1.5rem; }
  .search-hero input { font-size: 1rem; }
  .search-hero button { white-space: nowrap; padding: 0 1rem; }
  .hub-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hub { padding: .7rem .8rem; }
  .hub-t { font-size: 1.05rem; }
  .hub-b { font-size: .78rem; }
  .facts dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  /* A fact that holds links (trading posts, places) needs the full width. */
  .facts dl div:has(a) { grid-column: 1 / -1; }
  .ent-grid, .cook-grid { grid-template-columns: 1fr; }
  .facts, .cook-f { position: static; }
  .ent-h { gap: .8rem; }
  .ic-l { width: 4rem; height: 4rem; }
  .scene { margin: -1rem -.9rem 0; height: 140px; }
  .jump { top: 6.2rem; overflow-x: auto; flex-wrap: nowrap; }
  .chips { grid-template-columns: 1fr 1fr; }
  .chips.grid { grid-template-columns: 1fr 1fr; }
  .unlock li { grid-template-columns: 1fr; gap: .2rem; }
  .recipe-card .rc-row { grid-template-columns: 1fr; }
  .rc-arrow { transform: rotate(90deg); justify-self: center; }
  .gfilter { width: 8rem; }
  .sw, .jump a, .cat { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .lm-meta { margin-left: 1.4rem; }
  .codelist { columns: 1; }
}
@media (max-width: 420px) { .chips, .chips.grid, .facts dl { grid-template-columns: 1fr; } }
.rawrow h4 { font: 600 .8rem var(--mono); color: var(--muted); margin: .6rem 0 0; }
.rawrow { margin-bottom: 1rem; }

/* Tooltips: a dotted word explains itself on hover, focus or tap. */
.tip { border-bottom: 1px dotted var(--muted); cursor: help; }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tipbox { position: fixed; z-index: 60; max-width: min(22rem, calc(100vw - 1.5rem)); padding: .5rem .7rem; background: var(--ink); color: var(--bg); font: 400 .85rem/1.45 var(--body); border-radius: var(--radius); box-shadow: var(--shadow); pointer-events: none; white-space: pre-line; }
.tipbox[hidden] { display: none; }

/* Tables in page sections */
.tbl-w { overflow-x: auto; margin: 0 0 .4rem; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--panel); border: var(--card-border); border-radius: var(--radius); }
.tbl th, .tbl td { padding: .45rem .65rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.tbl thead th { font: 600 .74rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); white-space: nowrap; background: var(--hl); }
.tbl tbody th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl .n, .tbl .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.tbl tr:target, .tbl tr.on { background: var(--hl); box-shadow: inset 3px 0 0 var(--accent); }
.qtable { table-layout: fixed; min-width: 560px; }
.qtable thead td { background: var(--hl); border-bottom: 1px solid var(--hair); width: 9rem; }
.qcol { text-align: center !important; }
.qcol .ic { display: block; margin: 0 auto .25rem; }
.qcol.q3 { color: var(--accent-ink); }
.qtable td { text-align: center; }
.qtable th:target { box-shadow: inset 0 -3px 0 var(--accent); color: var(--ink); }
.qdesc { display: block; font-size: .8rem; color: var(--muted); text-align: left; }
.tiers td:nth-child(4) { min-width: 16rem; }

/* Page lead cards */
.lead-card { border-left: 4px solid var(--accent); display: flex; flex-direction: column; gap: .55rem; }
.lead-card > * { margin: 0; }
.lead-line { font-size: 1.02rem; }
/* A price set large (a plan's Survival Points): the heading face, as the counts on the home and mods pages use, so
   the digits stay open at size instead of the body face's heavy bold. */
b.big { font: 700 1.7em/1 var(--head); color: var(--accent-ink); letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; vertical-align: -.06em; margin-right: .1em; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.note.warn { color: var(--ink); background: var(--hl); border-left: 3px solid var(--accent); padding: .4rem .65rem; border-radius: 0 var(--radius) var(--radius) 0; }
.gnote { margin: -.2rem 0 .55rem; }
/* Item links in running text stay inline, so the icons in them never raise the line. */
.it { display: inline; margin-right: .55rem; white-space: nowrap; }
.it > * + * { margin-left: .2rem; }
.its { display: inline-flex; flex-wrap: wrap; gap: .25rem .1rem; }
.lk { display: inline; }
.lk > .ic-xs { margin-right: .3rem; }
.lk > .ic-none.ic-xs { font-size: .7em; width: 1.6em; height: 1.6em; line-height: 1; }
.stats { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.stat { font-size: .82rem; padding: .1rem .45rem; border: 1px solid var(--hair); border-radius: 3px; white-space: nowrap; }
.stat b { font-family: var(--mono); font-weight: 500; }
.stat.pos b { color: var(--ok); }
.stat.neg b { color: var(--bad, #d9826a); }
.use-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.plain, .routes, .rules, .conds { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.routes, .conds { list-style: none; padding-left: 0; }
.route-k, .cw { font: 600 .72rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: .35rem; }
.who-line { color: var(--muted); }
.who-all { color: var(--muted); font-size: .85rem; }
td .who, .routes .who { display: inline; margin: 0; text-align: left; max-width: none; font-size: .78rem; }
.tag { font-size: .7rem; padding: .1rem .4rem; border: var(--rule); color: var(--muted); border-radius: 3px; margin-left: .3rem; white-space: nowrap; }
.codelist { margin: 0; padding-left: 2.2rem; columns: 2 16rem; column-gap: 1.5rem; }
.codelist li { padding: .15rem 0; break-inside: avoid; font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.codelist li > * { font-family: var(--body); font-size: .9rem; }

/* Where an item drops: one row per place, its containers folded underneath. */
.lootmap { background: var(--panel); border: var(--card-border); border-radius: var(--radius); margin-bottom: .45rem; }
.lootmap > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .6rem .8rem; cursor: pointer; list-style: none; }
.lootmap > summary::-webkit-details-marker { display: none; }
.lootmap > summary::before { content: "+"; font-family: var(--mono); color: var(--muted); width: 1ch; }
.lootmap[open] > summary::before { content: "-"; }
.lootmap > summary:hover { background: var(--hl); }
.lm-place { font-weight: 700; }
.lm-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .84rem; color: var(--muted); }
.lm-meta b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.lootmap > :not(summary) { margin: 0 .8rem .7rem; }
.lootmap .tbl { background: var(--bg); }

/* Search: what tells same-named hits apart, records the game never uses, and the whole list of a kind. */
.chip-tag { font-size: .72rem; color: var(--ink); opacity: .8; }
.badge-unused { font-size: .66rem; padding: .05rem .35rem; border: 1px dashed var(--muted); color: var(--muted); border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; }
.chip .badge-unused { margin-left: .4rem; align-self: center; }
.go { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.go .btn { font-size: .88rem; padding: .35rem .8rem; border: var(--rule); border-radius: var(--radius); color: var(--link); }
.instant .i-t { display: block; color: var(--ink); opacity: .75; font-size: .74rem; }
.instant .i-near { margin: 0; padding: .45rem .7rem; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--hair); }
.unused-banner { margin: 0 0 1rem; }

/* Events: one tab per way it plays out, then a card per choice with what it gives and what it opens up. */
.vtabs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-end; }
.vtabs > input { position: absolute; opacity: 0; pointer-events: none; }
.vtabs > label { font-size: .86rem; padding: .35rem .8rem; border: var(--rule); border-radius: var(--radius) var(--radius) 0 0; color: var(--link); cursor: pointer; }
.vtabs > input:focus-visible + label { outline: 2px solid var(--accent); }
.vtabs > input:checked + label { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.vt-body { display: none; flex-basis: 100%; flex-direction: column; gap: 1.1rem; margin-top: .4rem; }
.vtabs > input:nth-of-type(1):checked ~ .vt-body:nth-of-type(1), .vtabs > input:nth-of-type(2):checked ~ .vt-body:nth-of-type(2), .vtabs > input:nth-of-type(3):checked ~ .vt-body:nth-of-type(3), .vtabs > input:nth-of-type(4):checked ~ .vt-body:nth-of-type(4), .vtabs > input:nth-of-type(5):checked ~ .vt-body:nth-of-type(5), .vtabs > input:nth-of-type(6):checked ~ .vt-body:nth-of-type(6), .vtabs > input:nth-of-type(7):checked ~ .vt-body:nth-of-type(7), .vtabs > input:nth-of-type(8):checked ~ .vt-body:nth-of-type(8), .vtabs > input:nth-of-type(9):checked ~ .vt-body:nth-of-type(9), .vtabs > input:nth-of-type(10):checked ~ .vt-body:nth-of-type(10), .vtabs > input:nth-of-type(11):checked ~ .vt-body:nth-of-type(11), .vtabs > input:nth-of-type(12):checked ~ .vt-body:nth-of-type(12) { display: flex; }
.vtabs.stack > input, .vtabs.stack > label { display: none; }
.vtabs.stack > .vt-body { display: flex; }
.wtags { display: flex; flex-wrap: wrap; gap: .35rem; }
.wtag { font-size: .84rem; padding: .15rem .55rem; border: 1px solid var(--hair); border-radius: 3px; }
.wtag b { font-family: var(--mono); font-weight: 500; }
.when-card h3.cw { margin: .2rem 0 .3rem; }
.etext, .ctext { white-space: pre-line; margin: 0 0 .6rem; }
.ctext { color: var(--muted); font-size: .88rem; margin: .4rem 0 0; }
.choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.choices.nested { grid-template-columns: 1fr; margin-top: .6rem; padding-left: .7rem; border-left: 2px solid var(--hair); }
.choice { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.choice.is-default { border-color: var(--accent); }
.choice-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font: 600 .95rem var(--body); margin: 0; }
.choice-needs .conds { margin-top: .2rem; font-size: .88rem; }
.conds .is-not { color: var(--ink); }
.oc h5, .task h5 { font: 600 .72rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: .2rem 0 .3rem; }
.oc .stats { margin: 0 0 .35rem; }
.oc-l { margin: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.oc-l > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; align-items: baseline; }
.oc-l dt { color: var(--muted); font-size: .8rem; }
.oc-l dd { margin: 0; min-width: 0; }
.pick { display: inline-block; padding: 0 .35rem; border: 1px dashed var(--muted); border-radius: 3px; font-size: .86em; color: var(--ink); margin: 0 .15rem; }
.flag { font-style: italic; }
.here { font-style: italic; color: var(--muted); }
.via { white-space: normal; }
.fx { margin-right: .5rem; }
.fx.is-good a, .fx.is-good { color: var(--ok); }
.fx.is-bad a, .fx.is-bad { color: var(--bad, #c4574a); }
.fx-line { font-size: .86rem; line-height: 1.6; }
details.more-inline { display: inline; }
details.more-inline > summary { display: inline; cursor: pointer; color: var(--link); font-size: .85rem; }
details.more-inline[open] > summary { display: block; }
/* Endings guide */
.end-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; margin: 1rem 0; }
@media (max-width: 860px) { .end-top { grid-template-columns: 1fr; } }
.end-people { list-style: none; padding-left: 0; }
.end-people > li, .endings ol.plain > li { margin: .35rem 0; }
.endings ol.plain { padding-left: 1.2rem; }
.end-sec { margin: 1.6rem 0 .6rem; }
.end-list { display: flex; flex-direction: column; gap: 1rem; }
.end-card { scroll-margin-top: 4.5rem; }
.end-card:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.end-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.end-h h2 { margin: 0; }
.end-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9rem; color: var(--muted); }
.end-meta b { color: var(--ink); }
.end-steps { counter-reset: step; list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.end-steps > li { counter-increment: step; position: relative; padding-left: 2.1rem; }
.end-steps > li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.end-steps h3 { margin: 0 0 .3rem; font-size: 1rem; }
.end-steps h4 { margin: .6rem 0 .2rem; font-size: .9rem; color: var(--muted); }
.end-steps p { margin: .25rem 0; }
.end-matrix td:not(:first-child), .end-matrix th:not(:first-child) { text-align: center; }
.end-matrix td:last-child, .end-matrix th:last-child { text-align: left; }
.end-matrix a.yes { font-weight: 700; color: var(--ok); text-decoration: none; }

h3.sub { margin: .9rem 0 .25rem; font: 600 .92rem var(--body); }

/* Sortable tables */
.tbl thead th.sort { cursor: pointer; user-select: none; }
.tbl thead th.sort:hover { color: var(--ink); }
.tbl thead th.sort::after { content: " \2195"; opacity: .35; }
.tbl thead th[aria-sort="ascending"]::after { content: " \25B2"; opacity: 1; color: var(--accent); }
.tbl thead th[aria-sort="descending"]::after { content: " \25BC"; opacity: 1; color: var(--accent); }
.verdict { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.verdict.v-ok { color: var(--ok); }
.verdict.v-dark { color: var(--muted); }
.verdict.v-frost { color: var(--bad, #d9826a); }
.tbl.verdicts td:not(:first-child), .tbl.verdicts th:not(:first-child) { text-align: center; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.h1-tag { font-size: .45em; font-weight: 500; vertical-align: middle; }

/* Pictures: scenes, faces, slots, tags (wave 2) */
.hero.has-scene { max-width: none; padding-inline: 1.25rem; border-radius: var(--radius); background: linear-gradient(color-mix(in srgb, var(--bg) 62%, transparent), var(--bg)), var(--scene) center / cover no-repeat; }
.hero.has-scene > * { max-width: 820px; margin-inline: auto; }
.hub { grid-template-columns: 3.5rem 1fr auto; }
.hub-pic { grid-row: 1 / span 2; grid-column: 1; width: 3.5rem; height: 3.5rem; align-self: center; display: grid; place-items: center; border-radius: var(--radius); background: var(--hl); overflow: hidden; }
.hub-pic img { width: 100%; height: 100%; object-fit: contain; }
.hub-pic.cover img { object-fit: cover; }
.hub-t { grid-column: 2; }
.hub-n { grid-column: 3; }
.hub-b { grid-column: 2 / -1; }
.hubs.pics { margin-top: 2rem; }
.pic-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pic-grid.inv { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pic-grid.mats { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.slot:not(.need) { --s: 56px; position: relative; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); background: var(--hl); border: var(--card-border); border-radius: var(--radius); overflow: hidden; }
/* The picture is contained in its square whatever its own size. */
.slot:not(.need) > img { position: absolute; inset: 0; margin: auto; width: 82%; height: 82%; max-width: 82%; max-height: 82%; object-fit: contain; }
.slot .n { position: absolute; right: .2rem; bottom: .1rem; font: 600 .7rem var(--mono); color: var(--ink); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); }
.pic-inv { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem; color: var(--ink); text-align: center; font-size: .82rem; line-height: 1.25; border-radius: var(--radius); }
.pic-mat { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem .35rem; background: var(--panel); border: var(--card-border); color: var(--ink); border-radius: var(--radius); }
.pic-mat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pic-mat small { color: var(--muted); font-size: .75rem; }
.pic-inv:hover, .pic-mat:hover, .pic-scene:hover, .pic-face:hover, .pic-char:hover { text-decoration: none; border-color: var(--accent); }
.pic-inv:hover { background: var(--hl); }
.chips.scenes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.pic-scene { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 400 / 299; padding: .55rem .65rem; overflow: hidden; color: #fff; background: var(--hl); border: var(--card-border); border-radius: var(--radius); }
.pic-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic-scene > img.pin { inset: auto; top: 18%; left: 50%; width: 45%; height: auto; transform: translateX(-50%); object-fit: contain; }
.pic-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .78)); }
.pic-scene > b, .pic-scene > small { position: relative; z-index: 1; }
.pic-scene > b { font: 700 1rem var(--head); text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
.pic-scene > small { font-size: .75rem; opacity: .88; }
.pic-scene > .pic-tag { position: absolute; z-index: 1; top: .45rem; right: .45rem; }
.pic-scene > .pic-blank { position: absolute; inset: 0; }
.chips.faces { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pic-face, .pic-char { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .5rem .7rem; height: 100%; text-align: center; color: var(--ink); background: var(--panel); border: var(--card-border); border-radius: var(--radius); }
.pic-face-pic { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: .2rem; overflow: hidden; border-radius: 50%; background: var(--hl); }
.pic-face-pic img { width: 100%; height: 100%; object-fit: cover; }
.pic-face b, .pic-char b { font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.pic-face small { color: var(--muted); font-size: .75rem; }
.pic-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin-top: .2rem; }
.pic-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font: 700 1.6rem var(--head); }
.pic-tag { font-style: normal; font-size: .68rem; padding: .08rem .4rem; border: var(--rule); color: var(--muted); background: var(--panel); border-radius: 3px; white-space: nowrap; }
.pic-tag.shop { color: var(--accent-ink); border-color: var(--accent); }
.pic-tag.on { color: var(--ok); border-color: var(--ok); }
.pic-tag.off { border-style: dashed; }
.chip .badge { margin-left: auto; align-self: center; }
.chip .chip-tag + .badge { margin-left: .4rem; }
.hubs.world { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hubs.world .sec-h a { color: inherit; }
.hubs.world .chips.scenes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.hubs.world .chips.faces { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
@media (max-width: 760px) {
  .hero.has-scene { background-image: linear-gradient(color-mix(in srgb, var(--bg) 62%, transparent), var(--bg)), var(--scene-sm, var(--scene)); }
  .hub { grid-template-columns: 2.6rem 1fr auto; }
  .hub-pic { width: 2.6rem; height: 2.6rem; }
  .hubs.world { grid-template-columns: 1fr; }
  .chips.scenes, .hubs.world .chips.scenes { grid-template-columns: 1fr 1fr; }
  .chips.faces, .hubs.world .chips.faces { grid-template-columns: repeat(3, 1fr); }
  .pic-grid.inv { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .pic-grid.mats { grid-template-columns: 1fr 1fr; }
  .pic-face-pic { width: 64px; height: 64px; }
}
@media (max-width: 420px) {
  .hub { grid-template-columns: 1fr auto; }
  .hub-pic { display: none; }
  .hub-t { grid-column: 1; }
  .hub-n { grid-column: 2; }
  .hub-b { grid-column: 1 / -1; }
  .chips.faces, .hubs.world .chips.faces { grid-template-columns: 1fr 1fr; }
  .pic-grid.mats { grid-template-columns: 1fr; }
}

/* Record pictures: the header slot, the quality row, ingredient slots */
.ent-ic.has-slot { padding: 0; background: none; border: 0; }
.ent-slot { --s: 168px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 28%, transparent), var(--panel) 70%); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .75rem; }
.q-row-h { margin-right: .3rem; font: 600 .74rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.q-pick { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem .2rem .35rem; font-size: .8rem; color: var(--ink); background: var(--panel); border: var(--card-border); border-left: 3px solid var(--q, var(--hair)); border-radius: var(--radius); }
.q-pick img { width: 20px; height: 20px; object-fit: contain; }
.q-pick:hover { text-decoration: none; border-color: var(--accent); }
.q-pick[aria-current="page"] { border-color: var(--accent); background: var(--hl); color: var(--accent-ink); font-weight: 600; }
.q-pick.is-perfect { --q: var(--accent); }
.q-pick.is-good { --q: var(--ok); }
.q-pick.is-normal { --q: var(--muted); }
.q-pick.is-fail { --q: var(--bad, #d9826a); }
.in-slots { display: inline-flex; flex-wrap: wrap; gap: .4rem .7rem; vertical-align: middle; }
.in-slot { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); }
.in-slot:hover { text-decoration: none; }
.in-slot:hover .slot { border-color: var(--accent); }
.in-n { display: flex; flex-direction: column; line-height: 1.2; }
.in-n small { color: var(--muted); font-size: .75rem; }
.tbl .in-slots { gap: .3rem .55rem; }
@media (max-width: 760px) {
  .ent-slot { --s: 112px; }
}
@media (max-width: 420px) {
  .ent-slot { --s: 84px; }
  .in-slots { gap: .35rem .5rem; }
}

/* Small labels in running text keep to the line height of the text around them. */
.tag, .badge, .stat, .pick, .pic-tag, .badge-unused, .chip-tag, .wtag { line-height: 1.25; }
.ic-none.ic-xs { vertical-align: -.3em; }

/* Pictures in boxes: contained, never wider or taller than the box. */
.hub-pic, .pic-face-pic { position: relative; }
.hub-pic img, .pic-face-pic img { position: absolute; inset: 0; max-width: 100%; max-height: 100%; }
.ent-ic img { max-width: 100%; height: auto; object-fit: contain; }
.pic-inv img, .pic-mat img { max-width: 100%; object-fit: contain; }

/* Focus, hover and reading width, both styles. */
:where(a, button, summary, input, select, label):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub, .door, .pic-scene, .pic-face, .pic-char, .pic-mat { transition: border-color .15s, transform .15s, background .15s; }
.lede, .desc { max-width: 72ch; }
.eyebrow { margin: 0 0 .35rem; font: 600 .72rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .22em; color: var(--accent-ink); }

/* The menu under the header: every section with its picture, the current one underlined. */
.menu { background: var(--panel); border-bottom: var(--rule); }
.menu-in { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.menu-in::-webkit-scrollbar { display: none; }
.menu-a { display: flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .3rem .75rem; color: var(--muted); font: 600 .86rem/1.2 var(--body); white-space: nowrap; border-bottom: 3px solid transparent; }
.menu-a img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.menu-a:hover { color: var(--ink); background: var(--hl); text-decoration: none; }
.menu-a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.menu-a[aria-current="page"] { background: var(--hl); }
.menu-a:focus-visible { outline-offset: -2px; }

/* Home: the counts, the doors, the places to go, the mods line. */
.hero-stats { list-style: none; margin: 1.3rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.hero-stats a { display: flex; flex-direction: column; align-items: center; min-width: 6.4rem; padding: .5rem .8rem; background: var(--panel); border: var(--card-border); border-radius: var(--radius); color: var(--ink); }
.hero-stats a:hover { border-color: var(--accent); text-decoration: none; }
.hero-stats b { font: 600 1.35rem/1.1 var(--mono); color: var(--accent-ink); }
.hero-stats span { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.hero-mods { margin: 1.4rem auto 0; max-width: 60ch; font-size: .9rem; color: var(--muted); }
.hero-mods a { font-weight: 600; }
.doors { margin: .5rem 0 2rem; }
.door-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.door { display: flex; flex-direction: column; height: 100%; background: var(--panel); border: var(--card-border); border-radius: var(--radius); color: var(--ink); overflow: hidden; }
.door:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.door-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--hl); overflow: hidden; }
.door-pic img { position: absolute; inset: 0; margin: auto; width: 62%; height: 72%; object-fit: contain; }
.door-pic.cover img { width: 100%; height: 100%; object-fit: cover; }
.door-t { padding: .6rem .75rem 0; font: 700 1.05rem/1.2 var(--head); }
.door-b { padding: .2rem .75rem .75rem; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.sub-h { margin: 0 0 .45rem; font: 600 .85rem var(--body); color: var(--ink); }
.chips.scenes + .sub-h { margin-top: 1rem; }
.chips.scenes > li { position: relative; }
.pic-map { position: absolute; z-index: 2; top: .45rem; left: .45rem; padding: .15rem .45rem; font: 700 .68rem/1.25 var(--body); background: var(--accent); color: var(--on-accent); border-radius: 3px; white-space: nowrap; }
.pic-map:hover { text-decoration: none; filter: brightness(1.1); }
.pic-tag.explore { color: var(--ok); border-color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .door:hover, .hub:hover, .mm-card:hover { transform: none; } }
.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.home-col { padding: .8rem .9rem; background: var(--panel); border: var(--card-border); border-top: 3px solid var(--accent); border-radius: var(--radius); }
.home-col .sec-h { margin-top: 0; }
.home-list, .home-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-list a { display: flex; align-items: center; gap: .65rem; padding: .25rem; color: var(--ink); border-radius: var(--radius); }
.home-qa a { display: block; padding: .45rem .25rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.home-list a:hover, .home-qa a:hover { background: var(--hl); text-decoration: none; }
.home-qa a:hover b { color: var(--accent-ink); }
.home-list b, .home-qa b { display: block; font-size: .9rem; line-height: 1.25; }
.home-list small, .home-qa small { display: block; font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* Guides: a bigger picture on every card. */
.guide-hubs .hub { grid-template-columns: 4.5rem 1fr auto; min-height: 6.2rem; }
.guide-hubs .hub-pic { width: 4.5rem; height: 4.5rem; }
.guide-hubs { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.guide-hubs .hub-t { font-size: 1.2rem; line-height: 1.15; }

/* Mods (designs/depot/mods.css): the counts, the Mod Manager, the filter and a card per mod. */
.mm-index-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin: .2rem 0 1.2rem; }
.mm-index-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0; }
.mm-index-head .lede { margin: .5rem 0 0; }
.mm-feed { margin: .6rem 0 0; font-size: .92rem; }
.mm-feed a { display: inline-flex; align-items: center; gap: .45rem; }
.mm-feed svg { color: var(--accent); flex: none; }
.mm-stats { display: flex; gap: 1px; background: var(--hair); border: var(--card-border); border-radius: var(--radius); overflow: hidden; }
.mm-stats div { padding: .6rem 1.1rem; background: var(--panel); text-align: center; }
.mm-stats b { display: block; font: 600 1.7rem/1 var(--mono); color: var(--accent-ink); }
.mm-stats span { font: 600 .66rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mm-feature { display: grid; grid-template-columns: 1fr; margin: 0 0 1.2rem; background: var(--panel); border: var(--card-border); border-top: 3px solid var(--mod, var(--accent)); border-radius: var(--radius); overflow: hidden; }
.mm-feature:not(:has(.mm-feature-art)) { grid-template-columns: 1fr; }
.mm-feature-art { display: block; background: var(--hl); }
.mm-feature-art img { display: block; width: 100%; height: auto; aspect-ratio: 1300 / 372; object-fit: cover; }
.mm-feature-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.2rem 1.1rem; }
.mm-feature-body > * { margin: 0; }
.mm-feature h2 { font-size: 1.6rem; }
.mm-feature h2 a { color: var(--ink); }
.mm-feature-go { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem !important; }
/* Wide screens: the banner keeps its full width and shape, and the buttons stand beside the text, not under it, so
   the hero ends sooner and the mod list starts above the fold. */
@media (min-width: 861px) {
  .mm-feature-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 2.5rem; align-items: start; padding: 1.1rem 1.5rem 1.25rem; }
  .mm-feature-body > * { grid-column: 1; }
  .mm-feature-go { grid-column: 2; grid-row: 1 / span 4; align-self: center; flex-direction: column; margin-top: 0 !important; }
  .mm-feature-go .mm-btn { justify-content: center; min-width: 13rem; }
}
.mm-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: var(--rule); border-radius: var(--radius); color: var(--ink); font-weight: 600; font-size: .9rem; }
.mm-btn:hover { background: var(--hl); border-color: var(--accent); text-decoration: none; }
.mm-btn.is-gold { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mm-btn.is-gold:hover { background: var(--accent); filter: brightness(1.08); }
.mm-filter { position: sticky; top: 3.4rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; padding: .55rem 0; background: var(--bg); }
.mm-filter input { flex: 1 1 240px; min-height: 2.75rem; padding: 0 .8rem; font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: var(--field-border); border-radius: var(--radius); }
.mm-filter input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.mm-chip { min-height: 2.75rem; padding: 0 .8rem; background: var(--panel); border: var(--rule); border-radius: var(--radius); color: var(--muted); font: 600 .74rem var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mm-chip em { margin-left: .35rem; font: normal .72rem var(--mono); opacity: .75; }
.mm-chip:hover { color: var(--ink); border-color: var(--cat, var(--accent)); }
.mm-chip.is-on { background: var(--hl); border-color: var(--cat, var(--accent)); color: var(--cat, var(--accent-ink)); }
.mm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.mm-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: var(--card-border); border-radius: var(--radius); color: var(--ink); overflow: hidden; transition: border-color .15s, transform .15s; }
.mm-card::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 3px; background: var(--mod); }
.mm-card:hover { border-color: var(--mod); transform: translateY(-2px); text-decoration: none; }
.mm-card-art { display: block; aspect-ratio: 1300 / 372; overflow: hidden; background: var(--hl); border-bottom: 1px solid var(--hair); }
.mm-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-card-art.is-blank { display: grid; place-items: center; font: 800 1.3rem var(--head); color: var(--mod); background: linear-gradient(135deg, color-mix(in srgb, var(--mod) 22%, var(--panel)), var(--panel)); }
.mm-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: .75rem .9rem .85rem 1.05rem; }
.mm-card-top { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.mm-card h2 { font-size: 1.2rem; }
.mm-card-ver { font: 600 .75rem var(--mono); color: var(--accent-ink); white-space: nowrap; }
.mm-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.mm-card-foot { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
/* "What I'm working on" under the mods: the mods not on Nexus yet (ModsPage::roadmap). */
.rm { margin-top: 3.5rem; padding-top: 2rem; border-top: var(--rule); }
.rm-head h2 { font-size: 2rem; margin: .2rem 0 .4rem; }
.rm-stages { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; font-size: .85rem; color: var(--muted); margin: .8rem 0 1.4rem; }
.rm-stage { font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: .28rem .45rem; border: 1px solid currentColor; white-space: nowrap; }
.rm-stage.is-ready { color: var(--ok); }
.rm-stage.is-test { color: var(--accent); }
.rm-stages .rm-stage + .rm-stage { margin-left: .8rem; }
.rm-card { cursor: default; }
.rm-card .mm-card-top { align-items: center; }
.rm-icons { display: flex; gap: 6%; justify-content: center; align-items: center; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--mod) 30%, transparent), transparent 70%); padding: 6% 4%; }
.rm-icons img { width: 26% !important; height: auto !important; max-width: 110px; object-fit: contain; aspect-ratio: auto !important; }
/* Four or more icons share the row evenly, so the outer ones are not cut off. */
.rm-icons:has(img:nth-child(4)) { gap: 3%; }
.rm-icons:has(img:nth-child(4)) img { width: 16% !important; }
.mm-tag { font-size: .7rem; line-height: 1.25; padding: .15rem .45rem; border: 1px solid var(--hair); border-radius: 3px; color: var(--muted); white-space: nowrap; }
.mm-tag.is-mod { color: var(--cat, var(--muted)); border-color: var(--cat, var(--hair)); }
.mm-tag.is-gold { color: var(--accent-ink); border-color: var(--accent); }
.mm-none { margin-top: 1rem; }
/* Each category has its colour, on its chip and on the tag of its cards. */
.mm [data-cat="QualityOfLife"] { --cat: #4fa8ff; }
.mm [data-cat="Balance"] { --cat: #ff5fa2; }
.mm [data-cat="Interface"] { --cat: #ffc23d; }
.mm [data-cat="Tools"] { --cat: #b9b2a6; }
.mm [data-cat="Audio"] { --cat: #b48cff; }
.mm [data-cat="Gameplay"] { --cat: #7bd04a; }

/* Phones: the menu as a row of seven, everything else one column. */
@media (max-width: 760px) {
  .menu-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 0; padding: 0 .25rem; overflow-x: auto; }
  .menu-a { flex-direction: column; justify-content: center; gap: .15rem; min-height: 3.3rem; padding: .3rem .1rem; font-size: .64rem; line-height: 1.1; text-align: center; white-space: normal; }
  .menu-a img { width: 22px; height: 22px; }
  .menu-a span { overflow-wrap: normal; }
  .foot-in { padding: 1.2rem .9rem 1.8rem; }
  .foot-in a, .crumbs a { display: inline-block; padding-block: .35rem; }
  .door-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .door-t { font-size: .95rem; }
  .hero-stats a { min-width: 0; flex: 1 1 28%; padding: .45rem .4rem; }
  .pic-map { padding: .35rem .55rem; }
  .guide-hubs { grid-template-columns: 1fr; }
  .guide-hubs .hub { grid-template-columns: 3.4rem 1fr auto; min-height: 0; }
  .guide-hubs .hub-pic { width: 3.4rem; height: 3.4rem; }
  .mm-index-head { align-items: stretch; }
  .mm-stats { width: 100%; }
  .mm-stats div { flex: 1; padding: .55rem .4rem; }
  .mm-feature { grid-template-columns: 1fr; }
  .mm-feature-art img { height: auto; }
  .mm-filter { top: 6.2rem; }
  .mm-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .guide-hubs .hub { grid-template-columns: 3rem 1fr auto; }
  .guide-hubs .hub-pic { display: grid; width: 3rem; height: 3rem; }
  .guide-hubs .hub-t { grid-column: 2; }
  .guide-hubs .hub-n { grid-column: 3; }
  .guide-hubs .hub-b { grid-column: 2 / -1; }
}

/* Inside the game's Field Guide window, which has its own Home button and follows the game's language. */
html.in-guide .menu, html.in-guide .switches, html.in-guide .foot, html.in-guide .share { display: none; }

/* The front door: what the wiki is under its name, and why players use it. */
.hero-sub { margin: -.2rem 0 1.1rem; max-width: 46rem; font-size: 1.08rem; color: var(--ink); }
.proof-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.proof-c { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: .9rem 1rem; border: var(--card-border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
.proof-c:hover { text-decoration: none; border-color: var(--accent); }
.proof-c b { font: 700 1.05rem var(--head); letter-spacing: .02em; }
.proof-c span { font-size: .9rem; color: var(--muted); }

/* Search results: one hit a row, its chip beside the words around the match; the kinds as filters; the pager. */
.hits { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; }
.hit { display: grid; grid-template-columns: minmax(14rem, 19rem) 1fr; gap: .25rem 1rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.hit > .chip { min-width: 0; }
.hit-snip { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.hit-snip .hit-where { color: var(--ink); font-weight: 600; }
p.hit-where { font-style: italic; }
.hit-snip mark, .instant .i-s mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); padding: 0 .1em; border-radius: 2px; }
.facets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.facets a { font-size: .85rem; padding: .3rem .7rem; border: var(--rule); color: var(--ink); border-radius: 999px; white-space: nowrap; }
.facets a span { color: var(--muted); font-family: var(--mono); font-size: .78rem; margin-left: .2rem; }
.facets a:hover { text-decoration: none; border-color: var(--accent); }
.facets a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.facets a.on span { color: inherit; opacity: .85; }
.pager { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; margin: 1.2rem 0; font: .85rem var(--mono); }
.pager a, .pager span { min-width: 2.2rem; padding: .3rem .6rem; text-align: center; border: var(--rule); border-radius: var(--radius); }
.pager a:hover { text-decoration: none; border-color: var(--accent); }
.pager .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager .gap { border-color: transparent; color: var(--muted); min-width: 0; }
.instant .i-s { color: var(--muted); font-size: .76rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 640px) { .hit { grid-template-columns: 1fr; } .facets { flex-wrap: nowrap; overflow-x: auto; } }