/* v2.40: wider card detail panel and flat five-card hand layout */

/* Card detail sits above the hamburger menu and spans most of the board width. */
.card-detail-panel {
  z-index: 95 !important;
  width: min(640px, calc(100% - 36px)) !important;
  max-height: 190px !important;
}

/* Player hand is a straight row instead of a curved fan. */
.player-hand {
  width: min(100%, 460px);
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center !important;
  align-items: end;
  gap: 4px;
  padding-inline: 0 !important;
  overflow: visible;
}

.player-hand .hand-card {
  width: calc((100% - 16px) / 5) !important;
  max-width: 78px;
  flex: 0 1 calc((100% - 16px) / 5) !important;
  margin-left: 0 !important;
  transform: none;
}

.player-hand .hand-card:nth-child(6n + 1),
.player-hand .hand-card:nth-child(6n + 2),
.player-hand .hand-card:nth-child(6n + 3),
.player-hand .hand-card:nth-child(6n + 4),
.player-hand .hand-card:nth-child(6n + 5),
.player-hand .hand-card:nth-child(6n) {
  transform: none;
}

@media (max-width: 760px) {
  .card-detail-panel {
    top: 10px !important;
    width: calc(100% - 20px) !important;
    max-height: 178px !important;
    padding: 11px 12px 12px !important;
  }

  .player-hand {
    width: 100%;
    gap: 3px;
  }

  .player-hand .hand-card {
    width: calc((100% - 12px) / 5) !important;
    flex-basis: calc((100% - 12px) / 5) !important;
    max-width: none;
  }
}

@media (max-width: 430px) {
  .card-detail-panel {
    width: calc(100% - 16px) !important;
    max-height: 172px !important;
  }

  .player-hand {
    gap: 2px;
  }

  .player-hand .hand-card {
    width: calc((100% - 8px) / 5) !important;
    flex-basis: calc((100% - 8px) / 5) !important;
  }
}