/* A shared four-seat table keeps the same live rack across orientations. */
.landscape-table,
.landscape-controls {
  display: none;
}
.table-inspection {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid #ddc58b;
  border-radius: 12px;
  background: #123e30;
  color: #f5eddb;
  padding: 20px;
}
.table-inspection::backdrop {
  background: #061e18c9;
}
.table-inspection h2 {
  font-size: 20px;
  margin: 0 0 16px;
}
.table-inspection .inspection-tiles {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.table-inspection .inspection-tiles .tile {
  width: 55px;
  height: 74px;
}
.table-inspection .inspection-close {
  display: block;
  margin: 20px 0 0 auto;
  min-height: 44px;
}

@media (min-width: 560px) and (max-width: 1100px) and (max-height: 600px) and (orientation: landscape),
  (min-width: 560px) and (max-width: 1400px) and (max-height: 900px) and (orientation: landscape) and (pointer: coarse) {
  .claim-set {
    display: none;
  }
  .table-turn-bar .move-actions {
    order: 0;
  }
  .app-shell {
    max-width: none;
    padding: max(0px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 0
      max(6px, env(safe-area-inset-left));
  }
  .topbar {
    height: 44px;
    padding: 0 5px;
    gap: 8px;
    border: 0;
  }
  .brand {
    min-width: 0;
    gap: 0;
  }
  .brand h1 {
    font:
      600 16px ui-sans-serif,
      system-ui,
      sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .brand-mark,
  .brand small,
  .nav,
  .table-toolbar,
  .sidebar,
  .footer,
  .hand-controls,
  .desktop-advice,
  .play-area > .win-announcement {
    display: none;
  }
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .mobile-header-actions button {
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #adc1a72b;
    border-radius: 6px;
    background: #183d2d;
    font-size: 14px;
  }
  .landscape-controls {
    display: flex;
    gap: 5px;
    margin-left: auto;
  }
  .landscape-controls button {
    min-height: 40px;
    padding: 6px 9px;
    border: 1px solid #adc1a72b;
    border-radius: 6px;
    background: #183d2d;
    font-size: 14px;
  }
  .workspace {
    display: block;
    padding: 0;
    height: calc(100dvh - 44px - env(safe-area-inset-top));
  }
  .play-area {
    height: 100%;
    display: flex;
    min-height: 0;
    flex-direction: column;
  }
  .board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: none;
    flex: 1;
    border: 3px solid #473e2e;
    border-radius: 12px;
    overflow: hidden;
  }
  .board:before,
  .board > .seat,
  .board > .table-center,
  .mobile-table {
    display: none;
  }
  .landscape-table {
    display: flex;
    flex: 1;
    min-height: 70px;
    min-width: 0;
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
  }
  .landscape-felt {
    flex: 1;
    min-width: 0;
    min-height: 186px;
    position: relative;
    container-type: size;
    background: radial-gradient(ellipse at 50% 45%, #28614a, #164834);
    --rail: clamp(66px, 9vw, 94px);
  }
  .landscape-seat {
    position: absolute;
    z-index: 2;
    min-width: 0;
    padding: 0;
    max-width: none;
    background: none;
    border: 0;
    overflow: visible;
  }
  .landscape-seat-top {
    top: 3px;
    left: calc(var(--rail) + 62px);
    right: calc(var(--rail) + 62px);
    height: 76px;
  }
  .landscape-seat-left,
  .landscape-seat-right {
    top: 5px;
    bottom: 5px;
    width: var(--rail);
  }
  .landscape-seat-left {
    left: 2px;
  }
  .landscape-seat-right {
    right: 2px;
  }
  .landscape-rack {
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 6px;
    min-width: 0;
  }
  .landscape-seat-left .landscape-rack,
  .landscape-seat-right .landscape-rack {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100cqh - 12px);
    max-height: var(--rail);
    overflow: auto;
    scrollbar-width: thin;
    transform-origin: center;
  }
  .landscape-seat-left .landscape-rack {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .landscape-seat-right .landscape-rack {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .landscape-seat.is-active .landscape-rack {
    background: #e4ca8120;
    border-color: #e8cc80;
  }
  .landscape-seat.is-winner .landscape-rack {
    background: #e4ca8133;
    border-color: #ffdb8e;
  }
  .landscape-name {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 24px;
    font-size: 14px;
  }
  .landscape-name > strong {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ecdfbf;
    font-weight: 650;
  }
  .landscape-name .seat-markers {
    display: flex;
    gap: 2px;
  }
  .landscape-name .avatar,
  .landscape-name .badge {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 24px;
    min-height: 0;
    border: 1px solid #c5b890;
    border-radius: 3px;
    background: #fff7de;
    color: #214531;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
  }
  .landscape-name .dealer-marker,
  .landscape-name .badge.dealer {
    color: #b52331;
    border-color: #cf5157;
  }
  .landscape-name .tai-badge,
  .landscape-name .tai {
    display: flex;
    position: static;
    transform: none;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 24px;
    flex-shrink: 0;
    padding: 3px 5px;
    background: #153e2d;
    border: 1px solid #dfc48b66;
    border-radius: 4px;
    white-space: nowrap;
    color: #f4d58f;
    font-size: 14px;
  }
  .landscape-name .tai-count,
  .landscape-name .tai-count b {
    font-size: 14px;
    line-height: 1;
  }
  .landscape-name .tai-count > span,
  .landscape-name .tai-meter,
  .landscape-name .tai-caption {
    display: none;
  }
  .landscape-backs {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin: 3px auto;
    max-width: 260px;
    height: 12px;
  }
  .landscape-backs i {
    display: block;
    flex: 1;
    max-width: 19px;
    min-width: 0;
    border: 1px solid #98bba175;
    border-bottom: 3px solid #e0d5b6;
    border-radius: 2px;
    background: #478669;
  }
  .landscape-declared {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: auto;
    scrollbar-width: thin;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0 3px;
  }
  .landscape-meld,
  .landscape-bonus {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1px;
    background: none;
    border: 0;
    border-radius: 3px;
    padding: 0;
    min-height: 0;
    line-height: 0;
  }
  .landscape-declared .tile {
    --tile-w: 21px;
    --tile-h: 28px;
    width: 21px;
    height: 28px;
    border-radius: 3px;
    flex-shrink: 0;
    padding: 0;
  }
  .landscape-bonus .tile {
    --tile-w: 18px;
    --tile-h: 25px;
    width: 18px;
    height: 25px;
  }
  .landscape-winning {
    overflow: auto;
    max-width: 100%;
    padding: 4px 2px;
    scrollbar-width: thin;
  }
  .landscape-winning .winning-concealed {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
  }
  .landscape-winning .tile {
    --tile-w: 23px;
    --tile-h: 31px;
    width: 23px;
    height: 31px;
  }
  .landscape-centre {
    position: absolute;
    inset: 0 calc(var(--rail) + 7px) 3px;
    display: grid;
    grid-template-columns: minmax(32px, 1fr) minmax(150px, 2.8fr) minmax(32px, 1fr);
    grid-template-rows: 76px minmax(27px, 1fr) minmax(44px, auto) minmax(27px, 1fr);
    gap: 3px 10px;
  }
  .landscape-river {
    display: flex;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  .landscape-river-top {
    grid-area: 2/2;
  }
  .landscape-river-bottom {
    grid-area: 4/2;
  }
  .landscape-river-left {
    grid-area: 1/1/5/2;
  }
  .landscape-river-right {
    grid-area: 1/3/5/4;
  }
  .landscape-river-scroll {
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
    min-width: 0;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #a2b99470 transparent;
    padding: 2px;
  }
  .landscape-pile {
    display: grid;
    grid-template-columns: repeat(8, 20px);
    grid-auto-rows: 27px;
    gap: 3px 2px;
    justify-content: center;
    min-height: 0;
    width: max-content;
    min-width: 100%;
    padding: 1px;
  }
  .landscape-river-left .landscape-pile,
  .landscape-river-right .landscape-pile {
    grid-template-columns: none;
    grid-template-rows: repeat(8, 20px);
    grid-auto-columns: 27px;
    grid-auto-rows: 20px;
    gap: 2px 3px;
    justify-content: start;
  }
  .landscape-river-right .landscape-pile {
    direction: rtl;
  }
  .landscape-discard {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: none;
    border: 0;
    border-radius: 3px;
    min-height: 0;
    padding: 0;
    width: 20px;
    height: 27px;
  }
  .landscape-discard .tile {
    --tile-w: 20px;
    --tile-h: 27px;
    width: 20px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 1px 0 #9cac8d;
    padding: 0;
  }
  .landscape-river-left .landscape-discard,
  .landscape-river-right .landscape-discard {
    width: 27px;
    height: 20px;
  }
  .landscape-river-left .landscape-discard .tile {
    transform: rotate(90deg);
  }
  .landscape-river-right .landscape-discard .tile {
    transform: rotate(-90deg);
  }
  .landscape-river-top .landscape-discard .tile {
    transform: rotate(180deg);
  }
  .landscape-discard.is-latest {
    outline: 2px solid #f4d48d;
    outline-offset: 1px;
  }
  .landscape-focus {
    grid-area: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }
  .landscape-focus .mobile-latest,
  .landscape-focus .landscape-latest {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    min-height: 44px;
    padding: 3px 7px;
    border: 1px solid #ebcb7b66;
    border-radius: 6px;
    background: #133e2eed;
    color: #f5e4bc;
    text-align: left;
  }
  .landscape-focus .tile {
    --tile-w: 28px;
    --tile-h: 38px;
    width: 28px;
    height: 38px;
    flex: none;
  }
  .landscape-focus .mobile-latest > span:not(.tile),
  .landscape-latest > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
  }
  .landscape-focus strong {
    font-size: 14px;
    line-height: 1.15;
  }
  .landscape-focus small {
    font-size: 12px;
    line-height: 1.15;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
  }
  .landscape-focus .mobile-hu {
    font-size: 28px;
    color: #f6d68b;
  }
  .landscape-wall {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 3px 6px;
    background: none;
    border: 0;
    color: #bad0ba;
    font-size: 12px;
  }
  .landscape-wall span {
    font-size: 22px;
    color: #d9c18b;
  }
  .landscape-wall strong {
    color: #e7d7aa;
    font-size: 20px;
  }
  .player-dock {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    max-height: 64%;
    min-width: 0;
    overflow: auto;
    background: #12382a;
    border-top: 1px solid #dcca9566;
    border-left: 0;
    padding: 0 4px max(2px, env(safe-area-inset-bottom));
    z-index: 3;
  }
  .player-dock > .mobile-latest,
  .player-dock > .mobile-hand-tools {
    display: none;
  }
  .hand-zone {
    position: static;
    inset: auto;
    min-width: 0;
    margin: 0;
    padding: 2px 3px 0;
  }
  .hand-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 26px;
    margin: 0 0 7px;
  }
  .hand-topline .you-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    max-width: 35%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .hand-topline .seat-markers {
    gap: 2px;
  }
  .player-dock .wind-token {
    display: grid;
    place-items: center;
    width: 22px;
    height: 24px;
    min-width: 22px;
    padding: 0;
    font-size: 21px;
    line-height: 1;
    border-radius: 3px;
    background: #fff7de;
    color: #214531;
    border: 1px solid #c5b890;
  }
  .player-dock .you-label .dealer-marker {
    position: static;
    display: grid;
    color: #b52331;
  }
  .own-tiles > .rack-dealer {
    display: none;
  }
  .hand-topline .rack-front {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    max-width: none;
    min-width: 0;
  }
  .hand-topline .bonus-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0;
    overflow: auto;
    max-width: 100%;
    min-width: 0;
    padding: 1px 0 4px;
  }
  .hand-topline .bonus-piece {
    min-height: 0;
    padding: 0;
    margin-bottom: 0;
  }
  .hand-topline .bonus-value {
    font-size: 10px;
    bottom: -3px;
  }
  .hand-topline .bonus-row .tile {
    --tile-w: 18px;
    --tile-h: 24px;
  }
  .hand-topline .tai-anchor {
    position: static;
    width: auto;
    height: auto;
    flex: 0 0 auto;
  }
  .hand-topline .tai-badge {
    position: static;
    transform: none;
    min-height: 24px;
    width: auto;
    height: auto;
    padding: 3px 5px;
    gap: 0;
  }
  .hand-topline .tai-count,
  .hand-topline .tai-count b {
    font-size: 14px;
  }
  .hand-topline .tai-meter,
  .hand-topline .tai-caption,
  .hand-topline .tai-count > span {
    display: none;
  }
  .own-tiles {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 54px;
    padding: 0 3px 5px;
    max-width: 100%;
    --claim-rise: -4px;
    --claim-focus-rise: -6px;
  }
  .own-tiles > .tile {
    --tile-w: clamp(27px, 4.8vw, 43px);
    --tile-h: calc(var(--tile-w) * 1.36);
    width: var(--tile-w);
    height: var(--tile-h);
    min-width: 0;
    flex: 0 1 var(--tile-w);
    margin: 0;
    border-radius: 4px;
    padding: 0;
  }
  .own-tiles > .tile.drawn {
    margin-left: 6px;
  }
  .own-tiles > .tile.group-start:not(.drawn) {
    margin-left: 3px;
  }
  .own-tiles > .tile.selected {
    transform: translateY(-5px);
  }
  .own-melds {
    display: flex;
    flex: 0 1 auto;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 0 5px;
    padding: 0;
    overflow: auto;
  }
  .own-melds .tile {
    --tile-w: clamp(22px, 3.6vw, 32px);
    --tile-h: calc(var(--tile-w) * 1.36);
  }
  .own-tiles > .winning-concealed {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: flex-start;
    max-width: 100%;
  }
  .own-tiles > .winning-concealed .tile {
    --tile-w: 32px;
    --tile-h: 44px;
  }
  .table-turn-bar {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 44px;
    max-height: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 4px 2px;
    gap: 6px;
    background: none;
    border: 0;
  }
  .table-turn-bar .turn-status {
    flex: 1;
    min-width: 0;
    text-align: left;
    max-width: 40%;
  }
  .table-turn-bar .turn-status strong {
    font-size: 14px;
    line-height: 1.2;
  }
  .table-turn-bar .turn-status p {
    display: none;
  }
  .table-turn-bar .move-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    gap: 5px;
  }
  .table-turn-bar .primary,
  .table-turn-bar .call-button,
  .table-turn-bar .ghost {
    min-height: 44px;
    font-size: 14px;
    padding: 7px 12px;
  }
  .table-turn-bar [data-command='discard'] {
    min-width: 100px;
    flex: none;
  }
  .board > .privacy,
  .board > .pause-tag {
    position: absolute;
    inset: 0;
    z-index: 10;
  }
  dialog {
    max-height: calc(100dvh - 20px);
  }

  /* The network table uses the same public layout and a single-row rack. */
  body.playing {
    height: 100dvh;
    overflow: hidden;
  }
  .playing > header,
  .playing > footer {
    display: none;
  }
  .playing main {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
  }
  .playing #game {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .playing .room-head {
    flex: 0 0 auto;
    height: 44px;
    min-height: 44px;
    margin: 0;
    gap: 8px;
    padding: 0 3px;
    font-size: 14px;
    flex-wrap: nowrap;
  }
  .playing .room-head strong {
    font-size: 16px;
  }
  .playing .room-head button {
    min-height: 40px;
    padding: 5px 9px;
    font-size: 14px;
  }
  .playing #notice {
    padding: 5px 10px;
    font-size: 14px;
    margin: 0;
    flex-shrink: 0;
    max-height: 15vh;
    overflow: auto;
  }
  .playing .game-stage {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    border: 3px solid #473e2e;
    border-radius: 12px;
    overflow: hidden;
  }
  .playing .table-summary,
  .playing .mobile-tabs,
  .playing .public-content {
    display: none;
  }
  .playing .own {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    flex: 0 0 auto;
    min-height: 0;
    max-height: 64%;
    overflow: auto;
    margin: 0;
    padding: 3px 7px max(2px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #dcca9566;
    border-radius: 0;
    box-shadow: none;
    gap: 1px 10px;
  }
  .playing .hand-head {
    grid-area: 1/1;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    min-height: 25px;
  }
  .playing .hand-head > strong {
    gap: 4px;
  }
  .playing .hand-head .badge {
    width: 22px;
    height: 24px;
    font-size: 21px;
  }
  .playing .hand-head .tai {
    font-size: 14px;
  }
  .playing .hand {
    grid-area: 2/1/3/3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: none;
    margin: 6px 0 3px;
    min-height: 50px;
    padding: 0 3px;
  }
  .playing .hand .tile {
    flex: 0 1 42px;
    width: clamp(27px, 4.8vw, 42px);
    height: clamp(39px, 6.5vw, 57px);
    max-height: none;
    min-width: 0;
    padding: 0;
    border-radius: 4px;
  }
  .playing .hand .drawn {
    margin-left: 6px;
  }
  .playing .turn-strip {
    grid-area: 3/1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 44px;
  }
  .playing .turn-strip > .latest-offer,
  .playing .turn-strip > .result-jump,
  .playing .turn-strip > strong {
    display: none;
  }
  .playing .turn-copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-align: left;
    max-width: 100%;
  }
  .playing .actions {
    grid-area: 3/2;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
  }
  .playing .actions > button {
    padding: 6px 11px;
    min-height: 44px;
    font-size: 14px;
  }
  .playing .actions .discard-button {
    min-width: 110px;
  }
  .playing .actions .tile {
    width: 22px;
    height: 30px;
  }
  .playing .own-public {
    display: flex;
    grid-area: 1/2;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    max-width: 45vw;
    overflow: auto;
  }
  .playing .own-public .tile {
    width: 20px;
    height: 27px;
  }
  .playing .own-public .tiles,
  .playing .own-public .melds {
    gap: 2px;
    flex-wrap: nowrap;
    margin: 0;
  }
  .playing .own-public:not(:has(.tile)),
  .playing .hand-help {
    display: none;
  }
  .playing .chow-choices,
  .playing .ready-status {
    grid-column: 1/-1;
    margin: 3px 0;
    gap: 5px;
  }
  .playing .chow-choices button {
    min-height: 44px;
    padding: 5px;
  }
  .playing .ready-status {
    font-size: 12px;
  }
}

