/* Court emblems and opponent seats keep the original table's visual style. */
.opponent .opponent-cards { height: 98px; }
.opponent .card-back { width: 64px; height: 92px; }
.opponent .card-back::after { inset: 7px; font-size: 29px; line-height: 72px; }
.royal-crown[class],
.player-crown[class] {
  flex: 0 0 auto;
  width: 68px;
  height: 72px;
  margin-right: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  vertical-align: middle;
}
.royal-crown.king-crown,
.royal-crown.queen-crown { width: 76px; height: 76px; }
.player-crown[class] { width: 80px; height: 80px; }
.royal-crown[class] svg.mark-svg,
.player-crown[class] svg.mark-svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  filter: drop-shadow(0 3px 2px #11162b66);
}
.royal-crown.dethroned,
.player-crown.dethroned { background: none !important; box-shadow: none; }
.royal-crown.dethroned svg.mark-svg,
.player-crown.dethroned svg.mark-svg {
  filter: grayscale(1) brightness(.62) drop-shadow(0 3px 2px #11162b66);
}
.rules-ladder .step .royal-crown { width: 70px; height: 74px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .opponent,
  .opponent.side-right {
    display: grid;
    grid-template-columns: 124px 68px;
    justify-items: center;
    gap: 4px 6px;
    left: clamp(103px, calc(50% + var(--sx, 0%)), calc(100% - 103px));
  }
  .opponent .royal-crown[class] { width: 68px; height: 72px; }
  .opponent .seat-who { grid-column: 1 / -1; }
  .opponent .avatar { width: 28px; height: 28px; font-size: 16px; border-width: 2px; }
  .opponent .seat-name { max-width: 144px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
}

@media (max-width: 700px) {
  .opponent,
  .opponent.side-right {
    display: grid;
    grid-template-columns: 44px 54px;
    justify-items: center;
    gap: 2px 4px;
    left: clamp(54px, calc(50% + var(--sx, 0%)), calc(100% - 54px));
  }
  .opponent .royal-crown[class] { width: 54px; height: 58px; }
  .opponent .seat-stack { grid-column: 1; grid-row: 1; }
  .opponent .opponent-cards { width: 44px !important; height: 58px; }
  .opponent .card-back { width: 36px; height: 52px; left: calc(var(--back) * .6px); border-width: 1px; border-radius: 5px; }
  .opponent .card-back::after { inset: 4px; border-radius: 3px; font-size: 19px; line-height: 40px; }
  .opponent .stack-count { top: -8px; padding: 3px 5px; font-size: 8px; }
  .opponent .royal-crown { grid-column: 2; grid-row: 1; }
  .opponent .seat-who {
    grid-column: 1 / -1;
    gap: 4px;
    max-width: 100%;
  }
  .opponent .avatar { width: 22px; height: 22px; font-size: 14px; border-width: 2px; }
  .opponent .seat-name { min-width: 0; max-width: 64px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .player-crown[class] { width: 66px; height: 66px; }
  .rules-ladder {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 12px 10px 4px;
  }
  .rules-ladder .arrow { display: none; }
  .rules-ladder .step .royal-crown { width: 46px; height: 50px; }
  .rules-ladder .step small { font-size: 5px; }
}