/* ---- 🃏 Blackjack CANLI (çoxoyunçulu otaqlar) ---- */
#bjlScreen{position:fixed; inset:0; z-index:8900; display:none;
  flex-direction:column; overflow:hidden; padding:8px 8px 0;
  background:radial-gradient(120% 70% at 50% 0%,#0f4128,#061a10 75%)}
#bjlScreen.on{display:flex}
#bjlScreen{--bjlcw:clamp(26px,8vw,42px)}

.bjltop{display:flex; align-items:center; gap:8px; margin-bottom:6px;
  flex-shrink:0}
.bjlback{white-space:nowrap; flex-shrink:0;
  background:linear-gradient(180deg,#1d5c39,#0f3a23); color:#ffe9a8;
  border:1px solid rgba(255,215,120,.5); border-radius:11px;
  padding:8px 13px; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.bjlback:active{transform:scale(.94)}
.bjlroomname{font-weight:900; color:#ffe9a8; font-size:14px;
  letter-spacing:.5px; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bjlbal{margin-left:auto; display:flex; flex-direction:column;
  justify-content:center; padding:4px 12px 5px; border-radius:12px;
  border:1px solid rgba(214,170,74,.75);
  background:linear-gradient(180deg,#123c27,#0a2517);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.bjlbal small{font-size:8px; letter-spacing:1.4px; color:#8fb8a0;
  font-weight:800; line-height:1}
.bjlbal b{font-size:15px; font-weight:900; color:#ffd867; line-height:1.15;
  white-space:nowrap}

/* masa */
.bjltable{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:6px; min-height:0; padding-top:8px}
.bjldealer{display:flex; flex-direction:column; align-items:center; gap:4px;
  min-height:calc(var(--bjlcw) * 1.9)}
.bjldealer .bjlcards{--cw:clamp(34px,11vw,52px)}
.bjlcards,.bjlcards2{display:flex; align-items:flex-end; justify-content:center;
  min-height:calc(var(--cw,var(--bjlcw)) * 1.45)}
.bjlc{width:var(--cw,var(--bjlcw)); height:auto; display:block;
  margin-left:calc(var(--cw,var(--bjlcw)) * -.42); border-radius:4px;
  box-shadow:0 3px 8px rgba(0,0,0,.55)}
.bjlc:first-child{margin-left:0}
.bjlc.new{animation:bjlDeal .34s cubic-bezier(.15,.85,.3,1) both}
@keyframes bjlDeal{
  from{opacity:0; transform:translate(48vw,-14vh) rotate(22deg) scale(.92)}
  60%{opacity:1}
  to{opacity:1; transform:none}}
.bjlsum,.bjlsum2{min-width:28px; height:21px; padding:0 6px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:900; color:#0d1a12;
  background:linear-gradient(180deg,#ffe9a8,#e0b74a);
  box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bjlsum:empty,.bjlsum2:empty{display:none}

/* geri sayım zolağı */
.bjltimer{width:min(92%,420px); height:5px; border-radius:4px;
  background:rgba(0,0,0,.4); overflow:hidden; flex-shrink:0}
.bjltimer i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,#ffd867,#e0b74a);
  border-radius:4px; transition:width .2s linear}
.bjltimer i.low{background:linear-gradient(90deg,#ff8a5c,#e5484d)}

/* oturacaqlar */
.bjlseats{display:grid; grid-template-columns:repeat(5,1fr); gap:5px;
  width:100%; max-width:560px; align-items:end; flex:1; min-height:0;
  padding:4px 0}
.bjlseat{position:relative; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:6px 2px 5px; border-radius:12px;
  border:1px solid rgba(255,215,120,.22);
  background:rgba(0,0,0,.22); min-height:118px; justify-content:flex-end}
.bjlseat.empty{justify-content:center; border-style:dashed}
.bjlseat.empty i{font-style:normal; color:#4c705d; font-size:10px;
  font-weight:800; letter-spacing:1px}
.bjlseat.you{border-color:rgba(255,216,103,.75);
  background:rgba(255,216,103,.07)}
.bjlseat.act{border-color:#ffd867;
  box-shadow:0 0 0 1px #ffd867, 0 0 16px rgba(255,216,103,.35);
  animation:bjlPulse 1.1s ease-in-out infinite}
@keyframes bjlPulse{
  0%,100%{box-shadow:0 0 0 1px #ffd867, 0 0 10px rgba(255,216,103,.25)}
  50%{box-shadow:0 0 0 1px #ffd867, 0 0 20px rgba(255,216,103,.55)}}
.bjlname{font-size:9.5px; font-weight:800; color:#cfe6d8; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bjlseat.you .bjlname{color:#ffd867}
.bjlbet{font-size:10px; font-weight:900; color:#ffe9a8; min-height:12px}
.bjlres{position:absolute; top:2px; left:50%; transform:translateX(-50%);
  font-style:normal; font-size:8.5px; font-weight:900; letter-spacing:.4px;
  padding:2px 6px; border-radius:8px; white-space:nowrap; z-index:2;
  background:#20242c; color:#e8eaed; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.bjlres.win,.bjlres.bj{background:linear-gradient(180deg,#ffe9a8,#e0b74a);
  color:#0d1a12}
.bjlres.bust,.bjlres.lose{background:#5c1f24; color:#ffb4b4}
.bjlres.push{background:#2a3b4d; color:#cfe6ff}

/* alt panel */
.bjlbottom{flex-shrink:0; display:flex; flex-direction:column; gap:6px;
  padding:4px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.bjlmsg{text-align:center; font-size:13px; font-weight:800; color:#cfe6d8;
  min-height:18px}
.bjlmsg.err{color:#ff8a8a}
.bjlmsg.win{color:#ffd867}
.bjlmsg.lose{color:#ff9f9f}
.bjlmsg.turn{color:#ffd867; animation:bjlPulse2 .9s ease-in-out infinite}
@keyframes bjlPulse2{0%,100%{opacity:1} 50%{opacity:.55}}
.bjlchips{display:flex; justify-content:center; gap:7px; min-height:0}
.bjlchip{position:relative; width:48px; height:48px; border:0; padding:0;
  background:none; cursor:pointer; flex-shrink:0}
.bjlchip canvas,.bjlchip img{width:100%; height:auto; display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.bjlchip b{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:900; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:none}
.bjlchip.sel{transform:translateY(-5px)}
.bjlchip.sel::after{content:""; position:absolute; left:50%; bottom:-6px;
  transform:translateX(-50%); width:26px; height:3px; border-radius:2px;
  background:#ffd867}
.bjlacts{display:flex; justify-content:center; gap:8px}
.bjlbtn{position:relative; min-width:96px; padding:11px 16px;
  border-radius:13px; font-size:14px; font-weight:900; letter-spacing:.5px;
  cursor:pointer; color:#ffe9a8;
  background:linear-gradient(180deg,#1d5c39,#0f3a23);
  border:1px solid rgba(255,215,120,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.4)}
.bjlbtn:active{transform:scale(.95)}
.bjlbtn[disabled]{opacity:.4; pointer-events:none}
.bjlbtn.go{background:linear-gradient(180deg,#e8c355,#b88b1f); color:#231a05;
  border-color:#ffe9a8}
.bjlbtn.go i{display:block; font-style:normal; font-size:10.5px;
  font-weight:800; opacity:.85}
.bjlbtn.clr{color:#ffb4b4; border-color:rgba(255,140,140,.5)}
.bjlbtn.dbl{color:#cfe6ff; border-color:rgba(160,200,255,.5)}

/* otaq seçimi */
.bjlroomsov{position:absolute; inset:0; z-index:5; display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(120% 70% at 50% 0%,#0f4128,#061a10 75%)}
.bjlroomsov.on{display:flex}
.bjlrooms{width:min(92%,380px); display:flex; flex-direction:column; gap:10px}
.bjlrh{text-align:center; font-size:19px; font-weight:900; color:#ffe9a8;
  letter-spacing:1px; margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.bjlrh small{display:block; font-size:11.5px; font-weight:600; color:#8fb8a0;
  letter-spacing:0; margin-top:4px}
.bjlroom{display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-radius:14px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,#134430,#0b2b1c);
  border:1px solid rgba(255,215,120,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.4)}
.bjlroom:active{transform:scale(.97)}
.bjlroom b{font-size:16px; font-weight:900; color:#ffe9a8}
.bjlroom span{font-size:12.5px; font-weight:700; color:#cfe6d8}
.bjlroom i{margin-left:auto; font-style:normal; font-size:12px;
  font-weight:800; color:#8fb8a0; white-space:nowrap}