:root{
  --bg:#0b1a24;
  --panel:#102533;
  --panel2:#0f2230;
  --text:#e9f2fb;
  --muted:#93a9bc;
  --line:rgba(255,255,255,.08);
  --gold:#f7b84b;
  --gold2:#ffcc6a;
  --green:#25c06f;
  --red:#ff4d4d;
  --radius:16px;
  --shadow:0 16px 60px rgba(0,0,0,.45);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--text);background:radial-gradient(1200px 800px at 50% 0%, #14344a 0%, var(--bg) 60%)}
a{color:var(--gold);text-decoration:none}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

.btnGold{
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  border:none;color:#1b1203;font-weight:800;
  padding:12px 14px;border-radius:12px;cursor:pointer;
  box-shadow:0 12px 30px rgba(247,184,75,.18);
}
.btnGold:hover{filter:brightness(1.05)}
.btnGhost{
  background:transparent;border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:12px;cursor:pointer;
}
.btnSmall{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 10px;border-radius:12px;
}
.btnSmall:hover{background:rgba(255,255,255,.09)}

.authBody{min-height:100vh;display:grid;place-items:center;padding:20px}
.authCard{
  width:min(420px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px;
}
.authBrand{font-weight:900;font-size:26px;letter-spacing:.3px}
.authSub{color:var(--muted);margin-top:6px;margin-bottom:16px}
.authForm label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
.authForm input{
  width:100%;padding:12px 12px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);outline:none;
}
.authRow{display:flex;justify-content:space-between;margin-top:12px;font-size:14px}
.msg{margin-top:10px;color:var(--red);min-height:18px}

.appBody{min-height:100vh}
.topBar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.15);
  position:sticky;top:0;backdrop-filter: blur(10px);
}
.brand{font-weight:900;letter-spacing:.2px}
.topRight{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:13px;
}

.mainGrid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  .mainGrid{grid-template-columns:1fr}
}

.leftPanel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}
.panelTitle{font-weight:800;color:var(--muted);margin-bottom:8px}

.betRow{display:flex;gap:8px;align-items:center}
.betRow input{
  flex:1;
  padding:12px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.18);color:var(--text);outline:none;
}
.chipBtn{
  padding:10px 10px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;
  min-width:52px;
}
.chipBtn:hover{background:rgba(255,255,255,.08)}
.btnGrid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;
}
.actBtn{
  padding:12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;
  font-weight:700;
}
.actBtn:disabled{opacity:.45;cursor:not-allowed}
.betBtn{
  width:100%;margin-top:12px;
  padding:12px;border-radius:12px;border:none;
  background:linear-gradient(180deg, #1fae61, #148f4b);
  color:#07140d;font-weight:900;cursor:pointer;
}
.betBtn:hover{filter:brightness(1.05)}

.infoCard{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.infoTitle{font-weight:800;margin-bottom:8px}
.rules{margin:0;padding-left:18px;color:var(--muted);line-height:1.55;font-size:13px}

.tablePanel{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
  min-height:520px;
  overflow:hidden;
}
.centerText{
  position:absolute;left:50%;top:34%;
  transform:translate(-50%,-50%);
  text-align:center;opacity:.65;
  pointer-events:none;
}
.ribbon{
  font-weight:900;
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  padding:10px 14px;border-radius:999px;
  display:inline-block;
}
.ribbon.small{margin-top:8px;font-size:12px}

.handArea{position:absolute;left:50%;transform:translateX(-50%);width:min(680px, 95%);}
.handArea.dealer{top:64px}
.handArea.player{bottom:64px}
.handLabel{display:flex;justify-content:center;gap:10px;align-items:center;font-weight:800;color:var(--muted);margin-bottom:10px}
.totalPill{
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--text);
}
.cardsRow{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;min-height:120px}

.card{
  width:78px;height:110px;border-radius:14px;
  background:#fff; color:#111;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  border:3px solid rgba(255,0,0,.0);
  transform: translateY(-18px);
  opacity:0;
  
}

.card { opacity:1; transform:none; }
.card.new { opacity:0; transform: translateY(-18px); animation: deal .35s ease-out forwards; }

.card.redBorder{border-color:#ff3c3c}
.card .rank{font-weight:900;font-size:22px}
.card .suit{font-size:22px;align-self:center;justify-self:center}
.card .rank.bottom{justify-self:end;transform:rotate(180deg)}

@keyframes deal{
  from{transform:translateY(-28px) scale(.98);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

.splitWrap{display:flex;justify-content:center;gap:24px;margin-top:12px;flex-wrap:wrap}
.splitHand{padding:10px;border:1px dashed var(--line);border-radius:14px;background:rgba(0,0,0,.12)}
.splitHandTitle{font-weight:800;color:var(--muted);margin-bottom:8px;text-align:center}

.toast{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:10px 12px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  color:var(--text);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.toast.show{opacity:1}

.modal{
  position:fixed;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);
}
.modal.hidden{display:none}
.modalCard{
  width:min(360px, 92%);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}
.modalTitle{font-weight:900;font-size:18px}
.modalText{margin-top:8px;color:var(--muted)}
.modalBtns{display:flex;gap:10px;margin-top:14px}
.modalBtns button{flex:1}

.historyWrap{padding:14px}
.historyList{display:grid;gap:12px}
.histCard{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.histTop{display:flex;justify-content:space-between;align-items:center}
.histGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;margin-top:10px;
}
@media (max-width: 700px){ .histGrid{grid-template-columns:1fr} }
.histDetails{margin-top:10px}
.histDetails pre{
  white-space:pre-wrap;
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  padding:10px;border-radius:12px;
  overflow:auto;
}

.adminWrap{padding:14px;display:grid;place-items:center}
.adminCard{
  width:min(520px, 100%);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}
.select{
  width:100%;
  padding:12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.18);color:var(--text);
  outline:none;margin-top:10px;margin-bottom:10px;
}