/* tower-defense-td · fullscreen — paired with fullscreen-fit.js, which sets --fs-side (the board unit's width),
   --fs-rows and toggles .fs-wide. Only applies while the game-shell's Full screen is on
   (html.pip-immersive); normal play is untouched. */
html.pip-immersive .pip-stage .fs-unit { width: var(--fs-side, 100%); max-width: none; margin-left: auto; margin-right: auto; box-sizing: border-box; }
html.pip-immersive .pip-stage.fs-wide {
  display: grid;
  grid-template-columns: var(--fs-side) minmax(0, var(--fs-side-col, 320px));
  grid-template-rows: repeat(var(--fs-rows, 6), auto) 1fr;
  column-gap: 20px;
  justify-content: center;
  align-content: start;
}
html.pip-immersive .pip-stage.fs-wide > * { grid-column: 2; min-width: 0; }
html.pip-immersive .pip-stage.fs-wide > .fs-unit { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: start; }

/* tower-defense-td: HUD + board + the tower picker/controls stay in view; how-to and the placement planner are below the fold. */
html.pip-immersive .pip-stage .td-how { display: none; }
html.pip-immersive .pip-stage .td-stage { margin: 0; }
html.pip-immersive .pip-stage.fs-wide > .td-stage.fs-unit { position: sticky; top: 0; margin: 0; }
html.pip-immersive .pip-stage:not(.fs-wide) { display: flex; flex-direction: column; }
html.pip-immersive .pip-stage:not(.fs-wide) > .fs-unit { order: 5; flex: none; }
html.pip-immersive .pip-stage:not(.fs-wide) > .td-panel { order: 6; }
html.pip-immersive .pip-stage:not(.fs-wide) > .td-pick { order: 7; }
html.pip-immersive .pip-stage:not(.fs-wide) > .td-ctrl { order: 8; }
html.pip-immersive .pip-stage:not(.fs-wide) > #td-planner { order: 10; }
html.pip-immersive .pip-stage.fs-wide .td-ctrl { gap: 4px; max-width: 100%; } html.pip-immersive .pip-stage.fs-wide .td-ctrl > .btn { padding-inline: 8px; min-width: 0; font-size: .85rem; }