@media (min-width: 1121px) {
  .workspace { height: calc(100dvh - 72px); min-height: 0; }
  .sidebar, .table-area, .lobby-panel { min-height: 0; overflow-y: auto; }
}

.lobby-panel { min-width: 0; padding: 25px 28px; background: #101d1c; }
.lobby-panel[hidden], .table-area[hidden] { display: none; }
.lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #2d4942; }
.lobby-heading h1 { margin: 0; font-size: 23px; }
.lobby-heading p { margin: 5px 0 0; color: #9cb3aa; font-size: 12px; }
.lobby-heading-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.lobby-donate-link { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.lobby-total { color: #e7bd73; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lobby-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: stretch; padding-top: 14px; }
.lobby-room { min-width: 0; padding: 14px; border: 1px solid #335047; border-radius: 6px; background: #172a26; }
.lobby-room-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; }
.lobby-room-head strong { color: #f0c881; font-size: 16px; }
.lobby-status { color: #8cc9a7; font-size: 11px; }
.lobby-status.playing { color: #e7bd73; }
.lobby-room-count { grid-column: 1 / -1; color: #91aaa0; font-size: 11px; }
.lobby-seat-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 66px); align-items: center; gap: 7px; width: min(100%, 480px); margin: 14px auto 0; }
.lobby-seat { min-width: 0; width: 100%; height: 66px; display: grid; grid-template-rows: 13px minmax(0, 1fr) 12px; justify-items: center; align-items: center; gap: 2px; border: 1px solid #466256; border-radius: 5px; background: #1d322d; color: #e8f0eb; padding: 5px 8px; text-align: center; }
.lobby-seat b { color: #cfa968; font-size: 10px; font-weight: 700; line-height: 1; }
.lobby-seat strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; line-height: 1.1; }
.lobby-seat small { color: #95b6a4; font-size: 10px; line-height: 1; white-space: nowrap; }
.lobby-seat.occupied { border-color: #60826c; }
.lobby-seat.occupied small::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #79c59c; margin-right: 5px; vertical-align: 1px; }
.lobby-seat.vacant { border-color: #9b7c49; border-style: dashed; background: #25382f; color: #f0d49d; }
.lobby-seat.vacant strong { font-size: 13px; }
.lobby-seat.vacant:hover, .lobby-seat.vacant:focus-visible { border-style: solid; border-color: #f0c881; background: #36543b; color: #fff4dc; outline: 2px solid #e7bd7366; outline-offset: 2px; }
.lobby-seat.vacant small { color: #d8c39b; }
.lobby-seat.offline { border-color: #41554c; background: #172823; }
.lobby-seat.offline strong, .lobby-seat.offline small { color: #849b8d; }
.lobby-seat.offline small::before { background: #7e9387; }
.lobby-seat.unavailable { border-style: dashed; border-color: #354a41; background: #142420; color: #6f8a7d; }
.lobby-seat.unavailable small { color: #6f8a7d; }
.lobby-seat.top { grid-area: 1 / 2; }
.lobby-seat.left { grid-area: 2 / 1; }
.lobby-seat.right { grid-area: 2 / 3; }
.lobby-seat.bottom { grid-area: 3 / 2; }
.lobby-map-center { grid-area: 2 / 2; width: 100%; height: 57px; justify-self: center; display: grid; place-content: center; text-align: center; border: 2px solid #558265; border-radius: 50%; background: #1d523d; color: #e7bd73; font-size: 16px; box-shadow: inset 0 0 0 2px #183e32; }
.lobby-map-center small { display: block; color: #b9d5bf; font-size: 10px; }
.seat-dialog { width: min(550px, calc(100vw - 26px)); border: 1px solid #527266; border-radius: 7px; background: #172b27; color: #eef2e9; padding: 18px; }
.seat-dialog::backdrop { background: #061410ca; }
.seat-dialog .dialog-head h2 { font-size: 18px; margin: 0; }
.seat-dialog-status { color: #9cb3aa; font-size: 12px; margin: 10px 0; }
.lobby-empty { padding: 36px 0; color: #9cb3aa; font-size: 13px; }
.workspace.lobby-mode .left-sidebar > .divider,
.workspace.lobby-mode .left-sidebar > .seats-heading,
.workspace.lobby-mode .left-sidebar > .seat-list,
.workspace.lobby-mode .left-sidebar > .stats,
.workspace.lobby-mode .left-sidebar > #statsHeading,
.workspace.lobby-mode .right-sidebar > .divider,
.workspace.lobby-mode .right-sidebar > #historyHeading,
.workspace.lobby-mode .right-sidebar > #history,
.workspace.lobby-mode .right-sidebar > .audit,
.workspace.lobby-mode .right-sidebar > #auditHeading,
.workspace.lobby-mode .right-sidebar > #previousAuditHeading { display: none; }
.workspace.lobby-mode .right-sidebar { display: block; }

.room-score-change { border-top: 1px solid #2b423b; margin-top: 11px; padding-top: 13px; color: #9db6aa; font-size: 12px; }
.room-score-change h2 { margin: 0 0 6px; color: #e2e9e4; font-size: 13px; }
.score-change-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 30px; }
.score-change-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-score-change strong { color: #e7bd73; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-score-change strong.positive { color: #8fd3a5; }
.room-score-change strong.negative { color: #ed9a91; }
.room-score-change[hidden] { display: none; }
.nickname-form { margin-top: 18px; }
.nickname-actions { display: flex; justify-content: flex-end; gap: 8px; }
.nickname-actions .primary-button { margin-top: 0; }
#accountNickname:not(:empty)::after { content: " · "; }
@media (max-width: 700px) {
  .lobby-heading-actions { gap: 7px; }
  .lobby-donate-link { padding: 8px 9px; }
  #accountNickname { display: none; }
  .top-actions { gap: 5px; }
}

#statsDivider[hidden], #statsHeading[hidden], #stats[hidden],
#auditDivider[hidden], #auditHeading[hidden], #currentAudit[hidden],
#previousAuditDivider[hidden], #previousAuditHeading[hidden], #previousAudit[hidden] { display: none; }

.table-area { padding: 16px 22px 20px; }
.table-header { min-height: 0; margin-bottom: 8px; }
.table-header h1 { font-size: 22px; margin: 3px 0; }
.table-header .eyebrow { display: none; }
.table-room-code { margin-top: 6px; }
.workspace.in-round .table-room-code { display: none; }
.felt-wrap { padding: 0; }
.felt { min-height: 0; height: clamp(225px, 31dvh, 285px); }
.table-center.has-trick .table-symbol { display: none; }
.trick-area.has-plays { display: grid; grid-template-columns: repeat(var(--trick-play-count), minmax(0, 1fr)); align-items: start; gap: 7px; min-height: 0; }
.trick-play { min-width: 0; display: grid; justify-items: center; gap: 4px; }
.trick-play-player { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; min-width: 0; color: #eef3e9; font-size: 11px; }
.trick-play-player strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trick-play-seat { flex: none; color: #e7bd73; font-size: 9px; }
.trick-play-cards { display: flex; align-items: center; justify-content: center; max-width: 100%; min-width: 0; overflow-x: auto; padding: 2px 0 4px; }
.trick-play-cards .played-card.poker-face { width: 43px; height: 62px; }
.trick-play-cards .played-card + .played-card { margin-left: -23px; }
.trick-play-summary { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 5px; color: #ecf4e9; font-size: 10px; line-height: 1.2; }
.trick-play-summary .red { color: #f1a19a; }
@media (min-width: 701px) {
  .table-center.has-trick { inset: 0; width: 100%; height: 100%; transform: none; pointer-events: none; }
  .table-center.has-trick .trick-area { position: absolute; inset: 0; display: block; }
  .table-center.has-trick .trick-play { position: absolute; width: 104px; }
  .table-center.has-trick .trick-play.position-top { top: 12px; left: calc(50% - 174px); }
  .table-center.has-trick .trick-play.position-right { top: 2px; right: 18px; }
  .table-center.has-trick .trick-play.position-left { top: 52%; left: 138px; }
  .table-center.has-trick .trick-play.position-bottom { right: calc(50% - 188px); bottom: 2px; }
  .table-center.has-trick .trick-info { position: absolute; top: 50%; left: 50%; width: min(38%, 280px); transform: translate(-50%, -50%); }
  .trick-play-cards .played-card.poker-face { width: 36px; height: 50px; }
  .trick-play-cards .played-card + .played-card { margin-left: -19px; }
}
.action-panel { min-height: 0; padding: 10px 0; gap: 8px; }
.action-title { min-width: 0; margin: 0; }
.choice-button { padding: 8px 11px; }
.discard-panel { padding: 8px 0; }
.discard-cards { gap: 4px; }
.discard-card { width: 35px; height: 46px; font-size: 12px; }
.discard-card small { font-size: 16px; }
.hand-section { padding-top: 10px; }
.hand-heading { margin-bottom: 8px; }
.hand-heading .eyebrow { display: none; }
.hand-heading h2 { margin: 0; font-size: 15px; }
.hand { min-height: 0; gap: 5px; }
.card { width: 52px; height: 72px; }
.card .suit { font-size: 21px; }

.table-area.friend-phase .felt-wrap { display: none; }
.table-area.friend-phase .table-header { margin-bottom: 4px; }
.table-area.friend-phase .friend-section { margin: 0; padding: 10px 0 8px; border-top: 0; border-bottom: 1px solid #2d4942; }
.friend-heading { margin-bottom: 8px; }
.friend-heading .eyebrow { display: none; }
.friend-heading h2 { margin: 0; font-size: 15px; }
.friend-grid { gap: 10px; }
.friend-group { gap: 6px; }
.friend-card-grid { gap: 4px; }
.friend-keys { max-width: 260px; }
.friend-ranks { grid-template-columns: repeat(13, minmax(0, 1fr)); max-width: 700px; }
.friend-card { height: 47px; }
.friend-card .friend-symbol { font-size: 18px; }
.friend-suits { gap: 5px; }
.friend-suit { width: 33px; height: 31px; font-size: 19px; }

@media (min-width: 1300px) {
  .friend-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 700px) {
  .right-sidebar #previousAuditDivider:not([hidden]) { display: block; }
  .right-sidebar #previousAuditHeading:not([hidden]) { display: flex; }
  .right-sidebar #previousAudit:not([hidden]) { display: grid; }
  .lobby-panel { padding: 16px 13px; }
  .lobby-list { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 12px; }
  .lobby-room { padding: 12px; }
  .lobby-room-head strong { font-size: 14px; }
  .lobby-seat-map { gap: 5px; grid-template-rows: repeat(3, 64px); }
  .lobby-seat { height: 64px; padding: 5px 3px; }
  .lobby-seat strong { font-size: 11px; }
  .lobby-seat.vacant strong { font-size: 12px; }
  .lobby-map-center { height: 52px; }
  .table-area { padding: 10px 12px 16px; }
  .table-header { margin-bottom: 7px; }
  .table-header h1 { font-size: 19px; }
  .felt { height: 220px; min-height: 0; }
  .table-player { min-height: 0; }
  .table-center { width: 48%; }
  .trick-area { min-height: 70px; }
  .trick-area.has-plays { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .trick-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; justify-items: stretch; gap: 4px; }
  .trick-play-player { justify-content: flex-start; font-size: 10px; }
  .trick-play-cards { display: none; }
  .trick-play-summary { justify-content: flex-end; font-size: 11px; }
  .action-panel { padding: 8px 0; }
  .action-title { font-size: 12px; }
  .choice-button { padding: 7px 9px; }
  .discard-card { width: 33px; height: 43px; }
  .hand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .card { width: 100%; height: 64px; padding: 4px; }
  .card .suit { font-size: 18px; }
  .card .card-bottom { font-size: 9px; }
  .friend-keys { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .friend-ranks { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .friend-card { height: 42px; }
  .friend-card .friend-symbol { font-size: 17px; }
  .workspace.in-round .left-sidebar { padding: 8px 12px; }
  .workspace.in-round .left-sidebar > .section-heading,
  .workspace.in-round .left-sidebar > .divider,
  .workspace.in-round .left-sidebar > .seat-list,
  .workspace.in-round .left-sidebar > .stats { display: none; }
  .workspace.in-round .room-panel { display: flex; align-items: center; gap: 8px; }
  .workspace.in-round .room-code-label,
  .workspace.in-round .room-caption,
  .workspace.in-round .ready-counter,
  .workspace.in-round .room-actions [data-action="copy"] { display: none; }
  .workspace.in-round .room-code { flex: 1; width: auto; font-size: 18px; }
  .workspace.in-round .room-actions { margin: 0; flex-wrap: nowrap; }
  .workspace.in-round .room-actions button { padding: 7px 9px; }
  .table-area .discard-panel:not([hidden]) { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
  .table-area .discard-heading { display: grid; gap: 2px; width: 70px; flex: none; margin: 0; line-height: 1.2; }
  .table-area .discard-heading span { font-size: 9px; }
  .table-area .discard-cards { flex-wrap: nowrap; gap: 3px; min-width: 0; }
  .table-area .discard-card { width: 30px; height: 39px; }
  .table-area.friend-phase .friend-group:last-child { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "label suits" "ranks ranks"; align-items: center; }
  .table-area.friend-phase .friend-group:last-child .friend-group-title { grid-area: label; }
  .table-area.friend-phase .friend-suits { grid-area: suits; }
  .table-area.friend-phase .friend-ranks { grid-area: ranks; }
  .table-area.friend-phase .friend-card { height: 38px; }
  .table-area.friend-phase .action-title { display: none; }
  .table-area.friend-phase .card { height: 54px; }
  .table-area.friend-phase .card-bottom { display: none; }
}