/* Reserve a real row for controls; only the table and rules scroll on phones. */
@media (max-width: 900px) {
  .play-mode .side-panel:has(.cards-view.active.in-card-round) { height: calc(var(--tea-visible-bottom, 100dvh) - 58px); }
  .play-mode .cards-view.active.in-card-round {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 0;
  }
  .cards-view.in-card-round > .game-page-heading,
  .cards-view.in-card-round > .card-mode-picker { flex: none; }
  .play-mode .cards-view.in-card-round .game-page-heading { margin-bottom: 8px; }
  .play-mode .cards-view.in-card-round .game-page-heading h2 { font-size: 16px; }
  .cards-view.in-card-round.show-card-picker .card-mode-picker { margin-bottom: 8px; }
  .cards-view.in-card-round > :is(#tienlen-mode, #color-cards-mode, #baicao-mode, #poker-mode):not([hidden]),
  .cards-view.in-card-round :is(#tl-game, #card-game, #bc-game, #pk-game):not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: 0;
  }
  .cards-view.in-card-round .card-scroll-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 3px 3px 7px;
    scrollbar-width: thin;
    scroll-padding: 12px;
  }
  .cards-view.in-card-round :is(.tl-actions, .card-action-bar, .classic-actions) {
    position: relative;
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7px 3px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid #c4ad80;
    box-shadow: 0 -3px 8px #77532812;
  }
  .cards-view.in-card-round :is(.tl-actions, .classic-actions) > p,
  .cards-view.in-card-round #card-feedback {
    min-height: 0;
    margin: 0 0 5px;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .cards-view.in-card-round :is(.tl-actions, .classic-actions) > p:empty,
  .cards-view.in-card-round #card-feedback:empty { display: none; }
  .cards-view.in-card-round :is(.tl-rules, .classic-rules) {
    margin: 9px 0 0;
    padding: 7px 9px;
    font-size: 11px;
  }
  .cards-view.in-card-round :is(.tl-rules, .classic-rules) summary { min-height: 28px; }
  .cards-view.in-card-round :is(.tl-action-buttons, .classic-buttons) { gap: 6px; }
  .cards-view.in-card-round .classic-buttons > button { min-height: 44px; }
  .cards-view.in-card-round .tl-action-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards-view.in-card-round .tl-action-buttons > button { min-width: 0; min-height: 44px; padding: 8px 3px; }
  .cards-view.in-card-round :is(#tl-retry, #tl-rematch) { grid-column: span 2; }
  .cards-view.in-card-round .classic-buttons:empty { display: none; }
  .cards-view.in-card-round .classic-rematch-setup { margin: 0; font-size: 11px; }
  .cards-view.in-card-round .classic-rematch-setup select { min-height: 44px; }
  .cards-view.in-card-round #pk-controls .classic-buttons { gap: 5px; max-width: none; }
  .cards-view.in-card-round #pk-controls .classic-buttons button { min-height: 44px; }
  .cards-view.in-card-round .poker-raise-control {
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
    margin: 6px 0 0;
    min-height: 0;
    gap: 4px 7px;
  }
  .cards-view.in-card-round .poker-raise-control label { margin: 0; font-size: 10px; }
  .cards-view.in-card-round .poker-raise-control input { width: 100%; min-height: 44px; font-size: 16px; }
  .cards-view.in-card-round .poker-raise-control button { min-height: 44px; padding: 8px 6px; }
  .cards-view.in-card-round .poker-raise-control > small { font-size: 10px; line-height: 1.3; }
  .cards-view.in-card-round .classic-actions > .classic-buttons { margin-top: 5px; }
  .cards-view.in-card-round .card-action-bar { gap: 5px 8px; }
  .cards-view.in-card-round .card-action-bar .primary { min-height: 44px; }
  .cards-view.in-card-round .card-action-bar .color-picker { gap: 8px; padding: 2px 0; }
  .cards-view.in-card-round .color-picker #cancel-wild { height: 44px; }

  /* Keep names on four edges, but remove the oversized empty felt. */
  .cards-view.in-card-round :is(.tl-felt, .card-table) { border-width: 4px; padding: 7px; }
  .cards-view.in-card-round .card-arena {
    grid-template-columns: 68px minmax(0, 1fr) 68px;
    grid-template-rows: auto minmax(120px, auto) auto;
    min-height: 0;
    gap: 6px;
  }
  .cards-view.in-card-round .tl-arena .tl-player { padding: 5px 3px; gap: 2px; }
  .cards-view.in-card-round .tl-arena { grid-template-rows: auto auto minmax(85px, auto) auto; }
  .cards-view.in-card-round .tl-arena .tl-turn { grid-area: 2 / 2; }
  .cards-view.in-card-round .tl-arena .tl-center { grid-area: 3 / 2; min-height: 85px; padding: 0; gap: 4px; }
  .cards-view.in-card-round .tl-arena [data-edge=left] { grid-area: 2 / 1 / 4 / 2; }
  .cards-view.in-card-round .tl-arena [data-edge=right] { grid-area: 2 / 3 / 4 / 4; }
  .cards-view.in-card-round .tl-arena [data-edge=bottom] { grid-area: 4 / 2; }
  .cards-view.in-card-round .tl-arena .tl-top { min-height: 60px; }
  .cards-view.in-card-round .tl-empty-trick { min-height: 52px; }
  .cards-view.in-card-round .tl-hand-heading { padding-top: 7px; }
  .cards-view.in-card-round .hand-sort-row { margin-top: 5px; align-items: center; }
  .cards-view.in-card-round .hand-sort-row button { min-height: 38px; padding: 5px 7px; }
  .cards-view.in-card-round .tl-hand { gap: 12px 6px; padding: 14px 0 4px; }
  .cards-view.in-card-round .color-arena .card-stage { height: 150px; gap: 10px; padding-bottom: 48px; }
  .cards-view.in-card-round .color-arena .card-player { padding: 4px 3px; min-height: 0; }
  .cards-view.in-card-round .color-arena + .hand-area { padding-top: 5px; margin-top: 6px; }
  .cards-view.in-card-round .color-arena + .hand-area > small { display: none; }
  .cards-view.in-card-round .color-arena + .hand-area .hand { gap: 10px; padding: 12px 2px 5px; }
  .cards-view.in-card-round .color-arena + .hand-area .hand .playing-card { max-height: 88px; }

  .cards-view.in-card-round .classic-felt {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    border-width: 4px;
    padding: 6px 5px 9px;
    gap: 5px 6px;
  }
  .cards-view.in-card-round .classic-game-label { display: none; }
  .cards-view.in-card-round .classic-player { padding: 4px 3px; gap: 2px; }
  .cards-view.in-card-round .classic-edge-top .classic-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 210px;
    text-align: left;
    column-gap: 6px;
    padding: 5px 7px;
  }
  .cards-view.in-card-round .classic-edge-top .classic-player-name { grid-column: 1; grid-row: 1; }
  .cards-view.in-card-round .classic-edge-top .classic-player-badge { grid-column: 1; grid-row: 2; }
  .cards-view.in-card-round .classic-edge-top .classic-player-cards { grid-column: 2; grid-row: 1 / 3; }
  .cards-view.in-card-round .classic-edge-top :is(.classic-player-info, .classic-player-action) { grid-column: 1 / -1; text-align: center; }
  .cards-view.in-card-round .classic-player-cards { min-height: 34px; margin: 0; }
  .cards-view.in-card-round .classic-player-cards .classic-card { width: 24px; flex-basis: 24px; height: 34px; }
  .cards-view.in-card-round .classic-player-info { min-height: 0; line-height: 1.35; }
  .cards-view.in-card-round .classic-edge-bottom .classic-player { padding: 4px 7px; }
  .cards-view.in-card-round .classic-turn { margin: 0; font-size: 11px; }
  .cards-view.in-card-round .poker-board-area { min-height: 0; gap: 3px; padding: 2px 0 3px; }
  .cards-view.in-card-round .poker-pot { padding: 3px 9px; }
  .cards-view.in-card-round .poker-recent-actions { min-height: 0; }
  .cards-view.in-card-round .classic-hand { min-height: 0; padding: 5px 0 2px; }
  .cards-view.in-card-round .classic-hand .classic-card { width: 56px; flex-basis: 56px; }
  .cards-view.in-card-round .classic-hand .classic-card-corner { font-size: 17px; }
  .cards-view.in-card-round .classic-hand .classic-card-symbol { font-size: 31px; }
  .cards-view.in-card-round .baicao-table-center { min-height: 92px; gap: 6px; }
  .cards-view.in-card-round .classic-results { margin: 5px 0 0; padding: 7px; }
}

/* A landscape phone or keyboard may leave very little room above the buttons. */
@media (max-width: 900px) and (max-height: 500px) {
  .play-mode .cards-view.active.in-card-round { padding-top: 5px; }
  .play-mode .cards-view.in-card-round .game-page-heading { margin-bottom: 4px; }
  .cards-view.in-card-round.show-card-picker .card-mode-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .cards-view.in-card-round.show-card-picker .card-mode-picker button { grid-template-columns: 1fr; padding: 5px; }
  .cards-view.in-card-round.show-card-picker .card-mode-picker button > span { display: none; }
}