/*
 * Poker dos Dogs — identidade visual
 * Paleta derivada do logo oficial (seção 2 do documento de requisitos).
 * O roxo de fundo do arquivo original do logo não é usado como cor da UI.
 */
:root {
  --pdd-bg: #121212;
  --pdd-bg-secondary: #1e1e1e;
  --pdd-bg-elevated: #262626;
  --pdd-accent: #b3241a;
  --pdd-accent-hover: #8f1d15;
  --pdd-gold: #cbb27b;
  --pdd-text: #f5f0e6;
  --pdd-text-secondary: #b5b0a6;
  --pdd-success: #2e7d32;
  --pdd-warning: #d4a017;
  --pdd-error: #c0392b;
  --pdd-border: #3a3630;
  --pdd-blue: #2e5c8a;
  --pdd-blue-hover: #24476b;
  --pdd-blue-light: #6fa8dc;
  --pdd-bg-blue: #16202e;
  --pdd-border-blue: #2a3b52;
  --pdd-orange: #e08a3c;
  --pdd-orange-hover: #c36f28;
  --pdd-brown: #8b5e34;
  --pdd-brown-hover: #6f4a29;
  --pdd-green-light: #6fbf6f;
  --pdd-green-light-hover: #59a659;
  --pdd-dark-green: #1b5e20;
  --pdd-dark-green-hover: #14471a;
  --pdd-blue-light-hover: #5691c4;
}

body {
  background-color: var(--pdd-bg);
  color: var(--pdd-text);
  min-height: 100vh;
}

a {
  color: var(--pdd-gold);
}
a:hover {
  color: var(--pdd-accent);
}

.pdd-navbar {
  background-color: var(--pdd-bg-secondary);
  border-bottom: 1px solid var(--pdd-border);
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}

.pdd-logo {
  height: 44px;
  width: auto;
}

.pdd-card {
  background-color: var(--pdd-bg-secondary);
  border: 1px solid var(--pdd-border);
  border-radius: 0.75rem;
}

/* Botão que ocupa o card inteiro (ex.: card SN1 de navegação da
   Surpresinha) — o card fica com padding zero e o botão preenche todo
   o espaço, com os mesmos cantos arredondados do .pdd-card. */
.pdd-card-fill-btn {
  display: block;
  width: 100%;
  padding: 1.25rem;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 1.1rem;
}

.pdd-card-surpresinha {
  background-color: var(--pdd-bg-blue);
  border: 1px solid var(--pdd-border-blue);
  border-radius: 0.75rem;
}

.pdd-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.pdd-auth-card {
  width: 100%;
  max-width: 26rem;
}

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

.btn-pdd-gold {
  background-color: var(--pdd-gold);
  border-color: var(--pdd-gold);
  color: #1a1a1a;
}
.btn-pdd-gold:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  color: var(--pdd-text);
  opacity: 1;
}

.btn-pdd-success {
  background-color: var(--pdd-success);
  border-color: var(--pdd-success);
  color: var(--pdd-text);
}
.btn-pdd-success:hover {
  background-color: #256b29;
  border-color: #256b29;
  color: var(--pdd-text);
}

.btn-pdd-blue {
  background-color: var(--pdd-blue);
  border-color: var(--pdd-blue);
  color: var(--pdd-text);
}
.btn-pdd-blue:hover {
  background-color: var(--pdd-blue-hover);
  border-color: var(--pdd-blue-hover);
  color: var(--pdd-text);
}

.btn-pdd-brown {
  background-color: var(--pdd-brown);
  border-color: var(--pdd-brown);
  color: var(--pdd-text);
}
.btn-pdd-brown:hover {
  background-color: var(--pdd-brown-hover);
  border-color: var(--pdd-brown-hover);
  color: var(--pdd-text);
}

.btn-pdd-green-light {
  background-color: var(--pdd-green-light);
  border-color: var(--pdd-green-light);
  color: #1a1a1a;
}
.btn-pdd-green-light:hover {
  background-color: var(--pdd-green-light-hover);
  border-color: var(--pdd-green-light-hover);
  color: #1a1a1a;
}

.btn-pdd-dark-green {
  background-color: var(--pdd-dark-green);
  border-color: var(--pdd-dark-green);
  color: var(--pdd-text);
}
.btn-pdd-dark-green:hover {
  background-color: var(--pdd-dark-green-hover);
  border-color: var(--pdd-dark-green-hover);
  color: var(--pdd-text);
}

