/* ============================================================================
   FILE: assets/css/blackjack.css
   FULL UPDATED (Dealer smaller + higher + total pill)
   + Realistic dealing: fly-in cards + dealer hole flip + soft extra dealer hits
============================================================================ */

:root{
  --bg:#050507;

  --gold: rgba(255, 210, 120, .92);
  --goldSoft: rgba(255, 210, 120, .22);
  --text: rgba(255,245,230,.92);
  --muted: rgba(232,224,199,.72);

  --tableImage: url("/assets/table.png");
  --tableScale: 1.28;

  --seatLift: -38px;
  --ring: clamp(34px, 2.0vw, 52px);

  --sbW: 24px;
  --sbNear: 2px;

  --print: rgba(255,210,120,.78);
  --printSoft: rgba(255,210,120,.28);

  --badgeFont: 11px;

  --activeGlow: rgba(80,255,160,.18);

  --sbTextSize: 18px;
  --sbTextTracking: .2px;

  --trayBg: rgba(0,0,0,.00);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 50% 20%, rgba(255,210,120,.10), transparent 60%),
    radial-gradient(900px 520px at 70% 85%, rgba(80,255,160,.06), transparent 60%),
    var(--bg);
  color: var(--text);
}

.bj-page{ padding: 18px; }
.bj-container{ width: min(1900px, 100%); margin: 0 auto; }
.bj-shell{ width: min(1500px, 100%); margin: 0 auto; }
.bj-shell--wide{ width: min(1800px, 100%); }

.bj-topbar{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.bj-back{
  text-decoration:none;
  color: rgba(255,210,120,.85);
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.bj-back:hover{
  background: rgba(255,210,120,.07);
  border-color: rgba(255,210,120,.14);
}
.bj-title{ font-size: 22px; font-weight: 900; letter-spacing: .2px; margin-top: 4px; }
.bj-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(232,224,199,.72);
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
.bj-dot{ opacity:.55; }

.bj-alert{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid rgba(232,224,199,.14);
  background: rgba(0,0,0,.28);
}
.bj-alert--error{ border-color: rgba(255,120,120,.28); box-shadow: 0 0 0 4px rgba(255,120,120,.08); }
.bj-alert--ok{ border-color: rgba(80,255,160,.22); box-shadow: 0 0 0 4px rgba(80,255,160,.07); }

.bj-topbar__right{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.bj-muted{ color: rgba(232,224,199,.72); font-size: 13px; }

.bj-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(232,224,199,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,245,230,.92);
  cursor:pointer;
  font-weight: 800;
  letter-spacing: .2px;
}
.bj-btn--gold{
  border-color: rgba(255,210,120,.30);
  background: linear-gradient(135deg, #ffd77a 0%, #c9912a 100%);
  color: #1b1206;
}
.bj-btn:hover{ filter: brightness(1.05); }
.bj-btn:active{ transform: translateY(1px); }

.bj-tableWrap{
  border-radius: 22px;
  background: rgba(12, 12, 14, .72);
  border: 1px solid rgba(255, 210, 120, .18);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.bj-table{ padding: 80px; }

.bj-stage{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  transform: scale(var(--tableScale));
  transform-origin: 50% 55%;
}

.bj-tableBg{
  position:absolute;
  inset:0;
  background: var(--tableImage) center / contain no-repeat;
  filter: drop-shadow(0 32px 120px rgba(0,0,0,.75));
}
.bj-tableVignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140% 85% at 50% 60%, transparent 58%, rgba(0,0,0,.55) 92%),
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.06), transparent 55%);
}

/* ===================== Dealer ===================== */
.bj-dealer{
  position:absolute;
  left:50%;
  top: 7.2%;
  transform: translateX(-50%);
  text-align:center;
  pointer-events:none;
  z-index: 3;
}

.bj-role{
  display:inline-block;
  font-size:12px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,210,120,.18);
  color:rgba(232,224,199,.72);
}

/* Base cards row */
.bj-cards{ margin-top:10px; display:flex; justify-content:center; gap: 10px; }

/* dealer cards smaller */
.bj-dealer .bj-cards{ margin-top: 8px; gap: 9px; }
.bj-dealer .bj-card{
  width:42px;
  height:62px;
  border-radius:10px;
}
.bj-dealer .bj-card .tl,
.bj-dealer .bj-card .br{ font-size: 10px; }
.bj-dealer .bj-card .mid{ font-size: 16px; }

/* dealer total pill */
.bj-dealerTotalPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 30px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .2px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,210,120,.32);
  color: rgba(255,245,230,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  margin-top: 6px;
}
.bj-meta{ margin-top: 6px; font-size: 12px; color: rgba(232,224,199,.72); }
/* ===================== Dealer 3D Hole Flip + Slow Hit Deal ===================== */

