/* Games pages (Scripts): the game frames, in every design (added after the design's stylesheet;
   colours come from the design — text colour, its own buttons). */
.games { display: grid; gap: 34px; margin: 24px 0 40px; }
.game { display: grid; gap: 12px; }
.game-frame { position: relative; width: 100%; max-width: min(100%, calc((100vh - 140px) * var(--ar, 1.7778))); margin: 0 auto; aspect-ratio: var(--ar, 16 / 9); border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); }
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #111; }
.game-frame.ar-16-9 { --ar: 1.7778; aspect-ratio: 16 / 9; }
.game-frame.ar-4-3 { --ar: 1.3333; aspect-ratio: 4 / 3; }
.game-frame.ar-1-1 { --ar: 1; aspect-ratio: 1; }
.game-frame.ar-3-4 { --ar: .75; aspect-ratio: 3 / 4; }
.game-frame.ar-9-16 { --ar: .5625; aspect-ratio: 9 / 16; }
.game-off { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #eee; }
.game-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; max-width: 980px; margin: 0 auto; width: 100%; }
.game-bar h2 { margin: 0 0 4px; }
.game-bar p { margin: 0; opacity: .85; }
.game-full { flex: none; padding: .55em 1em; border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.game-full:hover { background: rgba(127, 127, 127, .14); }
.game-full[hidden] { display: none; }
@media (max-width: 640px) { .games { margin-top: 14px; } .game-frame { border-radius: 10px; } }