.blackjackStageBody{
  overflow:hidden;
}

@media (min-width:901px){
  body.blackjackPage{
    overflow:hidden;
  }

  .blackjackPage .casinoApp{
    height:calc(100vh - 28px);
    margin:14px auto;
    display:flex;
    flex-direction:column;
  }

  .blackjackPage .casinoTopbar{
    min-height:64px;
    flex:0 0 auto;
  }

  .blackjackPage .casinoShell{
    flex:1;
    min-height:0;
    height:auto;
    margin-top:14px;
    padding:16px;
    grid-template-columns:288px minmax(0,1fr);
    gap:16px;
  }

  .blackjackPage .betSidebar{
    padding:16px;
    gap:12px;
  }

  .blackjackPage .casinoStage{
    min-height:0;
  }

  .blackjackPage .stageHead{
    min-height:66px;
    padding:13px 18px;
  }

  .blackjackPage .stageBody{
    padding:14px 16px;
  }

  .blackjackPage .stageFooter{
    min-height:52px;
    padding:8px 14px;
    gap:8px;
  }

  .blackjackPage .payoutPill{
    min-width:0;
    flex:1;
    height:36px;
    font-size:13px;
    padding:0 8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .blackjackTable{
    display:grid;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr);
    align-content:stretch;
    row-gap:clamp(24px,7vh,66px);
  }

  .dealerZone,
  .playerZone{
    margin:0;
  }
}

.blackjackPage .casinoBg{
  background:
    radial-gradient(820px 460px at 66% 18%,rgba(246,197,90,.16),transparent 64%),
    radial-gradient(720px 460px at 30% 76%,rgba(21,112,70,.18),transparent 62%),
    linear-gradient(90deg,rgba(246,197,90,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(246,197,90,.04) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,118px 118px,118px 118px;
}

.blackjackPage .casinoStage{
  background:
    radial-gradient(560px 260px at 50% 18%,rgba(246,197,90,.105),transparent 74%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0)),
    rgba(8,11,17,.88);
}

.blackjackPage .resultLine{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.24);
}

.blackjackTable{
  position:relative;
  width:min(900px,100%);
  height:100%;
  min-height:0;
  border-radius:46px;
  border:1px solid rgba(246,197,90,.24);
  background:
    radial-gradient(520px 300px at 50% 56%,rgba(16,117,72,.52),transparent 76%),
    radial-gradient(760px 420px at 50% 0%,rgba(246,197,90,.16),transparent 62%),
    linear-gradient(90deg,rgba(246,197,90,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(246,197,90,.03) 1px,transparent 1px),
    linear-gradient(180deg,#101d19,#06090d 62%,#030508);
  background-size:100% 100%,100% 100%,96px 96px,96px 96px,100% 100%;
  box-shadow:
    0 38px 70px rgba(0,0,0,.5),
    0 0 60px rgba(246,197,90,.08),
    inset 0 0 0 8px rgba(255,255,255,.025),
    inset 0 0 0 11px rgba(246,197,90,.1),
    inset 0 0 90px rgba(0,0,0,.38);
  overflow:hidden;
  padding:34px 46px;
  transition:border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}

.blackjackTable::before{
  content:"";
  position:absolute;
  inset:30px 42px 42px;
  border-radius:50%;
  border:1px solid rgba(246,197,90,.2);
  border-top-color:rgba(255,226,154,.42);
  border-bottom-color:rgba(64,221,120,.12);
  box-shadow:
    inset 0 28px 48px rgba(246,197,90,.035),
    0 0 24px rgba(246,197,90,.055);
}

.blackjackTable::after{
  content:"BLACKJACK  PAYS  3 TO 2";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(246,197,90,.145);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:1000;
  letter-spacing:4px;
  white-space:nowrap;
  text-shadow:0 0 28px rgba(246,197,90,.1);
}

.tableGlow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(360px 150px at 50% 86%,rgba(246,197,90,.22),transparent 70%),
    radial-gradient(220px 120px at 16% 22%,rgba(255,255,255,.08),transparent 72%),
    radial-gradient(220px 120px at 84% 22%,rgba(255,255,255,.065),transparent 72%),
    linear-gradient(90deg,transparent 0 42%,rgba(255,255,255,.06) 42.2% 42.5%,transparent 43% 100%);
}

.tableGlow::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:44px;
  width:220px;
  height:74px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(246,197,90,.16),rgba(0,0,0,.2) 48%,transparent 70%);
  filter:blur(1px);
}

.blackjackTable.is-dealing{
  border-color:rgba(255,217,120,.42);
  box-shadow:
    0 42px 74px rgba(0,0,0,.52),
    0 0 42px rgba(246,197,90,.14),
    inset 0 0 0 8px rgba(255,255,255,.025),
    inset 0 0 0 11px rgba(246,197,90,.13),
    inset 0 0 90px rgba(0,0,0,.38);
}

