:root { --bg:#08090b; --ink:#f1f2f1; --muted:#86898b; --line:rgba(255,255,255,.12); --lime:#ae8cff; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 76% 8%, rgba(112,76,180,.1), transparent 22rem),var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; font-size:17px; font-weight:850; letter-spacing:.12em; }
.count { color:var(--muted); font:700 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.12em; }
main { padding:clamp(50px,8vw,116px) clamp(24px,5vw,76px) 80px; }
.intro { max-width:740px; margin-bottom:clamp(62px,9vw,120px); }
.eyebrow { margin:0 0 20px; color:#929597; font:700 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(45px,7vw,94px); font-weight:350; line-height:.93; letter-spacing:-.065em; }
h1 em { color:var(--lime); font-style:normal; font-weight:790; }
.shelf { max-width:1220px; }
.game-grid { display:flex; gap:16px; flex-wrap:wrap; }
.shelf-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
h2 { margin:0; font-size:18px; font-weight:650; letter-spacing:-.035em; }
.shelf-heading span { color:#707376; font:700 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.12em; }
.game-card { width:min(100%,470px); aspect-ratio:1.6/1; position:relative; display:block; overflow:hidden; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#05070b; text-decoration:none; isolation:isolate; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.game-card:hover, .game-card:focus-visible { outline:none; transform:translateY(-6px); border-color:rgba(174,140,255,.68); box-shadow:0 18px 48px rgba(0,0,0,.45); }
.game-card iframe { position:absolute; width:160%; height:160%; top:-30%; left:-30%; border:0; pointer-events:none; filter:brightness(.82) saturate(1.2); z-index:-2; }
.signal-card iframe { filter:brightness(.94) saturate(.92); }
.stack-card iframe { filter:brightness(.94) saturate(1.08); }
.color-card iframe { filter:brightness(.92) saturate(1.08); }
.center-card iframe { filter:brightness(.92) saturate(1.05); }
.reaction-card iframe { filter:brightness(.92) saturate(1.05); }
.scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,5,7,.93) 0%,rgba(4,5,7,.6) 46%,rgba(4,5,7,.08) 100%),linear-gradient(0deg,rgba(4,5,7,.55),transparent 60%); z-index:-1; }
.card-copy { position:absolute; left:25px; bottom:23px; }
.card-copy p, .card-copy small { margin:0; color:#b9add2; font:700 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.14em; }
.card-copy h3 { margin:9px 0 8px; font-size:31px; line-height:.84; letter-spacing:-.06em; font-weight:830; }
.card-copy h3 span { color:var(--lime); font-weight:370; }
.launch { position:absolute; right:20px; top:18px; font:800 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.12em; opacity:.7; transition:opacity .25s; }
.launch b { font-size:16px; vertical-align:-1px; }
.game-card:hover .launch { opacity:1; }
.note { border-top:1px solid var(--line); margin-top:clamp(70px,11vw,150px); padding-top:17px; max-width:470px; color:var(--muted); font-size:14px; line-height:1.55; }
.note p { margin:0; }
footer { padding:23px clamp(24px,5vw,76px); border-top:1px solid var(--line); color:#777a7c; font:700 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.08em; }
footer span { color:#414446; padding:0 7px; }
@media (max-width:600px) { .topbar { height:62px; } main { padding-top:62px; } .intro { margin-bottom:65px; } .game-card { width:100%; border-radius:10px; } .card-copy { left:19px; bottom:18px; } .card-copy h3 { font-size:27px; } footer { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .game-card { transition:none; } }