/* Portrait preserves one complete rack. Public rivers keep their own scroll. */
@media (max-width: 850px) and (orientation: portrait) {
  .topbar {
    gap: 5px;
    padding: 0 2px;
  }
  .brand h1 {
    font-size: 14px;
  }
  .landscape-controls {
    gap: 3px;
  }
  .landscape-controls button,
  .mobile-header-actions button {
    padding: 5px 6px;
    font-size: 14px;
  }
  .landscape-felt {
    min-height: 330px;
    --rail: clamp(70px, 18vw, 80px);
  }
  .landscape-rack {
    padding: 2px 4px;
  }
  .landscape-backs {
    height: 8px;
    margin: 2px auto;
  }
  .landscape-declared {
    padding: 0;
  }
  .landscape-seat-top {
    left: calc(var(--rail) + 4px);
    right: calc(var(--rail) + 4px);
    height: 80px;
  }
  .landscape-seat-top .landscape-name {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 4px;
  }
  .landscape-seat-top .landscape-name > strong {
    flex: 0 1 auto;
  }
  .landscape-seat-top .landscape-name > .tai,
  .landscape-seat-top .landscape-name > .tai-badge {
    flex-basis: auto;
  }
  .landscape-centre {
    grid-template-columns: minmax(25px, 0.7fr) minmax(0, 3.6fr) minmax(25px, 0.7fr);
    grid-template-rows: 82px minmax(36px, 1fr) minmax(88px, auto) minmax(36px, 1fr);
    column-gap: 4px;
  }
  .landscape-focus {
    flex-direction: column;
    gap: 2px;
  }
  .landscape-focus .mobile-latest,
  .landscape-focus .landscape-latest {
    width: 100%;
    flex: none;
    padding: 5px 3px;
    gap: 4px;
  }
  .landscape-focus small {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  .landscape-focus strong {
    font-size: 14px;
  }
  .landscape-wall {
    min-height: 28px;
    padding: 2px 4px;
  }
  .landscape-wall span,
  .landscape-wall strong {
    font-size: 18px;
  }
  .landscape-river-top .landscape-pile,
  .landscape-river-bottom .landscape-pile {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 3px 1px;
    width: 100%;
    min-width: 0;
  }
  .landscape-river-top .landscape-discard,
  .landscape-river-bottom .landscape-discard {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
  }
  .landscape-river-top .landscape-discard .tile,
  .landscape-river-bottom .landscape-discard .tile {
    width: 100%;
    height: 100%;
  }
  .player-dock {
    max-height: 48%;
    padding: 3px 3px max(4px, env(safe-area-inset-bottom));
  }
  .hand-zone {
    padding: 0 3px;
  }
  .hand-topline {
    margin-bottom: 2px;
    min-height: 30px;
  }
  .own-tiles {
    display: grid;
    grid-template-columns: repeat(var(--hand-count, 14), minmax(0, 43px));
    justify-content: center;
    gap: 6px 2px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 6px 7px 0;
    align-items: center;
  }
  .own-tiles > .tile {
    grid-row: 2;
    --tile-w: 100%;
    --tile-h: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    min-height: 0;
  }
  .own-tiles > .back {
    grid-row: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    min-width: 0;
  }
  .own-tiles > .tile.group-start:not(.drawn) {
    margin-left: 0;
  }
  .own-tiles > .tile.drawn {
    margin: 0;
    transform: translate(4px, -5px);
  }
  .own-tiles > .tile.selected,
  .own-tiles > .tile.selected:hover {
    transform: translateY(-8px);
  }
  .own-tiles > .tile.drawn.selected,
  .own-tiles > .tile.drawn.selected:hover {
    transform: translate(4px, -8px);
  }
  .own-melds {
    grid-column: 1/-1;
    grid-row: 1;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0 0 3px;
  }
  .own-melds .tile {
    --tile-w: 23px;
    --tile-h: 31px;
  }
  .own-tiles > .winning-concealed {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    gap: 2px;
    overflow: visible;
    width: 100%;
  }
  .own-tiles > .winning-concealed .tile {
    --tile-w: 100%;
    --tile-h: auto;
    aspect-ratio: 3/4;
    min-width: 0;
    flex: 1;
  }
  .own-tiles > .winning-concealed .winning-tile {
    display: flex;
    flex: 1;
    min-width: 0;
    margin-left: 4px;
  }
  .table-turn-bar {
    align-items: center;
    padding: 2px;
    gap: 5px;
  }
  .table-turn-bar .turn-status {
    max-width: none;
    flex: 1;
  }
  .table-turn-bar .move-actions {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
  }
  .table-turn-bar [data-command='discard'] {
    min-width: 82px;
    max-width: none;
    flex: none;
    padding: 7px 10px;
  }
  .playing .room-head {
    gap: 5px;
    font-size: 12px;
    padding: 0 2px;
  }
  .playing .room-head strong {
    font-size: 14px;
    letter-spacing: 0;
  }
  .playing .room-head button {
    padding: 5px 7px;
  }
  .playing .own {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 6px;
    max-height: 48%;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
  }
  .playing .hand-head {
    grid-area: 1/1/2/3;
    min-height: 28px;
    font-size: 14px;
  }
  .playing .own-public {
    grid-area: 2/1/3/3;
    max-width: 100%;
    justify-content: flex-end;
  }
  .playing .hand {
    grid-area: 3/1/4/3;
    display: grid;
    grid-template-columns: repeat(var(--hand-count, 14), minmax(0, 42px));
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    margin: 0;
    padding: 12px 6px 7px 0;
    width: 100%;
  }
  .playing .hand .tile {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    min-height: 0;
    border-radius: 3px;
    max-height: none;
    padding: 0;
  }
  .playing .hand .drawn {
    margin: 0;
    transform: translate(4px, -5px);
  }
  .playing .hand .selected,
  .playing .hand .tile.selected:hover {
    transform: translateY(-8px);
  }
  .playing .hand .drawn.selected,
  .playing .hand .tile.drawn.selected:hover {
    transform: translate(4px, -8px);
  }
  .playing .turn-strip {
    grid-area: 4/1;
    min-width: 0;
  }
  .playing .turn-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 14px;
  }
  .playing .actions {
    grid-area: 4/2;
    flex-wrap: wrap;
    max-width: 210px;
    width: auto;
  }
  .playing .actions .discard-button {
    min-width: 0;
    width: auto;
    flex: none;
    padding: 6px 10px;
  }
  .playing .actions .tile {
    width: 23px;
    height: 31px;
  }
  .playing .chow-choices {
    grid-row: 5;
  }
  .playing .ready-status {
    grid-row: 6;
  }
}

