/* bubble-wrap · fullscreen — paired with fullscreen-fit.js (--fs-hero-h / --fs-hero-w, html.fs-wide).
   Everything is scoped under html.pip-immersive: normal play is untouched. */
html.pip-immersive .game-wrap.pip-stage {
  display: flex; flex-direction: column; align-items: center;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
html.pip-immersive .game-wrap.pip-stage > * { width: min(100%, 560px); flex: none; }
html.pip-immersive .game-wrap.pip-stage > #board-wrap {
  width: 100%; max-width: 760px; height: var(--fs-hero-h, 320px); margin: 0; container-type: size; box-sizing: border-box;
}
/* Landscape: hero on the left at full height, the rest in a right-hand column. */
html.pip-immersive.fs-wide .game-wrap.pip-stage {
  display: grid; grid-template-columns: minmax(0, var(--fs-hero-w, 55%)) minmax(0, 440px); column-gap: 24px;
  grid-auto-rows: min-content; align-content: start; justify-content: center; align-items: start; overflow-y: auto;
}
html.pip-immersive.fs-wide .game-wrap.pip-stage > * { width: auto; grid-column: 2; min-width: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > #board-wrap { grid-column: 1; grid-row: 1 / span 14; max-width: none; height: var(--fs-hero-h, 320px); position: sticky; top: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > .pip-dock { grid-column: 1 / -1; }
html.pip-immersive .bw-how, html.pip-immersive .facts { display: none; }
/* the sheet: keep every bubble round and the whole sheet inside the hero box. The game lays bubbles out from the grid's
   full width (padding counts), so we squeeze the visible columns with padding instead of changing that width. */
html.pip-immersive .game-wrap.pip-stage > #board-wrap { display: grid; place-items: center; overflow: hidden; }
html.pip-immersive #card-grid { margin: 0 !important; width: 100%; box-sizing: border-box; padding-inline: max(0px, calc((100% - var(--fs-hero-h, 360px) * var(--bw-ar, 99) * .985) / 2)); }
html.pip-immersive #win-overlay { max-height: 100%; overflow: auto; }