@media (min-width: 821px) {
  #community-room .community-layout {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  #community-room .community-games-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #community-room .community-games-panel > .column-head,
  #community-room .community-games-panel > .community-create-table {
    flex-shrink: 0;
  }

  #community-room #rooms,
  #community-room .community-game-rooms {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 28px;
  }

  #community-room .community-members-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  #community-room .community-members {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 820px) {
  html:has(body:not(.community-mode):not(.sd-web-game):not(.sd-game-opening):not(.settings-open)),
  body:not(.community-mode):not(.sd-web-game):not(.sd-game-opening):not(.settings-open) {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body:not(.community-mode):not(.sd-web-game):not(.sd-game-opening):not(.settings-open) #app,
  body:not(.community-mode):not(.sd-web-game):not(.sd-game-opening):not(.settings-open) #app > .main {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  body:not(.community-mode):not(.sd-web-game):not(.sd-game-opening):not(.settings-open) #app > .main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:has(body.community-mode:not(.sd-web-game):not(.sd-game-opening)),
  body.community-mode:not(.sd-web-game):not(.sd-game-opening) {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.community-mode:not(.sd-web-game):not(.sd-game-opening) #app,
  body.community-mode:not(.sd-web-game):not(.sd-game-opening) #app > .main {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.community-mode:not(.sd-web-game):not(.sd-game-opening) #page-lobby,
  body.community-mode:not(.sd-web-game):not(.sd-game-opening) #community-room:not(.hidden) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #community-room .community-layout {
    position: relative !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 0% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #community-room .community-layout:not([data-mobile-tab='games']) #community-panel-games,
  #community-room .community-layout:not([data-mobile-tab='members']) #community-panel-members,
  #community-room .community-layout[data-mobile-tab='games'] #community-panel-chat,
  #community-room .community-layout[data-mobile-tab='members'] #community-panel-chat {
    display: none !important;
  }

  #community-room .community-layout[data-mobile-tab='games'] #community-panel-games,
  #community-room .community-layout[data-mobile-tab='members'] #community-panel-members {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: block;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #community-room .community-layout:not([data-mobile-tab]) #community-panel-chat,
  #community-room .community-layout[data-mobile-tab='chat'] #community-panel-chat {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #community-room #rooms,
  #community-room .community-game-rooms {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 32px;
  }

  #community-room #community-panel-members .community-members,
  #community-room #members {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 32px;
  }

  #community-room .community-chat-messages,
  #chat-messages {
    flex: 1 1 0%;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .community-card,
  .community-card *,
  .plazr-table-card,
  .plazr-table-card *,
  .community-create-table,
  .community-member,
  .community-member *,
  .store-item-card,
  .store-item-card *,
  .pf-person,
  .pf-tools button {
    touch-action: pan-y manipulation;
  }
}