:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f7f8fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #dfe3ee; font-size: .9rem; }
.site-header > span { color: #172033; font-weight: 700; }
.site-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1rem; }
.site-header a { color: #536078; }
.site-header a:hover { color: #4a35c4; }
.hero { padding: 4.5rem 0 2.5rem; max-width: 42rem; }
h1 { font-size: clamp(3rem, 9vw, 5.5rem); letter-spacing: -.065em; margin: .2rem 0 .8rem; }
.hero > p:not(.eyebrow) { color: #536078; font-size: 1.2rem; }
.search-label { display: block; margin: 2rem 0 .45rem; font-weight: 700; }
input { width: 100%; border: 1px solid #c9cfdd; border-radius: .7rem; padding: .8rem 1rem; font: inherit; }
.status { color: #536078; font-size: .9rem; }
.game-section { padding: 1rem 0 2rem; }.game-section h2 { font-size: 1.45rem; letter-spacing: -.025em; margin: 0 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.no-results { padding: 2rem 0 4rem; color: #536078; }
.card { display: flex; flex-direction: column; overflow: hidden; background: white; border: 1px solid #dfe3ee; border-radius: 1rem; box-shadow: 0 8px 28px rgb(23 32 51 / .06); }
.card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #e8eaf3; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.card h2 { margin: 0; font-size: 1.2rem; }.card p { color: #536078; line-height: 1.5; }.tags { margin-top: auto; font-size: .8rem; font-weight: 600; }.play { color: #4a35c4; font-weight: 700; text-decoration: none; }
@media (max-width: 600px) { .site-header { align-items: flex-start; flex-direction: column; } .site-header nav { justify-content: flex-start; } }