/* ============================================================
   EZ BACCARAT — style.css
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────────── */
:root {
  --felt:        #1a6b3c;
  --felt-dark:   #124d2c;
  --felt-edge:   #0c3520;
  --gold:        #d4af37;
  --gold-light:  #f0d060;
  --gold-dim:    #8a7020;
  --hud-bg:      #0a0c14;
  --modal-bg:    #10121e;
  --text-light:  #f0e8d0;
  --text-muted:  #9a9270;

  --chip-1:   #a0a0a0;
  --chip-5:   #c42020;
  --chip-25:  #1a7a2a;
  --chip-100: #1a2080;
  --chip-500: #6a1a8a;

  --card-w:  72px;
  --card-h:  100px;
  --card-r:  6px;
  --red:     #c41010;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: radial-gradient(ellipse at top, #181830 0%, #0a0c14 70%);
  min-height: 100dvh;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  user-select: none;
}

/* ── Phaser canvas container ─────────────────────────────────── */
#phaser-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;  /* let DOM overlay handle all clicks */
}
#phaser-container canvas {
  display: block;
  margin: 0 auto;
}

/* ── DOM Overlay (sits above Phaser canvas) ──────────────────── */
#dom-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(6px);
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: var(--modal-bg);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 44px 48px;
  text-align: center;
  box-shadow: 0 0 60px rgba(212,175,55,0.25), 0 24px 60px rgba(0,0,0,0.7);
  width: 360px;
  max-width: 94vw;
}
.modal-logo {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.modal-logo span { color: #fff; }
.gameover-logo { color: #e04040; }
.modal-tagline {
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
}
.modal-label {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.modal-input-row {
  display: flex;
  align-items: center;
  background: #1e2138;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.input-dollar {
  padding: 0 12px;
  color: var(--gold);
  font-size: 1.1rem;
  background: rgba(212,175,55,0.08);
  border-right: 1px solid var(--gold-dim);
  line-height: 48px;
}
.modal-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1.15rem;
  padding: 12px 14px;
  font-family: inherit;
}
.modal-input-row input::placeholder { color: #444; }
.quick-buyin-row {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.quick-btn {
  flex: 1;
  background: rgba(212,175,55,0.1);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.quick-btn:hover { background: rgba(212,175,55,0.22); border-color: var(--gold); }

/* ── Deal / Primary Button ───────────────────────────────────── */
.btn-deal {
  background: linear-gradient(135deg, #b8921e 0%, #e8c24a 50%, #b8921e 100%);
  border: none;
  border-radius: 8px;
  color: #1a1000;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 14px 36px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212,175,55,0.35), 0 2px 4px rgba(0,0,0,0.5);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
  width: 100%;
}
.btn-deal:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,175,55,0.5), 0 2px 4px rgba(0,0,0,0.5);
}
.btn-deal:active:not(:disabled) { transform: translateY(0); }
.btn-deal:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: linear-gradient(135deg, #555 0%, #888 50%, #555 100%);
  box-shadow: none;
}

/* ── HUD ─────────────────────────────────────────────────────── */
.hud {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  background: var(--hud-bg);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  flex-shrink: 0;
}
.hud-section { display: flex; align-items: center; gap: 8px; }
.hud-center { flex: 1; justify-content: center; }
.hud-right-section { justify-content: flex-end; }
.hud-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.12em;
}
.hud-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.hud-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-light);
  min-width: 60px;
}

/* Mute button */
.btn-mute {
  background: none;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.btn-mute:hover { background: rgba(212,175,55,0.1); border-color: var(--gold); color: var(--gold-light); }

/* ============================================================
   DEALER STAGE
   ============================================================ */
.dealer-stage {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 4px 20px 0;
  position: relative;
  flex-shrink: 0;
  min-height: 0;
}

.dealer-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  flex-shrink: 0;
}
.dealer-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.dealer-btn:hover { background: rgba(255,255,255,0.13); color: var(--text-light); }
.dealer-btn.active {
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.5);
  color: var(--gold-light);
}

.dealer-char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  flex-shrink: 0;
}
.dealer-char.hidden { display: none; }

