/* Shared table pieces: felt, shoe, cards, chips, bet bar. Pixel-scaled. */
:root {
  --card-w: calc(var(--px) * 14);
  --card-h: calc(var(--px) * 20);
  --chip: calc(var(--px) * 9);
}

.room { display: flex; flex-direction: column; min-height: 100vh; }
.room-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(var(--px) * 4) calc(var(--px) * 3) calc(var(--px) * 20); gap: calc(var(--px) * 4); }

.felt {
  position: relative;
  width: min(100%, calc(var(--px) * 200));
  background:
    radial-gradient(ellipse at 50% 40%, var(--felt-light), var(--felt) 70%);
  border: calc(var(--px) * 2) solid var(--gold);
  box-shadow: 0 0 0 calc(var(--px) * 2) #5a3a1c, 0 calc(var(--px) * 3) 0 calc(var(--px) * 2) #2a1a0c;
  border-radius: calc(var(--px) * 6);
  padding: calc(var(--px) * 5) calc(var(--px) * 4);
  perspective: 800px;
}
.felt-label {
  font-size: calc(var(--px) * 2);
  color: rgba(255, 255, 255, .55);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}

.shoe {
  position: absolute;
  top: calc(var(--px) * 4);
  right: calc(var(--px) * 4);
  width: var(--card-w);
  height: var(--card-h);
  background: #7a1a2b;
  border: var(--px) solid #0e0a0c;
  box-shadow: calc(var(--px) * -1) calc(var(--px) * 1) 0 #4a0f1a, calc(var(--px) * -2) calc(var(--px) * 2) 0 #0e0a0c;
}
.shoe .card { position: absolute; left: 0; }

.slot {
  display: flex;
  gap: calc(var(--px) * 2);
  min-height: var(--card-h);
  justify-content: center;
  margin: calc(var(--px) * 2) 0;
}
.seat-label { font-size: calc(var(--px) * 2); color: #fff; text-shadow: 1px 1px 0 #000; text-align: center; }
.seat-total { color: var(--gold-bright); }

/* Cards */
.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  flex: 0 0 auto;
}
.card .card-face, .card .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 2px solid #0e0a0c;
  border-radius: 2px;
}
.card .card-face {
  background: #fdf8ec;
  color: #0e0a0c;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #d9cfb8;
}
.card .card-face.red { color: #c62828; }
.card .corner { position: absolute; left: var(--px); top: var(--px); display: flex; flex-direction: column; line-height: 1; font-size: calc(var(--px) * 2.5); }
.card .corner b { font-weight: normal; }
.card .corner i { font-style: normal; font-size: calc(var(--px) * 2); }
.card .pip { position: absolute; right: calc(var(--px) * 1.5); bottom: calc(var(--px) * 1); font-size: calc(var(--px) * 6); line-height: 1; }
.card .card-back {
  transform: rotateY(180deg);
  background:
    repeating-conic-gradient(#7a1a2b 0% 25%, #a12538 0% 50%) 0 0 / calc(var(--px) * 3) calc(var(--px) * 3);
  box-shadow: inset 0 0 0 var(--px) #fdf8ec, inset 0 0 0 calc(var(--px) * 2) #7a1a2b;
}
.card.face-down { transform: rotateY(180deg); }

/* Chips */
.chip {
  display: inline-grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  border-radius: 50%;
  border: var(--px) dashed #fff;
  font-size: calc(var(--px) * 2);
  color: #fff;
  background: #e23b3b;
  box-shadow: 0 var(--px) 0 #000;
  user-select: none;
}
.chip-25 { background: #2a9a4a; }
.chip-100 { background: #222; }
.chip-500 { background: #7b2cbf; }
.chip-btn { background: none; border: 0; padding: 0; cursor: pointer; transition: transform 80ms; touch-action: manipulation; }
.chip-btn:hover:not(:disabled) .chip { transform: translateY(calc(var(--px) * -1)); }
.chip-btn:active:not(:disabled) .chip { transform: translateY(var(--px)); box-shadow: none; }
.chip-btn:disabled { opacity: .35; cursor: not-allowed; }
.chip-fly { position: fixed; z-index: 80; pointer-events: none; }

.pile { position: relative; width: var(--chip); height: var(--chip); }
.pile .chip { position: absolute; left: 0; top: calc(var(--i, 0) * var(--px) * -0.8); }
.bet-circle {
  width: calc(var(--chip) * 1.6);
  height: calc(var(--chip) * 1.6);
  margin: 0 auto;
  border: var(--px) dashed rgba(255, 255, 255, .5);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.bet-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  flex-wrap: wrap;
  justify-content: center;
}
.bet-bar .bet-chips { display: flex; gap: calc(var(--px) * 2); }
.bet-bar .bet-readout { font-size: calc(var(--px) * 2.5); }
.bet-bar .bet-amt { color: var(--gold-bright); font-weight: normal; }

.actions { display: flex; gap: calc(var(--px) * 3); flex-wrap: wrap; justify-content: center; }
.actions .btn { min-width: calc(var(--px) * 28); text-align: center; }
.key { opacity: .6; font-size: .8em; }