/* Rust.camp Wiki – world views: monuments, loot, NPCs, puzzles, changes. Owner: Agent D.
   Tokens only (web/css/tokens.css). All classes are prefixed w- so they never collide with wiki.css. */

.w-page { display: grid; gap: 0; min-width: 0; padding-bottom: 40px; }
.w-page a { color: inherit; text-decoration: none; }
.w-page a:not(.w-card):hover { color: var(--rc-signal-text); }
/* link cards: hover changes only border and background; text, chips and layout stay; inner links keep their own hover */
.w-page a.w-card { color: inherit; transition: border-color .15s, background .15s; }
.w-page a.w-card:hover, .w-page a.w-card:focus-visible { color: inherit; border-color: var(--rc-line-2); background: var(--rc-glass-2); }

/* ---------- header ---------- */
.w-head { display: grid; gap: 10px; margin: 8px 0 22px; min-width: 0; }
.w-back { justify-self: start; font-size: 13px; font-weight: 600; color: var(--rc-ink-3); }
.w-back::before { content: "← "; }
.w-title { font-family: var(--rc-font-display); font-weight: 800; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; letter-spacing: .01em; margin: 0; overflow-wrap: anywhere; }
.w-sub { margin: -4px 0 0; font-size: 15px; color: var(--rc-ink-3); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.w-chips--tight { gap: 4px; }

/* ---------- chips ---------- */
.w-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--rc-radius-pill); font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.4;
  color: var(--rc-ink-2); border: 1px solid var(--rc-line); background: var(--rc-glass); white-space: nowrap; flex: 0 0 auto; }
.w-chip--quiet { font-weight: 500; letter-spacing: 0; color: var(--rc-ink-3); background: transparent; }
.w-chip--tier { color: var(--rc-ink); border-color: var(--rc-line-2); background: var(--rc-glass-2); }
.w-chip--count { font-family: var(--rc-font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--rc-ink); padding: 2px 9px; }
.w-chip--warn { color: var(--rc-warn); border-color: color-mix(in srgb, var(--rc-warn) 35%, transparent); background: color-mix(in srgb, var(--rc-warn) 10%, transparent); }
.w-chip--ok { color: var(--rc-ok); border-color: color-mix(in srgb, var(--rc-ok) 35%, transparent); background: color-mix(in srgb, var(--rc-ok) 10%, transparent); }
.w-chip--accent { color: var(--rc-signal-text); border-color: var(--rc-signal-line); background: var(--rc-signal-soft); }
.w-chip--verify { font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 1px 8px; color: var(--rc-ink-3); border-style: dashed; background: transparent; }
.w-chip--add { color: var(--rc-win); border-color: color-mix(in srgb, var(--rc-win) 35%, transparent); background: color-mix(in srgb, var(--rc-win) 10%, transparent); }
.w-chip--del { color: var(--rc-loss); border-color: color-mix(in srgb, var(--rc-loss) 35%, transparent); background: color-mix(in srgb, var(--rc-loss) 10%, transparent); }
.w-chip--mod { color: var(--rc-ink-2); }
.w-page a.w-chip--link:hover { color: var(--rc-signal-text); border-color: var(--rc-signal-line); }
.w-card-chip { position: relative; }
.w-card-chip__key { width: 10px; height: 7px; border-radius: 2px; background: var(--rc-ink-3); flex: 0 0 auto; }
.w-card-chip--green .w-card-chip__key { background: var(--rc-win); }
.w-card-chip--blue .w-card-chip__key { background: var(--rc-signal-mark); }
.w-card-chip--red .w-card-chip__key { background: var(--rc-loss); }

.w-dash { color: var(--rc-ink-3); }
.w-empty { margin: 0; color: var(--rc-ink-3); font-size: 15px; }
.w-empty--fill { display: grid; place-items: center; flex: 1 1 auto; min-height: 120px; }