.btn-pdd-blue-light {
  background-color: var(--pdd-blue-light);
  border-color: var(--pdd-blue-light);
  color: #1a1a1a;
}
.btn-pdd-blue-light:hover {
  background-color: var(--pdd-blue-light-hover);
  border-color: var(--pdd-blue-light-hover);
  color: #1a1a1a;
}

.btn-pdd-orange {
  background-color: var(--pdd-orange);
  border-color: var(--pdd-orange);
  color: #1a1a1a;
}
.btn-pdd-orange:hover {
  background-color: var(--pdd-orange-hover);
  border-color: var(--pdd-orange-hover);
  color: #1a1a1a;
}

.btn-pdd-danger {
  background-color: var(--pdd-error);
  border-color: var(--pdd-error);
  color: var(--pdd-text);
}
.btn-pdd-danger:hover {
  background-color: #a12f21;
  border-color: #a12f21;
  color: var(--pdd-text);
}

/* Medalhas de ranking (ouro/prata/bronze) — substituem os emojis 🥇🥈🥉,
   dimensionadas pra ocupar o mesmo espaço visual que eles tinham. */
.pdd-medal {
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
}

.pdd-medal-lg {
  height: 3.5rem;
  width: auto;
  vertical-align: middle;
}

.text-pdd-secondary {
  color: var(--pdd-text-secondary);
}

.text-pdd-gold {
  color: var(--pdd-gold);
}

.text-pdd-blue {
  color: var(--pdd-blue-light);
}

.text-pdd-orange {
  color: var(--pdd-orange);
}

