/* Games: the public catalogue and the player page. Uses the design tokens from app.css; no inline styles anywhere. */
.game-card { align-content: start; }
/* cards in a row are as tall as the tallest one: keep the Play button on the bottom edge, whatever the description length */
.game-card > :last-child { margin-top: auto; }
.game-card h3 { overflow-wrap: anywhere; }
.game-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.game-thumb-empty { display: grid; place-content: center; color: var(--muted); }

.game-frame-wrap { position: relative; margin-inline: auto; width: 100%; background: #141a26; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.game-frame-wrap.any { aspect-ratio: 4 / 3; max-height: 78vh; }
.game-frame-wrap.landscape { aspect-ratio: 16 / 9; max-height: 78vh; }
.game-frame-wrap.portrait { aspect-ratio: 9 / 14; max-width: min(100%, 460px); max-height: 82vh; }
.game-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* the ad break sits over the game, which is paused behind it */
.game-break { position: absolute; inset: 0; z-index: 5; overflow: auto; background: #0b1018; color: #f3ede3; display: grid; place-items: center; padding: 16px; }
.game-break .game-break-card { width: min(100%, 720px); display: grid; gap: 14px; }
.game-break .card { background: var(--surface); }
.game-break .row.spread { align-items: center; }
.game-prompt { text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 30em; }
.game-prompt p { margin: 0; color: #c9d3e6; }

.game-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.game-meta .num { font-variant-numeric: tabular-nums; }
.game-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.game-admin-row:first-child { border-top: 0; }

/* the break reuses the Earn page's player; its own start/continuous controls make no sense inside a break, "Back to game" is the way out */
.game-break .stage .idle > button.btn.lg, .game-break label[for="autoq"] { display: none; }
/* an ad is taller than a puzzle: while one is showing, the frame gives it room instead of scrolling */
.game-frame-wrap:has(.game-break-card) { aspect-ratio: auto; max-height: none; min-height: 680px; }