/* fullscreen - paired with fullscreen-fit.js. Applies only while the shell's Full screen is on
   (html.pip-immersive); normal play is untouched. Classes and variables come from the script.
   !important only where a game's own #id rule would otherwise win. */
html.pip-immersive .pip-stage.fs-on { display: flex; flex-direction: column; align-items: center; }
html.pip-immersive .pip-stage.fs-on > .fs-hide { display: none !important; }
html.pip-immersive .pip-stage.fs-on > .fs-side { width: min(100%, 520px); box-sizing: border-box; flex: none; }
html.pip-immersive .pip-stage.fs-on > .fs-board {
  flex: none;
  width: var(--fs-bw, max-content) !important;
  max-width: none !important;
  transform-origin: 0 0;
  transform: scale(var(--fs-s, 1));
  margin: 0 calc((var(--fs-s, 1) - 1) * var(--fs-nw, 0px)) calc((var(--fs-s, 1) - 1) * var(--fs-nh, 0px)) 0 !important;
}
html.pip-immersive .pip-stage.fs-on.fs-wide {
  display: grid;
  grid-template-columns: max-content minmax(0, var(--fs-sidew, 360px));
  grid-template-rows: repeat(var(--fs-n, 6), min-content) 1fr;
  column-gap: 24px;
  justify-content: center;
  align-content: start;
  align-items: start;
}
html.pip-immersive .pip-stage.fs-on.fs-wide > .fs-board { grid-column: 1; grid-row: 1 / -1; }
html.pip-immersive .pip-stage.fs-on.fs-wide > .fs-side { grid-column: 2; width: auto; }

/* HD overlay layers that are siblings of a canvas board scale with it */
html.pip-immersive .pip-stage.fs-on > .fs-follow { transform-origin: 0 0; transform: scale(var(--fs-s, 1)); margin: 0 !important; }

/* compact controls in fullscreen so the whole game fits on a short landscape screen (targets stay 44px) */
html.pip-immersive .pip-stage.fs-on .wm-ctrl { padding: .3rem; gap: .25rem; }
html.pip-immersive .pip-stage.fs-on .wm-stats { margin: 0 0 .25rem; }
html.pip-immersive .pip-stage.fs-on .wm-stat { padding: .15rem .2rem; }
html.pip-immersive .pip-stage.fs-on .wm-meter { margin: 2px 0; }