/* V38 authoritative mobile fit layer. Does not depend on the lobby-scaled class. */
@media (max-width: 700px), (max-height: 560px) {
  body.view-lobby > #lobby-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.view-lobby > #lobby-screen > #roomLobbyPanel {
    position: absolute !important;
    inset: auto !important;
    left: var(--lobby-left,0px) !important;
    top: var(--lobby-top,0px) !important;
    width: var(--lobby-canvas-width,1120px) !important;
    height: var(--lobby-canvas-height,600px) !important;
    min-width: var(--lobby-canvas-width,1120px) !important;
    max-width: var(--lobby-canvas-width,1120px) !important;
    min-height: var(--lobby-canvas-height,600px) !important;
    max-height: var(--lobby-canvas-height,600px) !important;
    margin: 0 !important;
    translate: none !important;
    scale: none !important;
    transform: scale(var(--lobby-scale,1)) !important;
    transform-origin: 0 0 !important;
    overflow: hidden !important;
  }

  body.view-lobby #fullscreenBtn,
  body.view-lobby #installPwaBtn,
  body.view-lobby #chatBox {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  body.view-lobby > #lobby-screen > #roomLobbyPanel {
    padding: 12px !important;
    grid-template-rows: 70px minmax(0,1fr) !important;
    gap: 10px !important;
  }
  body.view-lobby #roomLobbyPanel .lobby-header { min-height: 70px !important; }
  body.view-lobby .lobby-content-grid { grid-template-columns: 330px minmax(0,1fr) !important; grid-template-rows: minmax(0,1fr) !important; gap: 10px !important; }
  body.view-lobby .lobby-showcase,
  body.view-lobby .lobby-form-panel { min-height: 0 !important; height: 100% !important; }
}

@media (orientation: portrait) and (max-width: 700px) {
  body.view-lobby > #lobby-screen > #roomLobbyPanel {
    padding: 16px !important;
    grid-template-rows: 92px minmax(0,1fr) !important;
    gap: 14px !important;
  }
  body.view-lobby .lobby-content-grid { grid-template-columns: 1fr !important; grid-template-rows: 390px minmax(0,1fr) !important; gap: 14px !important; }
  body.view-lobby .lobby-showcase,
  body.view-lobby .lobby-form-panel { min-width: 0 !important; min-height: 0 !important; width: 100% !important; }
}