.play-page #game {
  max-width: 980px;
  margin: 0 auto;
  grid-template-rows: minmax(0, 1fr) 34px;
  gap: 3px;
}
.play-page #game .felt-table {
  --north: 66px;
  --center: 108px;
  --south: 64px;
  --hand-weight: 1.7fr;
  --hand-height: 86px;
  --hand-row: minmax(0, var(--hand-height));
  --upper-min: 104px;
  --lower-min: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--north) minmax(var(--upper-min), 1fr) var(--center) minmax(
      var(--lower-min),
      0.8fr
    )
    20px var(--hand-row) var(--south);
  gap: 4px;
  padding: 6px 12px;
}
.play-page #game[data-hand-density="dense"] .felt-table {
  --north: 54px;
  --center: 90px;
  --south: 56px;
  --hand-weight: 3fr;
  --hand-row: minmax(54px, 3fr);
  --upper-min: 80px;
  --lower-min: 52px;
}
.play-page #game .opponents {
  grid-row: 1;
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: 100%;
}
.play-page #game .turn-note {
  grid-column: 1;
  text-align: left;
  align-self: center;
  max-width: 230px;
}
.play-page #game #partner-seat {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  height: 100%;
}
.play-page #game #partner-seat .avatar {
  width: 42px;
  height: 45px;
  flex-shrink: 1;
  min-height: 0;
}
.play-page #game #partner-seat .seat-caption {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.play-page #game #partner-seat .seat-cards {
  display: none;
}
.play-page #game .team-area {
  grid-column: 1;
  width: min(100% - 80px, 690px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  display: grid;
}
.play-page #game .team-area-yours {
  grid-row: 2;
  grid-template-rows: minmax(0, 1fr) 28px;
  gap: 2px;
}
.play-page #game .team-area-theirs {
  grid-row: 4;
  grid-template-rows: minmax(0, 1fr);
}
.play-page #game .meld-region {
  grid-template-rows: 18px minmax(0, 1fr);
  padding: 3px 7px;
  background: #123d2857;
  border: 1px solid #90ae881c;
  border-radius: 9px;
}
.play-page #game .meld-region h2 {
  text-align: center;
  font: 600 12px/16px system-ui;
}
.play-page #game .melds,
.play-page #game #plan-groups {
  justify-content: center;
  gap: 3px;
  padding: 1px;
}
.play-page #game .meld-chip,
.play-page #game .prepared-meld {
  padding: 2px;
  min-height: 32px;
  gap: 1px;
}
.play-page #game .mini-card {
  height: 30px;
  font-size: 14px;
}
.play-page #game .mini-card b {
  font-size: 14px;
}
.play-page #game .meld-detail {
  font-size: 9px;
}
.play-page #game .plan-actions {
  justify-content: center;
  grid-column: 1;
  gap: 5px;
  overflow: hidden;
}
.play-page #game .plan-actions button,
.play-page #game .plan-actions select {
  height: 26px;
  min-height: 26px;
  padding: 2px 5px;
  font-size: 11px;
}
.play-page #game .plan-actions select {
  max-width: 125px;
  flex: 0 1 125px;
}
.play-page #game #plan-status {
  flex: 0 1 auto;
  font-size: 10px;
}
.play-page #game .plan-actions:has(#play-plan:not([hidden])) #plan-status {
  display: none;
}
.play-page #game .stock-area {
  grid-row: 3;
  grid-column: 1;
  grid-template-columns: 80px minmax(0, 1fr) 80px;
  height: 100%;
  gap: 8px;
}
.play-page #game .piles {
  gap: 30px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.play-page #game .stock-button,
