:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111827; color: #f3f4f6; } body { margin: 0; } header, main { max-width: 1100px; margin: auto; padding: 1.25rem; } header { border-bottom: 1px solid #374151; } h1 { margin: 0; } label { display: inline-grid; gap: .4rem; margin: .5rem .75rem .5rem 0; } select { padding: .5rem; background: #1f2937; color: inherit; border: 1px solid #4b5563; border-radius: .3rem; } #games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } article { background: #1f2937; border-radius: .5rem; overflow: hidden; } article[tabindex] { cursor: pointer; } article[tabindex]:hover, article[tabindex]:focus-visible { outline: 2px solid #60a5fa; } img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #374151; } article h2, article p { margin: .6rem .7rem; } article h2 { font-size: 1rem; } article p { color: #9ca3af; font-size: .82rem; } dialog { background: #1f2937; color: inherit; border: 1px solid #4b5563; border-radius: .6rem; padding: 1.5rem; max-width: 720px; width: min(92vw, 720px); max-height: 88vh; overflow: auto; } dialog::backdrop { background: rgba(0,0,0,.6); } #detail { position: relative; } #close { position: absolute; top: .5rem; right: .5rem; background: #374151; color: inherit; border: 1px solid #4b5563; border-radius: .3rem; padding: .3rem .6rem; cursor: pointer; } #detail-body h2 { margin-top: 0; } #detail-body .cover { width: min(280px, 60vw); aspect-ratio: 3 / 4; border-radius: .4rem; } #detail-body .summary { color: #d1d5db; } #detail-body dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; } #detail-body dt { color: #9ca3af; } #detail-body .screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-top: .5rem; } #detail-body .screens img { aspect-ratio: 16 / 9; border-radius: .3rem; }