/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

:root{
  --bg:#081a24;
  --surface:#0c2531;
  --felt1:#26515f;--felt2:#143a48;--felt3:#0b2330;
  --accent:#00e701;--accent-dark:#062b06;
  --surface1:#1b3140;--surface2:#274655;
  --line:rgba(255,255,255,.09);
  --muted:#7e98a6;--text:#eef5f8;
  --red:#d8313b;--card-black:#15222b;
  --card-w:72px;--card-h:101px;
  --pcard-w:78px;--pcard-h:110px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

html,body{height:100%;width:100%;overflow:hidden;
  font-family:'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);background:var(--bg);user-select:none;}

.hidden{display:none!important;}

/* ── Animations ───────────────────────────────────────── */
@keyframes dealIn{from{opacity:0;transform:translate(110px,-150px) rotate(-16deg) scale(.92);}to{opacity:1;transform:translate(0,0) rotate(0) scale(1);}}
@keyframes chipDrop{0%{opacity:0;transform:translateY(-46px) scale(.7);}62%{opacity:1;transform:translateY(5px) scale(1.05);}100%{transform:translateY(0) scale(1);}}
@keyframes bannerPop{0%{opacity:0;transform:translateY(10px) scale(.92);}60%{opacity:1;transform:translateY(0) scale(1.03);}100%{transform:scale(1);}}
@keyframes winGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,231,1,0),0 0 34px 4px rgba(0,231,1,.28);}50%{box-shadow:0 0 0 0 rgba(0,231,1,0),0 0 54px 10px rgba(0,231,1,.45);}}
@keyframes pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes slideIn{from{transform:translateX(-100%);}to{transform:translateX(0);}}

/* ── Top Bar ──────────────────────────────────────────── */
#header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 0;height:56px;
}

#balance-chip{
  display:flex;align-items:center;gap:9px;
  background:rgba(6,16,22,.55);border:1px solid var(--line);
  padding:7px 11px 7px 8px;border-radius:12px;
  backdrop-filter:blur(6px);cursor:pointer;
}
#balance-icon{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#ffd54a,#f5a623);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  font-size:12px;font-weight:800;color:#a3650a;
}
#balance-chip .bal-label{font-size:9px;font-weight:600;letter-spacing:.13em;color:var(--muted);}
#balance-chip .bal-amount{font-size:15px;font-weight:800;color:var(--text);margin-top:1px;}
#balance-chip .chevron{margin-left:1px;color:var(--muted);}

.top-actions{display:flex;gap:9px;}
.icon-btn{
  width:38px;height:38px;border-radius:11px;
  background:rgba(6,16,22,.55);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#a9c0cd;
}
.icon-btn svg{width:18px;height:18px;}

/* ── Table ─────────────────────────────────────────────── */
#table{
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}
#felt{
  position:absolute;inset:0;
  background:radial-gradient(115% 80% at 50% 28%,var(--felt1) 0%,var(--felt2) 42%,var(--felt3) 78%,var(--bg) 100%);
}
#vignette{
  position:absolute;inset:0;
  background:radial-gradient(125% 85% at 50% 32%,transparent 38%,rgba(0,0,0,.5) 100%);
  pointer-events:none;
}