/* ---------- sections, cards, grids ---------- */
.w-sect { margin-top: 30px; min-width: 0; }
.w-sect__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.w-sect__head h2 { font-family: var(--rc-font-display); font-weight: 800; font-size: clamp(22px, 3vw, 26px); margin: 0; }
.w-card { position: relative; background: var(--rc-glass); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 16px; min-width: 0; }
.w-card--flush { padding: 4px 0; }
.w-stack { display: grid; gap: 12px; min-width: 0; }
.w-grid { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .w-grid--2, .w-grid--3, .w-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .w-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* KPI tiles: equal height, placeholder dash when empty */
.w-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .w-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w-tiles--fac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .w-tiles--fac { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 980px) { .w-tiles--fac { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.w-tile { display: grid; align-content: start; gap: 6px; min-height: 84px; padding: 14px; background: var(--rc-glass); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); min-width: 0; }
.w-tile__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tile__value { font-family: var(--rc-font-display); font-weight: 800; font-size: 28px; line-height: 1; white-space: nowrap; }
.w-tile__chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* container / NPC cards: same layout in every card of a row */
.w-ccard { display: flex; flex-direction: column; gap: 10px; }
.w-ccard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.w-ccard__name { font-family: var(--rc-font-display); font-weight: 700; font-size: 18px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-mini { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.w-mini li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 28px; }
.w-mini__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.w-mini__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.w-mini__val { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--rc-ink-2); flex: 0 0 auto; }
.w-wrow { display: flex; gap: 6px; min-height: 36px; align-items: center; }
.w-wchip { display: inline-flex; padding: 3px; border-radius: var(--rc-radius-sm); border: 1px solid var(--rc-line); background: var(--rc-glass); }

/* item icon with initials fallback */
.w-icon { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 6px; background: var(--rc-glass-2); overflow: hidden; }
.w-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.w-icon__badge { font-family: var(--rc-font-display); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--rc-ink-2); }
.w-item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.w-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-strong { font-weight: 600; }

/* place cards: monument / NPC / weapon link with count */
.w-place { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; }
.w-place__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-place__item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

/* ---------- tables: never scroll sideways, the main column ellipsizes ---------- */
.w-tblwrap { width: 100%; overflow: hidden; }
.w-tbl { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.w-tbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink-3); padding: 10px 12px 8px; border-bottom: 1px solid var(--rc-line-2); white-space: nowrap; }
.w-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--rc-line); vertical-align: middle; white-space: nowrap; }
.w-tbl tr:last-child td { border-bottom: 0; }
.w-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.w-tbl th.main, .w-tbl td.main { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w-tbl td.main > a, .w-tbl td.main > span { max-width: 100%; }
.w-tbl tbody tr:hover { background: var(--rc-glass); }
.w-tbl th button { appearance: none; border: 0; background: none; padding: 2px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.w-tbl th button:hover, .w-tbl th[aria-sort] button { color: var(--rc-ink); }
.w-tbl th[aria-sort="descending"] .w-sort::after { content: "▾"; }
.w-tbl th[aria-sort="ascending"] .w-sort::after { content: "▴"; }
.w-tbl .w-chips { flex-wrap: nowrap; }
@media (max-width: 639px) {
  .w-tbl .hide-sm { display: none; }
  .w-tbl th, .w-tbl td { padding-left: 8px; padding-right: 8px; }
  .w-tbl th:first-child, .w-tbl td:first-child { padding-left: 12px; }
  .w-tbl .w-card-chip__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .w-tbl .w-card-chip { padding: 5px 7px; gap: 0; }
  .w-tbl .w-card-chip__key { width: 12px; height: 9px; }
}

/* ---------- puzzle ---------- */
.w-puzzle { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) { .w-puzzle { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); } }
.w-pcard { display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.w-pcard__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink-3); margin: 0; font-family: var(--rc-font-text); }
.w-graphbox { flex: 1 1 auto; display: grid; place-items: center; min-width: 0; width: 100%; }
.w-graph { display: block; width: 100%; height: auto; overflow: visible; }
.w-graph__edge { fill: none; stroke: var(--rc-line-2); stroke-width: 1.6; }
.w-graph__arrow { fill: none; stroke: var(--rc-ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-graph__node rect { fill: var(--rc-surface-raised); stroke: var(--rc-line-2); stroke-width: 1; }
.w-graph__node text { fill: var(--rc-ink); font-family: var(--rc-font-text); font-size: 12px; font-weight: 600; }
.w-graph__dot { fill: var(--rc-ink-3); }
.w-graph__node--fuse .w-graph__dot { fill: var(--rc-warn); }
.w-graph__node--switch .w-graph__dot, .w-graph__node--button .w-graph__dot { fill: var(--rc-ink); }
.w-graph__node--timer .w-graph__dot { fill: var(--rc-signal-text); }
.w-graph__node--door rect { fill: var(--rc-glass); stroke-dasharray: 3 3; }
.w-graph__node--green .w-graph__dot { fill: var(--rc-win); }
.w-graph__node--blue .w-graph__dot { fill: var(--rc-signal-mark); }
.w-graph__node--red .w-graph__dot { fill: var(--rc-loss); }
.w-graph__node--power text, .w-graph__node--logic text { fill: var(--rc-ink-3); }

.w-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.w-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 34px; }
.w-step__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--rc-radius-pill); background: var(--rc-glass-2); border: 1px solid var(--rc-line-2);
  font-family: var(--rc-font-display); font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.w-step__txt { font-weight: 600; font-size: 15px; }

