/* Emulator World. Base layout first; the magazine design at the end sets the tokens and look. */
:root {
  --bg: #0d0e1a;
  --bg-raised: #14152b;
  --surface: #181a33;
  --border: #2a2d52;
  --text: #e9e8f4;
  --muted: #9c9dc2;
  --brand: #a99cf0;
  --brand-ink: #0d0e1a;
  --amber: #f2b84b;
  --ok: #5fd38d;
  --warn: #f2b84b;
  --off: #8a8ba8;
  --grid-line: rgb(169 156 240 / 0.06);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 24px rgb(0 0 0 / 0.25);

  --radius: 10px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}


*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
code, .mono { font-family: var(--font-mono); }
code { font-size: 0.9em; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 5px; padding: 0.05em 0.35em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 500 1.15rem var(--font-display); }
.brand b { color: var(--brand); font-weight: 700; }
.brand__mark { width: 26px; height: 26px; color: var(--brand); }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 500; font-size: 0.95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); background: var(--bg-raised); }

/* Hero */
.hero {
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--border);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.eyebrow { color: var(--amber); margin: 0 0 16px; font-size: 0.95rem; letter-spacing: 0.04em; }
.cursor { display: inline-block; width: 0.6em; height: 1.05em; margin-left: 4px; vertical-align: -0.15em; background: currentColor; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } html { scroll-behavior: auto; } }
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); max-width: 18ch; }
.lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 62ch; margin: 18px 0 0; }

.stats { display: flex; gap: clamp(20px, 5vw, 48px); margin: 32px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.stat__value { font: 700 2.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: 0.85rem; }

.hero__cta, .detail__links { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 0; }
.button {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
  border-radius: 8px; border: 1px solid var(--brand);
  background: var(--brand); color: var(--brand-ink);
  font-weight: 600; text-decoration: none;
}
.button:hover { filter: brightness(1.08); }
.button--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.button--ghost:hover { border-color: var(--brand); }

/* Sections */
.section { padding: clamp(32px, 6vw, 56px) 0; }
.section + .section { padding-top: 0; }
.section__title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500; }

.page-head { padding: clamp(36px, 7vw, 64px) 0 clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--border); position: relative; }
.page-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent, var(--brand)); }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crumbs { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.crumbs a { color: var(--muted); }

/* Systems */
.system-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.system-card a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 18px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-left: 4px solid var(--accent, var(--brand));
  color: var(--text); text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.system-card a:hover { transform: translateY(-2px); border-color: var(--accent, var(--brand)); }
.system-card__meta { font-size: 0.8rem; color: var(--muted); }
.system-card__name { font: 700 1.3rem var(--font-display); }
.system-card__count { color: var(--muted); font-size: 0.9rem; }
.system-card--add a { background: transparent; border-style: dashed; border-left-style: dashed; box-shadow: none; }

.system-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.system-row {
  display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  padding: 22px; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.system-row h2 { font-size: 1.5rem; }
.system-row h2 a { color: var(--text); text-decoration: none; }
.system-row p { margin: 6px 0 0; max-width: 70ch; }
.system-row__count { white-space: nowrap; color: var(--muted); text-decoration: none; }
.system-row__count b { font: 700 1.8rem var(--font-display); color: var(--text); margin-right: 4px; }
@media (max-width: 600px) { .system-row { flex-direction: column; gap: 10px; } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters label { display: contents; }
.filters input, .filters select {
  font: inherit; font-size: 0.92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  min-height: 40px; padding: 0 12px; max-width: 100%;
}
.filters select { padding-right: 28px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.filters input { flex: 1 1 260px; }
.filters input:focus, .filters select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
@media (max-width: 600px) { .filters select { flex: 1 1 calc(50% - 4px); } }
.results { color: var(--muted); font-size: 0.85rem; margin: 0 0 14px; }
.empty { padding: 32px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }

/* Emulator cards */
.emu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.emu-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: border-color 0.15s ease;
}
.emu-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; opacity: 0.9; }
.emu-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.emu-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.emu-card__title { font-size: 1.3rem; }
.emu-card__title a { color: var(--text); text-decoration: none; }
.emu-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.emu-card__title a:focus-visible { outline: none; }
.emu-card:has(.emu-card__title a:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.emu-card__desc { margin: 0; color: var(--muted); font-size: 0.95rem; flex: 1; }
.emu-card__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--muted); font-family: var(--font-mono); padding-top: 10px; border-top: 1px solid var(--border); }
.stars { display: inline-flex; align-items: center; gap: 4px; color: var(--amber); white-space: nowrap; }
.stars svg, .inline-icon { width: 13px; height: 13px; }
.inline-icon { color: var(--amber); margin-right: 4px; vertical-align: -1px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chip { font: 500 0.75rem/1 var(--font-mono); padding: 5px 8px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); }
.chip--system { color: var(--text); border-color: color-mix(in srgb, var(--chip) 55%, transparent); background: color-mix(in srgb, var(--chip) 16%, transparent); }

.status { font: 500 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 8px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--active { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.status--inactive { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.status--discontinued { color: var(--off); background: color-mix(in srgb, var(--off) 14%, transparent); }
.page-head h1 .status { font-size: 0.8rem; }

/* Detail */
.detail__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); padding-top: 40px; padding-bottom: 56px; }
@media (max-width: 820px) { .detail__body { grid-template-columns: 1fr; } }
.facts { margin: 0; display: grid; border-top: 1px solid var(--border); }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }
.facts--inline { display: flex; flex-wrap: wrap; gap: 8px 32px; border: 0; margin-top: 24px; }
.facts--inline div { display: block; border: 0; padding: 0; }
.facts--inline dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.feature-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.feature-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 0.9rem; }
.feature-list li::before { font-family: var(--font-mono); font-weight: 500; }
.feature-list .yes { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--text); }
.feature-list .yes::before { content: "✓"; color: var(--ok); }
.feature-list .no { color: var(--muted); opacity: 0.6; }
.feature-list .no::before { content: "·"; }

