:root {
  color-scheme: light;
  --ink: #0b1420;
  --muted: #657083;
  --paper: #f4f2ec;
  --panel: #fffef9;
  --line: #d8d4c8;
  --blue: #075d74;
  --cyan: #2ac7cf;
  --green: #14734a;
  --red: #a33131;
  --amber: #a15b07;
  --shadow: 0 16px 50px rgba(28, 37, 49, .08);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(rgba(8,43,55,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(8,43,55,.028) 1px, transparent 1px), var(--paper);
  background-size: 32px 32px;
  font-family: Bahnschrift, "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
}
button, input, select { font: inherit; color: inherit; }
.shell { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 44px 0 72px; }
.masthead { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; border-bottom: 2px solid var(--ink); padding-bottom: 28px; }
.eyebrow { margin: 0 0 9px; color: var(--blue); font: 700 12px/1.2 Consolas, monospace; letter-spacing: .17em; }
h1 { margin: 0; max-width: 800px; font: 800 clamp(34px, 5vw, 68px)/.98 Bahnschrift, sans-serif; letter-spacing: -.045em; }
.intro { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.system-mark { display: flex; align-items: center; gap: 9px; white-space: nowrap; font: 700 11px/1 Consolas, monospace; letter-spacing: .09em; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(20,115,74,.12); }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-top: 0; background: rgba(255,254,249,.72); }
.metrics article { min-height: 104px; padding: 22px; border-right: 1px solid var(--line); }
.metrics article:last-child { border-right: 0; }
.metrics span { display: block; color: var(--muted); font-size: 12px; }
.metrics strong { display: block; margin-top: 8px; font: 800 30px/1 Consolas, monospace; }
.workbench { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(150px, .45fr) minmax(150px, .45fr) auto; gap: 12px; margin: 30px 0; padding: 16px; border: 1px solid var(--line); background: rgba(255,254,249,.96); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.workbench label:not(.import-button) { display: grid; gap: 6px; }
.workbench label > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
input[type="search"], select { width: 100%; height: 43px; border: 1px solid var(--line); border-radius: 2px; padding: 0 12px; background: #fff; outline: 0; }
input[type="search"]:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,93,116,.1); }
.tool-actions { display: flex; align-items: flex-end; gap: 7px; }
.tool-actions button, .import-button, .pagination button { height: 43px; border: 1px solid var(--ink); border-radius: 2px; padding: 0 13px; background: var(--ink); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.tool-actions button:hover, .import-button:hover, .pagination button:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.import-button { display: grid; place-items: center; }
.import-button input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 34px 0 16px; }
.catalog-heading h2 { margin: 0; font-size: 21px; }
.catalog-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.legend, .legacy-count { color: var(--muted); font: 12px/1.4 Consolas, monospace; }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.notice { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #d7aa61; background: #fff4df; color: #70420c; font-size: 13px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; min-height: 220px; }
.game-grid[aria-busy="true"]::before { content: "LOADING CATALOG…"; color: var(--muted); font: 700 13px/1 Consolas, monospace; }
.card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: inherit; text-decoration: none; box-shadow: 0 2px 0 rgba(15,25,38,.03); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.card:hover, .card:focus-visible { z-index: 1; transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 12px 30px rgba(18,50,64,.14); outline: 0; }
.cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #d7dce0; }
.cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.card:hover .cover img { transform: scale(1.025); }
.batch-stamp { position: absolute; left: 8px; top: 8px; padding: 4px 6px; border-radius: 2px; background: rgba(8,20,31,.86); color: #fff; font: 700 10px/1 Consolas, monospace; }
.card-copy { display: grid; gap: 6px; min-height: 91px; padding: 12px; }
.card h3 { overflow: hidden; margin: 0; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.slug { overflow: hidden; color: var(--muted); font: 10px/1.35 Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.status { align-self: end; width: fit-content; border: 1px solid currentColor; border-radius: 999px; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.status-untested { color: #687487; }
.status-pass { color: var(--green); background: #e8f7ef; }
.status-fail { color: var(--red); background: #fff0f0; }
.status-review { color: var(--amber); background: #fff5df; }
.empty { grid-column: 1/-1; padding: 70px 24px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 28px 0 52px; }
.pagination button { min-width: 112px; }
.pagination button:disabled { opacity: .35; cursor: not-allowed; }
#page-label { min-width: 110px; color: var(--muted); text-align: center; font: 12px/1 Consolas, monospace; }
.legacy { padding-top: 30px; border-top: 2px solid var(--ink); }
.legacy-grid { display: grid; grid-template-columns: repeat(2, 190px); gap: 13px; }
.legacy-card { overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: inherit; text-decoration: none; }
.legacy-card img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; }
.legacy-card span { display: block; padding: 12px; font-size: 13px; font-weight: 700; }
@media (max-width: 1050px) { .workbench { grid-template-columns: 1fr 1fr 1fr; } .search-field { grid-column: 1/-1; } .tool-actions { grid-column: 1/-1; } }
@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 680px); padding-top: 24px; }
  .masthead { display: grid; } .system-mark { justify-self: start; }
  .metrics { grid-template-columns: repeat(2, 1fr); } .metrics article { min-height: 84px; border-bottom: 1px solid var(--line); } .metrics article:nth-child(2n) { border-right: 0; } .metrics article:last-child { border-bottom: 0; }
  .workbench { position: static; grid-template-columns: 1fr; } .search-field, .tool-actions { grid-column: auto; } .tool-actions { flex-wrap: wrap; align-items: center; }
  .catalog-heading { align-items: flex-start; display: grid; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .card-copy { min-height: 86px; padding: 10px; }
  .legacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 410px) { .game-grid, .legacy-grid { grid-template-columns: 1fr; } }