/* fortune-wheel · fullscreen — paired with fullscreen-fit.js (--fs-hero-h / --fs-hero-w, html.fs-wide).
   Everything is scoped under html.pip-immersive: normal play is untouched. */
html.pip-immersive .game-wrap.pip-stage {
  display: flex; flex-direction: column; align-items: center;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
html.pip-immersive .game-wrap.pip-stage > * { width: min(100%, 560px); flex: none; }
html.pip-immersive .game-wrap.pip-stage > #wheel-stage {
  width: 100%; max-width: 760px; height: var(--fs-hero-h, 320px); margin: 0; container-type: size; box-sizing: border-box;
}
/* Landscape: hero on the left at full height, the rest in a right-hand column. */
html.pip-immersive.fs-wide .game-wrap.pip-stage {
  display: grid; grid-template-columns: var(--fs-hero-w, 55%) minmax(260px, 440px); column-gap: 24px;
  grid-auto-rows: min-content; align-content: start; justify-content: center; align-items: start; overflow-y: auto;
}
html.pip-immersive.fs-wide .game-wrap.pip-stage > * { width: auto; grid-column: 2; min-width: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > #wheel-stage { grid-column: 1; grid-row: 1 / span 14; max-width: none; height: var(--fs-hero-h, 320px); position: sticky; top: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > .pip-dock { grid-column: 1 / -1; }
/* the wheel box: the canvases are centred and scaled up to fill it (hd.js sets --fw-k) */
html.pip-immersive #wheel-stage { display: grid; place-items: center; overflow: hidden; max-width: none; }
html.pip-immersive #wheel-stage > #game-canvas { grid-area: 1 / 1; }
html.pip-immersive.fw-hd #wheel-stage { overflow: hidden; }
html.pip-immersive #wheel-stage #result-overlay { position: absolute; inset: 0; }
html.pip-immersive .game-wrap.pip-stage > #wheel-stage { width: 100%; }
html.pip-immersive #wheel-stage { grid-template: 100% / 100%; }
html.pip-immersive .howto, html.pip-immersive .facts { display: none; }
html.pip-immersive:not(.fs-wide) #presets { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
html.pip-immersive:not(.fs-wide) #presets .chip { flex: none; }
/* fsfix: recent-picks log is not play; the no-repeat toggle is a setting hidden on short/landscape screens */
html.pip-immersive #history { display: none; }
html.pip-immersive.fs-wide .elim, html.pip-immersive .elim.fs-hide { display: none; }
@media (max-height: 480px) { html.pip-immersive .elim { display: none; } }
