*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#04080f;--felt:#0a2918;--felt2:#082211;--panel:rgba(8,15,26,.95);
  --gold:#ffd600;--green:#00e09a;--red:#e63946;--pink:#ff3472;--cyan:#00d4ff;
  --text:#c8e8ff;--muted:#3d6480;
  --cw:64px;--ch:90px;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;
  background-image:radial-gradient(ellipse at 50% 100%,rgba(10,41,24,.8) 0%,transparent 60%)}
.screen{display:none;width:100%;min-height:100dvh;align-items:center;justify-content:center}
.screen.active{display:flex;animation:fIn .3s ease}
@keyframes fIn{from{opacity:0}to{opacity:1}}
.hidden{display:none!important}
.back-link{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:2px;
  color:var(--muted);text-decoration:none;transition:color .2s}
.back-link:hover{color:var(--cyan)}

/* ══ LOBBY ══════════════════════════════════════ */
.lobby-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;
  padding:32px 28px;background:rgba(8,15,26,.96);border:1px solid rgba(255,214,0,.15);border-radius:20px;
  backdrop-filter:blur(20px);margin:16px;position:relative}
.lobby-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:20px 20px 0 0}

.bj-logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.bj-cards-preview{display:flex;gap:-8px;margin-bottom:4px}
.prev-card{width:52px;height:72px;border-radius:7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-weight:900;
  box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.8)}
.prev-card.red{background:linear-gradient(145deg,#fff,#ffe8e8);color:var(--red)}
.prev-card.black{background:linear-gradient(145deg,#fff,#e8e8ff);color:#111;margin-left:-12px;z-index:1}
.pv{font-family:'Orbitron',monospace;font-size:1.1rem}
.ps{font-size:1rem}
.bj-title{font-family:'Orbitron',monospace;font-size:2.2rem;font-weight:900;letter-spacing:5px;color:#fff;
  text-shadow:0 0 20px rgba(255,214,0,.4)}
.bj-sub{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--muted);letter-spacing:2px}

.field{width:100%;display:flex;flex-direction:column;gap:6px}
.flbl{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:3px;color:var(--gold)}
input[type=text]{width:100%;padding:12px 16px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;
  font-family:'Orbitron',monospace;font-size:.9rem;font-weight:700;letter-spacing:2px;outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
input:focus{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,214,0,.4),0 0 16px rgba(255,214,0,.12)}
input::placeholder{color:var(--muted);font-weight:400;letter-spacing:1px}

.rules-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rule{display:flex;align-items:center;gap:7px;padding:8px 10px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);border-radius:7px;font-size:.82rem;color:var(--muted)}
.ri{font-size:1rem;flex-shrink:0}

.btn-join{width:100%;padding:15px;border-radius:10px;border:1.5px solid var(--gold);background:transparent;
  color:var(--gold);font-family:'Orbitron',monospace;font-size:.85rem;font-weight:900;letter-spacing:3px;
  cursor:pointer;position:relative;overflow:hidden;transition:color .15s;
  box-shadow:0 0 20px rgba(255,214,0,.1)}
.btn-join::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .15s;z-index:0}
.btn-join:hover{color:#000} .btn-join:hover::before{transform:scaleX(1)}
.err-pill{width:100%;padding:9px 14px;background:rgba(255,52,114,.1);border:1px solid rgba(255,52,114,.3);
  border-radius:8px;font-family:'Share Tech Mono',monospace;font-size:.68rem;color:var(--pink);text-align:center}

/* ══ CASINO TABLE ═════════════════════════════════ */
.casino-table{
  width:100%;max-width:860px;min-height:100dvh;display:flex;flex-direction:column;
  position:relative;padding:0 12px 12px;
}

.felt-arc{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:110%;height:200px;
  background:radial-gradient(ellipse at 50% 100%,var(--felt) 0%,transparent 80%);
  pointer-events:none;z-index:0;
}

.table-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  padding:12px 4px;gap:10px}
.my-chips{display:flex;flex-direction:column;align-items:center;
  background:rgba(10,20,30,.9);border:1px solid rgba(255,214,0,.2);border-radius:10px;padding:8px 16px}
.mc-lbl{font-family:'Share Tech Mono',monospace;font-size:.52rem;color:var(--gold);letter-spacing:3px}
.mc-val{font-family:'Orbitron',monospace;font-size:1.3rem;font-weight:900;color:#fff;
  font-variant-numeric:tabular-nums;transition:color .3s}
.mc-val.up{color:var(--green)} .mc-val.down{color:var(--pink)}

.phase-tag{font-family:'Orbitron',monospace;font-size:.7rem;font-weight:700;letter-spacing:2px;
  padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.1);color:var(--muted);transition:all .3s}
