.play-page {
  --hand-card-width: 52px;
}
.play-page[data-card-size="large"] {
  --hand-card-width: 62px;
}
.play-page[data-card-size="extra"] {
  --hand-card-width: 72px;
}
.play-page .desktop-tools,
.play-page .menu-word {
  display: none;
}
@media (min-width: 601px) and (min-height: 541px) {
  .play-page {
    --hand-card-width: 68px;
  }
  .play-page[data-card-size="large"] {
    --hand-card-width: 80px;
  }
  .play-page[data-card-size="extra"] {
    --hand-card-width: 94px;
  }
  .play-page .menu-symbol {
    display: none;
  }
  .play-page .menu-word {
    display: inline;
    font-size: 15px;
  }
  .play-page #game {
    max-width: 1200px;
  }
  .play-page #game .felt-table,
  .play-page #game[data-hand-density="dense"] .felt-table {
    grid-template-rows:
      10% minmax(0, 15%) 17% minmax(0, 15%) 22px minmax(0, 1fr)
      10%;
    gap: 4px;
    padding: 6px 14px;
  }
  .play-page #game[data-hand-density="dense"] .felt-table {
    grid-template-rows:
      9% minmax(0, 13%) 15% minmax(0, 13%) 20px minmax(0, 1fr)
      9%;
  }
  .play-page #game .team-area {
    width: min(100% - 160px, 800px);
  }
  .play-page #game .meld-region {
    grid-template-rows: 22px minmax(0, 1fr);
    padding: 3px 8px;
  }
  .play-page #game .meld-region h2 {
    font: 600 14px/20px system-ui;
  }
  .play-page #game .mini-card {
    height: clamp(34px, 7cqh, 62px);
    width: 36px;
    flex-basis: 36px;
    font-size: 19px;
    margin-right: -5px;
    border-radius: 4px;
  }
  .play-page #game .mini-card b {
    font-size: 19px;
  }
  .play-page #game .meld-detail {
    font-size: 11px;
  }
  .play-page #game .melds,
  .play-page #game #your-meld-surface {
    gap: 7px;
  }
  .play-page #game[data-hand-density="dense"] .mini-card {
    height: clamp(28px, 5.5cqh, 44px);
  }
  .play-page #game .stock-button,
  .play-page #game .discard-area {
    max-height: 150px;
    width: 118px;
    flex-basis: 118px;
  }
  .play-page #game .piles {
    grid-template-columns: 118px 118px;
    gap: 26px;
  }
  .play-page #game .action-panel {
    width: min(100%, 840px);
  }
  .play-page #game .seat-actions button {
    height: 40px;
    min-height: 40px;
    font-size: 15px;
  }
  .play-page #game .hand-header h2 {
    font-size: 15px;
  }
  .play-page #game .turn-note {
    max-width: 285px;
  }
  .play-page #game .turn-guidance,
  .play-page #game .turn-guidance strong {
    font-size: 14px;
  }
  .play-page #game .plan-actions button,
  .play-page #game .plan-actions select {
    font-size: 12px;
  }
}
@media (min-width: 1100px) and (min-height: 541px) {
  .play-page {
    --hand-card-width: 82px;
  }
  .play-page[data-card-size="large"] {
    --hand-card-width: 96px;
  }
  .play-page[data-card-size="extra"] {
    --hand-card-width: 110px;
  }
  .play-page .play-header {
    padding-inline: max(16px, calc((100vw - 1200px) / 2));
  }
  .play-page .menu-toggle {
    order: 4;
  }
  .play-page .desktop-tools {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }
  .play-page .desktop-tools button {
    height: 38px;
    min-height: 38px;
    padding: 4px 12px;
    font-size: 14px;
    color: #fff9e9;
    border: 1px solid #819d85;
    background: transparent;
    box-shadow: none;
  }
  .play-page .help-shortcut {
    margin-left: 0;
  }
  .play-page #game .team-area {
    width: min(100% - 230px, 780px);
  }
  .play-page #game .mini-card {
    width: 40px;
    flex-basis: 40px;
    font-size: 22px;
  }
  .play-page #game .mini-card b {
    font-size: 22px;
  }
  .play-page #game .seat strong {
    font-size: 15px;
  }
  .play-page #game .turn-guidance,
  .play-page #game .turn-guidance strong {
    font-size: 15px;
  }
}
@media (min-width: 601px) and (min-height: 850px) {
  .play-page #game #partner-seat .avatar,
  .play-page #game #you-seat .avatar {
    width: 56px;
    height: 60px;
  }
  .play-page #game .stock-area .avatar {
    width: 62px;
    height: 67px;
  }
  .play-page #game .seat-actions button {
    height: 44px;
    min-height: 44px;
    font-size: 17px;
  }
  .play-page #game .meld-region h2 {
    font-size: 16px;
  }
}
@media (min-width: 601px) and (min-height: 541px) {
  .play-page
    #game
    .felt-table:has(#meld-target:not([hidden]), #play-plan:not([hidden])) {
    grid-template-rows:
      10% minmax(0, 20%) 17% minmax(0, 15%) 22px minmax(0, 1fr)
      10%;
  }
  .play-page
    #game[data-hand-density="dense"]
    .felt-table:has(#meld-target:not([hidden]), #play-plan:not([hidden])) {
    grid-template-rows:
      9% minmax(0, 19%) 15% minmax(0, 13%) 20px minmax(0, 1fr)
      9%;
  }
}