.char-svg {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6));
  animation: idle-breathe 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}

.dealer-name-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ── Speech Bubble ────────────────────────────────────────────── */
.speech-bubble {
  position: absolute;
  top: -8px;
  left: 96px;
  background: #fff;
  color: #222;
  border-radius: 14px 14px 14px 2px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 150px;
  min-width: 80px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  opacity: 0;
  transform: scale(0.7) translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 20;
  line-height: 1.4;
  text-align: center;
}
.speech-bubble.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -8px;
  border: 8px solid transparent;
  border-right-color: #fff;
  border-left: none;
}

/* ── Dealer CSS Animations ────────────────────────────────────── */
@keyframes idle-breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%       { transform: scaleY(1.016) translateY(-1.5px); }
}

@keyframes dealer-happy {
  0%   { transform: translateY(0) rotate(0deg); }
  15%  { transform: translateY(-14px) rotate(-5deg); }
  35%  { transform: translateY(-8px) rotate(4deg); }
  55%  { transform: translateY(-16px) rotate(-3deg); }
  75%  { transform: translateY(-4px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes dealer-sympathetic {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-5px) rotate(-4deg); }
  50%  { transform: translateX(5px) rotate(4deg); }
  80%  { transform: translateX(-3px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes dealer-gloat {
  0%   { transform: translateY(0) scaleX(1); }
  25%  { transform: translateY(-7px) scaleX(1.07); }
  50%  { transform: translateY(-3px) scaleX(0.97); }
  75%  { transform: translateY(-6px) scaleX(1.04); }
  100% { transform: translateY(0) scaleX(1); }
}

@keyframes dealer-bored {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-6deg) translateX(-3px); }
  60%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes dealer-frustrated {
  0%   { transform: translateX(0) scaleX(1); }
  15%  { transform: translateX(-7px) scaleX(0.95); }
  35%  { transform: translateX(7px) scaleX(1.05); }
  55%  { transform: translateX(-5px) scaleX(0.97); }
  75%  { transform: translateX(4px); }
  100% { transform: translateX(0) scaleX(1); }
}

@keyframes dealer-deal {
  0%   { transform: rotate(0deg) translateX(0); }
  30%  { transform: rotate(-12deg) translateX(-8px); }
  65%  { transform: rotate(6deg) translateX(4px); }
  100% { transform: rotate(0deg) translateX(0); }
}

.dealer-char.anim-happy       .char-svg { animation: dealer-happy       0.85s ease both; }
.dealer-char.anim-sympathetic .char-svg { animation: dealer-sympathetic  1.1s ease both; }
.dealer-char.anim-gloat       .char-svg { animation: dealer-gloat        1.0s ease both; }
.dealer-char.anim-bored       .char-svg { animation: dealer-bored        1.0s ease both; }
.dealer-char.anim-frustrated  .char-svg { animation: dealer-frustrated   0.75s ease both; }
.dealer-char.anim-deal        .char-svg { animation: dealer-deal         0.6s ease both; }

/* ── Table ───────────────────────────────────────────────────── */
.table-container {
  width: 100%;
  max-width: 820px;
  padding: 16px;
}
.table-felt {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%,
    var(--felt) 0%,
    var(--felt-dark) 65%,
    var(--felt-edge) 100%);
  border-radius: 20px;
  border: 4px solid var(--gold);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.35),
    0 0 0 2px rgba(0,0,0,0.6),
    0 8px 40px rgba(0,0,0,0.7);
  padding: 20px 16px 28px;
  overflow: visible;
}
.table-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px
  );
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================================
   BETTING ZONES — Arc Layout (real baccarat table feel)
   ============================================================ */
.betting-zones.arc-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 20px;
  height: 160px;   /* fixed height keeps both sides symmetric */
}

