:root{--bg:#080B17;--surface:#141826;--surface-soft:#1C2233;--text:#EDEFF7;--muted:#9FA8C1;--border:#2A3248;--primary:#F5746F;--on-primary:#1A0B0B;--glow:rgba(245,116,111,.2);color-scheme:dark}
@media (prefers-color-scheme:light){:root{--bg:#F7F8FC;--surface:#FFFFFF;--surface-soft:#EEF1F8;--text:#121626;--muted:#5A6482;--border:#D9DEEA;--primary:#B4433D;--on-primary:#FFFFFF;--glow:rgba(245,116,111,.16);color-scheme:light}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1100px 600px at 90% -60px,var(--glow),transparent 70%) no-repeat,var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji';font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:600px){.wrap{padding:0 32px}}
@media (min-width:1024px){.wrap{padding:0 48px}}
.hero{padding:88px 0 48px}
@media (max-width:599px){.hero{padding:48px 0 32px}}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;margin:0 0 16px}
.eyebrow img{border-radius:6px}
h1,h2{line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:700;overflow-wrap:anywhere}
h1{font-size:clamp(36px,6vw,64px)}
.lede{font-size:18px;color:var(--muted);max-width:640px;margin:20px 0 0}
.games{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:24px}
.card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--primary);transform:translateY(-3px)}
.cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-soft);border-bottom:1px solid var(--border)}
.cover.letter{display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;line-height:1;color:var(--primary);background:radial-gradient(420px 240px at 85% -20%,var(--glow),transparent 70%),var(--surface-soft)}
.card-body{padding:20px 24px 24px;overflow-wrap:anywhere}
.card h2{font-size:20px;letter-spacing:-.01em}
.card p{color:var(--muted);margin:8px 0 0}
.empty{margin:0 0 64px;padding:32px 24px;background:var(--surface);border:1px dashed var(--border);border-radius:14px}
.empty h2{font-size:22px}
.empty p{color:var(--muted);margin:8px 0 0}
.btn{display:inline-flex;align-items:center;margin-top:32px;padding:14px 22px;border-radius:8px;background:var(--primary);color:var(--on-primary);text-decoration:none;font-weight:600;font-size:15px}
.footer{background:var(--surface);border-top:1px solid var(--border);padding:24px 0;color:var(--muted);font-size:14px}
.footer p{margin:0}
.footer a{color:var(--text);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}