/* ============================================================
   RED ACE CASINO — Game-specific styles
   ============================================================ */

/* ---------- TEXAS HOLD'EM (vs bots) ---------- */
.ph-table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 16px;
  min-height: 420px;
}

/* Bots row */
.ph-bots {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.ph-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 8px;
  min-width: 96px;
  border-radius: 14px;
  background: rgba(8,5,10,0.45);
  border: 1px solid rgba(201,160,70,0.18);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s, opacity 0.3s;
}
.ph-seat.acting {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(201,160,70,0.35), 0 0 24px var(--gold-glow);
  transform: translateY(-2px);
}
.ph-seat.folded { opacity: 0.4; }
.ph-seat.allin { border-color: rgba(201,160,70,0.55); }

.ph-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft));
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
}
.ph-seat.hero .ph-avatar {
  background: linear-gradient(180deg, var(--red-bright), var(--red-rich));
  border-color: var(--gold-bright);
}

.ph-seat-name {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-stack {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: var(--gold-bright);
}
.ph-bet {
  min-height: 15px;
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.ph-bet.chip-in { animation: chipDrop 0.5s cubic-bezier(.2,.8,.2,1); }

.ph-seat.dealer::after {
  content: 'D';
  position: absolute;
  top: -8px;
  right: -5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-bright);
  color: var(--red-dark);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 3;
}

/* Action bubble */
.ph-action {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 6;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(8,5,10,0.92);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.ph-action.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ph-action.fold { border-color: var(--red); color: var(--red-bright); }
.ph-action.win {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--red-dark);
  font-weight: 700;
}

/* Cards in seats */
.ph-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 84px;
  margin-top: 4px;
}
.ph-cards .card-slot.ph-card {
  width: 56px;
  height: 80px;
  cursor: default;
}
.ph-cards .card-slot.ph-card .card-corner .rank { font-size: 0.72rem; }
.ph-cards .card-slot.ph-card .card-corner .suit-small { font-size: 0.62rem; }
.ph-cards .card-slot.ph-card .card-center { font-size: 1.7rem; }
.ph-cards .card-slot.ph-card .card-face.back::after { font-size: 1.8rem; }
.ph-card-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  align-self: center;
}

/* Board */
.ph-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 6px;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(20,60,40,0.35) 0%, transparent 70%);
  border: 1px dashed rgba(201,160,70,0.15);
}
.ph-community {
  display: flex;
  gap: 6px;
  justify-content: center;
  min-height: 80px;
  align-items: center;
}
.ph-community .card-slot.ph-card {
  width: 52px;
  height: 74px;
  cursor: default;
}
.ph-community .card-slot.ph-card .card-corner .rank { font-size: 0.66rem; }
.ph-community .card-slot.ph-card .card-corner .suit-small { font-size: 0.56rem; }
.ph-community .card-slot.ph-card .card-center { font-size: 1.5rem; }
.ph-community .card-slot.ph-card .card-face.back::after { font-size: 1.6rem; }
.ph-community .card-slot.ph-card.empty .card-inner {
  border: 1px dashed rgba(201,160,70,0.3);
  border-radius: 8px;
}

.ph-pot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 100px;
  background: rgba(8,5,10,0.6);
  border: 1px solid rgba(201,160,70,0.35);
}
.ph-pot.pulse { animation: potPulse 0.5s; }
.ph-pot-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--text-muted);
}
.ph-pot-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--gold-bright);
}

.ph-status {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-align: center;
  min-height: 20px;
}

/* Hero seat */
.ph-seat.hero {
  min-width: 150px;
  background: linear-gradient(180deg, rgba(34,21,32,0.7), rgba(8,5,10,0.55));
  border-color: rgba(201,160,70,0.4);
}
.ph-hand-label {
  min-height: 15px;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

/* Winner banner */
.ph-winner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  max-width: 86%;
  padding: 14px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,5,10,0.94), rgba(13,8,16,0.9));
  border: 2px solid var(--gold-bright);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 40px var(--gold-glow);
  color: var(--gold-bright);
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.04em;
  animation: winnerPop 0.45s cubic-bezier(.2,.8,.2,1);
}

/* Raise panel + action bar */
.ph-actions {
  flex-direction: row !important;
  gap: 6px;
}
.ph-actions .btn {
  flex: 1 1 0;
  padding: 10px 6px;
}
.ph-raise-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(8,5,10,0.85);
  border: 1px solid rgba(201,160,70,0.3);
}
.ph-raise-panel[hidden] { display: none; }
.ph-raise-amt {
  flex: 0 0 auto;
  min-width: 76px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--gold-bright);
  padding: 8px 6px;
}
.ph-raise-toggle { margin-top: 8px; }

.ph-deal-btn { display: none; }
.ph-deal-btn:not([hidden]) { display: inline-flex; }

@keyframes potPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes winnerPop {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.hand-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 165px;
  align-items: center;
}

.card-slot {
  position: relative;
  width: 110px;
  height: 154px;
  perspective: 800px;
  cursor: pointer;
}

.card-slot.disabled { cursor: default; }

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.4),
    0 12px 36px rgba(0,0,0,0.4);
}

.card-slot.dealt .card-inner { transform: rotateY(0deg); }
.card-slot.face-down .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
}

.card-face.front {
  background: linear-gradient(180deg, #ffffff 0%, #f7f3eb 100%);
  border: 1px solid rgba(0,0,0,0.15);
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.card-face.back {
  background:
    repeating-linear-gradient(45deg, #8b0a1f 0 8px, #5a0a14 8px 16px);
  transform: rotateY(180deg);
  border: 5px solid var(--gold);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
}
.card-face.back::after {
  content: 'A';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  color: var(--gold);
  font-style: italic;
}

.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1;
}
.card-corner .rank { font-size: 1.2rem; }
.card-corner .suit-small { font-size: 1rem; }

.card-center {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  line-height: 1;
}

.card.red   { color: var(--suit-red); }
.card.black { color: var(--suit-black); }



/* ---------- DICE / JACKPOT ---------- */
.dice-zone {
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 30px 0 10px;
  min-height: 200px;
}

.dice-tray {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  padding: 28px 50px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,5,10,0.5), rgba(11,58,38,0.3));
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(201,160,70,0.2);
}

