:root {
  --bg: #0d0d10;
  --panel-bg: #17171b;
  --table-bg: #1a0708;
  --table-bg-2: #5c141b;
  --seat-bg: #1c1c20;
  --seat-border: #3a3a41;
  --text: #f2f2f0;
  --text-dim: #9a9aa1;
  --brand-red: #c1272d;
  --fold: #3b82f6;
  --pot: var(--brand-red);
  --highlight: #ffffff;
  --accent-green: #22c55e;
  --radius: 14px;
  --suit-club: #22c55e;
  --suit-diamond: #3b82f6;
  --suit-heart: var(--brand-red);
  --suit-spade: #4b4d5a;
  /* tamanho do card de assento — usado na faixa do estudo e no seletor do
     treino, pra os dois ficarem idênticos independentemente do conteúdo */
  --seat-card-w: 92px;
  --seat-card-h: 88px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.app {
  max-width: 940px;
  margin: 0 auto;
  padding: 16px;
}

.spot-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.legacy-picker-hidden { display: none; }
.spot-picker-wrap { position: relative; }
.spot-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
}
.spot-badge:hover { border-color: var(--brand-red); }
.spot-badge-seta {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.spot-badge.aberto .spot-badge-seta { transform: rotate(180deg); }

/* Lista de spots: some por padrão e abre ancorada no distintivo. Fica por
   cima do resto (a faixa de assentos vem logo abaixo), por isso o z-index. */
.spot-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.spot-menu-grupo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 10px 4px;
}
.spot-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.spot-menu-item:hover { background: var(--seat-border); }
.spot-menu-item.ativo { color: var(--brand-red); font-weight: 700; }
.spot-badge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-red);
}
.spot-badge-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.no-spots-msg {
  color: var(--text-dim);
  font-size: 13px;
  padding: 30px 0;
  text-align: center;
}

/* ===== Faixa de assentos com ações (hipótese, em ordem de ação) ===== */
.action-buttons-wrap { margin-bottom: 14px; }

.seat-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.seat-card-mini {
  flex: 0 0 var(--seat-card-w);
  min-height: var(--seat-card-h);
  background: var(--seat-bg);
  border: 1.5px solid var(--seat-border);
  border-radius: 10px;
  padding: 8px;
  transition: opacity .15s, border-color .15s;
}
/* assento cuja vez é agora: pronto para receber clique */
.seat-card-mini.current {
  border-color: #f5c451;
  box-shadow: 0 0 0 1px #f5c451;
}
/* assentos que ainda não agiram nesta rodada */
.seat-card-mini.pending { opacity: 0.45; }
/* assento que já decidiu: só mostra a ação escolhida */
.seat-card-mini.decided { opacity: 0.9; }
/* assento sem decisão pois a mão terminou antes dele */
.seat-card-mini.ended { opacity: 0.35; }

.seat-card-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: background .15s;
}
.seat-card-mini.jumpable { cursor: pointer; }
.seat-card-mini.jumpable:hover { border-color: var(--brand-red); }
.seat-card-mini-stack { color: var(--text-dim); font-weight: 500; }
.seat-card-mini-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-action-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  /* <button> não herda a família do body: sem isto o corpo do card sai em
     Arial enquanto o cabeçalho usa a fonte do sistema */
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mini-action-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.mini-action-btn:disabled {
  cursor: default;
  opacity: 0.5;
  /* botão desabilitado engole o clique sem disparar evento; sem isto, clicar
     na área das ações de outro assento não levava a lugar nenhum */
  pointer-events: none;
}
.mini-action-btn:disabled:hover { background: none; color: var(--text-dim); }
.mini-action-chosen {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 4px;
}

@media (max-width: 480px) {
  :root { --seat-card-w: 76px; }
}