/* Slow slide/fade deal (used for dealer cards + can be reused elsewhere) */
.bj-dealSlow{
  opacity: 0;
  transform: translateY(-10px) translateX(-8px) scale(.98);
  animation: bjDealSlowIn .55s ease-out forwards;
}
@keyframes bjDealSlowIn{
  to { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
}

/* 3D wrapper uses your existing .bj-card faces */
.bj-card3d{
  width: 42px;     /* matches your dealer size */
  height: 62px;
  perspective: 900px;
  display: inline-block;
}
.bj-card3d .bj-card{
  width: 42px;
  height: 62px;
  border-radius: 10px;
}

/* inner flip */
.bj-card3d__inner{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 680ms cubic-bezier(.2,.8,.2,1);
}
.bj-card3d.is-flipped .bj-card3d__inner{
  transform: rotateY(180deg);
}

/* faces */
.bj-card3d__face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.bj-card3d__front{ transform: rotateY(180deg); }
.bj-card3d__back{ transform: rotateY(0deg); }

/* Optional: tiny shine during flip */
.bj-card3d.is-flipped{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
}


/* ===================== Cards ===================== */
.bj-card{
  width:52px;
  height:76px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  color: rgba(10,10,12,.88);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.34), transparent 55%),
    linear-gradient(180deg,#fff,#eee);
  box-shadow:0 18px 38px rgba(0,0,0,.36);
  position: relative;
  overflow:hidden;
}
.bj-card .tl, .bj-card .br{ position:absolute; font-size: 12px; font-weight: 1000; }
.bj-card .tl{ left:8px; top:6px; }
.bj-card .br{ right:8px; bottom:6px; transform: rotate(180deg); }
.bj-card .mid{ font-size: 20px; }

.bj-card.back{
  color: rgba(255,245,230,.90);
  border:1px solid rgba(255,210,120,.22);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(255,210,120,.60), rgba(120,70,20,.55)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 8px, rgba(255,255,255,.10) 8px 16px);
}

.bj-red{ color: #b10c0c; }

/* existing small “pop in” (still used in some cases) */
.deal-in{ animation: dealIn .22s ease-out both; }
@keyframes dealIn{
  from{ transform: translateY(-6px) scale(.92); opacity: .2; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* ===================== NEW: Realistic dealing fly + flip ===================== */

/* flying card element (overlay) */
.bj-flyCard{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(0deg) scale(1);
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.55));
}

/* smooth slide + fade */
.bj-flyCard.is-run{
  transition:
    transform 520ms cubic-bezier(.16,.84,.18,1),
    opacity 260ms ease;
  opacity: 1;
}

/* softer arrival */
.bj-card.is-arriveFade{
  opacity: 0;
  animation: arriveFade 240ms ease forwards;
}
@keyframes arriveFade{
  to { opacity: 1; }
}

/* dealer hole flip container */
.bj-flip{
  position: relative;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.2,.8,.2,1);
}
.bj-flip.is-faceup{
  transform: rotateY(180deg);
}
.bj-flipFace{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
}
.bj-flipFace.back{
  transform: rotateY(0deg);
}
.bj-flipFace.front{
  transform: rotateY(180deg);
}

/* ===================== HUD ===================== */
.bj-hud{
  position:absolute;
  left: 60px;
  top: 20px;
  z-index: 4;
  display:flex;
  flex-direction:column;
  gap: 8px;
  pointer-events:none;
}
.bj-hud__row{ display:flex; gap: 8px; flex-wrap:wrap; }
.bj-hud__row--small{ opacity:.95; }

.bj-pill{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,210,120,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,245,230,.92);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}
.bj-pill--soft{ border-color: rgba(232,224,199,.14); }
.bj-pill--timer{ border-color: rgba(80,255,160,.18); }

/* ===================== Seats ===================== */
.bj-seat{
  position:absolute;
  transform:
    translate(-50%, -50%)
    translateY(var(--seatLift))
    rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  cursor:pointer;
  z-index: 5;
  user-select:none;
}
.bj-seat:hover{ filter: drop-shadow(0 20px 26px rgba(0,0,0,.35)); }
.bj-seat.is-active{ filter: drop-shadow(0 0 26px var(--activeGlow)) drop-shadow(0 20px 26px rgba(0,0,0,.35)); }
.bj-seat.is-sitout{ opacity: .55; filter: grayscale(1); }

.bj-betRing{
  width: var(--ring);
  height: var(--ring);
  border-radius:50%;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 18px rgba(0,0,0,.28), inset 0 0 0 9px rgba(0,0,0,.10);
  position:relative;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.05);
  overflow:hidden;
}
.bj-betRing::after{
  content:"";
  position:absolute;
  inset: 9px;
  border-radius:50%;
  border: 2px solid var(--goldSoft);
  pointer-events:none;
  z-index: 1;
}