.die {
  width: 76px;
  height: 76px;
  background:
    linear-gradient(160deg, #fffdf6 0%, #f6ede0 50%, #e9dcb8 100%);
  border-radius: 14px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12px;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.15),
    inset 0 3px 4px rgba(255,255,255,0.6),
    0 10px 25px rgba(0,0,0,0.5);
  transition: transform 0.4s ease;
}
.die.red { background: linear-gradient(160deg, #ff4a5e, #b8122e 70%, #5a0a14); }
.die.red .pip { background: #fff4e3; }

.pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--suit-black);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
  align-self: center;
  justify-self: center;
}

/* Pip positions via grid placement */
.pip.c  { grid-area: 2 / 2; }
.pip.tc { grid-area: 1 / 2; }
.pip.bc { grid-area: 3 / 2; }
.pip.tl { grid-area: 1 / 1; }
.pip.tr { grid-area: 1 / 3; }
.pip.bl { grid-area: 3 / 1; }
.pip.br { grid-area: 3 / 3; }
.pip.ml { grid-area: 2 / 1; }
.pip.mr { grid-area: 2 / 3; }

.die.rolling {
  animation: shake 0.5s ease;
}
.die.settled { animation: chipPop 0.4s ease; }

.dice-total {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  color: var(--gold-bright);
  text-shadow: 0 0 20px var(--gold-glow);
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 8px;
}
.dice-label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-top: -4px;
}

/* Bet table layout */
.bet-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.bet-cell {
  position: relative;
  padding: 14px 12px;
  background: rgba(8,5,10,0.55);
  border: 1px solid rgba(201,160,70,0.25);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.bet-cell:hover {
  border-color: var(--gold);
  background: rgba(201,160,70,0.08);
}
.bet-cell.active {
  background: linear-gradient(180deg, rgba(228,27,58,0.4), rgba(184,18,46,0.2));
  border-color: var(--gold-bright);
  box-shadow: 0 0 18px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.1);
}

.bet-cell-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bet-cell-odd {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  color: var(--gold);
  font-style: italic;
  margin-top: 2px;
}

.bet-chip-stack {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column-reverse;
}

.bet-stack {
  font-family: 'Playfair Display', serif;
  font-size: 0.78rem;
  color: var(--gold-bright);
  font-weight: 700;
  margin-top: 6px;
  min-height: 1em;
  letter-spacing: 0.02em;
}

.chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold-dark) 70%);
  border: 3px dashed var(--red-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  position: relative;
  margin-top: -10px;
}
.chip.red { background: radial-gradient(circle at 30% 30%, #ff5a72, var(--red-dark) 75%); border-color: var(--gold-dark); }
.chip.green { background: radial-gradient(circle at 30% 30%, #c0e87c, #4d8a2e 75%); border-color: var(--gold-dark); }
.chip.black { background: radial-gradient(circle at 30% 30%, #8a8a92, #1a1a20 75%); border-color: var(--gold-dark); }
.chip.blue  { background: radial-gradient(circle at 30% 30%, #6ec0ff, #1a4d8a 75%); border-color: var(--gold-dark); }
.chip::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.55rem;
  color: var(--gold-bright);
  text-align: center;
  line-height: 1;
}
.chip[data-val="5"]::after  { content: '5'; }
.chip[data-val="25"]::after { content: '25'; }
.chip[data-val="100"]::after { content: '100'; }
.chip[data-val="500"]::after { content: '500'; }

.dice-history {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.dice-history .roll-chip {
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(201,160,70,0.2);
  font-family: 'Playfair Display', serif;
  color: var(--text);
  font-weight: 600;
}

.last-win-banner {
  text-align: center;
  margin-top: 14px;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--gold-bright);
  min-height: 26px;
  letter-spacing: 0.06em;
}

/* ---------- BLACKJACK ---------- */
.bj-table {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 24px 24px;
  min-height: 540px;
}
.bj-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bj-area-dealer { padding-top: 6px; }
.bj-area-player { padding-bottom: 8px; }
.bj-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-style: italic;
}
.bj-label span {
  color: var(--gold-bright);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-style: normal;
  font-size: 1.4rem;
  margin-left: 12px;
}
.bj-message {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--gold-bright);
  text-shadow: 0 0 16px var(--gold-glow);
  padding: 14px 18px;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(201,160,70,0.25);
  border-bottom: 1px solid rgba(201,160,70,0.25);
  background: linear-gradient(180deg, rgba(34,21,32,0.55), rgba(13,8,16,0.55));
  border-radius: 4px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bj-message.win   { color: var(--gold-bright); }
.bj-message.lose  { color: var(--red-bright); text-shadow: 0 0 16px var(--red-glow); }
.bj-message.push  { color: var(--text-muted); text-shadow: none; }
.bj-message.winbj { animation: pulseGlow 2.5s ease-in-out infinite; color: var(--gold-bright); }
.bj-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* RE7 mode — target callout sits between the two hands. */
.bj-target {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(34,21,32,0.65), rgba(13,8,16,0.65));
  border: 1px solid rgba(201,160,70,0.25);
  border-radius: 100px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  align-self: center;
  margin: 4px auto 0;
}
.bj-target-label {
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.35em;
  color: var(--gold);
  font-style: normal;
}
.bj-target-value {
  font-family: 'Playfair Display', serif;
  color: var(--gold-bright);
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  text-shadow: 0 0 18px var(--gold-glow);
}
.bj-target-sub {
  font-style: italic;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
@media (max-width: 720px) { .bj-target-sub { display: none; } }

/* The face-down card glows softly so you read it as "mine alone" */
.card-slot.face-down .card-face.back {
  background:
    repeating-linear-gradient(45deg, #8b0a1f 0 8px, #5a0a14 8px 16px);
  box-shadow: 0 0 18px rgba(228, 27, 58, 0.35);
  animation: hiddenCardGlow  3.6s ease-in-out infinite;
}
@keyframes hiddenCardGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(228, 27, 58, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(228, 27, 58, 0.55); }
}

/* Placeholder cards for coming-soon games */
.placeholder-overview {
  text-align: center;
  padding: 60px 24px;
}
.placeholder-overview .glyph {
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.placeholder-overview h2 { margin-bottom: 12px; color: var(--gold); }
.placeholder-overview p { color: var(--text-muted); max-width: 540px; margin: 0 auto 30px; }

/* ---------- SLOTS ---------- */
.slot-cabinet {
  background:
    linear-gradient(180deg, #1c0710 0%, #2c0a14 50%, #180510 100%);
  border-radius: 18px;
  padding: 22px 18px 24px;
  position: relative;
  border: 1px solid rgba(201,160,70,0.4);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.05);
}

.slot-marquee {
  text-align: center;
  margin-bottom: 14px;
}
.slot-marquee h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.15em;
  text-shadow: 0 0 24px var(--gold-glow);
}
.slot-marquee small {
  display: block;
  color: var(--red-bright);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-top: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

.slot-window {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #0a0508 0%, #170a0e 60%, #0a0508 100%);
  border-radius: 12px;
  padding: 4px;
  border: 4px solid var(--gold);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.9),
    inset 0 0 60px rgba(228,27,58,0.15),
    0 0 30px var(--red-glow);
  margin: 0 auto;
  max-width: 480px;
}

.reel {
  position: relative;
  width: 130px;
  height: 312px;        /* 3 cells of 102 + small overlap */
  flex: 0 0 130px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a0a12 0%, #0a0508 100%);
  border-radius: 6px;
  border: 2px solid var(--gold-dark);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,160,70,0.4);
  transition: box-shadow 0.4s ease;
}

.reel.win {
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.7),
    0 0 24px var(--gold-bright),
    0 0 60px var(--red-glow);
  animation: pulseGlow 1.5s ease-in-out 3;
}

.reel-strip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.reel-cell {
  flex: 0 0 102px;
  height: 102px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%, rgba(0,0,0,0.15));
  border-top: 1px solid rgba(201,160,70,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  position: relative;
}
.reel-cell::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  pointer-events: none;
}

/* Single, centred payline through the middle row. Drawn at top: 50%
   of the reel (which is 312px tall → y=156px, ~the centre of the
   middle 102px cell). */
.payline-marker {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,209,115,0.6) 20%, rgba(243,209,115,0.6) 80%, transparent 100%);
  transform: translateY(-50%);
  z-index: 24;
  pointer-events: none;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.4);
}
.payline-marker::before, .payline-marker::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 14px;
  background: radial-gradient(circle at center, var(--gold-bright), transparent 70%);
  z-index: 25;
  pointer-events: none;
}
.payline-marker::before { left: -2px; }
.payline-marker::after  { right: -2px; }

