/* Blackjack v2 polish. Desktop-first, with clean betting / active / result states. */

.game-stage:has(.blackjack-table){background:#060e0b}
.game-stage:has(.blackjack-table) .board-frame{background:#06110d;border-radius:20px}

.blackjack-table{
  min-height:640px;max-width:1500px;margin:0 auto;
  padding:18px 28px 22px;gap:8px;border-radius:20px;
  background:
    radial-gradient(circle at 50% 46%,rgba(48,222,143,.12),transparent 29%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 25%),
    radial-gradient(ellipse at 50% 54%,#115638 0,#0d432f 46%,#08281f 78%,#051914 100%);
  border:1px solid #285743;
  box-shadow:inset 0 0 0 1px #ffffff08,inset 0 0 130px #0008,0 18px 55px #0006;
}
.blackjack-table:before{
  inset:10% 8% 9%;border:1px solid #d5b76b66;border-radius:44%;
  box-shadow:0 0 0 1px #06120d80,inset 0 0 50px #0002;
}
.blackjack-table:after{
  content:"BLOCKBET";top:50%;font-size:clamp(54px,6.6vw,108px);color:#ddfff008;letter-spacing:-.06em;
}
.blackjack-topbar{min-height:46px}
.blackjack-mode{height:40px;border-color:#30614c;background:#061c15e8}
.blackjack-table-meta span{height:40px;background:#071b15e8}

.blackjack-hand{gap:10px}
.blackjack-hand-head{font-size:11px;color:#b1c8bd}
.blackjack-hand-head strong{font-size:17px;background:#06140ff0;border-color:#ffffff20}
.blackjack-cards{min-height:122px;gap:10px}
.blackjack-card{
  width:82px;height:116px;border-radius:10px;box-shadow:0 7px 0 #08130e,0 15px 28px #0008;
  animation:blackjackDeal .24s cubic-bezier(.2,.7,.2,1) both;
}
.blackjack-card:nth-child(2){animation-delay:.045s}.blackjack-card:nth-child(3){animation-delay:.08s}.blackjack-card:nth-child(4){animation-delay:.115s}.blackjack-card:nth-child(5){animation-delay:.15s}
@keyframes blackjackDeal{from{opacity:0;transform:translateY(-14px) scale(.92) rotate(-3deg)}to{opacity:1}}

.blackjack-center{opacity:.82}
.blackjack-center span:before{font-size:9px;letter-spacing:.16em}
.blackjack-center strong{width:50px;height:50px}

/* ---------- Betting / pre-deal ---------- */
.blackjack-predeal{
  grid-template-areas:"top" "dealer" "bet";
  grid-template-rows:auto minmax(150px,35%) minmax(300px,1fr);
}
.blackjack-predeal .player-hand,.blackjack-predeal .blackjack-center,.blackjack-predeal .blackjack-turn-zone{display:none}
.blackjack-predeal .dealer-hand{grid-area:dealer;justify-content:center;padding:6px 0 0}
.blackjack-predeal .dealer-hand .blackjack-cards{display:none}
.blackjack-predeal .dealer-hand:after{
  content:"Cards deal here";display:block;margin-top:4px;color:#6e9482;font-size:9px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
}
.blackjack-predeal .dealer-hand .blackjack-hand-head strong{display:none}
.blackjack-predeal .blackjack-bet-dock{
  grid-area:bet;align-self:center;justify-content:center;gap:15px;padding:0 0 16px;
}
.blackjack-predeal .blackjack-bet-label strong{font-size:12px;letter-spacing:.18em}
.blackjack-predeal .blackjack-bet-label span{font-size:9px;color:#84a696}

/* ---------- Active hand ---------- */
.blackjack-inhand{
  grid-template-areas:"top" "dealer" "play" "player";
  grid-template-rows:auto minmax(155px,1fr) auto minmax(165px,1fr);
}
.blackjack-inhand .blackjack-bet-dock{display:none}
.blackjack-turn-zone{grid-area:play;min-height:136px;gap:10px}
.blackjack-turn-ring{width:68px;height:68px}
.blackjack-actions{grid-template-columns:repeat(2,minmax(140px,190px));gap:12px}
.blackjack-actions button{height:50px;font-size:12px}

/* ---------- Finished hand ---------- */
.blackjack-complete{
  grid-template-areas:"top" "dealer" "player" "bet";
  grid-template-rows:auto minmax(145px,1fr) minmax(155px,1fr) auto;
}
.blackjack-complete .blackjack-turn-zone{display:none}
.blackjack-complete .blackjack-bet-dock{grid-area:bet;padding-top:4px}

/* ---------- Real image-based chips ---------- */
.blackjack-chip-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap}
.blackjack-chip{
  width:72px;height:82px;position:relative;display:grid;place-items:center;flex:0 0 auto;
  padding:0;border:0!important;border-radius:16px;background:transparent!important;box-shadow:none!important;
  color:#f1fff8;cursor:pointer;overflow:visible;transition:transform .16s ease,opacity .16s ease;
}
.blackjack-chip img{
  width:68px;height:68px;display:block;object-fit:contain;pointer-events:none;
  filter:invert(72%) sepia(43%) saturate(1140%) hue-rotate(101deg) brightness(93%) contrast(88%);
  drop-shadow:0 9px 12px #0008;
  animation:chipIdle 2.8s ease-in-out infinite;
}
.blackjack-chip:nth-child(2) img{filter:invert(58%) sepia(84%) saturate(2478%) hue-rotate(1deg) brightness(101%) contrast(97%)}
.blackjack-chip:nth-child(3) img{filter:invert(82%) sepia(8%) saturate(232%) hue-rotate(165deg) brightness(94%) contrast(89%)}
.blackjack-chip:nth-child(4) img{filter:invert(78%) sepia(69%) saturate(777%) hue-rotate(357deg) brightness(101%) contrast(94%)}
.blackjack-chip:nth-child(5) img{filter:invert(70%) sepia(37%) saturate(919%) hue-rotate(126deg) brightness(96%) contrast(91%)}
.blackjack-chip:nth-child(6) img{filter:invert(64%) sepia(76%) saturate(1349%) hue-rotate(174deg) brightness(101%) contrast(92%)}
.blackjack-chip-value{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  min-width:34px;padding:2px 4px;border-radius:999px;background:#07140dcc;color:#f4fff9;
  font-size:10px;font-weight:950;letter-spacing:-.02em;text-shadow:0 1px 2px #000;
}
.blackjack-chip:hover:not(:disabled){transform:translateY(-5px) scale(1.04)}
.blackjack-chip:hover:not(:disabled) img{animation-duration:1s}
.blackjack-chip.selected{transform:translateY(-5px) scale(1.08)}
.blackjack-chip.selected:after{
  content:"";position:absolute;width:70px;height:70px;border-radius:50%;border:2px solid #54eba9;box-shadow:0 0 0 4px #27d98a1f,0 0 24px #23d78c55;pointer-events:none;
}
.blackjack-chip.selected img{animation:chipSelected 1.8s linear infinite}
.blackjack-chip:disabled{opacity:.28;cursor:not-allowed;filter:grayscale(.8)}
.blackjack-deal-button{min-width:205px;height:50px;font-size:11px;border-radius:11px}
@keyframes chipIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes chipSelected{from{transform:rotateY(0deg) scale(1.02)}to{transform:rotateY(360deg) scale(1.02)}}

@media(max-width:1100px) and (min-width:821px){
  .blackjack-table{min-height:600px;padding:16px 20px 18px}
  .blackjack-chip{width:64px;height:74px}.blackjack-chip img{width:60px;height:60px}
  .blackjack-card{width:72px;height:102px}
}

@media(max-width:820px){
  .workspace:has(.blackjack-table){display:block}
  .game-shell:has(.blackjack-table){display:block}
  .game-shell:has(.blackjack-table) .game-controls{display:none}
  .game-stage:has(.blackjack-table){height:auto;min-height:calc(100dvh - 92px);padding:7px 8px 10px;overflow:visible}
  .game-stage:has(.blackjack-table) .board-frame{height:auto;min-height:calc(100dvh - 128px);overflow:visible}
  .game-stage:has(.blackjack-table) #gameBoard{height:auto;min-height:inherit}
  .game-stage:has(.blackjack-table) #gameMessage{margin:8px 0 0}

  .blackjack-table{height:auto;min-height:calc(100dvh - 128px);padding:11px 12px 14px;gap:7px;border-radius:14px}
  .blackjack-table:before{inset:9% 4% 8%;border-radius:42%}
  .blackjack-table:after{font-size:50px;top:50%}
  .blackjack-topbar{min-height:40px}
  .blackjack-mode{height:35px;padding:0 10px}.blackjack-mode small{display:none}
  .blackjack-table-meta span{height:35px;padding:0 9px}.blackjack-table-meta span:last-child{display:none}
  .blackjack-center{display:none}

  .blackjack-hand{min-height:0;gap:6px}
  .blackjack-hand-head{font-size:9px}.blackjack-hand-head strong{font-size:14px;min-width:40px;padding:4px 8px}
  .blackjack-cards{min-height:82px;gap:5px;padding:3px 5px}
  .blackjack-card{width:56px;height:80px}.blackjack-card .card-suit{font-size:28px}.blackjack-card .card-rank{font-size:13px}

  .blackjack-predeal{grid-template-rows:auto minmax(110px,24%) minmax(340px,1fr)}
  .blackjack-predeal .dealer-hand{justify-content:center;padding:0}
  .blackjack-predeal .dealer-hand:after{font-size:8px;margin-top:2px}
  .blackjack-predeal .blackjack-bet-dock{padding:0 0 8px;gap:13px}

  .blackjack-inhand{grid-template-rows:auto minmax(112px,1fr) auto minmax(122px,1fr)}
  .blackjack-inhand .blackjack-turn-zone{min-height:126px;gap:8px}
  .blackjack-turn-ring{width:58px;height:58px}.blackjack-turn-ring:before{width:46px;height:46px}.blackjack-turn-ring strong{font-size:19px}
  .blackjack-actions{grid-template-columns:repeat(2,minmax(105px,150px));gap:8px}.blackjack-actions button{height:43px;font-size:10px}

  .blackjack-complete{grid-template-rows:auto minmax(108px,1fr) minmax(118px,1fr) auto}
  .blackjack-complete .blackjack-bet-dock{padding-top:2px}

  .blackjack-chip-row{gap:8px}
  .blackjack-chip{width:54px;height:64px}.blackjack-chip img{width:52px;height:52px}.blackjack-chip-value{font-size:9px}
  .blackjack-chip.selected:after{width:54px;height:54px}
  .blackjack-deal-button{min-width:170px;height:44px}
}

@media(max-width:520px){
  .game-stage:has(.blackjack-table){min-height:calc(100dvh - 86px);padding:5px 6px 8px}
  .game-stage:has(.blackjack-table) .board-frame{min-height:calc(100dvh - 118px)}
  .blackjack-table{min-height:calc(100dvh - 118px);padding:9px 8px 11px;gap:5px}
  .blackjack-table:before{inset:8% 3% 7%;border-radius:40%}
  .blackjack-table-meta{display:none}

  .blackjack-predeal{grid-template-rows:auto minmax(90px,20%) minmax(360px,1fr)}
  .blackjack-predeal .blackjack-bet-label strong{font-size:10px}
  .blackjack-predeal .blackjack-bet-label span{font-size:8px}
  .blackjack-predeal .blackjack-chip-row,.blackjack-complete .blackjack-chip-row{
    display:grid;grid-template-columns:repeat(3,64px);gap:7px 10px;width:auto;
  }
  .blackjack-predeal .blackjack-chip,.blackjack-complete .blackjack-chip{width:64px;height:68px}
  .blackjack-predeal .blackjack-chip img,.blackjack-complete .blackjack-chip img{width:58px;height:58px}
  .blackjack-predeal .blackjack-chip.selected:after,.blackjack-complete .blackjack-chip.selected:after{width:60px;height:60px}

  .blackjack-inhand{grid-template-rows:auto minmax(100px,1fr) auto minmax(115px,1fr)}
  .blackjack-inhand .blackjack-turn-zone{min-height:116px}
  .blackjack-turn-hud>small{display:none}
  .blackjack-actions{width:min(290px,94%);grid-template-columns:repeat(2,minmax(0,1fr))}

  .blackjack-complete{grid-template-rows:auto minmax(98px,1fr) minmax(110px,1fr) auto}
  .blackjack-card{width:50px;height:73px}.blackjack-card .card-suit{font-size:24px}.blackjack-card .card-rank{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .blackjack-card,.blackjack-chip img{animation:none!important}
  .blackjack-chip{transition:none!important}
}