/* COD Loadout base styles: page chrome, reading typography, tables and generic components.
   Builder components live in builder.css (.bld-*). Tokens come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-color: var(--border-strong) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-md) / var(--leading-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(245, 165, 36, 0.38); color: var(--text); }
img, svg { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--border-control); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
time { font-variant-numeric: tabular-nums; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-3); top: -100px; z-index: calc(var(--z-header) + 1); background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--space-2); }
a.skip, a.skip:hover, a.skip:focus { color: var(--accent-ink); }

/* Header */
.topbar { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); background: var(--surface-1); border-bottom: 1px solid var(--border); }
.topbar-in { height: 100%; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-4); }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; border-radius: var(--radius-sm); }
.brand-logo { display: block; height: 38px; width: auto; }
@media (max-width: 600px) { .brand-logo { height: 30px; } }
.topnav { display: flex; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.topnav a:hover { color: var(--text); background: var(--surface-3); }
.topnav a[aria-current="page"] { color: var(--text); background: var(--surface-3); border-color: var(--border); }

/* Below 1040px the six links no longer fit beside the logo and game switcher (they need about 620px), so the strip becomes a Menu
   disclosure (native <details>, no script): one tap, all six links, 48px rows. */
.menu-nav { display: none; flex: none; margin-left: auto; }
.menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--surface-3); }
.menu[open] > summary { border-color: var(--text-muted); background: var(--surface-3); }
.menu:not([open]) .menu-list { display: none; }
.menu-list { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: var(--z-overlay); display: grid; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-3); background: var(--surface-1); border-bottom: 1px solid var(--border-control); }
.menu-list a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3) 0 var(--space-5); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-md); font-weight: 600; text-decoration: none; }
.menu-list a:hover { color: var(--text); background: var(--surface-3); }
.menu-list a[aria-current="page"] { position: relative; color: var(--text); background: var(--surface-3); font-weight: 700; }
.menu-list a[aria-current="page"]::before { content: ""; position: absolute; left: var(--space-3); width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 1039px) {
  .topnav { display: none; }
  .menu-nav { display: block; }
}

/* Page layout */
.wrap { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 0 var(--space-4); }
main.wrap { padding-bottom: var(--space-7); }
.crumbs { padding-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-subtle); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }

