/* evolution-sim fullscreen: paired with fullscreen-fit.js (sets --fs-w = the pond's edge, toggles
   .fs-wide). Applies only while the shell's Full screen is on (html.pip-immersive). */
html.pip-immersive .game-wrap { display: block; }
html.pip-immersive .game-wrap .how,
html.pip-immersive .game-wrap .facts,
html.pip-immersive .game-wrap .hd-about { display: none; }
html.pip-immersive .game-wrap #play-area { width: var(--fs-w, 100%); max-width: var(--fs-w, none); }
html.pip-immersive .game-wrap #evo-panel { max-width: var(--fs-w, none); }
html.pip-immersive .game-wrap .hud { margin-bottom: .25rem; }
html.pip-immersive .game-wrap #status { min-height: 1.2em; margin-bottom: .25rem; text-align: center; }
html.pip-immersive .game-wrap .game-title { margin-bottom: .2rem; }

/* Wide screens: the pond fills the height on the left; HUD, stats and the lab 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 > #play-area { 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 #evo-panel { max-width: none; }
/* the game pins the canvas to 400px tall; let it follow its own aspect ratio at the fullscreen size */
html.pip-immersive #game-canvas { height: auto !important; }