/* ── Skip link (a11y) ──────────────────────────────────── */
#skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-accent);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 0.15s;
}

#skip-link:focus {
  top: 0;
}

/* ── Views ──────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }
#view-landing.active { display: block; overflow-y: auto; height: calc(100vh - 44px); }
#view-drill.active { display: flex; }
#view-ranges.active { display: flex; }
#view-landing.active { display: block; overflow-y: auto; height: calc(100vh - 44px); }
#view-drill.active { display: flex; }
#view-ranges.active { display: flex; }
.text-muted { color: var(--text-secondary); font-size: 13px; }

/* ── Header ─────────────────────────────────────────────── */
#app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 44px;
}
.header-title { justify-self: start; }
.header-actions { justify-self: end; }

.header-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 1;
}

.header-title span {
  color: var(--color-accent);
}

.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

/* ── Scenario tabs ──────────────────────────────────────── */
#scenario-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

#scenario-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.tab-btn.active {
  background: var(--color-accent);
  color: #0d1117;
  border-color: var(--color-accent);
}

.tab-btn.custom-tab {
  background: transparent;
  color: var(--text-muted);
}

.tab-btn.custom-tab:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.tab-btn.delete-custom {
  margin-left: -6px;
  padding: 5px 8px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font-size: 14px;
}

.tab-btn.delete-custom:hover { color: var(--color-wrong); }

/* ── Drill view: full-width, no matrix ───────────────────── */
#view-drill {
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}

#panel-drill {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   DRILL PAGE — Idle (setup) state
   ══════════════════════════════════════════════════════════ */

/* ── Drill idle: full-page table layout ─────────────────── */
#drill-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}

.drl-hdr-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.drl-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Left: drill table ───────────────────────────────────── */
.drl-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a1a1a;
  overflow: hidden;
}

/* ── Setup controls in left panel ────────────────────────── */
.drl-setup-controls {
  padding: 14px 16px 6px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
  overflow-y: auto;
}

/* ── Collapsible My Drills ───────────────────────────────── */
.drl-collapse {
  flex-shrink: 0;
  border-bottom: 1px solid #1a1a1a;
}
.drl-collapse[open] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drl-collapse-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-top: 1px solid #1a1a1a;
  background: #090909;
}
.drl-collapse-summary::-webkit-details-marker { display: none; }
.drl-collapse-summary::before {
  content: '\25b6';
  font-size: 8px;
  color: #555;
  transition: transform 0.15s ease;
}
.drl-collapse[open] > .drl-collapse-summary::before {
  transform: rotate(90deg);
}
.drl-collapse-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.drl-collapse-count {
  font-size: 10px;
  font-weight: 600;
  color: #444;
}
.drl-collapse-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drl-tbl-head {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 19px;
  border-bottom: 1px solid #1a1a1a;
  background: #090909;
  flex-shrink: 0;
}

.dtc {
  font-size: 10px;
  font-weight: 700;
  color: #3a3a3a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dtc-name  { flex: 1; }
.dtc-type  { width: 90px; }
.dtc-hands { width: 62px; text-align: right; }
.dtc-score { width: 62px; text-align: right; }
.dtc-acts  { width: 40px; }

.drill-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #222 transparent;
}

.drill-list::-webkit-scrollbar { width: 4px; }
.drill-list::-webkit-scrollbar-thumb { background: #1e1e1e; border-radius: 2px; }

/* Empty state */
.drill-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
}
.drill-list-empty-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.drill-list-empty-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.drill-list-empty-cta:hover { text-decoration: underline; }

/* Group headers inside table */
.drill-list-group {
  padding: 10px 16px 5px;
  font-size: 10px;
  font-weight: 700;
  color: #2e2e2e;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #080808;
  border-bottom: 1px solid #0f0f0f;
}

/* Table rows */
.drill-list-item {
  display: flex;
  align-items: center;
  padding: 11px 16px 11px 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #0f0f0f;
  transition: background 0.1s, border-color 0.1s;
  gap: 0;
}

