/* Presentation only: distinct felt zones, compact chip rack and stable money labels. */
body.casino-redesign #bj .casino-visual { container:casino-playfield/size; }
body.casino-redesign #bj #bjTable {
  left:7%; right:7%; bottom:-1%; width:86%; height:64%;
}
body.casino-redesign #bj .dealer-portrait { bottom:42%; height:57%; }
body.casino-redesign #bj .dealer-label {
  left:50%; top:6%; height:20px; min-height:20px; padding:3px 8px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font:650 10px/1.1 system-ui,sans-serif; letter-spacing:.25px;
}
body.casino-redesign #bj .dealer-label b { margin:0; font:650 12px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
body.casino-redesign #bj #dealerCards {
  left:50%; top:17%; width:44%; transform:translateX(-50%);
  padding:0 4px; min-height:0;
}
body.casino-redesign #bj #hands {
  left:34%; right:34%; top:49%; gap:12px; min-height:0;
}
body.casino-redesign #bj .hand { display:grid; grid-template-rows:22px auto; align-content:start; gap:4px; }
body.casino-redesign #bj .hand-label {
  width:fit-content; justify-self:center; max-width:100%; height:22px; min-height:22px; padding:3px 7px; margin:0;
  display:flex; flex-wrap:nowrap; justify-content:center; gap:5px;
  font:600 10px/1 system-ui,sans-serif; letter-spacing:0; overflow:hidden;
}
body.casino-redesign #bj .hand-owner { font-size:9px; letter-spacing:.2px; white-space:nowrap; }
body.casino-redesign #bj .hand-score { font:650 12px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
body.casino-redesign #bj .hand-stake { font:550 10px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0; }
body.casino-redesign #bj .hand-score .hand-soft { margin-left:2px; font-size:8px; font-weight:500; color:#c7bc97; }
body.casino-redesign #bjTable .cards {
  --card-overlap:0px; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start;
  gap:3px; padding:0; margin:0; min-width:0; min-height:0;
}
body.casino-redesign #bjTable .card.playing-card {
  --cw:clamp(35px,min(5.2cqw,11.5cqh),56px);
  width:var(--cw); height:calc(var(--cw)*1.44); flex:0 0 var(--cw);
  transform:none; rotate:none; top:auto; left:auto; margin:0;
}
body.casino-redesign #bjTable #hands:has(.hand:nth-child(2)) .card.playing-card { --cw:clamp(30px,min(4.1cqw,10.5cqh),48px); }
body.casino-redesign #bjTable .cards .card.playing-card+.card.playing-card { margin-left:calc(0px - var(--card-overlap)); }
body.casino-redesign #bjTable .playing-card:nth-child(odd),body.casino-redesign #bjTable .playing-card:nth-child(even) { transform:none; rotate:none; }
body.casino-redesign #bj .table-mark {
  left:89%; top:20%; width:16%; height:auto; min-height:0; padding:5px 4px;
  border-radius:5px; background:#40100bd9; border:1px solid #c6a26833;
  font-size:8px; line-height:1.3; letter-spacing:.2px;
}
body.casino-redesign #bj .table-mark small { font-size:7px; line-height:1.3; letter-spacing:0; }
body.casino-redesign #bj #casinoChips {
  left:22%; top:55%; bottom:auto; width:10%; max-width:125px; min-height:0;
  gap:4px; padding:4px 3px; border:1px solid #e6bf6c30; border-radius:50% 50% 8px 8px;
  background:radial-gradient(ellipse at 50% 35%,#e5a94c18,transparent 70%); transform:none;
}
body.casino-redesign #bj #casinoChips .casino-bet-stack {
  order:0; width:100%; height:35px; min-height:35px; align-items:flex-end; justify-content:center; gap:0;
}
body.casino-redesign #bj #casinoChips .casino-bet-stack__pile { width:32px; min-width:0; flex:0 1 32px; }
body.casino-redesign #bj #casinoChips .casino-bet-stack__image { max-height:37px; width:100%; object-fit:contain; }
body.casino-redesign #bj #chipAmount {
  order:1; display:grid; grid-template-rows:14px 9px; align-items:center; gap:2px;
  width:100%; max-width:none; min-height:28px; padding:3px 2px; border:0;
  border-radius:5px; background:#29150fdc; text-align:center; font:600 11px/1 system-ui,sans-serif;
  color:#eddab1; font-variant-numeric:tabular-nums;
}
body.casino-redesign #bj #chipAmount .casino-stake-value { display:block; color:inherit; font:650 12px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:0; }
body.casino-redesign #bj #chipAmount .casino-stake-state { display:block; font:550 7px/1 system-ui,sans-serif; letter-spacing:.6px; color:#bfa887; }
body.casino-redesign #bj #bjResult {
  left:28%; right:17%; bottom:2%; margin:0; padding:4px 6px; min-height:20px;
  max-height:30px; overflow:auto; font:550 10px/1.25 system-ui,sans-serif;
  font-variant-numeric:tabular-nums; scrollbar-width:thin;
}
/* Consistent money typography, without GTA-sized numbers or moving neighbours. */
body.casino-redesign #bj #bet,body.casino-redesign #bj .casino-bet-tray__value,
body.casino-redesign #bj #insuranceCost {
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums; font-weight:650; letter-spacing:0;
}
body.casino-redesign #bj .casino-stake-unit { color:#cfba90; font-size:13px; margin-left:-2px; }
body.casino-redesign #bj .casino-controls .casino-bet-tray__choices {
  width:max-content; max-width:100%; margin:0; justify-content:start;
  grid-template-columns:repeat(3,92px); gap:4px;
}
body.casino-redesign #bj .casino-controls .casino-bet-tray__choice { position:relative; border-radius:9px; }
body.casino-redesign #bj .casino-controls .casino-bet-tray__choice::before {
  content:''; position:absolute; inset:2px; border:1px solid transparent; border-radius:8px;
  background:#151c1300; pointer-events:none; transition:background .16s,border-color .16s;
}
body.casino-redesign #bj .casino-controls .casino-bet-tray__choice.is-selected::before { border-color:#c9b17999; background:#b4974b1c; box-shadow:inset 0 1px #efdfb72b; }
body.casino-redesign #bj .casino-controls .casino-bet-tray__chip[aria-pressed="true"] { filter:brightness(1.12) drop-shadow(0 0 5px #dfbd6438); }
body.casino-redesign #bj .casino-controls .casino-bet-tray__choice:has([data-denomination="5000"]) { display:none; }
body.casino-redesign #bj .casino-controls .casino-bet-tray__value {
  inset:auto 0 1px; height:15px; padding:1px 3px; margin:0 auto; width:max-content;
  border-radius:4px; background:#171a14ee; color:#f4e7ca;
  font:650 11px/13px system-ui,sans-serif; text-shadow:none; font-variant-numeric:tabular-nums;
}
body.casino-redesign #bj .casino-controls .casino-bet-tray__minus-symbol {
  position:relative; display:block; width:26px; height:26px; border:1px solid #9a835b;
  border-radius:7px; font-size:0; color:transparent; background:linear-gradient(#443c2d,#28291f);
  box-shadow:inset 0 1px #e2c99c22,0 2px 0 #10150f;
}
body.casino-redesign #bj .casino-controls .casino-bet-tray__minus-symbol::after {
  content:''; position:absolute; width:10px; height:2px; left:7px; top:11px;
  border-radius:1px; background:#e6d5af;
}
body.casino-redesign #bj #bjPhase,
body.casino-redesign #bj #casinoTurnWait { display:none!important; }
body.casino-redesign #bj #bjTable:not([data-phase="settled"]) #bjResult { display:none; }
body.casino-redesign #bj .dealer-dialogue { top:8px; }
body.casino-redesign #bj .casino-top .table-tools { margin-left:auto; }
body.casino-redesign #bj #chipAmount .casino-stake-state:empty { display:none; }
body.casino-redesign #bj .casino-controls button:not(.casino-bet-tray__chip):not(.casino-bet-tray__minus) {
  border-radius:8px; border:1px solid #8e7953; border-top-color:#bea273;
  color:#eddfc1; background:linear-gradient(165deg,#4b4436,#2b2b23 75%);
  box-shadow:inset 0 1px #f6dfae1c,inset 0 -2px #090f0a66,0 2px 0 #0e130e;
  text-shadow:none; font-family:inherit; font-weight:600; font-size:13px;
  transition:background .14s,border-color .14s,box-shadow .14s;
}
body.casino-redesign #bj .casino-controls #deal { background:linear-gradient(150deg,#5e6c3e,#34452b); border-color:#aabd7e; color:#f2edcb; }
body.casino-redesign #bj .casino-controls #betAdviceBtn { background:linear-gradient(150deg,#625136,#3c3325); border-color:#b2945e; color:#f3d59a; }
body.casino-redesign #bj .casino-controls button:hover:not(:disabled) { filter:brightness(1.1); border-color:#e3cb98; }
body.casino-redesign #bj .casino-controls button:active:not(:disabled) { filter:brightness(.98); box-shadow:inset 0 2px 5px #0007; }
body.casino-redesign #bj .casino-controls button:focus-visible,
body.casino-redesign #bj .casino-controls #bet:focus-visible { outline:2px solid #e7d3a0; outline-offset:-3px; }
body.casino-redesign #bj .casino-controls button:disabled { opacity:.42; filter:saturate(.45); cursor:not-allowed; }
/* On short playfields, two columns keep two full card rows away from each other. */
@container casino-playfield (max-height:360px) {
  body.casino-redesign #bj #bjTable { left:5%; right:5%; width:90%; height:78%; bottom:-1%; }
  body.casino-redesign #bj .dealer-label { left:50%; top:5%; max-width:44%; height:16px; min-height:16px; padding:2px 5px; font-size:8px; }
  body.casino-redesign #bj .dealer-label b { font-size:10px; }
  body.casino-redesign #bj #dealerCards { left:50%; top:19%; width:48%; }
  body.casino-redesign #bj #hands { left:23%; right:23%; top:50%; gap:8px; }
  body.casino-redesign #bj .hand { grid-template-rows:18px auto; gap:3px; }
  body.casino-redesign #bj .hand-label { height:18px; min-height:18px; padding:2px 4px; gap:4px; }
  body.casino-redesign #bj .hand-owner { font-size:8px; }
  body.casino-redesign #bj .hand-score { font-size:10px; }
  body.casino-redesign #bj .hand-stake { font-size:8px; }
  body.casino-redesign #bjTable .card.playing-card { --cw:clamp(22px,min(5cqw,10cqh),36px); }
  body.casino-redesign #bjTable #hands:has(.hand:nth-child(2)) .card.playing-card { --cw:clamp(20px,min(4.1cqw,9cqh),32px); }
  body.casino-redesign #bj .table-mark { display:none; }
  body.casino-redesign #bj #casinoChips { left:7%; top:61%; width:15%; max-width:120px; padding:1px 2px; gap:1px; }
  body.casino-redesign #bj #casinoChips .casino-bet-stack { height:22px; min-height:22px; }
  body.casino-redesign #bj #casinoChips .casino-bet-stack__pile { width:23px; flex-basis:23px; }
  body.casino-redesign #bj #casinoChips .casino-bet-stack__image { max-height:23px; }
  body.casino-redesign #bj #chipAmount { grid-template-rows:12px; min-height:15px; padding:2px; }
  body.casino-redesign #bj #chipAmount .casino-stake-value { font-size:clamp(8px,2.3cqw,10px); }
  body.casino-redesign #bj #chipAmount .casino-stake-state { display:none; }
  body.casino-redesign #bj #bjResult { left:43%; right:5%; bottom:1%; min-height:16px; max-height:18px; padding:2px 4px; font-size:8px; }
}
@container casino-controls-fit (max-width:620px) {
  body.casino-redesign #bj .casino-controls .casino-bet-tray__choices { grid-template-columns:repeat(3,92px); margin-inline:auto; }
}
@container casino-controls-fit (max-width:440px) {
  body.casino-redesign #bj .casino-controls .casino-bet-tray__choices { grid-template-columns:repeat(3,78px); gap:5px; }
  body.casino-redesign #bj .casino-controls .casino-bet-tray__choice { flex-direction:column; }
}
@media(max-width:700px) {
  body.casino-redesign #bj .dealer-portrait { bottom:42%; height:57%; }
  body.casino-redesign #bj .dealer-dialogue { top:6px; max-height:25%; padding:4px; }
  body.casino-redesign #bj #dealerLine { -webkit-line-clamp:2; margin:2px 0; }
  body.casino-redesign #bj #casinoChips { border-radius:10px; }
  body.casino-redesign #bj #hands:has(.hand:nth-child(2)) .hand-label { gap:3px; padding:2px 3px; }
  body.casino-redesign #bj #hands:has(.hand:nth-child(2)) .hand-owner { font-size:7px; flex:none; }
  body.casino-redesign #bj #hands:has(.hand:nth-child(2)) .hand-stake { display:none; }
  body.casino-redesign #bj .casino-controls #bet { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  body.casino-redesign #bj .casino-controls button,
  body.casino-redesign #bj .casino-controls .casino-bet-tray__choice::before { transition:none; }
}