/* Mobile readability and room scrolling, 2026-09-28 */
@media (max-width: 760px) {
  html:has(.roomPage), body:has(.roomPage), body:has(.roomPage) #root {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body:has(.roomPage) { position: static !important; }
  body:has(.roomPage) #root { position: relative !important; }
  .roomPage { padding: 18px 14px max(90px, env(safe-area-inset-bottom)) !important; }
  .roomCard { padding: 20px 16px !important; }
  .roomCard h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.15 !important; margin-bottom: 18px !important; overflow-wrap: anywhere; }
  .roomSeats { gap: 10px !important; }
  .roomSeat { min-height: 112px !important; padding: 12px !important; }
  .roomSeat b { font-size: 17px !important; }
  #root main.entertainmentLobby .createPanelInline {
    box-sizing: border-box !important;
    max-height: calc(100dvh - 68px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom)) !important;
  }
  #root main.entertainmentLobby .createPanelInline .createFormGrid .gameChoices button {
    min-height: 52px !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  #root main.entertainmentLobby .createPanelInline .tableThemeOption {
    min-height: 66px !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  #root main.entertainmentLobby .createPanelInline .tableThemeOption > b { font-size: 15px !important; line-height: 1.3 !important; }
  #root main.entertainmentLobby .createPanelInline .tableThemeOption > small { font-size: 13px !important; line-height: 1.3 !important; }
  #root main.entertainmentLobby .createPanelInline .createFormGrid label,
  #root main.entertainmentLobby .createPanelInline .createChecks .checkRow { font-size: 14px !important; line-height: 1.35 !important; }
  #root main.entertainmentLobby .createPanelInline .createFormGrid input { font-size: 16px !important; }
}

@media (max-width: 760px) {
  body:has(.roomPage) { scroll-padding-bottom: 24px; }
  .roomPage .chatPanel { max-width: 100%; }
  .roomPage .chatSend {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
  }
  .roomPage .chatComposer .chatSend { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .roomPage .chatSend input { min-width: 0 !important; font-size: 16px !important; }
  .roomPage .chatSend button { min-height: 44px !important; font-size: 14px !important; white-space: nowrap !important; }
  .roomPage .chatComposer { scroll-margin-bottom: 20px; }
}

/* Okey table cards in the lobby */
@media (max-width: 760px) and (orientation: portrait) {
  .mobileTablesPanel { max-height: min(260px, 35dvh) !important; }
  .mobileTablesScroller {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 7px 10px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .mobileTableCard {
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: initial !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 5px !important;
    padding: 12px !important;
    border: 5px solid #6b492e !important;
    border-radius: 15px !important;
    background: radial-gradient(circle at 50% 42%, #235b49, #103a32 78%) !important;
    box-shadow: inset 0 0 0 2px #b58a54, 0 5px 12px #0005 !important;
    overflow: hidden !important;
  }
  .mobileTableType span, .mobileTableType em { font-size: 11px !important; }
  .mobileTableName { color: #fff !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 16px !important; line-height: 1.2 !important; }
  .mobileTableCard small { color: #d9e9df !important; font-size: 11px !important; line-height: 1.25 !important; }
  .mobileTableCard button { min-height: 36px !important; padding: 5px 7px !important; font-size: 13px !important; }
}
@media (min-width: 761px) {
  #root main.entertainmentLobby .funTableCard {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 290px !important;
    max-height: none !important;
    border: 6px solid #6b492e !important;
    background: radial-gradient(circle at 50% 42%, #235b49, #103a32 78%) !important;
    box-shadow: inset 0 0 0 2px #b58a54, 0 8px 20px #0004 !important;
  }
  #root main.entertainmentLobby .funTableCard h3 { color: #fff !important; }
}

@media (min-width: 761px) {
  #root main.entertainmentLobby .funTableGrid { grid-template-columns: repeat(auto-fill, minmax(300px, 320px)) !important; }
  #root main.entertainmentLobby .funTableCard { min-height: 0 !important; width: 100% !important; }
}

/* Legible actions on the portrait 101 board */
@media (max-width: 700px) and (orientation: portrait) {
  main.gameScreen.yuzbirGame .rackTools button,
  main.gameScreen.yuzbirGame .rack101OpenActions button {
    font-size: 9px !important;
    line-height: 1.15 !important;
    min-height: 26px !important;
    white-space: normal !important;
  }
  main.gameScreen.yuzbirGame .rackTools { width: 59% !important; }
  main.gameScreen.yuzbirGame .rack101ScoreBar { width: 40% !important; }
  main.gameScreen.yuzbirGame .centerDeck small:after { font-size: 9px !important; }
  main.gameScreen.yuzbirGame .timerBox small { font-size: 8px !important; }
  main.gameScreen.yuzbirGame .timerBox strong { font-size: 11px !important; }
  main.gameScreen.yuzbirGame .seat b,
  main.gameScreen.yuzbirGame .seat .styledName { font-size: 10px !important; }
}