.page-head { padding: var(--space-5) 0 var(--space-2); }
h1 { margin: 0 0 var(--space-3); font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; max-width: 26ch; }
h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: 700; }
.lede { max-width: 56ch; margin: 0 0 var(--space-4); font-size: var(--text-lg); line-height: 1.5; color: var(--text-muted); }
p { margin: 0 0 var(--space-3); }
.section { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.section > p, .section > ul.plain-list, .section > dl.defs { max-width: 58ch; }
.section h2 + .table-wrap, .section p + .table-wrap { margin-top: var(--space-3); }
.prose-wrap { padding-bottom: var(--space-7); }
.prose-wrap > .section:first-child { border-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); }
.meta { color: var(--text-subtle); font-size: var(--text-xs); }
.meta.block { display: block; }
.source-line { margin-top: var(--space-6); max-width: 60ch; }
.note { max-width: 58ch; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.table-wrap + p, .table-wrap + .note, .table-wrap + ul { margin-top: var(--space-3); }
.notice { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--info-soft); color: var(--text); font-size: var(--text-sm); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--surface-3); border-color: var(--text-muted); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data caption { text-align: left; }
table.data th, table.data td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
table.data thead th { position: sticky; top: 0; background: var(--surface-1); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; border-bottom-color: var(--border-strong); }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody th[scope="row"] { font-weight: 600; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data-apex td:nth-child(4) { min-width: 18rem; }
/* Apex Attachments below 640px: each row becomes a stacked card (name, weapon, level, effect, blocked types), no sideways scrolling */
@media (max-width: 639px) {
  .table-wrap:has(.data-apex) { overflow: visible; border: 0; border-radius: 0; background: none; }
  table.data-apex, .data-apex tbody, .data-apex tr, .data-apex th, .data-apex td { display: block; }
  .data-apex thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-apex tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
  .data-apex th, .data-apex td:nth-child(4), .data-apex td:nth-child(5) { grid-column: 1 / -1; }
  .data-apex .wlink > :is(img, svg) { display: none; }
  .data-apex tbody tr:last-child { margin-bottom: 0; }
  table.data.data-apex th, table.data.data-apex td { padding: 3px 0; border: 0; }
  table.data.data-apex td:nth-child(4) { min-width: 0; }
  table.data.data-apex td.num { text-align: left; }
  .data-apex td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .data-apex td[data-label="Blocks"]::before { display: block; margin-bottom: 4px; }
  .data-apex .chips { margin: 0; }
}
table.data-weapons { table-layout: fixed; min-width: 46rem; }
table.data-weapons th:first-child { width: 24%; }
table.data-weapons th:last-child { width: 22%; }
/* Community-reported attachments: picture and text rows flowing down columns, one column on a phone */
.alist { list-style: none; margin: 0; padding: 0; column-width: 17rem; column-gap: var(--space-5); }
.alist-type { column-width: 21rem; }
.arow { display: flex; gap: var(--space-3); min-width: 0; padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); break-inside: avoid; }
.apic { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); }
.abody { flex: 1; min-width: 0; }
.aname { display: block; font-weight: 600; overflow-wrap: anywhere; }
.atype { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.abody .meta.block, .abody .fx, .aw { margin-top: 4px; }
.aw { font-size: var(--text-xs); }
.aw summary { padding: 4px 0; color: var(--text-muted); cursor: pointer; }
.aw summary:hover { color: var(--text); }
.aw p { margin: 2px 0 0; line-height: 1.6; }
.agroup h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.agroup + .agroup, .section > p + .agroup { margin-top: var(--space-5); }
.count { color: var(--text-muted); font-weight: 600; }
.fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fx li { display: flex; gap: 8px; }
.fx li::before { content: "+"; flex: none; width: 1ch; font-weight: 700; color: var(--positive); }
.fx li.con::before { content: "\2212"; color: var(--negative); }
/* Community-reported stat changes: the sign and the word carry the meaning, colour only repeats it */
.fxs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: var(--text-xs); color: var(--text-muted); }
.fxs-wide { font-size: var(--text-sm); }
.abody .fxs { margin-top: 4px; }
.fxs .pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.fxs .v-better .pct { color: var(--positive); }
.fxs .v-worse .pct { color: var(--negative); }
/* Community-reported base stats of one weapon: groups flow down columns, each a plain list of name and value */
.sgroups { column-width: 19rem; column-gap: var(--space-6); margin-top: var(--space-3); }
.sgroup { break-inside: avoid; margin-bottom: var(--space-5); }
.sgroup h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.srows { margin: 0; }
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.srow dt { color: var(--text-muted); min-width: 0; }
.srow dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.srow-key dt { color: var(--text); }
@media (max-width: 720px) {
  .apic { width: 40px; height: 40px; }
}
h3 + .table-wrap { margin-top: var(--space-3); }
@media (min-width: 721px) {
  table.data-gear { table-layout: fixed; }
  table.data-gear th:first-child { width: 20%; }
  table.data-gear th:nth-child(2) { width: 12%; }
  table.data-gear th:nth-child(3):not(:last-child) { width: 14%; }
}
.wlink { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; color: var(--text); font-weight: 600; text-decoration: none; }
table.data td > a:not([class]), table.data th > a:not([class]) { padding: 4px 0; }
.wlink:hover { color: var(--accent); text-decoration: underline; }
.glyph { width: 44px; height: 13px; flex: none; color: var(--text-subtle); }
.glyph-lg { width: 160px; height: 48px; color: var(--text-muted); }

/* Pictograms from game-icons.net, drawn in a muted text colour (credits on /credits/) */
.ico { width: 20px; height: 20px; flex: none; fill: currentColor; color: var(--text-muted); }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 32px; height: 32px; }
.with-ico { display: flex; align-items: center; gap: var(--space-3); }
.nm { display: inline-flex; align-items: center; gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 12px 5px 8px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font-size: var(--text-sm); text-decoration: none; }
.chips a:hover { background: var(--surface-3); }
.chips-compact a { padding: 3px 8px 3px 6px; font-size: var(--text-xs); }
.chips-compact .ico { width: 16px; height: 16px; }
.meta .ico { display: inline-block; vertical-align: -3px; margin-right: 4px; }

/* Game switcher in the header: one section per Call of Duty title (see /mw4/) */
.game-switch { position: relative; flex: none; }
.game-switch > summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; }
.game-switch > summary::-webkit-details-marker { display: none; }
.game-switch > summary:hover { background: var(--surface-3); }
.game-switch[open] > summary { border-color: var(--text-muted); background: var(--surface-3); }
.game-switch > summary { min-height: 40px; }
.game-switch:not([open]) .gs-menu { display: none; }
.gs-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-overlay); min-width: 15rem; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface-1); border: 1px solid var(--border-control); border-radius: var(--radius-md); }
.gs-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.gs-menu a:hover { background: var(--surface-3); }
.gs-menu a[aria-current="page"] { font-weight: 600; }
.gs-state { color: var(--text-subtle); font-size: var(--text-xs); font-weight: 400; }
.gs-sep { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--border); }
.gs-short { display: none; }