.phase-tag.betting{color:var(--gold);border-color:rgba(255,214,0,.3);background:rgba(255,214,0,.07)}
.phase-tag.playing{color:var(--green);border-color:rgba(0,224,154,.3);background:rgba(0,224,154,.07)}
.phase-tag.dealer{color:var(--cyan);border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.07)}
.phase-tag.results{color:var(--pink);border-color:rgba(255,52,114,.3);background:rgba(255,52,114,.07)}

/* ── DEALER ZONE ── */
.dealer-zone{position:relative;z-index:1;background:rgba(8,34,17,.7);border:1px solid rgba(0,224,154,.12);
  border-radius:14px;padding:16px;text-align:center;margin-bottom:10px}
.dz-lbl{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:3px;color:var(--muted);margin-bottom:10px}
.cards-row{display:flex;gap:8px;justify-content:center;min-height:calc(var(--ch) + 8px);align-items:center;flex-wrap:wrap}
.hand-score{font-family:'Orbitron',monospace;font-size:1rem;font-weight:700;color:#fff;margin-top:8px;min-height:26px;transition:color .3s}
.hand-score.bust{color:var(--pink)} .hand-score.bj{color:var(--gold);text-shadow:0 0 12px rgba(255,214,0,.5)}
.hand-score.win{color:var(--green)} .hand-score.lose{color:var(--pink)}

/* ── PLAYERS ROW ── */
.players-row{display:flex;gap:8px;flex:1;align-items:stretch;min-height:160px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px}
.players-row::-webkit-scrollbar{display:none}

.seat{flex:1;min-width:120px;max-width:200px;background:rgba(10,22,14,.8);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;
  transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.seat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .3s}
.seat.is-you{border-color:rgba(255,214,0,.25)} .seat.is-you::before{background:var(--gold);opacity:.6}
.seat.is-cur{border-color:rgba(0,224,154,.4);box-shadow:0 0 16px rgba(0,224,154,.12)} .seat.is-cur::before{background:var(--green);opacity:.8}
.seat.win{border-color:rgba(0,224,154,.4)} .seat.win::before{background:var(--green);opacity:.6}
.seat.lose{border-color:rgba(255,52,114,.2);opacity:.75}
.seat.blackjack{border-color:rgba(255,214,0,.5);box-shadow:0 0 20px rgba(255,214,0,.18)} .seat.blackjack::before{background:var(--gold);opacity:1}
.seat.bust::before{background:var(--pink);opacity:.6}

.seat-name{font-weight:700;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-chips{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--muted)}
.seat-bet{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--gold)}
.seat-hand{display:flex;gap:4px;flex-wrap:wrap;min-height:58px;align-items:center}
.seat-score{font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;color:#fff}
.seat-score.bust{color:var(--pink)} .seat-score.bj{color:var(--gold)}
.seat-result{font-family:'Orbitron',monospace;font-size:.82rem;font-weight:900;letter-spacing:1px}
.seat-result.win{color:var(--green)} .seat-result.lose{color:var(--pink)}
.seat-result.push{color:var(--muted)} .seat-result.blackjack{color:var(--gold)}
.seat-result.bust{color:var(--pink)}
.seat-status{font-family:'Share Tech Mono',monospace;font-size:.55rem;color:var(--muted)}

/* ══ PLAYING CARDS ═════════════════════════════════ */
.card{
  width:var(--cw);height:var(--ch);border-radius:8px;flex-shrink:0;
  background:linear-gradient(145deg,#ffffff,#f4f4f8);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.85);
  position:relative;user-select:none;
  animation:dealIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dealIn{from{opacity:0;transform:translateY(-16px) scale(.85)}to{opacity:1;transform:none}}
.card .tl{position:absolute;top:5px;left:6px;display:flex;flex-direction:column;align-items:center;line-height:1;gap:1px}
.card .br{position:absolute;bottom:5px;right:6px;transform:rotate(180deg);display:flex;flex-direction:column;align-items:center;line-height:1;gap:1px}
.card .cv{font-family:'Orbitron',monospace;font-size:.82rem;font-weight:900;line-height:1}
.card .cs{font-size:.7rem;line-height:1}
.card .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.card.red .cv,.card.red .cs,.card.red .mid{color:#c0392b}
.card.black .cv,.card.black .cs,.card.black .mid{color:#1a1a2e}
.card.back{background:linear-gradient(135deg,#1a237e,#283593);border-color:rgba(255,255,255,.18)}
.card.back::after{content:'';position:absolute;inset:5px;border:1.5px solid rgba(255,215,0,.2);border-radius:4px;
  background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.04) 5px,rgba(255,255,255,.04) 10px)}
.card.sm{--cw:42px;--ch:58px}
.card.sm .cv{font-size:.6rem} .card.sm .cs{font-size:.55rem} .card.sm .mid{font-size:1.2rem}

/* ══ CONTROLS ══════════════════════════════════════ */
.controls{position:relative;z-index:1;margin-top:auto;padding-top:10px}
.ctl-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 10px;
  background:rgba(8,15,26,.85);border:1px solid rgba(255,255,255,.06);border-radius:14px;
  backdrop-filter:blur(12px)}
.ctl-lbl{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:2px;color:var(--muted);text-align:center}
.bet-timer{color:var(--pink);font-size:.75rem}

/* CHIPS */
.chips-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:.65rem;font-weight:900;cursor:pointer;
  border:3px solid rgba(255,255,255,.3);position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .15s;text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.chip::before{content:'';position:absolute;inset:4px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.25)}
.chip:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 10px 20px rgba(0,0,0,.5)}
.chip:active{transform:scale(.95)}
.chip.c10  {background:radial-gradient(circle at 35% 35%,#e74c3c,#922b21);border-color:#e74c3c}
.chip.c25  {background:radial-gradient(circle at 35% 35%,#27ae60,#1e8449);border-color:#27ae60}
.chip.c50  {background:radial-gradient(circle at 35% 35%,#2980b9,#1a5276);border-color:#2980b9}
.chip.c100 {background:radial-gradient(circle at 35% 35%,#8e44ad,#6c3483);border-color:#8e44ad}
.chip.c250 {background:radial-gradient(circle at 35% 35%,#d4ac0d,#9a7d0a);border-color:#d4ac0d}
.chip.c500 {background:radial-gradient(circle at 35% 35%,#212121,#424242);border-color:#e0e0e0}

.bet-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.cur-bet-wrap{display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 18px}
.cb-lbl{font-family:'Share Tech Mono',monospace;font-size:.5rem;color:var(--muted);letter-spacing:2px}
.cb-val{font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums}

.btn-sm{padding:9px 16px;border-radius:8px;font-family:'Orbitron',monospace;font-size:.68rem;
  font-weight:900;letter-spacing:1.5px;cursor:pointer;border:1.5px solid;transition:all .15s;
  position:relative;overflow:hidden}
.btn-sm::before{content:'';position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .15s;z-index:0}
.btn-sm span{position:relative;z-index:1}
.btn-red{border-color:var(--pink);color:var(--pink);background:transparent}
.btn-red::before{background:var(--pink)}
.btn-red:hover{color:#fff} .btn-red:hover::before{transform:scaleX(1)}
.btn-green{border-color:var(--green);color:var(--green);background:transparent}
.btn-green::before{background:var(--green)}
.btn-green:hover{color:#000} .btn-green:hover::before{transform:scaleX(1)}

/* ACTIONS */
.act-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.act{padding:14px 24px;border-radius:10px;font-family:'Orbitron',monospace;font-size:.82rem;
  font-weight:900;letter-spacing:2px;cursor:pointer;border:2px solid;transition:all .15s}
.act:disabled{opacity:.25;cursor:not-allowed}
.act.hit{border-color:var(--green);color:var(--green);background:rgba(0,224,154,.08)}
.act.hit:hover:not(:disabled){background:var(--green);color:#000}
.act.stand{border-color:var(--pink);color:var(--pink);background:rgba(255,52,114,.08)}
.act.stand:hover:not(:disabled){background:var(--pink);color:#fff}
.act.double{border-color:var(--gold);color:var(--gold);background:rgba(255,214,0,.08)}
.act.double:hover:not(:disabled){background:var(--gold);color:#000}

.wait-icon{font-size:2rem;animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wait-msg{font-family:'Share Tech Mono',monospace;font-size:.68rem;color:var(--muted);letter-spacing:1.5px;text-align:center}

@media(max-width:500px){
  :root{--cw:48px;--ch:68px}
  .chip{width:44px;height:44px;font-size:.58rem}
  .act{padding:12px 16px;font-size:.72rem}
  .seat{min-width:95px}
}