/* Symbol renderers for the slot tiles & paytable */
.sym {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.sym.cherry  { font-size: 3.6rem; filter: drop-shadow(0 0 12px rgba(228,27,58,0.7)); }
.sym.lemon   { font-size: 3.6rem; filter: drop-shadow(0 0 12px rgba(241,196,15,0.7)); }
.sym.plum    { font-size: 3.6rem; filter: drop-shadow(0 0 12px rgba(143,63,141,0.7)); }
.sym.bell    { font-size: 3.2rem; color: var(--gold-bright); filter: drop-shadow(0 0 14px var(--gold-glow)); }
.sym.bar {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: var(--red-dark);
  border-radius: 6px;
  border: 2px solid var(--gold-dark);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.sym.star    { font-size: 4rem; color: var(--gold-bright); filter: drop-shadow(0 0 16px var(--gold-glow)); }
.sym.diamond { font-size: 4rem; color: #6ec0ff; filter: drop-shadow(0 0 14px rgba(110,192,255,0.8)); text-shadow: 0 0 24px rgba(110,192,255,0.5); }
.sym.crown   { font-size: 4rem; color: var(--gold-bright); filter: drop-shadow(0 0 18px var(--gold-glow)); }
.sym.wild {
  font-size: 2rem;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at center, rgba(243,209,115,0.3), transparent 70%);
  color: var(--gold-bright);
  border: 2px dashed var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--gold-glow), inset 0 0 12px rgba(243,209,115,0.2);
  display: none; /* wild removed in v3 simplification */
}
.sym.seven {
  font-size: 4.6rem;
  font-weight: 900;
  font-style: italic;
  font-family: 'Playfair Display', serif;
  background: linear-gradient(180deg, #ff5577 0%, #c41e3a 60%, #5a0a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,85,119,0.7));
  text-shadow: 0 4px 8px rgba(0,0,0,0.5);
}


/* Pull-lever style spin button */
.slots-lever {
  position: relative;
  background: linear-gradient(180deg, var(--red-bright), var(--red-rich) 60%, var(--red) 100%);
  color: var(--text-onred);
  border: 2px solid var(--gold);
  padding: 11px 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
  font-weight: 700;
}
.slots-lever .lever-text {
  letter-spacing: 0.3em;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
}
.slots-lever .lever-ball {
  position: absolute;
  top: -8px; right: -8px;
  width: 18px; height: 18px;
  background: radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold-dark) 70%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--red-dark), 0 2px 4px rgba(0,0,0,0.5);
}
.slots-lever:hover { transform: translateY(-2px); }
.slots-lever:active { transform: translateY(1px) rotate(-2deg); }

/* Responsive */
@media (max-width: 720px) {
  .slot-window { padding: 2px; gap: 4px; }
  .reel { width: 92px; height: 222px; flex: 0 0 92px; }
  .reel-cell { flex-basis: 74px; height: 74px; }
  .sym.cherry, .sym.star, .sym.diamond, .sym.crown { font-size: 2.6rem; }
  .sym.seven { font-size: 3rem; }
}


/* Responsive dice */
@media (max-width: 600px) {
  .die { width: 60px; height: 60px; padding: 9px; }
  .pip { width: 10px; height: 10px; }
  .dice-tray { gap: 18px; padding: 20px 28px; }
  .bet-table { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) and (min-width: 601px) {
  .bet-table { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ANIMATION RE-FONTE (v5) — global micro-interactions
   ============================================================ */

/* Card-deal slide-in (used by blackjack-hit, poker-deal, etc.) */
@keyframes dealSlide {
  0%   { transform: translate(-30px, -120px) scale(0.7) rotate(-8deg); opacity: 0; }
  60%  { transform: translate(4px, 6px)        scale(1.04) rotate(1deg); opacity: 1; }
  100% { transform: translate(0, 0)            scale(1)    rotate(0);    opacity: 1; }
}
.card-slot.dealing { animation: dealSlide 0.55s cubic-bezier(.2,.8,.2,1) both; }

/* Card-flip reveal (face-down -> face-up). Triggers on Wins and on
   dealer-reveal where a hidden card becomes visible. */
@keyframes flipReveal {
  0%   { transform: rotateY(180deg) scale(1); }
  45%  { transform: rotateY(90deg)  scale(1.08); box-shadow: 0 0 28px var(--gold-glow); }
  100% { transform: rotateY(0deg)   scale(1); }
}
.card-slot.flipping .card-inner { animation: flipReveal 0.65s cubic-bezier(.4,.2,.2,1) both; }

/* Dice physics — a fuller tumble that supersedes the static shake.
   The roulette-jackpot game adds .tumbling before settling. */
@keyframes dieTumble {
  0%   { transform: translateY(-180px) rotate(-90deg) scale(0.7); opacity: 0; }
  35%  { transform: translateY(30px)   rotate(220deg) scale(1.05); opacity: 1; }
  60%  { transform: translateY(-12px)  rotate(330deg) scale(0.96); }
  85%  { transform: translateY(4px)    rotate(355deg) scale(1.02); }
  100% { transform: translateY(0)      rotate(360deg) scale(1); }
}
.die.tumbling { animation: dieTumble 0.85s cubic-bezier(.3,1.4,.4,1) both; }
.die.settled  { animation: chipPop 0.4s ease both; }

/* Chip drop — a chip placed on a bet-cell falls + bounces once. */
@keyframes chipDrop {
  0%   { transform: translateY(-160px) rotate(-25deg) scale(0.6); opacity: 0; }
  60%  { transform: translateY(6px)    rotate(8deg)   scale(1.1);  opacity: 1; }
  80%  { transform: translateY(-4px)   rotate(-3deg)  scale(0.96); }
  100% { transform: translateY(0)      rotate(0)      scale(1); }
}
.chip.dropping { animation: chipDrop 0.55s cubic-bezier(.3,1.5,.4,1) both; }

/* Slots lever — pulled when SPIN starts, springs back when idle. */
@keyframes leverPull {
  0%   { transform: translateY(0)   rotate(0);  }
  28%  { transform: translateY(14px) rotate(8deg); }
  55%  { transform: translateY(-2px) rotate(-2deg); }
  100% { transform: translateY(0)   rotate(0);  }
}
.slots-lever.pulled { animation: leverPull 0.6s cubic-bezier(.4,0,.2,1) both; }

/* Banner shimmer — gold scan line that sweeps across each lobby card. */
@keyframes bannerShimmer {
  0%   { transform: translateX(-110%); opacity: 0; }
  20%  { opacity: 0.55; }
  80%  { opacity: 0.55; }
  100% { transform: translateX(110%);  opacity: 0; }
}
.card-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(243, 209, 115, 0) 28%,
    rgba(243, 209, 115, 0.55) 50%,
    rgba(243, 209, 115, 0) 72%,
    transparent 100%);
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.card-banner:hover::after { animation: bannerShimmer 1.4s ease both; }

/* Tag pulses — the .tag.new bobs, .tag.hot shimmers red. */
@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 0  0   rgba(243, 209, 115, 0.6);    transform: scale(1); }
  50%      { box-shadow: 0 0 0  6px rgba(243, 209, 115, 0);      transform: scale(1.04); }
}
.tag.new { animation: tagPulse 2.4s ease-in-out infinite; }
@keyframes tagHot {
  0%, 100% { box-shadow: 0 0 0  0   rgba(228,  27,  58, 0.55); }
  50%      { box-shadow: 0 0 0  7px rgba(228,  27,  58, 0); }
}
.tag.hot  { animation: tagHot 2.0s ease-in-out infinite; }