/* Prose (contribute page) */
.prose { padding-top: 32px; padding-bottom: 64px; max-width: 860px; margin-left: auto; margin-right: auto; }
.prose h2 { font-size: 1.6rem; margin: 40px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.prose li { margin: 6px 0; }
.prose pre { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--muted); font-weight: 500; }
.prose td:first-child { white-space: nowrap; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--muted); font-size: 0.9rem; }
.site-footer__inner p { margin: 4px 0; max-width: 72ch; }
.site-footer b { color: var(--text); }

/* Images */
.shot { margin: 0; position: relative; background: #000; overflow: hidden; display: grid; place-items: center; }
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shot__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8a8a8a; font-size: 0.95rem; padding: 12px; text-align: center; }
.shot__icon { width: 56px; height: 56px; }
.detail__shot .shot__icon { width: 88px; height: 88px; }
.shot__empty a { color: #d0d0d0; }
.emu-card__shot { aspect-ratio: 16 / 10; margin: -18px -18px 4px; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 10%, #07080f); }
.emu-card::before { z-index: 1; }
.detail__shot { margin-top: 32px; border-radius: var(--radius); border: 1px solid var(--border); max-height: 640px; min-height: 160px; }
.detail__shot img { max-height: 600px; }
.detail__shot figcaption { position: static; width: 100%; background: var(--bg-raised); padding: 8px 12px; }
.credit { font-size: 0.78rem; color: var(--muted); }
.credit a { color: var(--muted); }

.system-card a { padding-top: 0; overflow: hidden; }
.system-card__img { display: block; width: calc(100% + 36px); height: auto; margin: 0 -18px 12px; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; padding: 10px; }
.system-card--add a { padding-top: 18px; justify-content: flex-end; }

.system-row { align-items: center; }
.system-row__img { flex: 0 0 200px; align-self: stretch; display: grid; place-items: center; background: #f2f1ec; border-radius: 8px; padding: 8px; }
.system-row__img img { width: 100%; height: auto; }
.system-row__body { flex: 1; }
@media (max-width: 600px) { .system-row__img { flex-basis: auto; width: 100%; } }

.page-head__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; }
@media (max-width: 860px) { .page-head__split { grid-template-columns: 1fr; } }
.system-photo { margin: 0; }
.system-photo img { width: 100%; height: auto; background: #f2f1ec; border-radius: var(--radius); padding: 12px; display: block; }
.system-photo figcaption { margin-top: 6px; }

.prose--wide { max-width: 1160px; }


/* Attribute extras */
.tag { font-size: 0.75rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; }
.tag--partial, .tag--experimental { color: var(--warn); }
.tag--complete { color: var(--ok); }
.formats code { margin: 0 2px 4px 0; display: inline-block; }
.feature-list + .section__title { margin-top: 24px; }
.formats-table td:first-child { white-space: nowrap; width: 1%; }
.compare.formats-table :is(th, td) { text-align: left; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.compare th, .compare td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font-weight: 600; vertical-align: bottom; }
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .no { color: var(--muted); opacity: 0.5; }
.table-scroll { overflow-x: auto; }
.plain-list { padding-left: 1.1em; }
.plain-list li { margin: 6px 0; }

/* Spec block on emulator cards: accuracy meter, license, first release. */
.emu-card__specs { display: flex; margin: 0; }
.spec dd { margin: 0; }
.meter { display: inline-flex; gap: 3px; vertical-align: -1px; }
.meter i { display: block; width: 10px; height: 10px; border: 1.5px solid currentColor; }
.meter i.on { background: currentColor; }
body { font-size: 18px; }
.section__title { text-transform: none; letter-spacing: 0; }

/* =====================================================================
   Retro packaging: 80s computer box art. Black covers with slanted
   rainbow stripes, slanted condensed headlines, rounded cartridge-label
   cards. Anton for display, Source Serif 4 for reading.
   ===================================================================== */
:root {
  --bg: #eceef1; --bg-raised: #e1e4e8; --surface: #fff; --border: #111; --text: #111; --muted: #4a4f57;
  --brand: #b51d26; --brand-ink: #fff; --amber: #b51d26; --ok: #2f8a3c; --warn: #9a6a00; --off: #666;
  --s1: #e4002b; --s2: #ff7f2a; --s3: #e9b949; --s4: #3fa34d; --s5: #00b3c7;
  --rainbow: linear-gradient(90deg, var(--s1) 0 20%, var(--s2) 20% 40%, var(--s3) 40% 60%, var(--s4) 60% 80%, var(--s5) 80% 100%);
  --ink: #000; --card-dark: #000; --chip-dark: #242424;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "Source Serif 4", Georgia, serif;
  --radius: 16px; --shadow: none; --grid-line: transparent;
  --slant: skewX(-8deg);
  color-scheme: light;
}
html body { line-height: 1.65; }
html :is(h1, h2, h3) { font-weight: 400; letter-spacing: 0.005em; }
html code { border-radius: 6px; border-color: #c5c9cf; background: #fff; }

/* Header */
html .site-header { background: var(--ink); border-bottom: 1px solid #2a2a2a; backdrop-filter: none; }
html .brand { color: #fff; font: 400 1.65rem/1 var(--font-display); gap: 12px; }
html .brand > span:last-child { display: inline-block; transform: var(--slant); }
html .brand b { color: #fff; font-weight: 400; }
html .brand__stripes { display: inline-flex; gap: 3px; transform: var(--slant); }
html .brand__stripes i { display: block; width: 6px; height: 26px; }
html :is(.brand__stripes, .hero__stripes) i:nth-child(1) { background: var(--s1); }
html :is(.brand__stripes, .hero__stripes) i:nth-child(2) { background: var(--s2); }
html :is(.brand__stripes, .hero__stripes) i:nth-child(3) { background: var(--s3); }
html :is(.brand__stripes, .hero__stripes) i:nth-child(4) { background: var(--s4); }
html :is(.brand__stripes, .hero__stripes) i:nth-child(5) { background: var(--s5); }
html .site-nav a { color: #fff; font: 600 1rem var(--font-body); border-radius: 8px; }
html .site-nav a:hover { background: #2a2a2a; color: #fff; }
html .site-nav a[aria-current="page"] { background: #fff; color: #000; }

/* Home cover */
html .hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-bottom: 0; padding: clamp(56px, 8vw, 96px) 0; }
html .hero__stripes { position: absolute; top: 0; bottom: 0; right: -140px; width: min(46vw, 640px); display: flex; transform: skewX(-24deg); }
html .hero__stripes i { flex: 1; }
html .hero .wrap { position: relative; }
html .eyebrow { display: none; }
html .hero h1 { color: #fff; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 0.95; max-width: 13.5ch; text-transform: uppercase; transform: var(--slant); transform-origin: left bottom; }
html .hero .lede { color: #e6e6e6; font-size: 1.3rem; max-width: 34ch; }
html .stats { gap: 14px; margin-top: 40px; }
html .stat { background: #fff; color: #000; border-radius: 14px; padding: 12px 20px; transition: background 0.12s ease, transform 0.12s ease; }
html .stat:hover { background: var(--s3); transform: translateY(-2px); }
html .stat:focus-visible { outline: 3px solid var(--s3); outline-offset: 3px; }
html .stat__value { color: #000; font-size: 2.6rem; font-weight: 400; }
html .stat__label { color: #000; font: italic 1rem/1.2 var(--font-body); }
@media (max-width: 900px) {
  html .hero__stripes { width: 46vw; right: -26vw; opacity: 0.9; }
  html .hero h1, html .hero .lede { max-width: 100%; }
}

/* Buttons: dark on light pages, light on the black covers. */
html .button { background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 0 26px; font: 400 1.25rem var(--font-display); letter-spacing: 0.02em; min-height: 52px; }
html .button--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
html .button:hover { filter: none; background: var(--s3); color: #000; box-shadow: none; }
html :is(.hero, .page-head) .button { background: #fff; color: #000; }
html :is(.hero, .page-head) .button--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px #fff; }
html :is(.hero, .page-head) .button:hover { background: var(--s3); color: #000; box-shadow: none; }

/* Section titles */
html .section__title, html .catalog__title { font: 400 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-display); color: var(--ink); margin: 0 0 24px; padding: 0; border: 0; transform: var(--slant); transform-origin: left bottom; }
html .catalog__title { font-size: clamp(2.8rem, 6vw, 4.4rem); }

/* System cards: cartridge labels with a stripe band in the system's colour. */
html .system-grid { gap: 22px; }
html .system-card a { position: relative; border: 0; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 2px var(--ink); overflow: hidden; padding: 0 18px 18px; transition: transform 0.12s ease; }
html .system-card a::before { content: ""; display: block; height: 10px; margin: 0 -18px; background: linear-gradient(90deg, var(--accent, var(--brand)) 0 40%, var(--s1) 40% 52%, var(--s2) 52% 64%, var(--s3) 64% 76%, var(--s4) 76% 88%, var(--s5) 88% 100%); }
html .system-card a:hover { transform: translateY(-3px); }
html .system-card__img { background: #fff; margin: 0 -18px 10px; width: calc(100% + 36px); padding: 16px; border: 0; }
html .system-card__name { font: 400 1.6rem/1.05 var(--font-display); }
html .system-card__meta { font: italic 0.95rem var(--font-body); color: var(--muted); }
html .system-card__count { align-self: flex-start; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent, var(--brand)) 60%, #000); color: #fff; font-weight: 600; font-size: 0.9rem; }
html .system-card--add a { background: transparent; box-shadow: none; border: 2px dashed var(--ink); padding-top: 18px; }
html .system-card--add a::before { display: none; }
html .system-card--add .system-card__count { background: var(--ink); }

/* Filters */
html .filters :is(input, select) { border: 2px solid var(--ink); border-radius: 10px; background-color: #fff; font: 1rem var(--font-body); min-height: 46px; }
html .results { font: italic 1rem var(--font-body); color: var(--muted); }

/* Emulator and hardware cards: black, rounded, screenshot inset. */
html .emu-grid { gap: 24px; }
html .emu-card { border: 0; border-radius: 18px; background: var(--card-dark); color: #fff; padding: 0 0 18px; gap: 10px; box-shadow: none; overflow: hidden; }
html .emu-card::before { display: none; }
html .emu-card:hover { border-color: transparent; }
html .emu-card__head { order: -1; padding: 14px 18px 0; align-items: center; }
/* Synthetic italic instead of a transform: a transform would shrink the
   title link's card-sized click area (::after) to the title itself. */
html .emu-card__title { font: italic 400 1.9rem/1.05 var(--font-display); }
html .emu-card { position: relative; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
html .emu-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--s3); }
html .emu-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 1; }
html .emu-card__title a { color: #fff; }
html .emu-card__title a:focus-visible { outline: none; }
html .emu-card:has(.emu-card__title a:focus-visible) { outline: 3px solid var(--s3); outline-offset: 3px; }
html .emu-card__shot { margin: 0 14px; width: auto; border: 0; border-radius: 10px; background: #1b1b1b; }
html .emu-card > :not(.emu-card__shot, .emu-card__head) { margin-left: 18px; margin-right: 18px; }
html .chips { margin-top: 4px; }
html .chip { border: 0; border-radius: 6px; background: var(--chip-dark); color: #e6e6e6; font: 600 0.82rem var(--font-body); padding: 4px 9px; }
html .chip--system { background: color-mix(in srgb, var(--chip) 65%, #000); color: #fff; }
html .chip--mobile { background: #fff; color: #000; }
html .emu-card__desc { color: #e0e0e0; font-size: 1rem; }
html .port-card__game, html .hardware-card .emu-card__desc { color: #e0e0e0; }
html .status { font: 600 0.85rem/1 var(--font-body); letter-spacing: 0; text-transform: none; padding: 5px 12px; border-radius: 999px; border: 0; transform: none; }
html .status::before { display: none; }
html .status--active { background: var(--s4); color: #000; }
html .status--inactive { background: var(--s3); color: #000; }
html .status--discontinued { background: #5c5c5c; color: #fff; }
html .emu-card__specs { flex-wrap: wrap; gap: 6px 22px; padding-top: 12px; border-top: 1px solid #333; }
html .spec dt { font: italic 0.85rem var(--font-body); color: #b5b5b5; }
html .spec dd { font: 400 1.1rem var(--font-display); color: #fff; }
html .meter { gap: 3px; margin-right: 6px; }
html .meter i { width: 16px; height: 9px; border: 0; border-radius: 2px; background: #3a3a3a; }
html .meter i.on:nth-child(1) { background: var(--s1); }
html .meter i.on:nth-child(2) { background: var(--s2); }
html .meter i.on:nth-child(3) { background: var(--s3); }
html .meter i.on:nth-child(4) { background: var(--s4); }
html .emu-card__foot { border-top: 0; margin-top: 2px; padding-top: 0; font: italic 0.95rem var(--font-body); color: #b5b5b5; }
html .stars { color: var(--s3); font-style: normal; font-weight: 600; }
html .shot__empty { color: #8a8a8a; }
html .hardware-card__photo { background: #fff; }
html .hardware-card__photo img { object-fit: contain; padding: 8px; }
/* Above the card-sized title link so the license and source links stay clickable. */
html .hardware-card__credit { margin-top: -4px; font-size: 0.75rem; color: #a8a8a8; position: relative; z-index: 2; }
html .hardware-card__credit a { color: #a8a8a8; }

/* Inner page heads: black covers, slanted titles. */
html .page-head { background: var(--ink); color: #fff; border-bottom: 0; }
html .page-head::before { height: 8px; background: var(--accent, transparent); }
html .page-head h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.95; transform: var(--slant); transform-origin: left bottom; }
html .page-head .lede, html .page-head .muted { color: #d6d6d6; }
html .page-head a { color: var(--s3); }
html :is(.crumbs, .crumbs a) { font: italic 1rem var(--font-body); color: #d6d6d6; }
html .page-head .status--active { background: var(--s4); }
html .facts--inline { border-top: 1px solid #3a3a3a; padding-top: 14px; }
html .facts.facts--inline div { border-bottom: 0; }
html .facts--inline dt { text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-style: italic; color: #b5b5b5; }
html .facts--inline dd { color: #fff; }
html .system-photo img { border-radius: var(--radius); background: #fff; border: 0; }
html .system-photo figcaption, html .system-photo .credit a { color: #b5b5b5; }

/* Detail pages */
html .facts { border-top: 0; }
html .facts div { border-bottom: 1px solid #c5c9cf; }
html .facts dt { font-style: italic; color: var(--muted); }
html .feature-list li { border-radius: 8px; }
html .feature-list .yes { background: var(--ink); color: #fff; }
html .feature-list .yes::before { color: var(--s4); }
html .feature-list .no { opacity: 0.5; }
html .detail__shot { border: 0; border-radius: 18px; background: var(--ink); }
html .detail__shot figcaption { background: var(--ink); color: #b5b5b5; font-style: italic; }
html .detail__shot .credit a { color: #d6d6d6; }
html .tag { border-radius: 999px; border-width: 1.5px; }

/* Tables */
html .compare { background: #fff; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--ink); }
html .compare th, html .compare td { border-bottom: 1px solid #dde0e4; }
html .compare thead th { background: var(--ink); color: #fff; border-bottom: 0; }
html .compare thead a { color: #fff; }
html .compare .yes { color: var(--ok); }

/* Systems page rows */
html .system-row { background: #fff; border: 0; border-radius: var(--radius); box-shadow: 0 0 0 2px var(--ink); position: relative; overflow: hidden; padding-top: 30px; }
html .system-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, var(--accent, var(--brand)) 0 40%, var(--s1) 40% 52%, var(--s2) 52% 64%, var(--s3) 64% 76%, var(--s4) 76% 88%, var(--s5) 88% 100%); }
/* Italic, not a transform: a transform would shrink the row-sized click area. */
html .system-row h2 { font: italic 400 2rem var(--font-display); }
html .system-row { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
html .system-row:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--ink); }
html .system-row__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
html .system-row:has(.system-row__link:focus-visible) { outline: 3px solid var(--s3); outline-offset: 3px; }
html .system-row__link:focus-visible { outline: none; }
html .system-row h2 a { color: var(--ink); }
html .system-row__img { border-radius: 12px; border: 0; background: #fff; }

html .prose pre { border-radius: 12px; border: 2px solid var(--ink); background: #fff; }
html .empty { border: 2px dashed var(--ink); border-radius: var(--radius); color: var(--ink); }

/* Footer with a stripe band */
html .site-footer { position: relative; background: var(--ink); color: #ccc; border-top: 0; padding-top: 36px; }
html .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--rainbow); }
html .site-footer b { color: #fff; }
html .site-footer a { color: var(--s3); }

/* Three-state feature data: has it / partly / doesn't have it / not known yet. */
.compare td.yes { color: var(--ok); }
.compare td.lacks { color: #111; font-weight: 700; }
.compare td.unknown { color: #8a8a8a; font-style: italic; }
.compare td.partial { color: #b8530f; font-size: 1.15em; cursor: help; }
.feature-list--states { align-items: start; }
.feature-list--states .lacks { color: #111; text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }
.feature-list--states .lacks::before { content: "✗"; font-family: var(--font-body); }
.feature-list--states .unknown { color: #5f646b; border: 1px dashed #a9aeb5; opacity: 1; }
.feature-list--states .unknown::before { content: "?"; font-family: var(--font-body); }
.feature-list--states .partial { background: #fff1e5; color: #111; flex-wrap: wrap; }
.feature-list--states .partial::before { content: "◐"; color: #b8530f; font-family: var(--font-body); }
.feature-note { flex-basis: 100%; font-size: 0.8rem; font-style: italic; color: #444; padding-left: 1.4em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 28px; color: var(--muted); }
.legend span::before { margin-right: 5px; font-weight: 700; }
.legend .yes::before { content: "✓"; color: var(--ok); }
.legend .partial::before { content: "◐"; color: #b8530f; }
.legend .lacks::before { content: "✗"; color: #111; }
.legend .unknown::before { content: "?"; color: #8a8a8a; }

/* Compact home cover on desktop, so the systems below peek into view. */
@media (min-width: 900px) {
  html .hero { padding: 44px 0 48px; }
  html .hero__stripes { width: min(36vw, 500px); right: -170px; }
  html .hero .wrap { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: center; }
  html .hero :is(h1, .lede) { grid-column: 1 / -1; }
  html .hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.1rem); max-width: 21ch; }
  html .hero .lede { margin-top: 14px; max-width: 52ch; font-size: 1.2rem; }
  html .hero .stats { grid-column: 1; margin-top: 24px; }
  html .hero .stat { padding: 8px 16px; }
  html .hero .stat__value { font-size: 2.1rem; }
  html .hero .hero__cta { grid-column: 2; margin-top: 24px; align-self: center; }
  html .hero + .section { padding-top: 40px; }
}