/* Games page: search, provider sections, and the play frame */
.games-search { display: block; width: min(100%, 28rem); margin: 0 auto var(--s-4); text-align: center; }
.games-search::placeholder { color: var(--muted); }
.games-empty { text-align: center; }
.games-more { height: 1px; }

/* A provider's games, then a line, then the next provider's. The first heading has no line above it. */
.provider-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); }
.provider-head:not(:first-child) { margin-top: var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); }
.provider-head h2 { margin: 0; font-size: 1.25rem; }
.provider-head span { color: var(--muted); font-size: 0.875rem; }

.tab .provider-logo { display: inline-block; height: 0.8rem; width: auto; margin-right: 0.5rem; vertical-align: -0.05rem; fill: currentColor; }

/* Cheap cards: no blur filters or entrance animations on hundreds of cards, and off-screen cards are skipped */
.games-grid .app-card { content-visibility: auto; contain-intrinsic-size: auto 10rem; animation: none; }
.games-grid .app-art { filter: none; scale: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.games-grid .has-art::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-0) 45%, transparent); transition: background var(--dur-fast) var(--ease-out); pointer-events: none; }
.games-grid .app-card:hover .has-art::before { background: color-mix(in srgb, var(--bg-0) 20%, transparent); }
.games-grid .app-name { position: relative; }

/* The game fills the whole page; the controls sit on top of it in one bar that can be hidden */
.game-layer { position: fixed; inset: 0; z-index: 40; background: #000; }
.game-layer[hidden] { display: none; }
.game-frame { position: absolute; inset: 0; background: #000; }
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.game-frame .art-spinner { z-index: 1; }
.game-bar { position: absolute; top: var(--s-3); left: 50%; translate: -50% 0; z-index: 2; display: flex; align-items: center; gap: var(--s-1); max-width: calc(100% - 2 * var(--s-3)); padding: var(--s-1); background: color-mix(in srgb, var(--bg-0) 72%, transparent); border: 1px solid var(--line-strong); border-radius: 999px; backdrop-filter: blur(10px); }
.game-bar[hidden] { display: none; }
.game-title { margin: 0 var(--s-2); min-width: 0; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; font-weight: 600; }
.gbtn { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.gbtn:hover { color: var(--white); background: rgb(var(--fg-rgb) / 0.12); }
.gbtn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-bar .fav-icon svg { width: 1.25rem; height: 1.25rem; }
.game-show { position: absolute; top: var(--s-3); left: 50%; translate: -50% 0; z-index: 2; background: color-mix(in srgb, var(--bg-0) 72%, transparent); border: 1px solid var(--line-strong); opacity: 0.55; }
.game-show:hover { opacity: 1; background: color-mix(in srgb, var(--bg-2) 95%, transparent); }
.game-show[hidden] { display: none; }
.game-note { position: absolute; bottom: var(--s-3); left: 50%; translate: -50% 0; z-index: 2; margin: 0; padding: var(--s-2) var(--s-4); background: color-mix(in srgb, var(--bg-0) 78%, transparent); border-radius: 999px; font-size: 0.8rem; text-align: center; }
.game-note[hidden] { display: none; }