.play-page #game .discard-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 16px 12px;
  height: 100%;
  max-height: 108px;
  width: 100px;
  flex: 0 0 100px;
  gap: 2px;
  padding: 0;
  justify-items: center;
}
.play-page #game .stock-button > span:not(.card-back),
.play-page #game .discard-area > span {
  display: block;
  font-size: 12px;
  line-height: 16px;
}
.play-page #game .stock-button > small,
.play-page #game .discard-area > small {
  display: block;
  font-size: 10px;
  line-height: 11px;
}
.play-page #game .stock-area .seat {
  height: 100%;
  justify-content: center;
}
.play-page #game .stock-area .avatar {
  width: 48px;
  height: 52px;
  flex-shrink: 0;
}
.play-page #game .stock-area .seat-cards {
  display: flex;
  height: 14px;
  margin-top: 2px;
}
.play-page #game .stock-area .seat-cards i {
  height: 14px;
}
.play-page #game .stock-area .foot-stack {
  top: 4px;
  right: 0;
  width: 17px;
  height: 24px;
}
.play-page #game #partner-seat .foot-stack {
  top: 10px;
  right: 29px;
  width: 17px;
  height: 24px;
}
.play-page #game .dealer-badge {
  z-index: 2;
}
.play-page #game #partner-seat .dealer-badge {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.play-page #game .hand-header {
  grid-row: 5;
  grid-column: 1;
  display: flex;
  border: 0;
}
.play-page #game .hand-tray {
  grid-row: 6;
  grid-column: 1;
}
.play-page #game .action-panel {
  grid-row: 7;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: min(100%, 620px);
  margin: 0 auto;
}
.play-page #game .seat-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
.play-page #game .seat-actions button {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  height: 38px;
  margin: 0;
  padding: 3px 8px;
  font: 600 13px/1.1 system-ui;
  border-radius: 5px;
  box-shadow: none;
}
.play-page #game .seat-actions .primary {
  color: #243b2c;
  background: #efda9a;
  border-color: #f3e4b7;
}
.play-page #game #you-seat {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0;
  gap: 0;
}
.play-page #game #you-seat .avatar {
  width: 42px;
  height: 45px;
  flex-shrink: 1;
  min-height: 0;
}
.play-page #game #you-seat .seat-caption small {
  display: none;
}
.play-page #game #you-seat .foot-stack {
  position: absolute;
  top: 13px;
  right: 9px;
  width: 17px;
  height: 24px;
}
.play-page #game #you-seat .dealer-badge {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-size: 8px;
}
.play-page #game .table-bottom {
  justify-content: space-between;
}
.play-page #game .table-bottom button {
  min-height: 28px;
  height: 28px;
  padding: 2px 7px;
  font-size: 11px;
}
.play-page #game .round-indicator {
  margin-right: auto;
  font-size: 11px;
}
@media (max-width: 600px) {
  .play-page #game {
    grid-template-rows: minmax(0, 1fr) 30px;
  }
  .play-page #game .felt-table {
    --north: 52px;
    --upper-min: 88px;
    --lower-min: 62px;
    --center: 80px;
    --south: 58px;
    grid-template-rows:
      var(--north) minmax(var(--upper-min), 1fr) var(--center) minmax(
        var(--lower-min),
        0.8fr
      )
      18px var(--hand-row) var(--south);
    padding: 4px 5px;
    gap: 3px;
  }
  .play-page #game[data-hand-density="dense"] .felt-table {
    --north: 44px;
    --upper-min: 70px;
    --lower-min: 44px;
    --center: 70px;
    --south: 52px;
  }
  .play-page #game .opponents {
    grid-template-columns: minmax(0, 1fr) 106px minmax(0, 1fr);
  }
  .play-page #game .turn-note {
    width: 145px;
    max-width: none;
    z-index: 1;
  }
  .play-page #game .turn-note strong {
    font-size: 12px;
  }
  .play-page #game .turn-note p {
    font-size: 10px;
  }
  .play-page #game #opening-label {
    font-size: 9px;
  }
  .play-page #game #partner-seat .avatar {
    width: 30px;
    height: 32px;
  }
  .play-page #game #partner-seat .seat-caption {
    gap: 0;
  }
  .play-page #game #partner-seat .seat-caption small {
    display: none;
  }
  .play-page #game #partner-seat .foot-stack {
    right: 14px;
    top: 6px;
    width: 15px;
    height: 21px;
  }
  .play-page #game .team-area {
    width: calc(100% - 26px);
  }
  .play-page #game .team-area-yours {
    grid-template-rows: minmax(0, 1fr) 25px;
    gap: 1px;
  }
  .play-page #game .meld-region {
    padding: 2px 4px;
    grid-template-rows: 15px minmax(0, 1fr);
  }
  .play-page #game .meld-region h2 {
    font-size: 11px;
    line-height: 14px;
  }
  .play-page #game .mini-card {
    height: 25px;
    font-size: 12px;
  }
  .play-page #game .mini-card b {
    font-size: 12px;
  }
  .play-page #game .meld-chip,
  .play-page #game .prepared-meld {
    min-height: 28px;
    padding: 1px;
  }
  .play-page #game .meld-detail {
    font-size: 8px;
  }
  .play-page #game .plan-actions {
    gap: 4px;
  }
  .play-page #game .plan-actions button,
  .play-page #game .plan-actions select {
    min-height: 24px;
    height: 24px;
    font-size: 10px;
    padding: 1px 3px;
  }
  .play-page #game .plan-actions select {
    flex-basis: 96px;
    max-width: 96px;
  }
  .play-page #game .stock-area {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 2px;
  }
  .play-page #game .piles {
    gap: 17px;
  }
  .play-page #game .stock-button,
  .play-page #game .discard-area {
    width: 74px;
    flex-basis: 74px;
    grid-template-rows: minmax(0, 1fr) 14px 11px;
    gap: 1px;
  }
  .play-page #game .stock-button > span:not(.card-back),
  .play-page #game .discard-area > span {
    font-size: 10px;
    line-height: 14px;
  }
  .play-page #game .stock-button > small,
  .play-page #game .discard-area > small {
    font-size: 9px;
    line-height: 10px;
  }
  .play-page #game .stock-area .avatar {
    width: 35px;
    height: 38px;
  }
  .play-page #game .stock-area .seat strong {
    font-size: 11px;
  }
  .play-page #game .stock-area .seat small {
    font-size: 9px;
  }
  .play-page #game .stock-area .seat-cards {
    height: 10px;
    margin-top: 1px;
  }
  .play-page #game .stock-area .seat-cards i {
    height: 10px;
  }
  .play-page #game .stock-area .foot-stack {
    width: 14px;
    height: 20px;
    top: 3px;
    right: -2px;
  }
  .play-page #game .action-panel {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    gap: 10px;
    width: calc(100% - 16px);
  }
  .play-page #game .seat-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .play-page #game .seat-actions button {
    min-height: 26px;
    height: 26px;
    font-size: 12px;
    padding: 2px 5px;
  }
  .play-page #game #you-seat .avatar {
    width: 36px;
    height: 39px;
  }
  .play-page #game #you-seat .foot-stack {
    right: 0;
    top: 10px;
    width: 15px;
    height: 21px;
  }
}
@media (max-width: 600px) and (max-height: 620px) {
  .play-page #game .felt-table,
  .play-page #game[data-hand-density="dense"] .felt-table {
    --north: 38px;
    --upper-min: 82px;
    --lower-min: 56px;
    --center: 64px;
    --south: 50px;
    grid-template-rows:
      var(--north) minmax(var(--upper-min), 1fr) var(--center) minmax(
        var(--lower-min),
        0.7fr
      )
      16px var(--hand-row) var(--south);
    gap: 2px;
  }
  .play-page #game .turn-note {
    width: 120px;
  }
  .play-page #game .turn-note p {
    font-size: 9px;
  }
  .play-page #game #opening-label {
    font-size: 8px;
  }
  .play-page #game #partner-seat .avatar {
    height: 26px;
    width: 24px;
  }
  .play-page #game .stock-area .avatar {
    width: 30px;
    height: 33px;
  }
  .play-page #game .stock-area .seat-cards {
    display: none;
  }
  .play-page #game .seat-actions button {
    height: 24px;
    min-height: 24px;
    font-size: 11px;
  }
  .play-page #game .seat-actions {
    gap: 2px;
  }
  .play-page #game #you-seat .avatar {
    width: 30px;
    height: 33px;
  }
}
@media (max-height: 540px) and (min-width: 601px) {
  .play-page #game {
    grid-template-rows: minmax(0, 1fr) 26px;
    gap: 2px;
  }
  .play-page #game .felt-table,
  .play-page #game[data-hand-density="dense"] .felt-table {
    --hand-weight: 1.5fr;
    grid-template-rows:
      27px minmax(54px, 1fr) 42px minmax(28px, 0.6fr)
      0 minmax(52px, var(--hand-weight)) 36px;
    padding: 2px 8px;
    gap: 1px;
  }
  .play-page #game[data-hand-density="dense"] .felt-table {
    --hand-weight: 2.7fr;
  }
  .play-page #game .opponents {
    grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
  }
  .play-page #game .turn-note {
    max-width: 270px;
  }
  .play-page #game .turn-note strong {
    font-size: 10px;
  }
  .play-page #game .turn-note p {
    font-size: 10px;
    display: inline;
    margin-left: 5px;
  }
  .play-page #game #opening-label {
    display: none;
  }
  .play-page #game #partner-seat,
  .play-page #game #you-seat {
    flex-direction: row;
    gap: 4px;
  }
  .play-page #game #partner-seat .avatar,
  .play-page #game #you-seat .avatar {
    width: 23px;
    height: 25px;
  }
  .play-page #game #partner-seat .seat-caption small {
    display: none;
  }
  .play-page #game .team-area {
    width: min(100% - 100px, 700px);
    position: relative;
  }
  .play-page #game .team-area-yours {
    grid-template-rows: minmax(0, 1fr);
  }
  .play-page #game .team-area-yours .meld-region {
    grid-template-rows: 24px minmax(0, 1fr);
  }
  .play-page #game .team-area-yours h2 {
    text-align: left;
    padding-right: 310px;
  }
  .play-page #game .plan-actions {
    position: absolute;
    right: 5px;
    top: 1px;
    height: 24px;
    max-width: 310px;
  }
  .play-page #game .plan-actions button,
  .play-page #game .plan-actions select {
    height: 24px;
    min-height: 24px;
    font-size: 10px;
    padding: 1px 3px;
  }
  .play-page #game .plan-actions select {
    max-width: 96px;
    flex-basis: 96px;
  }
  .play-page #game #plan-status {
    font-size: 9px;
  }
  .play-page #game .team-area-theirs .meld-region {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }
  .play-page #game .meld-region {
    padding: 1px 4px;
  }
  .play-page #game .meld-region h2 {
    font-size: 10px;
  }
  .play-page #game .mini-card {
    height: 20px;
    font-size: 10px;
  }
  .play-page #game .mini-card b {
    font-size: 10px;
  }
  .play-page #game .meld-detail {
    display: none;
  }
  .play-page #game .meld-chip,
  .play-page #game .prepared-meld {
    min-height: 24px;
    padding: 1px;
  }
  .play-page #game .stock-area {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
  }
  .play-page #game .stock-area .avatar {
    width: 25px;
    height: 27px;
  }
  .play-page #game .stock-area .seat strong {
    font-size: 10px;
  }
  .play-page #game .stock-area .seat small,
  .play-page #game .stock-area .seat-cards {
    display: none;
  }
  .play-page #game .stock-area .foot-stack {
    top: 2px;
    right: 5px;
    width: 14px;
    height: 20px;
  }
  .play-page #game .stock-button,
  .play-page #game .discard-area {
    grid-template-rows: minmax(0, 1fr) 11px;
    gap: 0;
    width: 85px;
    flex-basis: 85px;
  }
  .play-page #game .stock-button > small,
  .play-page #game .discard-area > small {
    display: none;
  }
  .play-page #game .stock-button > span:not(.card-back),
  .play-page #game .discard-area > span {
    font-size: 9px;
    line-height: 11px;
  }
  .play-page #game .hand-header {
    display: none;
  }
  .play-page #game .action-panel {
    width: min(100%, 700px);
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    gap: 10px;
  }
  .play-page #game .seat-actions button {
    height: 28px;
    min-height: 28px;
    font-size: 11px;
  }
  .play-page #game #you-seat .foot-stack {
    top: 0;
    right: 0;
    width: 14px;
    height: 20px;
  }
  .play-page #game #partner-seat .foot-stack {
    top: 2px;
    right: 17px;
    width: 14px;
    height: 20px;
  }
  .play-page #game .table-bottom button {
    height: 24px;
    min-height: 24px;
  }
}

