/* Game page. First screen: a banner above the game, the title with five small icon actions, the game filling the frame,
   and one tall ad beside it that stays in view while the page scrolls (a 300x250 under the game on phones).
   The leaderboard and the how-to text are popovers. Below: how to play, more games, an in-content ad, questions and facts. */

body[data-page="game"] main.wrap { max-width: 1760px; }
.game { --head: 62px; --banner: 50px; --bar: 44px; --gap: 8px; padding-top: var(--gap);
  display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "bar" "stage" "ad" "info"; }
.game-banner { grid-area: banner; margin: 0; min-height: var(--banner); }
.game-banner::before { display: none; } /* every real unit carries its own ad marker; the label would cost game height */
.game-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); min-height: var(--bar); min-width: 0; }
.game-title { flex: 1; min-width: 0; font: 400 1.3rem/1.1 var(--display); --twin: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-actions { display: flex; gap: 6px; flex: none; }
.game-actions .icon-btn { width: 38px; height: 38px; }
.game-actions .icon-btn b { font: 800 1.15rem/1 var(--ui); }
.game-actions [aria-pressed="true"] { --heart: var(--vermilion); }
.icon-primary { background: var(--vermilion-d); color: #fff; }

/* The stage: everything left under the header, banner and title bar. It is all game: games scale themselves inside it. */
.stage { grid-area: stage; position: relative; width: 100%; background: var(--ink); border: var(--keyline); border-radius: var(--r); overflow: hidden;
  box-shadow: 4px 4px 0 var(--c);
  height: calc(100svh - var(--head) - var(--banner) - var(--bar) - 4 * var(--gap) - 6px); min-height: 360px; }
.frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.stage:fullscreen { height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
.stage-note { position: absolute; inset: auto 12px 12px; padding: 10px 12px; background: var(--turmeric); color: #151515; border: var(--keyline); border-radius: var(--r); font-weight: 800;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stage-note[hidden] { display: none; }
.stage noscript .btn { position: absolute; inset: 40% 20% auto; }

.game-ad { grid-area: ad; min-width: 0; }
.game-ad .ad-slot { margin: var(--s3) auto 0; }
.rotate-hint { flex-basis: 100%; padding: 8px 12px; border: 2px dashed var(--ink); border-radius: var(--r); font-weight: 600; }
@media (min-width: 700px) { .rotate-hint { display: none; } }
.beat { padding: 4px 10px; background: var(--turmeric); color: #151515; border: var(--keyline); border-radius: var(--r); font: 800 var(--t-md)/1.2 var(--ui); }
.beat[hidden] { display: none; }

/* Leaderboard popover (trophy icon) */
.board-pop { width: min(380px, calc(100vw - 32px)); padding: var(--s4); border: var(--keyline); border-radius: var(--r); background: var(--card); color: var(--ink);
  box-shadow: 6px 6px 0 var(--c); gap: var(--s3); }
.board-pop:popover-open, .board-pop.open { display: grid; }
.board-pop::backdrop { background: rgba(21, 21, 21, .35); }
.board-pop:not([popover]) { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 40; display: none; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.best { font-size: var(--t-lg); }
.best[hidden] { display: none; }
.best-n { font: 800 var(--t-xl)/1 var(--ui); font-variant-numeric: tabular-nums; }
.board { list-style: none; margin: 0; padding: 0; border: var(--keyline); border-radius: var(--r); background: var(--label); }
.board li { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s2); padding: 8px 12px; font-variant-numeric: tabular-nums; min-height: 40px; }
.board li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.board li.muted { display: block; }
.board li.blank .who { white-space: normal; }
.board .rank { font-weight: 800; }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .is-me { background: color-mix(in srgb, var(--turmeric) 35%, var(--label)); }
.save-prompt { display: grid; gap: var(--s2); padding: var(--s3); border: 2px dashed var(--ink); border-radius: var(--r); }
.save-prompt[hidden] { display: none; }
.save-prompt p { font-weight: 800; }
/* How to play, over the game (the ? action). Filled by the app from the text printed below. */
.info-pop { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 640px); overflow: auto; }
.info-body { display: grid; gap: var(--s4); }

/* Below the game */
.game-info { grid-area: info; margin-top: var(--s5); display: grid; gap: var(--s5); min-width: 0; align-content: start; }
.game-about { display: grid; gap: var(--s5); }
.game-info > :not(.related):not(.ad-slot):not(.info-pair) { max-width: 72ch; }
.info-pair { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .info-pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s6); } }
.lede { font-size: var(--t-lg); }
.info-h { font: 800 var(--t-lg)/1.2 var(--ui); margin-bottom: var(--s2); }
.how { margin: 0; padding-left: 1.4rem; display: grid; gap: 4px; }
.controls, .facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s4); margin: 0; }
.controls dt, .facts dt { font-weight: 800; }
.controls dd, .facts dd { margin: 0; }
.faq { border: var(--keyline); border-radius: var(--r); background: var(--label); }
.faq + .faq { margin-top: var(--s2); }
.faq summary { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; font-weight: 800; cursor: pointer; }
.faq p { padding: 0 12px 12px; }
.game-info > .ad-slot { margin: 0; }
.related { margin-top: 0; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-right: 6px; }
@media (max-width: 699px) { .related-grid > :nth-child(n+7) { display: none; } }