/* Disclosures. .more is the quiet "How this is sourced" note, .fold a bordered row that opens a block (builds, attachment types).
   Both are native <details>, so the content stays in the HTML when closed. */
.caret { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
details[open] > summary > .caret { transform: rotate(180deg); }
.more { margin: 0 0 var(--space-3); max-width: 64ch; }
.more > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--text); }
.more-body { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-muted); font-size: var(--text-sm); }
.more-body > :last-child { margin-bottom: 0; }
.more-body .plain-list { padding-left: 1.1em; }
.community { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.community .tag { flex: none; }
.community-text { min-width: 0; max-width: 62ch; }
.community-box { display: grid; justify-items: start; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.community-box p { margin: 0; }
.folds { margin-top: var(--space-3); }
.fold + .fold { margin-top: var(--space-2); }
.fold > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { border-color: var(--border-strong); background: var(--surface-2); }
.fold > summary > .caret { margin-left: auto; color: var(--text-muted); }
.fold-h { flex: 1; min-width: 0; margin: 0; font-size: var(--text-md); }
.fold-h .meta { font-weight: 400; }
.fold-body { padding: var(--space-4) 0 var(--space-3); }
.fold[open] { margin-bottom: var(--space-3); }

/* Community tier lists (see /tier-list/): one band per tier, a coloured letter tile and a grid of weapon cards.
   --tier comes from data-tier. The letter, not the colour, carries the rank. */
.tiers { --tile: 3.5rem; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tier-row { --tier: var(--border-strong); display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); gap: var(--space-2); }
.tier-row[data-tier="S"] { --tier: var(--tier-s); }
.tier-row[data-tier="A"] { --tier: var(--tier-a); }
.tier-row[data-tier="B"] { --tier: var(--tier-b); }
.tier-row[data-tier="C"] { --tier: var(--tier-c); }
.tier-row[data-tier="D"] { --tier: var(--tier-d); }
.tier-letter { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--tile); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--tier); color: var(--tier-ink); font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.tier-guns { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-1); background: color-mix(in srgb, var(--tier) 6%, var(--surface-1)); }
.tier-gun { display: grid; align-content: start; justify-items: center; gap: 6px; border-radius: var(--radius-md); color: var(--text); text-align: center; text-decoration: none; }
.tier-gun:hover { color: var(--text); }
.tg-frame { display: block; width: 100%; aspect-ratio: 8 / 3; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); transition: border-color var(--dur-fast) var(--ease-out); }
.tg-frame img { width: 100%; max-width: none; height: 100%; border-radius: 0; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.tg-frame .glyph { width: 70%; height: 100%; margin: 0 auto; }
.tier-gun:hover .tg-frame, .tier-gun:focus-visible .tg-frame { border-color: var(--tier); }
.tier-gun:hover .tg-frame img { transform: scale(1.05); }
.t-name { font-size: var(--text-sm); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.t-apex { padding: 0 7px; border: 1px solid var(--border-control); border-radius: 999px; }
.t-trend { display: inline-flex; align-items: center; gap: 4px; }
.t-trend svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-trend[data-trend="up"] { color: var(--positive); }
.t-trend[data-trend="down"] { color: var(--negative); }
.t-trend[data-trend="same"] { color: var(--text-subtle); }
.t-trend[data-trend="new"] { color: var(--info); }
.tier-source { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.nm .ico { width: 26px; height: 26px; }
.nm img.ico { width: 32px; height: 32px; }

/* Official artwork, cropped from Activision's blog post (see /credits/) */
img.ico { object-fit: contain; border-radius: 4px; }
.wthumb { width: 100%; max-width: 88px; height: auto; flex: none; border-radius: 4px; }
.rows .wthumb { max-width: 56px; }
table.data .wlink { min-width: 12rem; }
.weapon-hero { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.weapon-pic { margin: 0 0 var(--space-4); }
/* Weapon page head: picture beside the intro from 900px up, so the builder button is in the first screen */
@media (min-width: 900px) {
  .weapon-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); column-gap: var(--space-6); align-items: start; }
  .weapon-head > * { grid-column: 1; }
  .weapon-head > .weapon-pic { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
}

/* Rank meter */
.meter { display: inline-flex; align-items: center; gap: var(--space-3); }
.meter-bar { display: block; width: 96px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.meter-text { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }

/* Lists */
.plain-list { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.plain-list li { margin-bottom: var(--space-2); }
.facts-list { list-style: none; margin: 0; padding: 0; max-width: 56rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.facts-list li { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: var(--space-4); padding: 10px var(--space-4); font-size: var(--text-sm); }
.facts-list li + li { border-top: 1px solid var(--border); }
.facts-list .k { color: var(--text-muted); font-weight: 600; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); max-width: 58ch; }
dl.facts dt { color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); }
dl.facts dd { margin: 0; }
dl.defs { margin: 0 0 var(--space-3); }
dl.defs dt { margin-top: var(--space-3); font-weight: 700; }
dl.defs dd { margin: 2px 0 0; color: var(--text-muted); }
.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; }
.rows li + li { border-top: 1px solid var(--border); }
.rows a { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); text-decoration: none; font-size: var(--text-sm); }
.rows a:hover { background: var(--surface-2); }
.rows .r-name { font-weight: 600; }
.rows .r-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.link-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.link-cloud a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: none; background: var(--surface-1); }
.link-cloud a:hover { background: var(--surface-3); color: var(--text); }
.prose-wrap h3 { margin-top: var(--space-4); font-size: var(--text-md); }
.prose-wrap h3 a { display: inline-flex; align-items: center; min-height: 32px; }

/* Q&A (kept open so the answers stay in the initial view of the page) */
.qa-list { max-width: 58ch; }
.qa { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.qa:first-child { border-top: 0; padding-top: 0; }
.qa h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: 1.35; }
.qa p { margin: 0; color: var(--text-muted); }

.pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); font-size: var(--text-sm); }
.pager a, .link-line a { display: inline-flex; align-items: center; min-height: 32px; }
.game-card h2 a { display: inline-block; padding: 3px 0; }
.prose h2 { margin-top: var(--space-5); }
.prose { max-width: var(--prose-w); }