.play-page #game[data-hand-density="dense"] .meld-detail {
  display: none;
}
.play-page #game[data-hand-density="dense"] .meld-chip,
.play-page #game[data-hand-density="dense"] .prepared-meld {
  min-height: 24px;
  padding: 0;
}
.play-page #game[data-hand-density="dense"] .mini-card {
  height: 22px;
}
.play-page #game .stock-button > small,
.play-page #game .discard-area > small {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .play-page #game[data-hand-density="dense"] .turn-note p {
    font-size: 9px;
    margin: 1px 0;
  }
  .play-page #game[data-hand-density="dense"] #opening-label {
    font-size: 8px;
  }
  .play-page #game[data-hand-density="dense"] .meld-region {
    grid-template-rows: 12px minmax(0, 1fr);
    padding: 1px 3px;
  }
  .play-page #game[data-hand-density="dense"] .meld-region h2 {
    line-height: 12px;
    font-size: 10px;
  }
}
@media (max-width: 600px) and (max-height: 620px) {
  .play-page #game #opening-label {
    display: none;
  }
  .play-page #game .turn-note p {
    margin: 1px 0;
  }
  .play-page #game .mini-card {
    height: 20px;
  }
  .play-page #game[data-hand-density="dense"] .felt-table {
    --upper-min: 66px;
    --lower-min: 40px;
  }
  .play-page #game[data-hand-density="dense"] .mini-card {
    height: 20px;
  }
}