/* Wide screens: banner, then the title and actions directly above the game, beside the one tall ad, which follows the scroll */
@media (min-width: 1100px) {
  body[data-page="game"] main.wrap { max-width: none; padding: 0 24px; }
  .game { --banner: 90px; --gap: 16px; --side: 300px; column-gap: 24px; grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-areas: "banner ad" "bar ad" "stage ad" "info ad"; grid-template-rows: auto auto auto 1fr; }
  .game-banner { align-self: center; }
  .game-bar { align-content: center; }
  .game-title { flex: 1 1 auto; font-size: 1.4rem; }
  .game-actions .icon-btn { width: 36px; height: 36px; }
  .stage { height: calc(100vh - var(--head) - var(--banner) - var(--bar) - 4 * var(--gap)); min-height: 480px; box-shadow: 6px 6px 0 var(--c); }
  .game-ad .ad-slot { position: sticky; top: calc(var(--head) + 16px); margin: 0; }
}
/* Laptops: the narrow 160x600 skyscraper keeps the game big */
@media (min-width: 1100px) and (max-width: 1399px) {
  .game { --side: 160px; }
  .game-title { font-size: 1.15rem; white-space: normal; }
  .game-actions { gap: 4px; }
  .game-actions .icon-btn { width: 28px; height: 28px; }
  .game-actions .icon-btn svg { width: 16px; height: 16px; }
}

/* End card: one slim unit over the bottom of the game when a round ends. Ad, affiliate offer or nothing. */
.endcard { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 14px 34px 8px 10px;
  min-height: 64px; background: var(--card); color: var(--ink); border: var(--keyline); border-radius: var(--r); box-shadow: 3px 3px 0 var(--c); }
.endcard[hidden] { display: none; }
.ec-tag { position: absolute; top: -9px; left: 10px; padding: 0 6px; background: var(--turmeric); color: #151515; border: 2px solid var(--ink); border-radius: 4px; font: 800 .62rem/1.5 var(--ui); text-transform: uppercase; letter-spacing: .04em; }
.ec-body { flex: 1; min-width: 0; display: flex; justify-content: center; }
.ec-ad { margin: 0; }
.ec-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; font: 800 1.3rem/1 var(--ui); cursor: pointer; border-radius: 50%; }
.ec-x:focus-visible { outline: 3px solid var(--vermilion); }
.ec-offer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ec-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ec-text b { font: 800 .95rem/1.15 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-text span { font-size: .82rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-text small { font-size: .66rem; line-height: 1.2; color: color-mix(in srgb, var(--ink) 70%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-cta { flex: none; padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; background: var(--vermilion-d); color: #fff; border: var(--keyline); border-radius: var(--r); font: 800 .85rem/1 var(--ui); }
@media (max-width: 480px) { .ec-text span { display: none; } }

/* The top five printed below the game (only once a board has five real scores) */
.top-board[hidden] { display: none; }
.top-board .board { max-width: 420px; box-shadow: 4px 4px 0 var(--c); }