:root { --felt: #0b6b3a; --felt2: #064526; --gold: #e8c26a; --ink: #f3efe2; --panel: #14171c; --panel2: #1d2128; --red: #c8263b;
  --cw: 78px; --ch: 110px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #0c0e11; color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: linear-gradient(#1b1f26, #111318); border-bottom: 1px solid #2b3039; flex-wrap: wrap; }
.brand { font-size: 18px; color: var(--gold); letter-spacing: .5px; } .brand .sub { color: #9aa3ad; font-size: 13px; }
.modes { display: flex; gap: 4px; background: #0b0d10; padding: 3px; border-radius: 10px; }
.mode { background: none; border: 0; color: #c9ced6; padding: 6px 14px; border-radius: 8px; }
.mode.active { background: var(--gold); color: #2a1e00; font-weight: 600; }
.mode:disabled { opacity: .45; cursor: not-allowed; } .mode small { font-size: 10px; display: block; margin-top: -3px; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bankroll { background: #0b0d10; padding: 6px 14px; border-radius: 20px; border: 1px solid #3a3220; } .bankroll b { color: var(--gold); font-size: 17px; margin-left: 4px; }
.icon { background: #22262e; border: 1px solid #333; color: #fff; border-radius: 50%; width: 36px; height: 36px; }

.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; padding: 12px; }
.table-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.table { position: relative; min-height: 560px; flex: 1; border-radius: 0 0 50% 50% / 0 0 32% 32%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, #14874c 0%, var(--felt) 40%, var(--felt2) 100%);
  border: 14px solid #4a2a14; border-top-width: 10px; box-shadow: inset 0 0 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.6), 0 0 0 3px #a87b3e;
}
.table::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 30% 20%, #000 0 1px, transparent 1px 3px); }
.rules-arc { position: absolute; top: 37%; left: 50%; transform: translateX(-50%); text-align: center; color: rgba(255,230,160,.55); font-family: Georgia, serif; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; width: 90%; pointer-events: none; }
.rules-arc b { display: block; font-size: 22px; color: rgba(255,230,160,.65); letter-spacing: 4px; }
.shoe-info { position: absolute; top: 14px; right: 18px; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #cfe; gap: 4px; }
.shoe { width: 70px; height: 52px; background: linear-gradient(135deg,#2b2b2b,#111); border-radius: 6px 18px 6px 6px; border: 2px solid #555; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.shoe-cards { position: absolute; left: 6px; top: 6px; width: 40px; height: 38px; background: repeating-linear-gradient(90deg,#8d1b2a 0 2px,#fff 2px 3px); border-radius: 3px; }
.discard { position: absolute; top: 14px; left: 18px; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #cfe; gap: 4px; }
.discard-stack { width: 50px; border-radius: 3px; background: repeating-linear-gradient(0deg,#8d1b2a 0 2px,#e9e2d0 2px 3px); box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: height .4s; }
.dealer-area { position: absolute; top: 40px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player-area { position: absolute; bottom: 120px; left: 0; right: 0; display: flex; justify-content: center; gap: 28px; flex-wrap: nowrap; padding: 0 10px; }
.hand-row { display: flex; height: var(--ch); min-width: var(--cw); }
.hand-row .card + .card { margin-left: calc(var(--cw) * -0.55); }
.phand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 4px; border-radius: 12px; transition: background .2s, box-shadow .2s; }
.phand.active { background: rgba(255,230,150,.12); box-shadow: 0 0 0 2px rgba(232,194,106,.8); }
.phand .meta { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.total { background: rgba(0,0,0,.55); padding: 2px 10px; border-radius: 12px; font-weight: 600; font-size: 13px; min-height: 22px; }
.total:empty { visibility: hidden; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; animation: pop .35s ease-out; }
.b-win, .b-blackjack, .b-evenmoney { background: #f3c443; color: #3a2700; } .b-lose, .b-bust { background: #6b111d; color: #fff; }
.b-push { background: #4c5866; color: #fff; } .b-surrender { background: #333; color: #ddd; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Cards */
.card { width: var(--cw); height: var(--ch); perspective: 600px; position: relative; flex: none; }
.card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s ease; }
.card.facedown .inner { transform: rotateY(180deg); }
.card .face, .card .back { position: absolute; inset: 0; border-radius: 7px; backface-visibility: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.card .face { background: linear-gradient(160deg, #fff, #f1ede4); color: #161616; border: 1px solid #bbb; font-family: Georgia, "Times New Roman", serif; }
.card.red .face { color: var(--red); }
.card .back { transform: rotateY(180deg); border: 4px solid #fff; background: #7d1626; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 8px); }
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .95; font-weight: 700; font-size: calc(var(--cw) * .23); }
.corner.tl { top: 4px; left: 5px; } .corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.corner .s { font-size: .85em; }
.pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cw) * .5); }
.card.court .pip { font-size: calc(var(--cw) * .42); font-weight: 700; }
.card.court .pip span { border: 2px solid currentColor; border-radius: 6px; padding: 6px 8px; background: rgba(232,194,106,.18); }
.card.dealt { animation: dealIn .42s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dealIn { from { transform: translate(var(--fx, 300px), var(--fy, -260px)) rotate(-25deg); opacity: .2; } to { transform: none; opacity: 1; } }

/* Chips */
.chip { display: flex; align-items: center; justify-content: center; padding: 0; --c: #ddd; width: 56px; height: 56px; border-radius: 50%; border: 0; position: relative; color: #fff; font-weight: 800; font-size: 13px;
  background: radial-gradient(circle, var(--c) 0 52%, #fff 53% 56%, var(--c) 57%);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.5); text-shadow: 0 1px 2px rgba(0,0,0,.6); transition: transform .12s; }
.chip::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#fff 0 12deg, transparent 12deg 45deg); -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 67%); mask: radial-gradient(circle, transparent 0 66%, #000 67%); }
.chip:hover:not(:disabled) { transform: translateY(-4px); } .chip:disabled { opacity: .35; cursor: not-allowed; }
.chip span { position: relative; }
.c1 { --c: #f2f2f2; color: #222; text-shadow: none; } .c5 { --c: #c8263b; } .c25 { --c: #1c8a3a; } .c100 { --c: #1b1b1b; } .c500 { --c: #6a2c91; } .c1000 { --c: #d49b1a; } .c5000 { --c: #c46a1a; }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bet-spot { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; border: 2px dashed rgba(255,230,160,.55); display: flex; align-items: center; justify-content: center; }
.chipstack { position: relative; width: 50px; height: 50px; }
.chipstack .chip { position: absolute; width: 50px; height: 50px; left: 0; font-size: 11px; pointer-events: none; animation: chipIn .25s ease-out both; }
@keyframes chipIn { from { transform: translateY(80px) scale(.8); opacity: 0; } }
.betamt { position: absolute; bottom: -20px; font-weight: 700; color: var(--gold); text-shadow: 0 1px 2px #000; }
.msg { position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px #000; pointer-events: none; text-align: center; white-space: nowrap; z-index: 5; background: rgba(0,0,0,.55); padding: 6px 22px; border-radius: 30px; border: 1px solid rgba(232,194,106,.5); }
.msg:empty { display: none; }
.msg.show { animation: pop .3s ease-out; }
.hint { max-width: 640px; width: 100%; text-align: center; background: rgba(0,0,0,.65); border-left: 4px solid var(--gold); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.hint:empty { display: none; } .hint.bad { border-color: #ff5a6e; } .hint.good { border-color: #4be08a; }

.controls { display: flex; flex-direction: column; gap: 10px; align-items: center; background: var(--panel); padding: 12px; border-radius: 12px; }
.betbtns, .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn { background: #2a2f38; color: #fff; border: 1px solid #3c434f; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.btn:hover:not(:disabled) { background: #343a45; } .btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.gold { background: linear-gradient(#f1d27e, #c9a046); color: #2a1e00; border-color: #8a6a20; } .btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.act { min-width: 100px; } .btn.act.suggest { box-shadow: 0 0 0 2px #4be08a, 0 0 14px #4be08a88; }
kbd { font-size: 10px; opacity: .55; margin-left: 4px; border: 1px solid #666; border-radius: 3px; padding: 0 3px; }
.broke { color: #ff8a98; font-weight: 600; }

.panel { background: var(--panel); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 110px); overflow: auto; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #2b3039; margin-bottom: 10px; }
.tab { flex: 1; background: none; border: 0; color: #9aa3ad; padding: 8px 4px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tabpane { display: none; } .tabpane.active { display: block; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.stat { background: var(--panel2); border-radius: 8px; padding: 6px 8px; } .stat .k { font-size: 11px; color: #8d96a1; } .stat .v { font-size: 16px; font-weight: 700; }
.pos { color: #4be08a; } .neg { color: #ff6b7d; }
canvas { width: 100%; background: var(--panel2); border-radius: 8px; margin-bottom: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
h4 { margin: 12px 0 6px; color: #c9ced6; }
.histwrap { max-height: 300px; overflow: auto; }
.hist { width: 100%; border-collapse: collapse; font-size: 12px; } .hist th, .hist td { padding: 3px 5px; border-bottom: 1px solid #262a32; text-align: left; white-space: nowrap; }
.hist th { color: #8d96a1; position: sticky; top: 0; background: var(--panel); }
.form { display: grid; gap: 8px; margin-bottom: 10px; } .form label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.form input, .form select, .modal input { background: #0c0e11; color: #fff; border: 1px solid #3c434f; border-radius: 6px; padding: 5px 8px; max-width: 180px; }
.form input[type=checkbox] { max-width: none; } .form label.chk { justify-content: flex-start; }
.note { color: #8d96a1; font-size: 12px; }
.acc { text-align: center; background: var(--panel2); padding: 14px; border-radius: 10px; margin-bottom: 10px; } .acc .big { font-size: 40px; font-weight: 800; color: var(--gold); }
.mistakes { font-size: 12px; padding-left: 18px; color: #d7dbe0; }
.simout { margin: 10px 0; } .simout table td:last-child { text-align: right; font-weight: 600; }
.chartview table { border-collapse: collapse; font-size: 10.5px; margin-bottom: 8px; width: 100%; } .chartview td, .chartview th { border: 1px solid #0c0e11; text-align: center; padding: 2px 0; }
.chartview .H { background: #e7e7e7; color: #111; } .chartview .S { background: #d64545; } .chartview .D, .chartview .Ds { background: #3a9b4e; } .chartview .P { background: #3f6fd6; } .chartview .Rh, .chartview .Rs, .chartview .Rp { background: #9a9a9a; color: #111; }
footer { text-align: center; font-size: 12px; color: #7c858f; padding: 8px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: var(--panel); border: 1px solid #3a3220; padding: 24px 28px; border-radius: 14px; max-width: 380px; display: grid; gap: 14px; }
.modal-box h2 { margin: 0; color: var(--gold); } .modal-box label { display: flex; justify-content: space-between; align-items: center; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #2a2f38; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 60; }
.toast.show { opacity: 1; }

@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .panel { max-height: none; } }
@media (max-width: 640px) {
  :root { --cw: 54px; --ch: 76px; }
  .table { min-height: 470px; border-width: 8px; border-radius: 0 0 30% 30% / 0 0 18% 18%; }
  .player-area { gap: 8px; bottom: 112px; } .brand .sub { display: none; } .topbar { gap: 8px; padding: 6px 8px; }
  .chip { width: 46px; height: 46px; font-size: 11px; } .btn.act { min-width: 0; padding: 9px 12px; } kbd { display: none; }
  .rules-arc { font-size: 10px; top: 40%; } .rules-arc b { font-size: 16px; } .msg { font-size: 20px; }
  .rules-arc span { display: none; }
}