/* A game's page (root/game/show) on faxo.css's colors, light and dark; its "More games" grid is catalog.css. */
.fx-game-page { background: var(--bg); padding-bottom: 96px; }
.fx-gm-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; padding: 14px 0 10px; color: var(--secondary); }
.fx-gm-crumbs a, .fx-gm a, .fx-gm-more-head a { color: var(--accent); text-decoration: none; }
.fx-gm { color: var(--label); }

/* the cover, or the game once it's playing */
.fx-gm-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #000; }
.fx-gm-cover { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; position: relative; }
.fx-gm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease), filter .4s; }
.fx-gm-cover:hover img { transform: scale(1.02); filter: brightness(.92); }
.fx-gm-playbtn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; }
.fx-gm-playbtn svg { margin-left: 4px; }
.fx-gm-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.fx-gm-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 16px 0 4px; overflow-wrap: anywhere; }
.fx-gm-sub { color: var(--secondary); font-size: 15px; }
.fx-gm-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 16px 0 6px; }
.fx-gm .fx-gm-actions .fx-btn { color: var(--label); }
.fx-gm .fx-gm-actions .fx-btn.primary { color: #fff; }
.fx-gm-note { color: var(--secondary); font-size: 13px; margin: 4px 0 0; }
.fx-gm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.fx-gm .fx-gm-tag { background: var(--fill); color: var(--label); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.fx-gm-sec h2 { font-size: 22px; font-weight: 700; margin: 26px 0 8px; }
.fx-gm-sec p { font-size: 17px; line-height: 1.55; margin: 0 0 12px; overflow-wrap: anywhere; }

/* "More games" uses catalog.css's grid */
.fx-gm-more { margin-top: 30px; }

@media (min-width: 760px) {
  .fx-gm { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .fx-gm > * { grid-column: 1; }
  .fx-gm > .fx-gm-info { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 72px; }
  .fx-gm-title { margin-top: 0; font-size: 32px; }
}