/* Blackjack: the dealer on top, the other players in a compact row under
   them, the viewer's hand(s) large at the bottom with the stack, the status
   and the controls. One centred column; side by side when the phone lies. */
.bj{
  position:absolute;inset:0;margin:0 auto;max-width:36rem;
  display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

/* chips: a gold disc with the number */
.bj-chips{display:inline-flex;align-items:center;gap:.3em;font-weight:700;color:var(--gold);white-space:nowrap}
.bj-chips i{
  flex:none;width:.9em;height:.9em;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#d6efb8,var(--gold) 55%,#4f8526);
  box-shadow:inset 0 0 0 .13em rgba(23,23,15,.35),0 1px 2px rgba(0,0,0,.5);
}
.bj-bet{
  display:inline-flex;align-items:center;gap:.25em;padding:0 7px;border-radius:999px;
  background:rgba(0,0,0,.3);border:1px solid rgba(118,176,67,.45);font-size:.78rem;line-height:1.5;
}
.bj-bet small{color:var(--gold);font-weight:700;font-size:.72rem}

/* cards of one hand, overlapping; --bw is their width */
.bj-cards{display:flex;justify-content:center}
.bj-cards .card{--w:var(--bw);margin-left:calc(var(--bw)*-.42)}
.bj-cards .card:first-child{margin-left:0}
.bj-cards.long .card,.bj-hand.long .bj-cards .card{margin-left:calc(var(--bw)*-.64)}
.bj-cards.long .card:first-child,.bj-hand.long .bj-cards .card:first-child{margin-left:0}
.bj-new{animation:bj-in .32s var(--ease) backwards}
@keyframes bj-in{from{transform:translateY(-16px) scale(.9);opacity:0}}
/* the shell frames the queen of spades in gold for Hearts; here she is a queen like the others */
.bj .card.queen{box-shadow:0 0 0 1px rgba(23,23,15,.16),0 1px 1px rgba(0,0,0,.3),0 .14em .26em -.1em rgba(0,0,0,.6)}

.bj-tot{
  display:inline-grid;place-items:center;min-width:1.9em;padding:0 .45em;border-radius:999px;
  background:var(--ivory);color:var(--ink);font:400 1.05rem/1.45 var(--display);white-space:nowrap;
}
.bj-tot.over{background:var(--cherry);color:var(--ivory)}
.bj-tot.bjk{background:var(--gold)}

/* ── the dealer ──────────────────────────────────────────────────────── */
.bj-top{display:grid;align-content:space-evenly;gap:6px;min-height:0;padding:6px 8px 4px}
.bj-dealer{--bw:calc(var(--cw)*.84);display:grid;justify-items:center;gap:4px}
.bj-dhead{display:flex;align-items:baseline;gap:.6em;font-size:.84rem}
.bj-dhead b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);font-size:.74rem}
.bj-dhead small{color:var(--mist);font-size:.74rem}
.bj-drow{display:flex;align-items:center;justify-content:center;gap:10px;min-height:calc(var(--bw)*1.42)}
.bj-drow .bj-tot{font-size:1.2rem}
.bj-slot{
  display:block;width:var(--bw);height:calc(var(--bw)*1.42);border-radius:calc(var(--bw)*.095);
  border:1.5px dashed var(--line);margin-left:calc(var(--bw)*-.42);
}
.bj-slot:first-child{margin-left:0}

/* ── the other players ───────────────────────────────────────────────── */
.bj-others{display:flex;justify-content:space-evenly;align-items:flex-start;gap:4px}
.bj-plate{--bw:26px;flex:1 1 0;min-width:0;max-width:11rem;display:grid;justify-items:center;gap:3px;text-align:center}
.bj-who{display:grid;grid-template-columns:auto minmax(0,auto);align-items:center;justify-content:center;column-gap:6px;max-width:100%}
.bj-who .ava{grid-row:span 2;width:30px;height:30px;font-size:.95rem}
.bj-who .ava .chipico{width:15px;height:15px;padding:2px;right:-4px;bottom:-3px}
.bj-who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:600;line-height:1.25;text-align:left}
.bj-stack{font-size:.8rem;line-height:1.25;text-align:left}
.bj-plate.turn .ava,.bj-me.turn .ava{
  box-shadow:0 0 0 2.5px var(--gold),0 0 0 7px rgba(118,176,67,.2);
  animation:pulse 1.7s ease-in-out infinite;
}
.bj-plate.out .bj-who,.bj-plate.off .bj-who{opacity:.5}
.bj-state{font-size:.72rem;line-height:1.2;color:var(--mist)}
.bj-hands{display:flex;justify-content:center;gap:6px;min-height:calc(var(--bw)*1.42)}
.bj-hands.two{--bw:21px;gap:4px}
.bj-plate .bj-tot{font-size:.86rem}
.bj-plate .bj-bet{font-size:.7rem;padding:0 5px}
.bj-plate .bj-meta{gap:3px}
.bj-plate .bj-res{font-size:.68rem;padding:0 6px}