.play-page[data-card-size="large"]
  #game:not([data-hand-density="dense"])
  .felt-table {
  --hand-height: 100px;
}
.play-page[data-card-size="extra"]
  #game:not([data-hand-density="dense"])
  .felt-table {
  --hand-height: 116px;
}
@media (max-width: 600px) and (max-height: 620px) {
  .play-page[data-card-size="large"]
    #game:not([data-hand-density="dense"])
    .felt-table,
  .play-page[data-card-size="extra"]
    #game:not([data-hand-density="dense"])
    .felt-table {
    --hand-height: 96px;
  }
}

@media (max-height: 540px) and (min-width: 601px) {
  body.play-page {
    --play-header-height: 34px;
  }
  .play-page .game-switch summary {
    min-height: 30px;
  }
  .play-page .game-switch h1 {
    font-size: 17px;
  }
  .play-page .menu-toggle,
  .play-page .help-shortcut {
    min-height: 28px;
    height: 28px;
    padding: 1px 7px;
  }
  .play-page .menu-toggle {
    font-size: 22px;
  }
}

.play-page #game #your-meld-surface {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: start;
  justify-content: center;
  gap: 3px;
}
.play-page #game #team-melds,
.play-page #game #meld-plan:not([hidden]),
.play-page #game #plan-groups {
  display: contents;
}

