/* 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 = 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) { 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;
}
/* fs-fix: non-play panels (depth, replay, flight recorder) are not shown in fullscreen, so nothing scrolls. */
html.pip-immersive .pip-stage.fs-fit > :not(.hud):not(#status):not(#stage):not(.pip-dock):not(.pip-overlay):not(.pip-hint):not([class*="pip-"]):not([style*="fixed"]) { display: none !important; }