* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #08080f; color: #e8e8ec; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 48px 20px; }
.brand { color: #969696; font-size: 15px; }
.brand b { color: #7ad0ff; }
h1 { margin: 10px 0 10px; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.03em; }
.lead { max-width: 640px; margin: 0 0 32px; color: #a8a8b8; font-size: 16px; line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.game { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid #23233a; border-radius: 16px; background: #10101b; color: inherit; text-decoration: none; transition: border-color .15s; }
.game:hover { border-color: #26bbff; }
.cover { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, #0b0b1a, #1b0f35); color: #7ad0ff; font-size: 54px; text-shadow: 0 0 24px #26bbff; }
.game h2 { margin: 6px 0 0; font-size: 18px; }
.game p { margin: 0; color: #a8a8b8; font-size: 14px; line-height: 1.5; }
.tag { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border: 1px solid #2b2b38; border-radius: 999px; color: #bdbdc8; font-size: 12px; }
.footer { margin-top: 40px; color: #5f5f70; font-size: 13px; }
.footer a { color: #7ad0ff; text-decoration: none; }