/* whack-a-mole - fullscreen: paired with fullscreen-fit.js (sets --fs-side, toggles .fs-wide).
   Only applies while the game-shell Full screen is on (html.pip-immersive). */
html.pip-immersive .game-wrap { overflow: hidden; display: flex; flex-direction: column; align-items: center; }
html.pip-immersive .game-wrap > .hud,
html.pip-immersive .game-wrap > .wm-bar,
html.pip-immersive .game-wrap > #status { width: var(--fs-side, 100%); max-width: 100%; box-sizing: border-box; flex: none; }
html.pip-immersive .game-wrap > .hud { margin: 0 0 6px; }
html.pip-immersive .game-wrap > #status { min-height: 1.3em; margin: 4px 0; font-size: .85rem; text-align: center; }
html.pip-immersive .game-wrap > #card-grid {
  width: var(--fs-side, 100%); max-width: 100%; margin: 0 auto; flex: none;
  display: grid; align-content: stretch;
}
html.pip-immersive .game-wrap > .wm-how,
html.pip-immersive .game-wrap > #wm-coach { display: none; }

/* Wide screens: field on the left at full height, HUD / timer / status stacked on the right. */
html.pip-immersive .game-wrap.fs-wide {
  display: grid; grid-template-columns: var(--fs-side) minmax(200px, 300px); column-gap: 20px;
  justify-content: center; align-content: center; align-items: start;
}
html.pip-immersive .game-wrap.fs-wide > #card-grid { grid-column: 1; grid-row: 1 / span 4; width: var(--fs-side); }
html.pip-immersive .game-wrap.fs-wide > .hud,
html.pip-immersive .game-wrap.fs-wide > .wm-bar,
html.pip-immersive .game-wrap.fs-wide > #status { grid-column: 2; width: 100%; }
html.pip-immersive .game-wrap.fs-wide > .hud { align-self: end; flex-direction: column; align-items: stretch; gap: 10px; font-size: 1.1rem; }
html.pip-immersive .game-wrap.fs-wide > #status { align-self: start; text-align: left; }