.blackjackTable.is-win{
  animation:tableWinPulse 1.05s ease both;
}

.blackjackTable.is-loss{
  animation:tableLossPulse .72s ease both;
}

.blackjackTable.is-push{
  animation:tablePushPulse .82s ease both;
}

.handZone{
  position:relative;
  z-index:2;
  min-height:198px;
  border-radius:24px;
  border:1px solid rgba(246,197,90,.16);
  background:
    radial-gradient(260px 130px at 50% 0%,rgba(246,197,90,.08),transparent 66%),
    linear-gradient(180deg,rgba(8,12,18,.62),rgba(5,8,13,.24));
  padding:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 18px 34px rgba(0,0,0,.2);
}

.dealerZone{
  margin-bottom:66px;
}

.playerZone{
  margin-top:66px;
}

.handMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(246,234,205,.68);
  font-size:13px;
  font-weight:950;
}

.handMeta b{
  min-width:48px;
  min-height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff0b8;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(246,197,90,.14);
}

.cardHand{
  min-height:134px;
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  perspective:760px;
}

.playCard{
  position:relative;
  width:86px;
  height:124px;
  border-radius:14px;
  border:1px solid rgba(246,197,90,.36);
  background:
    linear-gradient(142deg,rgba(255,255,255,.52),transparent 24%),
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.34),transparent 26%),
    linear-gradient(160deg,#fff7df,#d8b66f 52%,#7d5723);
  color:#1c1208;
  box-shadow:
    0 18px 28px rgba(0,0,0,.36),
    0 0 18px rgba(246,197,90,.08),
    inset 0 1px 0 rgba(255,255,255,.56);
  transform:translate3d(150px,-60px,0) rotateX(58deg) rotateY(-18deg) rotate(18deg) scale(.68);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  opacity:0;
  animation:cardDeal .66s cubic-bezier(.14,.86,.12,1) forwards;
  animation-delay:calc(var(--deal-index,0) * 92ms);
  will-change:transform, opacity;
}

.playCard:nth-child(2n){
  --tilt:3deg;
}

.playCard:nth-child(2n+1){
  --tilt:-3deg;
}

.playCard.hidden{
  background:
    radial-gradient(circle at 50% 50%,rgba(246,197,90,.42) 0 16%,transparent 17%),
    radial-gradient(circle at 50% 50%,transparent 0 32%,rgba(246,197,90,.18) 33% 34%,transparent 35%),
    repeating-linear-gradient(45deg,rgba(246,197,90,.25) 0 4px,transparent 4px 12px),
    linear-gradient(180deg,#171c27,#05070b);
}

.playCard.hidden span,
.playCard.hidden b{
  display:none;
}

.playCard span{
  position:absolute;
  top:9px;
  left:10px;
  font-size:22px;
  font-weight:1000;
}

.playCard b{
  position:absolute;
  left:50%;
  top:53%;
  transform:translate(-50%,-50%);
  font-size:44px;
}

.playCard.red{
  color:#7c1621;
}

.deckShoe{
  position:absolute;
  right:52px;
  top:50%;
  z-index:3;
  width:104px;
  height:84px;
  transform:translateY(-50%) rotate(-9deg);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.38));
}

.deckShoe div{
  position:absolute;
  inset:0;
  border-radius:12px;
  border:1px solid rgba(246,197,90,.28);
  background:
    radial-gradient(circle at 50% 50%,rgba(246,197,90,.22),transparent 24%),
    repeating-linear-gradient(45deg,rgba(246,197,90,.24) 0 4px,transparent 4px 12px),
    linear-gradient(180deg,#161b25,#05070b);
  box-shadow:0 12px 20px rgba(0,0,0,.34);
}

.deckShoe div:nth-child(2){transform:translate(5px,5px)}
.deckShoe div:nth-child(3){transform:translate(10px,10px)}

.blackjackTable.is-dealing .deckShoe{
  animation:shoePulse .9s ease both;
}

.casinoSound.is-off::before{
  background:#ff5a6a;
  box-shadow:0 0 12px rgba(255,90,106,.52);
}

@media (min-width:901px){
  .blackjackTable{
    display:grid;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr);
    align-content:stretch;
    row-gap:clamp(24px,7vh,66px);
  }

  .dealerZone,
  .playerZone{
    margin:0;
  }
}

@media (min-width:901px) and (max-height:820px){
  .blackjackTable{
    height:100%;
    min-height:0;
    padding:22px 34px;
    row-gap:clamp(18px,5vh,36px);
  }

  .handZone{
    min-height:0;
    padding:13px;
    overflow:hidden;
  }

  .dealerZone{
    margin-bottom:0;
  }

  .playerZone{
    margin-top:0;
  }

  .cardHand{
    min-height:0;
    height:calc(100% - 42px);
    margin-top:8px;
  }

  .playCard{
    width:74px;
    height:106px;
  }

  .playCard b{
    font-size:38px;
  }
}