/* Stronger lobby-card hover (lift + tilt + glow + inner ring). */
@keyframes cardLift {
  from { transform: translateY(0)   rotate(0); }
  to   { transform: translateY(-10px) rotate(-0.4deg); }
}
.card:hover { animation: cardLift 0.5s cubic-bezier(.2,.7,.2,1) forwards; }

/* Generic page-load fade-in for hero + section heads. */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero { animation: heroFadeIn 0.9s cubic-bezier(.2,.8,.2,1) both; }

/* Generic fade-in for any UI block tagged with .appear */
.appear { animation: heroFadeIn 0.6s cubic-bezier(.2,.8,.2,1) both; }

/* Last-win banner gets a sweep when its text changes. */
@keyframes bannerPulse {
  0%   { box-shadow: 0 0 0  0   rgba(243, 209, 115, 0.0); transform: scale(1); }
  35%  { box-shadow: 0 0 0  22px rgba(243, 209, 115, 0.0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0  0   rgba(243, 209, 115, 0.0); transform: scale(1); }
}
.last-win-banner.pulsing { animation: bannerPulse 1.6s ease-out 1; }

/* BJ message glow upgrades on win. */
@keyframes messageWinPop {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.08); filter: brightness(1.5); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.bj-message.win.pulsing { animation: messageWinPop 0.8s ease both; }

/* Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {
  .card-slot.dealing, .card-slot.flipping .card-inner,
  .die.tumbling, .chip.dropping, .slots-lever.pulled,
  .card:hover, .hero, .appear, .tag.new, .tag.hot,
  .last-win-banner.pulsing, .bj-message.win.pulsing,
  .card-banner:hover::after {
    animation: none !important;
  }
}

/* ---------- ROULETTE ---------- */
.roulette-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 16px 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .roulette-strip { grid-template-columns: 1fr; }
}

/* Wheel — 280 px diameter, 37 sectors via conic-gradient. The wheel
   itself rotates on .roulette-wheel, the ball on .roulette-ball (with
   the parent track counter-rotating). On spin, JS sets the
   transform: rotate(Ndeg) and the CSS transition decelerates. */
.wheel-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .wheel-stage { width: 220px; height: 220px; }
}
.wheel-pointer {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid var(--gold-bright);
  z-index: 5;
  filter: drop-shadow(0 0 8px var(--gold-glow));
}
.roulette-wheel {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    conic-gradient(
      #0b3a26 0deg 9.729deg,                              /* 0 green */
      #c41e3a 9.729deg 19.459deg,                         /* 32 red */
      #0a0a0a 19.459deg 29.188deg,                        /* 15 black */
      #c41e3a 29.188deg 38.918deg,                        /* 19 red */
      #0a0a0a 38.918deg 48.647deg,                        /* 4 black */
      #c41e3a 48.647deg 58.376deg,                        /* 21 red */
      #0a0a0a 58.376deg 68.105deg,                        /* 2 black */
      #c41e3a 68.105deg 77.835deg,                        /* 25 red */
      #0a0a0a 77.835deg 87.564deg,                        /* 17 black */
      #c41e3a 87.564deg 97.293deg,                        /* 34 red */
      #0a0a0a 97.293deg 107.027deg,                       /* 6 black */
      #c41e3a 107.027deg 116.756deg,                      /* 27 red */
      #0a0a0a 116.756deg 126.486deg,                      /* 13 black */
      #c41e3a 126.486deg 136.216deg,                      /* 36 red */
      #0a0a0a 136.216deg 145.945deg,                      /* 11 black */
      #c41e3a 145.945deg 155.675deg,                      /* 30 red */
      #0a0a0a 155.675deg 165.405deg,                      /* 8 black */
      #c41e3a 165.405deg 175.135deg,                      /* 23 red */
      #0a0a0a 175.135deg 184.864deg,                      /* 10 black */
      #c41e3a 184.864deg 194.594deg,                      /* 5 red */
      #0a0a0a 194.594deg 204.324deg,                      /* 24 black */
      #c41e3a 204.324deg 214.054deg,                      /* 16 red */
      #0a0a0a 214.054deg 223.783deg,                      /* 33 black */
      #c41e3a 223.783deg 233.513deg,                      /* 1 red */
      #0a0a0a 233.513deg 243.243deg,                      /* 20 black */
      #c41e3a 243.243deg 252.972deg,                      /* 14 red */
      #0a0a0a 252.972deg 262.702deg,                      /* 31 black */
      #c41e3a 262.702deg 272.432deg,                      /* 9 red */
      #0a0a0a 272.432deg 282.162deg,                      /* 22 black */
      #c41e3a 282.162deg 291.892deg,                      /* 18 red */
      #0a0a0a 291.892deg 301.622deg,                      /* 29 black */
      #c41e3a 301.622deg 311.351deg,                      /* 7 red */
      #0a0a0a 311.351deg 321.081deg,                      /* 28 black */
      #c41e3a 321.081deg 330.811deg,                      /* 12 red */
      #0a0a0a 330.811deg 340.541deg,                      /* 35 black */
      #c41e3a 340.541deg 350.270deg,                      /* 3 red */
      #0a0a0a 350.270deg 360deg                          /* 26 black */
    );
  border: 6px solid var(--gold);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.5),
    inset 0 0 0 2px var(--red-dark),
    0 0 30px rgba(228,27,58,0.35),
    0 0 80px rgba(0,0,0,0.7);
  will-change: transform;
  transform-origin: 50% 50%;
}
/* Numeric ticks on the wheel — one label per pocket, visible.
   Each slice is a 24 px tag centred on the wheel's axis (left:50%
   + negative margin) and rotated around the CENTRE of the wheel
   to the middle of its pocket. The JS writes the per-pocket angle
   (i + 0.5) * POCKET_DEG inline; the pointer at the top then reads
   the number of the winning pocket.

   IMPORTANT — the transform-origin Y is measured from the slice's
   top, and the slice is positioned inside `.roulette-wheel`'s PADDING
   box (the wheel has a 6 px gold border, so its padding box starts
   8 + 6 = 14 px below the stage top). The wheel centre therefore
   sits at (stageSize/2) - 14 from the slice top: 126 px for the
   280 px stage, 96 px for 220 px, 86 px for 200 px, 76 px for 180 px.
   (Earlier versions used the border-box centre — 132/102/92/82 px —
   which put the number ring exactly one border-width below the
   colour ring.) */
