:root {
  --bg: #f7f6f2; --surface: #fff; --text: #1d1d1b; --muted: #6a675f; --border: #dcd8cd;
  --panel: #fbfaf7; --accent: #7a3b1e;
  --ok: #2e7d32; --warn: #b3261e; --access: #2f5f6b; --recommended: #8a5a00;
  --radius-sm: .4rem; --radius: .6rem; --pill: 1rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --surface: #201f1c; --text: #ece9e1; --muted: #a29e93; --border: #3a3831;
    --panel: #1b1a17; --accent: #e0a07a;
    --ok: #81c784; --warn: #ff8a80; --access: #8fc7d3; --recommended: #f0c060;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
.site-header, main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
h1 { margin: 0; font-size: 1.6rem; }
/* The joke line under the wordmark: one of several, picked per page load. */
.tagline { margin: .1rem 0 0; color: var(--accent); font-size: 1rem; font-style: italic; }
h2 { margin-top: 1.5rem; }
h3 { margin: 0 0 .4rem; }
.sub { margin: 0 0 .75rem; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: .5rem; }
button, select, input[type="search"] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .8rem; }
button { cursor: pointer; }
input[type="search"] { width: 100%; max-width: 24rem; margin: .25rem 0 .75rem; }
/* One selected-state treatment for every button: nav, view toggles, pickers, factions. */
button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.banner { max-width: 72rem; margin: 0 auto .5rem; padding: .6rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: .875rem; }
.picker-wrap { margin-bottom: 1rem; }
.picker-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.picker-controls input[type="search"] { margin: 0; flex: 0 1 22rem; }
.picker-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-left: auto; }
.playable-filter { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .875rem; color: var(--muted); cursor: pointer; }
.picker-count { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.picker-empty { margin: .25rem 0 .5rem; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; padding: 0; list-style: none; }
.picker button { width: 100%; text-align: left; }
.picker .group-title { grid-column: 1 / -1; margin: .75rem 0 0; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.picker li[hidden] { display: none; }
/* Locked races stay selectable: muted name, with the chip saying what is missing. */
.race-button.locked .race-name { color: var(--muted); }

/*
 * Tags: one pill shape, three jobs.
 *   .badge  editorial rating for this race        (tinted, no border)
 *   .chip   attribute or count                    (muted, no border)
 *   .chip.ok / .warn / .caution                   (outlined, with glyph)
 * Colour is never the only signal: status chips carry ✓, ✕ or ?.
 */
.badge, .chip {
  display: inline-flex; align-items: center; gap: .25rem; margin-right: .25rem;
  padding: 0 .5rem; border-radius: var(--pill); font-size: .75rem; line-height: 1.7;
  white-space: nowrap;
}
.badge { font-weight: 600; }
.badge.essential, .badge.unlock { color: var(--access); background: color-mix(in srgb, var(--access) 14%, transparent); }
.badge.recommended { color: var(--recommended); background: color-mix(in srgb, var(--recommended) 16%, transparent); }
.badge.optional, .badge.cosmetic { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.chip { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.chip.ok, .chip.warn, .chip.caution { background: transparent; border: 1px solid currentColor; }
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn); }
.chip.caution { color: var(--muted); border-style: dashed; }
.chip.ok::before { content: "✓"; }
.chip.warn::before { content: "✕"; }
.chip.caution::before { content: "?"; }
/* "Complete" is a bonus on top of "playable", not a second answer: same green glyph,
   drawn lighter (faded outline, dimmer label) so the two states read apart at a glance. */
.chip.ok.lite { color: color-mix(in srgb, var(--ok) 55%, var(--muted)); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: .75rem 0; }
/* Left rule = why the card is here: teal for race access, green for free content. */
.card.access-card { border-left: 3px solid var(--access); }
.card.free-card { border-left: 3px solid var(--ok); }
.card-head { display: flex; gap: 1rem; justify-content: space-between; align-items: start; flex-wrap: wrap; }
.card-head h3 { margin: 0 0 .25rem; }
.card-badges { margin: .4rem 0; }
.race-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; justify-content: space-between; }
.race-head h2 { margin: 0; }
.race-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.view-toggle { display: flex; gap: .4rem; }
.copy-link { font-size: .875rem; }
.copy-link.copied { border-color: var(--ok); color: var(--ok); }
.dlc-detail > .copy-link { margin-bottom: .5rem; }
.meta { color: var(--muted); font-size: .875rem; }
.filters { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: .875rem; }
.summary { color: var(--text); margin: .5rem 0; }
.access-note { background: color-mix(in srgb, var(--access) 12%, transparent); padding: .4rem .6rem; border-radius: var(--radius-sm); }
.factions, .check-list, .dlc-list { list-style: none; padding: 0; margin: .5rem 0; }

/* A pick is one thing to own: neutral by default, green when available, red when it is the gap. */
.picks { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pick {
  display: inline-flex; flex-direction: column; gap: .1rem; min-width: 0;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: .35rem .6rem; background: var(--surface);
}
.pick.ok { border-left-color: var(--ok); }
.pick.missing { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.pick.race { border-left-color: var(--muted); }
.pick-name { font-weight: 500; overflow-wrap: anywhere; }
.pick-meta { color: var(--muted); font-size: .75rem; }
.source-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin: .35rem 0; }
.label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.factions { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem; }
.factions li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem; background: var(--surface); }
.faction-button { all: unset; cursor: pointer; display: block; width: 100%; }
.faction-button:hover strong { text-decoration: underline; }
.faction-panel { border-left: 3px solid var(--accent); }
.kind-block { margin: .8rem 0 0; }
.kind-head { display: flex; justify-content: space-between; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: .2rem; }
.entities { list-style: none; padding: 0; margin: .35rem 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.entity { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .875rem; }
.entity-static { align-items: baseline; gap: .35rem; padding: .15rem .45rem; }
.entity-button { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: .35rem; padding: .15rem .45rem; border-radius: inherit; }
.entity-button:hover .entity-name { text-decoration: underline; }
.entity-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.entity-name { font-weight: 500; }
.entity-meta, .entity-src { color: var(--muted); font-size: .75rem; }
.entity-src { border-left: 1px solid var(--border); padding-left: .35rem; }
.row-note { color: var(--muted); font-size: .85rem; margin: .25rem 0; }
.note { color: var(--muted); font-size: .85rem; border-left: 3px solid var(--border); padding-left: .6rem; }
.note.ok { border-left-color: var(--ok); }
.own-toggle { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .875rem; white-space: nowrap; }
.dlc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .4rem; }
.dlc-list-item { text-align: left; display: flex; flex-direction: column; gap: .1rem; }
.dlc-list-name { font-weight: 500; }
.dlc-detail .sources a { margin-right: .5rem; }
.impact { display: flex; flex-direction: column; gap: .3rem; }
.impact-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .35rem .6rem; }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .2rem .8rem; }
.check-list label { display: flex; gap: .5rem; padding: .25rem 0; align-items: baseline; }
a { color: var(--accent); }
@media (max-width: 40rem) {
  h1 { font-size: 1.3rem; }
  .card-head { flex-direction: column; }
  .entities { flex-direction: column; align-items: stretch; }
}

