/* Blackjack trainer — mobile-first, felt-table theme.
 * Dark backdrop matches the landing page; the table itself is a classic
 * green felt with a wooden rail. Action buttons pick up the same accent
 * colours as the strategy chart so the mapping sticks.
 */

:root {
  --bg: #0f0e0c;
  --surface: #1a1814;
  --surface-2: #24201a;
  --text: #ede5d3;
  --text-dim: #b9b09c;
  --gold: #d9b45b;
  --gold-dim: #a8894a;
  --felt-1: #17724a;
  --felt-2: #0d5132;
  --felt-3: #093b25;
  --rail: #4a3018;
  --rail-2: #2e1d0e;
  --card-face: #f7f3e8;
  --card-red: #b3372e;
  --card-black: #1d1c1a;
  /* chart / action accents */
  --c-hit: #a8433a;
  --c-stand: #b98a2e;
  --c-double: #2f6db3;
  --c-split: #2e8b6e;
  --c-surrender: #7d5aa6;
  --good: #4caf7d;
  --bad: #d05b52;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hidden { display: none !important; }

/* ================================ Header ================================ */

.top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  padding-top: max(0.4rem, env(safe-area-inset-top));
}

.top-home {
  color: var(--gold);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem 0.3rem;
}

.top-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.top-chips { display: flex; gap: 0.4rem; margin-left: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: var(--surface);
  border: 1px solid rgba(217, 180, 91, 0.25);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.chip b { font-weight: 600; }
.chip-score span { color: var(--gold); font-size: 0.6rem; }
.chip-streak span { color: #e8933a; font-size: 0.7rem; }
.chip-streak.is-hot { border-color: rgba(232, 147, 58, 0.6); }

.iconbtn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(237, 229, 211, 0.15);
  border-radius: 0.5rem;
  padding: 0.32rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.iconbtn-gear { font-size: 0.95rem; padding: 0.25rem 0.5rem; }
.iconbtn:active { transform: scale(0.96); }

/* ================================= Table ================================= */

.table {
  position: relative;
  flex: 1;
  display: flex;
  padding: 0.35rem 0.6rem 0.2rem;
  min-height: 0;
}

.felt {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
  border-radius: 26px 26px 34px 34px;
  background:
    radial-gradient(140% 110% at 50% -8%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  border: 7px solid var(--rail);
  box-shadow:
    inset 0 0 0 2px rgba(217, 180, 91, 0.35),
    inset 0 14px 40px rgba(0, 0, 0, 0.35),
    0 12px 34px rgba(0, 0, 0, 0.5);
  padding: 0.8rem 0.8rem 0.9rem;
  overflow: hidden;
}

.dealer-area, .player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-height: 7.2rem;
}

.player-area { justify-content: flex-end; }

.seat-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 232, 207, 0.65);
}

.table-msg {
  text-align: center;
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.4rem;
}

