/* Keep all four played cards on one symmetric orbit around the table centre. */
body.game-active .table {
  --played-card-orbit-x: 22%;
  --played-card-orbit-y: 22%;
}

/* Absolute final portrait override: identical to dealPosition(), kept last. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table > .trick-area .played-card.seat-partner {
    top: 22% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user {
    top: 78% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 22% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 78% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Definitive phone geometry: the centroid of all four cards is the table centre. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table > .trick-area .played-card.seat-partner,
  body.game-active .table > .trick-area.collecting .played-card.seat-partner,
  body.game-active .table > .trick-area[class*="winner-"] .played-card.seat-partner {
    top: 38% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user,
  body.game-active .table > .trick-area.collecting .played-card.seat-user,
  body.game-active .table > .trick-area[class*="winner-"] .played-card.seat-user {
    top: 62% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left,
  body.game-active .table > .trick-area.collecting .played-card.seat-left,
  body.game-active .table > .trick-area[class*="winner-"] .played-card.seat-left {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 36% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right,
  body.game-active .table > .trick-area.collecting .played-card.seat-right,
  body.game-active .table > .trick-area[class*="winner-"] .played-card.seat-right {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 64% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Reliable score/roem overlay in browser layouts. */
@media (min-width: 701px) {
  body.game-active .table > .trick-points,
  body.game-active .table > .roem-burst {
    position: absolute !important;
    z-index: 120 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    translate: none !important;
    transform: translate(-50%, -50%) scale(.92) !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.game-active .table > .trick-points {
    top: 50% !important;
  }

  body.game-active .table > .roem-burst,
  body.game-active .table > .roem-burst.burst-active {
    top: calc(50% + clamp(58px, 16cqw, 92px)) !important;
  }

  body.game-active .table > .trick-points.burst-active,
  body.game-active .table > .roem-burst.burst-active {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: browserTablePopup 1700ms ease both !important;
  }

  body.game-active .table > .trick-points[hidden],
  body.game-active .table > .roem-burst[hidden] {
    display: none !important;
  }
}

@keyframes browserTablePopup {
  0% { visibility: visible; opacity: 0; transform: translate(-50%, -50%) scale(.88); }
  10%, 82% { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { visibility: visible; opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

/* Final shared geometry: exactly mirror dealPosition() from main.js.
   The four-card centroid is always the table centre (50%, 50%). */
body.game-active .table > .trick-area {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.game-active .table > .trick-area .played-card.seat-partner {
  top: 22% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .table > .trick-area .played-card.seat-user {
  top: 78% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .table > .trick-area .played-card.seat-left {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 22% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .table > .trick-area .played-card.seat-right {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 78% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .trick-area .played-card:not(.collecting) {
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 3px !important;
}

body.game-active .trick-area .played-card.seat-partner:not(.collecting) {
  top: calc(50% - var(--played-card-orbit-y)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .trick-area .played-card.seat-user:not(.collecting) {
  top: calc(50% + var(--played-card-orbit-y)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .trick-area .played-card.seat-left:not(.collecting) {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% - var(--played-card-orbit-x)) !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .trick-area .played-card.seat-right:not(.collecting) {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% + var(--played-card-orbit-x)) !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .trick-area .played-card:not(.collecting) > span {
  width: max-content !important;
  max-width: 84px !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.05 !important;
}

@media (max-width: 700px) {
  body.game-active .table {
    --played-card-orbit-x: 21%;
    --played-card-orbit-y: 21%;
  }
}

@media (min-width: 1500px) {
  body.game-active .trick-area .played-card:not(.collecting) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body.game-active .trick-area .played-card:not(.collecting) .mini-card {
    width: 44px !important;
    height: 64px !important;
    min-width: 44px !important;
    min-height: 64px !important;
    max-width: 44px !important;
    max-height: 64px !important;
    aspect-ratio: auto !important;
    border-radius: 6px !important;
  }

  body.game-active .trick-area .played-card:not(.collecting) .mini-card .corner {
    top: 5px !important;
    left: 5px !important;
    font-size: 10px !important;
  }

  body.game-active .trick-area .played-card:not(.collecting) .mini-card .suit {
    inset: 0 !important;
    padding-top: 13% !important;
    font-size: 22px !important;
  }

  body.game-active .trick-area .played-card:not(.collecting) > span {
    max-width: 62px !important;
    font-size: 9px !important;
  }
}

/* Single source of truth for every card shown on the table.
   11% of the actual square table width, bounded for readability. */
body.game-active .table {
  container-type: size !important;
  --table-play-card-width: clamp(44px, 11cqw, 66px);
  --table-play-card-height: calc(var(--table-play-card-width) * 1.45);
}

body.game-active .table .deal-animation-layer {
  --deal-card-w: var(--table-play-card-width) !important;
  --deal-card-h: var(--table-play-card-height) !important;
}

body.game-active .table .deal-card,
body.game-active .table .deal-mini-card,
body.game-active .table .trick-area .played-card:not(.collecting) .mini-card {
  width: var(--table-play-card-width) !important;
  height: var(--table-play-card-height) !important;
  min-width: var(--table-play-card-width) !important;
  min-height: var(--table-play-card-height) !important;
  max-width: var(--table-play-card-width) !important;
  max-height: var(--table-play-card-height) !important;
  aspect-ratio: auto !important;
  border-radius: calc(var(--table-play-card-width) * .12) !important;
}

body.game-active .table .trick-area .played-card:not(.collecting) {
  width: var(--table-play-card-width) !important;
  min-width: var(--table-play-card-width) !important;
  max-width: var(--table-play-card-width) !important;
}

body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .corner {
  top: calc(var(--table-play-card-width) * .11) !important;
  left: calc(var(--table-play-card-width) * .11) !important;
  font-size: clamp(10px, 2.4cqw, 14px) !important;
}

body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .corner > span:last-child,
body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .rank-center,
body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .corner-bottom,
body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .pip-layout {
  display: none !important;
}

body.game-active .table .trick-area .played-card:not(.collecting) .mini-card .suit {
  inset: 0 !important;
  padding-top: 13% !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(22px, 5.5cqw, 34px) !important;
}

/* Points and roem use the same table-relative scale on mobile and browsers. */
body.game-active .table > .trick-points,
body.game-active .table > .roem-burst {
  width: clamp(120px, 32cqw, 190px) !important;
  min-width: clamp(120px, 32cqw, 190px) !important;
  max-width: clamp(120px, 32cqw, 190px) !important;
  min-height: clamp(54px, 14cqw, 76px) !important;
  padding: clamp(7px, 2cqw, 12px) clamp(10px, 3cqw, 16px) !important;
  border-radius: clamp(8px, 2.2cqw, 13px) !important;
  box-sizing: border-box !important;
}

body.game-active .table > .trick-points strong,
body.game-active .table > .roem-burst strong {
  font-size: clamp(20px, 6cqw, 32px) !important;
  line-height: 1 !important;
}

body.game-active .table > .trick-points span,
body.game-active .table > .roem-burst span {
  margin-top: clamp(2px, .8cqw, 5px) !important;
  font-size: clamp(9px, 2.5cqw, 13px) !important;
  line-height: 1.12 !important;
}

body.game-active .table > .roem-burst,
body.game-active .table > .roem-burst.burst-active {
  top: calc(50% + clamp(58px, 16cqw, 92px)) !important;
}

/* Four fixed, non-overlapping card anchors across the complete table surface. */
body.game-active .table > .trick-area {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.game-active .table > .trick-area:not(.collecting) .played-card {
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body.game-active .table > .trick-area:not(.collecting) .played-card.seat-partner {
  top: 40% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
}

body.game-active .table > .trick-area:not(.collecting) .played-card.seat-user {
  top: 60% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
}

body.game-active .table > .trick-area:not(.collecting) .played-card.seat-left {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 34% !important;
}

body.game-active .table > .trick-area:not(.collecting) .played-card.seat-right {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 66% !important;
}

/* Player names already appear at their seats; a second label causes collisions. */
body.game-active .table > .trick-area .played-card > span {
  display: none !important;
}

/* Portrait mobile: reserve the outer ring for players/stacks and the inner ring for cards. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table {
    --table-play-card-width: clamp(38px, 10cqw, 48px);
    --table-play-card-height: calc(var(--table-play-card-width) * 1.45);
  }

  body.game-active .table > .trick-area .played-card,
  body.game-active .table > .trick-area:not(.collecting) .played-card {
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-partner,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-partner {
    top: 42% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-user {
    top: 72% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-left {
    top: 57% !important;
    right: auto !important;
    bottom: auto !important;
    left: 29% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-right {
    top: 57% !important;
    right: auto !important;
    bottom: auto !important;
    left: 71% !important;
  }

  body.game-active .table > .trick-points,
  body.game-active .table > .roem-burst {
    z-index: 30 !important;
    width: clamp(118px, 31cqw, 150px) !important;
    min-width: 0 !important;
    max-width: 150px !important;
    min-height: 54px !important;
  }

  body.game-active .table > .trick-points {
    top: 50% !important;
  }

  body.game-active .table > .roem-burst,
  body.game-active .table > .roem-burst.burst-active {
    top: calc(50% + 62px) !important;
  }
}

/* Keep the completed trick centred until it disappears; legacy winner animations
   otherwise pull the cards toward the top/avatar during the points popup. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table > .trick-area.collecting .played-card.seat-partner,
  body.game-active .table > .trick-area.collecting.winner-user .played-card.seat-partner,
  body.game-active .table > .trick-area.collecting.winner-partner .played-card.seat-partner,
  body.game-active .table > .trick-area.collecting.winner-left .played-card.seat-partner,
  body.game-active .table > .trick-area.collecting.winner-right .played-card.seat-partner {
    top: 43% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area.collecting .played-card.seat-user,
  body.game-active .table > .trick-area.collecting.winner-user .played-card.seat-user,
  body.game-active .table > .trick-area.collecting.winner-partner .played-card.seat-user,
  body.game-active .table > .trick-area.collecting.winner-left .played-card.seat-user,
  body.game-active .table > .trick-area.collecting.winner-right .played-card.seat-user {
    top: 67% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area.collecting .played-card.seat-left,
  body.game-active .table > .trick-area.collecting.winner-user .played-card.seat-left,
  body.game-active .table > .trick-area.collecting.winner-partner .played-card.seat-left,
  body.game-active .table > .trick-area.collecting.winner-left .played-card.seat-left,
  body.game-active .table > .trick-area.collecting.winner-right .played-card.seat-left {
    top: 55% !important;
    right: auto !important;
    bottom: auto !important;
    left: 34% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area.collecting .played-card.seat-right,
  body.game-active .table > .trick-area.collecting.winner-user .played-card.seat-right,
  body.game-active .table > .trick-area.collecting.winner-partner .played-card.seat-right,
  body.game-active .table > .trick-area.collecting.winner-left .played-card.seat-right,
  body.game-active .table > .trick-area.collecting.winner-right .played-card.seat-right {
    top: 55% !important;
    right: auto !important;
    bottom: auto !important;
    left: 66% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Final mobile restoration: use the original positions that were proven on phones. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table > .trick-area .played-card.seat-partner,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-partner {
    top: 21% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-user {
    top: 62% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-left {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 28% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-right {
    top: 50% !important;
    right: 28% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translate(50%, -50%) !important;
  }
}

/* Final phone layout: mirror the browser's symmetric centre-based card orbit. */
@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table > .trick-area .played-card.seat-partner,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-partner {
    top: 43% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-user {
    top: 67% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-left {
    top: 55% !important;
    right: auto !important;
    bottom: auto !important;
    left: 34% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right,
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-right {
    top: 55% !important;
    right: auto !important;
    bottom: auto !important;
    left: 66% !important;
    transform: translate(-50%, -50%) !important;
  }
}