/* The core answer: what to buy to play this race. */
.quick-answer { border-left: 3px solid var(--accent); }
.answer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.answer-head h3 { margin: 0; }
.answer-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .55rem; }
.answer-list > li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .35rem .75rem; align-items: start; }
.answer-key { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .2rem; }
.answer-value { min-width: 0; }
.answer-value > p { margin: 0 0 .2rem; }
.legend { display: grid; gap: .35rem; }

.quick-setup { border-left: 3px solid var(--accent); }
.quick-setup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.quick-setup-head h3 { margin: 0; }
.quick-setup-actions { display: flex; align-items: center; gap: .5rem; }
.quick-setup-clear { padding: .25rem .6rem; font-size: .85rem; }
.quick-setup-clear:disabled { opacity: .5; cursor: default; }
.quick-setup-group { margin-top: .75rem; }
.quick-setup-group h4 { margin: 0 0 .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.quick-setup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.quick-setup-list label { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); cursor: pointer; font-size: .9rem; }
.quick-setup-list li.owned label { border-color: var(--ok); }

.patch-list { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.patch-race { margin: 1rem 0 .2rem; font-size: .95rem; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; overflow-y: auto; background: rgba(0, 0, 0, .55); }
.modal { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); width: min(42rem, 100%); margin: auto; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .75rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 1.3rem; }
.modal-close { flex: none; }
.modal-body { padding: 1rem 1.25rem 1.25rem; }
.entity-facts { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: .3rem .75rem; margin: 0 0 1rem; }
.entity-facts dt { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .15rem; }
.entity-facts dd { margin: 0; overflow-wrap: anywhere; }
.entity-section { margin: 1rem 0 0; }
.entity-section h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: .2rem; }
.entity-sources { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.entity-source { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .65rem; background: var(--surface); }
.entity-source-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.entity-source .source-open { margin-top: .35rem; padding: .2rem .55rem; font-size: .8rem; }
.entity-available { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.entity-available li { font-size: .875rem; }
.entity-note { margin: .35rem 0 0; }
@media (max-width: 40rem) {
  .modal-overlay { padding: .5rem; }
  .modal-head, .modal-body { padding-left: .8rem; padding-right: .8rem; }
  .entity-facts { grid-template-columns: 1fr; gap: .1rem; }
  .entity-facts dt { padding-top: .4rem; }
}

.bundle-summary { border-left: 3px solid var(--accent); padding: .35rem .6rem; margin: .4rem 0 .75rem; background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: var(--radius-sm); }
.bundle-filter { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .875rem; }
.bundle-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .75rem; }
.bundle-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem; }
.bundle-card.owned { border-left-color: var(--ok); }
.bundle-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem .75rem; }
.bundle-toggle { display: inline-flex; align-items: center; gap: .45rem; }
.coverage { display: flex; align-items: center; gap: .6rem; margin: .45rem 0 .2rem; }
.coverage-bar { flex: 1; height: .55rem; background: color-mix(in srgb, var(--border) 55%, transparent); border-radius: var(--pill); overflow: hidden; }
.coverage-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.coverage-bar.full span { background: var(--ok); }
.coverage-label { color: var(--muted); font-size: .8rem; min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.bundle-note { margin: .3rem 0 0; }
.bundle-missing { align-items: flex-start; margin-top: .45rem; }
.bundle-missing .label { padding-top: .45rem; }
.bundle-missing .picks { margin: 0; }
@media (max-width: 40rem) {
  .answer-list > li { grid-template-columns: 1fr; gap: .1rem; }
  .answer-key { padding-top: 0; }
}