/* cookie-clicker · fullscreen fit. Pure layout, scoped under html.pip-immersive (the shell's
   Full screen on any device). The stage is already fixed to the visible viewport (--pip-vvh).
   Portrait: counter + cookie on top, buy list scrolls in its own box underneath.
   Landscape: cookie on the left, buy list on the right. Leaving fullscreen restores the page. */
html.pip-immersive .game-wrap.pip-stage {
  display: grid; overflow: hidden; gap: 6px; padding-bottom: 8px !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  grid-template-areas: "hud" "status" "bake" "plan" "buy" "shop";
  --cc-size: clamp(72px, calc((var(--pip-vvh, 100dvh) - 590px) * 0.5), 220px);
}
html.pip-immersive .pip-stage > .hud { grid-area: hud; padding: 0; min-height: 0; justify-content: flex-end; }
html.pip-immersive .pip-stage > .hud .btn { min-height: 38px; padding-block: .3rem; }
html.pip-immersive .pip-stage > .cc-how,
html.pip-immersive .pip-stage > #badges,
html.pip-immersive .pip-stage > #badge-label { display: none; }
html.pip-immersive .pip-stage > #status { grid-area: status; min-height: 1.3em; margin: 0; text-align: center; font-size: .8rem; }
html.pip-immersive .pip-stage > #card-grid { grid-area: bake; margin: 0; min-height: 0; }
html.pip-immersive .pip-stage > .cc-planner { grid-area: plan; margin: 0; }
html.pip-immersive .pip-stage > .buy-mode { grid-area: buy; margin: 0; }
html.pip-immersive .pip-stage > #color-btns {
  grid-area: shop; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
}
html.pip-immersive .pip-stage #color-btns .up-btn { flex: none; min-height: 46px; padding-block: .25rem; }
html.pip-immersive .bakery { padding: 0 0 .3rem; }
html.pip-immersive #cookie-count { font-size: 1.5rem; margin: 0 0 .15rem; }
html.pip-immersive #big-cookie { width: var(--cc-size); height: var(--cc-size); font-size: calc(var(--cc-size) * .46); }
html.pip-immersive #cps-line { font-size: .8rem; }
html.pip-immersive .goal { margin-top: .35rem; }
html.pip-immersive .cc-meta { margin-top: .2rem; min-height: 0; }
html.pip-immersive .cc-planner[open] { max-height: 34vh; overflow-y: auto; }

@media (min-aspect-ratio: 5/4) {
  html.pip-immersive .game-wrap.pip-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hud hud" "status status" "bake buy" "bake shop" "bake plan";
    --cc-size: clamp(72px, min(calc((var(--pip-vvh, 100dvh) - 370px) * 0.78), 36vw), 360px);
  }
  html.pip-immersive .pip-stage > #card-grid { align-self: center; }
}