/* Side group: arc zone + side bet stacked vertically */
.side-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
}
.side-group .arc-zone {
  flex: 1;         /* arc fills remaining height after the side bet */
  min-height: 0;
}

/* ── Arc Zone base ───────────────────────────────────────────── */
.arc-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: 2.5px solid transparent;
  transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
  padding: 12px 14px;
  gap: 3px;
}

.banker-arc {
  background: radial-gradient(ellipse at 28% 50%,
    rgba(160, 20, 20, 0.28) 0%,
    rgba(100, 8, 8, 0.18) 100%);
  border-color: rgba(220, 60, 60, 0.5);
  border-radius: 14px 80px 80px 14px;
  box-shadow: inset -2px 0 24px rgba(180,20,20,0.12);
}
.banker-arc:hover {
  background: radial-gradient(ellipse at 28% 50%,
    rgba(200, 40, 40, 0.38) 0%,
    rgba(130, 15, 15, 0.28) 100%);
  border-color: rgba(255, 80, 80, 0.75);
  box-shadow: 0 0 28px rgba(255, 70, 70, 0.35), inset -2px 0 24px rgba(180,20,20,0.15);
}
.banker-arc.has-bet {
  background: radial-gradient(ellipse at 28% 50%,
    rgba(200, 40, 40, 0.32) 0%,
    rgba(120, 10, 10, 0.22) 100%);
  border-color: rgba(255, 100, 100, 0.8);
  box-shadow: 0 0 22px rgba(255, 80, 80, 0.4);
}
/* Tally on arc zones */
.banker-arc::after {
  content: attr(data-tally);
  position: absolute;
  top: 7px; left: 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: rgba(255,120,120,0.55);
  letter-spacing: 0.08em;
}

/* ── Player Arc (right, blue) ─────────────────────────────────── */
.player-arc {
  background: radial-gradient(ellipse at 72% 50%,
    rgba(20, 60, 200, 0.28) 0%,
    rgba(8, 30, 130, 0.18) 100%);
  border-color: rgba(60, 120, 255, 0.5);
  border-radius: 80px 14px 14px 80px;
  box-shadow: inset 2px 0 24px rgba(20,60,200,0.12);
}
.player-arc:hover {
  background: radial-gradient(ellipse at 72% 50%,
    rgba(40, 90, 220, 0.38) 0%,
    rgba(15, 50, 160, 0.28) 100%);
  border-color: rgba(80, 150, 255, 0.75);
  box-shadow: 0 0 28px rgba(60, 130, 255, 0.35), inset 2px 0 24px rgba(20,60,200,0.15);
}
.player-arc.has-bet {
  background: radial-gradient(ellipse at 72% 50%,
    rgba(40, 90, 220, 0.32) 0%,
    rgba(10, 40, 150, 0.22) 100%);
  border-color: rgba(80, 160, 255, 0.8);
  box-shadow: 0 0 22px rgba(60, 140, 255, 0.4);
}
.player-arc::after {
  content: attr(data-tally);
  position: absolute;
  top: 7px; right: 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: rgba(100,160,255,0.55);
  letter-spacing: 0.08em;
}

.arc-label {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-light);
  text-transform: uppercase;
}
.arc-odds { font-size: 0.65rem; color: var(--gold); }

/* ── Center Column ────────────────────────────────────────────── */
.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  z-index: 1;
  justify-content: center;
}

