:root {
  --bg: #fdfdfb; --fg: #1d1d1b; --muted: #5c5c57; --line: #deded8; --panel: #f3f3ef; --link: #1a5fb4;
  --control: #8d8d86;
  --t1: #1f7a3a; --t2: #2f5f9e; --t3: #7a5a12; --t4: #6b6b66; --t5: #8a8a84;
  --lostfill: #e0e0d9; --heldfill: #5cb572; --partialfill: #c0992a;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1d1b; --fg: #ecece7; --muted: #b3b3ab; --line: #3a3a36; --panel: #262624; --link: #78aeff;
    --control: #6b6b64;
    --t1: #6fcf8a; --t2: #86b0ea; --t3: #d9b25a; --t4: #a8a8a1; --t5: #86867f;
    --lostfill: #363632; --heldfill: #7ccd8e; --partialfill: #d7b355;
  }
}

* { box-sizing: border-box; }
/* Room for the scrollbar on every page, so a short page lines up with a long one */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--link); }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; }
/* Headings and prose are set in a serif; the list, the filters and the file details keep the interface font. */
h1, .intro, .news, .section-head h2, .panel.notes, .footer { font-family: var(--serif); }
h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 1.6rem; line-height: 1.25; font-weight: 700; }
h1 .logo { flex: none; width: 40px; height: 40px; }
/* The site's pages, linked under the heading on each */
/* Two rows: the archive (Home to Sites), then the game data (Items onwards). */
.site-nav { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; font-family: var(--serif); font-size: 1.05rem; }
.nav-row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom: 2px solid var(--fg); }
.intro { margin: 0 0 24px; }
.intro p { margin: 0 0 12px; }
.intro p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.footer { margin: 48px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; text-align: center; }
.footer p { margin: 0 auto 4px; max-width: 640px; text-wrap: balance; }
.footer p:last-child { margin-bottom: 0; }
.empty { margin: 0; color: var(--muted); font-style: italic; }

/* What's new: dated entries, newest first */
.news { margin: 0 0 24px; font-size: 14px; }
.news h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.news ul { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; margin: 3px 0; }
.news time { font-variant-numeric: tabular-nums; }

/* What the page could not use from its data, and why */
.problems { margin: 0 0 20px; padding: 8px 14px; background: var(--panel); border-left: 3px solid var(--t3); font-size: 14px; }
.problems summary { cursor: pointer; font-weight: 600; }
.problems ul { margin: 6px 0 2px; padding-left: 1.2em; }
.problems li { margin: 2px 0; overflow-wrap: anywhere; }
.fatal { margin: 0; padding: 10px 14px; background: var(--panel); border-left: 3px solid var(--t3); }

