.felt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.6vw, 28px);
  padding: clamp(20px, 3vw, 34px) clamp(20px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--panel);
}

/* ---------- running multiplier ---------- */

.run { text-align: center; }
.run .label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--faint); }
.run b {
  display: block;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: color .2s var(--ease);
}
.run small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.run b.dead   { color: var(--red); }
.run b.banked { color: var(--green); }

/* ---------- cards ---------- */

.cards { display: flex; align-items: flex-start; gap: clamp(14px, 2.4vw, 28px); }
.slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slot-label { font-size: 11.5px; font-weight: 600; color: var(--faint); }

.card-face {
  position: relative;
  width: clamp(92px, 13vw, 132px);
  aspect-ratio: 5 / 7;
  border-radius: var(--r-lg);
  background: #F5F2EA;
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), box-shadow .2s var(--ease);
  transform-style: preserve-3d;
}
.card-face .pip {
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: #16181D;
}
.card-face .corner {
  position: absolute;
  font-size: clamp(12px, 1.7vw, 16px);
  font-weight: 700;
  line-height: 1;
  color: #16181D;
}
.card-face .corner.tl { top: 8px; left: 9px; }
.card-face .corner.br { bottom: 8px; right: 9px; transform: rotate(180deg); }

.card-face.red .pip, .card-face.red .corner { color: #C3243B; }

/* face down */
.card-face.back {
  background: repeating-linear-gradient(45deg, #2A2A2E 0 6px, #1F1F23 6px 12px);
  box-shadow: inset 0 0 0 3px var(--panel-3);
}
.card-face.back .pip, .card-face.back .corner { visibility: hidden; }

.card-face.flip { animation: flip .38s var(--ease); }
@keyframes flip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg) scale(1.04); }
  100% { transform: rotateY(0deg); }
}

.card-face.win  { box-shadow: 0 0 0 3px var(--green); }
.card-face.lose { box-shadow: 0 0 0 3px var(--red); }

/* ---------- call buttons ---------- */

.calls { display: flex; gap: 10px; width: 100%; max-width: 400px; }

.callbtn {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  min-height: 72px;
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--text);
}
.callbtn span { font-size: 13.5px; font-weight: 600; }
.callbtn b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.callbtn.hi:hover:not([disabled]) { background: var(--green); color: #04160B; }
.callbtn.hi:hover:not([disabled]) b { color: #04160B; }
.callbtn.lo:hover:not([disabled]) { background: var(--red); color: #fff; }
.callbtn.lo:hover:not([disabled]) b { color: #fff; }

#deal, #bank { width: 100%; }