.wheel-slice {
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 26px;
  margin-left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 0 8px rgba(0,0,0,0.8);
  transform-origin: 12px 126px;
  user-select: none;
  pointer-events: none;
}

.roulette-ball-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.roulette-ball {
  position: absolute;
  left: 50%;
  /* Shift the box back by half its width so its 14×14 visual centre
     aligns with the wheel-stage's vertical axis (x = 140). Combined
     with `transform-origin: 50% 136px` below, this puts the orbit
     pivot at the EXACT wheel centre (matching `.roulette-wheel`'s
     transform-origin), so the ball sits ON the winning pocket at
     the top instead of one to its right after settle. */
  margin-left: -7px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e8d8a4 70%, #b8975a);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.35), 0 0 14px rgba(255,255,255,0.7);
  transform-origin: 50% 136px;       /* orbit pivot = wheel-stage centre */
  will-change: transform;
}
.wheel-hub {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold-dark) 70%);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--red-dark);
  border: 3px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 12px rgba(0,0,0,0.4);
  z-index: 6;
}
@media (max-width: 720px) {
  .wheel-hub { width: 50px; height: 50px; font-size: 1.1rem; }
  .roulette-ball { transform-origin: 4px 110px; }
  .wheel-slice { transform-origin: 12px 96px; font-size: 0.78rem; }
}