/* ── Shoe ──────────────────────────────────────────────── */
#shoe{
  position:fixed;top:68px;right:14px;width:34px;height:48px;z-index:12;
}
.shoe-card{
  position:absolute;inset:0;border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
}
.shoe-card:nth-child(1){background:linear-gradient(135deg,#10303d,#0a2230);transform:rotate(8deg);}
.shoe-card:nth-child(2){background:linear-gradient(135deg,#143a48,#0d2a37);border-color:rgba(255,255,255,.1);transform:rotate(3deg);}
.shoe-card:nth-child(3){background:linear-gradient(135deg,#16404f,#0f2e3c);border-color:rgba(0,231,1,.2);}

/* ── Game Area ─────────────────────────────────────────── */
#game-area{
  position:fixed;top:56px;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 18px 190px;overflow:hidden;
}

/* ── Dealer ────────────────────────────────────────────── */
#dealer-section{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  margin-top:4px;min-height:120px;justify-content:center;
}
.section-label{
  display:flex;align-items:center;gap:8px;
}
.section-label span{
  font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--muted);
}
.value-badge{
  font-size:12px;font-weight:800;color:#04121a;
  background:rgba(255,255,255,.85);padding:2px 9px;border-radius:7px;
}
.value-badge.win{background:var(--accent);color:var(--accent-dark);}
.value-badge.bust{background:#ff7a7a;color:#3a0a0a;}
.value-badge.push-val{background:#9fb6c2;color:#0a1a22;}

.card-row{display:flex;gap:8px;align-items:center;min-height:var(--pcard-h);}

/* ── Cards ─────────────────────────────────────────────── */
.card{
  border-radius:9px;position:relative;flex-shrink:0;
  will-change:transform;backface-visibility:hidden;
  transform:translateZ(0);
}
/* Only freshly-appended cards animate in — existing cards stay still */
.card.dealing{animation:dealIn .45s cubic-bezier(.2,.85,.25,1) both;}
/* Hole-card reveal: GPU rotateY flip */
.card.flipping{animation:flipReveal .32s ease-in-out both;}
@keyframes flipReveal{
  0%{transform:rotateY(0deg);}
  50%{transform:rotateY(90deg);}
  100%{transform:rotateY(0deg);}
}
.card.dealer-card{width:var(--card-w);height:var(--card-h);box-shadow:0 7px 16px rgba(0,0,0,.45);}
.card.player-card{width:var(--pcard-w);height:var(--pcard-h);box-shadow:0 9px 20px rgba(0,0,0,.5);}

.card-face{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,#ffffff,#eef2f3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.card-face.red{color:var(--red);}
.card-face.black{color:var(--card-black);}

.card-corner{
  position:absolute;display:flex;flex-direction:column;
  align-items:center;line-height:.86;
}
.card-corner.top{top:7px;left:8px;}
.card-corner.bottom{bottom:7px;right:8px;transform:rotate(180deg);}
.card.player-card .card-corner.top{top:8px;left:9px;}
.card.player-card .card-corner.bottom{bottom:8px;right:9px;}

.card-corner .rank{font-weight:800;}
.card.dealer-card .card-corner .rank{font-size:18px;}
.card.dealer-card .card-corner .suit-sm{font-size:14px;}
.card.player-card .card-corner .rank{font-size:20px;}
.card.player-card .card-corner .suit-sm{font-size:16px;}

.card-center{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;line-height:1;
}
.card.dealer-card .card-center{font-size:38px;}
.card.player-card .card-center{font-size:42px;}

/* Face-down */
.card-back{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(150deg,#16384a,#0d2733);
  border:1px solid rgba(0,231,1,.25);overflow:hidden;
}
.card-back-pattern{
  position:absolute;inset:6px;border-radius:6px;
  border:1.5px solid rgba(0,231,1,.35);
  background:repeating-linear-gradient(45deg,rgba(0,231,1,.07) 0 5px,transparent 5px 11px);
}
.card-back-dot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.card-back-dot::after{
  content:'';width:13px;height:13px;border-radius:50%;
  background:rgba(0,231,1,.5);box-shadow:0 0 12px rgba(0,231,1,.6);
}

/* ── Felt Rules (watermark) ────────────────────────────── */
#felt-rules{
  text-align:center;color:rgba(255,255,255,.2);margin:auto 0;
}
#felt-rules .rule-main{font-size:15px;font-weight:800;letter-spacing:.28em;}
#felt-rules .rule-sub{font-size:10px;font-weight:600;letter-spacing:.22em;margin-top:6px;}

/* ── Spacer ────────────────────────────────────────────── */
.flex-spacer{flex:1;min-height:8px;}

/* ── Player ────────────────────────────────────────────── */
#player-section{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  margin-bottom:8px;
}
#player-hands-container{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.player-hand{display:flex;flex-direction:column;align-items:center;gap:6px;}
.player-hand .card-row{padding:6px;border-radius:14px;}
.player-hand.glow-win .card-row{animation:winGlow 1.6s ease-in-out infinite;}
.player-hand .hand-label{display:flex;align-items:center;gap:8px;}
.player-hand .hand-bet{font-size:11px;font-weight:700;color:var(--accent);margin-top:2px;}

/* ── Result Banner ─────────────────────────────────────── */
#result-banner{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  animation:bannerPop .45s cubic-bezier(.2,.9,.3,1.2) both;
  z-index:15;pointer-events:none;padding:10px 0;
}
#result-text{
  font-size:30px;font-weight:900;letter-spacing:.06em;
}
#result-payout{
  font-size:15px;font-weight:800;padding:5px 14px;border-radius:9px;
}

/* ── Bet Spot ──────────────────────────────────────────── */
#bet-spot{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  margin-bottom:6px;
}
#bet-circle{
  width:94px;height:94px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:all .2s;
}
#bet-circle.idle{
  border:2px dashed rgba(0,231,1,.7);
  box-shadow:0 0 22px rgba(0,231,1,.3),inset 0 0 18px rgba(0,231,1,.12);
}
#bet-circle.armed{
  border:2px dashed rgba(255,255,255,.22);
  box-shadow:none;
}
#bet-prompt{
  text-align:center;color:rgba(255,255,255,.55);line-height:1.1;
  font-size:11px;font-weight:800;letter-spacing:.12em;
}
#bet-label{font-size:13px;font-weight:800;color:var(--accent);}

