html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/*
  Immersive game rooms (ViewData HideHeader → body.immersive-room):
  Lock the page chrome so only inner lobby/game panels scroll.
  Room shells should size to the viewport themselves (h-dvh / 100dvh).
  Do NOT use [id$="-lobby"] — that also matches nested ids like
  #pic-host-display-lobby and collapses them into a one-line scroller.
*/
body.immersive-room {
  margin-bottom: 0;
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  /* Override Tailwind min-h-screen (100vh) which is taller than the phone UI */
  min-height: 100dvh;
}

body.immersive-room > div,
body.immersive-room > div > main {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Main room waiting panels only (not nested *-lobby widgets) */
body.immersive-room #pic-lobby:not(.hidden),
body.immersive-room #farkle-lobby:not(.hidden),
body.immersive-room #swoop-lobby:not(.hidden),
body.immersive-room #ohcrap-lobby:not(.hidden),
body.immersive-room #mm-lobby:not(.hidden),
body.immersive-room #set-lobby:not(.hidden),
body.immersive-room #skyjo-lobby:not(.hidden),
body.immersive-room #euchre-lobby:not(.hidden),
body.immersive-room #md-lobby-panel:not(.hidden) {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Phone-control game panel (Pictionary) */
body.immersive-room #pic-game:not(.hidden) {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/*
  Keep inactive main lobby/game panels out of layout even if Tailwind
  `hidden` + `flex` ever disagree.
*/
body.immersive-room #pic-lobby.hidden,
body.immersive-room #pic-game.hidden,
body.immersive-room #farkle-lobby.hidden,
body.immersive-room #farkle-game.hidden,
body.immersive-room #swoop-lobby.hidden,
body.immersive-room #swoop-game.hidden,
body.immersive-room #ohcrap-lobby.hidden,
body.immersive-room #ohcrap-game.hidden,
body.immersive-room #mm-lobby.hidden,
body.immersive-room #mm-game.hidden,
body.immersive-room #set-lobby.hidden,
body.immersive-room #set-game.hidden,
body.immersive-room #skyjo-lobby.hidden,
body.immersive-room #skyjo-game.hidden,
body.immersive-room #euchre-lobby.hidden,
body.immersive-room #euchre-game.hidden,
body.immersive-room #md-lobby-panel.hidden {
  display: none !important;
}