/* Final blackjack presentation. Load after casino-polish.css.
   No gameplay, payout, asset generation or second result-overlay ownership. */
/* Also cover the instant before body receives casino-redesign. */
#bj .casino-backdrop { background-image:url('assets/casino/casino_background.png'); }

/* Retired lower summaries have no box, live announcement, or per-hand duplicates.
   Host hooks may stay hidden; only the central presentation owns result overlays. */
#bj #bjResult,
#bj #settledSummary,
#bj #bjBonus,
#bj .hand-outcome,
#bj .bet-coach .eyebrow,
#bj #betCoach,
#bj #advice[hidden],
#bj #dealerLine,
#bj .dealer-dialogue .eyebrow { display:none!important; }
/* Recorded dealer speech uses the one global caption layer. The native taunt
   control remains available, without a second decorative speech-card box. */
body.casino-redesign #bj .dealer-dialogue {
  max-height:none;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
body.casino-redesign #bj #dealerTaunt,
body.casino-redesign #bj #dealerTaunt:disabled {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:6px 8px;
  border:1px solid #b28b554d;
  border-radius:6px;
  background:#22140edb;
  font:600 11px/1.3 system-ui,sans-serif;
}
body.casino-redesign #bj #dealerTaunt:disabled { opacity:.55; cursor:not-allowed; }

body.casino-redesign #bj .casino-top {
  justify-content:flex-end;
  gap:6px;
  pointer-events:none;
}
body.casino-redesign #bj .casino-top .table-tools { margin-left:0; pointer-events:auto; }
body.casino-redesign #bj #bjPhase {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  max-width:calc(45% - 72px);
  min-height:28px;
  margin-left:auto;
  padding:5px 8px;
  background:#1c160fec;
  border:1px solid #b79b6666;
  color:#f1dfbc;
  font:650 10px/1.25 system-ui,sans-serif;
  letter-spacing:.45px;
  text-align:center;
  text-wrap:balance;
}
body.casino-redesign #bj #bjPhase[hidden],
body.casino-redesign #bj:has(#casinoTurnWait:not([hidden])) #bjPhase { display:none!important; }
body.casino-redesign #bj #casinoTurnWait {
  position:absolute;
  z-index:2;
  left:var(--casino-field-center,50%);
  top:50%;
  transform:translate(-50%,-50%);
  width:max-content;
  max-width:calc(var(--casino-field-width,100%) - 2 * (var(--casino-advice-width) + 14px));
  pointer-events:none;
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0;
  font:600 12px/1.3 system-ui,sans-serif;
  letter-spacing:.5px;
  text-align:center;
  color:#e6d2a5;
}
body.casino-redesign #bj #casinoTurnWait[hidden] { display:none!important; }
body.casino-redesign #bj #casinoTurnWait>span { animation:none; font-size:22px; }

/* One always-present manual advice action, separate from the changing mode.
   Existing fixed 120px/200px dock heights stay the same in every game phase. */
body.casino-redesign #bj .casino-controls:has(>.casino-advice-action) {
  --casino-advice-width:max(116px,20%);
  display:grid;
  grid-template-columns:var(--casino-advice-width) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  align-items:center;
  justify-content:stretch;
}
body.casino-redesign #bj .casino-controls>.casino-advice-action {
  grid-column:1;
  grid-row:1;
  align-self:center;
  width:100%;
  min-width:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:44px 44px;
  align-content:center;
  gap:1px;
  height:104px;
  min-height:104px;
  margin:0;
}
body.casino-redesign #bj .casino-auto-advice {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:44px;
  margin:0;
  color:#ead8b3;
  font:400 12px/1.2 system-ui,sans-serif;
  cursor:pointer;
}
body.casino-redesign #bj .casino-auto-advice input {
  flex:none;
  width:16px;
  height:16px;
  min-height:0;
  margin:0;
}
body.casino-redesign #bj .casino-auto-advice span { min-width:0; }
/* 0.37: advice is simply free — no price line under the checkbox. */
body.casino-redesign #bj #advicePrice { display:none!important; }
body.casino-redesign #bj .casino-advice-action #betAdviceBtn {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  height:44px;
  padding:4px 8px;
  font-size:12px;
  line-height:1.2;
}
body.casino-redesign #bj .casino-advice-action #betAdviceBtn::before { content:none; }
body.casino-redesign #bj #betAdviceAmount { font-size:14px; line-height:1.15; font-variant-numeric:tabular-nums; }
body.casino-redesign #bj .casino-controls:has(>.casino-advice-action)>:is(#betArea,#playArea) {
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
}
body.casino-redesign #bj .casino-controls #betArea {
  grid-template-columns:minmax(0,1fr);
}
body.casino-redesign #bj .casino-controls .casino-bet-builder {
  display:flex;
  flex-direction:column;
}
/* Full-field centered insurance is an overlay, not the right advice grid cell.
   Symmetric clearance keeps the fixed advice stack and equal44px actions apart. */
body.casino-redesign #bj .casino-controls #insuranceArea {
  position:absolute;
  left:var(--casino-field-center,50%);
  top:50%;
  transform:translate(-50%,-50%);
  width:var(--casino-field-width,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  pointer-events:none;
}
body.casino-redesign #bj .casino-controls #insuranceArea>div:has(#insuranceAdvice:empty) { display:none; }
body.casino-redesign #bj .casino-controls #insuranceArea .button-row {
  justify-self:center;
  width:min(460px,calc(100% - 2 * (var(--casino-advice-width) + 14px)));
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  pointer-events:auto;
}
body.casino-redesign #bj .casino-controls button:disabled { cursor:not-allowed; }
body.casino-redesign #bj .casino-controls button:focus-visible,
body.casino-redesign #bj .casino-controls input:focus-visible,
body.casino-redesign #bj .table-tools button:focus-visible,
body.casino-redesign #bj #dealerTaunt:focus-visible { outline:2px solid #f0d397; outline-offset:2px; }