/* ---------- best place to find ---------- */
.w-best { display: grid; gap: 14px; }
.w-best__search { max-width: 420px; }
.w-input { width: 100%; min-height: 44px; padding: 0 16px; border-radius: var(--rc-radius-pill); border: 1px solid var(--rc-line-2); background: var(--rc-bg-3); color: var(--rc-ink); font: inherit; font-size: 15px; outline: none; }
.w-input::placeholder { color: var(--rc-ink-3); }
.w-input:focus { border-color: var(--rc-signal-text); box-shadow: 0 0 0 1px var(--rc-signal-mark); }
.w-best__out { display: grid; gap: 12px; min-width: 0; }
.w-best__item { font-weight: 700; font-size: 17px; }
.w-best__col { display: grid; gap: 8px; align-content: start; min-width: 0; }

/* ---------- changes ---------- */
.w-builds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.w-build { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.w-build__main { display: grid; gap: 2px; min-width: 0; }
.w-build__id { font-family: var(--rc-font-display); font-weight: 700; font-size: 18px; }
.w-build__date { font-size: 13px; color: var(--rc-ink-3); }
.w-build__sum { flex-wrap: nowrap; }
.w-diff { padding: 0; overflow: hidden; }
.w-diff__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 0; }
.w-diff__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-diff__key { margin-left: auto; font-family: var(--rc-font-mono); font-size: 12px; color: var(--rc-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-diff__body { border-top: 1px solid var(--rc-line); font-family: var(--rc-font-mono); font-size: 13px; }
.w-diff__path { padding: 6px 16px 4px; color: var(--rc-ink-3); background: var(--rc-bg-3); overflow-wrap: anywhere; }
.w-diff__line { display: flex; gap: 10px; padding: 3px 16px; overflow-wrap: anywhere; min-width: 0; }
.w-diff__line code { min-width: 0; }
.w-diff__line--del { background: color-mix(in srgb, var(--rc-loss) 12%, transparent); color: var(--rc-ink); }
.w-diff__line--add { background: color-mix(in srgb, var(--rc-win) 12%, transparent); color: var(--rc-ink); }
.w-diff__line--del .w-diff__sign { color: var(--rc-loss); }
.w-diff__line--add .w-diff__sign { color: var(--rc-win); }
.w-diff__sign { width: 10px; flex: 0 0 auto; font-weight: 700; }
.w-diff code { font-family: var(--rc-font-mono); }
@media (max-width: 479px) {
  .w-diff__key { display: none; }
  .w-tile__value { font-size: 24px; }
}
.w-more { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--rc-line); background: transparent; color: var(--rc-signal-text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.w-more:hover { background: var(--rc-glass); }

/* ---------- puzzle requirements: bold tiles + items to bring ---------- */
.w-tiles--req { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.w-tile--req { border-color: var(--rc-line-2); background: var(--rc-glass-2); }
.w-tile__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.w-tile__sub { font-size: 12px; font-weight: 600; color: var(--rc-ink-2); }
.w-bring { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); background: var(--rc-glass); }
.w-bring__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink-3); }
.w-bring__items { display: flex; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
.w-bring__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.w-bring__name { white-space: nowrap; }
.w-pcard[hidden] { display: none; }

/* ---------- overview cards (monuments, loot, NPCs): rich, equal height per row ---------- */
.w-ogrid { align-items: stretch; }
.w-ocard { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.w-ocard__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.w-ocard__head > .w-chip { flex: 0 0 auto; }
.w-ocard__name { font-family: var(--rc-font-display); font-weight: 800; font-size: 21px; line-height: 1.1; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-right: auto; }
.w-ocard__head--plate { align-items: center; gap: 14px; }
.w-ocard__plate { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 auto; border-radius: var(--rc-radius-sm); background: var(--rc-surface-raised); border: 1px solid var(--rc-line-2); }
.w-ocard__initials { font-family: var(--rc-font-display); font-weight: 800; font-size: 20px; color: var(--rc-ink-2); }
.w-ocard__title { display: grid; gap: 6px; min-width: 0; }
.w-ocard__title .w-ocard__name { margin-right: 0; }
.w-ocard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rc-line); }
.w-mini--best { flex: 1 1 auto; align-content: start; }
.w-mini--best li { min-height: 32px; }
.w-mini__blank { visibility: hidden; }
.w-mstats { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.w-mstat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--rc-ink-3); text-transform: uppercase; }
.w-mstat b { font-family: var(--rc-font-display); font-weight: 800; font-size: 22px; letter-spacing: 0; color: var(--rc-ink); }
.w-req { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--rc-ink-2); padding: 2px 8px 2px 3px; border: 1px solid var(--rc-line); border-radius: var(--rc-radius-pill); }
.w-fac { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--rc-radius-pill); background: var(--rc-glass-2); font-size: 12px; font-weight: 700; color: var(--rc-ink-2); }
.w-fac__ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.w-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; max-width: 100%; min-width: 0; border-radius: 18px; border: 1px solid var(--rc-line); background: var(--rc-glass); }
.w-seg__opt { appearance: none; border: 0; background: transparent; color: var(--rc-ink-2); padding: 7px 14px; flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; border-radius: var(--rc-radius-pill); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 32px; }
.w-seg__opt:hover { color: var(--rc-ink); }
.w-seg__opt[aria-pressed="true"] { background: var(--rc-glass-2); color: var(--rc-ink); box-shadow: inset 0 0 0 1px var(--rc-line-2); }

