:root{
  --bg:#0b1020; --felt:#063729; --felt-ring:#0c5a44; --panel:#0f1530; --ink:#e7ecff;
  --muted:#9fb1ff; --accent:#09f19a; --accent2:#ffd166; --danger:#ff4d6d; --border:rgba(255,255,255,.09);
  --card:#101735; --radius:12px; --fs-base:13px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background: radial-gradient(900px 480px at 80% -10%, rgba(0,255,168,.08), transparent 60%),
             radial-gradient(900px 480px at 10% 0%, rgba(255,209,102,.06), transparent 60%), var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  font-size: var(--fs-base);
}
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:linear-gradient(180deg, rgba(15,21,48,.94), rgba(15,21,48,.7));
  border-bottom:1px solid var(--border); backdrop-filter: blur(6px);
}
.brand{font-weight:800; letter-spacing:.6px; font-size:13px}
.hud{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hud-group{display:flex; gap:6px; align-items:center}
button, input, select{ font:inherit; color:var(--ink); background:linear-gradient(180deg, #0f1530, #0b1227);
  border:1px solid var(--border); border-radius:10px; padding:7px 9px; outline:none; }
button{cursor:pointer; transition:transform .1s ease, box-shadow .1s ease; font-size:12px}
button:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35)}
button.ghost{background:transparent} button.primary{background:linear-gradient(180deg, #177f62, #115644); border-color:#177f62}
button.danger{background:linear-gradient(180deg, #6e1c2a, #4d0f19); border-color:#6e1c2a}
.switch{display:flex; align-items:center; gap:6px; font-size:12px}
.switch input{accent-color:var(--accent)}
.systems-bar{ position:sticky; top:48px; z-index:15; background:rgba(10,14,32,.7); border-bottom:1px solid var(--border); padding:6px 8px; backdrop-filter: blur(6px); }
.systems-grid{ max-width:1300px; margin:0 auto; padding:0 2px; display:grid; gap:6px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.syscard{ border:1px solid var(--border); border-radius:10px; padding:8px; background:linear-gradient(180deg, #0e1635, #0b132e); display:grid; gap:4px; }
.sys-h{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.sys-h span{ font-size:11px; color:var(--muted) } .sys-h strong{ font-size:12px; color:var(--accent2) }
.sysline{ display:flex; justify-content:space-between; align-items:center; font-variant-numeric: tabular-nums; gap:6px; }
.sysline label{ color:#b8c0ff; font-size:11px } .sysline .val{ font-weight:700; font-size:12px }
.statusbar{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); background:rgba(10,14,32,.7); }
.status-left,.status-right{opacity:.95; font-size:12px} .status-right{text-align:right} .status-center{display:flex; align-items:center; gap:12px}
.system{display:grid; gap:4px}
.table-wrap{ max-width:1300px; margin:16px auto; padding:0 12px; }
.table{ background: radial-gradient(320px 160px at 50% 0%, rgba(0,0,0,.2), transparent), radial-gradient(700px 300px at 50% 0%, var(--felt-ring), transparent 60%), var(--felt);
  border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:14px; box-shadow: 0 28px 60px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.03); min-height:480px; position:relative; }
.dealer,.player{display:grid; justify-items:center; gap:8px} .dealer{margin-bottom:20px}
.hands{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; min-height:100px}
.hand{display:flex; gap:8px; flex-wrap:wrap} .hand.active{outline:2px solid rgba(255,255,255,.28); border-radius:10px; padding:4px}
.upcard,.pinfo{opacity:.9; font-size:12px}
.controls{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.ctrl{min-width:96px; padding:6px 8px; font-size:12px}
.card{ width:58px; height:82px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:#fff; color:#111; display:grid; place-items:center; font-weight:700; font-size:1.05rem; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.card.red{color:#b0002a} .card.back{background:linear-gradient(45deg, #0f1530, #15204f); color:#fff}
.drawer{ width:min(1100px, 96vw); max-height:80vh; border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--ink); padding:0; }
.drawer header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.sheet{ background:var(--card); border-top:1px solid var(--border); }
.sheet-bar{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 10px; background:#0e1635; border-top:1px solid var(--border); }
.rulegrid{ display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding:10px 12px; font-size:12px }
fieldset{border:1px solid var(--border); border-radius:10px; padding:8px 10px} legend{opacity:.9; font-size:12px}
button[disabled]{opacity:.5; cursor:not-allowed}