/* ===== Mesa ===== */
.table-wrap {
  position: relative;
  background: radial-gradient(ellipse at 50% 42%, #1e1f26 0%, #131419 70%, #0e0f13 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 40px 16px 40px;
}



.poker-table {
  position: relative;
  height: 300px;
  border-radius: 150px / 112px;
  /* aro (rail) escuro em volta do feltro, como nos clientes de poker */
  border: 13px solid #191a20;
  background:
    radial-gradient(ellipse at 50% 34%, #7d2129 0%, #56141b 48%, #330b10 100%);
  box-shadow:
    inset 0 0 55px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 34px rgba(0,0,0,.55);
  margin: 20px auto 0;
  max-width: 600px;
}

.seats {
  position: absolute;
  inset: 0;
}

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
}
.seat.jumpable { cursor: pointer; }
.seat.jumpable:hover .seat-box { border-color: var(--brand-red); }

.seat-cards {
  display: flex;
  gap: 3px;
}
.seat-card {
  width: 20px;
  height: 28px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    repeating-linear-gradient(45deg, #33507a, #33507a 3px, #2a4166 3px, #2a4166 6px);
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
/* leque: as cartas dos oponentes se sobrepoem levemente, como num cliente real */
.seat-cards:not(.hero-cards) { gap: 0; }
.seat-cards:not(.hero-cards) .seat-card { margin-right: -7px; }
.seat-cards:not(.hero-cards) .seat-card:last-child { margin-right: 0; }

.seat-box-wrap {
  position: relative;
}
.seat-box {
  background: linear-gradient(180deg, #262830 0%, #16171c 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 5px 14px 6px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 94px;
  box-shadow: 0 4px 12px rgba(0,0,0,.55);
}
.seat.turn .seat-box {
  border-color: #f5c451;
  box-shadow: 0 0 0 1px #f5c451, 0 0 16px rgba(245,196,81,.4), 0 4px 12px rgba(0,0,0,.55);
}
.seat.committed .seat-box {
  border-color: var(--action-color, var(--seat-border));
  box-shadow: 0 0 0 1px var(--action-color, var(--seat-border));
}
.seat.folded { opacity: 0.4; }
.seat.folded .seat-cards { visibility: hidden; }
.seat-box .seat-pos {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
}
.seat-box .seat-stack {
  color: #79b4ec;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.seat-box .seat-stack::after {
  content: " BB";
  font-size: 9.5px;
  font-weight: 600;
  opacity: .75;
}

.seat-bet {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 2px 10px 2px 5px;
  backdrop-filter: blur(2px);
}
/* assentos da metade esquerda da mesa: ficha à direita da caixa (voltada pro centro) */
.seat-bet.seat-bet-right {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(2px, calc(-50% - 9px));
}
/* assentos da metade direita da mesa: ficha à esquerda da caixa (voltada pro centro) */
.seat-bet.seat-bet-left {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-2px, calc(-50% - 9px));
}
/* assentos bem no eixo central (ex: EP, BTN): ficha centralizada, no fluxo
   normal — evita que ela saia da mesa perto dos polos da elipse */
.seat-bet.seat-bet-center {
  justify-content: center;
  margin: 2px 0;
}
.chip-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex-shrink: 0;
  background: repeating-conic-gradient(var(--brand-red) 0deg 45deg, #fff 45deg 90deg);
  border: 1px solid rgba(0,0,0,0.5);
  /* as duas sombras deslocadas simulam fichas empilhadas embaixo */
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.35),
    0 2px 0 -1px #9e2026,
    0 4px 0 -2px #6f151a,
    0 5px 4px rgba(0,0,0,.45);
}

/* posições dos assentos (top/left) são definidas via JS (SEAT_COORDS em app.js),
   assim funciona para qualquer número de jogadores na mesa. */

.table-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.pot-label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
  backdrop-filter: blur(2px);
}
.pot-label.hypothetical { color: #f5c451; }
/* Logo central em marca d'água: brightness(0) achata a arte em preto e
   invert(1) transforma em silhueta branca, que com opacidade baixa vira só um
   tom mais claro do feltro. Some o contraste ruim do vermelho sobre vermelho
   e a logo deixa de competir com as cartas e fichas. */
.logo-img {
  display: block;
  margin: 0 auto;
  width: 66px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
.logo-text {
  margin-top: 6px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 2.5px;
  font-size: 16px;
  color: #fff;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}

.dealer-button {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe391 0%, #eab63c 55%, #c2891a 100%);
  color: #3d2c06;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

/* ===== Summary bar ===== */
.summary-bar-wrap { margin: 24px 0 8px; }
.summary-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
}
.summary-bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}
.summary-legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

/* ===== Painel de categorias ===== */
.panel {
  position: relative;
  margin-top: 8px;
}
.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--seat-border);
  padding-bottom: 8px;
  margin-bottom: 10px;
  padding-right: 70px;
}
.tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}
.tab.active {
  color: var(--text);
  border-bottom: 2px solid var(--brand-red);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  user-select: none;
}
.category-row:hover { background: rgba(255, 255, 255, 0.04); }
.category-row.marcada { background: rgba(193, 39, 45, 0.12); }

.category-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--seat-border);
}
.category-footer-info {
  font-size: 11px;
  color: var(--text-dim);
}
.category-clear-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--seat-border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.category-clear-btn:hover { border-color: var(--brand-red); color: var(--brand-red); }

/* Nota acima da lista: de onde vieram os números */
.category-note {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.5;
}
.category-warn {
  display: block;
  color: #f5c451;
  margin-top: 3px;
}

.category-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.category-name {
  width: 190px;
  font-size: 13px;
  flex-shrink: 0;
}
.category-bar {
  flex: 1;
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--seat-bg);
}
.category-bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
.category-weight {
  width: 52px;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.category-check {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-red);
  flex-shrink: 0;
  pointer-events: none; /* quem trata o clique é a linha inteira */
}

@media (max-width: 480px) {
  .category-name { width: 120px; font-size: 11px; }
  .category-weight { width: 40px; }
}

