/* Rooms are heads-up: keep the two player positions and hide the five unused seats. */
#players-container > .players:nth-child(n + 3),
#players-timer-container > .players-timer:nth-child(n + 3) {
  display: none !important;
}

/* Seat the local account at the bottom and the opponent directly opposite. */
#players-container,
#players-timer-container {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  display: block !important;
}

#players-container > .players,
#players-timer-container > .players-timer {
  position: absolute !important;
  left: 50% !important;
  margin: 0 !important;
}

#players-container > .players:first-child,
#players-timer-container > .players-timer:first-child {
  top: auto !important;
  bottom: 150px !important;
  transform: translateX(-50%) !important;
}

#players-container > .players:nth-child(2),
#players-timer-container > .players-timer:nth-child(2) {
  top: 17% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

#players-container > .players.heads-up-self,
#players-timer-container > .players-timer.heads-up-self {
  top: auto !important;
  bottom: 150px !important;
}

#players-container > .players.heads-up-opponent,
#players-timer-container > .players-timer.heads-up-opponent {
  top: 17% !important;
  bottom: auto !important;
}

/* Keep both huEVO profiles readable and clear of the chip rail. */
#players-container > .players {
  z-index: 8;
}

.player-name {
  z-index: 32 !important;
  bottom: -58px !important;
  left: 50% !important;
  width: max-content !important;
  max-width: min(260px, 78vw);
  min-height: 48px;
  padding: 4px 10px 4px 8px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  background: rgba(8, 28, 21, .9);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
  transform: translateX(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-name span {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  border-color: rgba(255, 255, 255, .45) !important;
}

.player-avatar {
  object-fit: cover !important;
}

/* Fan cards to the right, with a shallow arc instead of the old downward stack. */
.player-cards {
  z-index: 12;
  transform: none !important;
}

.player-cards .cardImg {
  top: -142px !important;
  left: 0 !important;
  margin-left: 0 !important;
  width: 72px !important;
  height: 108px !important;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

.player-cards .card1 { left: -28px !important; top: -132px !important; }
.player-cards .card2 { left: -5px !important; top: -140px !important; }
.player-cards .card3 { left: 18px !important; top: -146px !important; }
.player-cards .card4 { left: 41px !important; top: -150px !important; }
.player-cards .card5 { left: 64px !important; top: -150px !important; }
.player-cards .card6 { left: 87px !important; top: -146px !important; }
.player-cards .card7 { left: 110px !important; top: -140px !important; }
.player-cards .card8 { left: 133px !important; top: -132px !important; }
.player-cards .card9 { left: 156px !important; top: -122px !important; }
.player-cards .card10 { left: 179px !important; top: -110px !important; }
.player-cards .card11 { left: 202px !important; top: -96px !important; }

/* Do not show an opponent's total during their turn; reveal at showdown. */
body:not(.blackjack-showdown) .heads-up-opponent .player-sum {
  opacity: 0 !important;
}

#duel-bet-status {
  position: absolute;
  left: 50%;
  bottom: 118px;
  z-index: 35;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 9px;
  background: rgba(7, 24, 18, .88);
  color: #fff;
  font: 600 14px/1.35 system-ui, sans-serif;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

#duel-bet-status:empty { display: none; }
#duel-bet-status[data-state="waiting"] { color: #ffe08a; }
#duel-bet-status[data-state="matched"] { color: #b7f5c6; }

/* Keep room chat out of the betting area until the user opens it. */
#room-chat {
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  left: 90px !important;
  width: 230px !important;
  padding: 7px !important;
  box-sizing: border-box;
}

#room-chat-toggle {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 700 12px/1.2 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

#room-chat:not(.room-chat-expanded) #room-chat-content {
  display: none;
}

#room-chat.room-chat-expanded #room-chat-content {
  display: block;
}

#room-chat.room-chat-expanded #room-chat-messages {
  height: 110px;
}

@media (max-width: 700px) {
  #players-container > .players,
  #players-timer-container > .players-timer {
    width: 78px !important;
    height: 78px !important;
  }

  #players-container > .players:first-child,
  #players-timer-container > .players-timer:first-child {
    bottom: 135px !important;
  }

  #players-container > .players.heads-up-self,
  #players-timer-container > .players-timer.heads-up-self {
    bottom: 135px !important;
  }

  .player-name {
    bottom: -54px !important;
    min-height: 40px;
    max-width: min(230px, 78vw);
    font-size: 14px !important;
  }

  .player-name span {
    flex-basis: 36px;
    width: 36px !important;
    height: 36px !important;
  }

  .player-cards .cardImg {
    width: 58px !important;
    height: 87px !important;
  }

  #duel-bet-status { bottom: 106px; font-size: 12px; }

  #room-chat {
    top: 12px !important;
    left: 86px !important;
    width: min(210px, calc(100vw - 100px)) !important;
  }
}