/* Chip stack on bet spot */
.chip-stack{position:relative;width:56px;height:56px;}
.chip-stack .bet-chip{
  position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 4px 9px rgba(0,0,0,.5);
  animation:chipDrop .45s cubic-bezier(.2,.85,.3,1.4) both;
}
.bet-chip .chip-inner{
  width:64%;height:64%;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ── Action Zone ───────────────────────────────────────── */
#action-zone{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  background:linear-gradient(180deg,transparent,rgba(5,14,19,.55) 30%,rgba(4,11,15,.92));
  border-top:1px solid var(--line);
  padding:14px 16px calc(30px + var(--safe-b));
  backdrop-filter:blur(4px);
}

/* ── Chip Selector ─────────────────────────────────────── */
#chip-selector{display:flex;justify-content:center;gap:11px;margin-bottom:13px;}
.sel-chip{
  position:relative;border:none;cursor:pointer;
  width:50px;height:50px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 4px 9px rgba(0,0,0,.45);
}
.sel-chip.selected{
  transform:translateY(-9px);
  box-shadow:0 0 0 3px var(--accent),0 0 16px rgba(0,231,1,.5),0 8px 14px rgba(0,0,0,.5);
}
.sel-chip .chip-inner{
  width:64%;height:64%;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

#idle-hint{
  text-align:center;font-size:12px;font-weight:600;
  color:var(--muted);letter-spacing:.02em;
}