.drill-list-item:hover { background: #111; }

.drill-list-item.active {
  background: #141414;
  border-left-color: var(--color-accent);
}

.dli-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  transition: color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.drill-list-item.active .dli-name,
.drill-list-item:hover .dli-name { color: var(--text-primary); }

.dli-type  { width: 90px; }

/* Type badges */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.type-badge.rfi       { background: rgba(0,212,160,0.1);   color: #00d4a0; }
.type-badge.three-bet { background: rgba(91,158,247,0.1);  color: #5b9ef7; }
.type-badge.push      { background: rgba(168,125,232,0.1); color: #a87de8; }
.type-badge.custom    { background: rgba(255,255,255,0.06); color: #666; }

.dli-hands {
  width: 62px;
  text-align: right;
  font-size: 12px;
  color: #555;
  font-family: var(--font-mono);
}

.dli-score {
  width: 62px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.score-good { color: var(--color-correct); }
.score-mid  { color: #d4a017; }
.score-bad  { color: var(--color-wrong); }
.score-none { color: #333; }

.dli-acts {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dli-delete {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 3px 5px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  border-radius: 3px;
}

.drill-list-item:hover .dli-delete { opacity: 1; }
.dli-delete:hover { color: var(--color-wrong); background: rgba(224,82,82,0.08); }

/* ── Right: setup panel ──────────────────────────────────── */
.drill-setup-body {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 28px;
  overflow: hidden;
  background: #090909;
}

#drill-idle-table { display: flex; justify-content: center; }
#drill-idle-table .pt-felt { width: 280px; height: 140px; }

.drill-setup-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dsc-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}

.dsc-type.type-rfi    { background: rgba(0,212,160,0.15);   color: #00d4a0; }
.dsc-type.type-3bet   { background: rgba(58,123,213,0.15);  color: #5b9ef7; }
.dsc-type.type-push   { background: rgba(137,87,229,0.15);  color: #a87de8; }
.dsc-type.type-custom { background: rgba(255,255,255,0.08); color: #888; }

.dsc-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.dsc-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.drill-config-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.config-pill {
  padding: 3px 10px;
  background: #141414;
  border: 1px solid #222;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
}

.drill-setup-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.drill-blind-notice {
  font-size: 11px;
  color: #383838;
  max-width: 280px;
  text-align: center;
  line-height: 1.5;
}

.btn-xl {
  height: 50px;
  width: 100%;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 8px;
}

/* ── New Drill modal ─────────────────────────────────────── */
.nd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 300;
  align-items: center;
  justify-content: center;
}

.nd-overlay.active { display: flex; }

.nd-card {
  background: #141414;
  border: 1px solid #282828;
  border-radius: 12px;
  width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nd-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
}

.nd-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.nd-close-x {
  padding: 4px 8px;
  font-size: 14px;
}

.nd-card-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left tab nav */
.nd-tabs {
  width: 148px;
  flex-shrink: 0;
  background: #0f0f0f;
  border-right: 1px solid #1a1a1a;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nd-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s, color 0.1s;
}

.nd-tab:hover { background: #181818; color: #999; }
.nd-tab.active { background: #1e2e24; color: var(--color-accent); }

.nd-tab-icon { font-size: 14px; }

/* Right content */
.nd-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.nd-pane {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nd-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nd-field-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nd-optional { font-weight: 400; color: #404040; text-transform: none; letter-spacing: 0; }

.nd-input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 12px;
  transition: border-color 0.15s;
  font-family: inherit;
}

.nd-input:focus { border-color: var(--color-accent); }

.nd-textarea {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 9px 12px;
  resize: vertical;
  min-height: 60px;
  font-family: var(--font-mono);
  transition: border-color 0.15s;
}

.nd-textarea:focus { border-color: var(--color-accent); }

/* Pill button group (GTO Wizard style selectors) */
.nd-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nd-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: #1a1a1a;
  color: #666;
  border: 1px solid #252525;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.nd-btn:hover { background: #222; color: #aaa; }

.nd-btn.active {
  background: #1e2e24;
  color: var(--color-accent);
  border-color: rgba(0,212,160,0.3);
}

.nd-btn-outline {
  border-style: dashed;
  border-color: #333;
  color: #555;
}

.nd-btn-outline.active {
  border-style: solid;
  background: #1e2e24;
  color: var(--color-accent);
  border-color: rgba(0,212,160,0.3);
}

.nd-error {
  font-size: 12px;
  color: var(--color-wrong);
  min-height: 16px;
}

/* Footer */
.nd-card-ftr {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .drl-list-panel { flex: 1; }
  .drill-setup-body { display: none; }
  .btn-xl { width: 100%; }
  .nd-card { width: calc(100vw - 32px); }
  .nd-tabs { width: 110px; }
}

/* Drill — active state: centered, max-width */
#drill-active {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: visible;
  width: 100%;
  position: relative;
}

#drill-active.visible {
  display: flex;
}

/* Session stats bar — compact floating overlay */
#session-bar {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(17,17,17,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  font-size: 11px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
}

.stat-label {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.stat-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-value.good   { color: var(--color-correct); }
.stat-value.medium { color: #d4a017; }
.stat-value.bad    { color: var(--color-wrong); }

/* Context bar */
#context-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 16px;
  background: #141414;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 36px;
}

.ctx-sep {
  color: #444;
  margin: 0 8px;
}

.ctx-item { color: var(--text-secondary); }
.ctx-stack { color: var(--text-primary); font-weight: 700; }
.ctx-pos { color: var(--color-accent); }
.ctx-scenario { color: var(--text-primary); }
.ctx-sizing { color: var(--text-muted); }

/* Hand display — to the RIGHT of hero chip, same Y level (like GTO Wizard) */
#hand-display {
  position: absolute;
  left: calc(65% + 38px);          /* right of hero chip: 29px radius + 9px gap */
  top: calc(84% + 14px);          /* offset accounts for label below cards, so card centers align with chip */
  transform: translate(0, -50%);   /* vertically center on offset point */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
  pointer-events: none; /* let clicks pass through to table */
}

#hand-display .hand-cards,
#hand-display .hand-label,
#hand-display #feedback-overlay {
  pointer-events: auto;
}

.hand-cards {
  display: flex;
  gap: 8px;
}

/* GTO Wizard-style card tile */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.playing-card {
  width: 90px;
  height: 110px;
  border-radius: 8px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  animation: cardDeal 0.25s ease-out both;
  transition: box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.playing-card:nth-child(2) { animation-delay: 0.08s; }

/* Suit-tinted card backgrounds — per UIUX-HEAD.md spec */
.playing-card.suit-bg-s { background: #1a1a1a; }  /* spade — black */
.playing-card.suit-bg-c { background: #0a3020; }  /* club — green */
.playing-card.suit-bg-h { background: #a81e2d; }  /* heart — rich crimson */
.playing-card.suit-bg-d { background: #1a5fb4; }  /* diamond — royal blue */

/* Card glow after answer */
.playing-card.card-correct { box-shadow: 0 0 20px rgba(0, 212, 160, 0.5); }
.playing-card.card-wrong   { box-shadow: 0 0 20px rgba(224, 82, 82, 0.5); }

.card-rank {
  font-size: 56px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.card-suit {
  font-size: 22px;
  color: rgba(255,255,255,0.9);
  line-height: 1;
}

/* Corner label — hidden, only big rank + suit shown */
.card-corner {
  display: none;
}
.card-corner-rank {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.card-corner-suit {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
}

/* Suit colors — kept for backwards compat, overridden by white above */
.suit-spade   { color: #ffffff; }
.suit-club    { color: #ffffff; }
.suit-heart   { color: #ffffff; }
.suit-diamond { color: #ffffff; }

.hand-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

/* Feedback overlay — collapses when hidden so it doesn't affect card centering */
#feedback-overlay {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.15s ease;
  min-height: 0;
  overflow: hidden;
}

#feedback-overlay.show {
  padding: 10px 20px;
  min-height: 48px;
}

#feedback-overlay.show { opacity: 1; }
#feedback-overlay.correct { color: var(--color-correct); }
#feedback-overlay.wrong   { color: var(--color-wrong); }

/* Action buttons */
#action-buttons {
  display: flex;
  gap: 6px;
  padding: 0 20px 12px;
  max-width: 560px;
  width: 100%;
  align-self: center;
}

.action-btn {
  flex: 1;
  height: 56px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.1s ease, filter 0.12s ease, border-bottom-width 0.05s ease, box-shadow 0.12s ease;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

.action-btn .key-hint {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0;
  text-transform: none;
}

.action-btn:not(:disabled):hover { transform: scale(1.02); filter: brightness(1.1); }
.action-btn.fold:not(:disabled):hover  { box-shadow: 0 0 14px rgba(58, 123, 213, 0.3); }
.action-btn.call:not(:disabled):hover  { box-shadow: 0 0 14px rgba(46, 160, 67, 0.3); }
.action-btn.raise:not(:disabled):hover,
.action-btn.push:not(:disabled):hover  { box-shadow: 0 0 14px rgba(224, 82, 82, 0.3); }
.action-btn.allin:not(:disabled):hover { box-shadow: 0 0 14px rgba(139, 92, 246, 0.3); }
.action-btn:not(:disabled):active { transform: scale(0.98); border-bottom-width: 2px; }
.action-btn:disabled { cursor: default; transform: none; filter: none; border-bottom-color: transparent; }

/* Default colours (pre-answer) — 3D bottom border */
.action-btn.fold   { background: var(--color-call);  border-bottom-color: #2a5faa; }
.action-btn.call   { background: #2ea043;            border-bottom-color: #1d6e30; }
.action-btn.raise  { background: var(--color-raise); border-bottom-color: #a83a3a; }
.action-btn.push   { background: var(--color-raise); border-bottom-color: #a83a3a; }
.action-btn.allin  { background: var(--color-allin); border-bottom-color: #6D3ED2; }

/* ── Post-answer button states ─────────────────────────────────────── */

/* Dim all buttons after answer */
.action-btn:disabled { opacity: 0.45; }

/* Correct button: teal left border + full opacity */
.action-btn.correct {
  opacity: 1 !important;
  border-left: 3px solid var(--color-correct);
  background: rgba(0, 212, 160, 0.12);
  color: #fff;
}

/* Wrong (user's wrong pick): red left border + full opacity */
.action-btn.wrong {
  opacity: 1 !important;
  border-left: 3px solid var(--color-wrong);
  background: rgba(224, 82, 82, 0.12);
  color: #fff;
}

/* Button inner layout for feedback state */
.action-btn .btn-icon  { font-size: 14px; line-height: 1; }
.action-btn .btn-label { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; }
.action-btn .btn-freq  { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); }
.action-btn .btn-ev    { font-size: 10px; color: rgba(255,255,255,0.4); }

/* ── Feedback row: freq-bar + Next button ──────────────────────────── */

#drill-feedback-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 12px;
  max-width: 560px;
  width: 100%;
  align-self: center;
}

/* Frequency bar */
#frequency-bar {
  flex: 1;
  display: none;
  flex-direction: column;
  gap: 4px;
}

#frequency-bar.visible { display: flex; }

.freq-bar-track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.freq-seg { height: 100%; min-width: 1px; }
.freq-seg.seg-raise { background: var(--color-raise); }
.freq-seg.seg-call  { background: var(--color-call);  }
.freq-seg.seg-fold  { background: #333;               }
.freq-seg.seg-allin { background: var(--color-allin);  }

.freq-bar-labels {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.freq-label {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Next button */
#btn-next {
  display: none;
  height: 48px;
  padding: 0 20px;
  background: var(--color-accent);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.12s ease;
}

#btn-next.visible { display: block; }
#btn-next:hover   { filter: brightness(1.1); }
#btn-next:active  { transform: scale(0.97); }

/* ── Mobile responsive ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  #drill-feedback-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #btn-next {
    width: 100%;
  }

  .freq-bar-labels { justify-content: center; }
}

/* Controls bar */
#drill-controls {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  align-items: center;
  flex-wrap: wrap;
}

/* ── Heatmap toggle ──────────────────────────────────────── */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.toggle-label input[type=checkbox] {
  appearance: none;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding: 0;
}

.toggle-label input[type=checkbox]::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}

.toggle-label input[type=checkbox]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.toggle-label input[type=checkbox]:checked::before {
  background: #fff;
  transform: translateX(14px);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s ease;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--color-accent);
  color: #0d1117;
  border: none;
}

.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.btn-danger {
  background: transparent;
  color: var(--color-wrong);
  border: 1px solid var(--color-wrong);
}

.btn-danger:hover { background: rgba(248,81,73,0.12); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border);
}

/* ── Modal ───────────────────────────────────────────────── */
#modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-backdrop.open { display: flex; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 700;
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
}

.form-group textarea {
  min-height: 60px;
}

.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

#import-parse-error {
  font-size: 12px;
  color: var(--color-wrong);
  display: none;
  padding: 8px 12px;
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: var(--radius-sm);
}

.preview-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}

#import-preview-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  width: 100%;
  aspect-ratio: 1;
  gap: 1px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 300px;
}

.preview-cell {
  background: var(--color-fold);
  border-radius: 1px;
  aspect-ratio: 1;
}

.preview-cell.action-raise { background: var(--color-raise); }
.preview-cell.action-call  { background: var(--color-call); }
.preview-cell.action-push  { background: #8957e5; }
.preview-cell.action-allin { background: var(--color-allin); }

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ── Header nav — centered pill bar (2026-04-19) ──────────── */
.header-nav {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(245, 239, 227, 0.04);
  border: 1px solid rgba(245, 239, 227, 0.06);
  border-radius: 99px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(245, 239, 227, 0.04);
}

.nav-link {
  position: relative;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(240, 182, 92, 0.08);
}
.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 182, 92, 0.55);
}
.nav-link:active { transform: translateY(1px); }

.nav-link.active {
  color: #0E0A19;
  background: linear-gradient(180deg, #F7CB7F 0%, #E5A447 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px -4px rgba(240, 182, 92, 0.55);
}
.nav-link.active:hover {
  color: #0E0A19;
  background: linear-gradient(180deg, #F9D28A 0%, #E8AB52 100%);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
}

.btn-lg {
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
}

.hero .btn-lg {
  transition: all 0.15s ease;
}
.hero .btn-lg:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}
.hero .btn-lg:active {
  transform: scale(0.98);
}

/* ── Landing: Hero ──────────────────────────────────────── */
.hero {
  padding: 60px 40px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 560px;
  background: radial-gradient(ellipse at center top, rgba(0,212,160,0.09) 0%, rgba(0,212,160,0.03) 40%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.hero h1 span { color: var(--color-accent); }

.hero p {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 auto 28px;
  line-height: 1.6;
  font-weight: 400;
}

/* ── Landing layout helpers ─────────────────────────────── */
.landing-tiles {
  margin: 0 auto;
  max-width: 880px;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
}

.landing-stats {
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  max-width: 880px;
  margin: 0 auto 20px;
}

/* ── Stats panel 2-column layout ────────────────────────── */
.dash-panel-body-2col {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.dash-panel-body-2col .dash-stats-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 200px;
}

.dash-panel-body-2col .dash-bars {
  flex: 1;
  justify-content: center;
  gap: 12px;
}

/* ── Import Range Button Hover ─────────────────────────── */
#btn-open-import {
  transition: all 0.15s ease;
}
#btn-open-import:hover {
  background: rgba(0,212,160,0.08);
  border-color: var(--color-accent);
}

/* ── Landing Animations ───────────────────────────────────── */
@keyframes tileEntrance {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-content {
  animation: heroFade 0.4s ease forwards;
  opacity: 0;
}

@keyframes barGrow {
  from { width: 0%; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD / SHARED COMPONENTS
   ══════════════════════════════════════════════════════════ */

.dashboard {
  height: calc(100vh - 44px);
  overflow-y: auto;
  padding-bottom: 40px;
}

.dash-header {
  padding: 22px 24px 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Feature tiles ─────────────────────────────────────── */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 40px 24px;
  max-width: 960px;
}

.dash-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #131313;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: tileEntrance 0.35s ease-out forwards;
  opacity: 0;
}
.dash-tile:nth-child(1) { animation-delay: 0.05s; }
.dash-tile:nth-child(2) { animation-delay: 0.1s; }
.dash-tile:nth-child(3) { animation-delay: 0.15s; }
.dash-tile:nth-child(4) { animation-delay: 0.2s; }
.dash-tile:nth-child(5) { animation-delay: 0.25s; }
.dash-tile:nth-child(6) { animation-delay: 0.3s; }

.dash-tile:hover {
  transform: translateY(-4px);
  border-color: #3a3a3a;
  background: #1a1a1a;
}

.dash-tile:hover .dash-tile-icon {
  box-shadow: 0 0 12px var(--tile-glow, rgba(255,255,255,0.1));
}

.dash-tile:active {
  transform: translateY(0);
}

.dash-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
}

.dash-tile-text { flex: 1; min-width: 0; }

.dash-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.dash-tile-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── Trainer stats panel ────────────────────────────────── */
.dash-panel {
  margin: 0 24px 20px;
  max-width: 832px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
}

.dash-panel-hdr {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-panel-arr {
  color: #3a3a3a;
  font-size: 20px;
  line-height: 1;
}

.dash-panel-body {
  padding: 16px;
}

.dash-stats-nums {
  display: flex;
  gap: 28px;
  margin-bottom: 16px;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dash-stat-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dash-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dbi {
  font-size: 12px;
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.dbi-b { color: var(--color-correct); }
.dbi-c { color: var(--color-correct); }
.dbi-w { color: var(--color-wrong); }

.dash-bar-lbl {
  font-size: 12px;
  color: var(--text-secondary);
  width: 48px;
  flex-shrink: 0;
}

.dash-bar-track {
  flex: 1;
  height: 8px;
  background: #1e1e1e;
  border-radius: 4px;
  overflow: hidden;
}

.dash-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
  animation: barGrow 0.6s ease-out 0.3s both;
}

.dbf-b { background: var(--color-correct); }
.dbf-c { background: var(--color-correct); }
.dbf-w { background: var(--color-wrong); }

/* ── Stat value color modifiers ───────────────────────── */
.dash-stat-val--wrong { color: var(--color-wrong); }
.dash-stat-val--score {
  font-size: 32px;
  font-weight: 900;
}

.dash-bar-cnt {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Quick start section ────────────────────────────────── */
.dash-section-hdr {
  padding: 4px 24px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  padding: 0 24px;
  max-width: 880px;
}

.dash-scenario-grid {
  /* inherits from .scenario-grid */
}

.scenario-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.scenario-card:hover { border-color: var(--color-accent); }

.scenario-card-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.scenario-card-info span {
  font-size: 11px;
  color: var(--text-muted);
}

.scenario-card .type-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   RANGES PAGE — New layout
   ══════════════════════════════════════════════════════════ */

#view-ranges {
  flex-direction: column;
  height: calc(100vh - 44px);
  overflow: hidden;
}

/* ── Preflop Navigator Bar ──────────────────────────────── */
#pf-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px 10px;
  flex-shrink: 0;
}

.pf-nav-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.pf-reset-btn {
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.pf-reset-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

.pf-breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.pf-nav-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-nav-scroll::-webkit-scrollbar { display: none; }

.pf-nav-cards {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding-bottom: 2px;
}

/* ── Solution Card (before position cards) ────────────── */
.pf-solution-card {
  flex-shrink: 0;
  min-width: 110px;
  background: #0f1114;
  border: 1.5px solid var(--color-accent);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pf-solution-card:hover {
  background: rgba(0, 212, 160, 0.06);
}

.pf-sol-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.pf-sol-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

.pf-sol-stack {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

.pf-sol-sub {
  font-size: 11px;
  color: #555;
  margin-top: 4px;
}

/* ── Position Card ──────────────────────────────────────── */
.pf-pos-card {
  flex-shrink: 0;
  min-width: 140px;
  background: #141618;
  border: 1.5px solid #2a2d32;
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, opacity 0.2s ease, background 0.15s ease;
}

.pf-pos-card:hover { border-color: #444; background: #181b1f; }

/* Acted (position has taken its action — dimmed but header still clickable) */
.pf-card-acted {
  opacity: 0.45;
}

/* Selected position — green border, full opacity */
.pf-card-selected {
  border-color: var(--color-accent) !important;
  border-width: 2px !important;
  background: rgba(0, 212, 160, 0.05) !important;
  opacity: 1 !important;
}
.pf-card-selected .pf-card-pos {
  color: var(--color-accent);
}

/* BB dead-blind card */
.pf-card-no-rfi {
  opacity: 0.45;
  pointer-events: none;
}
.pf-card-no-rfi .pf-card-note {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* Jam-call (facing all-in — highlighted red) */
.pf-card-jam-call {
  border-color: rgba(224,82,82,0.45);
}

.pf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2d32;
}

.pf-card-pos {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.pf-card-stack {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

/* Taken action label (for acted cards) */
.pf-card-taken {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  padding: 3px 0;
}

/* Previous-action context (e.g. "↑ Raise 2.5" shown above options when
   the player already raised this street and is now facing a re-raise) */
.pf-card-prev-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  opacity: 0.65;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

/* ── Action Rows ────────────────────────────────────────── */
.pf-action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-action {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  user-select: none;
  border-left: 2.5px solid transparent;
  transition: all 0.12s ease;
  line-height: 1.4;
}

.pf-action:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

/* Action colour coding */
.pf-action-fold:hover       { color: #3a7bd5; border-left-color: #3a7bd5; }
.pf-action-open:hover,
.pf-action-3bet:hover,
.pf-action-4bet:hover       { color: #e05252; border-left-color: #e05252; }
.pf-action-5bet:hover,
.pf-action-allin:hover      { color: #8957e5; border-left-color: #8957e5; }
.pf-action-call:hover       { color: var(--color-accent); border-left-color: var(--color-accent); }

/* Terminal highlight (fold/call clicked) */
.pf-action-terminal {
  color: var(--text-muted) !important;
  text-decoration: line-through;
  opacity: 0.6;
}

/* ── Ranges Body ────────────────────────────────────────── */
.ranges-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: Matrix column */
.ranges-matrix-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px 20px 16px;
  min-width: 0;
  overflow: hidden;
}

/* Right: Info column */
.ranges-info-col {
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-left: 1px solid #1e1e1e;
  background: #111111;
  overflow-y: auto;
  min-width: 0;
}

/* ── Position Chip Bar (pot info only — position chips hidden to avoid redundancy with nav cards) */
.pf-chip-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
}

.chip-positions {
  display: none;
}

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  min-width: 38px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chip:hover { border-color: #555; }

.chip-active {
  border-color: var(--color-accent);
  background: rgba(0, 212, 160, 0.08);
}
.chip-active .chip-pos { color: var(--color-accent); }

.chip-pos {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.chip-stack {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
}

.chip-pot-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.chip-pot {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.chip-odds {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

/* Spot label + pot info row */
.ranges-spot-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-top: 20px;
}

/* ── Matrix inside ranges ──────────────────────────────── */
.range-matrix-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  position: relative;
}

/* No-data overlay */
.no-data-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-md);
}

.no-data-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.no-data-icon {
  font-size: 32px;
}

.no-data-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.range-matrix-col-labels {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  width: var(--range-matrix-width, 100%);
  gap: 0;
  margin-left: 20px;
}

.range-matrix-col-labels .matrix-axis-label,
.range-matrix-row-labels .matrix-axis-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #888;
  background: #111;
  letter-spacing: 0.05em;
}

.range-matrix-row-wrapper {
  display: flex;
  gap: 2px;
  width: 100%;
}

.range-matrix-row-labels {
  display: flex;
  flex-direction: column;
  width: 18px;
  height: var(--range-matrix-height, 500px);
  flex-shrink: 0;
  gap: 0;
}

.range-matrix-row-labels .matrix-axis-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.range-matrix {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(13, 1fr);
  width: var(--range-matrix-width, 700px);
  height: var(--range-matrix-height, 500px);
  gap: 1px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ranges-matrix-col {
  --range-matrix-height: calc(100vh - 280px);
  --range-matrix-width: calc(var(--range-matrix-height) * 1.45);
}

.range-matrix .matrix-cell {
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.1s ease, border-color 0.1s ease;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.92);
  padding: 2px;
  border-radius: 2px;
}

.range-matrix .matrix-cell.action-fold {
  color: rgba(255,255,255,0.70);
}

.range-matrix .matrix-cell:hover {
  filter: brightness(1.15);
  border-color: #00d4a0;
  position: relative;
  z-index: 2;
}

.range-matrix .matrix-cell.hd-selected {
  border: 2px solid #00d4a0;
  filter: brightness(1.1);
  position: relative;
  z-index: 3;
}

/* ── Matrix cell internal layout (frequency labels) ────── */
.range-matrix .matrix-cell {
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

.range-matrix .mc-label {
  font-size: inherit;
  pointer-events: none;
}

.range-matrix .mc-freq {
  font-size: 7px;
  font-weight: 600;
  opacity: 0.65;
  pointer-events: none;
  min-height: 8px;
}

/* ── Action Breakdown (GTO Wizard style) ───────────────── */
.action-breakdown {
  width: 100%;
}

.action-cards-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.action-card {
  flex: 1;
  min-width: 0;
  padding: 20px;
  border-radius: 10px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-card-dominant {
  flex: 1.2;
}

.action-card-header {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.action-card-pct {
  font-size: 32px;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -1px;
}

.action-card-combos {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Per-card progress bar */
.action-card-bar {
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.action-card-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  background: rgba(255,255,255,0.4);
}

/* Color coding — solid fill cards */
.action-card.raise { background: #e05252; }
.action-card.raise .action-card-pct    { color: #fff; }
.action-card.raise .action-card-header { color: rgba(255,255,255,0.85); }
.action-card.raise .action-card-combos { color: rgba(255,255,255,0.65); }

.action-card.call { background: #3a7bd5; }
.action-card.call .action-card-pct    { color: #fff; }
.action-card.call .action-card-header { color: rgba(255,255,255,0.85); }
.action-card.call .action-card-combos { color: rgba(255,255,255,0.65); }

.action-card.fold { background: #1e1e1e; }
.action-card.fold .action-card-pct    { color: rgba(255,255,255,0.7); }
.action-card.fold .action-card-header { color: rgba(255,255,255,0.5); }
.action-card.fold .action-card-combos { color: rgba(255,255,255,0.4); }

.action-card.push { background: #8957e5; }
.action-card.push .action-card-pct    { color: #fff; }
.action-card.push .action-card-header { color: rgba(255,255,255,0.85); }
.action-card.push .action-card-combos { color: rgba(255,255,255,0.65); }

.action-card.allin { background: var(--color-allin); }
.action-card.allin .action-card-pct    { color: #fff; }
.action-card.allin .action-card-header { color: rgba(255,255,255,0.85); }
.action-card.allin .action-card-combos { color: rgba(255,255,255,0.65); }

/* Full-width summary bar */
.action-bar-track {
  width: 100%;
  height: 10px;
  background: var(--bg-elevated);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}

.action-bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.action-bar-segment.raise { background: var(--color-raise); }
.action-bar-segment.call  { background: var(--color-call); }
.action-bar-segment.fold  { background: #484f58; }
.action-bar-segment.push  { background: #8957e5; }
.action-bar-segment.allin { background: var(--color-allin); }

/* Range preview legend */
.range-preview-legend {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.range-preview-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}

.range-preview-legend .legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Mobile ranges */
@media (max-width: 768px) {
  .ranges-body { grid-template-columns: 1fr; overflow: auto; }
  .ranges-matrix-col { width: 100%; padding: 12px 8px; border-bottom: 1px solid var(--border); --range-matrix-height: min(85vw, 540px); --range-matrix-width: min(85vw, 540px); }
  .ranges-info-col { width: 100%; padding: 16px; background: var(--bg-secondary); }
  .pf-pos-card { min-width: 130px; }
  .action-card-pct { font-size: 28px; }
}

/* ── Small header ────────────────────────────────────────── */
@media (max-width: 600px) {
  #app-header { padding: 6px 10px; }
  .header-actions .btn { padding: 5px 8px; font-size: 11px; }
  #btn-reset-stats { display: none; }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  #drill-idle {
    padding: 24px 16px;
    gap: 20px;
  }

  #drill-scenario-card {
    min-width: auto;
    width: 100%;
    padding: 20px 16px;
  }

  .hand-cards { gap: 8px; }

  .playing-card {
    width: 56px;
    height: 68px;
  }

  .card-rank { font-size: 36px; }
  .card-suit { font-size: 14px; }

  /* Session bar: 2×2 grid */
  #session-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 12px;
  }

  /* Action buttons: stack vertically, full width */
  #action-buttons {
    flex-direction: column;
    padding: 0 12px;
    gap: 8px;
  }

  .action-btn {
    width: 100%;
    height: 48px;
  }

  /* Context bar: tighter on mobile */
  #context-bar {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* ── Range Sizing Bar ────────────────────────────────────── */
.range-sizing-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  align-items: center;
}

.sz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sz-label {
  color: var(--text-muted);
  font-weight: 500;
}

.sz-val {
  color: var(--text-primary);
  font-weight: 700;
}

.sz-position {
  background: rgba(0,212,160,0.08);
  border-color: rgba(0,212,160,0.3);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.sz-raise  { border-color: rgba(224,82,82,0.35);  background: rgba(224,82,82,0.07); }
.sz-raise  .sz-label { color: rgba(224,82,82,0.6); }
.sz-raise  .sz-val   { color: #e05252; }

.sz-call   { border-color: rgba(58,123,213,0.35); background: rgba(58,123,213,0.07); }
.sz-call   .sz-label { color: rgba(58,123,213,0.6); }
.sz-call   .sz-val   { color: #3a7bd5; }

.sz-push   { border-color: rgba(137,87,229,0.35); background: rgba(137,87,229,0.07); }
.sz-push   .sz-label { color: rgba(137,87,229,0.6); }
.sz-push   .sz-val   { color: #8957e5; }

/* ── Hand Detail Panel ───────────────────────────────────── */
.hand-detail-panel {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}

.hand-detail-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  font-size: 13px;
  color: #555;
}

.hand-detail-hint-icon {
  color: var(--color-accent);
  font-size: 10px;
  opacity: 0.7;
}

.hand-detail-content {
  padding: 18px 20px;
}

.hand-detail-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.hand-detail-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
}

.hand-detail-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Frequency buttons ───────────────────────────────────── */
.hand-freq-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hand-freq-btn {
  flex: 1;
  min-width: 100px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: filter 0.15s ease;
}

.hand-freq-btn:hover { filter: brightness(1.1); }

.hfb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.hfb-pct {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -1px;
}

.hfb-pct-sym {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.hfb-combos {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Color variants */
.hfb-raise {
  border-left: 3px solid #e05252;
  background: rgba(224,82,82,0.06);
}
.hfb-raise .hfb-label { color: #e05252; }
.hfb-raise .hfb-pct   { color: #e05252; }

.hfb-push {
  border-left: 3px solid #8957e5;
  background: rgba(137,87,229,0.06);
}
.hfb-push .hfb-label { color: #8957e5; }
.hfb-push .hfb-pct   { color: #8957e5; }

.hfb-call {
  border-left: 3px solid #3a7bd5;
  background: rgba(58,123,213,0.06);
}
.hfb-call .hfb-label { color: #3a7bd5; }
.hfb-call .hfb-pct   { color: #3a7bd5; }

.hfb-fold {
  border-left: 3px solid #484f58;
}
.hfb-fold .hfb-label { color: var(--text-muted); }
.hfb-fold .hfb-pct   { color: var(--text-secondary); }

/* ── Frequency bar ───────────────────────────────────────── */
.hand-freq-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hand-freq-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  width: 100%;
}

.hfb-bar-seg {
  height: 100%;
  transition: width 0.3s ease;
}

.hand-freq-bar-labels {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hfb-bar-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Hand Detail Tabs ───────────────────────────────────── */
.hd-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.hd-tab {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
  letter-spacing: 0.02em;
}

.hd-tab:hover { color: var(--text-secondary); }

.hd-tab-active {
  color: var(--text-primary);
  border-bottom-color: var(--color-accent);
}

.hd-tab-pane {
  min-height: 0;
}

/* ── Suit Combo Grid ────────────────────────────────────── */
.hd-combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.hdc-card {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hdc-suits {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.suit-s { color: #aab4c0; }
.suit-h { color: #e05252; }
.suit-d { color: #3a7bd5; }
.suit-c { color: #2ea043; }

.hdc-freqs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hdc-freq-line {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.hdc-act { color: var(--text-secondary); }
.hdc-val {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ── Poker Table Component ───────────────────────────────── */

/* ── Active drill poker table ────────────────────────────── */
#poker-table {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 24px;          /* cards beside chip, not below — less padding needed */
  position: relative;
}

.pt-felt {
  position: relative;
  overflow: visible;                 /* allow cards to extend beyond the oval */
  width: min(620px, calc(100% - 60px));
  aspect-ratio: 620 / 350;          /* rounder — was 620/310 */
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 46%;
  flex-shrink: 1;
}

/* Centered pot info */
.pt-pot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  white-space: nowrap;
}

.pt-pot-bb {
  font-size: 16px;
  font-weight: 700;
  color: #888;
  font-family: var(--font-mono);
}

.pt-pot-label {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Position chips — rounded rectangles */
.pt-chip {
  position: absolute;
  padding: 6px 12px;
  border-radius: 6px;
  background: #252525;
  border: 1px solid #444;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  letter-spacing: 0.03em;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.pt-chip-pos {
  font-size: 13px;
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1;
}

.pt-chip-stack {
  font-size: 9px;
  font-weight: 600;
  color: #aaa;
  font-family: var(--font-mono);
  line-height: 1;
}

/* Hero chip — teal, prominent */
.pt-chip-hero {
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 12px rgba(0,212,160,0.5);
}

.pt-chip-hero .pt-chip-pos   { color: #0a0a0a; font-weight: 800; }
.pt-chip-hero .pt-chip-stack { color: rgba(0,0,0,0.5); }

/* Villain chip — red */
.pt-chip-villain {
  background: #3a1515;
  border: 1px solid #8b3a3a;
}

.pt-chip-villain .pt-chip-pos   { color: #e05252; font-weight: 800; }
.pt-chip-villain .pt-chip-stack { color: #c05050; }

/* ── Blind bet indicators (SB/BB posted amounts) ──────── */
.pt-blind {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #ccc;
  transform: translate(-50%, -50%);
  z-index: 4;
  white-space: nowrap;
}

.pt-blind-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4a000;
  border: 1px solid #b08800;
  flex-shrink: 0;
}

/* Position blind bets between chip and center of table */
.pt-blind-v0 { left: 55%; top: 72%; }
.pt-blind-v1 { left: 40%; top: 72%; }
.pt-blind-v2 { left: 20%; top: 44%; }
.pt-blind-v3 { left: 40%; top: 24%; }
.pt-blind-v4 { left: 60%; top: 24%; }
.pt-blind-v5 { left: 80%; top: 44%; }

/* ── Idle table: fixed position names (used in drill-idle-table HTML) */
.pt-seat-utg  { left: 8%;  top: 50%; }
.pt-seat-hj   { left: 28%; top: 8%;  }
.pt-seat-co   { left: 72%; top: 8%;  }
.pt-seat-btn  { left: 92%; top: 50%; }
.pt-seat-sb   { left: 72%; top: 92%; }
.pt-seat-bb   { left: 28%; top: 92%; }

/* Visual seat positions — v0 = hero (bottom-right), counter-clockwise */
.pt-seat-v0 { left: 65%; top: 84%; }   /* hero bottom-right */
.pt-seat-v1 { left: 35%; top: 84%; }   /* bottom-left */
.pt-seat-v2 { left: 10%; top: 48%; }   /* left */
.pt-seat-v3 { left: 35%; top: 12%; }   /* top-left */
.pt-seat-v4 { left: 65%; top: 12%; }   /* top-right */
.pt-seat-v5 { left: 90%; top: 48%; }   /* right */

/* Dealer button — near BTN's visual seat */
.pt-dealer {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #333;
  color: #999;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 3;
  border: 1px solid #444;
}

/* Dealer positions near each visual seat (offset toward center) */
.pt-dealer-v0 { left: 57%; top: 72%; }   /* near bottom-right hero */
.pt-dealer-v1 { left: 43%; top: 72%; }   /* near bottom-left */
.pt-dealer-v2 { left: 18%; top: 38%; }   /* near left */
.pt-dealer-v3 { left: 43%; top: 22%; }   /* near top-left */
.pt-dealer-v4 { left: 57%; top: 22%; }   /* near top-right */
.pt-dealer-v5 { left: 82%; top: 38%; }   /* near right */

/* Opponent face-down hole cards */
.pt-opp-cards {
  position: absolute;
  display: flex;
  gap: 2px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Opponent cards — horizontal, on the OUTSIDE of each chip (away from center) */
.pt-opp-cards-v1 { left: calc(35% - 48px); top: 84%; }            /* left of bottom-left chip */
.pt-opp-cards-v2 { left: calc(10% - 48px); top: 48%; }            /* left of left chip */
.pt-opp-cards-v3 { left: calc(35% - 48px); top: 12%; }            /* left of top-left chip */
.pt-opp-cards-v4 { left: calc(65% + 48px); top: 12%; }            /* right of top-right chip */
.pt-opp-cards-v5 { left: calc(90% + 48px); top: 48%; }            /* right of right chip */

/* Face-down card back */
.pt-card-back {
  width: 26px;
  height: 36px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 1px solid #333;
}

/* Hide poker table on mobile — too small to be useful */
@media (max-width: 767px) {
  #poker-table { display: none !important; }
}

/* ── Poker Table Component ───────────────────────────────── */

/* ── Active drill poker table ────────────────────────────── */
#poker-table {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 24px;          /* cards beside chip, not below — less padding needed */
  position: relative;
}

.pt-felt {
  position: relative;
  overflow: visible;                 /* allow cards to extend beyond the oval */
  width: min(620px, calc(100% - 60px));
  aspect-ratio: 620 / 350;
  background: radial-gradient(ellipse at center, #143d28 0%, #0b1a12 100%);
  border: 2px solid #2a5a3e;
  border-radius: 46%;
  flex-shrink: 1;
  box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3);
}

/* Centered pot info */
.pt-pot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  white-space: nowrap;
}

.pt-pot-bb {
  font-size: 16px;
  font-weight: 700;
  color: #5a9a70;
  font-family: var(--font-mono);
}

.pt-pot-label {
  font-size: 10px;
  font-weight: 600;
  color: #4a7a5a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Position chips — large circles */
.pt-chip {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 2px solid #444;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  letter-spacing: 0.03em;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s;
}

.pt-chip-pos {
  font-size: 12px;
  font-weight: 800;
  color: #aaa;
  line-height: 1;
}

.pt-chip-stack {
  font-size: 10px;
  font-weight: 600;
  color: #777;
  font-family: var(--font-mono);
  line-height: 1;
}

/* Hero chip — teal ring */
.pt-chip-hero {
  background: #060f0a;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 14px rgba(0,212,160,0.2);
}

.pt-chip-hero .pt-chip-pos   { color: var(--color-accent); }
.pt-chip-hero .pt-chip-stack { color: rgba(0,212,160,0.5); }

/* Villain chip — red ring */
.pt-chip-villain {
  background: #100808;
  border: 2px solid #5a2a2a;
  box-shadow: 0 0 10px rgba(224,82,82,0.1);
}

.pt-chip-villain .pt-chip-pos   { color: #c05050; }
.pt-chip-villain .pt-chip-stack { color: #5a2a2a; }

/* ── Idle table: fixed position names (used in drill-idle-table HTML) */
.pt-seat-utg  { left: 8%;  top: 50%; }
.pt-seat-hj   { left: 28%; top: 8%;  }
.pt-seat-co   { left: 72%; top: 8%;  }
.pt-seat-btn  { left: 92%; top: 50%; }
.pt-seat-sb   { left: 72%; top: 92%; }
.pt-seat-bb   { left: 28%; top: 92%; }

/* Visual seat positions — v0 = hero (bottom-right), counter-clockwise */
.pt-seat-v0 { left: 65%; top: 84%; }   /* hero bottom-right */
.pt-seat-v1 { left: 35%; top: 84%; }   /* bottom-left */
.pt-seat-v2 { left: 10%; top: 48%; }   /* left */
.pt-seat-v3 { left: 35%; top: 12%; }   /* top-left */
.pt-seat-v4 { left: 65%; top: 12%; }   /* top-right */
.pt-seat-v5 { left: 90%; top: 48%; }   /* right */

/* Dealer button — near BTN's visual seat */
.pt-dealer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d8d8d8;
  color: #111;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Dealer positions near each visual seat (offset toward center) */
.pt-dealer-v0 { left: 57%; top: 72%; }   /* near bottom-right hero */
.pt-dealer-v1 { left: 43%; top: 72%; }   /* near bottom-left */
.pt-dealer-v2 { left: 18%; top: 38%; }   /* near left */
.pt-dealer-v3 { left: 43%; top: 22%; }   /* near top-left */
.pt-dealer-v4 { left: 57%; top: 22%; }   /* near top-right */
.pt-dealer-v5 { left: 82%; top: 38%; }   /* near right */

/* Opponent face-down hole cards */
.pt-opp-cards {
  position: absolute;
  display: flex;
  gap: 2px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Opponent cards — horizontal, on the OUTSIDE of each chip (away from center) */
.pt-opp-cards-v1 { left: calc(35% - 48px); top: 84%; }            /* left of bottom-left chip */
.pt-opp-cards-v2 { left: calc(10% - 48px); top: 48%; }            /* left of left chip */
.pt-opp-cards-v3 { left: calc(35% - 48px); top: 12%; }            /* left of top-left chip */
.pt-opp-cards-v4 { left: calc(65% + 48px); top: 12%; }            /* right of top-right chip */
.pt-opp-cards-v5 { left: calc(90% + 48px); top: 48%; }            /* right of right chip */

/* Face-down card back */
.pt-card-back {
  width: 26px;
  height: 36px;
  border-radius: 3px;
  background: linear-gradient(135deg, #1e3a60 0%, #0d1e3a 100%);
  border: 1px solid #2a4870;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Hide poker table on mobile — too small to be useful */
@media (max-width: 767px) {
  #poker-table { display: none !important; }
}

/* ── Session Summary Modal ───────────────────────────────── */

.summary-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.summary-overlay.open {
  display: flex;
}

.summary-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.summary-rating {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-hands-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Gauge */
.summary-gauge-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}

.summary-gauge-svg { display: block; }

.gauge-track {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 8;
}

.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

/* Categories */
.summary-categories {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.summary-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  background: #141414;
  border-radius: 8px;
  padding: 12px 8px;
  border: 1px solid #2a2a2a;
}

.cat-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.cat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cat-best    { color: #00d4a0; }
.cat-correct { color: var(--text-primary); }
.cat-wrong   { color: #e05252; }

/* Worst hand */
.summary-worst {
  width: 100%;
  background: #141414;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #2a2a2a;
}

.summary-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.summary-worst-hand {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.summary-worst-action {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Action buttons */
.summary-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.summary-actions .btn {
  flex: 1;
  height: 44px;
}

/* Mobile */
@media (max-width: 767px) {
  .summary-card {
    padding: 20px 16px;
    gap: 16px;
  }
  .summary-categories { gap: 8px; }
  .cat-count { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── MULTI-TABLE DRILLING ─────────────────────────────────  */
/* ══════════════════════════════════════════════════════════ */

/* ── Table count selector (drill-idle setup) ───────────── */
.table-count-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 4px;
}

.tc-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tc-buttons {
  display: flex;
  gap: 4px;
}

.tc-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.tc-btn:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.tc-btn.active {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}

/* ── Multi-table grid ──────────────────────────────────── */
.mt-grid {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.mt-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

.mt-count-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.mt-count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

/* Center the 3rd table on its own row — match top-row table width */
.mt-count-3 .table-instance:nth-child(3) {
  grid-column: 1 / -1;
  width: calc(50% - 3px);
  justify-self: center;
}

.mt-count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

/* ── Table instance (one drill table) ──────────────────── */
.table-instance {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.15s ease;
  min-height: 0;
  overflow: hidden;
}

/* No permanent focus border */
.table-instance.ti-focused {
  border-color: transparent;
  box-shadow: none;
}

/* Show green border on hover in multi-table (2+) */
.mt-count-2 .table-instance:hover,
.mt-count-3 .table-instance:hover,
.mt-count-4 .table-instance:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 12px rgba(0, 212, 160, 0.15);
}

/* ── Scoped context bar ────────────────────────────────── */
.ti-context-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 10px;
  background: #141414;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 28px;
  width: 100%;
  border-radius: 8px 8px 0 0;
}

/* ── Scoped poker table ────────────────────────────────── */
.ti-poker-table {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 20px;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* In multi-row layouts, felt must shrink to fit available height */
.mt-count-3 .ti-poker-table,
.mt-count-4 .ti-poker-table {
  padding: 6px 8px 12px;
}

.mt-count-2 .ti-poker-table {
  padding: 8px 10px 16px;
}

/* For multi-row layouts, let felt size from height to stay circular */
.mt-count-3 .pt-felt,
.mt-count-4 .pt-felt {
  width: auto;
  height: 100%;
  max-height: 100%;
}

/* ── Scoped hand display ───────────────────────────────── */
.ti-hand-display {
  position: absolute;
  left: calc(65% + 38px);
  top: calc(84% + 14px);
  transform: translate(0, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
  pointer-events: none;
}

.ti-hand-display .hand-cards,
.ti-hand-display .hand-label,
.ti-hand-display .ti-feedback-overlay {
  pointer-events: auto;
}

/* ── Scoped feedback overlay ───────────────────────────── */
.ti-feedback-overlay {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.15s ease;
  min-height: 0;
  overflow: hidden;
}

.ti-feedback-overlay.show {
  padding: 10px 20px;
  min-height: 48px;
  opacity: 1;
}

.ti-feedback-overlay.correct { color: var(--color-correct); }
.ti-feedback-overlay.wrong   { color: var(--color-wrong); }

/* ── Scoped action buttons ─────────────────────────────── */
.ti-action-buttons {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
  max-width: 560px;
  width: 100%;
  align-self: center;
}

/* ── Scoped feedback row ───────────────────────────────── */
.ti-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 6px;
  max-width: 560px;
  width: 100%;
  align-self: center;
}

/* ── Scoped frequency bar ──────────────────────────────── */
.ti-frequency-bar {
  flex: 1;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.ti-frequency-bar.visible { display: flex; }

/* ── Scoped next button ────────────────────────────────── */
.ti-btn-next {
  display: none;
  height: 40px;
  padding: 0 16px;
  background: var(--color-accent);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.12s ease;
}

.ti-btn-next.visible { display: block; }
.ti-btn-next:hover   { filter: brightness(1.1); }
.ti-btn-next:active  { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════ */
/* ── MULTI-TABLE: Scaled sizes for 2, 3, 4 tables ─────── */
/* ══════════════════════════════════════════════════════════ */

/* ── All multi-table modes use same element sizes as 1-table ── */
/* Only grid layout and felt max-width differ. */

/* ── Hide multi-table on mobile ────────────────────────── */
@media (max-width: 767px) {
  .mt-count-2, .mt-count-3, .mt-count-4 {
    grid-template-columns: 1fr;
  }
  .mt-count-2 .table-instance:not(:first-child),
  .mt-count-3 .table-instance:not(:first-child),
  .mt-count-4 .table-instance:not(:first-child) {
    display: none;
  }
}

/* ── Session Summary Modal ───────────────────────────────── */

.summary-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.summary-overlay.open {
  display: flex;
}

.summary-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.summary-rating {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-hands-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Gauge */
.summary-gauge-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}

.summary-gauge-svg { display: block; }

.gauge-track {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 8;
}

.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

/* Categories */
.summary-categories {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.summary-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  background: #141414;
  border-radius: 8px;
  padding: 12px 8px;
  border: 1px solid #2a2a2a;
}

.cat-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.cat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cat-best    { color: #00d4a0; }
.cat-correct { color: var(--text-primary); }
.cat-wrong   { color: #e05252; }

/* Worst hand */
.summary-worst {
  width: 100%;
  background: #141414;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #2a2a2a;
}

.summary-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.summary-worst-hand {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.summary-worst-action {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Action buttons */
.summary-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.summary-actions .btn {
  flex: 1;
  height: 44px;
}

/* Mobile */
@media (max-width: 767px) {
  .summary-card {
    padding: 20px 16px;
    gap: 16px;
  }
  .summary-categories { gap: 8px; }
  .cat-count { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── MULTI-TABLE DRILLING ─────────────────────────────────  */
/* ══════════════════════════════════════════════════════════ */

/* ── Table count selector (drill-idle setup) ───────────── */
.table-count-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 4px;
}

.tc-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tc-buttons {
  display: flex;
  gap: 4px;
}

.tc-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.tc-btn:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.tc-btn.active {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════ */
/* ── MULTI-TABLE: Scaled sizes for 2, 3, 4 tables ─────── */
/* ══════════════════════════════════════════════════════════ */

/* ── 2 tables (side by side) ───────────────────────────── */
.mt-count-2 .playing-card { width: 36px; height: 50px; }
.mt-count-2 .card-rank { font-size: 22px; }
.mt-count-2 .card-suit { font-size: 10px; }
.mt-count-2 .pt-chip { width: 46px; height: 46px; }
.mt-count-2 .pt-chip-pos { font-size: 10px; }
.mt-count-2 .pt-chip-stack { font-size: 8px; }
.mt-count-2 .pt-card-back { width: 20px; height: 28px; }
.mt-count-2 .action-btn { font-size: 12px; height: 44px; }
.mt-count-2 .pt-pot-bb { font-size: 13px; }
.mt-count-2 .pt-pot-label { font-size: 9px; }
.mt-count-2 .pt-dealer { width: 16px; height: 16px; font-size: 8px; }
.mt-count-2 .ti-hand-display { left: calc(65% + 30px); }
.mt-count-2 .hand-label { font-size: 10px; }
.mt-count-2 .ti-btn-next { height: 36px; font-size: 12px; padding: 0 12px; }
.mt-count-2 .ti-context-bar { font-size: 10px; min-height: 24px; padding: 3px 8px; }

/* ── 3 tables (triple column) ──────────────────────────── */
.mt-count-3 .playing-card { width: 28px; height: 40px; }
.mt-count-3 .card-rank { font-size: 17px; }
.mt-count-3 .card-suit { font-size: 8px; }
.mt-count-3 .pt-chip { width: 36px; height: 36px; }
.mt-count-3 .pt-chip-pos { font-size: 9px; }
.mt-count-3 .pt-chip-stack { font-size: 7px; }
.mt-count-3 .pt-card-back { width: 16px; height: 22px; }
.mt-count-3 .action-btn { font-size: 10px; height: 36px; padding: 4px 6px; }
.mt-count-3 .action-btn .key-hint { font-size: 8px; }
.mt-count-3 .pt-pot-bb { font-size: 11px; }
.mt-count-3 .pt-pot-label { font-size: 8px; }
.mt-count-3 .pt-dealer { width: 14px; height: 14px; font-size: 7px; }
.mt-count-3 .ti-hand-display { left: calc(65% + 24px); }
.mt-count-3 .hand-label { font-size: 9px; }
.mt-count-3 .hand-cards { gap: 3px; }
.mt-count-3 .ti-btn-next { height: 32px; font-size: 11px; padding: 0 10px; }
.mt-count-3 .ti-context-bar { font-size: 9px; min-height: 22px; padding: 2px 6px; }
.mt-count-3 .ti-feedback-row { padding: 0 8px 4px; }
.mt-count-3 .ti-action-buttons { padding: 0 8px 4px; gap: 4px; }
.mt-count-3 .freq-label { font-size: 9px; }
.mt-count-3 .pt-opp-cards { gap: 1px; }

/* ── 4 tables (2×2 grid) ──────────────────────────────── */
.mt-count-4 .playing-card { width: 30px; height: 42px; }
.mt-count-4 .card-rank { font-size: 18px; }
.mt-count-4 .card-suit { font-size: 9px; }
.mt-count-4 .pt-chip { width: 40px; height: 40px; }
.mt-count-4 .pt-chip-pos { font-size: 9px; }
.mt-count-4 .pt-chip-stack { font-size: 8px; }
.mt-count-4 .pt-card-back { width: 18px; height: 24px; }
.mt-count-4 .action-btn { font-size: 11px; height: 38px; padding: 4px 8px; }
.mt-count-4 .action-btn .key-hint { font-size: 8px; }
.mt-count-4 .pt-pot-bb { font-size: 12px; }
.mt-count-4 .pt-pot-label { font-size: 8px; }
.mt-count-4 .pt-dealer { width: 15px; height: 15px; font-size: 7px; }
.mt-count-4 .ti-hand-display { left: calc(65% + 26px); }
.mt-count-4 .hand-label { font-size: 9px; }
.mt-count-4 .hand-cards { gap: 4px; }
.mt-count-4 .ti-btn-next { height: 34px; font-size: 11px; padding: 0 10px; }
.mt-count-4 .ti-context-bar { font-size: 9px; min-height: 22px; padding: 2px 6px; }
.mt-count-4 .ti-feedback-row { padding: 0 8px 4px; }
.mt-count-4 .ti-action-buttons { padding: 0 8px 4px; gap: 4px; }
.mt-count-4 .freq-label { font-size: 9px; }
.mt-count-4 .pt-opp-cards { gap: 1px; }

/* ── Hide multi-table on mobile ────────────────────────── */
@media (max-width: 767px) {
  .mt-count-2, .mt-count-3, .mt-count-4 {
    grid-template-columns: 1fr;
  }
  .mt-count-2 .table-instance:not(:first-child),
  .mt-count-3 .table-instance:not(:first-child),
  .mt-count-4 .table-instance:not(:first-child) {
    display: none;
  }
}

/* ── Table Theme Selector ───────────────────────────────── */
.table-theme-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 12px;
}

.tt-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tt-buttons {
  display: flex;
  gap: 6px;
}

.tt-btn {
  position: relative;
  width: 48px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
}

.tt-btn:hover {
  border-color: var(--color-accent);
}

.tt-btn.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* Midnight preview swatch */
.tt-btn-midnight {
  background: #0d0d0d;
}
.tt-btn-midnight::after {
  content: '';
  position: absolute;
  inset: 4px 8px;
  border: 1px solid #2a2a2a;
  border-radius: 40%;
}

/* Classic Green preview swatch */
.tt-btn-classic {
  background: linear-gradient(135deg, #1a6b3c, #0d4025);
}
.tt-btn-classic::after {
  content: '';
  position: absolute;
  inset: 4px 8px;
  border: 1px solid #2a5a3e;
  border-radius: 40%;
}

/* Theme label under swatch */
.tt-btn-label {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* 3D theme preview swatches */
.tt-btn-3d12, .tt-btn-3d18, .tt-btn-3d24 {
  background: radial-gradient(ellipse at 40% 35%, #0f2318, #040c09);
}
.tt-btn-3d12::after, .tt-btn-3d18::after, .tt-btn-3d24::after {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border: 1px solid #1a3a20;
  border-radius: 50%;
  transform: perspective(60px) rotateX(6deg);
}

/* ── Classic Green Theme Overrides ──────────────────────── */

/* Felt — 3D green gradient with depth */
body[data-table-theme="classic"] .pt-felt {
  background: radial-gradient(ellipse at 50% 45%, #1a6b3c 0%, #0d4025 60%, #082a18 100%);
  border: 2px solid #2a5a3e;
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,0.4),
    inset 0 -2px 8px rgba(255,255,255,0.04),
    0 4px 20px rgba(0,0,0,0.5),
    0 0 40px rgba(13,64,37,0.3);
}

/* Pot text — lighter on green */
body[data-table-theme="classic"] .pt-pot-bb {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

body[data-table-theme="classic"] .pt-pot-label {
  color: rgba(255,255,255,0.5);
}

/* Chips — green-tinted */
body[data-table-theme="classic"] .pt-chip {
  background: #0b3018;
  border: 1px solid #2a5a3e;
}

body[data-table-theme="classic"] .pt-chip-pos {
  color: rgba(255,255,255,0.8);
}

body[data-table-theme="classic"] .pt-chip-stack {
  color: rgba(255,255,255,0.4);
}

/* Hero chip — brighter on green */
body[data-table-theme="classic"] .pt-chip-hero {
  background: rgba(0,212,160,0.15);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 12px rgba(0,212,160,0.3);
}
body[data-table-theme="classic"] .pt-chip-hero .pt-chip-pos {
  color: var(--color-accent);
  font-weight: 800;
}
body[data-table-theme="classic"] .pt-chip-hero .pt-chip-stack {
  color: rgba(0,212,160,0.6);
}

/* Villain chip — red pops on green */
body[data-table-theme="classic"] .pt-chip-villain {
  background: rgba(224,82,82,0.1);
  border: 1px solid #8b3a3a;
}

body[data-table-theme="classic"] .pt-chip-villain .pt-chip-pos {
  color: #e05252;
}

body[data-table-theme="classic"] .pt-chip-villain .pt-chip-stack {
  color: #8b3a3a;
}

/* Dealer button — white/gold on green */
body[data-table-theme="classic"] .pt-dealer {
  background: #e8e0d0;
  color: #333;
  border: 1px solid #b8a88a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Face-down card backs — blue */
body[data-table-theme="classic"] .pt-card-back {
  background: linear-gradient(135deg, #1a3a6b, #0d2548);
  border: 1px solid #2a4a6e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Rail / subtle inner glow */
body[data-table-theme="classic"] .pt-felt::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════ */
/* ── 3D PERSPECTIVE TABLE THEMES (12° / 18° / 24°) ─────── */
/* ══════════════════════════════════════════════════════════ */

/* Shared: perspective on the table container */
body[data-table-theme="3d-12"] #poker-table,
body[data-table-theme="3d-18"] #poker-table,
body[data-table-theme="3d-24"] #poker-table,
body[data-table-theme="3d-12"] .ti-poker-table,
body[data-table-theme="3d-18"] .ti-poker-table,
body[data-table-theme="3d-24"] .ti-poker-table,
body[data-table-theme="3d-12"] #drill-idle-table,
body[data-table-theme="3d-18"] #drill-idle-table,
body[data-table-theme="3d-24"] #drill-idle-table {
  perspective: 600px;
  perspective-origin: 50% 20%;
}

/* Shared: felt styling for all 3D themes */
body[data-table-theme="3d-12"] .pt-felt,
body[data-table-theme="3d-18"] .pt-felt,
body[data-table-theme="3d-24"] .pt-felt {
  transform-style: preserve-3d;
  background: radial-gradient(ellipse at 40% 35%, #0f2318 0%, #071410 55%, #040c09 100%);
  border: 8px solid transparent;
  background-clip: padding-box;
  border-radius: 46%;
  box-shadow:
    0 0 0 2px #1a3a20,
    0 0 0 10px #0d2018,
    0 0 0 12px #0a1a14,
    0 8px 32px rgba(0,0,0,0.8);
}

/* Angle-specific rotateX */
body[data-table-theme="3d-12"] .pt-felt { transform: rotateX(12deg); }
body[data-table-theme="3d-18"] .pt-felt { transform: rotateX(18deg); }
body[data-table-theme="3d-24"] .pt-felt { transform: rotateX(24deg); }

/* Shared: chips become 36px circles */
body[data-table-theme="3d-12"] .pt-chip,
body[data-table-theme="3d-18"] .pt-chip,
body[data-table-theme="3d-24"] .pt-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  background: #2a2a2a;
  border: 1px solid #555;
  color: #f0f0f0;
  font-size: 11px;
  font-weight: 800;
}

body[data-table-theme="3d-12"] .pt-chip-stack,
body[data-table-theme="3d-18"] .pt-chip-stack,
body[data-table-theme="3d-24"] .pt-chip-stack {
  display: none; /* circles too small for stack text */
}

/* Hero chip — teal with glow */
body[data-table-theme="3d-12"] .pt-chip-hero,
body[data-table-theme="3d-18"] .pt-chip-hero,
body[data-table-theme="3d-24"] .pt-chip-hero {
  background: #00d4a0;
  border: 1px solid #00d4a0;
  box-shadow: 0 0 10px rgba(0,212,160,0.4);
}
body[data-table-theme="3d-12"] .pt-chip-hero .pt-chip-pos,
body[data-table-theme="3d-18"] .pt-chip-hero .pt-chip-pos,
body[data-table-theme="3d-24"] .pt-chip-hero .pt-chip-pos {
  color: #0a0a0a;
  font-weight: 800;
}

/* Villain chip — red */
body[data-table-theme="3d-12"] .pt-chip-villain,
body[data-table-theme="3d-18"] .pt-chip-villain,
body[data-table-theme="3d-24"] .pt-chip-villain {
  background: #c0392b;
  color: white;
  border: 1px solid #c0392b;
}

/* Pot text — lighter on green */
body[data-table-theme="3d-12"] .pt-pot-bb,
body[data-table-theme="3d-18"] .pt-pot-bb,
body[data-table-theme="3d-24"] .pt-pot-bb {
  color: rgba(255,255,255,0.8);
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', sans-serif;
}

body[data-table-theme="3d-12"] .pt-pot-label,
body[data-table-theme="3d-18"] .pt-pot-label,
body[data-table-theme="3d-24"] .pt-pot-label {
  color: rgba(255,255,255,0.45);
}

/* Dealer button — white/gold classic */
body[data-table-theme="3d-12"] .pt-dealer,
body[data-table-theme="3d-18"] .pt-dealer,
body[data-table-theme="3d-24"] .pt-dealer {
  background: #e8e0d0;
  color: #333;
  border: 1px solid #b8a88a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Face-down card backs — dark green */
body[data-table-theme="3d-12"] .pt-card-back,
body[data-table-theme="3d-18"] .pt-card-back,
body[data-table-theme="3d-24"] .pt-card-back {
  background: #0b2818;
  border: 1px solid #1a3a20;
}

/* Inner rail glow on felt */
body[data-table-theme="3d-12"] .pt-felt::before,
body[data-table-theme="3d-18"] .pt-felt::before,
body[data-table-theme="3d-24"] .pt-felt::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.03);
  pointer-events: none;
  z-index: 1;
}

/* Cards are now siblings to .pt-felt (not children), so no counter-rotation needed.
   The 3D rotateX on .pt-felt no longer affects the hand display. */

/* ── Toast notifications ──────────────────────────────────── */
@keyframes toastIn  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  max-width: 360px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f0f0f0;
  background: #1a1a1a;
  border: 1px solid #333;
  animation: toastIn 0.3s ease-out;
  pointer-events: auto;
}

.toast-error { border-color: var(--color-wrong); }
.toast-warn  { border-color: #d4a000; }
.toast-exit  { animation: toastOut 0.25s ease-in forwards; }

/* ══════════════════════════════════════════════════════════
   SOLUTION LIBRARY MODAL
   ══════════════════════════════════════════════════════════ */

/* ── Change button in nav bar ──────────────────────────── */

.pf-change-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.12s ease;
  margin-left: auto;
}

.pf-change-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(0, 212, 160, 0.08);
}

/* ── Solution Library Modal ────────────────────────────── */

.solution-library-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 199;
}

.solution-library-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 820px;
  max-height: 80vh;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  z-index: 200;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  font-family: 'Inter', sans-serif;
}

/* ── Header (spans both columns) ──────────────────────── */

.solution-library-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #1e1e1e;
}

.solution-library-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #f0f0f0;
  margin: 0;
}

.sl-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sl-spot-count {
  font-size: 12px;
  font-weight: 500;
  color: #555;
}

.sl-close-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.12s ease;
}

.sl-close-btn:hover {
  color: #f0f0f0;
}

/* ── Left sidebar (filters) ──────────────────────────── */

.solution-library-sidebar {
  padding: 16px;
  border-right: 1px solid #1e1e1e;
  overflow-y: auto;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sl-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: 0;
}

.sl-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sl-pill {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sl-pill:hover {
  border-color: #3a3a3a;
  color: #ccc;
}

.sl-pill--selected {
  background: #00d4a0;
  color: #0a0a0a;
  font-weight: 700;
  border-color: #00d4a0;
}

.sl-pill--selected:hover {
  background: #00d4a0;
  color: #0a0a0a;
  border-color: #00d4a0;
}

.sl-pill--dimmed {
  opacity: 0.5;
  cursor: default;
}

/* ── Right content area ──────────────────────────────── */

.solution-library-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sl-section-label {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sl-section-label span {
  float: right;
  font-weight: 500;
  color: #444;
  text-transform: none;
  letter-spacing: 0;
}

.solution-library-table-wrap {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

.solution-table {
  width: 100%;
  border-collapse: collapse;
}

.solution-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.solution-table th {
  background: #111;
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid #1e1e1e;
  user-select: none;
}

.solution-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: #ccc;
  border-bottom: 1px solid #141414;
}

/* ── Solution rows ───────────────────────────────────── */

.solution-row {
  transition: background 0.1s ease;
  cursor: pointer;
}

.solution-row:hover {
  background: #141414;
}

.solution-row--selected {
  background: rgba(0, 212, 160, 0.08);
}

.solution-row--active td:first-child {
  color: #00d4a0;
  font-weight: 700;
}

.solution-row--unavailable {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Stack badge in first column ─────────────────────── */

.sol-stack {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #f0f0f0;
  min-width: 32px;
}

.sol-spots-count {
  font-size: 12px;
  color: #555;
  font-weight: 500;
}

/* ── Responsive (mobile) ─────────────────────────────── */

@media (max-width: 768px) {
  .solution-library-modal {
    grid-template-columns: 1fr;
    width: 95vw;
    max-height: 90vh;
  }
  .solution-library-sidebar {
    border-right: none;
    border-bottom: 1px solid #1e1e1e;
    padding: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sl-filter-label { display: none; }
  .sl-filter-group { flex-direction: row; flex-wrap: wrap; gap: 6px; }
}

/* ── Auth header widget ──────────────────────────────────── */
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.btn-outline:hover { border-color: var(--color-accent); }

.auth-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-name {
  color: var(--text-secondary);
  font-size: 12px;
}
#btn-signout {
  color: var(--text-muted);
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
#btn-signout:hover { color: var(--text-primary); }

/* ── Auth modal overlay ──────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.auth-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Auth modal card ─────────────────────────────────────── */
.auth-modal {
  max-width: 400px;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  transform: translateY(10px);
  transition: transform 0.2s;
}
.auth-overlay--visible .auth-modal {
  transform: translateY(0);
}
.auth-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.auth-close:hover { color: var(--text-primary); }

.auth-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
  color: var(--text-primary);
}

/* ── Google button ───────────────────────────────────────── */
.auth-google-btn {
  width: 100%;
  height: 44px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s;
}
.auth-google-btn:hover { background: #3574d4; }

/* ── Divider ─────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  padding: 0 12px;
}

/* ── Auth form ───────────────────────────────────────────── */
.auth-field {
  margin-bottom: 14px;
}
.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.auth-field input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.auth-field input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.auth-signin-btn {
  width: 100%;
  height: 40px;
  background: var(--color-accent);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-signin-btn:hover { opacity: 0.9; }

.auth-signup-btn {
  width: 100%;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.auth-signup-btn:hover { border-color: var(--color-accent); }

/* ── Auth modal mobile ───────────────────────────────────── */
@media (max-width: 767px) {
  .auth-modal {
    margin: 16px;
    max-width: calc(100% - 32px);
    padding: 24px;
  }
  .auth-name { display: none; }
}

/* ── Misc utilities ──────────────────────────────────────── */
.visually-hidden { display: none !important; }