/* Winner readout — large pip number with colour label */
.winner-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(34,21,32,0.7), rgba(13,8,16,0.7));
  border: 1px solid rgba(201,160,70,0.3);
  min-width: 200px;
}
.winner-num {
  font-family: 'Playfair Display', serif;
  font-size: 3.4rem;
  color: var(--gold-bright);
  text-shadow: 0 0 28px var(--gold-glow);
  line-height: 1;
}
.winner-color {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.winner-color[data-color="red"]   { color: var(--red-bright); text-shadow: 0 0 14px var(--red-glow); }
.winner-color[data-color="black"] { color: var(--text); }
.winner-color[data-color="green"] { color: #5fb56e; text-shadow: 0 0 14px rgba(95,181,110,0.5); }

/* History strip — last 8 results as coloured pips */
.roulette-history { display: flex; flex-wrap: wrap; gap: 6px; max-width: 240px; justify-content: flex-end; }
.roulette-history .roll-chip {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #fff;
  font-size: 0.78rem;
  border: 1px solid rgba(201,160,70,0.3);
}
.roulette-history .roll-chip.red   { background: linear-gradient(160deg, var(--red-bright), var(--red-dark)); }
.roulette-history .roll-chip.black { background: linear-gradient(160deg, #444, #0a0a0a); color: var(--gold-bright); }
.roulette-history .roll-chip.green { background: linear-gradient(160deg, #5fb56e, #1a4a2a); color: #fff; }

/* Felt + grid */
.roulette-felt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(8,5,10,0.55), rgba(11,58,38,0.3));
  border: 1px solid rgba(201,160,70,0.25);
  border-radius: 12px;
  box-shadow: inset 0 0 36px rgba(0,0,0,0.55);
}

/* Outside top band: 1-18 / Even / Red / Black / Odd / 19-36 */
.roulette-row { display: grid; gap: 8px; }
.roulette-row.outside-top { grid-template-columns: repeat(6, 1fr); }
.roulette-row.dozens      { grid-template-columns: repeat(3, 1fr); }

.roulette-main {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  align-items: stretch;
}
.roulette-cell {
  position: relative;
  padding: 10px 6px;
  background: linear-gradient(180deg, rgba(8,5,10,0.6), rgba(34,21,32,0.55));
  border: 1px solid rgba(201,160,70,0.3);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  font-family: 'Playfair Display', serif;
}
.roulette-cell:hover { border-color: var(--gold); background: rgba(201,160,70,0.08); transform: translateY(-1px); }
.roulette-cell.red    { background: linear-gradient(180deg, rgba(228,27,58,0.45), rgba(184,18,46,0.35)); }
.roulette-cell.black  { background: linear-gradient(180deg, rgba(34,21,32,0.7), rgba(8,5,10,0.7)); }
.roulette-cell.green,
.roulette-cell.zero {
  background: linear-gradient(180deg, rgba(31,123,68,0.45), rgba(11,58,38,0.45));
  font-size: 1.2rem;
}
.roulette-cell .num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.roulette-cell.red .num,
.roulette-cell.green .num,
.roulette-cell.zero .num { color: #fff; }
.roulette-cell .bet-cell-odd {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.66rem;
  color: var(--gold);
  font-style: italic;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

/* The 12-column board inside .roulette-board */
.roulette-board { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.roulette-board .roulette-row { grid-template-columns: repeat(12, 1fr); gap: 6px; }

/* Last-win banner reuse from dice — gentle damping */
.last-win-banner { margin-top: 18px; }

/* ---------- BACCARAT ---------- */
.bac-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 24px 24px;
  min-height: 540px;
}

.bac-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bac-area.area-banker { padding-top: 4px; }
.bac-area.area-player { padding-bottom: 8px; }

/* Three-zone bet felt. Mirrors the .bet-table grid from Jackpot
   but laid out horizontally — PLAYER left, TIE centre, BANKER right.
   Centre TIE cell subtly tinted green-stitch like a real ba carpet. */
.bac-felt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 720px;
  width: 100%;
  margin: 14px auto 0;
}
.bac-cell {
  padding: 16px 12px;
}
.bac-cell.tie {
  background: linear-gradient(180deg,
    rgba(31, 123, 68, 0.28) 0%,
    rgba(11, 58, 38, 0.22) 100%);
  border-color: rgba(95, 181, 110, 0.35);
}
.bac-cell.tie:hover {
  border-color: #5fb56e;
  background:
    linear-gradient(180deg, rgba(31, 123, 68, 0.34), rgba(11, 58, 38, 0.28));
  box-shadow: 0 0 14px rgba(95, 181, 110, 0.30);
}
.bac-cell.tie.active {
  background: linear-gradient(180deg,
    rgba(31, 123, 68, 0.55) 0%,
    rgba(11, 58, 38, 0.40) 100%);
  border-color: #5fb56e;
  box-shadow:
    0 0 24px rgba(95, 181, 110, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  .bac-felt { grid-template-columns: 1fr; }
  .bac-cell { min-height: 70px; }
}

.bac-message { /* reuses .bj-message layout from blackjack */
}

.bac-controls { /* reuses .bj-controls layout from blackjack */
}


/* Three states on a bet-cell:
   .biased       — soft pressure (≥40% window = amber border)
   .biased.hard  — strong pressure (≥70% window = red glow + pulse)
   .biased.rolled-back — win on this cell was clobbered by the bias
                          (one-shot, faded back to gold after the roll).
*/

.bet-cell.biased {
  border-color: rgba(241, 196, 15, 0.85);
  box-shadow: 0 0 12px rgba(241, 196, 15, 0.35);
  background: linear-gradient(180deg, rgba(241,196,15,0.10), rgba(34,21,32,0.55));
}
.bet-cell.biased:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(241, 196, 15, 0.55);
}

.bet-cell.biased.hard {
  border-color: rgba(228, 27, 58, 0.95);
  box-shadow: 0 0 18px rgba(228, 27, 58, 0.55),
              inset 0 0 18px rgba(228, 27, 58, 0.18);
  background: linear-gradient(180deg, rgba(228, 27, 58, 0.18), rgba(34, 21, 32, 0.55));
}

@keyframes biasedPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(228, 27, 58, 0.45); }
  50%      { box-shadow: 0 0 24px rgba(228, 27, 58, 0.85); }
}
.bet-cell.biased.hard { animation: biasedPulse 1.6s ease-in-out infinite; }

.bet-cell .bias-pill {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(241, 196, 15, 0.18);
  color: var(--gold-bright);
  border: 1px solid rgba(241,196,15,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.bet-cell.biased .bias-pill    { opacity: 1; background: rgba(241,196,15,0.18); }
.bet-cell.biased.hard .bias-pill {
  opacity: 1;
  background: rgba(228,27,58,0.25);
  color: #ff7a8c;
  border-color: rgba(228,27,58,0.7);
}

/* Heat-loss flash — fires when bias actually clobbers a win this roll. */
.bet-cell.rolled-back {
  animation: rolledBackFlash 1.4s ease 1;
  border-color: #ff5577 !important;
}
@keyframes rolledBackFlash {
  0%   { background: rgba(228, 27, 58, 0.55); transform: scale(1); }
  35%  { background: rgba(228, 27, 58, 0.30); transform: scale(1.04); }
  100% { background: rgba(34, 21, 32, 0.55);  transform: scale(1); }
}

/* ---------- CONTRADICTION FEEDBACK ---------- */
/* .conflict-ping is one-shot class added when placeChip() rejects
   a placement because it contradicts an existing bet. The cell
   flashes red once and the toast pinpoints both labels. */
@keyframes conflictPing {
  0%   { transform: scale(1); box-shadow: 0 0 0  0 rgba(228, 27, 58, 0.7); }
  25%  { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(228, 27, 58, 0.30); }
  60%  { transform: scale(1); box-shadow: 0 0 0 22px rgba(228, 27, 58, 0.0); }
  100% { transform: scale(1); box-shadow: 0 0 0  0 rgba(228, 27, 58, 0.0); }
}
.bet-cell.conflict-ping {
  animation: conflictPing 0.85s ease-out 1;
  border-color: var(--red-bright) !important;
}

/* Same one-shot flash, applied when a roulette cell placement is
   rejected for being contradictory. */
.roulette-cell.conflict-ping {
  animation: conflictPing 0.85s ease-out 1;
  border-color: var(--red-bright) !important;
  z-index: 2;
}

/* ---------- BUST PROBABILITY HINT (Blackjack 21) ---------- */
/* Singleton 1–11 deck — the hint sits under the player's hand and
   shows P(bust on next hit) using deck.length and remaining values.
   States: '' (hidden during dealer turn / settled / pre-deal),
   'safe', 'low', 'mid', 'high', 'bust'. */
.bj-bust-hint {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-style: italic;
  padding: 5px 16px;
  border-radius: 100px;
  background: rgba(8, 5, 10, 0.45);
  border: 1px solid rgba(201, 160, 70, 0.20);
  margin-top: 6px;
  align-self: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  min-height: 0;
}
.bj-bust-hint[data-state="safe"] {
  color: #5fb56e;
  border-color: rgba(95, 181, 110, 0.45);
  background: rgba(15, 50, 30, 0.4);
}
.bj-bust-hint[data-state="low"] {
  color: var(--gold);
  border-color: rgba(201, 160, 70, 0.30);
}
.bj-bust-hint[data-state="mid"] {
  color: var(--gold-bright);
  border-color: rgba(243, 209, 115, 0.55);
  background: rgba(60, 40, 10, 0.4);
}
.bj-bust-hint[data-state="high"] {
  color: #ff8e6a;
  border-color: rgba(255, 142, 106, 0.55);
  background: rgba(60, 30, 15, 0.45);
}
.bj-bust-hint[data-state="bust"] {
  color: var(--red-bright);
  border-color: rgba(228, 27, 58, 0.7);
  text-shadow: 0 0 12px var(--red-glow);
  background: rgba(60, 15, 22, 0.45);
  font-style: normal;
  letter-spacing: 0.12em;
}

/* ============================================================
   MOBILE INTERFACE — game-specific overrides
   ----------------------------------------------------------
   Complément au bloc style.css @720px. Préserve le desktop.
   Cible : cartes de poker/blackjack lisibles + tappables au pouce,
   roulette/jackpot/zones de pari redimensionnées sans overflow
   horizontal parasite. Le scroll-x a été le dernier recours sur
   bet-table (respecte le pari multi-zones).
   ============================================================ */

@media (max-width: 720px) {
  /* ---------- CARD HAND (poker / blackjack) ----------
     5 cartes × 110 px + 12 px gap = 598 px.
     Sur 360 px viewport, ça déborde. Solution : hand-row devient
     un scroll-x avec snap-x pour ne pas perdre l'alignement vertical
     du milieu du tableau. Le ".felt" reste centré. */
  .hand-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 14px 8px 22px;
    margin: 0 -6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 160, 70, 0.45) transparent;
    justify-content: flex-start;
  }
  .hand-row::-webkit-scrollbar { height: 3px; }
  .hand-row::-webkit-scrollbar-track { background: transparent; }
  .hand-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
      transparent,
      rgba(201, 160, 70, 0.55),
      transparent);
    border-radius: 100px;
  }
  .card-slot {
    flex: 0 0 auto;
    width: 78px;
    height: 112px;
    scroll-snap-align: center;
  }
  .card-corner .rank { font-size: 0.86rem; }
  .card-corner .suit-small { font-size: 0.78rem; }
  .card-center { font-size: 2.2rem; }
  .card-face.front { padding: 5px; }

  /* ---------- TEXAS HOLD'EM ---------- */
  .ph-table { padding: 14px 8px 10px; gap: 10px; min-height: 0; }
  .ph-bots { gap: 8px; }
  .ph-seat { min-width: 84px; padding: 8px 4px 6px; gap: 2px; }
  .ph-avatar { width: 34px; height: 34px; font-size: 1.05rem; }
  .ph-seat-name { font-size: 0.62rem; }
  .ph-stack { font-size: 0.85rem; }
  .ph-cards { gap: 3px; min-height: 70px; }
  .ph-cards .card-slot.ph-card { width: 47px; height: 66px; }
  .ph-community { min-height: 70px; gap: 4px; }
  .ph-community .card-slot.ph-card { width: 44px; height: 62px; }
  .ph-winner { font-size: 1rem; padding: 12px 18px; }
  .ph-action { font-size: 0.72rem; padding: 5px 10px; }
  .ph-pot-value { font-size: 1rem; }
  .ph-status { font-size: 0.78rem; }
  /* ---------- BLACKJACK ---------- */
  .bj-table { padding: 16px 8px 12px; min-height: 0; gap: 14px; }
  .bj-area { gap: 6px; }
  .bj-label {
    font-size: 0.66rem; letter-spacing: 0.3em;
  }
  .bj-label span { font-size: 1rem; margin-left: 8px; }
  .bj-message {
    font-size: 0.95rem;
    padding: 10px 10px;
    min-height: 44px;
    letter-spacing: 0.03em;
  }
  .bj-bust-hint {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
  .bj-target { padding: 6px 12px; gap: 8px; font-size: 0.7rem; }
  .bj-target-value { font-size: 1.2rem; }
  .bj-target-label { font-size: 0.58rem; letter-spacing: 0.28em; }

  /* ---------- BACCARAT ---------- */
  .bac-table { padding: 18px 10px 14px; min-height: 0; gap: 12px; }
  .bac-area { gap: 8px; }
  .bac-cell { padding: 12px 10px; border-radius: 12px; }
  .bac-cell .bet-cell-name { font-size: 1.05rem; letter-spacing: 0.06em; }
  .bac-cell .bet-cell-odd { font-size: 0.72rem; }
  .bac-message { font-size: 1rem; padding: 10px 10px; min-height: 44px; }

  /* ---------- JACKPOT (DICE) ---------- */
  .dice-zone { padding: 14px 0 8px; min-height: 0; }
  .dice-tray {
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: nowrap;
    border-radius: 14px;
  }
  .die { width: 52px; height: 52px; padding: 7px; }
  .pip { width: 8px; height: 8px; }
  .dice-total { font-size: 1.7rem; }
  .dice-label { font-size: 0.6rem; }
  /* bet-table : devient un scroll-x pour absorber sans wrap
     les 14 zones SUM et les 12 zones TRIP/DOUBLE. */
  .bet-table {
    /* Override desktop grid 3-col → flex horizontal scroll on mobile.
       Sans ce display:flex, grid 1fr force 3 colonnes serrées qui
       débordent à 320 px. */
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 4px 12px;
    margin: 0 -6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 160, 70, 0.45) transparent;
    flex-wrap: nowrap;
  }
  .bet-table::-webkit-scrollbar { height: 3px; }
  .bet-table::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, transparent, rgba(201, 160, 70, 0.55), transparent);
  }
  .divider { font-size: 0.66rem; margin: 12px 0 6px; letter-spacing: 0.18em; gap: 8px; }

  /* NOTE: pour les bet-table non-jackpot (les .bac-felt, etc.)
     on garde display: grid, juste en 1fr sur mobile via @600px. */
  .bet-cell {
    padding: 10px 8px;
    flex: 0 0 90px;
  }
  .bet-cell-name { font-size: 0.86rem; }
  .bet-cell-odd { font-size: 0.66rem; }

  .dice-history { gap: 6px; font-size: 0.78rem; }

  /* ---------- ROULETTE ---------- */
  .roulette-strip { gap: 14px; padding: 14px 8px 8px; }
  .wheel-stage { width: 200px; height: 200px; }
  .wheel-hub { width: 48px; height: 48px; font-size: 1rem; }
  /* Le transform-origin du ball et des slices doit suivre l'échelle */
  .roulette-ball { transform-origin: 6px 96px; }
  .wheel-slice { transform-origin: 12px 86px; font-size: 0.7rem; }
  .roulette-felt { padding: 12px 10px; gap: 10px; }
  .roulette-main { grid-template-columns: 40px 1fr; gap: 4px; }
  .roulette-row.outside-top { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .roulette-row.dozens      { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .roulette-cell { padding: 7px 2px; border-radius: 6px; min-height: 44px; }
  .roulette-cell .num { font-size: 0.78rem; }
  .roulette-cell .bet-cell-odd { font-size: 0.55rem; }
  /* Jetons en bas de la case, centrés horizontalement (mobile) — au lieu
     du coin haut-droit. Le montant texte est masqué (cellules trop petites) :
     la valeur est lisible sur le jeton lui-même + le total dans le header.
     min-height 44px réserve le bas : numéro en haut, jetons en bas sans
     chevauchement (une pile de 2-3 jetons peut mordre le bas du numéro,
     comportement normal d'une table de roulette). */
  .roulette-cell .bet-chip-stack {
    top: auto;
    right: auto;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
  }
  .roulette-cell .bet-stack { display: none; }
  .roulette-cell .chip {
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border-width: 2px;
  }
  .roulette-cell .chip::after { inset: 3px; font-size: 0.45rem; }
  /* Board 1-36 en 4 lignes × 9 cases sur mobile (au lieu de 3 × 12) :
     les 3 wrappers .roulette-row passent en display:contents et les
     36 cases (36→1 dans le DOM) refluent dans la grille 9 colonnes du
     .roulette-board — 36 = 9×4, ça tombe pile (lignes 36-28 / 27-19 /
     18-10 / 9-1). Plus besoin de scroll horizontal. */
  .roulette-board {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, minmax(44px, 1fr));
    gap: 4px;
  }
  .roulette-board .roulette-row { display: contents; }
  .winner-readout { padding: 10px 16px; min-width: 0; }
  .winner-num { font-size: 2.2rem; }
  .winner-color { font-size: 0.92rem; }
  .roulette-history .roll-chip { width: 24px; height: 24px; font-size: 0.7rem; }
  .roulette-history { max-width: none; justify-content: center; }
}