.bj-seat__avatar{
  width: calc(var(--ring) - 10px);
  height: calc(var(--ring) - 10px);
  border-radius: 50%;
  object-fit: cover;
  display:block;
  position: relative;
  z-index: 0;
}
.bj-seat__badge{ font-weight: 1000; font-size: 12px; color: rgba(255,245,230,.92); text-shadow: 0 6px 16px rgba(0,0,0,.45); }
.bj-empty{ opacity: .7; }

.bj-seatMeta{
  position:absolute;
  left:50%;
  top: calc(100% + 6px);
  transform: translateX(-50%) rotate(calc(var(--rot, 0deg) * -1));
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  pointer-events:auto;
  white-space:nowrap;
  z-index: 30;
}

.bj-seatNamePill{
  font-size: 11px;
  padding: 5px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.44);
  border:1px solid rgba(255,210,120,.54);
  pointer-events:auto;
}
.bj-seatNamePill.is-clickable{ cursor:pointer; }

.bj-seatChipsPill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.40);
  border:1px solid rgba(232,224,199,.54);
  color: rgba(232,224,199,.85);
}

.bj-seat__sitout{
  margin-top: 2px;
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: .08em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
  color: rgba(255,245,230,.9);
}

/* I'm back button */
.bj-imBackBtn{
  pointer-events:auto;
  margin-top: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(80,255,160,.25);
  background: rgba(0,0,0,.22);
  color: rgba(255,245,230,.92);
  font-weight: 900;
  cursor: pointer;
}
.bj-imBackBtn:hover{ filter: brightness(1.08); }
.bj-imBackBtn:active{ transform: translateY(1px); }

/* Bet pile overlay */
.bj-seatBetPile{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index: 5;
}
.bj-seatBetPile.show{ display:flex; }
.bj-seatBetPile .bj-seatChip{
  width: calc(var(--ring) - 6px);
  height: calc(var(--ring) - 6px);
  display:grid;
  place-items:center;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.42));
}
.bj-seatBetPile .bj-chipSvg{
  width: calc(var(--ring) - 6px);
  height: calc(var(--ring) - 6px);
  display:block;
}