.center-zone {
  background: rgba(20, 130, 20, 0.18);
  border: 2px solid rgba(80, 210, 80, 0.5);
  border-radius: 40px;
  padding: 8px 18px;
  text-align: center;
  cursor: pointer;
  min-width: 82px;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.center-zone:hover { background: rgba(30,160,30,0.26); border-color: rgba(100,220,100,0.8); box-shadow: 0 0 16px rgba(60,200,60,0.3); }
.center-zone.has-bet { border-color: #64dc64; box-shadow: 0 0 14px rgba(80,210,80,0.4); }

.side-bets-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

/* Side bet zones remain compact */
.bet-zone.side-zone {
  border: 2px solid rgba(212,175,55,0.4);
  border-radius: 10px;
  padding: 7px 6px 6px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  height: 70px;    /* fixed so both sides are symmetric */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 74px;
  gap: 1px;
}
.dragon7-zone { border-color: rgba(255,140,0,0.5); }
.dragon7-zone:hover { border-color: #ff8c00; box-shadow: 0 0 12px rgba(255,140,0,0.3); }
.dragon7-zone.has-bet { border-color: #ff8c00; }
.panda8-zone { border-color: rgba(200,100,200,0.5); }
.panda8-zone:hover { border-color: #c864c8; box-shadow: 0 0 12px rgba(200,100,200,0.3); }
.panda8-zone.has-bet { border-color: #c864c8; }

/* Drag-over highlight */
.bet-zone.drag-over {
  border-color: var(--gold) !important;
  background: rgba(212,175,55,0.18) !important;
  box-shadow: 0 0 24px rgba(212,175,55,0.6) !important;
  transform: scale(1.04);
  transition: transform 0.1s;
}
#chip-tray.drag-over { box-shadow: 0 0 24px rgba(212,175,55,0.5) inset; background: rgba(212,175,55,0.07); }

.zone-icon { font-size: 1.1rem; line-height: 1; margin-bottom: 1px; }
.zone-name {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-light);
  line-height: 1.2;
}
.zone-odds { font-size: 0.6rem; color: var(--gold); margin-bottom: 2px; }
.chip-stack {
  position: relative;
  width: 40px;
  height: 34px;
  margin: 3px auto 2px;
}
.stack-chip {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,0.35);
  left: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.bet-amount {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-light);
  min-height: 14px;
}

/* ── Card Area ───────────────────────────────────────────────── */
.card-area {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
  min-height: 180px;
}
.hand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hand-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}
.card-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: var(--card-h);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.hand-total-wrap {
  min-height: 28px;
  display: flex;
  align-items: center;
}
.hand-total {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 16px rgba(212,175,55,0.6);
  display: block;
}
.vs-divider {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  padding-top: 40px;
  letter-spacing: 0.1em;
}

/* ── Squeeze Hint ────────────────────────────────────────────── */
.squeeze-hint {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(212,175,55,0.7);
  letter-spacing: 0.03em;
  padding: 6px 0 2px;
  animation: hint-fade 0.8s ease forwards;
}
.squeeze-hint strong { color: var(--gold-light); }
@keyframes hint-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Outcome Overlay ─────────────────────────────────────────── */
.outcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 50;
  backdrop-filter: blur(3px);
  padding: 24px;
}
.outcome-overlay.hidden { display: none; }
.outcome-banner {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light);
  text-align: center;
  text-shadow: 0 0 30px rgba(212,175,55,0.8);
  animation: banner-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.outcome-sub {
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
  min-height: 1.4em;
}
@keyframes banner-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.payout-details {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 0.85rem;
  min-width: 220px;
  max-width: 360px;
  width: 100%;
}
.payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.payout-row:last-child { border-bottom: none; }
.payout-row .win  { color: #5dcc5d; font-weight: 600; }
.payout-row .push { color: var(--gold); font-weight: 600; }
.payout-row .loss { color: #e05050; font-weight: 600; }

/* ── Control Bar ─────────────────────────────────────────────── */
.control-bar {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 10px;
}
.control-group { display: flex; align-items: center; gap: 8px; }
.control-center { flex: 1; justify-content: center; max-width: 200px; margin: 0 auto; }
.control-left, .control-right { min-width: 160px; }
.control-right { justify-content: flex-end; }
.btn-ctrl {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px;
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-ctrl:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.btn-ctrl:disabled { opacity: 0.35; cursor: not-allowed; }
.total-bet-display { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }

/* ── Chip Tray ───────────────────────────────────────────────── */
.chip-tray {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
  transition: background 0.15s, box-shadow 0.15s;
}
.chip {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--chip-color);
  border: 4px dashed rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.chip::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.chip:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.15), 0 0 18px rgba(255,255,255,0.1); }
.chip.selected { transform: translateY(-8px) scale(1.12); box-shadow: 0 12px 24px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 24px var(--gold-light); outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* Dragging ghost chip */
.chip.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  opacity: 0.88;
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 24px rgba(212,175,55,0.3);
  transition: none;
  cursor: grabbing;
}

/* ============================================================
   CARDS — rotateY peel squeeze (long side, left-to-right)
   ============================================================ */

.card-wrapper {
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  perspective: 600px;
  perspective-origin: 115% 50%;
  flex-shrink: 0;
  cursor: grab;
}
.card-wrapper.revealed { cursor: default; }
.card-wrapper:active:not(.revealed) { cursor: grabbing; }

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}

.card-face, .card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--card-r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Card Back ───────────────────────────────────────────────── */
.card-back {
  background: #1932a0;
  border: 2px solid #c8a848;
  overflow: hidden;
}
.card-back::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200,168,72,0.5);
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(200,168,72,0.07) 4px, rgba(200,168,72,0.07) 5px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(200,168,72,0.07) 4px, rgba(200,168,72,0.07) 5px);
}
.card-back::after {
  content: '♦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(200,168,72,0.35);
}

