/* Flat-table seat pass: keep one 2D plane, but arrange each opponent's area naturally. */

/* Better beer mat surface: layered paper/cardboard, printed rim and subtle wear. */
.beer-mat {
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.5) 0 2%, transparent 2.5%),
    radial-gradient(circle at 65% 62%, rgba(95,67,37,.09) 0 1.2%, transparent 1.7%),
    radial-gradient(circle at 50% 48%, rgba(246,239,215,.98) 0 57%, transparent 57.5%),
    radial-gradient(circle at 50% 50%, #d9c69c 0 69%, #ad8d59 70% 77%, #64492e 78% 100%);
  box-shadow:
    0 7px 12px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 0 5px rgba(98,67,34,.08);
}

.beer-mat::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(77,50,25,.28);
  border-radius: 50%;
  pointer-events: none;
}

.beer-mat::after {
  inset: 12px;
  border-style: dotted;
  opacity: .8;
}

.beer-mat-label { display: none !important; }

/* Readable rim lettering: top and lower arcs stay upright. */
.beer-mat-name-ring.readable-rim-name {
  inset: 0;
  width: 100%;
  height: 100%;
}

.beer-mat-name-ring.readable-rim-name text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .48px;
  fill: #2a1d12;
}

.beer-mat-name-ring.readable-rim-name.two-arc-name text { font-size: 9px; }
.beer-mat-name-ring.readable-rim-name.long-name text { font-size: 8px; letter-spacing: .25px; }
.beer-mat-name-ring.readable-rim-name.very-long-name text { font-size: 7.2px; letter-spacing: .1px; }
.self-beer-mat .beer-mat-name-ring.readable-rim-name text { font-size: 10.5px; }
.self-beer-mat .beer-mat-name-ring.readable-rim-name.two-arc-name text { font-size: 9.5px; }
.opponent-beer-mat .beer-mat-name-ring.readable-rim-name text { font-size: 9.3px; }
.opponent-beer-mat .beer-mat-name-ring.readable-rim-name.two-arc-name text { font-size: 8.3px; }

/* Seat anchors. Coasters stay fixed and readable; cards move as a single cluster. */
.seat-left {
  top: 12%;
  left: 8%;
  transform: none;
}

.seat-right {
  top: 12%;
  right: 8%;
  transform: none;
}

.seat-top {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.opponent-beer-mat {
  width: 78px;
  height: 78px;
  margin-bottom: 12px;
  z-index: 6;
}

.seat-left .opponent-beer-mat {
  transform: translate(88px, -8px) rotate(-5deg);
}

.seat-right .opponent-beer-mat {
  transform: translate(-88px, -8px) rotate(5deg);
}

.seat-top .opponent-beer-mat {
  transform: translateY(-4px);
}

/* Hand + table cards rotate together around one shared seat-relative pivot. */
.opponent-card-cluster {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: max-content;
  transform-origin: 50% -18px;
}

/* Same displacement again: preserve the successful seating angle and push each
   opponent cluster one more equal step up and outward. */
.seat-left .opponent-card-cluster {
  transform: translate(-108px, -46px) rotate(-28deg) !important;
}

.seat-right .opponent-card-cluster {
  transform: translate(108px, -46px) rotate(28deg) !important;
}

.seat-top .opponent-card-cluster {
  transform: translateY(-6px) !important;
}

/* Children inherit the cluster angle; don't rotate them independently. */
.seat-left .opponent-hand-wrap,
.seat-left .face-row,
.seat-right .opponent-hand-wrap,
.seat-right .face-row {
  transform: none !important;
  margin: 0 !important;
}

/* Keep the count pill upright relative to the viewer. */
.seat-left .opponent-hand-count { transform: rotate(28deg) !important; }
.seat-right .opponent-hand-count { transform: rotate(-28deg) !important; }
.seat-top .opponent-hand-count { transform: none !important; }

/* Drinks feel like glasses sitting just outside the coaster edge. */
.opponent-beer-mat .beer-mat-drink {
  right: -13px;
  bottom: -2px;
  top: auto;
}

@media (max-height: 760px) and (min-width: 701px) {
  .seat-left, .seat-right { top: 10%; }
  .seat-left { left: 7%; }
  .seat-right { right: 7%; }
  .seat-left .opponent-beer-mat { transform: translate(74px, -5px) rotate(-5deg); }
  .seat-right .opponent-beer-mat { transform: translate(-74px, -5px) rotate(5deg); }
  .opponent-beer-mat { width: 70px; height: 70px; }
  .seat-left .opponent-card-cluster { transform: translate(-86px, -34px) rotate(-26deg) !important; }
  .seat-right .opponent-card-cluster { transform: translate(86px, -34px) rotate(26deg) !important; }
  .seat-left .opponent-hand-count { transform: rotate(26deg) !important; }
  .seat-right .opponent-hand-count { transform: rotate(-26deg) !important; }
}

@media (max-width: 700px) {
  .seat-left { top: 9%; left: 4%; }
  .seat-right { top: 9%; right: 4%; }
  .opponent-beer-mat { width: 58px; height: 58px; }
  .seat-left .opponent-beer-mat { transform: translate(42px, -3px) rotate(-4deg); }
  .seat-right .opponent-beer-mat { transform: translate(-42px, -3px) rotate(4deg); }
  .seat-top { top: 1%; }
  .seat-top .opponent-beer-mat { transform: translateY(-2px); }
  .opponent-card-cluster { gap: 9px; }
  .seat-left .opponent-card-cluster { transform: translate(-50px, -14px) rotate(-22deg) !important; }
  .seat-right .opponent-card-cluster { transform: translate(50px, -14px) rotate(22deg) !important; }
  .seat-top .opponent-card-cluster { transform: translateY(-4px) scale(.88) !important; }
  .seat-left .opponent-hand-count { transform: rotate(22deg) !important; }
  .seat-right .opponent-hand-count { transform: rotate(-22deg) !important; }
}