/* A game's page on top of the design's own CSS (arcade-game.css): only what the design leaves to the page.
   The cover is the design's animated banner for the game (src/heroes.js, from its GamePage card). */
.pg-cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pgb-tote{text-transform:uppercase} /* the agent's name, as the card writes it */

/* Screenshots: phone captures of the boards, the top of the screen in the design's frame */
.pg-shot-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* The Play box: the agent picker and the send buttons as the design's fields */
.pg-playbox select.bv-input{width:100%;font:inherit;font-weight:400;color:inherit}
.pg-playbox #options{display:grid;gap:var(--space-4)}
.pg-playbox #options:empty,.pg-playbox #notes:empty{display:none}
.pg-playbox #notes{display:grid;gap:var(--space-2)}
.pg-playbox #notes p{margin:0;font-size:13px;line-height:18px;color:var(--text-2)}
.bv-send-btns .bv-btn.hidden{display:none}
/* Recent results: not in the design but kept (Andrew), after Details, in the design's square panel as on the home */
.pg-sec .recent{border-radius:0;background:#1B1035;box-shadow:0 0 0 3px var(--gc-ink),inset 0 0 0 2px #3A2A63;margin:3px}
/* The Play box stays in view below the shell's sticky top bar (the design's 24px is from a page without one) */
@media (min-width:900px){.sh .pg-game .pg-playbox{top:91px}}
/* Captions wrap under their screenshot */
.pg-shot{max-width:226px;margin:0}
/* Our Play buttons are links (the card's are buttons): keep the button's own text colour over the page's link colour */
.bv-send-btns a.bv-btn{color:var(--ink);text-decoration:none}
/* Submit your game: the phone card has no "Your game here" cabinet */
@media (max-width:899px){.pg-yourgame{display:none}}
/* Wider than the design's 1280 laptop (Andrew, 7 Oct 2026: the game cover grew far too big): the inner pages (a game's
   page, Your stats, Submit your game) keep the cards' proportions, their content 984px wide at most, as in the 1280
   cards (a game's cover about 524 x 393 beside the 400px Play box), centred in the main column (Andrew) */
@media (min-width:900px){.sh .pg.pg--shell{max-width:984px;margin-inline:auto}}
/* Nudge (13 Oct 2026): with the player's agent linked, the game page's other ways to send fold under "or try other methods" */
.pg-other-ways{display:grid;gap:var(--space-2)}
.pg-other-ways>summary{cursor:pointer;font:600 14px/20px var(--font-body);color:var(--text-2);padding:4px 0;width:max-content}
.pg-other-ways>summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pg-other-ways[open]>summary{color:var(--text-1)}
/* One tap (13 Oct 2026, Andrew): the game page's card for signing up and linking the agent, so Play can nudge it */
.pg-onetap{display:grid;gap:8px;padding:14px 16px;background:var(--bg-2);box-shadow:inset 0 0 0 2px var(--accent)}
.pg-onetap-title{margin:0;font:400 11px/16px var(--font-arcade,var(--font-pixel));color:var(--accent);text-transform:uppercase;letter-spacing:.02em}
.pg-onetap-text{margin:0;font-size:14px;line-height:20px;color:var(--text-1)}
.pg-onetap-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.pg-onetap-signin{color:var(--human-text);font-size:14px;font-weight:600}
.pg-onetap .bv-btn{--fill:var(--accent);--ink:var(--on-accent);--edge:var(--accent);--lip:var(--accent-lip);font-weight:800;color:var(--on-accent)!important;text-decoration:none}