/* ── a hand ──────────────────────────────────────────────────────────── */
.bj-hand{display:grid;justify-items:center;gap:3px;padding:3px 4px;border-radius:12px;min-width:0}
.bj-hand.active{background:rgba(118,176,67,.13);box-shadow:0 0 0 2px var(--gold)}
.bj-meta{display:flex;align-items:center;justify-content:center;gap:6px}
.bj-res{
  min-height:1.5em;padding:0 10px;border-radius:999px;
  font-size:.86rem;font-weight:700;line-height:1.5;white-space:nowrap;
}
.bj-res:empty{visibility:hidden}
.r-win .bj-res,.r-blackjack .bj-res{background:var(--gold);color:var(--ink)}
.r-push .bj-res{background:rgba(244,240,232,.16);color:var(--ivory)}
.r-lose .bj-res,.r-bust .bj-res{background:var(--cherry);color:var(--ivory)}
.r-lose .card,.r-bust .card{filter:brightness(.72)}

/* ── my place ────────────────────────────────────────────────────────── */
.bj-bottom{position:relative;z-index:3;padding:0 10px 8px;display:grid;gap:6px}
.bj-mine{--bw:var(--cw);display:flex;justify-content:center;align-items:flex-end;gap:10px;min-height:calc(var(--cw)*1.42 + 62px)}
.bj-mine.two{--bw:calc(var(--cw)*.84)}
.bj-mine .bj-tot{font-size:1.3rem}
.bj-mine .bj-bet{font-size:.86rem}
.bj-note{align-self:center;margin:0;display:flex;align-items:center;gap:.5em;color:var(--mist);font-size:.92rem}
.bj-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.bj-me{display:flex;align-items:center;gap:8px}
.bj-me .ava{width:38px;height:38px;font-size:1.1rem}
.bj-me .bj-stack{font-size:.98rem}
.bj-me.out .ava{opacity:.5}
.bj-status{justify-self:end;padding:.4em .9em;font-size:.9rem}

.bj-controls{display:grid;align-content:end;min-height:98px}
.bj-betbox{display:grid;gap:6px}
.bj-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bj-quick .btn{min-height:44px;padding:.2em .4em;font-size:.92rem}
.bj-quick .btn.on{background:rgba(118,176,67,.22);border-color:var(--gold)}
.bj-betrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.bj-slider{width:100%;height:46px;margin:0;accent-color:var(--gold);cursor:pointer;touch-action:pan-y}
.bj-betgo{min-height:48px;min-width:8.2rem;padding:.3em 1em;font-size:1rem;white-space:nowrap}
.bj-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bj-acts .btn{min-height:52px;padding:.3em .1em;font-size:.92rem;white-space:nowrap}
.bj-nextrow{display:grid;justify-items:center}
.bj-nextrow .btn{min-height:52px;width:100%;max-width:20rem}
.bj-wait{padding:.8em 0;font-size:.9rem;color:var(--mist);text-align:center}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .bj-top{padding-top:2px;gap:2px}
  .bj-dealer{--bw:calc(var(--cw)*.76);gap:2px}
  .bj-plate{--bw:22px;gap:1px}
  .bj-hands.two{--bw:18px}
  .bj-who .ava{width:26px;height:26px;font-size:.85rem}
  .bj-hand{gap:2px;padding:2px 3px}
  .bj-bottom{gap:3px;padding-bottom:5px}
  .bj-mine{--bw:calc(var(--cw)*.9);min-height:calc(var(--cw)*1.28 + 52px)}
  .bj-mine.two{--bw:calc(var(--cw)*.8)}
  .bj-mine .bj-tot{font-size:1.1rem}
  .bj-res{font-size:.8rem}
  .bj-me .ava{width:32px;height:32px;font-size:1rem}
  .bj-status{padding:.3em .8em;font-size:.86rem}
  .bj-controls{min-height:0} /* no room to keep the bet chooser's height free while playing */
  .bj-betbox{gap:4px}
  .bj-quick .btn{min-height:40px}
  .bj-slider{height:44px}
  .bj-betgo,.bj-acts .btn,.bj-nextrow .btn{min-height:46px}
}
@media (max-width:340px){
  .bj-acts .btn{font-size:.84rem}
  .bj-acts{gap:4px}
  .bj-bottom{padding-left:8px;padding-right:8px}
}
/* phone held sideways: the dealer and the others on the left, my hand and the controls on the right */
@media (max-height:480px) and (orientation:landscape){
  .bj{max-width:none;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bj-top{align-content:space-evenly}
  .bj-bottom{align-content:end;padding-bottom:6px}
  .bj-mine{min-height:calc(var(--cw)*1.28 + 48px)}
}