:root {
  --felt: #0b3b2e;
  --felt-deep: #06271f;
  --cream: #f7f0df;
  --paper: #fffdf7;
  --ink: #14251f;
  --gold: #c9a85e;
  --red: #a62d36;
  --muted: #739286;
}
* { box-sizing: border-box; }
html { background: var(--felt-deep); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 15%, rgba(27,105,79,.9), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/18px 18px,
    var(--felt);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(201,168,94,.45);
  background: rgba(4,29,23,.72);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { color: var(--gold); font-size: 30px; line-height: 1; }
.brand strong, .brand span { display: block; }
.brand strong { font-family: Georgia, serif; letter-spacing: .1em; font-size: 15px; }
.brand div span { color: #adbcaf; font-size: 10px; letter-spacing: .16em; margin-top: 3px; }
.icon-button {
  border: 1px solid rgba(201,168,94,.65);
  color: var(--cream);
  background: transparent;
  padding: 9px 13px;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 12px;
}
main { width: min(1040px, 100%); margin: 0 auto; padding: 16px 18px 32px; }
.score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 450px;
  margin: 0 auto 10px;
}
.score-row div { text-align: center; position: relative; }
.score-row div + div::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 5px; width: 1px; background: rgba(255,255,255,.16); }
.score-row span { display: block; font-family: Georgia, serif; color: var(--gold); font-size: 25px; font-variant-numeric: tabular-nums; }
.score-row small { color: #aabbb4; font-size: 10px; letter-spacing: .13em; }
.trainer-grid { display: grid; grid-template-columns: minmax(0, 760px) 230px; gap: 18px; align-items: start; }
.play-column { min-width: 0; }
.table { padding: 8px 0; }
.table-ring {
  position: relative;
  height: 354px;
  border: 2px solid var(--gold);
  border-radius: 190px 190px 28px 28px;
  box-shadow: inset 0 0 0 7px rgba(6,39,31,.8), inset 0 0 50px rgba(0,0,0,.28), 0 8px 30px rgba(0,0,0,.22);
  display: grid;
  grid-template-rows: 1fr 36px 1fr;
  padding: 28px 22px 20px;
  background: radial-gradient(ellipse at center, rgba(29,113,85,.55), transparent 70%);
}
.shoe-flash {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(240,204,119,.85);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(6,39,31,.92);
  color: #f0cc77;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
.shoe-flash[hidden], .shoe-transition[hidden] { display: none; }
.shoe-transition {
  position: absolute;
  z-index: 5;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid rgba(240,204,119,.78);
  border-radius: 170px 170px 18px 18px;
  background: radial-gradient(circle at 50% 35%, rgba(20,83,64,.98), rgba(4,31,24,.98) 72%);
  box-shadow: inset 0 0 45px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.3);
  text-align: center;
}
.shoe-transition span { color: #f0cc77; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.shoe-transition strong { margin-top: 8px; color: white; font: 800 29px Georgia, serif; }
.shoe-transition p { max-width: 390px; margin: 8px 0 18px; color: #bdcdc7; font-size: 13px; line-height: 1.45; }
.shoe-transition button { min-height: 46px; border: 1px solid #efd17e; border-radius: 7px; padding: 0 18px; background: #9a7932; color: white; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.dealer-zone, .player-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zone-label { color: #d4ddda; font-size: 11px; letter-spacing: .15em; font-weight: 800; margin-bottom: 10px; }
.zone-label b { color: var(--gold); margin-left: 5px; }
.cards { display: flex; justify-content: center; min-height: 92px; padding-left: 20px; }
.hand-group { display: flex; padding-left: 12px; position: relative; }
.hand-group + .hand-group { margin-left: 12px; padding-left: 24px; border-left: 1px solid rgba(201,168,94,.55); }
.hand-group .card { margin-left: -12px; }
.hand-group.active::after { content: "PLAY"; position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); color: #f0cc77; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.hand-group.active .card { box-shadow: 0 0 0 2px #f0cc77, 0 7px 18px rgba(0,0,0,.34); }
.card {
  width: 67px;
  height: 92px;
  margin-left: -20px;
  background: var(--paper);
  color: #17211e;
  border-radius: 7px;
  border: 1px solid #d7cdb7;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 8px;
  font-family: Georgia, serif;
  font-weight: 800;
  animation: deal .2s ease-out both;
}
.card.red { color: var(--red); }
.card .rank { font-size: 23px; line-height: .9; }
.card .suit { font-size: 27px; text-align: center; line-height: 1; }
.card .mini { font-size: 14px; transform: rotate(180deg); align-self: end; }
.card.back { background: repeating-linear-gradient(45deg,#153b32 0 5px,#c4a355 5px 7px); border: 4px solid var(--paper); }
@keyframes deal { from { opacity: 0; transform: translateY(-14px) rotate(-2deg); } to { opacity: 1; transform: none; } }
.felt-rule { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.28); font-family: Georgia, serif; font-size: 10px; letter-spacing: .18em; }
.felt-rule i { height: 1px; flex: 1; background: rgba(255,255,255,.16); }
.feedback { min-height: 58px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.feedback strong { font-family: Georgia, serif; font-size: 20px; }
.feedback span { color: #b8c6c1; font-size: 13px; margin-top: 3px; }
.feedback.correct strong { color: #f3ce76; }
.feedback.wrong strong { color: #ff9f9f; }
.actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.actions button {
  min-height: 66px;
  border: 1px solid rgba(201,168,94,.45);
  border-radius: 8px;
  background: rgba(4,31,24,.74);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 750;
  transition: transform .1s, border-color .1s, background .1s;
}
.actions button:hover, .actions button:focus-visible { border-color: var(--gold); background: rgba(13,65,50,.95); }
.actions button:active { transform: translateY(2px); }
.actions button[disabled] { cursor: default; opacity: .5; }
.actions kbd { color: var(--gold); font: 800 12px ui-monospace, monospace; }
.actions span { font-size: 14px; }
.actions button.right { background: #93752f; border-color: #f3ce76; opacity: 1; }
.actions button.wrong { background: #7e2830; border-color: #ff9f9f; opacity: 1; }
.counting-controls { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 4px; }
.counting-controls[hidden] { display: none; }
.counting-controls button { min-height: 58px; border: 1px solid rgba(201,168,94,.55); border-radius: 8px; background: rgba(4,31,24,.8); color: var(--cream); font-weight: 850; letter-spacing: .06em; }
.counting-controls button:first-child { background: #997a35; border-color: #e4c77d; color: white; }
.counting-controls span { grid-column: 1 / -1; text-align: center; color: #afbfba; font-size: 12px; }
.controls { display: grid; grid-template-columns: auto minmax(155px,1.25fr) auto minmax(145px,1fr) auto; align-items: center; gap: 10px; margin-top: 16px; }
.controls label { color: #b9c9c2; font-size: 13px; font-weight: 700; }
.controls select, .controls button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: rgba(4,31,24,.78);
  color: var(--cream);
  padding: 0 12px;
}
.controls select { width: 100%; }
.controls button { color: #c9d4d0; }
.count-panel {
  margin-top: 8px;
  border: 1px solid rgba(201,168,94,.42);
  border-radius: 12px;
  background: rgba(4,31,24,.72);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 15px;
}
.bankroll-card { border: 1px solid rgba(201,168,94,.38); border-radius: 8px; background: rgba(15,74,57,.55); padding: 11px; margin-bottom: 17px; }
.bankroll-top, .bet-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bankroll-top span, .bet-label span { color: #b7c7c1; font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.bankroll-top strong { color: #f0cc77; font: 800 25px Georgia, serif; font-variant-numeric: tabular-nums; }
.risk-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 5px 7px; border-radius: 5px; background: rgba(0,0,0,.16); }
.risk-row span { color: #9fb2ab; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.risk-row b { color: #ead8aa; font-size: 12px; font-variant-numeric: tabular-nums; }
.bet-label { border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; padding-top: 8px; }
.bet-label b { font-size: 16px; font-variant-numeric: tabular-nums; }
.chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 9px; }
.chips button { aspect-ratio: 1; min-width: 0; border: 2px dashed rgba(255,255,255,.42); border-radius: 50%; background: #8e2832; color: white; font-size: 11px; font-weight: 850; }
.chip-currency { font-size: .86em; }
.chips button:nth-child(2) { background: #24578a; }
.chips button:nth-child(3) { background: #2f6e4d; }
.chips button:nth-child(4) { background: #2a2a2a; }
.chips button.selected { outline: 2px solid #f0cc77; outline-offset: 2px; }
.custom-bet { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 5px; align-items: center; margin-top: 11px; }
.custom-bet label { color: #9fb2ab; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.custom-bet input, .custom-bet button { min-height: 34px; border: 1px solid rgba(201,168,94,.45); border-radius: 5px; }
.custom-bet input { width: 100%; min-width: 0; padding: 0 7px; background: rgba(0,0,0,.2); color: white; font-weight: 800; font-variant-numeric: tabular-nums; }
.custom-bet button { padding: 0 8px; background: rgba(13,65,50,.9); color: #f4e7c4; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.custom-bet button:last-child { background: #8e2832; }
.bankroll-reset { width: 100%; border: 0; background: transparent; color: #9fb2ab; font-size: 10px; font-weight: 800; letter-spacing: .09em; margin-top: 10px; }
.shoe-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 10px; border: 1px solid rgba(201,168,94,.42); border-radius: 7px; background: rgba(0,0,0,.16); }
.shoe-status span { color: #b9c9c2; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.shoe-status span i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #6db892; box-shadow: 0 0 8px rgba(109,184,146,.65); }
.shoe-status strong { color: #d8e4df; font-size: 10px; letter-spacing: .09em; }
.shoe-status[data-state="new"] { border-color: rgba(240,204,119,.72); background: rgba(154,121,50,.2); }
.shoe-status[data-state="new"] span i { background: #f0cc77; box-shadow: 0 0 9px rgba(240,204,119,.8); }
.shoe-status[data-state="new"] strong { color: #f0cc77; }
.shoe-status[data-state="ending"] { border-color: rgba(235,144,150,.72); background: rgba(126,40,48,.22); }
.shoe-status[data-state="ending"] span i { background: #eb9096; box-shadow: 0 0 9px rgba(235,144,150,.8); }
.shoe-status[data-state="ending"] strong { color: #ffafb4; }
.tray-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tray-heading span { color: #d7e1dd; font: 800 12px Georgia, serif; letter-spacing: .1em; }
.tray-heading b { color: var(--gold); font-size: 12px; font-variant-numeric: tabular-nums; }
.tray-wrap { height: 170px; margin: 12px 0 10px; position: relative; display: flex; justify-content: center; align-items: end; }
.tray-shell {
  width: 112px;
  height: 164px;
  position: relative;
  border: 6px solid rgba(210,220,216,.72);
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(90deg,rgba(255,255,255,.08),transparent 16% 84%,rgba(255,255,255,.08));
  box-shadow: inset 0 -8px 20px rgba(0,0,0,.22);
  overflow: hidden;
}
.tray-shell::before, .tray-shell::after { content: ""; position: absolute; top: 0; width: 6px; height: 118px; background: rgba(210,220,216,.72); }
.tray-shell::before { left: 16px; transform: rotate(-5deg); transform-origin: top; }
.tray-shell::after { right: 16px; transform: rotate(5deg); transform-origin: top; }
.discard-stack {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: 9px;
  min-height: 3px;
  height: 3px;
  max-height: 136px;
  border: 1px solid #c9c1af;
  border-radius: 3px 3px 5px 5px;
  background: repeating-linear-gradient(to bottom,#fffdf7 0 2px,#d5cdbb 2px 3px);
  box-shadow: 0 4px 8px rgba(0,0,0,.35);
  transition: height .28s ease;
}
.cut-mark { position: absolute; left: calc(50% + 52px); bottom: 37px; width: 42px; border-top: 2px solid #d9535c; color: #eb9096; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.cut-mark span { position: absolute; top: -14px; left: 9px; }
.shoe-readout { display: flex; justify-content: space-between; color: #aebfba; font-size: 12px; font-variant-numeric: tabular-nums; }
.audit-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.audit-buttons button {
  min-height: 42px;
  border: 1px solid rgba(201,168,94,.55);
  border-radius: 6px;
  color: var(--cream);
  background: rgba(13,65,50,.84);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
}
.audit-buttons button:hover, .audit-buttons button:focus-visible { border-color: var(--gold); background: #155c48; }
.audit-card { margin-top: 9px; position: relative; border: 1px solid rgba(201,168,94,.45); border-radius: 8px; background: #f6f0e3; color: var(--ink); text-align: center; padding: 12px 28px 11px; }
.audit-card[hidden] { display: none; }
.audit-card span, .audit-card small { display: block; }
.audit-card span { color: #61706a; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.audit-card strong { display: block; color: var(--felt); font: 800 31px Georgia, serif; margin: 2px 0; font-variant-numeric: tabular-nums; }
.audit-card small { color: #61706a; font-size: 10px; line-height: 1.3; }
.audit-close { position: absolute; right: 5px; top: 4px; width: 25px; height: 25px; border: 0; background: transparent; color: #61706a; font-size: 20px; line-height: 1; }
.product-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(201,168,94,.26); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; color: #91a79f; font-size: 10px; }
.product-note strong { color: #c9a85e; font-family: Georgia,serif; letter-spacing: .1em; }
.product-note span { letter-spacing: .04em; }
.product-note small { grid-column: 1 / 3; font-size: 9px; }
.product-note b { grid-column: 3; grid-row: 1 / 3; color: #789187; font-variant-numeric: tabular-nums; }
body.counting-mode .table-ring { grid-template-rows: 1fr; border-radius: 150px 150px 28px 28px; }
body.counting-mode .dealer-zone, body.counting-mode .felt-rule, body.counting-mode .actions { display: none; }
body.counting-mode .player-zone .zone-label { font-size: 13px; color: #f0cc77; }
body.counting-mode .bankroll-card { opacity: .48; pointer-events: none; }
dialog {
  width: min(940px, calc(100% - 24px));
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #d2bd89;
  border-radius: 12px;
  background: #f6f0e3;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
dialog::backdrop { background: rgba(2,18,14,.82); backdrop-filter: blur(4px); }
.dialog-head { background: var(--felt-deep); color: white; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; }
.dialog-head strong, .dialog-head span { display: block; }
.dialog-head strong { font-family: Georgia, serif; letter-spacing: .08em; }
.dialog-head span { color: #bdc9c5; font-size: 11px; margin-top: 3px; }
.dialog-head button { border: 0; color: white; background: transparent; font-size: 30px; line-height: 1; }
.legend { padding: 12px 18px 0; font-size: 13px; color: #56645f; }
.legend b { color: var(--felt); margin-left: 10px; }
.legend b:first-child { margin-left: 0; }
.chart-content { padding: 12px 18px; display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; overflow-x: auto; }
.matrix h3 { font: 800 14px Georgia, serif; letter-spacing: .08em; margin: 0 0 6px; }
.matrix table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 12px; text-align: center; }
.matrix th { background: var(--felt-deep); color: white; height: 25px; }
.matrix td { border: 1px solid #ddd5c5; height: 24px; font-weight: 800; }
.matrix td:first-child { background: #e6e1d5; color: var(--ink); width: 42px; }
.matrix td[data-a="H"] { background: #eef0ed; }
.matrix td[data-a="S"] { background: #d7e6dc; color: #185139; }
.matrix td[data-a="D"] { background: #dce7f3; color: #244f7c; }
.matrix td[data-a="P"] { background: #ece0f0; color: #6a417d; }
.matrix td[data-a="R"] { background: #f4d8da; color: #972f39; }
.rules { margin: 0; padding: 0 18px 18px; color: #56645f; font-size: 13px; }
@media (max-width: 640px) {
  .topbar { height: 62px; }
  main { padding: 10px 12px calc(24px + env(safe-area-inset-bottom)); }
  .table-ring { height: 330px; padding-top: 24px; }
  .shoe-transition { inset: 8px; border-radius: 150px 150px 16px 16px; padding: 20px; }
  .shoe-transition strong { font-size: 24px; }
  .actions { gap: 5px; }
  .actions button { min-height: 61px; padding: 4px 2px; }
  .actions span { font-size: 12px; }
  .controls { grid-template-columns: auto 1fr; }
  .controls button { grid-column: 1 / -1; }
  .chart-content { grid-template-columns: 280px 280px 280px; }
}
@media (max-width: 880px) {
  main { width: min(760px, 100%); }
  .trainer-grid { grid-template-columns: 1fr; }
  .count-panel { display: grid; grid-template-columns: 150px 1fr; column-gap: 14px; margin-top: 4px; }
  .bankroll-card { grid-column: 1 / -1; grid-row: 1; }
  .tray-heading, .tray-wrap, .shoe-readout { grid-column: 1; }
  .tray-heading { grid-row: 2; }
  .tray-wrap { grid-row: 3; }
  .shoe-readout { grid-row: 4; }
  .tray-heading { display: block; text-align: center; }
  .tray-heading b { display: block; margin-top: 3px; }
  .tray-wrap { height: 138px; margin: 7px 0 4px; }
  .tray-shell { width: 94px; height: 136px; }
  .tray-shell::before, .tray-shell::after { height: 95px; }
  .discard-stack { max-height: 110px; }
  .cut-mark { left: calc(50% + 42px); bottom: 30px; }
  .shoe-readout { flex-direction: column; align-items: center; gap: 2px; }
  .audit-buttons { grid-column: 2; grid-row: 2; margin-top: 0; align-self: start; }
  .audit-card { grid-column: 2; margin-top: 8px; align-self: start; }
  #rcAudit { grid-row: 3; }
  #tcAudit { grid-row: 4; }
}
@media (max-width: 520px) {
  .count-panel { display: block; }
  .tray-heading { display: flex; text-align: left; }
  .tray-heading b { display: inline; margin-top: 0; }
  .shoe-readout { flex-direction: row; }
  .audit-buttons { margin-top: 14px; }
  .counting-controls { grid-template-columns: 1fr 1fr; }
  .cards { transform: scale(.92); }
  .hand-group + .hand-group { margin-left: 4px; padding-left: 16px; }
  .product-note { grid-template-columns: 1fr auto; }
  .product-note span, .product-note small { grid-column: 1 / -1; }
  .product-note b { grid-column: 2; grid-row: 1; }
}
@media (max-height: 720px) and (orientation: landscape) and (min-width: 881px) {
  .topbar { height: 54px; }
  main { padding-top: 8px; }
  .score-row { margin-bottom: 0; }
  .table-ring { height: 310px; }
}