/* Très-petit écran (≤ 380 px) : on re-pack encore plus agressivement */
@media (max-width: 380px) {
  .card-slot { width: 70px; height: 100px; }
  .card-center { font-size: 1.9rem; }
  .card-corner .rank { font-size: 0.78rem; }
  .die { width: 46px; height: 46px; padding: 6px; }
  .wheel-stage { width: 180px; height: 180px; }
  .wheel-hub { width: 44px; height: 44px; font-size: 0.92rem; }
  .roulette-ball { transform-origin: 6px 86px; }
  .wheel-slice { transform-origin: 12px 76px; }
  .game-title h1 { font-size: 1.3rem; }
  .table-wrap { padding: 12px 6px; }
}

/* Approche tactile : on supprime les ":hover" qui restent collés au tap
   sur mobile, et on ajoute un ":active" discret pour confirmer le tap. */
@media (hover: none) {
  .card:hover, .btn-primary:hover, .btn-ghost:hover, .btn-gold:hover,
  .bet-cell:hover, .roulette-cell:hover, .chip-btn:hover,
  .slots-lever:hover { transform: none; filter: none; }
  .card:active, .btn:active, .chip-btn:active, .bet-cell:active, .roulette-cell:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
  }
  .card-banner:hover::after { animation: none; }
}