/* ---------- footprint (data-drawn top-down map) and photo slot ---------- */
.w-fpbox { margin: 0; display: grid; gap: 8px; min-width: 0; }
.w-fp { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--rc-radius-sm); }
.w-fp__ground { fill: var(--rc-bg-3); }
.w-fp__grid { stroke: var(--rc-line); stroke-width: .6; }
.w-fp__bounds { fill: var(--rc-glass); stroke: var(--rc-line-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.w-fp__m--crate { fill: var(--rc-ink-2); }
.w-fp__m--barrel, .w-fp__m--bench { fill: var(--rc-ink-3); }
.w-fp__m--elite { fill: var(--rc-warn); stroke: var(--rc-bg); stroke-width: 1.2; }
.w-fp__m--hack { fill: var(--rc-warn); stroke: var(--rc-ink); stroke-width: 1.2; }
.w-fp__m--npc { fill: var(--rc-loss); }
.w-fp__m--fuse { fill: var(--rc-warn); stroke: var(--rc-bg); stroke-width: 1; }
.w-fp__m--recycler { fill: none; stroke: var(--rc-signal-text); stroke-width: 2; }
.w-fp__m--reader { fill: var(--rc-ink-3); stroke: var(--rc-bg); stroke-width: 1; }
.w-fp__m--reader.w-fp__m--green { fill: var(--rc-win); }
.w-fp__m--reader.w-fp__m--blue { fill: var(--rc-signal-mark); }
.w-fp__m--reader.w-fp__m--red { fill: var(--rc-loss); }
.w-fp__legend { justify-content: flex-start; }
.w-fp__key { gap: 6px; }
.w-fp__swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--rc-ink-2); flex: 0 0 auto; }
.w-fp__swatch--elite, .w-fp__swatch--hack, .w-fp__swatch--fuse { background: var(--rc-warn); }
.w-fp__swatch--npc { background: var(--rc-loss); border-radius: 50%; }
.w-fp__swatch--barrel, .w-fp__swatch--bench { background: var(--rc-ink-3); }
.w-fp__swatch--recycler { background: transparent; border: 2px solid var(--rc-signal-text); border-radius: 50%; }
.w-fp__swatch--green { background: var(--rc-win); } .w-fp__swatch--blue { background: var(--rc-signal-mark); } .w-fp__swatch--red { background: var(--rc-loss); }
.w-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rc-radius); }
.w-hero { display: grid; gap: 12px; margin-bottom: 18px; max-width: 760px; }
.w-hero:empty { display: none; }
.w-hero.has-photo { max-width: none; }
.w-hero.has-photo .w-fpbox--hero { max-width: 520px; }
.w-ocard--media { padding-top: 12px; }
.w-ocard__media { position: relative; display: block; border-radius: var(--rc-radius-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--rc-bg-3); }
.w-ocard__media .w-fpbox, .w-ocard__media .w-fp { height: 100%; border-radius: 0; }
.w-ocard__media .w-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.w-ocard__frame { display: grid; place-items: center; height: 100%; padding: 12px; text-align: center; font-family: var(--rc-font-display); font-weight: 800; font-size: 22px; color: var(--rc-ink-3); background: repeating-linear-gradient(135deg, var(--rc-glass) 0 10px, transparent 10px 20px); }
.w-fac { padding: 2px 10px 2px 2px; gap: 6px; }
.w-fp__m--radiation { fill: color-mix(in srgb, var(--rc-warn) 4%, transparent); stroke: color-mix(in srgb, var(--rc-warn) 40%, transparent); stroke-width: .8; stroke-dasharray: 3 3; }
.w-fp__swatch--radiation { background: color-mix(in srgb, var(--rc-warn) 25%, transparent); border: 1px dashed var(--rc-warn); border-radius: 50%; }