/* Stable hit areas include the space below a raised tile; double-tap never zooms. */
.own-tiles > button.tile,
.hand > button.tile {
  position: relative;
  touch-action: manipulation;
}
.own-tiles > button.tile::after,
.hand > button.tile::after {
  content: '';
  position: absolute;
  inset: 0 0 -10px;
  pointer-events: auto;
}

@media (max-width: 430px) and (orientation: portrait) {
  .brand-region {
    display: none;
  }
  .topbar {
    gap: 3px;
  }
  .landscape-controls,
  .mobile-header-actions {
    gap: 3px;
  }
  .landscape-controls button,
  .mobile-header-actions button {
    padding: 5px 6px;
  }
}

/* Wind and dealer stay paired beside each name, at the same quiet size. */
.seat .seat-markers > .avatar,
.you-label .seat-markers > .wind-token,
.landscape-name .seat-markers > .avatar,
.seat-title .seat-markers > .badge,
.hand-head .seat-markers > .badge,
.landscape-name .seat-markers > .badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 24px;
  min-width: 22px;
  min-height: 24px;
  padding: 0;
  margin: 0;
  border-width: 1px;
  border-radius: 3px;
  font-size: 19px;
  line-height: 1;
  box-shadow: 0 1px 0 #aa9068;
  transform: none;
}
.seat:has(.dealer-marker) .player-badge {
  padding-inline: 0;
}
.own-tiles > .rack-dealer {
  display: none;
}