@container casino-playfield (max-height:360px) {
  /* A real ten-card dealer fan must not enter the left subtitle panel. */
  body.casino-redesign #bj #dealerCards { width:40%; }
}
@media(max-width:700px) {
  body.casino-redesign #bj #bjPhase {
    position:absolute;
    top:50px;
    right:0;
    min-height:24px;
    max-width:35%;
    margin:0;
    padding:3px 5px;
    font-size:8px;
    letter-spacing:.1px;
  }
  body.casino-redesign #bj .casino-controls:has(>.casino-advice-action) {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:44px minmax(0,1fr);
  }
  /* On phones pair the manual action with a44px checkbox/price target. A104px
     vertical stack would steal space from the existing wager/chip controls. */
  body.casino-redesign #bj .casino-controls>.casino-advice-action {
    align-self:start;
    height:44px;
    min-height:44px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:30px 14px;
    gap:0 6px;
  }
  body.casino-redesign #bj .casino-advice-action #betAdviceBtn { grid-column:1; grid-row:1 / 3; }
  body.casino-redesign #bj .casino-auto-advice { grid-column:2; grid-row:1 / 3; padding-bottom:0; }
  body.casino-redesign #bj #casinoTurnWait,
  body.casino-redesign #bj .casino-controls #insuranceArea { top:calc(50% + 25px); }
  body.casino-redesign #bj #casinoTurnWait { max-width:calc(var(--casino-field-width,100%) - 16px); }
  body.casino-redesign #bj .casino-controls #insuranceArea .button-row { width:min(460px,calc(100% - 16px)); }
  body.casino-redesign #bj .casino-controls:has(>.casino-advice-action)>:is(#betArea,#playArea) {
    grid-column:1;
    grid-row:2;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.casino-redesign #bj #bjTable .casino-table-art { animation:none; }
  body.casino-redesign #bj .playing-card,
  body.casino-redesign #bj .card-inner { transition:none; }
}

/* "Бабай, скажи ей!" is a game button — a red-and-gold casino pill with a speech
   bubble that gently glows while it can be pressed. Disabled states stay readable but calm. */
body.casino-redesign #bj .dealer-dialogue #dealerTaunt {
  position:relative;
  gap:7px;
  min-height:40px;
  padding:7px 15px 7px 11px;
  border:1px solid #f1cf86;
  border-radius:999px;
  background:linear-gradient(180deg,#d23c3f 0%,#9a1d26 52%,#64101a 100%);
  color:#fff4da;
  font:800 13px/1.15 system-ui,sans-serif;
  letter-spacing:.2px;
  text-shadow:0 1px 0 #3a0508;
  white-space:nowrap!important;
  max-width:none;
  width:max-content;
  cursor:pointer;
  box-shadow:0 0 0 2px #3d0a10,0 4px 0 #2e070b,0 7px 14px #000b,inset 0 1px 0 #ffd9a08c,0 0 14px #ff5a4a55;
  transition:transform .12s ease-out,filter .12s ease-out,box-shadow .12s ease-out;
  animation:dealer-taunt-glow 2.4s ease-in-out infinite;
}
body.casino-redesign #bj .dealer-dialogue #dealerTaunt::before {
  content:"";
  flex:none;
  width:18px;
  height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffe6a6' stroke='%235a0c12' stroke-width='1.4' d='M4 4.5h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8.5L6 21v-4.5H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%237a1018' d='M7 9.2h10v1.6H7zM7 12.2h6.5v1.6H7z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 #3a0508);
}
body.casino-redesign #bj .dealer-dialogue #dealerTaunt:enabled:hover {
  transform:translateY(-1px) scale(1.03);
  filter:brightness(1.1);
}
body.casino-redesign #bj .dealer-dialogue #dealerTaunt:enabled:active {
  transform:translateY(2px) scale(.98);
  box-shadow:0 0 0 2px #3d0a10,0 1px 0 #2e070b,0 3px 8px #000a,inset 0 2px 4px #0006;
  animation:none;
}
body.casino-redesign #bj .dealer-dialogue #dealerTaunt:disabled {
  opacity:.82;
  border-color:#7c5e3c;
  background:linear-gradient(180deg,#4a3123,#2c1c14);
  color:#d7c3a4;
  text-shadow:none;
  cursor:not-allowed;
  box-shadow:0 0 0 2px #1a0f0a,0 3px 0 #140b07,0 5px 10px #0008;
  animation:none;
  transform:none;
  filter:none;
}
body.casino-redesign #bj .dealer-dialogue #dealerTaunt:disabled::before { filter:grayscale(1) opacity(.6); }
@keyframes dealer-taunt-glow {
  0%,100% { box-shadow:0 0 0 2px #3d0a10,0 4px 0 #2e070b,0 7px 14px #000b,inset 0 1px 0 #ffd9a08c,0 0 10px #ff5a4a33; }
  50% { box-shadow:0 0 0 2px #3d0a10,0 4px 0 #2e070b,0 7px 14px #000b,inset 0 1px 0 #ffd9a08c,0 0 22px #ff7a5aaa; }
}
@media (prefers-reduced-motion: reduce) {
  body.casino-redesign #bj .dealer-dialogue #dealerTaunt { animation:none; transition:none; }
}
@media (max-width:700px) {
  body.casino-redesign #bj .dealer-dialogue #dealerTaunt { min-height:34px; gap:5px; padding:5px 10px 5px 8px; font-size:11px; }
  body.casino-redesign #bj .dealer-dialogue #dealerTaunt::before { width:14px; height:14px; }
}