/* ---------- recycling guide ---------- */
.w-rec-type { gap: 6px; }
.w-rec-type__key { width: 10px; height: 10px; border-radius: 50%; background: var(--rc-ink-3); }
.w-rec-type--green .w-rec-type__key { background: var(--rc-win); }
.w-rec-type--yellow .w-rec-type__key { background: var(--rc-warn); }
.w-rec-type--red .w-rec-type__key { background: var(--rc-loss); }
.w-ygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .w-ygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .w-ygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w-ytile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 76px; }
.w-ytile__rank { position: absolute; top: 6px; right: 10px; font-family: var(--rc-font-display); font-weight: 700; font-size: 12px; color: var(--rc-ink-3); }
.w-ytile__txt { display: grid; gap: 4px; min-width: 0; }
.w-ytile__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ytile__yield { display: inline-flex; align-items: center; gap: 6px; }
.w-ytile__yield b { font-family: var(--rc-font-display); font-weight: 800; font-size: 24px; line-height: 1; }
.w-tile--hero .w-tile__value { font-size: 34px; }
@media (max-width: 479px) { .w-ytile { padding: 12px 10px; gap: 8px; } .w-ytile__yield b { font-size: 20px; } }
.w-chip--name { color: var(--rc-ink); border-color: var(--rc-line-2); background: var(--rc-glass-2); letter-spacing: .02em; }
.w-fp__note { margin: 0; font-size: 13px; color: var(--rc-ink-3); }

