:root {
  --bg: #fbfbfa;
  --fg: #1d1f21;
  --muted: #5d6166;
  --rule: #e2e3e1;
  --panel: #f1f2f0;
  --link: #1f5fbf;
  --code-bg: #eef0ee;
  --playable: #1d7a46;
  --ingame: #1f5fbf;
  --boots: #9a6100;
  --early: #6b6f75;
  --hero: linear-gradient(120deg, #1c7ed6 0%, #7048e8 55%, #c2255c 100%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141517;
    --fg: #e4e5e6;
    --muted: #9ba0a6;
    --rule: #2b2d31;
    --panel: #1c1e21;
    --link: #79a8f2;
    --code-bg: #212327;
    --playable: #4cc27e;
    --ingame: #79a8f2;
    --boots: #e0a540;
    --early: #a0a5ab;
    --hero: linear-gradient(120deg, #15559a 0%, #4c2fa8 55%, #8c1a44 100%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrap { max-width: 52rem; margin: 0 auto; padding: 0 16px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); }
nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; font-size: 0.95rem; }
nav a { color: var(--muted); }

main.wrap { padding-top: 1.5rem; padding-bottom: 2rem; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0.25rem 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }

.lede { font-size: 1.1rem; color: var(--muted); }

code, pre { font: 0.88em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 0.8rem 1rem; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.table-scroll { overflow-x: auto; }

.badge {
  display: inline-block; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  padding: 0.3em 0.6em; border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.badge-playable { color: var(--playable); }
.badge-ingame { color: var(--ingame); }
.badge-boots { color: var(--boots); }
.badge-early { color: var(--early); }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0; }
.card {
  display: block; color: inherit; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 8px; padding: 1rem;
}
.card:hover { text-decoration: none; border-color: var(--muted); }
.card h3 { margin: 0 0 0.1rem; }
.card .game { margin: 0 0 0.6rem; }
.card p.summary { margin: 0.6rem 0 0; font-size: 0.93rem; }

.game { color: var(--muted); margin-top: 0; }
.crumb { margin: 0; font-size: 0.9rem; }

.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.25rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 1rem 0 1.5rem;
}
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; }

.site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.85rem; padding-bottom: 2rem; }

.menu { position: relative; }
.menu summary { cursor: pointer; color: var(--muted); list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " \25BE"; font-size: 0.8em; }
.menu[open] summary, .menu summary:hover { color: var(--fg); }
.menu-panel {
  position: absolute; z-index: 10; top: calc(100% + 0.6rem); left: 0;
  min-width: 15rem; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); padding: 0.4rem 0;
}
.menu-group { padding: 0.3rem 0; }
.menu-group + .menu-group { border-top: 1px solid var(--rule); }
.menu-panel a { display: block; padding: 0.2rem 1rem; }
.menu-system { color: var(--fg); font-weight: 600; }
.menu-panel a.menu-port { color: var(--muted); padding-left: 1.75rem; }
.menu-panel a.menu-port[aria-current="page"] { color: var(--fg); font-weight: 600; }

.badge-system { color: var(--muted); }
.card p.count { color: var(--muted); font-size: 0.85rem; }
.card .branch { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.4rem; }

.commits { list-style: none; padding: 0; margin: 0.5rem 0; }
.commits li { padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
.commits time { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-right: 0.5rem; }
.commits:empty { display: none; }

/* The main page: hero, port tiles in each game's own colours, systems. */
.hero {
  background: var(--hero); color: #fff; border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem; margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgb(60 40 140 / 0.25);
}
.hero h1 { font-size: 2.6rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.hero .lede { color: rgb(255 255 255 / 0.88); margin: 0; }
.hero a { color: #fff; }
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }
.stats li {
  background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.9rem;
}
.stats strong { font-size: 1.05rem; }
.hero-links { margin: 1.1rem 0 0; }
.button {
  display: inline-block; background: #fff; color: #3b2a8c !important; font-weight: 600;
  border-radius: 8px; padding: 0.45rem 0.9rem;
}
.button:hover { text-decoration: none; box-shadow: 0 2px 10px rgb(0 0 0 / 0.25); }

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0; }
.tile.theme {
  position: relative; display: flex; flex-direction: column; color: var(--fg);
  border-radius: 10px; overflow: hidden; font-size: 16px;
  border: 1px solid var(--rule); background-attachment: scroll;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12); transition: transform 0.15s, box-shadow 0.15s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(0 0 0 / 0.22); }