/* ===================== Sidebets (RESTORED) ===================== */
.bj-sb{
  position:absolute;
  top:50%;
  left:50%;
  width: 24px;
  height: var(--ring);
  z-index: 1;
  pointer-events:none;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.bj-sb-left{
  transform: translate(-50%, -50%) translateX(calc(-0.78 * (var(--ring) / 2 + var(--sbNear) + 24px / 2)));
}
.bj-sb-right{
  transform: translate(-50%, -50%) translateX(calc(   0.78 * (var(--ring) / 2 + var(--sbNear) + 24px / 2)));
}
.bj-sb svg{ width:100%; height:100%; display:block; overflow:visible; }
.bj-sb path{ fill:none; stroke: var(--print); stroke-width: 1.35; stroke-linejoin:round; stroke-linecap:round; }
.bj-sb .dash{ fill:none; stroke: var(--printSoft); stroke-width: 1.25; stroke-dasharray: 3 4; opacity:.85; }

.bj-sbText{
  position:absolute;
  top:50%;
  left:50%;
  width: 24px;
  height: var(--ring);
  pointer-events:none;
  z-index: 2;
  transform: translate(-50%,-50%);
  transform-origin: 50% 50%;
}
.bj-sbText.left{
  transform: translate(-50%,-50%) translateX(calc(-0.78 * (var(--ring) / 2 + var(--sbNear) + 24px / 2))) rotate(calc(var(--rotInv, 0deg) - 6deg));
}
.bj-sbText.right{
  transform: translate(-50%,-50%) translateX(calc(   0.58 * (var(--ring) / 2 + var(--sbNear) + 24px / 2))) rotate(calc(var(--rotInv, 0deg) + 6deg));
}
.bj-sbText svg{ width:100%; height:100%; display:block; overflow:visible; transform: scaleY(-1); transform-origin: 50% 50%; }
.bj-sbText text{
  fill: rgba(255,245,230,.92);
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: .2px;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.22);
  stroke-width: 1px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* ===================== Hands (seat) ===================== */
.bj-stage .bj-seatHands{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: 50% 92%;
  pointer-events:none;
  z-index: 6;
  width: 140px;
}

.bj-seatHands .bj-card{
  width: 32px;
  height: 48px;
  border-radius: 9px;
  box-shadow:
    0 12px 26px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(180deg,#ffffff,#ececec);
}
.bj-seatHands .bj-card .tl,
.bj-seatHands .bj-card .br{ font-size: 9px; font-weight: 1000; }
.bj-seatHands .bj-card .tl{ left:5px; top:3px; }
.bj-seatHands .bj-card .br{ right:5px; bottom:3px; }
.bj-seatHands .bj-card .mid{ font-size: 14px; filter: drop-shadow(0 2px 0 rgba(255,255,255,.25)); }

.bj-seatHands .bj-cards{ margin-top: 0; gap: 0; align-items: flex-start; }
.bj-seatHands .bj-cards .bj-card + .bj-card{ margin-left: -22px; transform: translate(1px, -10px); }
.bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card{ margin-left: -22px; transform: translate(2px, -20px); }
.bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card + .bj-card{ margin-left: -22px; transform: translate(3px, -30px); }
.bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card + .bj-card + .bj-card{ margin-left: -22px; transform: translate(4px, -40px); }

/* Total pill pinned to hand stack */
.bj-seatHands .bj-handStack{
  margin-bottom: 4px;
  position: relative;
  padding-bottom: 22px;
}
.bj-handTotalPill{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 30px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .2px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,210,120,.32);
  color: rgba(255,245,230,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.bj-handTotalPill.is-active{
  border-color: rgba(80,255,160,.38);
  box-shadow: 0 0 0 4px rgba(80,255,160,.10), 0 10px 22px rgba(0,0,0,.35);
}
.bj-handTotalPill.is-bust{ border-color: rgba(255,90,90,.35); }
.bj-handTotalPill.is-stand{ border-color: rgba(255,210,120,.38); }

/* Split hands horizontal */
.bj-seatHands--multi{
  display:flex;
  flex-direction: row;
  gap: 14px;
  align-items:flex-start;
  justify-content:center;
  width: auto;
}

/* ===================== Float controls ===================== */
.bj-floatControls{
  position:absolute;
  left:50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(720px, 92%);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.bj-floatControls__title{
  font-weight: 1000;
  margin-bottom: 8px;
  color: rgba(255,245,230,.92);
  text-align:center;
  text-shadow: 0 18px 45px rgba(0,0,0,.6);
}
.bj-floatControls__row{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
}

/* Betting tray */
.bj-betTray{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.bj-undoBtn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,210,120,.26);
  background: rgba(0,0,0,.22);
  color: rgba(255,245,230,.92);
  font-weight: 1000;
  cursor: pointer;
  display:grid;
  place-items:center;
  margin-right: 4px;
  box-shadow: none;
}
.bj-betChips{ display:flex; gap: 6px; align-items:flex-end; }

.bj-chipBtn{
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display:grid;
  place-items:center;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.25));
  transition: transform .08s ease, filter .08s ease;
  transform: translateY(calc((1 - var(--chipScale, 1)) * 8px)) scale(var(--chipScale, 1));
  position: relative;
}
.bj-chipSvg{ width: 52px; height: 52px; display:block; }

.bj-chipBtn.is-selected::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255,210,120,.65);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events:none;
}

.bj-err{ color: rgba(255,170,170,.95); font-size: 12px; text-align:center; }

/* Circular phase clocks */
.bj-phaseClock{
  margin: 12px auto 0;
  width: 54px;
  height: 54px;
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));
}
.bj-phaseClock__svg{
  width: 54px;
  height: 54px;
  display:block;
  transform: rotate(-90deg);
}
.bj-phaseClock__track{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 4;
}
.bj-phaseClock__prog{
  fill: none;
  stroke: rgba(255,210,120,.80);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset .12s linear, stroke .12s linear;
}
.bj-phaseClock__prog--act{
  stroke: rgba(80,255,160,.70);
}
.bj-phaseClock__txt{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,245,230,.96);
  text-shadow: 0 10px 22px rgba(0,0,0,.65);
}

/* Action circles */
.bj-actionsRow{ gap: 12px; }
.bj-actCircle{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 18px 34px rgba(0,0,0,.35);
  transition: transform .10s ease, filter .10s ease;
  color: rgba(255,255,255,.96);
}
.bj-actionsRow .bj-actCircle:nth-child(1),
.bj-actionsRow .bj-actCircle:nth-child(4){ transform: scale(.92); }
.bj-actionsRow .bj-actCircle:nth-child(2),
.bj-actionsRow .bj-actCircle:nth-child(3){ transform: scale(1.02); }
.bj-actCircle:hover{ filter: brightness(1.06); }
.bj-actCircle:active{ transform: scale(.96); }
.bj-actCircle:disabled{ opacity:.45; filter: grayscale(1); cursor:not-allowed; box-shadow: none; }