/* ── Card Front ──────────────────────────────────────────────── */
.card-face {
  background: #fafafa;
  border: 1px solid #ddd;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  font-family: 'Georgia', serif;
  overflow: hidden;
}
.card-face.red  { color: var(--red); }
.card-face.black { color: #111; }

/* Corner indexes */
.card-index {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.card-index.top-left  { top: 4px; left: 5px; }
.card-index.bot-right { bottom: 4px; right: 5px; transform: rotate(180deg); }
.idx-rank { font-size: 14px; font-weight: 700; line-height: 1; }
.idx-suit { font-size: 11px; line-height: 1; }

/* Pip area */
.pip-area {
  position: absolute;
  inset: 18px 4px 18px 4px;
}
.pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  line-height: 1;
  display: block;
  pointer-events: none;
}
.pip.inv { transform: translate(-50%, -50%) rotate(180deg); }

/* Face card center */
.face-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.face-letter {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-family: 'Cinzel', serif;
}
.face-suit-center { font-size: 18px; line-height: 1; }

/* Ace large center */
.ace-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

/* ── Card Deal-In Animation ──────────────────────────────────── */
@keyframes deal-in {
  from { transform: rotateY(0deg) scale(0.3); opacity: 0; }
  to   { transform: rotateY(0deg) scale(1);   opacity: 1; }
}
.card-wrapper.dealing .card-inner {
  animation: deal-in 0.22s cubic-bezier(0.2, 0.8, 0.4, 1) both;
}

/* ── Awaiting squeeze pulse ──────────────────────────────────── */
@keyframes await-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%       { box-shadow: 0 0 12px 4px rgba(212,175,55,0.55); }
}
.card-wrapper.awaiting .card-back {
  animation: await-pulse 1.8s ease-in-out infinite;
}
.card-wrapper.squeezing .card-back {
  animation: none;
  box-shadow: 0 0 16px 6px rgba(212,175,55,0.7);
}

/* ── Gut Reveal — clip-path on card face ─────────────────────── */
@keyframes gut-reveal {
  0%   { clip-path: inset(44% 0 44% 0 round 4px); }
  25%  { clip-path: inset(40% 0 40% 0 round 4px); }
  62%  { clip-path: inset(40% 0 40% 0 round 4px); }
  100% { clip-path: inset(0%  0 0%  0 round 4px); }
}
.card-face.gutting { animation: gut-reveal 1.2s ease forwards; }

