/* Single source of truth for screen visibility and layer ordering. */
:root {
  --layer-screen: 100;
  --layer-panel: 110;
  --layer-modal: 1000;
  --layer-floating: 1200;
}

body > #auth-screen,
body > #main-menu-screen,
body > #lobby-screen,
body > #game-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--layer-screen) !important;
  width: 100vw !important;
  height: 100dvh !important;
  visibility: hidden !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.view-auth > #auth-screen,
body.view-main > #main-menu-screen,
body.view-lobby > #lobby-screen,
body.view-game > #game-container {
  visibility: visible !important;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Explicit inactive-state matrix. This has higher specificity than legacy
   fullscreen/orientation rules and guarantees that an inactive full-screen
   layer cannot remain above the current view. */
body.view-auth > #main-menu-screen,
body.view-auth > #lobby-screen,
body.view-auth > #game-container,
body.view-main > #auth-screen,
body.view-main > #lobby-screen,
body.view-main > #game-container,
body.view-lobby > #auth-screen,
body.view-lobby > #main-menu-screen,
body.view-lobby > #game-container,
body.view-game > #auth-screen,
body.view-game > #main-menu-screen,
body.view-game > #lobby-screen {
  visibility: hidden !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.view-lobby > #lobby-screen {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow: auto !important;
  background: #eef4fb !important;
}

body.view-lobby > #lobby-screen > #roomLobbyPanel {
  position: relative !important;
  z-index: var(--layer-panel) !important;
  visibility: visible !important;
  display: block !important;
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  opacity: 1 !important;
  overflow: auto !important;
  pointer-events: auto !important;
  transform: none !important;
  clip: auto !important;
  filter: none !important;
}

/* Runtime recovery: if a browser reports a zero-size lobby panel after the
   route changes, detach the panel from the flex calculation and pin it safely
   inside the viewport. */
body.view-lobby.screen-render-recovery > #lobby-screen > #roomLobbyPanel {
  position: fixed !important;
  inset: 16px !important;
  z-index: 130 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto !important;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #ffffff !important;
}

body:not(.view-game) > #orientationWarning,
body.view-lobby > #shopModal,
body.view-lobby > #topupModal {
  visibility: hidden !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.swal2-container {
  z-index: var(--layer-modal) !important;
}

#fullscreenBtn,
#installPwaBtn {
  z-index: var(--layer-floating) !important;
}

body.view-lobby #lobby-screen .lobby-header h1 {
  font-size: 32px !important;
}

body.view-lobby #lobby-screen p,
body.view-lobby #lobby-screen label,
body.view-lobby #lobby-screen select,
body.view-lobby #lobby-screen input,
body.view-lobby #lobby-screen button {
  font-size: max(14px, 0.9rem) !important;
}

body.view-lobby #lobby-screen small {
  font-size: 12px !important;
}

@media (max-width: 680px) {
  body.view-lobby > #lobby-screen {
    align-items: flex-start !important;
    padding: 10px !important;
  }

  body.view-lobby > #lobby-screen > #roomLobbyPanel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
}