.bj-act--double{ background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(180deg, rgba(255,160,70,.95), rgba(160,70,10,.92)); }
.bj-act--hit{    background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(180deg, rgba(80,220,120,.95), rgba(20,120,55,.92)); }
.bj-act--stand{  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.20), transparent 55%), linear-gradient(180deg, rgba(255,90,90,.95), rgba(140,20,20,.92)); }
.bj-act--split{  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(180deg, rgba(80,150,255,.95), rgba(30,70,180,.92)); }

.bj-actIcon{ font-size: 16px; font-weight: 1000; line-height: 1; }
.bj-actIcon--svg{ display:grid; place-items:center; }
.bj-actIcon--svg svg{ display:block; }

/* Winners modal unchanged */
.bj-modalOpen{ overflow:hidden; }
.bj-modal{ position:fixed; inset:0; z-index: 999; }
.bj-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); }
.bj-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92%);
  border-radius: 18px;
  background: rgba(12,12,14,.92);
  border: 1px solid rgba(255,210,120,.18);
  box-shadow: 0 30px 110px rgba(0,0,0,.70);
  padding: 14px;
}

/* Seat positions */
.bj-seat--1{ left: 76.5%; top: 50%;   --rot: -20deg; --rotInv: 20deg; }
.bj-seat--2{ left: 68.5%; top: 55.5%; --rot: -14deg; --rotInv: 14deg; }
.bj-seat--3{ left: 59.2%; top: 59.5%; --rot: -7deg;  --rotInv: 7deg;  }
.bj-seat--4{ left: 50%;   top: 61%;   --rot: 0deg;   --rotInv: 0deg;  }
.bj-seat--5{ left: 40.8%; top: 59.5%; --rot: 7deg;   --rotInv: -7deg; }
.bj-seat--6{ left: 32.5%; top: 56.5%; --rot: 14deg;  --rotInv: -14deg;}
.bj-seat--7{ left: 24.5%; top: 52%;   --rot: 20deg;  --rotInv: -20deg;}

.bj-stage .bj-seatHands--1{ left: 75.5%; top: 35.5%; --rot: -20deg; }
.bj-stage .bj-seatHands--2{ left: 68.5%; top: 39.5%; --rot: -14deg; }
.bj-stage .bj-seatHands--3{ left: 59.2%; top: 42.0%; --rot: -7deg;  }
.bj-stage .bj-seatHands--4{ left: 50.0%; top: 42.8%; --rot: 0deg;   }
.bj-stage .bj-seatHands--5{ left: 40.8%; top: 42.0%; --rot: 7deg;   }
.bj-stage .bj-seatHands--6{ left: 32.5%; top: 39.5%; --rot: 14deg;  }
.bj-stage .bj-seatHands--7{ left: 24.5%; top: 35.5%; --rot: 20deg;  }

/* ===================== PATCH: Dramatic dealing + jitter + nicer 3D flip ===================== */

/* Slow dramatic slide-in (used by both players and dealer) */
.bj-dealSlow{
  opacity: 0;
  transform: translate(var(--jx, 0px), calc(var(--jy, 0px) - 18px)) rotate(var(--jr, 0deg)) scale(.96);
  animation: bjDealSlowIn 520ms cubic-bezier(.16, .9, .22, 1) forwards;
  animation-delay: var(--dealDelay, 0ms);
  will-change: transform, opacity;
}

@keyframes bjDealSlowIn{
  0%   { opacity: 0; transform: translate(var(--jx, 0px), calc(var(--jy, 0px) - 18px)) rotate(var(--jr, 0deg)) scale(.96); }
  70%  { opacity: 1; transform: translate(calc(var(--jx, 0px) * .35), calc(var(--jy, 0px) * .35)) rotate(calc(var(--jr, 0deg) * .35)) scale(1.0); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1.0); }
}

/* Nicer dealer hole-card 3D flip */
.bj-card3d{
  width: 42px;  /* matches dealer card size from your CSS */
  height: 62px;
  perspective: 900px;
  transform-style: preserve-3d;
}

.bj-card3d__inner{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.16, .9, .22, 1);
  will-change: transform;
}

.bj-card3d.is-flipped .bj-card3d__inner{
  transform: rotateY(180deg);
}

.bj-card3d__face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.bj-card3d__front{
  transform: rotateY(180deg);
}

.bj-card3d__back{
  transform: rotateY(0deg);
}

/* Optional: tiny “snap” shadow while flipping */
.bj-card3d.is-flipped{
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.35));
}
/* ===================== Hand result pills (JS: .bj-resultPill) ===================== */
.bj-resultPill{
  position: absolute;
  left: 50%;
  bottom: -24px; /* sits just under the total pill */
  transform: translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 58px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,245,230,.94);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Ensure hand stack has room for the result pill */