@media (min-width: 851px) {
  .board {
    --centre-gap: 128px;
  }
  .discard-stage .compass {
    max-width: 128px;
    width: 100%;
    pointer-events: auto;
    gap: 7px;
  }
  .desktop-table-focus {
    width: 100%;
  }
  .desktop-table-focus .mobile-latest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 9px 6px;
    border: 1px solid #e8cb8166;
    border-radius: 9px;
    background: #103e2deb;
    text-align: center;
    line-height: 1.25;
  }
  .desktop-table-focus .tile.small {
    --tile-w: 46px;
    --tile-h: 63px;
    flex: none;
  }
  .desktop-table-focus .mobile-latest > span:not(.tile) {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .desktop-table-focus strong {
    font-size: 14px;
  }
  .desktop-table-focus small {
    font-size: 12px;
    color: #bfd1ba;
  }
  .desktop-table-focus .mobile-hu {
    font-size: 30px;
    color: #f2d48d;
  }
  .desktop-table-focus + .wall-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .desktop-table-focus + .wall-count strong {
    font-size: 20px;
  }
  .desktop-table-focus + .wall-count small {
    font-size: 12px;
    letter-spacing: 0;
  }
  .center .desktop-table-focus > .landscape-latest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 15px;
    border: 1px solid #e8cb8177;
    border-radius: 12px;
    background: #123e30;
  }
  .center .desktop-table-focus .tile {
    width: 58px;
    flex: none;
  }
  .center .desktop-table-focus strong,
  .center .desktop-table-focus small {
    display: block;
    line-height: 1.4;
  }
  .center .desktop-table-focus strong {
    font-size: 16px;
  }
}