/* ---------- blueprint currencies guide ---------- */
.w-bp { display: grid; gap: 16px; padding-top: 8px; scroll-margin-top: 120px; }
.w-bp + .w-bp { border-top: 1px solid var(--rc-line); padding-top: 28px; }
.w-bp__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.w-bp__name { font-family: var(--rc-font-display); font-weight: 800; font-size: clamp(24px, 3vw, 30px); line-height: 1.05; }
.w-bp__jump { margin: -8px 0 8px; }
.w-bp__jump .w-chip { padding: 3px 12px 3px 4px; }
.w-dtile { display: grid; align-content: start; gap: 6px; min-height: 112px; padding: 14px; }
.w-dtile__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-dtile__big { font-family: var(--rc-font-display); font-weight: 800; font-size: 28px; line-height: 1; }
.w-mtile { display: grid; gap: 10px; padding: 10px; }
.w-mtile__map { display: block; border-radius: var(--rc-radius-sm); overflow: hidden; }
.w-mtile__map .w-fpbox, .w-mtile__map .w-fp { border-radius: 0; }
.w-mtile__row { display: grid; gap: 4px; min-width: 0; padding: 0 4px 4px; }
.w-mtile__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-mtile__val { font-family: var(--rc-font-display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.w-dtile__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.w-dtile__unit { font-size: 13px; font-weight: 600; color: var(--rc-ink-3); }
.w-bp__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.w-tile--req .w-tile__value { white-space: normal; min-width: 0; }
.w-tile__label { white-space: normal; }
@media (max-width: 479px) { .w-tile--req .w-tile__value { font-size: 22px; } .w-tile__row { gap: 6px; } .w-tile__row .w-icon, .w-tile__row .plate { flex: 0 0 auto; } }
@media (max-width: 639px) {
  .w-bp .w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .w-dtile { padding: 10px; min-height: 0; }
  .w-dtile__big { font-size: 22px; }
  .w-mtile__val { font-size: 16px; }
  .w-mtile { padding: 6px; gap: 6px; }
  .w-mtile__row { gap: 2px; }
  .w-mtile__name { font-size: 13px; max-width: 100%; }
}
.w-sect__sub { margin: -6px 0 12px; font-size: 13px; color: var(--rc-ink-3); }
.w-stack > .w-sect__sub, .w-bp > .w-sect__sub { margin: -4px 0 0; }
.w-mtile__media { aspect-ratio: 16 / 10; }
.w-pm { gap: 10px; }
.w-pm__vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.w-pm__val { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 6px; border-radius: var(--rc-radius-sm); background: var(--rc-glass-2); min-width: 0; text-align: center; }
.w-pm__val b { font-family: var(--rc-font-display); font-weight: 800; font-size: 16px; line-height: 1.15; }
.w-pm__val--zero { color: var(--rc-ink-3); } .w-pm__val--zero .plate, .w-pm__val--zero .w-icon { opacity: .6; }
@media (max-width: 479px) { .w-pm__val { padding: 6px 4px; gap: 4px; } .w-pm__val b { font-size: 15px; } }
@media (max-width: 639px) { .w-bp .w-pmgrid { grid-template-columns: minmax(0, 1fr); } }
.w-outchips { margin-bottom: 14px; gap: 6px; }
.w-outchip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: var(--rc-radius-pill); border: 1px solid var(--rc-line); background: var(--rc-glass); color: var(--rc-ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 32px; }
.w-outchip:hover { color: var(--rc-ink); border-color: var(--rc-line-2); }
.w-outchip[aria-pressed="true"] { color: var(--rc-ink); background: var(--rc-glass-2); border-color: var(--rc-signal-line); box-shadow: inset 0 0 0 1px var(--rc-signal-line); }
.w-more-outs { margin: -4px 0 14px; }
.w-more-outs > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--rc-signal-text); padding: 4px 0; list-style: none; }
.w-more-outs > summary::-webkit-details-marker { display: none; }
.w-more-outs > summary::after { content: "▾"; font-size: 11px; }
.w-more-outs[open] > summary::after { content: "▴"; }
.w-more-outs > .w-outchips { margin: 8px 0 0; }
.w-best .picker { max-width: 100%; }
.w-best .picker__panel { left: 0; right: auto; width: min(420px, 100%); min-width: 0; max-width: 100%; }
.w-best .picker__opt { min-width: 0; max-width: 100%; }
.w-best .picker__optname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* ---------- monument page: hero plate, radiation, NPC cards, variants ---------- */
.w-hero { position: relative; max-width: none; }
.w-hero__plate { display: grid; place-items: center; aspect-ratio: 21 / 6; min-height: 110px; border-radius: var(--rc-radius); font-family: var(--rc-font-display); font-weight: 800; font-size: clamp(22px, 4vw, 36px); color: var(--rc-ink-3);
  background: repeating-linear-gradient(135deg, var(--rc-glass) 0 12px, transparent 12px 24px); border: 1px solid var(--rc-line); text-align: center; padding: 12px; }