.tile header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--head-bg); border-bottom: var(--head-rule); padding: 0.7rem 0.9rem;
}
.tile h3 { margin: 0; font-size: 1.3rem; line-height: 1.15; }
.tile h3 a { color: var(--head-fg); }
.tile h3 a:hover { text-decoration: none; }
/* The whole tile opens the port's page; the date link sits above it. */
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile-system {
  flex: none; font-size: 0.72rem; font-weight: 600; color: #fff;
  background: var(--accent); border-radius: 4px; padding: 0.15em 0.45em;
}
.tile-body { padding: 0.8rem 0.9rem 0.9rem; display: flex; flex-direction: column; flex: 1; }
.tile .game { margin: 0 0 0.5rem; font-size: 0.9rem; }
.tile .badge { align-self: flex-start; }
.tile p.summary { margin: 0.6rem 0; font-size: 0.9rem; flex: 1; }
.tile-updated { margin: 0; font-size: 0.8rem; color: var(--muted); }
.tile-updated a { position: relative; z-index: 1; }

.system-card { border-top: 4px solid var(--accent); }
.system-card:hover { border-color: var(--accent); }
.system-card h3 { display: flex; align-items: center; gap: 0.5rem; }
.system-card h3::before {
  content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--accent);
}
/* Only the newest three; the script puts them first once it has the dates. */
.tiles[data-by-date] .tile:nth-child(n+4) { display: none; }
.more { margin: 0; text-align: right; font-weight: 600; }
.updated { white-space: nowrap; }
tr.group th { padding-top: 1rem; font-size: 0.95rem; color: var(--fg); }
tr.group th a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--fg); }
tr.group th a::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); }

@media (max-width: 30rem) {
  .hero { padding: 1.25rem 1rem 1.1rem; }
  .hero h1 { font-size: 2.1rem; }
}

/* System pages: a hero in the system's accent colour. */
.system-hero {
  background: linear-gradient(125deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #0b0b14));
  color: #fff; border-radius: 14px; padding: 1.25rem 1.5rem 1.4rem; margin-bottom: 1.25rem;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent);
}
.system-hero a { color: #fff; }
.system-hero .crumb a { color: rgb(255 255 255 / 0.8); }
.system-hero h1 { font-size: 2.4rem; margin: 0.2rem 0 0.1rem; }
.system-hero .cpu { margin: 0; color: rgb(255 255 255 / 0.85); }
.system-hero .stats { margin-top: 0.9rem; }
.system-hero code { background: rgb(255 255 255 / 0.18); color: #fff; }
.system .facts { border-top: 3px solid var(--accent); }
.system h2 { border-top: none; border-left: 4px solid var(--accent); padding: 0 0 0 0.6rem; }
.empty {
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px;
  padding: 1rem; color: var(--muted); text-align: center;
}

/* All Ports: status filter. */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.filters button {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.8rem;
}
.filters button[class] { color: var(--fg); }
.filters button span { font-weight: 400; opacity: 0.7; margin-left: 0.2rem; }
.filters button:hover { border-color: currentColor; }
.filters button[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); background: var(--code-bg); }
.filters button[class][aria-pressed="true"] {
  color: var(--stage); border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent);
}
.filters .badge-playable { --stage: var(--playable); }
.filters .badge-ingame { --stage: var(--ingame); }
.filters .badge-boots { --stage: var(--boots); }
.filters .badge-early { --stage: var(--early); }