.play-page #game .turn-note {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 230px;
}
.play-page #game .turn-guidance {
  padding: 5px 7px;
  border-radius: 6px;
  background: #fff0b7;
  color: #283924;
  font: 12px/1.25 system-ui;
}
.play-page #game .turn-guidance strong {
  color: inherit;
  font: 700 12px/1.25 system-ui;
}
.play-page #game .turn-guidance p {
  margin: 2px 0 0;
  color: inherit;
  font: inherit;
}
.play-page #game #table-notice {
  position: absolute;
  top: 0;
  left: 0;
  width: min(300px, 85vw);
  padding: 10px 35px 10px 11px;
  border: 1px solid #b5a26b;
  border-radius: 7px;
  background: #fff0b7;
  color: #283924;
  box-shadow: 0 3px 12px #13251b55;
}
.play-page #game #game-message {
  max-height: min(150px, 30dvh);
  overflow: auto;
  margin: 0;
  font: 13px/1.4 system-ui;
  color: inherit;
}
.play-page #game #dismiss-notice {
  position: absolute;
  right: 3px;
  top: 3px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #283924;
  font-size: 22px;
}
.play-page #game .team-area-yours {
  grid-template-rows: minmax(0, 1fr) auto;
}
.play-page
  #game
  .plan-actions:not(:has(button:not([hidden]), select:not([hidden]))) {
  display: none;
}
.play-page #game #your-meld-surface.has-plan #team-melds:has(.empty-melds) {
  display: none;
}
.play-page #game .stock-button,
.play-page #game .discard-area {
  grid-template-rows: minmax(0, 1fr);
  position: relative;
}
.play-page #game #frozen-state {
  display: block;
  position: absolute;
  bottom: -4px;
  z-index: 1;
  padding: 1px 5px;
  border-radius: 4px;
  background: #fff0b7;
  color: #283924;
  font: 10px/1.2 system-ui;
}
.play-page #game .felt-table {
  --center: 88px;
}
@media (max-width: 600px) {
  .play-page #game .felt-table {
    --center: 70px;
  }
  .play-page #game .turn-guidance {
    padding: 4px 5px;
    font-size: 11px;
  }
  .play-page #game .turn-guidance strong {
    font-size: 11px;
  }
}
@media (max-width: 600px) and (max-height: 620px) {
  .play-page #game .felt-table {
    --center: 64px;
  }
  .play-page #game .turn-guidance {
    padding: 3px 4px;
    font-size: 10px;
  }
  .play-page #game .turn-guidance strong {
    font-size: 10px;
  }
}
@media (max-height: 540px) and (min-width: 601px) {
  .play-page #game .turn-guidance {
    padding: 3px 5px;
    font-size: 10px;
  }
  .play-page #game .turn-guidance strong {
    font-size: 10px;
  }
  .play-page #game .turn-guidance p {
    display: inline;
    margin: 0 0 0 3px;
  }
  .play-page #game .turn-note {
    max-width: 270px;
  }
}