/* Author: GPT-6.1 Sol
Date: 29-October-2026
PURPOSE: Responsive editorial layout for the static synthetic-game catalog.
SRP/DRY check: Pass — one stylesheet, no UI framework or copied brand system.
Updated 30-October-2026, Claude Sonnet 5.5 Medium: lead section and featured cards; same day, a slim header, tighter cards and the why note. */
:root{--ink:#182b29;--paper:#f5f1e8;--line:#c7c9bb;--accent:#b33f24;--muted:#52635b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 Georgia,serif}a{color:inherit;text-underline-offset:5px}a:hover{color:var(--accent)}a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header,main,footer{max-width:1360px;margin:auto;padding:0 5vw}header{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--line)}.wordmark{font:700 17px/1.2 'Courier New',monospace;letter-spacing:.08em;text-decoration:none}.wordmark span{display:block;font-size:10px;margin-top:7px;color:var(--muted)}nav{display:flex;gap:30px;font:14px Arial,sans-serif}nav a{white-space:nowrap}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:8vw;padding:72px 0}.eyebrow{font:12px 'Courier New',monospace;letter-spacing:.13em;color:var(--accent)}h1{font-weight:400;font-size:clamp(56px,6.8vw,102px);line-height:.98;letter-spacing:-.055em;margin:25px 0}h1 em{color:var(--accent);font-weight:400}.intro{max-width:490px;color:var(--muted);font-size:20px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px;font:14px Arial,sans-serif}.primary{display:inline-block;background:var(--ink);color:var(--paper);padding:16px 23px;text-decoration:none;font:14px Arial,sans-serif}.primary:hover{background:var(--accent);color:white}.hero-art{margin:0;background:#183b35;padding:32px;transform:rotate(2deg);color:var(--paper)}.hero-art img{display:block;width:100%;image-rendering:pixelated;aspect-ratio:1;object-fit:contain;background:#000}.hero-art figcaption{font:12px/1.8 'Courier New',monospace;padding-top:22px}.hero-art span{color:#bcc9be}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principles strong{font:700 14px Arial,sans-serif}.principles p{font-size:16px;color:var(--muted);margin-bottom:0}section#collection{padding:65px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}h2{font-size:clamp(28px,3.3vw,44px);line-height:1.1;font-weight:400;margin:16px 0}.section-heading>p{font:13px 'Courier New',monospace}.controls{display:flex;gap:24px;align-items:end;padding:24px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px;font:13px Arial,sans-serif}.controls label{display:flex;flex-direction:column;gap:8px}.controls input,.controls select{border:1px solid var(--line);border-radius:0;background:transparent;padding:12px;color:var(--ink);font:15px Arial,sans-serif}.controls>a{margin-left:auto;padding-bottom:10px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}.game{border-bottom:1px solid var(--line);padding-bottom:18px}.game img{width:100%;display:block;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;background:#0d1816}.game h3{font:20px 'Courier New',monospace;margin:14px 0 8px}.game .links{display:flex;justify-content:space-between;gap:10px;font:12px Arial,sans-serif}.training{display:grid;grid-template-columns:1fr 1fr;gap:9vw;padding:60px 0;border-top:1px solid var(--line)}.training p{color:var(--muted)}.training ol{list-style-type:decimal-leading-zero;margin:0;padding-left:35px}.training li{padding:15px 0 15px 15px;border-bottom:1px solid var(--line)}.training li::marker{color:var(--accent);font:16px 'Courier New',monospace}.training strong{font:700 16px Arial,sans-serif}.training li p{margin-bottom:0;font-size:16px}.release-note{border-top:1px solid var(--line);padding:32px 0 60px;max-width:820px}.release-note h2{font-size:26px}.release-note p{font-size:16px;color:var(--muted)}footer{border-top:1px solid var(--line);display:flex;gap:28px;justify-content:space-between;padding-top:24px;padding-bottom:32px;font:12px Arial,sans-serif}#error{padding:20px;border:1px solid var(--accent)}@media(max-width:850px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{gap:35px}.hero-art{padding:18px}.controls{flex-wrap:wrap}.controls>a{margin-left:0}.principles{gap:22px}}@media(max-width:600px){header{min-height:52px}nav{gap:14px;font-size:12px}.wordmark{font-size:13px}.wordmark span{display:none}.hero{grid-template-columns:1fr;padding:40px 0}.hero-art{max-width:340px;margin:10px auto}.principles,.training{grid-template-columns:1fr;gap:20px}.principles p{margin-top:6px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.section-heading{display:block}.controls label{width:100%}.controls input,.controls select{width:100%}.training{padding:35px 0}footer{flex-wrap:wrap;gap:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;padding:18px 0 6px}.lead h1{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.1;margin:0}.lead .intro{font-size:16px;margin:0;max-width:none}
.featured{padding:0 0 12px}.feature{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.screen{margin:0;background:#183b35;padding:18px;transform:rotate(-1.5deg);color:var(--paper)}.feature:nth-child(even) .screen{transform:rotate(1.5deg)}
.screen img{display:block;width:100%;height:auto;image-rendering:pixelated;aspect-ratio:1;background:#000}.screen figcaption{font:12px/1.8 'Courier New',monospace;padding-top:18px;color:#bcc9be}
.feature h2{font:700 clamp(44px,6vw,76px)/1 'Courier New',monospace;letter-spacing:-.03em;margin:8px 0 16px}.note{font-size:clamp(19px,2vw,23px);max-width:580px;margin:0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;font:15px/1.45 Arial,sans-serif;margin:14px 0;max-width:580px}.facts dt{font:12px 'Courier New',monospace;letter-spacing:.12em;color:var(--accent);padding-top:3px}.facts dd{margin:0}
.strip{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;max-width:580px}.strip span{aspect-ratio:1;background:#000 no-repeat;background-size:calc(var(--n) * 100%) 100%}
.strip-label{font:11px 'Courier New',monospace;letter-spacing:.12em;color:var(--muted);margin:10px 0 0}.feature .actions{margin-top:16px}
.fine{font:13px/1.5 Arial,sans-serif;color:var(--muted);max-width:640px;margin:0}
.why-line{border-top:1px solid var(--line);padding:12px 0 22px;margin:0;font:15px Arial,sans-serif}
.essay{max-width:700px;padding:18px 0 40px}.essay h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;line-height:1.08;margin:0 0 6px}
.essay .deck{font-size:19px;color:var(--muted);margin:0 0 4px}.essay .byline{font:12px 'Courier New',monospace;letter-spacing:.1em;color:var(--accent);margin:0 0 14px}
.essay h2{font-size:clamp(22px,2.4vw,28px);margin:28px 0 8px}.essay p,.essay li{font-size:18px}.essay ul{padding-left:22px}.essay li{margin:0 0 12px}.essay li::marker{color:var(--accent)}
.game.is-featured h3::after{content:'FEATURED';font:700 10px Arial,sans-serif;letter-spacing:.1em;color:var(--paper);background:var(--accent);padding:3px 7px;margin-left:10px;vertical-align:middle}
@media(max-width:850px){.feature{grid-template-columns:1fr;gap:18px;padding:16px 0}.screen{max-width:380px;margin:0 auto;padding:14px}}
@media(max-width:600px){.feature h2{font-size:48px}.facts{grid-template-columns:1fr;gap:2px 0}.facts dd{margin-bottom:10px}.strip{gap:3px}}
.lead-line{margin:10px 0;font:15px/1.4 Arial,sans-serif;color:var(--muted)}#count{color:var(--ink);font-weight:700}
.game img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000}
.info{min-width:0}.name{font:700 26px/1 'Courier New',monospace;text-decoration:none;display:block;margin-bottom:6px}.pick .facts,.game .facts{font:12px/1.35 Arial,sans-serif;gap:2px 8px;margin:0 0 8px}.facts dt{font-size:10px;letter-spacing:.06em}
#games.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 10px}.game{padding:0;border:0}.game .name{font-size:17px;margin:4px 0}.game .facts{display:block}.game .facts dt{display:none}.game .facts dd{margin:0}
main>.fine{margin:12px 0 18px;max-width:none}
@media(max-width:520px){#games.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Updated 02-November-2026, Claude Opus 5.5 Medium: the funnel on the numbers page, big figure left, plain words right. */
.funnel{display:grid;grid-template-columns:auto 1fr;gap:0 18px;margin:8px 0 0;font:17px/1.4 Arial,sans-serif}.funnel dt{font:700 26px/1.3 'Courier New',monospace;color:var(--accent);text-align:right;white-space:nowrap;border-top:1px solid var(--line);padding:6px 0}.funnel dd{margin:0;border-top:1px solid var(--line);padding:10px 0 6px}
@media(max-width:520px){.funnel dt{font-size:20px}}
.play{display:inline-block;font:700 12px Arial,sans-serif;letter-spacing:.08em;background:var(--accent);color:#fff;padding:5px 10px;margin:0 0 8px;text-decoration:none}.play:hover{color:#fff;background:var(--ink)}
/* Updated 02-November-2026, Claude Sonnet 5.5 Medium: the why page as a picture-led read: a mosaic of opening frames under the title, then text beside a game picture, two columns on a wide screen, one on a phone. */
.longread{max-width:1100px;padding:10px 0 36px}.longread h1{font-size:clamp(30px,4vw,46px)}.longread .deck{margin:0 0 12px}
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0 0 6px;background:#183b35;padding:4px}.mosaic a{display:block}.mosaic img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000}
.beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:clamp(20px,4vw,48px);align-items:start;padding:6px 0 10px;border-top:1px solid var(--line)}.beat>div>h2:first-child{margin-top:12px}
.shot{margin:14px 0 0;background:#183b35;padding:8px;color:var(--paper)}.shot img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000}.shot figcaption{font:12px/1.5 'Courier New',monospace;padding-top:8px;color:#bcc9be}.shot a{color:var(--paper)}.shot a:hover{color:#e9b9a8}
.shot.wide{grid-column:1/-1;margin:0 0 12px}
@media(max-width:850px){.beat{grid-template-columns:1fr;gap:0}.mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}.shot{max-width:320px}.shot.wide{max-width:none}}

/* Updated 02-November-2026, Claude Opus 5.5 High: data-dense picks. Six small cards to a row on a laptop, three on a tablet, two on a phone; one dialog holds a game's write-up. */
#featured{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 8px;align-items:stretch}
.pick{display:flex;flex-direction:column;gap:0;padding:4px;background:#183b35;color:var(--paper);border:0;text-align:left;cursor:pointer;font:inherit}
.pick:hover,.pick:focus-visible{background:var(--accent)}
.pick img{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;background:#000}
.pick .head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 0;font:700 15px/1.2 'Courier New',monospace}.pick .head span{font:10px Arial,sans-serif;color:#bcc9be}
.pick .keys{padding:0 2px;font:10px/1.5 Arial,sans-serif;color:#bcc9be;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .hook{padding:2px 2px 2px;font:12px/1.35 Arial,sans-serif;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lead-line{margin:6px 0 8px;font:14px/1.45 Arial,sans-serif}
.clone{font:12px 'Courier New',monospace;background:#e7e2d4;padding:1px 5px;white-space:nowrap}
#panel{width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:0;background:var(--paper);color:var(--ink);overflow:auto}
#panel::backdrop{background:rgba(10,20,18,.72)}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#183b35;color:var(--paper);position:sticky;top:0}
.panel-title{margin:0;font:700 22px/1 'Courier New',monospace}.close{background:none;border:0;color:var(--paper);font-size:20px;cursor:pointer;padding:2px 6px}
.panel-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;padding:12px}
.panel-body .side img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000;margin-bottom:4px}.panel-body .strip{gap:2px;max-width:none}
.panel-body .meta{font:12px Arial,sans-serif;color:var(--muted);margin:6px 0}.play.big{display:block;text-align:center;font-size:13px;padding:8px}.source{font:12px Arial,sans-serif}
.panel-body .part{margin:0 0 10px}.panel-body .part h3{font:700 11px Arial,sans-serif;letter-spacing:.12em;color:var(--accent);margin:0 0 2px}
.panel-body .part p,.panel-body .rules li{margin:0;font:14px/1.5 Georgia,serif}.panel-body .part p.lead{font-size:15px}
.panel-body .rules{margin:0;padding-left:18px}.panel-body .rules li{margin:0 0 4px}.panel-body .rules li::marker{color:var(--accent)}
.panel-body .said{margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--accent);font-style:italic;font-size:14px;background:rgba(179,63,36,.06)}
@media(max-width:1000px){#featured{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){#featured{grid-template-columns:repeat(3,minmax(0,1fr))}.panel-body{grid-template-columns:1fr}.panel-body .side{max-width:320px}}
@media(max-width:460px){#featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flag{margin:0 0 8px;padding:7px 10px;border-left:4px solid var(--accent);background:rgba(179,63,36,.09);font:14px/1.45 Arial,sans-serif;color:var(--ink)}
.pick.flagged{box-shadow:inset 0 0 0 2px var(--accent)}
@media(max-width:700px){.clone{white-space:normal;word-break:break-all;display:inline-block;margin:3px 0}}
.panel-body .full{margin:6px 0 0;border-top:1px solid var(--line);padding-top:6px}.panel-body .full summary{cursor:pointer;font:700 11px Arial,sans-serif;letter-spacing:.12em;color:var(--accent);padding:4px 0}
.panel-body .full[open] summary{margin-bottom:6px}