/* layout: arcade shelf. Home = grid of cartridge cards. Game page = gallery left, facts and steps right */
:root{
  --bg:#d3e0ac; --panel:#e6efc9; --ink:#18260f; --mute:#4b6034; --line:#2f4a1f; --bezel:#243319; --glass:#b9cc8c;
  --accent:#2d5a1e; --accent-ink:#ecf5cf; --hot:#a8331e; --shadow:#2f4a1f; --warn:#fff0b8; --warn-ink:#4a3600; --bad:#ffd9cf; --bad-ink:#6b1a0a; --good:#d4efc2; --good-ink:#1c4a12;
  --display:"Silkscreen","Courier New",monospace; --body:"VT323","Courier New",monospace; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{--bg:#0c0e22;--panel:#161a3a;--ink:#f3eddb;--mute:#9ea6d6;--line:#3b4390;--bezel:#05060f;--glass:#000;--accent:#ffcc2e;--accent-ink:#1b1500;--hot:#ff5a86;--shadow:#3b4390;--warn:#3a2f08;--warn-ink:#ffe08a;--bad:#3d1420;--bad-ink:#ffb3c4;--good:#10301c;--good-ink:#9be8b0;color-scheme:dark}}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:21px/1.15 var(--body);padding-block:36px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
header{display:flex;flex-direction:column;gap:12px;padding-bottom:22px;border-bottom:4px dashed var(--line)}
h1{font:700 clamp(34px,8vw,76px)/1 var(--display);margin:0;letter-spacing:.04em;text-transform:uppercase;text-shadow:4px 4px 0 var(--shadow)}
h1 a{color:inherit;text-decoration:none}
h1 em{font-style:normal;color:var(--accent)}
.cur{display:inline-block;width:.5em;height:.8em;background:var(--accent);margin-left:.15em;vertical-align:-.05em;animation:blink 1s steps(1) infinite;text-shadow:none}
@keyframes blink{50%{opacity:0}}
.sub{color:var(--mute);font-size:24px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:28px}
.card{background:var(--panel);border:4px solid var(--line);box-shadow:6px 6px 0 var(--shadow);display:flex;flex-direction:column;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:var(--line);color:var(--bg);font:700 11px var(--display);letter-spacing:.12em;text-transform:uppercase}
.bezel{margin:14px 14px 0;padding:10px;background:var(--bezel);border-radius:10px 10px 22px 10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.glass{position:relative;background:var(--glass);aspect-ratio:2/1;overflow:hidden;border:2px solid #000}
.glass img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),linear-gradient(135deg,rgba(255,255,255,.12),transparent 35%)}
.link{cursor:pointer}
.body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
h2{font:700 22px/1.1 var(--display);margin:0;text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
.tag{font:700 11px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
.body p{margin:0;font-size:22px;line-height:1.1}
.actions{display:flex;gap:10px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
button{font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-height:46px;padding:0 14px;border:3px solid var(--ink);background:transparent;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
button.dl{flex:1;background:var(--accent);color:var(--accent-ink)}
button:focus-visible,a:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.back{align-self:flex-start;min-height:40px}
.page{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:820px){.page{grid-template-columns:minmax(0,1fr)}}
.hero{background:var(--panel);border:4px solid var(--line);box-shadow:6px 6px 0 var(--shadow);padding-bottom:14px}
.thumbs{display:flex;gap:10px;padding:12px 14px 0}
.thumbs button{padding:0;min-height:0;width:84px;border:3px solid var(--line);box-shadow:none;background:var(--glass);line-height:0}
.thumbs button[aria-pressed="true"]{border-color:var(--accent);outline:2px solid var(--ink)}
.thumbs img{width:100%;aspect-ratio:2/1;object-fit:cover;image-rendering:pixelated}
.side{display:flex;flex-direction:column;gap:22px;min-width:0}
h3{font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:var(--hot)}
.bigt{font:700 clamp(26px,5vw,40px)/1.05 var(--display);text-transform:uppercase;margin:0;letter-spacing:.03em}
.lead{font-size:25px;line-height:1.1;margin:0}
table{border-collapse:collapse;width:100%;font-size:20px}
td{padding:6px 10px;border:2px solid var(--line);vertical-align:top}
td:first-child{font:700 12px var(--display);letter-spacing:.06em;white-space:nowrap;background:var(--panel)}
.note{padding:12px 14px;border:3px solid var(--line);font-size:21px;line-height:1.15}
.note b{display:block;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.note.smooth{background:var(--good);color:var(--good-ink)}
.note.pauses{background:var(--warn);color:var(--warn-ink)}
.note.heavy{background:var(--bad);color:var(--bad-ink)}
ol{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
ol li{counter-increment:s;padding-left:46px;position:relative;font-size:22px;line-height:1.1}
ol li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:700 14px var(--display)}
code{font:500 14px var(--mono);background:var(--panel);border:2px solid var(--line);padding:1px 6px}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 13px var(--mono);color:var(--mute)}
.pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;font:700 12px var(--display);letter-spacing:.06em;text-transform:uppercase;border:3px solid var(--accent);max-width:calc(100% - 32px);z-index:20;text-align:center}
@media (prefers-reduced-motion:reduce){.cur{animation:none}}

a.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;min-height:46px;padding:0 14px;border:3px solid var(--ink);background:transparent;color:var(--ink);box-shadow:3px 3px 0 var(--ink);text-decoration:none}
a.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
a.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
a.btn.dl{flex:1;background:var(--accent);color:var(--accent-ink)}
.titlelink{color:inherit;text-decoration:none}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 14px 0}
.shots .wide{grid-column:1/-1}
.shots .bezel{margin:0}
.hero .shots{padding-top:14px}
footer{border-top:4px dashed var(--line);padding-top:18px;color:var(--mute);font-size:19px;display:flex;flex-direction:column;gap:6px}
.sr{position:absolute;left:-9999px}
.gp{display:flex;flex-direction:column;gap:24px}.muted{color:var(--mute);margin:10px 0 0;font-size:20px}.muted a{color:var(--hot)}ol b{font-weight:700}