/* Footer: a navigation row (the six sections), the legal line, then the data and legal links. Links are padded to stay easy targets. */
.site-footer { margin-top: var(--space-6); padding: var(--space-4) 0 var(--space-6); border-top: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted); font-size: var(--text-sm); }
.site-footer p { margin: 0 0 var(--space-2); max-width: 60ch; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }
.foot-nav, .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
.foot-nav { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.foot-nav a, .foot-links a { display: inline-flex; align-items: center; min-height: 32px; }
.foot-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

.game-list { list-style: none; margin: 0; padding: 0; }
.game-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.game-links a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 720px) {
  :root { --text-3xl: 1.75rem; --text-xl: 1.25rem; }
  .topbar-in { gap: var(--space-3); padding: 0 var(--space-3); }
  .gs-long { display: none; }
  .gs-short { display: inline; }
  .gs-menu { position: fixed; top: var(--header-h); left: var(--space-3); right: var(--space-3); min-width: 0; }
  .facts-list li { grid-template-columns: 1fr; gap: 2px; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dd { margin-bottom: var(--space-2); }
  .rows a { grid-template-columns: 44px 1fr; }
  .rows .r-meta { grid-column: 2; }
  .glyph { width: 36px; height: 11px; }
  .btn { min-height: 44px; }
  table.data th, table.data td { padding: 10px; }
  table.data thead th { white-space: normal; }
  .nm { gap: var(--space-2); }
  .nm .ico { width: 22px; height: 22px; }
  .nm img.ico { width: 28px; height: 28px; }
  table.data-gear th, table.data-gear td { padding: 8px; }
  .meter { gap: var(--space-2); }
  .meter-bar { width: 56px; }
  .tiers { --tile: 2.5rem; }
  .tier-letter { font-size: var(--text-xl); }
  .tier-guns { gap: var(--space-2); padding: var(--space-2); }
  .link-cloud a, .foot-nav a, .foot-links a, .prose-wrap h3 a, .game-links a, .more > summary, .pager a, .link-line a { min-height: 44px; }
  .crumbs a { min-height: 32px; }
  .foot-nav, .foot-links { column-gap: var(--space-4); }
}
@media (max-width: 480px) {
  .tier-guns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 320px phones: logo, game switcher and Menu together are about 6px too wide at the normal sizes */
@media (max-width: 359px) {
  .topbar-in { gap: var(--space-2); padding: 0 var(--space-2); }
  .brand-logo { height: 26px; }
  .game-switch > summary, .menu > summary { padding-inline: 8px; }
}