:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111522; color: #f4f5fa; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 80% 0%, #252b46 0, transparent 55%); min-height: 100vh; }
main { max-width: 1080px; margin: auto; padding: 72px 28px 32px; }
.eyebrow, .genre { font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.eyebrow { color: #abaeca; }
h1 { font-size: clamp(42px, 7vw, 76px); letter-spacing: -.055em; line-height: 1.1; margin: 20px 0; }
h1 span { color: #b9ed8d; }
.intro { color: #b9bed0; line-height: 1.7; font-size: 18px; }
.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.card { color: inherit; text-decoration: none; border: 1px solid #363c51; border-radius: 20px; overflow: hidden; background: #1a1f30; transition: transform .18s, border-color .18s; }
.card:hover { transform: translateY(-5px); border-color: #b9ed8d; }
.card:focus-visible { outline: 3px solid #f8d47d; outline-offset: 6px; }
.art { height: 230px; overflow: hidden; position: relative; display: grid; place-items: center; }
.meadow { background: #dceac7; }
.meadow::before, .meadow::after { content: ""; position: absolute; width: 150%; height: 180px; border-radius: 50%; background: #7f9b59; left: -15%; top: 140px; transform: rotate(-12deg); }
.meadow::after { background: #4e703c; top: 185px; transform: rotate(9deg); }
.sun { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: #fff4b1; top: 28px; right: 50px; }
.meadow img { width: 112px; height: 112px; z-index: 1; transform: rotate(-14deg); }
.city { background: repeating-linear-gradient(0deg, transparent 0 29px, #283054 30px 31px), repeating-linear-gradient(90deg, #171d37 0 29px, #283054 30px 31px); }
.city-label { position: absolute; left: 28px; font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.05em; color: #f6da72; z-index: 1; }
.reactor { position: absolute; right: 40px; font-size: 56px; color: #ffdf71; }
.orbit { position: absolute; right: -20px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid #ae70f4; box-shadow: 0 0 45px #a361ed44, inset 0 0 45px #a361ed33; }
.details { padding: 28px; }
.genre { color: #b9ed8d; margin: 0 0 12px; }
.vibes .genre { color: #dcc0ff; }
h2 { font-size: 29px; margin: 0 0 12px; letter-spacing: -.035em; }
.details > p:not(.genre) { color: #b9bed0; line-height: 1.65; margin: 0; }
.play { display: flex; justify-content: space-between; margin-top: 28px; font-weight: 700; padding-top: 20px; border-top: 1px solid #363c51; }
footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; color: #929bb5; font-size: 12px; line-height: 1.6; }
@media (max-width: 640px) { main { padding: 42px 20px 24px; } .games { grid-template-columns: 1fr; } .art { height: 210px; } footer { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }