/* fullscreen — paired with fullscreen-fit.js (canonical template: tools/asteroid-dodge-fullscreen-fit.css;
   each game copies it with #stage replaced by its play-box selector). Everything waits on
   html.pip-immersive, so normal play is untouched. The play box keeps its normal layout size
   (--fs-pw x --fs-ph) and is scaled by --fs-k with a transform; margins make the layout box match.
   .hud, #status, #color-btns = selectors that stay above the play box (HUD, status); every other block (landing
   panels, depth panels, how-to copy) is ordered below it and scrolls. */
html.pip-immersive .pip-stage.fs-fit { display: flex; flex-direction: column; }
html.pip-immersive .pip-stage.fs-fit > * { order: 3; flex: none; }
html.pip-immersive .pip-stage.fs-fit > :is(.hud, #status, #color-btns) { order: 1; }
html.pip-immersive .pip-stage.fs-fit > #stage { order: 2; }
html.pip-immersive .pip-stage.fs-fit #stage {
  box-sizing: border-box;
  width: var(--fs-pw) !important;
  max-width: none !important;
  height: var(--fs-ph);
  transform: scale(var(--fs-k));
  transform-origin: 0 0;
  margin: 0 calc(var(--fs-pw) * (var(--fs-k) - 1)) calc(var(--fs-ph) * (var(--fs-k) - 1)) calc((100% - var(--fs-pw) * var(--fs-k)) / 2) !important;
  flex: none;
}
/* wide: play box on the left at full height, everything else in a right column */
html.pip-immersive .pip-stage.fs-fit.fs-wide {
  display: grid;
  grid-template-columns: calc(var(--fs-pw) * var(--fs-k)) minmax(220px, 300px);
  column-gap: 20px;
  justify-content: center;
  align-content: start;
}
html.pip-immersive .pip-stage.fs-fit.fs-wide > * { grid-column: 2; min-width: 0; }
html.pip-immersive .pip-stage.fs-fit.fs-wide > #stage {
  grid-column: 1;
  grid-row: 1 / span 40;
  margin: 0 calc(var(--fs-pw) * (var(--fs-k) - 1)) calc(var(--fs-ph) * (var(--fs-k) - 1)) 0 !important;
}
/* fsfix: panels below the play box (record / depth / how-to) are not play; hide them in fullscreen so the stage never scrolls */
html.pip-immersive .pip-stage.fs-fit > :is(section, details, aside, footer) { display: none; }