.w-hero.has-photo .w-hero__plate { display: none; }
.w-hero .w-photo { aspect-ratio: 21 / 9; max-height: 460px; }
.w-rad { display: grid; gap: 14px; }
.w-rad__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.w-rad__gear { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.w-rad__gear b { font-family: var(--rc-font-display); font-weight: 800; font-size: 20px; }
.w-npccard__hp { display: flex; align-items: baseline; gap: 6px; }
.w-npccard__hp b { font-family: var(--rc-font-display); font-weight: 800; font-size: 32px; line-height: 1; }
.w-npccard__hp span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-ink-3); }
.w-variant { gap: 10px; }
.w-variant.is-current { border-color: var(--rc-signal-line); box-shadow: inset 0 0 0 1px var(--rc-signal-line); }
.w-tile__list { display: grid; gap: 6px; }
.w-tile__line { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
@media (max-width: 639px) { .w-pcard--wiring { display: none; } }
.w-chip--place { font-size: 11px; }
.w-tile--note { min-height: 0; padding: 16px 18px; gap: 6px; }
.w-tile--note .w-tile__value { white-space: normal; font-size: 22px; line-height: 1.15; }
.w-evcard__how { margin: 0; font-size: 14px; color: var(--rc-ink-2); }

/* ---------- review row 24: no text under 12 px, tap targets at least 24 px ---------- */
.w-page .plate.plate--txt { font-size: 12px; letter-spacing: 0; }
.w-tile__label, .w-pcard__title, .w-bring__label, .w-chip--place, .w-chip--verify, .w-tbl th, .w-mstat { font-size: 12px; }
.w-tbl th button { min-height: 24px; }
.w-tbl td a { display: inline-flex; align-items: center; min-height: 24px; }
.w-ocard__name { display: block; min-height: 24px; line-height: 24px; }
.w-back { display: inline-flex; align-items: center; min-height: 24px; }
.w-chip--link, .w-outchip, .w-seg__opt { min-height: 26px; }
.w-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 16px 20px; margin-bottom: 8px; }
.w-plan__title { font-family: var(--rc-font-display); font-weight: 800; font-size: 22px; }
.w-plan__sub { grid-column: 1; font-size: 14px; color: var(--rc-ink-2); }
.w-plan__go { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; color: var(--rc-signal-text); }
:lang(ru) .w-tile__label, :lang(ru) .w-mstat, :lang(ru) .w-pcard__title, :lang(ru) .w-tbl th { text-transform: none; letter-spacing: .02em; }
.w-rad .w-chip { white-space: normal; flex: 0 1 auto; text-align: left; }