/* ===== Aba Ranges ===== */
.ranges-search-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* em tela estreita o seletor de categoria desce pra 2ª linha */
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.ranges-search-icon { color: var(--text-dim); font-size: 15px; }
.ranges-search-input {
  flex: 1 1 150px;
  min-width: 120px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 13px;
}
.ranges-search-input::placeholder { color: var(--text-dim); }
.ranges-search-clear {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.ranges-search-clear:hover { color: var(--brand-red); }
.tab-carregando,
.train-carregando {
  padding: 18px 10px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.ranges-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.ev-diff-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--seat-border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch-track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-track {
  background: var(--brand-red);
}
.switch input:checked + .switch-track::before {
  transform: translateX(14px);
}

.ranges-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.ranges-col {
  flex: 1 1 0;
  min-width: 190px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  overflow: hidden;
}
.ranges-col-header {
  padding: 8px 10px;
  color: #fff;
}
.ranges-col-header-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.ranges-col-header-combo {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
  margin-left: auto;
}
.ranges-col-bar {
  height: 4px;
  background: rgba(255,255,255,0.25);
  margin-top: 6px;
  border-radius: 2px;
  overflow: hidden;
}
.ranges-col-bar-fill { height: 100%; background: #fff; }

.ranges-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ranges-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--seat-border);
  white-space: nowrap;
}
.ranges-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.ranges-table .ev-diff { color: var(--accent-green); font-weight: 600; }

.ranges-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--seat-border);
}
.ranges-page-btn {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  color: var(--text-main);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ranges-page-btn:hover:not(:disabled) { border-color: var(--brand-red); color: var(--brand-red); }
.ranges-page-btn:disabled { opacity: 0.35; cursor: default; }
.ranges-page-info { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.hand-cards { display: flex; gap: 2px; }
.card-badge {
  width: 18px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* ===== Modo Treino ===== */
.train-btn {
  background: var(--brand-red);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  cursor: pointer;
  transition: filter .15s;
}
.train-btn:hover { filter: brightness(1.15); }
.train-btn.active { background: var(--seat-bg); border: 1px solid var(--seat-border); }

.train-empty {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

.train-topbar {
  display: block;
  margin-bottom: 12px;
}
.train-wrap { text-align: center; }
.train-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.train-action-btn {
  background: var(--action-color);
  border: 2px solid var(--action-color);
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 32px;
  cursor: pointer;
  transition: all .15s;
}
.train-action-btn:hover:not(:disabled) { filter: brightness(1.2); }
.train-action-btn:disabled { cursor: default; }
.train-action-btn.is-dim { opacity: .3; }
.train-action-btn.is-wrong {
  background: transparent;
  color: var(--action-color);
  opacity: .65;
}
.train-action-btn.is-best { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

.train-result {
  margin-top: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.train-verdict {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}
.train-verdict { color: var(--fb-cor, var(--accent-green)); }
.train-verdict-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 4px;
}
.train-verdict-sub strong { color: var(--text); }
.train-mixed {
  display: inline-block;
  background: #f5c451;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}
.train-cost {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.train-cost strong { color: var(--brand-red); }

.train-lines {
  margin-top: 12px;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.train-line {
  display: grid;
  grid-template-columns: 1fr 60px 78px 68px;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
}
.train-line-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  padding-bottom: 2px;
}
.train-line.best { background: rgba(255,255,255,.06); }
.train-line-label { font-weight: 700; }
.train-line-freq, .train-line-ev, .train-line-diff { color: var(--text-dim); }
.train-line.best .train-line-freq,
.train-line.best .train-line-ev { color: var(--text); }
.train-line-diff { text-align: right; }

.train-next-btn {
  margin-top: 18px;
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 26px;
  cursor: pointer;
  transition: all .15s;
}
.train-next-btn:hover { border-color: var(--brand-red); }


/* Cartas do herói, viradas pra cima no assento dele durante o treino */
.seat-cards.hero-cards {
  gap: 5px;
  /* as cartas do herói são grandes de propósito e podem invadir o feltro —
     o z-index garante que fiquem por cima da mesa e dos outros assentos */
  position: relative;
  z-index: 3;
}
.hero-card {
  width: 46px;
  height: 63px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.55);
}

/* No treino as cartas abertas empurram o assento do herói pra baixo; a folga
   extra evita que a caixa dele encoste na barra de frequências. */
.table-wrap.train-mode { padding-bottom: 68px; }

/* Botão de treino: alinhado à direita, logo abaixo da legenda Fold/Pot */
.train-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Barrinha que preenche em 2s no botão "Próxima mão" quando o avanço é
   automático (acerto em cheio) — dá o feedback do tempo sem travar o clique */
.train-next-btn.auto { position: relative; overflow: hidden; }
.train-next-btn.auto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-green);
  opacity: .22;
  transform-origin: left;
  animation: trainNextFill 1s linear forwards;
}
@keyframes trainNextFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.train-score-ev {
  margin-left: 8px;
  color: var(--brand-red);
  font-weight: 700;
}

/* ===== Resumo de desempenho ao sair do treino ===== */
.train-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.train-report {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.report-title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.report-kpis {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.report-kpi {
  flex: 1;
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
}
.report-kpi-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.report-kpi-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin-top: 4px;
}
.train-report .good { color: var(--accent-green); }
.train-report .mid  { color: #f5c451; }
.train-report .bad  { color: var(--brand-red); }

.report-detail {
  border-top: 1px solid var(--seat-border);
  border-bottom: 1px solid var(--seat-border);
  padding: 12px 0;
  margin-bottom: 14px;
}
.report-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.report-line-avg {
  justify-content: center;
  margin-top: 8px;
}
.report-line-avg b { color: var(--text); }

.report-pos-table { margin-bottom: 18px; }
.report-pos-row {
  display: grid;
  grid-template-columns: 1fr 52px 60px 72px;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 5px;
}
.report-pos-row span:not(.report-pos-name) { text-align: right; color: var(--text-dim); }
.report-pos-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.report-pos-head span { color: var(--text-dim) !important; }
.report-pos-row:nth-child(odd):not(.report-pos-head) { background: rgba(255,255,255,.035); }
.report-pos-name { font-weight: 700; }
.report-pos-ev { color: var(--brand-red) !important; font-weight: 600; }

.report-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  /* separa dos botões o que vier acima — a revisão encostava neles, e um
     bloco clicável colado em "Fechar" convida ao clique errado */
  margin-top: 16px;
}
.report-btn {
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all .15s;
}
.report-btn:hover { color: var(--text); }
.report-btn.primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  font-weight: 700;
}
.report-btn.primary:hover { filter: brightness(1.15); }

/* ===== Cabeçalho de navegação ===== */
.main-nav {
  position: relative; /* âncora do botão de sair */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  background: #131318;
  border-bottom: 1px solid var(--seat-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-item {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-item.active {
  color: var(--text);
  background: var(--seat-bg);
  box-shadow: inset 0 0 0 1px var(--seat-border);
}
.nav-ext { font-size: 11px; opacity: .7; }
.nav-lessons.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 480px) {
  .main-nav { gap: 0; padding: 8px 6px; }
  .nav-item { font-size: 13px; padding: 6px 10px; }
}

/* ===== Dashboard ===== */
.dashboard-wrap { padding: 4px 0 30px; }
.dash-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.dash-nivel-hint { margin: 0 0 16px; }

/* ===== Selo de nível ===== */
.nivel-selo {
  --nivel-cor: var(--text-dim);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--nivel-cor);
  background: color-mix(in srgb, var(--nivel-cor) 14%, transparent);
  line-height: 1.25;
}
.nivel-nome {
  font-size: 12px;
  font-weight: 800;
  color: var(--nivel-cor);
  letter-spacing: .01em;
}
.nivel-criterio {
  font-size: 9.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.nivel-selo.pendente {
  border-style: dashed;
  background: transparent;
}
.nivel-selo.grande {
  padding: 7px 15px;
  border-radius: 12px;
}
.nivel-selo.grande .nivel-nome { font-size: 16px; }
.nivel-selo.grande .nivel-criterio { font-size: 10.5px; }
.nivel-selo.mini {
  padding: 2px 8px;
  border-radius: 999px;
}
.nivel-selo.mini .nivel-nome { font-size: 10.5px; }
.nivel-selo.mini .nivel-criterio { display: none; }

/* nível no resumo que aparece ao sair do treino */
.report-nivel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.report-nivel-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}
.dash-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.dash-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}
.dash-empty p { margin: 0; font-size: 13px; line-height: 1.5; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.dash-kpi {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 10px;
  padding: 13px 6px;
  text-align: center;
}
.dash-kpi-value {
  display: block;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
}
.dash-kpi-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin-top: 5px;
}
.dashboard-wrap .good { color: var(--accent-green); }
.dashboard-wrap .mid  { color: #f5c451; }
.dashboard-wrap .bad  { color: var(--brand-red); }

.dash-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 22px;
}

.dash-subtitle {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}
.dash-hint {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.dash-table {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 10px;
  padding: 6px;
}
.dash-row {
  display: grid;
  grid-template-columns: 44px 1fr 48px 46px 66px 62px 108px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 12.5px;
}
.dash-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.dash-table-dif .dash-row { grid-template-columns: 1fr 46px 48px 66px 108px; }
.dash-row-dif { font-weight: 700; font-size: 12.5px; }
.dash-row-pos { font-weight: 800; font-size: 13px; }
.dash-row-bar {
  height: 7px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
}
.dash-row-fill { height: 100%; border-radius: 999px; }
.dash-row-fill.good { background: var(--accent-green); }
.dash-row-fill.mid  { background: #f5c451; }
.dash-row-fill.bad  { background: var(--brand-red); }
.dash-row-pct { font-weight: 700; text-align: right; }
.dash-row-hands, .dash-row-ev { color: var(--text-dim); text-align: right; }
.dash-row-ev { color: var(--brand-red); font-weight: 600; }

.dash-focus {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  background: rgba(193,39,45,.1);
  border: 1px solid rgba(193,39,45,.3);
  border-radius: 8px;
  padding: 10px 14px;
}
.dash-focus strong { color: var(--text); }

.dash-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 520px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-breakdown { flex-direction: column; gap: 4px; }
  .dash-row { grid-template-columns: 40px 1fr 44px 56px; }
  .dash-row-hands, .dash-row-ev { display: none; }
}

/* Com 3 ações (SB) as colunas ficam mais estreitas — compacta a tabela só
   nesse caso, em vez de estourar a largura e exigir rolagem lateral. */
.ranges-grid.compact .ranges-table { font-size: 11px; }
.ranges-grid.compact .ranges-table th,
.ranges-grid.compact .ranges-table td { padding: 5px 4px; }
.ranges-grid.compact .card-badge {
  width: 15px;
  height: 19px;
  font-size: 10px;
}
.ranges-grid.compact .hand-cards { gap: 1px; }
.ranges-grid.compact .ranges-col-header { padding: 7px 9px; }
.ranges-grid.compact .ranges-col-header-top { font-size: 11.5px; }

/* Em telas estreitas volta a rolagem lateral, que aí é o mal menor */
@media (max-width: 700px) {
  .ranges-grid { overflow-x: auto; }
}

.train-dif-select {
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  outline: none;
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
}
.train-dif-select:hover { border-color: #55555f; }
.train-dif-select.ativo { border-color: var(--brand-red); color: var(--brand-red); }

/* quão apertada era a decisão — some do caminho, mas explica a mão */
.train-margem {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.train-margem strong { color: var(--text); }
.train-margem-tag {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--seat-border);
  font-size: 10px;
}

.train-topbar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  font-weight: 700;
}
/* o card selecionado precisa ficar cheio, e não esmaecido como "pending" */
.train-topbar .seat-card-mini.current { opacity: 1; }

/* Cabeçalho inerte enquanto o spot carrega */
.nav-item.loading {
  opacity: .35;
  cursor: progress;
}
.train-btn:disabled {
  opacity: .4;
  cursor: progress;
}

/* média de EV perdido por mão — é o critério de ordenação da tabela */
.dash-row-evmao {
  text-align: right;
  color: var(--brand-red);
  font-weight: 700;
}
.dash-row-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  background: none !important;
}
.dash-row-head span { color: var(--text-dim) !important; font-weight: 600; }

/* ============================================================
   Treino no celular.

   Medido em 375x812: os botões de ação nasciam em y=862 e o veredito em
   y=945 — ambos fora da tela, numa altura de 812. Eram 862 px de interface
   antes do que o jogador precisa tocar. Aqui o modo treino é compactado
   para caber inteiro: barra, mesa, botões e veredito na mesma vista.

   Nada disto afeta o desktop nem o modo estudo.
   ============================================================ */
@media (max-width: 520px) {
  /* o seletor de spot não tem função enquanto se treina */
  body[data-view="train"] .spot-picker-wrap { display: none; }

  /* dentro do painel de ajustes o seletor pode ocupar a linha toda */
  body[data-view="train"] .train-dif-select {
    margin-right: 0;
    padding: 4px 7px;
  }

  /* cards de posição mais baixos: a informação que importa é a posição */
  body[data-view="train"] #trainTopBar {
    --seat-card-w: 68px;
    --seat-card-h: 56px;
    margin-bottom: 8px;
  }
  body[data-view="train"] #trainTopBar .seat-card-mini { padding: 5px 6px; }
  body[data-view="train"] #trainTopBar .seat-card-mini-stack { display: none; }

  /* a folga em volta da mesa existe pros assentos que passam da borda;
     no celular ela pode ser bem menor sem encostar em nada */
  body[data-view="train"] .table-wrap {
    padding-top: 18px;
    padding-bottom: 40px;
  }
  body[data-view="train"] .poker-table { margin-top: 8px; }

  body[data-view="train"] .summary-bar-wrap { margin-top: 12px; }

  /* sair do treino já é um toque em "Estudo" no cabeçalho */
  body[data-view="train"] .train-btn-row { display: none; }

  body[data-view="train"] .train-actions { margin-top: 10px; }

  /* veredito compacto: o essencial numa linha só */
  body[data-view="train"] .train-verdict { font-size: 15px; }
  body[data-view="train"] .train-cost { font-size: 12px; }
  body[data-view="train"] .train-margem { font-size: 10px; }
}

/* ============================================================
   Selo de veredito sobre a mão do herói.

   Ancorado acima do assento (position:absolute + bottom:100%), então não
   empurra nem desloca as cartas — aparece e some sem mexer no layout.
   ============================================================ */
.hero-verdict {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 7px;
  /* acima dos assentos e das fichas de blind — o selo é a informação mais
     importante da tela nesse instante e não pode ser cortado por elas */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 8px;
  background: #14151a;
  border: 1px solid var(--verdict-cor);
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
  animation: veredictoEntra .18s ease-out;
}
/* A cor vem da classificação (FEEDBACK em app.js), passada inline como
   --fb-cor. Antes eram três classes fixas; agora são quatro níveis e a
   fonte da verdade é o app, não o CSS. */
.hero-verdict { --verdict-cor: var(--fb-cor, #22c55e); }

.hero-verdict-icone {
  color: var(--verdict-cor);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.hero-verdict-texto {
  color: var(--verdict-cor);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}
.hero-verdict-ev {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  padding-left: 7px;
  border-left: 1px solid rgba(255,255,255,.14);
}

@keyframes veredictoEntra {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 520px) {
  .hero-verdict { padding: 4px 9px; gap: 6px; margin-bottom: 5px; }
  .hero-verdict-texto { font-size: 12px; }
  .hero-verdict-ev { font-size: 10px; padding-left: 6px; }
}

/* O assento do herói (e o selo de veredito) fica acima dos demais: sem isto
   a ficha de blind de quem é desenhado depois passa por cima do selo. */
.seat.hero { z-index: 10; }

@media (max-width: 520px) {
  /* Mesa mais alta no treino: no celular a elipse deitada espremia os
     assentos contra as cartas do herói. Alongando na vertical, as cartas e
     os botões ganham respiro e o selo deixa de disputar espaço com as
     fichas de blind. */
  body[data-view="train"] .poker-table {
    height: 400px;
    border-radius: 50% / 30%;
  }
  /* A folga de baixo precisa comportar o assento do herói inteiro: as cartas
     grandes mais a caixa de posição descem 38px além da borda do feltro. Com
     menos que isso a caixa "EP 100" cai por cima dos botões de ação. */
  body[data-view="train"] .table-wrap {
    padding-top: 14px;
    padding-bottom: 80px;
  }
}

/* No treino a barra de frequências não tem função: ela descreve o range da
   posição, e é justamente isso que o jogador está tentando descobrir de
   cabeça. Some em qualquer tamanho de tela — o botão de sair fica. */
body[data-view="train"] #summaryBar,
body[data-view="train"] #summaryLegend {
  display: none;
}
body[data-view="train"] .summary-bar-wrap {
  margin-top: 6px;
}
body[data-view="train"] .train-btn-row {
  margin-top: 0;
}

/* ============================================================
   HUD do treino: engrenagem e placar flutuando sobre a mesa.

   O seletor de posições virou painel sob demanda — ocupava ~62px fixos
   para algo que se ajusta uma vez por sessão. Fora dele, a tela inteira
   fica para a mão.
   ============================================================ */
.train-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
body:not([data-view="train"]) .train-hud { display: none; }

.train-hud-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--seat-border);
  background: rgba(20, 21, 26, .92);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s, transform .15s;
}
.train-hud-btn:hover { color: var(--text); border-color: #55555f; }
.train-hud-btn.aberto {
  color: var(--brand-red);
  border-color: var(--brand-red);
  transform: rotate(45deg);
}

.train-hud-resumo {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 7px;
  padding: 4px 10px;
}

.train-hud .train-score {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 7px;
  padding: 4px 10px;
}

/* ---- painel de ajustes ---- */
.train-config {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
}
.train-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.train-config-fechar {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.train-config-fechar:hover { color: var(--brand-red); }
.train-config-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.train-config-linha .train-dif-select { margin: 0; }
.train-config-nota {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-dim);
}

@media (max-width: 520px) {
  .train-hud { top: 8px; left: 10px; right: 10px; gap: 6px; }
  .train-hud-btn { width: 27px; height: 27px; font-size: 13px; }
  .train-hud-resumo { font-size: 10px; padding: 2px 6px; }
  /* a mesa ganha o espaço que a faixa de posições ocupava */
  body[data-view="train"] .table-wrap { padding-top: 44px; }
}

/* Categorias dentro do painel do treino: a mesma seleção do Estudo, agora
   ajustável sem sair da mesa. */
.train-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.train-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.train-cat-chip:hover { color: var(--text); border-color: #55555f; }
.train-cat-chip.ativo {
  color: var(--text);
  border-color: var(--brand-red);
  background: rgba(193, 39, 45, .14);
}
.train-config-rodape {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--text-dim);
}
.train-cat-limpar {
  background: none;
  border: none;
  color: var(--brand-red);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}

@media (max-width: 520px) {
  .train-hud { margin-bottom: 8px; }
  .train-hud-resumo { font-size: 11px; padding: 3px 8px; }
  .train-hud .train-score { padding: 3px 8px; }
  .train-cat-chip { font-size: 10px; padding: 3px 8px; }
  /* Com a mesa alongada para 400px, o assento do topo sobe ~56px acima do
     feltro. A moldura precisa comportá-lo, senão ele escapa por cima e
     invade a faixa do HUD. */
  body[data-view="train"] .table-wrap { padding-top: 52px; }
}

/* ============================================================
   Tela de login. Cobre tudo até o jogador entrar — o app só é
   montado depois, então não há nada por baixo para vazar.
   ============================================================ */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, #1e1f26 0%, #0d0d10 70%);
}
.login-caixa {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: var(--radius);
  padding: 26px 22px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.login-logo {
  width: 52px;
  align-self: center;
  filter: brightness(0) invert(1);
  opacity: .5;
}
.login-titulo {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.login-sub {
  margin: 0 0 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
}
.login-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.login-campo input {
  background: var(--seat-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  outline: none;
}
.login-campo input:focus { border-color: var(--brand-red); }
.login-erro {
  margin: 0;
  min-height: 15px;
  font-size: 11.5px;
  color: #e0454b;
  line-height: 1.35;
}
.login-btn {
  background: var(--brand-red);
  border: none;
  border-radius: 8px;
  padding: 11px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.login-btn:hover { filter: brightness(1.1); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px;
}
.login-link:hover { color: var(--text); }
.login-rodape {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.45;
}

/* botão de sair, no cabeçalho */
/* O "Sair" fica ancorado à direita em vez de empurrado com margin-left:auto —
   empurrando, ele entrava na conta da centralização e deslocava Estudo/Treino/
   Dashboard para a esquerda. Ancorado, os itens ficam centrados na tela com
   ou sem ele. */
.nav-sair {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  padding: 6px 12px;
}

@media (max-width: 520px) {
  /* em tela estreita o botão ancorado encostaria nos itens: vira só um ícone */
  .nav-sair {
    right: 8px;
    padding: 6px 8px;
    font-size: 0;
  }
  .nav-sair::before {
    content: "⏻";
    font-size: 14px;
  }
}

/* Marca do spot ao lado da posição no placar: "BB vs BTN" e "BB Open" são
   linhas diferentes, e sem essa marca as duas apareceriam só como "BB". */
.report-pos-spot,
.dash-row-spot {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--seat-border);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A opção efetivamente tomada numa decisão passada fica acesa; as outras
   ficam apagadas mas clicáveis — clicar reescreve a linha dali pra frente. */
.mini-action-btn.escolhida { font-weight: 700; }
.seat-card-mini.decided .mini-action-btn:not(.escolhida) { opacity: 0.55; }
.seat-card-mini.decided .mini-action-btn:not(.escolhida):hover {
  opacity: 1;
  background: var(--seat-border);
  border-radius: 4px;
}

/* Clicar no corpo do card volta a linha àquele ponto — é como se estuda a
   decisão inteira (com o range na tela) antes de escolher de novo. A dica só
   aparece no hover pra não poluir a faixa. */
.seat-card-mini.decided { cursor: pointer; position: relative; }
.seat-card-mini.decided:hover {
  border-color: var(--brand-red);
  background: var(--panel-bg);
}
.seat-card-voltar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-red);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.seat-card-mini.decided:hover .seat-card-voltar { opacity: 1; }
.seat-card-mini.decided { padding-bottom: 14px; }

/* ===== Aba Spots: escolher o que treinar ===== */
.spots-wrap { padding: 4px 0 90px; }
.spots-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.spots-title { font-size: 20px; margin: 0 0 2px; }
.spots-sub { margin: 0; font-size: 13px; color: var(--text-dim); }
.spots-vazio { color: var(--text-dim); font-size: 13px; padding: 20px 0; text-align: center; }

.spot-aleatorio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.spot-aleatorio span { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.spot-aleatorio:hover, .spot-aleatorio.ativo { border-color: var(--brand-red); }

.spot-busca {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.spot-busca:focus { outline: none; border-color: var(--brand-red); }

.spot-grupo {
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.spot-grupo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--panel-bg);
  border: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.spot-grupo-seta { color: var(--text-dim); transition: transform 0.15s; font-size: 10px; }
.spot-grupo.aberto .spot-grupo-seta { transform: rotate(90deg); }
.spot-grupo-nome { flex: 1; }
.spot-grupo-conta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--seat-border);
  border-radius: 999px;
  padding: 2px 8px;
}
.spot-grupo-todos {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-red);
  opacity: 0;
  transition: opacity 0.12s;
}
.spot-grupo-head:hover .spot-grupo-todos { opacity: 1; }

/* fechado não ocupa altura nenhuma; a lista pode ter 50 itens */
.spot-grupo-itens { display: none; }
.spot-grupo.aberto .spot-grupo-itens { display: block; }

.spot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--seat-border);
  font-size: 13px;
  cursor: pointer;
}
.spot-item:hover { background: var(--panel-bg); }
.spot-item.marcado { background: color-mix(in srgb, var(--brand-red) 12%, transparent); }
.spot-item input { accent-color: var(--brand-red); cursor: pointer; }
.spot-item-pos {
  min-width: 34px;
  font-weight: 700;
  color: var(--text);
}
.spot-item-nome { flex: 1; color: var(--text-dim); }
.spot-item.marcado .spot-item-nome { color: var(--text); }
.spot-item-barra {
  display: flex;
  width: 90px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.spot-item-barra span { display: block; height: 100%; }
.spot-item-maos {
  min-width: 56px;
  text-align: right;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* A barra de ação fica colada no rodapé: com a lista aberta, o botão de
   treinar não pode ficar fora de alcance. */
.spots-rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.spots-rodape.ativo { border-color: var(--brand-red); }
.spots-rodape-btns { display: flex; align-items: center; gap: 10px; }
.spot-treinar {
  background: var(--brand-red);
  border: 0;
  border-radius: 6px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.spot-treinar:disabled { opacity: 0.4; cursor: default; }

/* Painel do treino: mostra o que está valendo e manda escolher na aba */
.train-spot-atual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.train-spot-nome { font-size: 13px; font-weight: 700; color: var(--text); }
/* Mesma cor do botão de treinar: é o caminho principal pra trocar de
   situação, e apagado ele passava despercebido no painel. */
.train-spot-trocar {
  background: var(--brand-red);
  border: 0;
  border-radius: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.train-spot-trocar:hover { filter: brightness(1.12); }

@media (max-width: 520px) {
  .spots-head { flex-direction: column; }
  .spot-aleatorio { width: 100%; }
  .spot-item-barra { width: 56px; }
  .spot-item-maos { display: none; }
}

/* ===== Meta de sessão no treino ===== */
.train-metas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.train-meta-btn {
  background: var(--panel-bg);
  border: 1px solid var(--seat-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.train-meta-btn:hover { border-color: var(--brand-red); color: var(--text); }
.train-meta-btn.ativo {
  border-color: var(--brand-red);
  color: var(--text);
  font-weight: 700;
}
/* o progresso da meta é o número que importa durante a sessão */
.train-meta { color: var(--text); font-weight: 700; }

/* ===== Legenda do ranking =====
   Aparece no Dashboard e no card de resumo do treino. Fechada por padrão:
   quem já entendeu a escala não precisa reler, e aberta ela empurraria os
   KPIs pra baixo da dobra no celular. */
.nivel-legenda {
  margin: 0 0 18px;
  border: 1px solid var(--seat-border);
  border-radius: 10px;
  background: var(--panel-bg);
}
.nivel-legenda > summary {
  cursor: pointer;
  padding: 9px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.nivel-legenda > summary::-webkit-details-marker { display: none; }
.nivel-legenda > summary::before {
  content: "▸";
  font-size: 9px;
  transition: transform .15s;
}
.nivel-legenda[open] > summary::before { transform: rotate(90deg); }
.nivel-legenda > summary:hover { color: var(--text); }

.nivel-legenda-corpo {
  padding: 2px 13px 13px;
  border-top: 1px solid var(--seat-border);
}
.nivel-legenda-corpo p {
  margin: 11px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.nivel-legenda-corpo strong { color: var(--text); font-weight: 600; }

.nivel-tabela {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nivel-linha {
  --nivel-cor: var(--text-dim);
  display: grid;
  grid-template-columns: 10px 1fr 62px 78px 38px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.nivel-linha-head {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .65;
  padding-bottom: 2px;
}
.nivel-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nivel-cor);
}
.nivel-linha-head .nivel-ponto { display: none; }
.nivel-linha-nome { color: var(--nivel-cor); font-weight: 700; }
.nivel-linha-val { font-variant-numeric: tabular-nums; }
.nivel-linha.atual {
  background: color-mix(in srgb, var(--nivel-cor) 13%, transparent);
}
.nivel-linha-voce {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nivel-cor);
}

/* No card do treino a legenda é mais estreita: a tabela perde a coluna
   "você" e aperta os números, senão estoura a largura do modal. */
.train-report .nivel-legenda { margin-bottom: 14px; }
.train-report .nivel-linha { grid-template-columns: 10px 1fr 56px 70px 34px; gap: 6px; }

/* ===== Histórico da sessão no treino =====
   Duas peças: a FITA, que mora no HUD entre o filtro e o placar, e o
   DETALHE, que abre acima da mesa quando um retângulo é clicado. Na fita não
   cabe carta — o espaço é o que sobra da barra — então ela mostra só a forma
   do desempenho; as cartas ficam no detalhe. */
.train-fita {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.fita-pontos {
  display: flex;
  align-items: center;
  gap: 2px;
  /* ocupa a faixa inteira em vez de se medir pelo conteúdo. Sem isto o
     encolhimento acontece duas vezes — a faixa encolhe pro conteúdo, e o
     conteúdo encolhe pra dentro da faixa — e os chips vão ao mínimo mesmo
     com espaço sobrando ao lado. */
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.fita-pontos::-webkit-scrollbar { display: none; }
/* a conta é o resumo que substitui o detalhe no celular — ver o @media */
.fita-conta { display: none; }
.fita-chip {
  /* encolhe em vez de rolar: as 25 têm de caber inteiras em qualquer tela,
     senão a fita deixa de ser legível de relance, que é a razão de existir.
     Numa janela de 696px faltavam 3px e ela rolava. */
  flex: 0 1 8px;
  min-width: 5px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .12s, transform .12s;
}
.fita-chip:hover { opacity: 1; transform: scaleY(1.15); }
.fita-chip.certo { background: var(--accent-green); }
.fita-chip.mista { background: #f59e0b; }
.fita-chip.erro  { background: var(--brand-red); }
.fita-chip.aberto {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text);
}

/* ---- detalhe da mão, acima da mesa ---- */
body:not([data-view="train"]) .train-hist-detalhe { display: none !important; }
.train-hist-detalhe { margin-bottom: 12px; }
.hist-det {
  border: 1px solid var(--seat-border);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--panel-bg);
  padding: 9px 12px 11px;
}
.hist-det.certo { border-left-color: var(--accent-green); }
.hist-det.mista { border-left-color: #f59e0b; }
.hist-det.erro  { border-left-color: var(--brand-red); }

.hist-det-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
.hist-cards { display: flex; gap: 2px; flex-shrink: 0; }
.hist-cards .hero-card {
  width: 22px;
  height: 30px;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: none;
}
.hist-det-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.hist-det-no { font-size: 10.5px; color: var(--text-dim); }
.hist-det-escolha { font-size: 11.5px; color: var(--text-dim); }
.hist-det-escolha strong { color: var(--text); font-weight: 700; }
.hist-det-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-left: 4px;
}
.hist-det.certo .hist-det-tag { color: var(--accent-green); }
.hist-det.mista .hist-det-tag { color: #f59e0b; }
.hist-det.erro  .hist-det-tag { color: var(--brand-red); }
.hist-det-custo {
  color: var(--brand-red);
  font-weight: 700;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.hist-det-fechar {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
.hist-det-fechar:hover { color: var(--text); }

/* A faixa que sobra pra fita entre o filtro e o placar satura em 245px (o
   container tem largura máxima), então de ~700px pra cima os 25 chips ficam
   nos 7,9px nominais e nada muda. Abaixo disso ela encolhe rápido: medido,
   640px ainda cabe (5,6px por chip) e 620px já rola. Aqui o HUD quebra e a
   fita ganha uma linha inteira, onde os 25 voltam aos 8px cheios — que é o
   ajuste certo, e não diminuir o número de mãos: em 620px nem 20 caberiam
   na faixa estreita (dariam 5,6px cada). As três linhas ficam CENTRADAS;
   sem isso o placar encosta na direita, herança do margin-left:auto. */
@media (max-width: 660px) {
  .train-hud { flex-wrap: wrap; justify-content: center; }
  .train-hud .train-score { order: 2; margin-left: 0; }
  .train-fita { order: 3; flex-basis: 100%; justify-content: center; }
  /* Na linha própria sobra espaço de sobra pros 25, então os chips voltam a
     ser rígidos. Deixá-los encolhíveis aqui é pior que inútil: um contêiner
     dimensionado pelo conteúdo cujos filhos encolhem se resolve pelo MÍNIMO,
     e a fita ficava com 173px de chips de 5px dentro de uma linha de 588. */
  .fita-pontos { flex: 0 1 auto; }
  .fita-chip { flex: 0 0 8px; }
}

@media (max-width: 520px) {

  /* No celular a fita é só resumo: o detalhe abriria acima da mesa e
     empurraria as cartas pra fora da dobra, que é justamente o que o
     jogador precisa ver. Sem detalhe, os chips não são clicáveis — e a
     conta entra pra fita não virar enfeite sem informação. */
  .train-hist-detalhe { display: none !important; }
  .fita-chip { pointer-events: none; cursor: default; }
  .fita-conta {
    display: inline;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
}

/* ===== Revisão da sessão, dentro do card de resumo =====
   A fita mostra 25; isto aqui alcança a sentada inteira. Fechado por
   padrão: quem acabou de treinar quer o placar primeiro, a lição depois. */
.rev-bloco {
  margin: 14px 0 0;
  border: 1px solid var(--seat-border);
  border-radius: 9px;
  background: rgba(0,0,0,.22);
}
.rev-bloco > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rev-bloco > summary::-webkit-details-marker { display: none; }
.rev-bloco > summary::before { content: "▸"; font-size: 9px; transition: transform .15s; }
.rev-bloco[open] > summary::before { transform: rotate(90deg); }
.rev-bloco > summary:hover { color: var(--text); }
.rev-bloco-ev { margin-left: auto; color: var(--brand-red); font-variant-numeric: tabular-nums; }

.rev-lista {
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--seat-border);
}
.rev-item { border-bottom: 1px solid var(--seat-border); }
.rev-item:last-child { border-bottom: none; }
.rev-item > summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  cursor: pointer;
  list-style: none;
  border-left: 3px solid transparent;
}
.rev-item > summary::-webkit-details-marker { display: none; }
.rev-item > summary:hover { background: rgba(255,255,255,.035); }
.rev-item.erro  > summary { border-left-color: var(--brand-red); }
.rev-item.mista > summary { border-left-color: #f59e0b; }

.rev-lista .hist-cards .hero-card {
  width: 18px;
  height: 24px;
  font-size: 11px;
  border-radius: 3px;
  box-shadow: none;
}
.rev-no {
  font-size: 10px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rev-troca { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.rev-troca strong { color: var(--text); }
.rev-seta { opacity: .5; }
.rev-custo {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-red);
  font-variant-numeric: tabular-nums;
}
.rev-corpo { padding: 2px 12px 9px 24px; }

@media (max-width: 480px) {
  .rev-item > summary { grid-template-columns: auto 1fr auto; gap: 7px; padding: 6px 9px; }
  .rev-troca { display: none; }   /* a seta cabe no corpo aberto, o custo não */
  .rev-corpo { padding-left: 9px; }
}

/* ===== Classificação da jogada (Correto / Imprecisão / Erro / Erro grave) =====
   A borda esquerda do painel repete a cor do veredito: quem só bate o olho
   depois de responder já sabe o tamanho do estrago sem ler nada. */
.train-result { border-left: 3px solid var(--fb-cor, transparent); }

.train-feedback-escala {
  margin: 8px 0 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.train-feedback-escala strong { color: var(--fb-cor); font-weight: 700; }
.train-feedback-regra {
  display: block;
  font-size: 10px;
  opacity: .65;
  margin-top: 2px;
}

/* repartição das quatro classificações, no card de resumo e no Dashboard */
.rep-fb { display: inline-flex; align-items: baseline; gap: 4px; }
.rep-fb b { font-weight: 800; }
.rep-fb-resto { font-size: 10px; color: var(--text-dim); opacity: .8; }