/* ── Bet Armed Controls ────────────────────────────────── */
#bet-controls{display:flex;gap:10px;}
.btn-clear{
  cursor:pointer;border:1px solid var(--line);
  background:var(--surface1);color:#c6d6df;
  font-family:inherit;font-weight:800;font-size:15px;
  letter-spacing:.04em;border-radius:14px;height:56px;width:96px;
}
.btn-deal{
  cursor:pointer;border:none;flex:1;
  background:var(--accent);color:var(--accent-dark);
  font-family:inherit;font-weight:900;font-size:18px;
  letter-spacing:.1em;border-radius:14px;height:56px;
  box-shadow:0 8px 22px -6px rgba(0,231,1,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-deal:disabled{opacity:.4;cursor:not-allowed;}

/* ── In-Play Actions ───────────────────────────────────── */
#play-controls{display:flex;flex-direction:column;gap:9px;}
.play-row-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.play-row-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.btn-secondary{
  cursor:pointer;border:1px solid var(--line);
  background:var(--surface1);color:#dbe8ef;
  font-family:inherit;font-weight:800;font-size:13px;
  letter-spacing:.04em;border-radius:13px;height:50px;
}
.btn-secondary:disabled{opacity:.25;cursor:not-allowed;}

.btn-insurance{
  cursor:pointer;border:1px solid rgba(0,231,1,.35);
  background:rgba(0,231,1,.1);color:#7df58f;
  font-family:inherit;font-weight:800;font-size:12px;
  letter-spacing:.02em;border-radius:13px;height:50px;
}
.btn-insurance:disabled{opacity:.25;cursor:not-allowed;}

.btn-hit{
  cursor:pointer;border:none;
  background:var(--accent);color:var(--accent-dark);
  font-family:inherit;font-weight:900;font-size:18px;
  letter-spacing:.1em;border-radius:14px;height:58px;
  box-shadow:0 8px 22px -6px rgba(0,231,1,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-hit:disabled{opacity:.3;cursor:not-allowed;}

.btn-stand{
  cursor:pointer;border:1px solid rgba(255,255,255,.18);
  background:var(--surface2);color:#f0f6f9;
  font-family:inherit;font-weight:900;font-size:18px;
  letter-spacing:.1em;border-radius:14px;height:58px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-stand:disabled{opacity:.3;cursor:not-allowed;}

/* ── Resolve Controls ──────────────────────────────────── */
#resolve-controls{display:flex;gap:10px;}
.btn-rebet{
  cursor:pointer;border:1px solid var(--line);
  background:var(--surface1);color:#c6d6df;
  font-family:inherit;font-weight:800;font-size:15px;
  letter-spacing:.04em;border-radius:14px;height:56px;width:110px;
}
.btn-newbet{
  cursor:pointer;border:none;flex:1;
  background:var(--accent);color:var(--accent-dark);
  font-family:inherit;font-weight:900;font-size:17px;
  letter-spacing:.08em;border-radius:14px;height:56px;
  box-shadow:0 8px 22px -6px rgba(0,231,1,.6),inset 0 1px 0 rgba(255,255,255,.4);
}

/* ── Insurance Prompt ──────────────────────────────────── */
#insurance-prompt{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
#insurance-prompt p{font-size:14px;font-weight:700;color:var(--text);}
#insurance-cost{color:var(--accent);}
.ins-btns{display:flex;gap:10px;width:100%;}
.ins-btns .btn-hit,.ins-btns .btn-stand{flex:1;height:52px;font-size:16px;}

/* ── Menu Overlay ──────────────────────────────────────── */
#menu-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
}
#menu-panel{
  position:absolute;top:0;left:0;bottom:0;
  width:min(340px,85vw);
  background:#0a1921;
  box-shadow:4px 0 24px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  animation:slideIn .25s ease-out;
}
#menu-close{
  position:absolute;top:12px;right:12px;
  background:none;border:none;color:var(--muted);
  font-size:22px;cursor:pointer;padding:4px;
}
#menu-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:14px 14px 0;}
.tab{
  background:var(--surface1);border:none;
  color:var(--muted);font-size:12px;font-weight:600;
  padding:8px 12px;border-radius:6px 6px 0 0;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.tab.active{background:var(--accent);color:var(--accent-dark);}
#menu-content{flex:1;overflow-y:auto;padding:18px 14px;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.tab-pane h3{font-size:16px;margin-bottom:14px;color:var(--accent);}

/* ── Account Tab ───────────────────────────────────────── */
.acct-card{
  display:flex;align-items:center;gap:14px;
  padding:16px;background:var(--surface1);border-radius:14px;
  border:1px solid var(--line);margin-bottom:14px;
}
.acct-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#1a8a3e);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--accent-dark);
  flex-shrink:0;
}
.acct-username{font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px;}
.acct-email{font-size:13px;color:var(--muted);}
.acct-balance-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:var(--surface1);border-radius:14px;
  border:1px solid var(--line);margin-bottom:18px;
}
.acct-balance-label{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.1em;}
.acct-balance{font-size:26px;font-weight:800;color:var(--accent);}
.btn-signout{
  width:100%;padding:14px;border-radius:12px;
  background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.25);
  color:#ff5a5a;font-family:inherit;font-weight:700;font-size:15px;
  cursor:pointer;transition:.15s;letter-spacing:.04em;
}
.btn-signout:active{background:rgba(255,90,90,.2);}