/* NPC and animal avatars (assets/npcs, client art): fill the plate; overview families; compact animal rows; detail hero */
.w-avatar { overflow: hidden; }
.w-avatar.has-avatar { background: radial-gradient(circle at 50% 30%, var(--rc-glass-2), var(--rc-surface-raised) 70%); }
.w-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w-avatar--xs { width: 32px; height: 32px; } .w-avatar--xs .w-ocard__initials { font-size: 12px; }
.w-avatar--sm { width: 44px; height: 44px; } .w-avatar--sm .w-ocard__initials { font-size: 15px; }
.w-avatar--hero { width: 96px; height: 96px; } .w-avatar--hero .w-ocard__initials { font-size: 30px; }
.w-npchero { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.w-npchero > .w-head { flex: 1 1 auto; min-width: 0; }
.w-npcfams { display: grid; gap: 28px; }
.w-alist { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 760px) { .w-alist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w-arow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 8px; font-size: 13px; }
.w-arow__body { display: grid; gap: 4px; min-width: 0; }
.w-arow__name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-arow__hv { display: inline-flex; align-items: center; gap: 4px; padding-left: 3px; }
@media (max-width: 479px) { .w-avatar--hero { width: 72px; height: 72px; } .w-npchero { gap: 12px; } }

/* labs: one-line lede; module table as a list under 640 px (label from data-label) */
.w-lede { margin: 0; font-size: 15px; color: var(--rc-ink-2); }
@media (max-width: 639px) {
  .w-tbl--list thead { display: none; }
  .w-tbl--list, .w-tbl--list tbody { display: block; }
  .w-tbl--list tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--rc-line); }
  .w-tbl--list tr:last-child { border-bottom: 0; }
  .w-tbl--list td { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .w-tbl--list td.main { grid-column: 1 / -1; max-width: none; width: auto; font-weight: 700; }
  .w-tbl--list td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-ink-3); }
  .w-tbl--list td.hide-sm { display: flex; }
  .w-tbl--list td.wide { grid-column: 1 / -1; }
}
/* shops: item -> price rows */
.w-shop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w-shop__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.w-shop__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; color: inherit; }
.w-shop__amt { font-variant-numeric: tabular-nums; color: var(--rc-ink-3); flex: 0 0 auto; }
.w-shop__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-shop__price { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
/* blockers */
.w-blk__glyph { width: 28px; height: 28px; color: var(--rc-ink-2); }
.w-blk__gather { gap: 4px; padding-left: 3px; color: inherit; }
/* no avatar: a quiet glyph; ambient animals as small chips */
.w-avatar__glyph { width: 56%; height: 56%; color: var(--rc-ink-3); opacity: .7; }
.w-avatar--none { background: var(--rc-glass); }
.w-ambient { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.w-ambient__chip { gap: 6px; padding-left: 3px; }
.w-avatar--chip { width: 22px; height: 22px; border-radius: 50%; }
.w-blk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* segmented controls never clip: the toolbar lets them shrink, options wrap */
.w-toolbar > * { min-width: 0; max-width: 100%; }
@media (max-width: 479px) { .w-seg__opt { padding: 6px 10px; } }
/* per-monument value tiles: currency icon 32 px, 40 px when the tile is wider than 120 px */
.w-pm__val { container-type: inline-size; }
.w-pm__val .plate { --pl: 32px !important; }
@container (min-width: 121px) { .w-pm__val .plate { --pl: 40px !important; } }
/* event avatars are vehicles and crates: whole sprite visible */
.w-evavatar img { object-fit: contain; padding: 4px; }
/* Travelling Vendor orders: chance on a visit as the big value, price chip with the currency icon */
.w-order__chance { display: flex; align-items: baseline; gap: 8px; }
.w-order__chance b { font-family: var(--rc-font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.w-order__chance span { font-size: 12px; font-weight: 600; color: var(--rc-ink-3); }
.w-order__price { gap: 5px; padding-left: 4px; font-variant-numeric: tabular-nums; }
.w-shop__chance { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .w-order__chance b { font-size: 24px; } }
/* shop rows: names wrap instead of hiding which variant it is, the chance column lines up */
.w-shop__name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; line-height: 1.25; }
.w-shop__chance { min-width: 48px; justify-content: center; }
/* fact tiles carry short words, not numbers: they wrap instead of running into the next tile */
.w-tiles--facts .w-tile__value { white-space: normal; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 479px) { .w-tiles--facts .w-tile__value { font-size: 20px; line-height: 1.15; } }
/* labs: lede chips, room cards tinted by their strongest reader colour */
.w-lab__lede { gap: 10px; }
.w-lab__variant { opacity: .85; }
.w-room { border-left-width: 3px; }
.w-room--red { border-left-color: var(--rc-loss); }
.w-room--blue { border-left-color: var(--rc-signal-mark); }
.w-room--green { border-left-color: var(--rc-win); }
.w-room__crate { gap: 5px; padding-left: 6px; }
.w-room__ico { width: 14px; height: 14px; color: var(--rc-ink-3); }
.w-chip--name.is-current { border-color: var(--rc-signal-line); color: var(--rc-ink); }
/* blueprint yield row: fragment, page, book per run; an empty row keeps card heights equal */
.w-bprow { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.w-bprow__chip { gap: 6px; padding: 3px 10px 3px 3px; font-variant-numeric: tabular-nums; }
.w-bprow--link { color: inherit; width: fit-content; max-width: 100%; }
.w-page a.w-bprow--link:hover .w-bprow__chip { border-color: var(--rc-signal-line); }
@media (max-width: 479px) { .w-bprow { gap: 4px; } .w-bprow__chip { gap: 4px; padding: 2px 8px 2px 2px; font-size: 12px; } .w-bprow__chip .plate { --pl: 20px !important; } }
@media (max-width: 479px) { .w-bprow:not(.w-bprow--empty) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-bprow__chip { min-width: 0; white-space: nowrap; overflow: hidden; } .w-bprow--link { width: auto; } }
@media (max-width: 479px) { .w-bprow__chip { font-size: 11px; padding-right: 6px; gap: 3px; letter-spacing: 0; } }