:root { --ink:#f5f6ff; --blue:#00eaff; --hot:#f35cff; --night:#07122c; --line:#4d6daa; }
* { box-sizing:border-box; }
html { background:var(--night); }
body { min-width:320px; margin:0; color:var(--ink); background-color:var(--night); background-image:linear-gradient(rgba(0,234,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,234,255,.055) 1px,transparent 1px); background-size:28px 28px; font-family:"Courier New",Courier,ui-monospace,monospace; }
.page-shell { width:min(100% - 2rem,68rem); margin:0 auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:2px solid var(--blue); }
.logo { display:block; width:clamp(10rem,16vw,13.5rem); filter:drop-shadow(0 0 10px rgba(0,234,255,.36)); }.logo img { display:block; width:100%; height:auto; }
.status,.eyebrow,.url,footer,.list-heading span,.game-number { font-size:.75rem; letter-spacing:.08em; }.status { margin:0; color:var(--blue); text-align:right; }.status b { display:inline-block; width:.6rem; height:.6rem; margin-right:.35rem; background:var(--hot); box-shadow:0 0 0 2px var(--night),0 0 0 3px var(--hot); }
.intro { padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,4rem); }.eyebrow { margin:0 0 1rem; color:var(--blue); }h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:1.25rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(1.3rem,5.5vw,4.1rem); font-weight:700; letter-spacing:.035em; line-height:1; white-space:nowrap; }.intro-copy { max-width:none; margin-bottom:0; font-size:clamp(.54rem,1.8vw,1.2rem); line-height:1.6; white-space:nowrap; }
.game-list { border:2px solid var(--blue); background:rgba(7,18,44,.92); }.list-heading { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; color:var(--night); background:var(--blue); }.list-heading h2 { margin:0; font-size:.9rem; letter-spacing:.12em; }.list-heading span { color:var(--night); font-weight:700; }
.game-card { padding:1.1rem; border-top:1px solid var(--line); }.game-number { margin-bottom:1.25rem; color:var(--hot); font-weight:700; }.game-body { display:grid; grid-template-columns:clamp(8rem,20vw,14rem) 1fr auto; align-items:end; gap:1.5rem; }.game-shot { width:100%; height:auto; border:2px solid var(--blue); background:var(--night); }h3 { margin-bottom:.65rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(1.8rem,3.8vw,3rem); font-weight:700; letter-spacing:.035em; line-height:1; }.game-body p { max-width:37rem; margin-bottom:0; font-size:1rem; line-height:1.55; }
.launch { display:inline-block; border:2px solid var(--hot); padding:.7rem .85rem; color:var(--ink); background:var(--night); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-decoration:none; white-space:nowrap; }.launch:hover,.launch:focus-visible { color:var(--night); background:var(--hot); outline:none; }.url { margin:1.25rem 0 0; color:var(--blue); }
.featured-game { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:2rem; margin-bottom:2rem; padding:clamp(1.2rem,3vw,2.5rem); border:2px solid var(--hot); background:linear-gradient(135deg,rgba(243,92,255,.14),rgba(0,234,255,.07)),var(--night); box-shadow:0 0 30px rgba(243,92,255,.1); }
.featured-badge { color:var(--hot); font-size:.75rem; font-weight:700; letter-spacing:.1em; line-height:1.6; }
.featured-copy h2 { margin-bottom:1rem; font-size:clamp(2rem,4.6vw,3.7rem); line-height:1; }
.featured-copy p { line-height:1.6; }
.featured-tagline { color:var(--blue); font-weight:700; }
.featured-launch { margin-top:.5rem; padding:1rem; background:var(--hot); color:var(--night); }
.featured-launch:hover,.featured-launch:focus-visible { background:var(--blue); border-color:var(--blue); }
.featured-image-link { display:block; }
.featured-image-link img { display:block; width:100%; height:auto; border:2px solid var(--blue); }
.featured-image-link:focus-visible { outline:2px solid var(--hot); outline-offset:5px; }
@media (max-width:760px) { .featured-game { grid-template-columns:1fr; gap:1.5rem; } }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 0 2rem; color:var(--blue); }
@media (max-width:560px) { .page-shell { width:min(100% - 1.25rem,68rem); }.masthead,footer { align-items:flex-start; flex-direction:column; }.status { text-align:left; }.game-body { grid-template-columns:1fr; }.game-shot { max-width:18rem; }.launch { width:100%; text-align:center; } }