/* Keep every game room inside the live iOS Safari visual viewport. */
@media (max-width: 760px) {
  html body #room:not(.hidden) {
    position: fixed !important;
    left: var(--app-visual-offset-left, 0px) !important;
    right: auto !important;
    top: var(--app-visual-offset-top, 0px) !important;
    bottom: auto !important;
    width: var(--app-visual-width, 100vw) !important;
    min-width: 0 !important;
    max-width: var(--app-visual-width, 100vw) !important;
    height: var(--app-visual-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--app-visual-height, 100dvh) !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation !important;
  }

  html body #room:not(.hidden),
  html body #room:not(.hidden) button,
  html body #room:not(.hidden) [role="button"] {
    touch-action: manipulation !important;
  }

  /* Sangong: let the table occupy the remaining grid row, not layout 100vh. */
  html body #room.sangong-mode:not(.hidden),
  html body.theme-pearl-blue #room.sangong-mode:not(.hidden) {
    height: var(--app-visual-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--app-visual-height, 100dvh) !important;
  }

  html body #room.sangong-mode:not(.hidden) > .table,
  html body.theme-pearl-blue #room.sangong-mode:not(.hidden) > .table {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
  }

  /* Mercedes/BMW: the room already owns the visual viewport offset. */
  html body #room:not(.hidden) > #benchiBaomaRoom,
  html body.theme-pearl-blue #room:not(.hidden) > #benchiBaomaRoom,
  html body #room:not(.hidden) > #benchiBaomaRoom .bmw-shell,
  html body.theme-pearl-blue #room:not(.hidden) > #benchiBaomaRoom .bmw-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* Dragon Tiger: replace its independent fixed viewport with the shared room. */
  html body #room:not(.hidden) > #dragonTigerRoom,
  html body.theme-pearl-blue #room:not(.hidden) > #dragonTigerRoom {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html body #room:not(.hidden) > #dragonTigerRoom .dt-dom-shell,
  html body.theme-pearl-blue #room:not(.hidden) > #dragonTigerRoom .dt-dom-shell,
  html body #room:not(.hidden) > #dragonTigerRoom .dt-source-wrap,
  html body.theme-pearl-blue #room:not(.hidden) > #dragonTigerRoom .dt-source-wrap {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* Hundred Niu: all nested surfaces inherit the shared visible height. */
  html body #room.hundred-niu-mode:not(.hidden) > .table,
  html body.theme-pearl-blue #room.hundred-niu-mode:not(.hidden) > .table,
  html body #room.hundred-niu-mode:not(.hidden) .hundred-niu-room,
  html body.theme-pearl-blue #room.hundred-niu-mode:not(.hidden) .hundred-niu-room {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 760px) {
    html body #room:not(.hidden),
    html body #room.sangong-mode:not(.hidden),
    html body.theme-pearl-blue #room.sangong-mode:not(.hidden) {
      height: var(--app-visual-height, 100vh) !important;
      max-height: var(--app-visual-height, 100vh) !important;
    }
  }
}