/* ── Peel Badge — card-face edge peek growing from right edge ── */
/* Grows leftward from the card's right edge during mid-squeeze.  */
/* Pips shown during squeeze; rank always hidden.                  */
/* Sibling of .card-inner so it's not affected by 3D transforms.  */
.peel-badge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 0;           /* driven by JS during squeeze */
  height: auto;
  background: #fafafa;
  border: 1px solid #e0d0d0;
  border-right: none;
  border-radius: var(--card-r) 0 0 var(--card-r);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 30;
  transition: opacity 0.08s;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
}
.peel-badge.show { opacity: 1; }

/* Pip area inside the peel badge — mirrors card pip layout */
.peek-pip-area {
  position: absolute;
  inset: 10px 3px 10px 3px;
}
.peek-pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  display: block;
  pointer-events: none;
}
.peek-pip.inv { transform: translate(-50%, -50%) rotate(180deg); }

/* Face card / Ace: large centered suit symbol */
.peek-face-sym {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* ── Gut Button ──────────────────────────────────────────────── */
.gut-button {
  position: fixed;
  background: linear-gradient(135deg, #8b0000, #cc2222);
  border: 2px solid #ff6060;
  border-radius: 8px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(180,0,0,0.5);
  animation: gut-btn-appear 0.15s ease both;
  white-space: nowrap;
  pointer-events: all;
}
.gut-button:hover { background: linear-gradient(135deg, #aa0000, #ee3333); box-shadow: 0 6px 20px rgba(200,0,0,0.65); }
.gut-button.hidden { display: none; }
@keyframes gut-btn-appear {
  from { transform: scale(0.7) translateX(-6px); opacity: 0; }
  to   { transform: scale(1)   translateX(0);    opacity: 1; }
}

/* ============================================================
   BACCARAT ROAD BOARD
   ============================================================ */
.road-section {
  width: 100%;
  max-width: 820px;
  padding: 0 16px 16px;
}

.road-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.road-tabs {
  display: flex;
  gap: 4px;
}
.road-tab {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.road-tab:hover { background: rgba(255,255,255,0.12); color: var(--text-light); }
.road-tab.active {
  background: rgba(212,175,55,0.15);
  border-color: rgba(212,175,55,0.4);
  color: var(--gold-light);
}

.road-tallies {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.tally-item b { font-weight: 700; margin-left: 3px; }
.banker-t { color: #ff6060; }
.tie-t    { color: #50d050; }
.player-t { color: #6090ff; }

.road-scroll-wrap {
  background: #0e1020;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.3) transparent;
}
.road-scroll-wrap::-webkit-scrollbar { height: 4px; }
.road-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.road-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 2px; }

.road-canvas { display: inline-block; min-width: 100%; }
.road-canvas.hidden { display: none; }

/* ── Bead Plate ───────────────────────────────────────────────── */
.bead-grid {
  display: grid;
  grid-template-rows: repeat(6, 20px);
  grid-auto-flow: column;
  grid-auto-columns: 20px;
  gap: 2px;
  min-height: 132px;
}

.bead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  position: relative;
  flex-shrink: 0;
}
.bead-banker { background: #c83030; border: 1px solid #e04040; color: #fff; }
.bead-player { background: #2050c0; border: 1px solid #3060e0; color: #fff; }
.bead-tie    { background: #207830; border: 1px solid #30a040; color: #fff; }
.bead.dragon7::after { content: '🐉'; position: absolute; font-size: 7px; bottom: -1px; right: -1px; }
.bead.panda8::after  { content: '🐼'; position: absolute; font-size: 7px; bottom: -1px; right: -1px; }
.bead.natural { box-shadow: 0 0 0 2px var(--gold); }

/* ── Big Road ─────────────────────────────────────────────────── */
.bigroad-grid {
  display: grid;
  grid-template-rows: repeat(6, 20px);
  grid-auto-flow: dense;
  grid-auto-columns: 20px;
  gap: 2px;
  min-height: 132px;
  position: relative;
}

.br-cell {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  position: relative;
  grid-row: var(--row);
  grid-column: var(--col);
}
.br-banker { background: #c83030; border: 1px solid #e04040; color: #fff; }
.br-player { background: #2050c0; border: 1px solid #3060e0; color: #fff; }
.br-cell.natural { box-shadow: 0 0 0 2px var(--gold); }
.br-cell.dragon7-mark::after { content: '🐉'; position: absolute; font-size: 6px; bottom: -1px; right: -2px; }
.br-cell.panda8-mark::after  { content: '🐼'; position: absolute; font-size: 6px; bottom: -1px; right: -2px; }

.br-cell .tie-mark {
  position: absolute;
  inset: -2px;
  pointer-events: none;
}
.br-cell .tie-mark::after {
  content: '';
  position: absolute;
  top: 2px; left: 12px;
  width: 8px; height: 8px;
  background: #30a040;
  border-radius: 50%;
  border: 1px solid #50c060;
}

/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.shake { animation: shake 0.4s ease; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --card-w: 60px; --card-h: 84px; }

  .hud-title { font-size: 0.82rem; }
  .hud-value { font-size: 0.82rem; min-width: 48px; }
  .hud { padding: 4px 10px; }

  /* Dealer stage — shrink */
  .dealer-stage { padding: 2px 10px 0; gap: 8px; }
  .char-svg { width: 50px; }
  .dealer-selector { gap: 4px; }
  .dealer-btn { font-size: 0.65rem; padding: 5px 8px; }
  .speech-bubble { font-size: 0.6rem; max-width: 100px; left: 54px; top: -4px; }
  .dealer-name-badge { font-size: 0.55rem; }

  /* Betting zones — stack into 2 rows on mobile */
  .betting-zones.arc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
    margin-bottom: 8px;
    gap: 4px;
  }

  /* Row 1: Player (left) + Banker (right) — full width arcs */
  .side-group.player-group {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    padding: 0;
    gap: 4px;
    align-items: stretch;
  }
  .side-group.banker-group {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    padding: 0;
    gap: 4px;
    align-items: stretch;
  }

  /* Row 2: Tie takes full width */
  .center-column {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    padding: 0;
    gap: 4px;
    justify-content: center;
  }

  /* Arc zones fill their cell */
  .player-arc, .banker-arc {
    border-radius: 10px;
    flex: 1;
    padding: 6px 8px;
    min-width: 0;
  }
  .arc-label { font-size: 0.7rem; }
  .arc-odds  { font-size: 0.58rem; }

  /* Side bets sit beside the arc */
  .bet-zone.side-zone {
    height: auto;
    width: 60px;
    flex-shrink: 0;
    padding: 5px 4px;
  }

  /* Tie zone fills the bottom row */
  .center-zone {
    padding: 6px 20px;
    border-radius: 20px;
  }

  .zone-name  { font-size: 0.6rem; }
  .zone-odds  { font-size: 0.56rem; }
  .zone-icon  { font-size: 0.85rem; }

  /* Cards */
  .card-row { gap: 5px; padding-bottom: 4px; }
  .hand-label { font-size: 0.7rem; }
  .hand-total { font-size: 1.2rem; }
  .vs-divider { padding-top: 18px; font-size: 0.75rem; }

  /* Control bar */
  .control-bar { padding: 6px 10px; gap: 6px; }
  .btn-ctrl { padding: 7px 10px; font-size: 0.75rem; }
  .btn-deal { font-size: 0.9rem; }
  .control-left, .control-right { min-width: 0; }

  /* Chip tray */
  .chip-tray { gap: 8px; padding: 8px 10px 14px; }
  .chip { width: 50px; height: 50px; font-size: 0.65rem; }

  /* Road board */
  .road-section { padding: 0 10px 10px; }
  .road-tab { padding: 4px 10px; font-size: 0.7rem; }
  .road-tallies { font-size: 0.72rem; gap: 8px; }

  /* Outcome */
  .outcome-banner { font-size: 1.4rem; }
  .payout-details { font-size: 0.78rem; min-width: 0; }
}