@media (min-width:901px) and (max-height:760px){
  .blackjackPage .casinoApp{
    height:calc(100vh - 16px);
    margin:8px auto;
  }

  .blackjackPage .casinoTopbar{
    min-height:52px;
    padding:7px 12px;
  }

  .blackjackPage .casinoShell{
    margin-top:8px;
    padding:10px;
    gap:12px;
    grid-template-columns:250px minmax(0,1fr);
  }

  .blackjackPage .betSidebar{
    padding:12px;
    gap:9px;
  }

  .blackjackPage .stageHead{
    min-height:50px;
    padding:8px 13px;
  }

  .blackjackPage .stageBody{
    padding:8px 12px;
  }

  .blackjackPage .stageFooter{
    min-height:42px;
    padding:6px 12px;
    gap:7px;
  }

  .blackjackPage .payoutPill{
    height:30px;
    border-radius:11px;
    font-size:11px;
    padding:0 5px;
  }

  .blackjackPage .walletCard,
  .blackjackPage .betBox,
  .blackjackPage .sidePanel,
  .blackjackPage .resultLine{
    padding:11px;
    border-radius:15px;
  }

  .blackjackPage .walletCard b{
    font-size:22px;
  }

  .blackjackPage .betInputRow{
    grid-template-columns:38px 1fr 38px;
    gap:6px;
  }

  .blackjackPage .betInputRow input,
  .blackjackPage .miniBtn{
    height:42px;
  }

  .blackjackPage .chipGrid{
    gap:6px;
    margin-top:8px;
  }

  .blackjackPage .chipBtn{
    min-height:32px;
  }

  .blackjackPage .primaryBtn{
    min-height:46px;
    font-size:20px;
  }

  .blackjackPage .gameActions{
    gap:7px;
  }

  .blackjackPage .gameAction{
    min-height:36px;
  }

  .blackjackTable{
    padding:14px 22px;
    border-radius:34px;
    row-gap:10px;
  }

  .handZone{
    border-radius:18px;
    padding:9px;
  }

  .handMeta{
    min-height:24px;
    font-size:11px;
  }

  .handMeta b{
    min-width:38px;
    min-height:24px;
  }

  .cardHand{
    height:calc(100% - 32px);
    gap:7px;
  }

  .playCard{
    width:52px;
    height:74px;
    border-radius:10px;
  }

  .playCard span{
    top:6px;
    left:7px;
    font-size:15px;
  }

  .playCard b{
    font-size:27px;
  }

  .deckShoe{
    width:70px;
    height:56px;
    right:34px;
  }
}

@keyframes cardDeal{
  0%{
    opacity:0;
    transform:translate3d(150px,-60px,0) rotateX(58deg) rotateY(-18deg) rotate(18deg) scale(.68);
    filter:brightness(1.12);
  }
  48%{
    opacity:1;
    transform:translate3d(-10px,8px,22px) rotateX(16deg) rotateY(8deg) rotate(calc(var(--tilt,0deg) - 3deg)) scale(1.045);
    filter:brightness(1.08);
  }
  78%{
    transform:translate3d(4px,-2px,8px) rotateX(4deg) rotateY(-2deg) rotate(calc(var(--tilt,0deg) + 1deg)) scale(1.012);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotate(var(--tilt,0deg)) scale(1);
    filter:brightness(1);
  }
}

@keyframes shoePulse{
  0%,100%{transform:translateY(-50%) rotate(-9deg)}
  42%{transform:translateY(-50%) translateX(-8px) rotate(-13deg);filter:drop-shadow(0 18px 26px rgba(246,197,90,.18))}
}

@keyframes tableWinPulse{
  0%,100%{
    border-color:rgba(246,197,90,.24);
    box-shadow:
      0 38px 70px rgba(0,0,0,.5),
      0 0 60px rgba(246,197,90,.08),
      inset 0 0 0 8px rgba(255,255,255,.025),
      inset 0 0 0 11px rgba(246,197,90,.1),
      inset 0 0 90px rgba(0,0,0,.38);
  }
  45%{
    border-color:rgba(70,230,126,.5);
    box-shadow:
      0 38px 70px rgba(0,0,0,.5),
      0 0 50px rgba(70,230,126,.22),
      0 0 82px rgba(246,197,90,.16),
      inset 0 0 0 8px rgba(255,255,255,.025),
      inset 0 0 0 11px rgba(70,230,126,.18),
      inset 0 0 90px rgba(0,0,0,.38);
  }
}

@keyframes tableLossPulse{
  0%,100%{filter:none}
  38%{
    filter:drop-shadow(0 0 24px rgba(255,82,100,.2));
    border-color:rgba(255,82,100,.42);
  }
}

@keyframes tablePushPulse{
  0%,100%{filter:none}
  45%{
    filter:drop-shadow(0 0 24px rgba(246,197,90,.2));
    border-color:rgba(255,217,120,.44);
  }
}