/* vcrush · fullscreen — paired with js/fullscreen-fit.js, which sets --fs-side
   (the tray's edge) and toggles .fs-wide. Only applies while the game-shell's
   Full screen is on (html.pip-immersive); normal play is untouched. */
html.pip-immersive .shop { border: 0; border-radius: 0; box-shadow: none; }
html.pip-immersive .shop .awning { display: none; }
html.pip-immersive .shop .play {
  position: relative;
  box-sizing: border-box;
  width: min(100%, calc(max(var(--fs-side, 480px), 420px) + 2 * clamp(12px, 3vw, 20px)));
  margin-inline: auto;
}
html.pip-immersive .shop .play .tray { max-width: var(--fs-side, none); }

/* Wide screens: the tray fills the height on the left, everything else stacks on the right. */
html.pip-immersive .shop.fs-wide .play {
  display: grid;
  grid-template-columns: var(--fs-side) 340px;
  grid-template-rows: repeat(6, auto) 1fr;
  column-gap: 20px;
  align-content: start;
  justify-content: center;
  width: 100%;
  height: var(--fs-avail, auto);
}
html.pip-immersive .shop.fs-wide .play > * { grid-column: 2; min-width: 0; }
html.pip-immersive .shop.fs-wide .play > .tray {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: var(--fs-side);
}
html.pip-immersive .shop.fs-wide .play .controls { border-top: 0; }

/* Coach tips and the skip button float over the tray instead of pushing it off screen. */
html.pip-immersive .shop .play .coach {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(90%, 32rem);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  pointer-events: none;
}
html.pip-immersive .shop .play .skip-crush {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 72px;
  width: min(80%, 22rem);
  transform: translateX(-50%);
}
/* An absolute grid child is placed in its grid area: span the whole grid and centre on the tray. */
html.pip-immersive .shop.fs-wide .play > .coach,
html.pip-immersive .shop.fs-wide .play > .skip-crush {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  left: calc(var(--fs-side) / 2);
  width: min(90%, 32rem, calc(var(--fs-side) - 24px));
}