/* With browser chrome open, keep the action area usable and scroll rivers. */
@media (min-width: 560px) and (max-height: 380px) and (orientation: landscape) {
  .landscape-felt {
    min-height: 158px;
  }
  .landscape-seat-top {
    left: calc(var(--rail) + 5px);
    right: calc(var(--rail) + 5px);
    height: 48px;
  }
  .landscape-seat-top .landscape-rack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 7px;
  }
  .landscape-seat-top .landscape-name {
    grid-column: 1;
  }
  .landscape-seat-top .landscape-backs {
    grid-column: 1;
    width: 100%;
    height: 9px;
  }
  .landscape-seat-top .landscape-declared,
  .landscape-seat-top .landscape-winning {
    grid-area: 1/2/3/3;
    align-self: center;
  }
  .landscape-centre {
    grid-template-rows: 48px minmax(27px, 1fr) minmax(44px, auto) minmax(27px, 1fr);
    grid-template-columns: minmax(28px, 1fr) minmax(150px, 3fr) minmax(28px, 1fr);
    column-gap: 4px;
  }
  .landscape-wall {
    font-size: 0;
    padding: 3px;
  }
  .landscape-wall span {
    font-size: 20px;
  }
  .landscape-focus small {
    max-width: 135px;
  }
  .own-tiles > .tile {
    --tile-w: 32px;
    --tile-h: 44px;
  }
  .own-tiles {
    min-height: 47px;
  }
  .playing .hand .tile {
    flex-basis: 32px;
    width: 32px;
    height: 44px;
  }
  .playing .hand {
    min-height: 44px;
  }
}

