/* sketch-pad · fullscreen fit (paired with fullscreen-fit.js, which sets --sp-side and .fs-wide).
   Only under html.pip-immersive. Portrait: status on top, the square canvas as large as fits, tools 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 > .game-title, html.pip-immersive .pip-stage > .facts, html.pip-immersive .pip-stage > .sp-howto,
html.pip-immersive .pip-stage > .sp-perspective, html.pip-immersive .pip-stage > .pip-actions { display: none; }
html.pip-immersive .pip-stage > * { flex: none; min-width: 0; }
html.pip-immersive .pip-stage .hud { padding: 0; margin: 0; }
html.pip-immersive .pip-stage .hud .btn { min-height: 36px; padding-block: .25rem; }
html.pip-immersive .pip-stage #status { min-height: 1.4em; margin: 0; font-size: .85rem; line-height: 1.25; }
html.pip-immersive .pip-stage .sp-perspective-surface { width: var(--sp-side, 100%); max-width: 100%; margin-inline: auto; }
html.pip-immersive.sp-hd .pip-stage .sp-perspective-surface { margin-top: 26px; }
html.pip-immersive .pip-stage #game-canvas { width: 100% !important; max-width: none !important; }
html.pip-immersive .pip-stage .sp-row { margin: 0; gap: 4px; }
html.pip-immersive .pip-stage .sp-tool { min-height: 40px; }
html.pip-immersive .pip-stage .sp-size { margin: 0; }
html.pip-immersive .pip-stage .sp-dotbox { width: 36px; height: 36px; }
html.pip-immersive .pip-stage #color-btns { margin: 0; gap: 5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
html.pip-immersive .pip-stage .sp-swatch { width: 28px; height: 28px; }
html.pip-immersive .pip-stage .sp-sep { display: none; }
html.pip-immersive .game-wrap.pip-stage.fs-wide {
  display: grid; grid-template-columns: var(--sp-side, 60%) minmax(0, 1fr); column-gap: 14px; align-content: start; grid-auto-rows: min-content;
}
html.pip-immersive .fs-wide > * { grid-column: 2; }
html.pip-immersive .fs-wide > .sp-perspective-surface { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
html.pip-immersive .fs-wide .sp-tool { min-height: 34px; }
html.pip-immersive .fs-wide .sp-label { display: none; }