/* color-mixer · fullscreen fit. Pure layout under html.pip-immersive (the shell's Full screen).
   Portrait: modes, round bar, big swatches, sliders, Lock In, all on one screen.
   Landscape: swatches + match on the left, sliders and Lock In on the right. */
html.pip-immersive .game-wrap.pip-stage {
  display: grid; overflow: hidden; gap: 4px; padding-bottom: 8px !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: "mode" "hud" "status" "msg" "ctl" "cmp" "lock";
  --cm-sw: clamp(64px, min(calc((var(--pip-vvh, 100dvh) - 520px) * 0.55), 52vw), 200px);
}
html.pip-immersive .pip-stage > #mode-row { grid-area: mode; margin: 0; }
html.pip-immersive .pip-stage > #mode-row button { min-height: 40px; }
html.pip-immersive .pip-stage > #howto { display: none; }
html.pip-immersive .pip-stage > .hud { grid-area: hud; padding: 0; min-height: 0; }
html.pip-immersive .pip-stage > .hud .btn { min-height: 38px; padding-block: .25rem; }
html.pip-immersive .pip-stage > #status { grid-area: status; min-height: 0; align-self: center; text-align: center; overflow: hidden; }
html.pip-immersive .pip-stage > #round-msg { grid-area: msg; min-height: 1.3em; margin: 0; font-size: .9rem; }
html.pip-immersive .pip-stage > #color-btns { grid-area: ctl; margin: 0; gap: 0; }
html.pip-immersive .pip-stage > #mix-comparison { grid-area: cmp; margin: 0; padding: 0 .75rem; }
html.pip-immersive .pip-stage > #mix-comparison summary { min-height: 40px; padding-block: .4rem; }
html.pip-immersive .pip-stage > #mix-comparison[open] { max-height: 40vh; overflow-y: auto; }
html.pip-immersive .pip-stage > #lock-row { grid-area: lock; margin: 0; }
html.pip-immersive #sw-target, html.pip-immersive #sw-mix { width: var(--cm-sw); height: var(--cm-sw); }
html.pip-immersive .swatch { width: var(--cm-sw); height: var(--cm-sw); }
html.pip-immersive .mix-col::before { width: var(--cm-sw); height: var(--cm-sw); }
html.pip-immersive #color-btns .chan, html.pip-immersive #color-btns input[type=range] { min-height: 40px; height: 40px; }
html.pip-immersive #reveal-line { min-height: 0; }
html.pip-immersive #need-line:empty, html.pip-immersive #reveal-line:empty { display: none; }

@media (min-aspect-ratio: 5/4) {
  html.pip-immersive .game-wrap.pip-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "mode mode" "hud hud" "status msg" "status ctl" "status cmp" "status lock";
    align-content: start;
    --cm-sw: clamp(64px, min(calc((var(--pip-vvh, 100dvh) - 250px) * 0.8), 24vw), 280px);
  }
  html.pip-immersive .pip-stage > #lock-row { align-self: start; }
  html.pip-immersive .pip-stage > #status { align-self: start; padding-top: 4px; }
}