/* Shared site styles: tokens, the game tab bar, the source viewer, generated pages. */
:root{
  --bg:#0a0b18; --surface:#12142c; --surface-2:#1a1d40; --line:#292c58; --line-soft:#1d1f3b;
  --ink:#e9e7f7; --ink-soft:#a5a1cb; --ink-mute:#6e6b99;
  --amber:#e8a33d; --cyan:#6fc7d4; --coral:#d97f6e; --green:#8fd17a; --violet:#8f7fe0;
  --c64blue:#40318d;
  --fd:'Press Start 2P',monospace; --fb:'IBM Plex Sans',system-ui,sans-serif; --fm:'IBM Plex Mono',ui-monospace,monospace;
}
body.site{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.65;margin:0;padding:0 0 5rem}
.site a{color:var(--cyan);text-decoration:none}
.site a:hover{text-decoration:underline}
.site .wrap{max-width:900px;margin:0 auto;padding:0 24px}
.site h1,.site h2,.site h3{font-weight:600;color:var(--ink);margin:1.4em 0 .5em;line-height:1.3}
.site h1{font-family:var(--fd);font-size:20px;line-height:1.6}
.site h2{font-size:21px}.site h3{font-size:17px}
.site p{margin:0 0 1em}
.site code{font-family:var(--fm);font-size:.92em;color:var(--cyan)}
.site pre{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;overflow-x:auto;font-family:var(--fm);font-size:13px;line-height:1.5}
.site table{border-collapse:collapse;width:100%;margin:0 0 1.4em;font-size:14.5px}
.site th,.site td{border-bottom:1px solid var(--line-soft);padding:7px 10px;text-align:left;vertical-align:top}
.site th{color:var(--ink-soft);font-weight:500;font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.site .tablewrap{overflow-x:auto}
.site ul,.site ol{padding-left:1.4em}
.site .eyebrow{font-family:var(--fm);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0 0 8px}
.site .mute{color:var(--ink-mute)}
.site .hero{padding:48px 24px 28px;text-align:center;border-bottom:1px solid var(--line-soft)}
.site .hero h1{margin:0 0 14px}
.site .hero .sub{max-width:560px;margin:0 auto;color:var(--ink-soft)}

/* tab bar, injected on every page of a game */
.gametabs{background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--fm);font-size:13px;position:sticky;top:0;z-index:20}
.gametabs .in{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:44px}
.gametabs .crumb{color:var(--ink-mute);margin-right:14px;letter-spacing:.04em}
.gametabs .crumb a{color:var(--ink-soft)}
.gametabs a.tab{color:var(--ink-soft);padding:12px 12px;border-bottom:2px solid transparent;text-decoration:none}
.gametabs a.tab:hover{color:var(--ink)}
.gametabs a.tab.on{color:var(--amber);border-bottom-color:var(--amber)}
.gametabs .tier{margin-left:auto;color:var(--ink-mute);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.gametabs .tier b{color:var(--amber);font-weight:500}

/* catalogue */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:block;color:var(--ink)}
.card:hover{border-color:var(--violet);text-decoration:none}
.card .t{font-weight:600;font-size:17px;margin:0 0 4px}
.card .m{font-family:var(--fm);font-size:12px;color:var(--ink-mute)}
.card .mini{margin-top:12px}
.card .mini canvas{border-radius:4px}
.card .tierb{display:inline-block;margin-top:10px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.card .shot{display:block;width:100%;aspect-ratio:8/5;object-fit:contain;background:#000;border:1px solid var(--line-soft);border-radius:8px;margin:0 0 14px;image-rendering:pixelated}
.card .shot.missing{background:repeating-linear-gradient(45deg,#0a0b18,#0a0b18 10px,#12142c 10px,#12142c 20px)}

/* source viewer */
.src{display:grid;grid-template-columns:280px 1fr;max-width:1400px;margin:0 auto;min-height:70vh}
.src .side{border-right:1px solid var(--line);padding:16px;position:sticky;top:45px;align-self:start;height:calc(100vh - 45px);overflow:auto;font-family:var(--fm);font-size:12.5px}
.src .side input[type=text]{width:100%;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:7px 9px;border-radius:6px;font-family:var(--fm);font-size:12.5px;margin-bottom:10px}
.src .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.src .chip{border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink-mute);cursor:pointer;user-select:none;font-size:11.5px}
.src .chip.on{color:var(--amber);border-color:var(--amber)}
.src .opts{color:var(--ink-mute);font-size:11.5px;margin:6px 0 12px;display:flex;gap:12px;flex-wrap:wrap}
.src .opts label{cursor:pointer}
.src .idx a{display:flex;gap:8px;padding:3px 4px;border-radius:4px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;overflow:hidden}
.src .idx a:hover{background:var(--surface-2);color:var(--ink)}
.src .idx a .a{color:var(--ink-mute);width:44px;flex:none}
.src .idx a .k{margin-left:auto;color:var(--ink-mute);font-size:10.5px}
.src .idx a.unc{opacity:.55}
.src .main{padding:16px 24px;font-family:var(--fm);font-size:13px;line-height:1.55;overflow-x:auto}
.src .row{display:grid;grid-template-columns:60px 90px 220px 1fr;gap:12px;padding:1px 6px;border-radius:4px;align-items:baseline}
.src .row.nobytes{grid-template-columns:60px 0 220px 1fr}
.src .row.nobytes .b{display:none}
.src .row:hover{background:var(--surface-2)}
.src .row.hl{background:rgba(232,163,61,.18);outline:1px solid var(--amber)}
.src .row{scroll-margin-top:60px}
.src .row .a{color:var(--ink-mute)}
.src .row .a a{color:inherit}
.src .row .b{color:var(--ink-mute);font-size:11.5px;white-space:nowrap;overflow:hidden}
.src .row .l{color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src .row .l .xr{color:var(--ink-mute);font-size:10.5px;margin-left:6px;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:0 6px}
.src .row .i{white-space:pre-wrap}
.src .row .i .m{color:var(--ink)}
.src .row .i .o{color:var(--cyan)}
.src .row .i a{color:var(--cyan)}
.src .row .i .s{color:var(--green);opacity:.85;margin-left:14px}
.src .row.data .i .o{color:var(--violet)}
.src .row.text .i .o{color:var(--coral)}
.src .cmt{margin:14px 0 4px;padding:10px 12px;background:var(--surface);border-left:3px solid var(--amber);border-radius:0 8px 8px 0;color:var(--ink-soft);font-family:var(--fb);font-size:14px;line-height:1.55;white-space:pre-wrap;max-width:70ch}
.src .gap{color:var(--ink-mute);padding:8px 6px;font-size:11.5px;border-top:1px dashed var(--line-soft);border-bottom:1px dashed var(--line-soft);margin:8px 0}
.src .note{color:var(--ink-mute);font-size:11.5px}
.src .xlist{position:absolute;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;z-index:5;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.src .xlist a{display:block;color:var(--cyan);padding:1px 0}
.src .hidden{display:none}
.facts{max-width:900px;margin:0 auto;padding:12px 24px 24px}
details.factsbox{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:6px 18px;margin:20px 0}
details.factsbox summary{cursor:pointer;font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:8px 0}
@media (max-width:900px){.src{grid-template-columns:1fr}.src .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.src .row{grid-template-columns:56px 1fr}.src .row .b,.src .row .l{grid-column:2}}