/*
 * Canonical, approved table components.
 *
 * This file deliberately loads after the client layout styles. Keep the
 * approved card backs, player boxes and chips here so later layout work cannot
 * silently replace their visual design.
 */

/* Approved player box, variant 1: recessed upper surface, raised lower face. */
.player-box {
  --box-shape: polygon(
    7% 0,
    93% 0,
    97% 3%,
    100% 14%,
    96% 94%,
    93% 100%,
    7% 100%,
    4% 94%,
    0 14%,
    3% 3%
  );
  background: linear-gradient(180deg, #2a2d2b 0%, #222422 100%);
  filter: drop-shadow(0 .28cqw .38cqw #000b);
}

.player-box-face {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}

.player-box-face::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: .08cqw;
  clip-path: var(--box-shape);
  background: #19191a;
  box-shadow:
    inset 0 .11cqw .12cqw #ffffff08,
    inset 0 -.18cqw .22cqw #000b;
  pointer-events: none;
}

.player-box-face::after {
  --box-ridge: #2f2f2e;
  --box-divider: #212322;
  --box-bottom: #202020;
  content: "";
  position: absolute;
  z-index: 0;
  left: .08cqw;
  right: .08cqw;
  top: calc(50% - .1cqw);
  bottom: .08cqw;
  clip-path: polygon(1% 0, 99% 0, 96% 90%, 93% 100%, 7% 100%, 4% 90%);
  background: linear-gradient(
    180deg,
    var(--box-ridge) 0 1px,
    var(--box-divider) 1px 3px,
    var(--box-bottom) 3px 100%
  );
  box-shadow: inset 0 -.09cqw .12cqw #0007;
  pointer-events: none;
}

.player-box-upper,
.player-box-stack {
  position: relative;
  z-index: 1;
}

.player-box-upper {
  color: #b9bcb9;
  font-weight: 800;
  text-shadow: 0 .08cqw .1cqw #000;
}

.player-box-stack {
  color: #568cac;
  text-shadow: 0 .08cqw .1cqw #000;
}

.quiz2-seat.is-acting .player-box,
.quiz2-seat.is-folded .player-box {
  background: linear-gradient(180deg, #2a2d2b 0%, #222422 100%);
  filter: drop-shadow(0 .28cqw .38cqw #000b);
}

.quiz2-seat.is-acting .player-box-face,
.quiz2-seat.is-folded .player-box-face {
  background: transparent;
}

.quiz2-seat.is-acting .player-box-upper {
  color: #d7d7d2;
}

.quiz2-seat.is-folded .player-box-face::before {
  background: #1d1e1d;
}

.quiz2-seat.is-folded .player-box-face::after {
  --box-ridge: #343534;
  --box-divider: #272927;
  --box-bottom: #252625;
}

.quiz2-seat.is-folded .player-box-upper {
  color: #aeb1ae;
}

.quiz2-seat.is-folded .player-box-stack {
  color: #507b94;
}

/* Approved chips, variant 1: full twelve-region outer belt and 55% centre. */
.wager-chips {
  --chip-width: 1.875cqw;
  --chip-height: 1.5625cqw;
  height: 3.15cqw;
  align-items: flex-end;
  gap: .08cqw;
  overflow: visible;
  padding-bottom: .38cqw;
}

.wager-chip-stack {
  position: relative;
  flex: 0 0 var(--chip-width);
  width: var(--chip-width);
  height: calc(var(--chip-height) + var(--stack-lift) + .390625cqw);
}

.wager-chips .chip {
  --chip-top: #272827;
  --chip-highlight: #2e302d;
  --chip-side: #0e0d0f;
  --chip-notch: #d3d2ce;
  --chip-belt: color-mix(in srgb, var(--chip-top), var(--chip-side) 34%);
  position: absolute;
  isolation: isolate;
  left: 0;
  bottom: var(--chip-offset);
  width: var(--chip-width);
  height: var(--chip-height);
  margin-left: 0;
  border: .078125cqw solid color-mix(in srgb, var(--chip-side), white 18%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 34% 18%,
      color-mix(in srgb, var(--chip-highlight), transparent 18%) 0 9%,
      transparent 31%
    ),
    radial-gradient(ellipse at center, var(--chip-top) 0 55%, transparent 56%),
    repeating-conic-gradient(
      from -3deg,
      var(--chip-notch) 0 30deg,
      var(--chip-belt) 30deg 60deg
    );
  box-shadow:
    inset 0 .078125cqw .078125cqw #ffffff2b,
    inset 0 -.078125cqw .15625cqw #0008,
    0 .078125cqw 0 #0009;
}

.wager-chips .chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.078125cqw;
  right: -.078125cqw;
  top: calc(100% - .078125cqw);
  height: .390625cqw;
  border: .078125cqw solid color-mix(in srgb, var(--chip-side), white 12%);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--chip-highlight), transparent 44%) 0 .078125cqw,
      transparent .078125cqw .234375cqw
    ),
    linear-gradient(
      90deg,
      var(--chip-side) 0 14%,
      var(--chip-notch) 14% 20%,
      var(--chip-side) 20% 43%,
      var(--chip-notch) 43% 49%,
      var(--chip-side) 49% 77%,
      var(--chip-notch) 77% 83%,
      var(--chip-side) 83% 100%
    );
  box-shadow:
    inset 0 -.078125cqw .078125cqw #0008,
    0 .078125cqw .15625cqw #0008;
}

.wager-chips .chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 .078125cqw #ffffff12,
    inset 0 -.078125cqw .078125cqw #0006;
}

.wager-chips .chip-yellow {
  --chip-top: #ecba22;
  --chip-highlight: #f6be0b;
  --chip-side: #bc8809;
}

.wager-chips .chip-purple {
  --chip-top: #751ad2;
  --chip-highlight: #7a24d4;
  --chip-side: #462670;
}

.wager-chips .chip-black {
  --chip-top: #272827;
  --chip-highlight: #2e302d;
  --chip-side: #0e0d0f;
}

.wager-chips .chip-green {
  --chip-top: #399e28;
  --chip-highlight: #3ca02b;
  --chip-side: #23541e;
}

.wager-chips .chip-red {
  --chip-top: #ca2225;
  --chip-highlight: #d82627;
  --chip-side: #791f22;
}

.wager-chips .chip-white {
  --chip-top: #c7c8c5;
  --chip-highlight: #efefeb;
  --chip-side: #747773;
}