/* Stake tables are shared by setup, the scorebook and online rooms. */
.stake-preview {
  overflow-x: auto;
  max-width: 100%;
  margin: 12px 0;
}
.stake-preview summary {
  padding: 8px 0;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}
.stake-note {
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0;
  color: #c5d4bf;
}
.stake-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.stake-table th,
.stake-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #acc4ab33;
  white-space: nowrap;
}
.stake-table thead th {
  white-space: normal;
  min-width: 90px;
  color: #dccc9d;
}
.stake-table th:first-child {
  min-width: 34px;
}
.stake-table td {
  font-variant-numeric: tabular-nums;
}
#host-stakes select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ffffff45;
  border-radius: 8px;
  background: #123e30;
  color: #f4ecda;
  font: inherit;
}
.stake-button {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .playing .room-head > .muted {
    display: none;
  }
  .playing .room-head .stake-button {
    font-size: 12px;
    padding: 4px 6px;
  }
  .landscape-controls button {
    padding: 5px 7px;
  }
  .landscape-focus .mobile-latest {
    max-width: 100%;
  }
}

#play-menu > button {
  display: block;
  width: 100%;
  margin: 10px 0;
  min-height: 48px;
}
#quick-stake {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ffffff45;
  border-radius: 8px;
  background: #123e30;
  color: #f4ecda;
  font: inherit;
}

.solo-home,
.session-summary {
  width: min(540px, calc(100% - 24px));
  margin: 24px auto;
  padding: 24px;
  background: #123e30;
  border: 1px solid #cdb98755;
  border-radius: 16px;
  overflow: auto;
}
.solo-home h1,
.session-summary h1 {
  font-size: 28px;
  margin: 14px 0;
}
.solo-home p,
.session-summary p {
  font-size: 16px;
  line-height: 1.5;
  color: #c5d4bd;
  margin: 14px 0;
}
.solo-home > button,
.session-summary > button {
  display: block;
  width: 100%;
  margin: 10px 0;
  min-height: 44px;
}
.solo-home .score-row,
.session-summary .score-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #c5d4bd22;
}
.home-balances {
  margin: 18px 0;
}
.playing .session-summary {
  min-height: 0;
  flex: 1;
}
.table-inspection .mobile-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}