/* The survivors at a glance: one notch per x.y update, its patches rolled in */
.strip-labels { display: flex; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.strip-labels span { min-width: 0; white-space: nowrap; }
.strip { display: flex; gap: 6px; align-items: flex-end; height: 30px; margin-bottom: 28px; }
.strip-group { min-width: 0; display: flex; gap: 2px; align-items: flex-end; }
.cell { display: block; flex: 1 1 0px; height: 30px; position: relative; }
.cell.preserved, .swatch.preserved { background: var(--heldfill); }
.cell.partial, .swatch.partial { background: var(--partialfill); }
.cell.lost, .swatch.lost { background: var(--lostfill); }
.year { position: absolute; top: calc(100% + 6px); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.year.left { left: 0; }
.year.right { right: 0; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { display: inline-block; width: 8px; height: 16px; flex: none; }

/* The filter bar */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 28px 0 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.filters .range, .filters label { display: flex; align-items: center; gap: 6px; }
.filters .spacer { flex: 1 1 auto; }
.fsel { font: inherit; font-size: 14px; min-height: 32px; padding: 0 4px; border: 1px solid var(--control); border-radius: 0; background: var(--bg); color: var(--fg); cursor: pointer; }
.fclear { font: inherit; font-size: 14px; padding: 0 2px; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; }
.nomatch { margin: 28px 0 0; color: var(--muted); font-style: italic; }

/* A title's section, and the list of its versions and files */
.section { margin-top: 30px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.1rem; margin: 0; }
.section-head h2 span { font-weight: 400; color: var(--muted); }
.labels, .row { display: grid; grid-template-columns: 76px 92px 80px 84px minmax(0, 1fr) 14px; column-gap: 12px; align-items: baseline; }
.labels { padding: 8px 6px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.list-end { border-top: 1px solid var(--line); }

.row { font-size: 15px; line-height: 1.45; padding: 5px 6px; border-top: 1px solid var(--line); }
.row.major { padding: 7px 6px; }
.row:hover { background: var(--panel); }
.ver { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.major .ver { font-weight: 650; }
.date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.date.unknown { font-style: italic; color: var(--muted); }
.engine { font-size: 12px; letter-spacing: .04em; }
.main { min-width: 0; display: flex; align-items: baseline; gap: 4px 10px; }
.changes { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.toggles { flex: none; display: grid; grid-template-columns: 74px 80px; gap: 6px; }
.permalink { justify-self: end; color: var(--muted); text-decoration: none; }
.fname-cell { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }

.badge { display: inline-block; font-size: 12.5px; font-weight: 600; border: 1px solid currentColor; padding: 0 5px; line-height: 1.5; white-space: nowrap; }
.badge.preserved { color: var(--bg); background: var(--t1); border-color: var(--t1); }
.badge.partial { color: var(--bg); background: var(--t3); border-color: var(--t3); }
.badge.lost { color: var(--muted); }

/* The two buttons of a row: its files, then its release notes, each in a fixed slot */
.pt { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 0 8px 0 6px; font: inherit; font-size: 12.5px; line-height: 1.7; white-space: nowrap; color: var(--fg); background: transparent; border: 1px solid var(--control); border-radius: 0; cursor: pointer; }
.pt:hover { border-color: var(--fg); }
/* the arrow before each button's text, turned down while its panel is open */
.pt::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; forced-color-adjust: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E") center / 10px 10px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E") center / 10px 10px no-repeat; }
.pt[aria-expanded="true"] { background: var(--panel); border-color: var(--muted); }
.pt[aria-expanded="true"]::before { transform: rotate(90deg); }
.pf { grid-column: 1; }
.pn { grid-column: 2; }

/* What a row opens */
.panel { margin: 0 0 8px 6px; padding: 0 14px; border-left: 3px solid var(--line); font-size: 14px; }
.panel.notes { padding: 10px 14px; font-size: 16px; overflow-wrap: anywhere; }
/* A closed panel is hidden="until-found", so find-in-page can open it; that hides what is inside the panel
   but not the panel's own box, so the box gives up its padding and margin while closed. */
.panel[hidden] { margin: 0; padding: 0; border: 0; }
/* Without scripts, and in an archived copy whose data did not load, every panel shows open and the controls that
   need a script are left out; index.html marks a browser that runs scripts with the class js. */
html:not(.js) .filters, html:not(.js) .toggles { display: none; }
html:not(.js) .panel[hidden] { display: block; content-visibility: visible; margin: 0 0 8px 6px; padding: 0 14px; border-left: 3px solid var(--line); }
html:not(.js) .panel.notes[hidden] { padding: 10px 14px; }
.note { margin: 0 0 10px; padding: 8px 12px; background: var(--bg); border-left: 3px solid var(--t3); }
.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }
.origin { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.notes h3 { font-size: 1rem; margin: 16px 0 6px; font-weight: 600; }
blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); }
hr { border: 0; border-top: 1px dashed var(--line); margin: 16px 0; }
ol.sources { padding-left: 1.4em; margin: 0; }
ol.sources li { margin: 4px 0; }
.tier { display: inline-block; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; padding: 0 5px; margin-right: 4px; white-space: nowrap; }
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }
.meta { color: var(--muted); font-size: .85rem; }

.card { padding: 10px 0; }
.card + .card { border-top: 1px solid var(--line); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.card-head .badge { margin-left: auto; }
.fname { font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }
.noname { font-style: italic; color: var(--muted); }
.flabel { font-size: 13px; white-space: nowrap; }
.card-meta { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card-note { margin: 4px 0 0; }
.card-sources { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; margin-top: 8px; }
.card-sources > * { padding: 7px 0; }
/* a line above every source but the first, across its content: children alternate label, content */
.card-sources > :nth-child(2n+4) { border-top: 1px solid var(--line); }
.src-label { color: var(--muted); }
.src { min-width: 0; }
.src-thumb { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.src-thumb > a { flex: none; display: block; }
.thumb { width: 64px; height: 64px; object-fit: contain; flex: none; }
.src-note { margin: 2px 0 0; }
.evidence { display: flex; gap: 8px; margin-top: 3px; font-size: 13px; }
.evidence > span { color: var(--muted); flex: none; }
ul.plain { list-style: none; margin: 0; padding: 0; min-width: 0; }
ul.plain li { margin: 1px 0; }
.url { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }