:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #09111f; color: #eaf2ff; }
* { box-sizing: border-box; } body { margin: 0; } header, main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
header { padding: 44px 0 26px; } .eyebrow { color: #7dd3fc; font-size: .76rem; font-weight: 700; letter-spacing: .12em; } h1 { margin: 6px 0 8px; font-size: clamp(2rem, 5vw, 3.4rem); } .intro { max-width: 720px; color: #b6c5da; line-height: 1.6; } code { color: #a5f3fc; }
.search { display: grid; gap: 8px; margin-top: 25px; font-weight: 700; } input { width: min(620px, 100%); padding: 14px 16px; border: 1px solid #31517c; border-radius: 10px; background: #101d31; color: inherit; font: inherit; } .count { color: #91a9c8; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding-bottom: 48px; }.game { min-height: 216px; padding: 10px; text-align: left; border: 1px solid #233c60; border-radius: 10px; background: #101d31; color: inherit; cursor: pointer; }.game:hover, .game:focus-visible { border-color: #55c6f7; background: #142845; }.cover, .cover-fallback { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: 7px; background: #162c49; object-fit: cover; }.cover-fallback { display: grid; place-items: center; background: linear-gradient(135deg, #274c77, #472d62); color: #d9f3ff; font-size: 2.2rem; font-weight: 800; }.game-name, .game small { display:block; }.game-name { font-weight: 700; }.game small { margin-top: 7px; color: #98aed0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
dialog { width: min(1400px, 96vw); height: min(900px, 94vh); padding: 0; border: 1px solid #31517c; border-radius: 12px; background: #09111f; color: inherit; } dialog::backdrop { background: rgb(0 0 0 / .78); }.player-bar { height: 52px; padding: 10px 12px 10px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }.player-bar button { padding: 8px 12px; border: 1px solid #4a6c99; border-radius: 8px; background:#162c49; color:inherit; cursor:pointer; } iframe { display:block; width:100%; height:calc(100% - 52px); border:0; background:#000; }
.cover[hidden], .cover-fallback[hidden] { display: none; }
.game:disabled { opacity: .52; cursor: not-allowed; }