.bj-seatHands .bj-handStack{
  padding-bottom: 42px; /* was 22px; needs room for total + result */
}

.bj-resultPill.is-win{
  background: rgba(50, 220, 140, .14);
  border-color: rgba(50, 220, 140, .32);
  color: rgba(160, 255, 210, .95);
}

.bj-resultPill.is-lose{
  background: rgba(255, 80, 80, .12);
  border-color: rgba(255, 80, 80, .30);
  color: rgba(255, 190, 190, .95);
}

.bj-resultPill.is-push{
  background: rgba(255, 210, 120, .10);
  border-color: rgba(255, 210, 120, .26);
  color: rgba(255, 230, 175, .95);
}

.bj-resultPill.is-bj{
  background: rgba(120, 190, 255, .12);
  border-color: rgba(120, 190, 255, .30);
  color: rgba(200, 235, 255, .95);
}

/* ===================== Winners modal (list + layout) ===================== */

.bj-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bj-modal__title{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(255,245,230,.96);
}

.bj-modal__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,210,120,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,245,230,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.bj-modal__close:hover{ filter: brightness(1.06); }
.bj-modal__close:active{ transform: translateY(1px); }

.bj-modal__sub{
  font-size: 13px;
  color: rgba(232,224,199,.72);
  margin-bottom: 10px;
}

.bj-winners{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.bj-winnerRow{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,210,120,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}

.bj-winnerRank{
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,210,120,.92);
}

.bj-winnerName{
  font-weight: 1000;
  font-size: 14px;
  color: rgba(255,245,230,.95);
  line-height: 1.1;
}

.bj-winnerMeta{
  grid-column: 2 / -1;
  font-size: 12px;
  color: rgba(232,224,199,.72);
  margin-top: -2px;
}

.bj-modal__foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,210,120,.12);
}

/* ============================================================================
   MOBILE: show ONLY my seat + my hands (desktop stays full table)
   Requires: <div class="bj-page" data-my-seat="4">
============================================================================ */

@media (max-width: 860px){

  /* Make the table fit phones nicer */
  .bj-page{ padding: 10px; }
  .bj-table{ padding: 26px; }

  /* Reduce scaling so it fits */
  :root{ --tableScale: 1.0; }

  /* Keep HUD readable */
  .bj-hud{
    left: 12px;
    top: 12px;
    transform: none;
  }

  /* Float controls center a bit lower (thumb reach) */
  .bj-floatControls{
    top: 58%;
    width: min(520px, 94%);
  }

  /* --- Default mobile behavior: hide all seats/hands --- */
  .bj-seat,
  .bj-stage .bj-seatHands{
    display: none !important;
  }

  /* Always keep dealer visible */
  .bj-dealer{
    display: block !important;
    top: 6.5%;
  }

  /* If user has NO seat (data-my-seat="0"), show all (spectator mode) */
  .bj-page[data-my-seat="0"] .bj-seat,
  .bj-page[data-my-seat="0"] .bj-stage .bj-seatHands{
    display: block !important;
  }

  /* --- Show ONLY my seat + my hands --- */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    display: block !important;
  }

  .bj-page[data-my-seat="1"]  #bjSeatHands1,
  .bj-page[data-my-seat="2"]  #bjSeatHands2,
  .bj-page[data-my-seat="3"]  #bjSeatHands3,
  .bj-page[data-my-seat="4"]  #bjSeatHands4,
  .bj-page[data-my-seat="5"]  #bjSeatHands5,
  .bj-page[data-my-seat="6"]  #bjSeatHands6,
  .bj-page[data-my-seat="7"]  #bjSeatHands7{
    display: block !important;
  }

  /* --- Mobile “focus” layout: put your seat bottom-center --- */
  /* We reposition ONLY your seat/hand so it’s readable on phones */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    left: 50% !important;
    top: 86% !important;
    --rot: 0deg !important;
    --rotInv: 0deg !important;
    transform: translate(-50%, -50%) translateY(0) rotate(0deg) !important;
  }

  .bj-page[data-my-seat="1"]  .bj-stage #bjSeatHands1,
  .bj-page[data-my-seat="2"]  .bj-stage #bjSeatHands2,
  .bj-page[data-my-seat="3"]  .bj-stage #bjSeatHands3,
  .bj-page[data-my-seat="4"]  .bj-stage #bjSeatHands4,
  .bj-page[data-my-seat="5"]  .bj-stage #bjSeatHands5,
  .bj-page[data-my-seat="6"]  .bj-stage #bjSeatHands6,
  .bj-page[data-my-seat="7"]  .bj-stage #bjSeatHands7{
    left: 50% !important;
    top: 62% !important;
    --rot: 0deg !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    width: 200px;
  }

  /* Make your hand cards bigger on mobile */
  .bj-stage .bj-seatHands .bj-card{
    width: 42px;
    height: 62px;
    border-radius: 10px;
  }
  .bj-stage .bj-seatHands .bj-card .mid{ font-size: 18px; }
  .bj-stage .bj-seatHands .bj-card .tl,
  .bj-stage .bj-seatHands .bj-card .br{ font-size: 10px; }

  /* Make your seat ring slightly larger */
  :root{ --ring: 58px; }

  /* Keep your name/chips readable */
  .bj-seatNamePill{ font-size: 12px; padding: 6px 14px; }
  .bj-seatChipsPill{ font-size: 12px; padding: 5px 12px; }
}

