/* fish-tank fullscreen: paired with fullscreen-fit.js (sets --fs-w = the tank's edge, toggles
   .fs-wide). Applies only while the shell's Full screen is on (html.pip-immersive). The game caps
   its canvas at 400px, so the canvas is scaled by CSS (taps map through getBoundingClientRect). */
html.pip-immersive .game-wrap { display: block; }
html.pip-immersive .game-wrap .howto,
html.pip-immersive .game-wrap .facts,
html.pip-immersive .game-wrap .hd-about { display: none; }
html.pip-immersive .game-wrap #tank-wrap { width: var(--fs-w, 100%); max-width: var(--fs-w, none); }
html.pip-immersive .game-wrap #game-canvas { width: var(--fs-w, 100%) !important; max-width: none !important; height: auto !important; }
html.pip-immersive .game-wrap .water-row { max-width: var(--fs-w, none); }
html.pip-immersive .game-wrap .hud { margin-bottom: .2rem; }
html.pip-immersive .game-wrap #status { min-height: 1.2em; margin-bottom: .2rem; text-align: center; }
html.pip-immersive .game-wrap .game-title { margin-bottom: .2rem; }

/* Wide screens: the tank fills the height on the left; HUD, water and the planner on the right. */
html.pip-immersive .game-wrap.fs-wide {
  display: grid; grid-template-columns: var(--fs-w) 320px; column-gap: 18px; align-content: start; justify-content: center;
}
html.pip-immersive .game-wrap.fs-wide > * { grid-column: 2; min-width: 0; max-width: none; }
html.pip-immersive .game-wrap.fs-wide > #tank-wrap { grid-column: 1; grid-row: 1 / span 12; margin: 0; align-self: start; max-width: var(--fs-w); }
html.pip-immersive .game-wrap.fs-wide .water-row { max-width: none; }
html.pip-immersive .game-wrap #ft-planner, html.pip-immersive .game-wrap .ft-planner { display: none !important; }