/* pixel-painter · fullscreen fit (paired with fullscreen-fit.js, which sets --pp-side and .fs-wide).
   Only applies under html.pip-immersive. Portrait: controls on top, square canvas as large as fits,
   tools + colours under it. Landscape: canvas on the left, every control in a right-hand column. */
html.pip-immersive .game-wrap.pip-stage { display: flex; flex-direction: column; align-items: stretch; overflow: hidden; gap: 4px; padding-bottom: 8px !important; }
html.pip-immersive .pip-stage > .pp-how { display: none; }
html.pip-immersive .pip-stage > * { flex: none; min-width: 0; }
html.pip-immersive .pip-stage .pp-row { margin: 0; }
html.pip-immersive .pip-stage .pp-chip { min-height: 36px; padding-block: .3rem; }
html.pip-immersive .pip-stage .pp-chal { margin: 0; padding: 4px 8px; }
html.pip-immersive .pip-stage .pp-chal canvas, html.pip-immersive .pip-stage .hd-tgt { width: 52px; height: 52px; }
html.pip-immersive .pip-stage .pp-levels { margin: 0; gap: 4px; }
html.pip-immersive .pip-stage .hud { padding: 0; }
html.pip-immersive .pip-stage .hud .btn { min-height: 36px; padding-block: .25rem; }
html.pip-immersive .pip-stage #status, html.pip-immersive body[data-pip-frame] .game-wrap #status { min-height: 1.6em; margin: 0; padding: 0 6px; font-size: .85rem; line-height: 1.25; }
html.pip-immersive .pip-stage .pp-stage { margin: 0 auto; width: var(--pp-side, 100%); max-width: 100%; }
html.pip-immersive .pip-stage .pp-tools { margin: 0; gap: 4px; }
html.pip-immersive .pip-stage .pp-tool { min-height: 42px; }
html.pip-immersive .game-wrap #color-btns { margin: 0; gap: 5px; }
html.pip-immersive .pip-stage .pp-sw { min-height: 28px; }
html.pip-immersive .pip-stage .pp-actions { margin: 0; }
html.pip-immersive .pip-stage .pp-actions .btn { min-height: 38px; padding-block: .3rem; }
html.pip-immersive .pip-stage .pp-swap summary { min-height: 40px; }
html.pip-immersive .pip-stage .pp-swap details[open] { max-height: 36vh; overflow-y: auto; }

html.pip-immersive .game-wrap.pip-stage.fs-wide {
  display: grid; grid-template-columns: var(--pp-side, 60%) minmax(0, 1fr); column-gap: 14px; align-content: start; grid-auto-rows: min-content; overflow-y: auto;
}
html.pip-immersive .fs-wide > * { grid-column: 2; }
html.pip-immersive .fs-wide > .pp-stage { grid-column: 1; grid-row: 1 / span 14; align-self: start; width: var(--pp-side, 100%); }
@media (max-height: 760px) { html.pip-immersive .pip-stage .pp-swap { display: none; } }
html.pip-immersive .fs-wide .pp-swap { display: none; }
html.pip-immersive .fs-wide #color-btns { grid-template-columns: repeat(13, 1fr); }