/* ============================================================================
   MOBILE STACK FIX: HUD top-center + less overlap + better spacing
   (paste at VERY bottom of blackjack.css)
============================================================================ */
@media (max-width: 860px){

  /* HUD: center it, let it wrap, make pills smaller */
  .bj-hud{
    left: 50% !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 16px);
    align-items: center;
    gap: 6px;
  }
  .bj-hud__row{
    justify-content: center;
    gap: 6px;
  }
  .bj-pill{
    padding: 5px 9px;
    font-size: 11px;
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }
  .bj-hud__row--small{ opacity: .92; }

  /* Give the top some breathing room */
  .bj-dealer{
    top: 4.8% !important;
  }

  /* Your focused hand area: push it lower so it doesn't collide with HUD/table rim */
  .bj-page[data-my-seat="1"]  .bj-stage #bjSeatHands1,
  .bj-page[data-my-seat="2"]  .bj-stage #bjSeatHands2,
  .bj-page[data-my-seat="3"]  .bj-stage #bjSeatHands3,
  .bj-page[data-my-seat="4"]  .bj-stage #bjSeatHands4,
  .bj-page[data-my-seat="5"]  .bj-stage #bjSeatHands5,
  .bj-page[data-my-seat="6"]  .bj-stage #bjSeatHands6,
  .bj-page[data-my-seat="7"]  .bj-stage #bjSeatHands7{
    top: 69% !important;     /* was ~62% */
    width: 220px;
  }

  /* Reduce the "super stacked" card overlap on mobile */
  .bj-seatHands .bj-cards .bj-card + .bj-card{
    margin-left: -14px !important;
    transform: translate(1px, -6px) !important;
  }
  .bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card{
    margin-left: -14px !important;
    transform: translate(2px, -12px) !important;
  }
  .bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card + .bj-card{
    margin-left: -14px !important;
    transform: translate(3px, -18px) !important;
  }
  .bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card + .bj-card + .bj-card{
    margin-left: -14px !important;
    transform: translate(4px, -24px) !important;
  }

  /* Slightly smaller cards so they don't dominate the table */
  .bj-stage .bj-seatHands .bj-card{
    width: 38px !important;
    height: 56px !important;
    border-radius: 10px;
  }
  .bj-stage .bj-seatHands .bj-card .mid{ font-size: 16px !important; }

  /* Keep your seat clear of the hand stack */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    top: 88% !important;    /* was ~86% */
  }

  /* Optional: hide the HUD second row on very small phones (uncomment if needed) */
  /*
  @media (max-width: 390px){
    .bj-hud__row--small{ display:none; }
  }
  */
}/* ============================================================================
   PORTRAIT MOBILE LAYOUT (fills screen, big centered table, clean HUD/controls)
============================================================================ */
@media (max-width: 860px){

  /* Let the game use the whole phone height */
  .bj-page{ padding: 0; }
  .bj-tableWrap{
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    min-height: calc(100svh - 0px);
    background: radial-gradient(900px 520px at 50% 15%, rgba(255,210,120,.10), transparent 60%),
                radial-gradient(900px 520px at 50% 85%, rgba(80,255,160,.06), transparent 60%),
                rgba(5,5,7,1);
  }
  .bj-table{ padding: 0; }

  /* Stage becomes a full-height portrait canvas */
  .bj-stage{
    aspect-ratio: auto;
    height: 100svh;          /* modern mobile-safe viewport */
    width: 100%;
    transform: none !important;
  }

  /* Make the table image BIG and centered */
  .bj-tableBg{
    inset: 0;
    background: var(--tableImage) center / cover no-repeat; /* BIG */
    opacity: .98;
    filter: drop-shadow(0 28px 90px rgba(0,0,0,.70));
  }

  /* Strong vignette so UI stays readable */
  .bj-tableVignette{
    background:
      radial-gradient(120% 80% at 50% 35%, transparent 40%, rgba(0,0,0,.55) 90%),
      radial-gradient(120% 90% at 50% 12%, rgba(0,0,0,.35), transparent 60%);
  }

  /* HUD: top, centered, not stacked */
  .bj-hud{
    position: absolute;
    left: 50% !important;
    top: 10px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 18px);
    z-index: 20;
    gap: 6px;
    align-items: center;
    pointer-events: none;
  }
  .bj-hud__row{
    justify-content: center;
    gap: 6px;
  }
  .bj-pill{
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Dealer stays visible near top area */
  .bj-dealer{
    top: 9% !important;
    z-index: 10;
  }

  /* Float controls: lock near bottom like a mobile game UI */
  .bj-floatControls{
    position: absolute;
    left: 50%;
    top: auto !important;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(560px, 94%);
    z-index: 30;
  }

  /* === Focus mode (only my seat + my hands) still applies === */
  .bj-seat,
  .bj-stage .bj-seatHands{
    display:none !important;
  }

  /* spectator: show all if no seat */
  .bj-page[data-my-seat="0"] .bj-seat,
  .bj-page[data-my-seat="0"] .bj-stage .bj-seatHands{
    display:block !important;
  }

  /* Show only my seat + hands */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    display:block !important;
  }
  .bj-page[data-my-seat="1"]  #bjSeatHands1,
  .bj-page[data-my-seat="2"]  #bjSeatHands2,
  .bj-page[data-my-seat="3"]  #bjSeatHands3,
  .bj-page[data-my-seat="4"]  #bjSeatHands4,
  .bj-page[data-my-seat="5"]  #bjSeatHands5,
  .bj-page[data-my-seat="6"]  #bjSeatHands6,
  .bj-page[data-my-seat="7"]  #bjSeatHands7{
    display:block !important;
  }

  /* Place my hand mid-lower (centered) */
  .bj-page[data-my-seat="1"]  .bj-stage #bjSeatHands1,
  .bj-page[data-my-seat="2"]  .bj-stage #bjSeatHands2,
  .bj-page[data-my-seat="3"]  .bj-stage #bjSeatHands3,
  .bj-page[data-my-seat="4"]  .bj-stage #bjSeatHands4,
  .bj-page[data-my-seat="5"]  .bj-stage #bjSeatHands5,
  .bj-page[data-my-seat="6"]  .bj-stage #bjSeatHands6,
  .bj-page[data-my-seat="7"]  .bj-stage #bjSeatHands7{
    left: 50% !important;
    top: 62% !important;
    --rot: 0deg !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    width: 240px;
    z-index: 18;
  }

  /* Place my seat just above the controls */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    left: 50% !important;
    top: 80% !important;
    --rot: 0deg !important;
    --rotInv: 0deg !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    z-index: 25;
  }

  /* Make hand cards readable but not huge */
  .bj-stage .bj-seatHands .bj-card{
    width: 40px;
    height: 60px;
    border-radius: 10px;
  }

  /* Optional: reduce overlap a bit */
  .bj-seatHands .bj-cards .bj-card + .bj-card{ margin-left: -14px !important; transform: translate(1px, -6px) !important; }
  .bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card{ margin-left: -14px !important; transform: translate(2px, -12px) !important; }
  .bj-seatHands .bj-cards .bj-card + .bj-card + .bj-card + .bj-card{ margin-left: -14px !important; transform: translate(3px, -18px) !important; }
}

