@font-face{font-family:Plex;src:url('/fonts/plex.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:Space;src:url('/fonts/space.woff2') format('woff2');font-display:swap;font-weight:500}
:root{--paper:#f6f2e9;--ink:#101010;--muted:#56534d;--line:#a9a59d;--accent:#eadcb8;color-scheme:light}
:root.night-mode{--paper:#151713;--ink:#eee9dc;--muted:#b9b4aa;--line:#77776e;--accent:#413821;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1rem}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.7 Plex,'Courier New',monospace}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:4px}button{min-height:44px;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:8px 16px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}
.shell{max-width:1240px;min-height:100dvh;margin:auto;border-inline:1px solid var(--line);background:var(--paper)}.masthead{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}.wordmark{padding:16px 24px;font:500 24px/1.4 Space,Arial,sans-serif;text-decoration:none;min-width:220px}.wordmark span{display:block;font:11px/1.6 Plex,monospace;color:var(--muted)}nav{display:flex;flex:1;flex-wrap:wrap}nav a{display:flex;align-items:center;min-height:48px;padding:16px 24px;border-left:1px solid var(--line);text-decoration:none}nav a[aria-current]{background:var(--ink);color:var(--paper)}.theme-button{border:0;border-left:1px solid var(--line);padding:16px 24px;white-space:nowrap}
.intro{padding:56px 40px 48px;border-bottom:1px solid var(--ink);max-width:100%}.label{color:var(--muted);font-size:11px;margin:0 0 12px}h1,h2,h3{font-family:Space,Arial,sans-serif;font-weight:500;letter-spacing:-.04em}h1{font-size:clamp(40px,6vw,76px);line-height:1.06;margin:16px 0 24px;max-width:900px}.intro-copy{max-width:64ch;color:var(--muted);margin:0}.section-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 40px;background:var(--accent);border-bottom:1px solid var(--ink)}.section-heading h2{font:inherit;margin:0}.section-heading span{font-size:12px}.game-grid{list-style:none;margin:0;padding:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-bottom:1px solid var(--line)}.game-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--paper)}.shot{margin:0;aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--line)}.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.night-mode .shot img{filter:brightness(.88)}.card-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px}.card-body .label{margin:0;display:flex;gap:12px;align-items:baseline}.number{font:500 13px/1 Space,sans-serif;color:var(--ink)}h3{font-size:clamp(24px,2.2vw,30px);line-height:1.1;margin:0}h3 a{text-decoration:none}h3 a::after{content:'';position:absolute;inset:0}.card-body>p:not(.label){margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.6}.play-link{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--ink)}.game-card:hover .play-link,.game-card:focus-within .play-link,button:hover:not(:disabled){background:var(--ink);color:var(--paper)}.game-card:hover h3 a{text-decoration:underline}.game-card:focus-within{outline:3px solid var(--ink);outline-offset:4px}.game-card h3 a:focus-visible{outline:none}.save-note{padding:32px 40px;max-width:850px}.save-note h2{font-size:28px;margin:0}.save-note p{color:var(--muted)}.save-note a{display:inline-block;padding-block:8px;min-height:44px}footer{border-top:1px solid var(--ink);padding:16px 40px;display:flex;justify-content:space-between;gap:16px;font-size:12px}footer a{min-height:44px;display:flex;align-items:center}footer span{align-self:center}.skip-link{position:absolute;left:16px;top:-100px;background:var(--ink);color:var(--paper);padding:12px;z-index:10}.skip-link:focus{top:8px}
.transfer-content{padding:40px;max-width:900px}.transfer-content h1{font-size:clamp(36px,5vw,56px)}.transfer-content h2{font-size:26px;margin-top:32px}.transfer-content label{display:block;margin:16px 0 8px}.transfer-content select{padding:12px;max-width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--ink)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.actions a{min-height:44px;padding:8px;display:inline-block}.status{border:1px solid var(--line);padding:16px;min-height:60px;margin-block:20px}.status[data-error=true]{border:2px solid var(--ink)}.transfer-content small{display:block;color:var(--muted)}.transfer-content input[type=file]{max-width:100%;padding-block:8px}.confirm-box{padding:20px;border:2px solid var(--ink)}.confirm-box label{display:flex;gap:12px;align-items:start}.confirm-box input{min-width:20px;min-height:20px}.confirm-box a{display:inline-block;min-height:44px;padding-block:8px}
@media(min-width:1300px){body{background-image:linear-gradient(#10101012 1px,transparent 1px),linear-gradient(90deg,#10101012 1px,transparent 1px);background-size:24px 24px}.night-mode body{background-image:linear-gradient(#eee9dc12 1px,transparent 1px),linear-gradient(90deg,#eee9dc12 1px,transparent 1px)}}
@media(max-width:800px){.masthead{flex-wrap:wrap}.wordmark{flex:1;min-width:0}.theme-button{order:1}nav{order:2;flex-basis:100%;border-top:1px solid var(--line)}nav a{flex:1;justify-content:center;padding:12px 8px;font-size:12px}nav a:first-child{border-left:0}.game-grid{padding:24px;gap:16px}.intro,.transfer-content{padding:32px 24px}.section-heading{padding:12px 24px}.save-note{padding:24px}footer{padding:16px 24px;flex-wrap:wrap}}
@media(max-width:1100px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.game-grid{grid-template-columns:1fr}.game-card{display:grid;grid-template-columns:132px minmax(0,1fr)}.shot{aspect-ratio:auto;height:100%;min-height:180px;border-bottom:0;border-right:1px solid var(--ink)}.card-body{padding:14px}h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