/* ============================================================
   GOLDEN REELS — compléments (l'essentiel est déjà ci-dessus)
   ============================================================ */
/* Le repère de payline doit se centrer sur les rouleaux, pas sur
   le cabinet entier. */
.slot-window { position: relative; }

/* Rouleaux en rotation : léger flou de mouvement + liseré vif. */
.reel.spinning { border-color: var(--gold-bright); }
.reel.spinning .reel-strip { filter: blur(2.5px); }

/* Cellule gagnante sur la payline */
.reel-cell.win {
  background: linear-gradient(180deg, rgba(243,209,115,0.20), rgba(243,209,115,0.04));
  box-shadow: inset 0 0 20px rgba(243,209,115,0.4);
}
.reel-cell.win .sym { animation: winPop 0.5s ease; }
@keyframes winPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Jackpot qui flashe quand la tirelire gonfle */
.jackpot-value.flash { animation: jackpotFlash 0.9s ease; }
@keyframes jackpotFlash {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.6) drop-shadow(0 0 18px var(--gold-glow)); }
}

/* Table des gains */
.slots-paytable {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  margin: 18px auto 0;
  max-width: 720px;
}
.slots-paytable .pt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 6px;
  border: 1px solid rgba(201,160,70,0.18);
  border-radius: 8px;
  background: rgba(8,5,10,0.45);
}
.slots-paytable .pt-sym { line-height: 1; font-size: 1.5rem; }
.slots-paytable .pt-sym .sym { font-size: 1.5rem; }
.slots-paytable .pt-pay {
  font-family: 'Playfair Display', serif;
  font-size: 0.8rem;
  color: var(--gold-bright);
}
.slots-paytable .pt-label {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .slots-paytable { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   GOLDEN REELS — animation & ambiance (v2)
   ============================================================ */

/* Rangée d'ampoules qui défilent sous le titre de la machine */
.slot-lights {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin: 6px 0 2px;
}
.slot-lights .bulb {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-dark);
  box-shadow: 0 0 4px rgba(243,209,115,0.35);
  animation: bulbChase 1.4s linear infinite;
}
.slot-lights .bulb:nth-child(2n) { animation-delay: 0.35s; }
.slot-lights .bulb:nth-child(3n) { animation-delay: 0.7s; }
@keyframes bulbChase {
  0%, 100% { background: var(--gold-dark);   box-shadow: 0 0 4px rgba(243,209,115,0.3); }
  50%      { background: var(--gold-bright); box-shadow: 0 0 14px var(--gold-glow); }
}

/* Le repère de payline respire doucement */
.payline-marker { animation: paylinePulse 3.6s ease-in-out infinite; }
@keyframes paylinePulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Anticipation : dernier rouleau qui pulse quand les 2 premiers s'alignent */
.reel.anticipating { animation: anticipateGlow 0.4s ease-in-out infinite alternate; }
@keyframes anticipateGlow {
  from { box-shadow: inset 0 0 20px rgba(0,0,0,0.7), 0 0 10px var(--gold-glow); }
  to   { box-shadow: inset 0 0 20px rgba(0,0,0,0.7), 0 0 42px var(--gold-bright), 0 0 80px var(--red-glow); }
}

/* Petit rebond du rouleau au moment où il s'arrête */
.reel.reel-stop .reel-strip { animation: reelBounce 0.4s cubic-bezier(.3,1.6,.4,1); }
@keyframes reelBounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-18px); }
  70%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

/* Flash de gain par-dessus la machine */
.slot-flash {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  background: radial-gradient(circle at 50% 46%, rgba(243,209,115,0.6), transparent 62%);
}
.slot-flash.on { animation: slotFlash 0.75s ease-out; }
@keyframes slotFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* Secousse du cabinet (jackpot) */
.slot-cabinet.shake { animation: cabShake 0.5s ease-in-out; }
@keyframes cabShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(3px, 2px); }
}

/* Pièces qui jaillissent sur un gain */
.slot-coin {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-bright), var(--gold-dark) 72%);
  border: 2px solid rgba(90,10,20,0.65);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 55;
}

/* Ticker du jackpot */
.jackpot-value.rolling { color: var(--gold-bright); text-shadow: 0 0 18px var(--gold-glow); }

@media (prefers-reduced-motion: reduce) {
  .slot-lights .bulb, .payline-marker, .reel.anticipating { animation: none !important; }
  .reel.reel-stop .reel-strip { animation: none !important; }
}