/* ── Deposit Tab ───────────────────────────────────────── */
.deposit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.deposit-btn{
  padding:18px;border-radius:10px;
  background:var(--surface1);border:1.5px solid rgba(0,231,1,.25);
  color:var(--accent);font-size:20px;font-weight:800;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.deposit-btn:active{background:var(--accent);color:var(--accent-dark);}
.admin-quick-btn{
  padding:18px;border-radius:10px;
  background:var(--surface1);border:1.5px solid rgba(0,231,1,.25);
  color:var(--accent);font-size:18px;font-weight:800;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.admin-quick-btn:active{background:var(--accent);color:var(--accent-dark);}

/* ── Admin Users Table ─────────────────────────────────── */
#admin-users-section{margin-top:22px;}
.admin-users-note{
  font-size:11px;line-height:1.45;color:var(--muted);
  background:rgba(0,231,1,.06);border:1px solid rgba(0,231,1,.18);
  border-radius:8px;padding:8px 10px;margin-bottom:12px;
}
.admin-table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  background:rgba(0,0,0,.18);
}
.admin-table{width:100%;border-collapse:collapse;font-size:12px;}
.admin-table th{
  text-align:left;padding:9px 10px;background:var(--surface1);
  color:var(--muted);font-weight:700;letter-spacing:.04em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.admin-table td{
  padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--text);white-space:nowrap;
}
.admin-table tr:last-child td{border-bottom:none;}
.admin-bal{color:var(--accent);font-weight:700;}
.admin-pass{color:var(--muted);letter-spacing:3px;font-weight:700;}
.admin-empty{text-align:center;color:var(--muted);padding:16px;}
.btn-approve{background:rgba(0,231,1,.15);color:var(--accent);border:1px solid rgba(0,231,1,.3);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;margin-right:4px;font-family:inherit;font-weight:700;}
.btn-reject{background:rgba(255,90,90,.15);color:#ff5a5a;border:1px solid rgba(255,90,90,.3);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:700;}
.btn-approve:active,.btn-reject:active{transform:scale(.95);}

/* ── Progression: level chip + XP bar ──────────────────── */
#level-chip{
  display:flex;flex-direction:column;gap:4px;
  background:rgba(6,16,22,.55);border:1px solid var(--line);
  padding:6px 10px;border-radius:12px;backdrop-filter:blur(6px);min-width:78px;
}
.lvl-num{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent);}
.xp-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;}
.xp-fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--accent),#7df58f);transition:width .5s ease;}
#mute-btn{font-size:15px;}

/* ── Daily bonus ───────────────────────────────────────── */
.btn-daily{
  width:100%;margin-bottom:14px;padding:13px;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.02em;
  background:linear-gradient(135deg,#ffd54a,#f5a623);color:#5a3a00;
  box-shadow:0 6px 18px -6px rgba(245,166,35,.6);
}
.btn-daily:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);}

/* ── Stats grid ────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-card{
  background:var(--surface1);border:1px solid var(--line);border-radius:10px;padding:12px;
}
.stat-card .stat-val{font-size:20px;font-weight:800;color:var(--text);}
.stat-card .stat-val.accent{color:var(--accent);}
.stat-card .stat-label{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.04em;}

/* ── Achievements ──────────────────────────────────────── */
.ach-list{display:flex;flex-direction:column;gap:8px;}
.ach-item{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
  background:var(--surface1);border:1px solid var(--line);
}
.ach-item.locked{opacity:.45;}
.ach-icon{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:rgba(0,231,1,.12);
}
.ach-item.locked .ach-icon{background:rgba(255,255,255,.06);}
.ach-name{font-size:13px;font-weight:700;color:var(--text);}
.ach-desc{font-size:11px;color:var(--muted);}

