/* typing-race - fullscreen fit. Paired with fullscreen-fit.js, which sets --fs-w (the
   field's width) and toggles .fs-wide on .game-wrap. Everything is scoped under
   html.pip-immersive, so normal play and leaving fullscreen are untouched. */
html.pip-immersive .game-wrap { display: flex; flex-direction: column; align-items: center; gap: .35rem; box-sizing: border-box; }
html.pip-immersive .game-wrap > * { width: min(100%, var(--fs-w, 400px)); max-width: none; margin-top: 0; margin-bottom: 0; }
html.pip-immersive .tr-stage { max-width: none; width: var(--fs-w, 400px); flex: none; }
html.pip-immersive #game-canvas { width: 100%; }
html.pip-immersive .game-wrap > .hud { padding: .15rem 0; }
html.pip-immersive .game-wrap > #status { min-height: 1.3em; margin: 0; font-size: 1rem; }
html.pip-immersive .game-wrap > .tr-how { display: none; }
/* the overlays are sized for 400px: scale their type with the field */
html.pip-immersive .tr-ov { font-size: clamp(14px, calc(var(--fs-w, 400px) / 28), 26px); }
html.pip-immersive .tr-ov h2 { font-size: 1.7em; }

/* Landscape: the field fills the height on the left, controls stack on the right. */
html.pip-immersive .game-wrap.fs-wide {
  display: grid; grid-template-columns: var(--fs-w) minmax(220px, 300px); column-gap: 20px;
  grid-auto-rows: min-content; align-content: start; justify-content: center;
}
html.pip-immersive .game-wrap.fs-wide > * { grid-column: 2; width: auto; min-width: 0; }
html.pip-immersive .game-wrap.fs-wide > .tr-stage { grid-column: 1; grid-row: 1 / span 6; width: var(--fs-w); }