/* flag-quiz · fullscreen. Paired with fullscreen-fit.js (toggles .fs-wide on the stage when the screen is
   wide). Only inside the game-shell Full screen (html.pip-immersive). */
html.pip-immersive .game-wrap.pip-stage #card-grid { width: 100%; max-width: 560px; margin: 4px auto; }
html.pip-immersive .game-wrap.pip-stage .hud, html.pip-immersive .game-wrap.pip-stage #status { max-width: 560px; margin-left: auto; margin-right: auto; }
html.pip-immersive .game-wrap.pip-stage.fs-wide #card-grid {
  max-width: 860px; display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 1.1fr); column-gap: 20px;
  align-content: center;
}
html.pip-immersive .game-wrap.pip-stage.fs-wide #card-grid > * { grid-column: 1 / -1; }
html.pip-immersive .game-wrap.pip-stage.fs-wide #card-grid > .fq-flag { grid-column: 1; grid-row: 3 / span 4; align-self: center; }
html.pip-immersive .game-wrap.pip-stage.fs-wide #card-grid > button.opt { grid-column: 2; margin: .3rem 0; }
@media (max-height: 760px) {
  html.pip-immersive .game-wrap.pip-stage .fq-flag .big { font-size: 4.2rem; }
  html.pip-immersive .game-wrap.pip-stage .svgflag { width: 7.5rem; }
  html.pip-immersive .game-wrap.pip-stage #card-grid button.opt { min-height: 44px; margin: .25rem 0; padding-top: .45rem; padding-bottom: .45rem; }
  html.pip-immersive .game-wrap.pip-stage .fq-flag .q { margin: 0; }
}
@media (max-height: 460px) {
  html.pip-immersive .game-wrap.pip-stage .fq-flag .big { font-size: 3.2rem; }
  html.pip-immersive .game-wrap.pip-stage .svgflag { width: 6rem; }
  html.pip-immersive .game-wrap.pip-stage .fq-menu .how, html.pip-immersive .game-wrap.pip-stage .fq-atlas { display: none; }
}
/* the Lookalike lab button sits above the board in the page; in fullscreen put it below so the board comes first */
html.pip-immersive .game-wrap.pip-stage { display: flex; flex-direction: column; }
html.pip-immersive .game-wrap.pip-stage > #fq-lab { order: 20; margin-top: 6px; }
html.pip-immersive .game-wrap.pip-stage > .pip-actions { order: 30; }
@media (max-height: 460px) {
  html.pip-immersive .game-wrap.pip-stage .hud { margin: 2px auto; }
  html.pip-immersive .game-wrap.pip-stage #status { margin: 0 auto; min-height: 0; }
}
@media (max-height: 700px) {
  html.pip-immersive .game-wrap.pip-stage > #fq-lab { display: none; }
}