.pdd-status-badge.pending { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.approved { background-color: var(--pdd-success); }
.pdd-status-badge.rejected,
.pdd-status-badge.blocked { background-color: var(--pdd-error); }

/* Campeonatos e rodadas */
.pdd-status-badge.planned,
.pdd-status-badge.scheduled { background-color: var(--pdd-bg-elevated); color: var(--pdd-text-secondary); }
.pdd-status-badge.open { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.in_progress { background-color: var(--pdd-success); }
.pdd-status-badge.closing { background-color: var(--pdd-warning); color: #1a1a1a; }
.pdd-status-badge.closed { background-color: var(--pdd-gold); color: #1a1a1a; }
.pdd-status-badge.cancelled { background-color: var(--pdd-error); }

.table th,
.table td {
  text-align: center;
}

/* Rebuy removido (soft-delete): continua listado no histórico, mas
   riscado e em cinza pra não parecer um lançamento ainda válido. */
.pdd-row-removed td {
  text-decoration: line-through;
  color: var(--pdd-text-secondary);
}

/* Jogador com saída antecipada: continua na tabela de participantes (fichas
   entram na conferência geral), mas em cinza pra mostrar que não está mais
   na rodada. Cinza mais escuro que --pdd-text-secondary (usado no rebuy
   removido acima), pra ficar visivelmente apagado em relação ao resto da
   tabela. */
.pdd-row-left-early td {
  color: #7d786e;
}

/* Lançamentos do torneio (TR12): tabela compacta — com a hora sem a data e a
   fonte menor, as seis colunas cabem na largura do celular. */
.pdd-buys-table td,
.pdd-buys-table th {
  padding: 0.3rem 0.4rem;
  white-space: nowrap;
}
.pdd-buys-table .pdd-col-action {
  width: 2.5rem;
}

/* Cards com muitas linhas (Participação dos jogadores, Rodadas): rolagem
   interna mostrando ~8 linhas, com cabeçalho fixo durante o scroll. */
.pdd-table-scroll {
  max-height: 18.5rem;
  overflow-y: auto;
}

/* Ranking: mesma rolagem interna, só que mostrando as 10 primeiras linhas
   (cabeçalho fixo + 10 linhas de dados). */
.pdd-table-scroll.pdd-table-scroll-lg {
  max-height: 25.5rem;
}

.pdd-table-scroll thead th {
  position: sticky;
  top: 0;
  background-color: #212529;
  z-index: 1;
}

/* Coluna "Jogador" fixa durante o scroll horizontal do card de
   participantes (muitas colunas de rebuys/fichas). */
.pdd-col-sticky {
  position: sticky;
  left: 0;
  background-color: #212529;
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
}
thead .pdd-col-sticky {
  z-index: 2;
}
/* Cabeçalho da coluna congelada dentro de um card com rolagem: precisa grudar
   nos dois eixos ao mesmo tempo (topo na rolagem vertical, esquerda na
   horizontal) e ficar acima das outras células fixas. */
.pdd-table-scroll thead .pdd-col-sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

/* Código de identificação de card — só em UAT (DEBUG=True), ver
   `pdd_debug` em apps/core/context_processors.py e o script no
   base.html que insere o badge em cada .pdd-card. */
.pdd-card-id-host {
  position: relative;
}
.pdd-card-id-badge {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  background-color: var(--pdd-accent);
  color: var(--pdd-text);
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}

.pdd-toggle-password {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text-secondary);
}
.pdd-toggle-password:hover,
.pdd-toggle-password:focus {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text);
}

.pdd-player {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

/* Gráfico de evolução (posição no ranking, mês a mês) — card do ranking
   (top 5) e da página inicial (jogador logado). Rótulos dos eixos são
   texto HTML posicionado por porcentagem sobre o gráfico, não `<text>`
   dentro do SVG — o SVG é escalado via viewBox pra caber na largura do
   card, então um font-size definido nele encolhe junto e nunca fica
   legível em telas estreitas. */
/* Duas linhas flex empilhadas (gráfico e eixo X), cada uma com o MESMO
   par [espaçador/eixo Y de largura fixa][área flexível] — garante que a
   área flexível da linha do eixo X tenha exatamente a mesma largura (e
   comece no mesmo x) que o SVG da linha de cima, senão os rótulos de mês
   não alinham com os pontos do gráfico. */
.pdd-evolution-graph-row,
.pdd-evolution-x-axis-row {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}
.pdd-evolution-y-axis,
.pdd-evolution-y-axis-spacer {
  width: 1.6rem;
  flex-shrink: 0;
}
.pdd-evolution-y-axis {
  position: relative;
}
.pdd-evolution-svg-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.pdd-evolution-svg {
  width: 100%;
  height: auto;
  display: block;
}
.pdd-evolution-gridline {
  stroke: var(--pdd-border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
/* Posição do jogador em cada ponto do gráfico (um por mês) — em HTML por
   cima do SVG, não como <text> dentro dele, pelo mesmo motivo dos rótulos
   dos eixos (ver comentário em evolution_chart.py): o SVG é escalado via
   viewBox, então font-size definido nele encolheria junto. */
.pdd-evolution-point-label {
  position: absolute;
  transform: translate(-50%, -170%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--pdd-text);
  white-space: nowrap;
  pointer-events: none;
}
.pdd-evolution-tick-label {
  position: absolute;
  font-size: 0.65rem;
  color: var(--pdd-text-secondary);
  white-space: nowrap;
}
.pdd-evolution-y-axis .pdd-evolution-tick-label {
  right: 0.25rem;
  transform: translateY(-50%);
}
.pdd-evolution-x-axis {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 0.9rem;
}
.pdd-evolution-x-axis-row {
  margin: 0.2rem 0 0.6rem;
}
.pdd-evolution-x-axis .pdd-evolution-tick-label {
  top: 0;
  transform: translateX(-50%);
}
.pdd-evolution-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pdd-evolution-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.pdd-evolution-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.pdd-avatar-img,
.pdd-avatar-initial {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
}
.pdd-avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.pdd-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.pdd-avatar-lg { width: 5rem; height: 5rem; font-size: 1.75rem; }

.pdd-copy-pix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pdd-text-secondary);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdd-copy-pix:hover,
.pdd-copy-pix:focus-visible {
  color: var(--pdd-text);
}

.pdd-photo-input .pdd-photo-filename {
  display: block;
  margin-top: 0.35rem;
}

.form-control, .form-select {
  background-color: var(--pdd-bg);
  border-color: var(--pdd-border);
  color: var(--pdd-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--pdd-bg);
  color: var(--pdd-text);
  border-color: var(--pdd-gold);
  box-shadow: 0 0 0 0.2rem rgba(203, 178, 123, 0.25);
}
.form-control::placeholder {
  color: var(--pdd-text-secondary);
}

/* Otimização mobile (FASE 8): telas pequenas usam muito botão/checkbox
   compacto (`btn-sm`, switches de tabela) — abaixo do alvo de toque
   recomendado (~44px). Alarga só a área clicável (padding/min-height),
   sem inflar o visual denso que o resto do app já usa em desktop. */
@media (max-width: 576px) {
  /* Reduz o font-size raiz: texto e tabelas usam rem, então escalam
     junto com o html sem precisar tocar em cada regra individualmente. */
  html {
    font-size: 87.5%;
  }
  .btn-sm,
  .pdd-toggle-password,
  .pdd-camera-btn,
  .pdd-gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .form-check-input[type="checkbox"] {
    width: 2.25rem;
    height: 1.25rem;
  }
  .form-check {
    padding: 0.5rem 0.5rem 0.5rem 2.5em;
    margin-bottom: 0.25rem;
  }
}

/* ------------------------------------------------------------------ */
/* Torneio avulso                                                      */
/* Módulo à parte do campeonato (ver docs/TORNEIO.md) — e a tela deixa */
/* isso na cara: fundo e cards em azul, em vez do preto/dourado do     */
/* campeonato, pra ninguém confundir uma coisa com a outra no meio do  */
/* jogo. Aplicado via `{% block body_class %}pdd-tournament{% endblock %}`. */
/* ------------------------------------------------------------------ */
body.pdd-tournament {
  --pdd-tournament-bg: #0d1b2a;
  --pdd-tournament-card: #16304d;
  --pdd-tournament-card-elevated: #1d3d61;
  --pdd-tournament-border: #2f5580;
  --pdd-tournament-accent: #4a90d9;
  background-color: var(--pdd-tournament-bg);
}

body.pdd-tournament .pdd-navbar {
  background-color: var(--pdd-tournament-card);
  border-bottom: 1px solid var(--pdd-tournament-border);
}

body.pdd-tournament .pdd-card {
  background-color: var(--pdd-tournament-card);
  border-color: var(--pdd-tournament-border);
}

body.pdd-tournament .text-pdd-secondary {
  color: #9fc2e3;
}

body.pdd-tournament .border-secondary {
  border-color: var(--pdd-tournament-border) !important;
}

.btn-pdd-tournament {
  background-color: var(--pdd-tournament-accent, #4a90d9);
  border-color: var(--pdd-tournament-accent, #4a90d9);
  color: #0d1b2a;
}
.btn-pdd-tournament:hover {
  background-color: #3a7cc0;
  border-color: #3a7cc0;
  color: #0d1b2a;
}
.btn-pdd-tournament:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  color: var(--pdd-text);
  opacity: 1;
}

.pdd-status-badge.phase_1 { background-color: var(--pdd-success); }
.pdd-status-badge.phase_2 { background-color: var(--pdd-orange); color: #1a1a1a; }

/* Pódio do torneio: os três primeiros com medalha e prêmio. */
/* Pódio do torneio encerrado: o campeão sozinho num box largo em cima e o
   2º/3º lado a lado embaixo, menores — o destaque do 1º é a borda dourada, o
   box maior e a medalha/prêmio em tamanho grande. */
.pdd-podium {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pdd-podium-runners {
  display: flex;
  gap: 0.75rem;
}
.pdd-podium-place {
  flex: 1 1 0;
  text-align: center;
  padding: 1rem 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--pdd-tournament-card-elevated, #1d3d61);
  border: 1px solid var(--pdd-tournament-border, #2f5580);
}
.pdd-podium-place.first {
  flex: 0 0 auto;
  padding: 1.5rem 0.75rem;
  border: 2px solid #cbb27b;
  background-image: linear-gradient(180deg, rgba(203, 178, 123, 0.18), rgba(203, 178, 123, 0));
  box-shadow: 0 0 1.25rem rgba(203, 178, 123, 0.18);
}
.pdd-podium-medal {
  font-size: 1.75rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}
.pdd-podium-place.first .pdd-podium-medal { font-size: 3rem; }
.pdd-podium-champion {
  display: flex;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.pdd-podium-prize {
  font-weight: 600;
  color: #7ee08a;
}
.pdd-podium-place.first .pdd-podium-prize { font-size: 1.35rem; }
.pdd-row-eliminated td {
  color: var(--pdd-text-secondary);
}

/* ------------------------------------------------------------------ */
/* Blind Timer — tela cheia (`/timer/tela/`), projetada na TV da mesa. */
/* Tudo em `vmin` pra escalar junto com a tela, do celular deitado à   */
/* TV de 50", sem media query nenhuma.                                 */
/* ------------------------------------------------------------------ */

body.pdd-timer-display {
  background-color: #000;
  margin: 0;
  overflow: hidden;
}

.tm-display {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6vmin;
  text-align: center;
  color: #fff;
  padding: 2vmin;
}

/* O logo é quadrado (680x686) e fica acima do nome da estrutura. Altura em
   vmin, igual ao resto da tela, pra acompanhar do celular deitado à TV. */
.tm-display .tm-logo {
  height: 12vmin;
  width: auto;
  margin-bottom: 1vmin;
}

.tm-display .tm-structure {
  font-size: 2.4vmin;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.tm-display .tm-level { font-size: 3.6vmin; color: #c9a227; }

.tm-display .tm-blinds {
  font-size: 11vmin;
  font-weight: 600;
  line-height: 1;
}

.tm-display .tm-ante { font-size: 2.8vmin; color: #8a8a8a; }

.tm-display .tm-clock {
  font-size: 30vmin;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;  /* sem isto o relógio "pula" a cada segundo */
  /* Respira dos dois lados: o relógio vem antes dos blinds e é o elemento que
     se lê de longe, então não pode ficar colado em nada. */
  margin: 1.5vmin 0;
}

.tm-display .tm-clock.text-danger { color: #e35d6a !important; }

.tm-display .tm-next { font-size: 2.6vmin; color: #8a8a8a; }

.tm-display .tm-players { margin-top: 1.5vmin; }
.tm-display .tm-event-label { font-size: 2.4vmin; color: #8a8a8a; }
.tm-display .tm-event-count { font-size: 5vmin; font-weight: 600; }

/* Saída e botão de tela cheia: discretos, mas alcançáveis com o dedo. */
.tm-display .tm-exit,
.tm-display .tm-fullscreen {
  position: fixed;
  top: 2vmin;
  font-size: 2.4vmin;
  color: #6a6a6a;
  background: none;
  border: 1px solid #333;
  border-radius: 0.4rem;
  padding: 0.4vmin 1.4vmin;
  text-decoration: none;
  line-height: 1.4;
}
.tm-display .tm-exit { left: 2vmin; }
.tm-display .tm-fullscreen { right: 2vmin; }
.tm-display .tm-exit:hover,
.tm-display .tm-fullscreen:hover { color: #ccc; border-color: #666; }

/* ------------------------------------------------------------------ */
/* Editor de estruturas de blind — alça de arrastar.                   */
/* ------------------------------------------------------------------ */

.pdd-level-grip {
  cursor: grab;
  color: #6a6a6a;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: -0.15em;
  padding: 0.25rem 0.4rem;
  user-select: none;
  /* Sem isto o navegador rola a página em vez de deixar arrastar a linha. */
  touch-action: none;
}

.pdd-level-grip:hover { color: #ccc; }

[data-pdd-level-row].pdd-level-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

[data-pdd-level-row].pdd-level-dragging .pdd-level-grip { cursor: grabbing; }

/* Controles da tela cheia: aparecem ao toque/movimento e somem sozinhos.
   Ficam em `position: fixed` de propósito — se entrassem no fluxo, mostrar e
   esconder empurraria o relógio pra cima e pra baixo. */
/* No fluxo normal, abaixo das informações — não em `position: fixed`, que
   fazia os botões taparem a linha do próximo blind. Mostrar e esconder é por
   opacidade, então o layout não mexe. */
.tm-display .tm-controls {
  display: flex;
  flex-direction: column;
  gap: 1vmin;
  align-items: center;
  margin-top: 2.5vmin;
}

.tm-display .tm-controls-row {
  display: flex;
  gap: 1.2vmin;
  align-items: center;
}

.tm-display .tm-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #444;
  color: #ddd;
  border-radius: 0.5rem;
  font-size: 2.2vmin;
  line-height: 1;
  padding: 1.1vmin 2vmin;
  min-width: 7vmin;
  cursor: pointer;
}

.tm-display .tm-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.tm-display .tm-btn-primary {
  background: var(--pdd-gold, #c9a227);
  border-color: var(--pdd-gold, #c9a227);
  color: #1a1a1a;
  font-weight: 600;
  min-width: 14vmin;
}

.tm-display .tm-btn-primary:hover { filter: brightness(1.1); background: var(--pdd-gold, #c9a227); }

/* Estado ocioso: some tudo que não é o relógio, inclusive o cursor.
   Opacidade (não `display`) pra não recalcular layout nem piscar a tela. */
body.pdd-timer-display [data-tm-chrome] {
  transition: opacity 0.4s ease;
}

body.pdd-timer-display.tm-idle [data-tm-chrome] {
  opacity: 0;
  pointer-events: none;
}

body.pdd-timer-display.tm-idle { cursor: none; }

/* Quem vê os controles: só master e administrador do evento. A classe é ligada
   pelo JS a partir do `can_control` que o servidor manda no polling — e é só
   exibição, porque a permissão de verdade vive no servidor (403 nas rotas de
   comando). */
body.pdd-timer-display .tm-controls { display: none; }

body.pdd-timer-display.tm-can-control .tm-controls { display: flex; }

/* ------------------------------------------------------------------ */
/* Tela sem jogo: só o logo (usuário, 2026-09-20).                     */
/* ------------------------------------------------------------------ */

/* Sem rodada nem torneio aberto, a TV não mostra relógio nenhum — some tudo e
   fica o logo, grande, no meio da tela. É o MESMO `<img class="tm-logo">` da
   tela do relógio, só que crescido: assim abrir a partida é trocar uma classe,
   sem recarregar (a TV vive em tela cheia, que um reload derrubaria).

   Os controles também somem, inclusive pra quem pode comandar: não há partida
   pra comandar. Por isso estas regras vêm DEPOIS da `.tm-can-control` acima —
   têm a mesma especificidade, e quem vem por último vence.

   O canto (sair/tela cheia) continua: sem ele não há como sair da tela cheia. */
body.pdd-timer-display.tm-no-event .tm-structure,
body.pdd-timer-display.tm-no-event .tm-level,
body.pdd-timer-display.tm-no-event .tm-clock,
body.pdd-timer-display.tm-no-event .tm-blinds,
body.pdd-timer-display.tm-no-event .tm-ante,
body.pdd-timer-display.tm-no-event .tm-next,
body.pdd-timer-display.tm-no-event .tm-players,
body.pdd-timer-display.tm-no-event .tm-controls {
  display: none;
}

/* Cresce até caber inteiro na tela, respeitando a proporção. `vh`/`vw` (não
   `vmin`) de propósito: numa TV deitada quem limita é a altura, num celular em
   pé é a largura, e cada `max-` cuida do seu lado. */
body.pdd-timer-display.tm-no-event .tm-logo {
  height: auto;
  width: auto;
  max-height: 70vh;
  max-width: 70vw;
  margin-bottom: 0;
}

/* Console do cronômetro sem jogo aberto: some o relógio e os comandos, aparece
   o aviso. Mesma regra da TV (só o logo lá), pelo mesmo motivo — o cronômetro
   só existe enquanto existe partida. A classe no body vem do JS, a cada poll. */
[data-tm-no-game] { display: none; }
body.tm-no-event [data-tm-no-game] { display: block; }
body.tm-no-event [data-tm-game] { display: none; }

/* ------------------------------------------------------------------ */
/* Destaque de 5 segundos na eliminação do torneio (usuário 2026-09-20) */
/* ------------------------------------------------------------------ */

/* Cobre a tela inteira com o conteúdo do TR5 e sai sozinho, devolvendo o app
   como está hoje. `position: fixed` + `inset: 0` pra não depender de onde o
   elemento caiu no fluxo, e z-index acima do backdrop do modal do Bootstrap
   (1050/1055) pra vencer qualquer coisa que esteja aberta. */
.pdd-elim-flash {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.94);
  cursor: pointer;
  animation: pdd-elim-in 0.3s ease-out both;
}

@keyframes pdd-elim-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* A saída é opacidade, não `display`: some suave em vez de piscar. */
.pdd-elim-flash.pdd-elim-gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* Quem pediu menos movimento não recebe a entrada com escala. */
@media (prefers-reduced-motion: reduce) {
  .pdd-elim-flash { animation: none; }
}

/* A colocação, em número grande — é o que se lê de relance. `vmin` pra caber
   tanto no celular em pé quanto deitado. */
.pdd-elim-flash .pdd-elim-number {
  font-size: 22vmin;
  font-weight: 700;
  line-height: 1;
  color: var(--pdd-gold);
  margin-bottom: 1rem;
}

/* As mesmas frases do TR5, só que grandes — o include não sabe que está aqui. */
.pdd-elim-flash .pdd-elim-place {
  font-size: 1.5rem;
  font-weight: 600;
}

.pdd-elim-flash .pdd-elim-phrase {
  font-size: 1.25rem !important;   /* vence o `.small` que o TR5 precisa ter */
  color: var(--pdd-text) !important;
  margin-top: 0.5rem;
}

.pdd-elim-flash .pdd-elim-hint {
  margin-top: 2.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--pdd-text-secondary);
}