/* ============================================================================
   MOBILE OVERRIDE: Float controls centered + keep seat clickable
   (paste at VERY bottom)
============================================================================ */
@media (max-width: 860px){

  /* Center the floating controls */
  .bj-floatControls{
    left: 50% !important;
    top: 40% !important;          /* mid-screen */
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, 94%) !important;
    z-index: 30;
  }

  /* IMPORTANT:
     Make the wrapper ignore clicks so it doesn't block seat clicks.
     Then enable clicks only on the actual interactive elements inside. */
  .bj-floatControls{
    pointer-events: none !important;
  }
  .bj-floatControls *{
    pointer-events: auto !important;
  }

  /* Keep your seat ABOVE the table and clickable */
  .bj-seat{ z-index: 26; }
  .bj-seatMeta{ z-index: 40; }

  /* If your seat is still hard to tap, slightly raise it away from the controls */
  .bj-page[data-my-seat="1"]  #bjSeatBox1,
  .bj-page[data-my-seat="2"]  #bjSeatBox2,
  .bj-page[data-my-seat="3"]  #bjSeatBox3,
  .bj-page[data-my-seat="4"]  #bjSeatBox4,
  .bj-page[data-my-seat="5"]  #bjSeatBox5,
  .bj-page[data-my-seat="6"]  #bjSeatBox6,
  .bj-page[data-my-seat="7"]  #bjSeatBox7{
    top: 83% !important; /* was 80% in your portrait block */
  }
}