/* ── Cosmetics ─────────────────────────────────────────── */
.cosmetic-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.cosmetic-opt{
  position:relative;cursor:pointer;border-radius:10px;overflow:hidden;
  border:2px solid var(--line);background:var(--surface1);padding:8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;
}
.cosmetic-opt.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.cosmetic-opt.locked{opacity:.5;cursor:not-allowed;}
.cosmetic-opt .swatch{width:38px;height:52px;border-radius:6px;}
.cosmetic-opt .cos-name{font-size:11px;font-weight:700;color:var(--text);}
.cosmetic-opt .cos-lock{font-size:10px;color:var(--muted);}

/* swatch previews */
.swatch.cb-default{background:linear-gradient(150deg,#16384a,#0d2733);border:1px solid rgba(0,231,1,.3);}
.swatch.cb-neon{background:repeating-linear-gradient(45deg,#0a2a1a 0 4px,#0f3d28 4px 8px);border:1px solid #00e701;}
.swatch.cb-gold{background:linear-gradient(150deg,#3a2e08,#161616);border:1px solid #d4af37;}
.swatch.ft-default{background:radial-gradient(circle at 50% 30%,#26515f,#0b2330);}
.swatch.ft-crimson{background:radial-gradient(circle at 50% 30%,#6f1d2b,#240a10);}
.swatch.ft-midnight{background:radial-gradient(circle at 50% 30%,#1c2b53,#070b1a);}

/* ── Cosmetic THEMES applied to the table ──────────────── */
#felt.felt-crimson{background:radial-gradient(115% 80% at 50% 28%,#7a2230 0%,#4a121d 42%,#2a0a10 78%,#160508 100%);}
#felt.felt-midnight{background:radial-gradient(115% 80% at 50% 28%,#243463 0%,#152347 42%,#0a1228 78%,#05080f 100%);}
body.cardback-neon .card-back{background:repeating-linear-gradient(45deg,#0a2a1a 0 5px,#0f3d28 5px 10px);border-color:#00e701;}
body.cardback-gold .card-back{background:linear-gradient(150deg,#3a2e08,#161616);border-color:#d4af37;}
body.cardback-gold .card-back-pattern{border-color:rgba(212,175,55,.5);}
body.cardback-gold .card-back-dot::after{background:rgba(212,175,55,.7);box-shadow:0 0 12px rgba(212,175,55,.6);}

/* ── Level-up / achievement banner toast ───────────────── */
#level-toast{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  z-index:320;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(135deg,rgba(0,231,1,.95),rgba(26,138,62,.95));
  color:#062b06;padding:10px 22px;border-radius:12px;font-weight:800;
  box-shadow:0 8px 26px -6px rgba(0,231,1,.6);animation:bannerPop .4s ease-out;
  pointer-events:none;text-align:center;
}
#level-toast .lt-sub{font-size:12px;font-weight:700;opacity:.85;}
.deposit-note{font-size:12px;color:var(--muted);text-align:center;}
#deposit-spinner{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:16px;padding:12px;border-radius:10px;
  background:rgba(0,231,1,.06);border:1px solid rgba(0,231,1,.18);
  font-size:12px;color:var(--muted);
}
.spinner-ring{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:2.5px solid rgba(0,231,1,.25);border-top-color:var(--accent);
  animation:spin .8s linear infinite;will-change:transform;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Form Elements ─────────────────────────────────────── */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;}
.form-group input,.form-group select{
  width:100%;padding:10px 12px;font-size:14px;
  background:var(--surface1);border:1px solid var(--line);
  border-radius:8px;color:var(--text);outline:none;font-family:inherit;
}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);}
.form-group select{cursor:pointer;}
.form-group input[type="range"]{
  -webkit-appearance:none;height:6px;border-radius:3px;
  background:var(--surface1);padding:0;border:none;
}
.form-group input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;
  background:var(--accent);border-radius:50%;cursor:pointer;
}
.wd-help{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;}

.msg{padding:8px 12px;border-radius:6px;font-size:13px;margin-top:10px;}
.msg.error{background:rgba(255,90,90,.15);color:#ff5a5a;}
.msg.success{background:rgba(0,231,1,.1);color:var(--accent);}

/* ── Fairness Tab ──────────────────────────────────────── */
.fairness-desc{font-size:13px;color:var(--muted);margin-bottom:14px;}
#vf-result{margin-top:14px;padding:12px;background:var(--surface1);border-radius:8px;}
#vf-status{font-weight:700;font-size:15px;margin-bottom:8px;}
#vf-status.pass{color:var(--accent);}
#vf-status.fail{color:#ff5a5a;}
#vf-deck-order{font-family:'Courier New',monospace;font-size:12px;color:var(--muted);word-break:break-all;line-height:1.6;}

/* ── Auth Modal ────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-content{
  background:#0a1921;border-radius:16px;
  padding:28px 24px;width:100%;max-width:380px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  border:1px solid var(--line);
}
#auth-tabs{display:flex;gap:4px;margin-bottom:20px;}
.auth-tab{
  flex:1;padding:10px;border:none;
  background:var(--surface1);color:var(--muted);
  font-size:14px;font-weight:600;cursor:pointer;
  border-radius:8px;transition:.15s;font-family:inherit;
}
.auth-tab.active{background:var(--accent);color:var(--accent-dark);}
.auth-form{display:flex;flex-direction:column;gap:2px;}
.auth-form .btn-primary-auth{
  margin-top:8px;width:100%;height:50px;border:none;border-radius:12px;
  background:var(--accent);color:var(--accent-dark);
  font-family:inherit;font-weight:900;font-size:16px;
  letter-spacing:.06em;cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(0,231,1,.5);
}
.link-btn{
  background:none;border:none;color:var(--accent);
  font-size:13px;cursor:pointer;padding:6px;
  text-decoration:underline;text-align:center;font-family:inherit;
}
.btn-secondary-sm{
  background:var(--surface1);border:1px solid var(--line);
  color:var(--text);border-radius:8px;
  padding:10px 20px;font-size:14px;cursor:pointer;font-family:inherit;
}

/* ── Toast ─────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:#fff;
  padding:10px 24px;border-radius:8px;
  font-size:14px;font-weight:600;z-index:300;
  animation:bannerPop .3s ease-out;pointer-events:none;
}

/* ── Guest CTA + auth modal close ──────────────────────── */
#auth-cta{
  background:var(--accent);color:var(--accent-dark);
  border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.02em;
  padding:11px 18px;min-height:44px;
  box-shadow:0 6px 18px -6px rgba(0,231,1,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
#auth-cta:active{transform:scale(.97);}
#auth-modal-close{
  position:absolute;top:12px;right:14px;
  background:none;border:none;color:var(--muted);
  font-size:20px;cursor:pointer;padding:4px;line-height:1;
}
.modal-content{position:relative;}

/* ── Locked (guest) controls ───────────────────────────── */
#bet-circle.locked{opacity:.45;}
.sel-chip.locked{opacity:.4;filter:grayscale(.4);cursor:not-allowed;}

/* GPU hints for chips */
.bet-chip,.sel-chip{will-change:transform;}

.you-label{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--muted);}

/* Reduce motion preference */
@media(prefers-reduced-motion:reduce){
  .card.dealing,.card.flipping,.bet-chip{animation:none!important;}
}

/* ── Responsive ────────────────────────────────────────── */
@media(min-width:600px){
  :root{--card-w:80px;--card-h:113px;--pcard-w:88px;--pcard-h:124px;}
  .card.dealer-card .card-corner .rank{font-size:20px;}
  .card.player-card .card-corner .rank{font-size:22px;}
  .card.dealer-card .card-center{font-size:42px;}
  .card.player-card .card-center{font-size:48px;}
}

/* Desktop: center the table, cap width at 800px */
@media(min-width:801px){
  #game-area{
    left:50%;transform:translateX(-50%);
    width:100%;max-width:800px;
  }
  #action-zone{
    left:50%;transform:translateX(-50%);
    width:100%;max-width:800px;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
  }
  #header{
    left:50%;transform:translateX(-50%);
    width:100%;max-width:800px;
  }
  #shoe{right:calc(50% - 400px + 14px);}
}