.table-rule {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: rgba(242, 232, 207, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

.table-result {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.table-result.res-win { color: #7ddba8; }
.table-result.res-lose { color: #f0938b; }
.table-result.res-push { color: var(--text-dim); }
.table-result.res-blackjack { color: var(--gold); }

/* ================================= Cards ================================= */

.cards, .hand-cards {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  width: clamp(46px, 13.5vw, 62px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: var(--card-face);
  color: var(--card-black);
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  animation: deal-in 0.28s ease-out backwards;
  flex-shrink: 0;
}

.card.red { color: var(--card-red); }

.card-corner {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.card-corner small { display: block; font-size: 0.7em; }

.card-pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding-top: 0.4rem;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #7d2a35 0 5px, #6a222c 5px 10px);
  border: 3px solid var(--card-face);
}

@keyframes deal-in {
  from { transform: translateY(-18px) rotate(-4deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

/* Split hands sit side by side; the live one is lifted and lit */
.hands {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}

.hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.3rem 0.15rem;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.62;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.hand.active {
  opacity: 1;
  border-color: rgba(217, 180, 91, 0.55);
  background: rgba(0, 0, 0, 0.12);
}

.hands.single .hand { opacity: 1; border-color: transparent; background: none; }

.hand-total {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(242, 232, 207, 0.85);
  min-height: 1em;
}

.hand-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.hand-badge.res-win, .hand-badge.res-blackjack { background: rgba(76, 175, 125, 0.22); color: #7ddba8; }
.hand-badge.res-lose { background: rgba(208, 91, 82, 0.22); color: #f0938b; }
.hand-badge.res-push { background: rgba(255, 255, 255, 0.1); color: var(--text-dim); }
.hand-badge.res-surrender { background: rgba(125, 90, 166, 0.28); color: #c6aee6; }

.hand-caption {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(242, 232, 207, 0.75);
  min-height: 1.1em;
  letter-spacing: 0.04em;
}

/* Retry + count widgets on the felt */

.retry-flag {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0d3b26;
  background: var(--gold);
  border-radius: 4px;
  padding: 0.18rem 0.42rem;
}

.count-chip {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(242, 232, 207, 0.75);
  border: 1px solid rgba(242, 232, 207, 0.25);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
}

.count-peek {
  position: absolute;
  top: 2.4rem;
  right: 0.7rem;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(217, 180, 91, 0.4);
  color: var(--text);
  font-size: 0.72rem;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

/* Floating "+12" toasts */

.toast-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 34%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  animation: toast-rise 0.9s ease-out forwards;
  white-space: nowrap;
}

.toast-good { background: rgba(24, 68, 44, 0.92); color: #8fe6b4; border: 1px solid rgba(76, 175, 125, 0.5); }
.toast-info { background: rgba(0, 0, 0, 0.75); color: var(--text); border: 1px solid rgba(237, 229, 211, 0.25); font-weight: 500; font-size: 0.8rem; }

@keyframes toast-rise {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  18%  { opacity: 1; transform: translate(-50%, 0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}

/* =============================== Status bar =============================== */

.statusbar {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding: 0.3rem 0.75rem 0.1rem;
  font-variant-numeric: tabular-nums;
}

#reviewCount { color: var(--gold-dim); }

/* ================================ Actions ================================ */

.actions {
  padding: 0.4rem 0.75rem;
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

.actions-primary { display: flex; gap: 0.55rem; }
.actions-secondary { display: flex; gap: 0.55rem; margin-bottom: 0.5rem; min-height: 2.6rem; }
.actions-secondary:empty { display: none; }

/* Capsule buttons in the table's own livery: hairline gold trim over a
 * near-black felt shadow, engraved uppercase lettering. Hit/Stand carry the
 * weight; the situational moves sit above as quieter ghost capsules. */
.act {
  position: relative;
  flex: 1;
  border: 1px solid rgba(217, 180, 91, 0.55);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-indent: 0.18em; /* optically recentre letterspaced caps */
  padding: 0.95rem 0.5rem;
  color: #f2e8cf;
  background: linear-gradient(180deg, rgba(31, 27, 21, 0.96), rgba(14, 12, 10, 0.96));
  box-shadow: inset 0 1px 0 rgba(242, 232, 207, 0.07), 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease;
}

.act:hover { border-color: rgba(217, 180, 91, 0.85); }

.act:active {
  transform: scale(0.98);
  background: linear-gradient(180deg, rgba(58, 46, 24, 0.96), rgba(31, 25, 13, 0.96));
}

.act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.act:disabled { opacity: 0.3; pointer-events: none; }

.actions-secondary .act {
  padding: 0.55rem 0.4rem;
  font-size: 0.64rem;
  color: var(--text-dim);
  border-color: rgba(237, 229, 211, 0.22);
  box-shadow: none;
  background: rgba(20, 18, 14, 0.85);
}

.actions-secondary .act:hover { border-color: rgba(217, 180, 91, 0.5); color: #f2e8cf; }

.actions-insurance {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ins-q {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-right: 0.2rem;
}

/* Keyboard hints: a soft key tag on the button's right edge. Only shown on
 * devices that actually have a fine pointer + hover (i.e. not phones). */
.act .key {
  display: none;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  padding: 0.2rem 0.32rem;
  border: 1px solid rgba(237, 229, 211, 0.22);
  border-radius: 4px;
  color: rgba(237, 229, 211, 0.5);
  background: rgba(0, 0, 0, 0.25);
}

@media (hover: hover) and (pointer: fine) {
  .act .key { display: block; }
}

/* ============================ Verdict overlay ============================ */

.verdict {
  position: fixed;
  inset: 0;
  /* no backdrop-filter here: blur + the z-indexed chart cells inside triggers
   * a Chromium compositing bug that paints a displaced ghost of the grid */
  background: rgba(8, 7, 6, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 1.2rem;
}

.verdict-card {
  background: var(--surface);
  border: 1px solid rgba(208, 91, 82, 0.45);
  border-radius: 1rem;
  padding: 1.3rem 1.4rem 1.2rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.verdict-mark {
  font-size: 1.5rem;
  color: var(--bad);
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.verdict-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.45rem; }
.verdict-title em { font-style: normal; color: var(--gold); }
.verdict-detail { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 0.4rem; text-align: left; }
.verdict-detail .verdict-note { display: block; margin-top: 0.5rem; font-size: 0.7rem; opacity: 0.75; }

/* Mini chart slice inside the verdict card: the missed cell ringed in gold,
 * with its neighbouring rows for context. */
.verdict-chart { margin: 0.55rem 0 1rem; }
.verdict-chart:empty { display: none; }

.mini-grid { display: grid; gap: 2px; font-size: 0.56rem; font-variant-numeric: tabular-nums; }
.mini-grid .cg-head { min-height: 1rem; font-size: 0.52rem; }
.mini-grid .cg-rowlabel { min-height: 1.35rem; font-size: 0.56rem; }
.mini-grid .cg-cell { min-height: 1.45rem; border-radius: 3px; }
.mini-grid .cg-cell.hl {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  z-index: 1;
  box-shadow: 0 0 8px rgba(217, 180, 91, 0.5);
}
.mini-grid .cg-cell:not(.hl) { opacity: 0.72; }

.verdict-chart-caption {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-align: left;
  margin-top: 0.35rem;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--gold);
  color: #201703;
  border: none;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  width: 100%;
}

.btn-danger {
  background: none;
  color: var(--bad);
  border: 1px solid rgba(208, 91, 82, 0.5);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
  width: 100%;
  margin-top: 1.1rem;
}

/* ================================= Sheets ================================= */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: sheet-in 0.22s ease-out;
}

@keyframes sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem 0.5rem;
  padding-top: max(0.7rem, env(safe-area-inset-top));
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

.sheet-head h2 { font-size: 1.05rem; margin: 0; flex: 1; letter-spacing: 0.03em; }
.sheet-close { margin-left: auto; }
.sheet-head .switch { flex: 0 0 auto; }

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.9rem 1.4rem;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
  user-select: text;
}

/* Switches */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid rgba(237, 229, 211, 0.2);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked + .switch-track { background: #2c5c40; border-color: rgba(76, 175, 125, 0.5); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: #8fe6b4; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.switch-row {
  display: flex;
  width: 100%;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(237, 229, 211, 0.08);
}

.switch-row .switch-label { display: flex; flex-direction: column; gap: 0.15rem; }
.switch-row .switch-label small { color: var(--text-dim); font-size: 0.7rem; }

/* Mode segmented control */

.seg {
  display: flex;
  background: var(--surface);
  border-radius: 0.7rem;
  padding: 0.25rem;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.seg-btn {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.seg-btn.on { background: var(--surface-2); color: var(--gold); }

.setting-hint { font-size: 0.75rem; color: var(--text-dim); margin: 0.5rem 0 0.9rem; line-height: 1.5; }
.setting-note { font-size: 0.72rem; color: var(--text-dim); line-height: 1.55; margin-top: 1.2rem; }

.adv-only.disabled { opacity: 0.35; pointer-events: none; }

.stats-block {
  background: var(--surface);
  border-radius: 0.8rem;
  padding: 0.8rem 1rem;
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  text-align: center;
}

.stat-v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-k { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.15rem; }

/* ================================= Chart ================================= */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  padding: 0.3rem 0 0.7rem;
  font-size: 0.68rem;
  color: var(--text-dim);
}

.legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }

.legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  display: inline-block;
}

.chart-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0.9rem 0 0.35rem;
}

.chart-grid {
  display: grid;
  gap: 2px;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.cg-head, .cg-rowlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-weight: 600;
  min-height: 1.6rem;
}

.cg-rowlabel { justify-content: flex-end; padding-right: 0.35rem; white-space: nowrap; }

.cg-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  border-radius: 4px;
  font-weight: 700;
  color: #f5efe2;
}

.cg-cell.code-H { background: var(--c-hit); }
.cg-cell.code-S { background: var(--c-stand); color: #241a05; }
.cg-cell.code-D { background: var(--c-double); }
.cg-cell.code-DS { background: var(--c-double); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3); }
.cg-cell.code-P { background: var(--c-split); }
.cg-cell.code-RH { background: var(--c-surrender); }

/* Accuracy overlay: dim untried cells, mark tried cells with a per-cell bar */
.chart-grid.overlay .cg-cell.unseen { opacity: 0.28; }
.chart-grid.overlay .cg-cell { opacity: 0.9; }

.cg-acc {
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
}

.cg-acc.acc-good { color: #8fe6b4; }
.cg-acc.acc-mid { color: #f2cf7c; }
.cg-acc.acc-bad { color: #ffa39b; }

.chart-note { font-size: 0.7rem; color: var(--text-dim); line-height: 1.5; }

/* ================================= Footer ================================= */

.foot {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  font-size: 0.62rem;
  color: rgba(185, 176, 156, 0.6);
  padding: 0.15rem 0 0.4rem;
}

.foot a { color: inherit; }

/* ================================ Desktop ================================ */

@media (min-width: 700px) {
  .top { max-width: 660px; margin: 0 auto; width: 100%; }
  .card { width: 68px; }
  .table-rule { font-size: 0.66rem; }
}