/*
 * Letchess — mecânica exclusiva (tabuleiro, peças, capturas, controles). A
 * casca genérica (topbar, badges, modais, stats, botões) vem de
 * ../shared/base.css; as cores vêm do tema único desta plataforma usado
 * aqui, data-theme="geral" (ver index.php) — Letchess não tem dicionário
 * pra trocar de tema junto, diferente do Letfall/Letrix.
 *
 * As cores das CASAS do tabuleiro (--casa-clara/--casa-escura) e das peças
 * NÃO vêm do tema da plataforma — são cores próprias de um tabuleiro de
 * xadrez, sem equivalente em theme-geral.css, então ficam fixas aqui (com
 * uma variante escura pro modo noite).
 */

/* Fonte própria pros símbolos das peças (U+2654-265F) — sem isso, cada
   aparelho usa a fonte de emoji/símbolos que tiver instalada, e o desenho
   varia bastante entre eles (ex.: Samsung antigo com fallback "3D" vs.
   Android recente/desktop com fallback chapado). Subset da Noto Sans
   Symbols 2 (Google, licença SIL OFL) contendo só os 12 glifos de peças,
   pra manter o arquivo pequeno (~6KB). */
@font-face{
  font-family: "ChessPieces";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/chess-pieces.woff2") format("woff2");
  unicode-range: U+2654-265F;
}

/* .layout vem de shared/base.css como flex genérico; aqui viramos grid só
   pra travar a coluna do side-panel numa largura fixa em vez do flex:1 do
   base.css, que deixaria ela crescer. */
.layout{
  display: grid;
  /* side em minmax(180px, 200px) — mesma largura do .side-panel do
     Letmaze/Letrix (ver letmaze.css e letrix.css), por pedido explícito,
     pra deixar o tabuleiro maior em telas largas. Era minmax(200px, 320px)
     originalmente. */
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 200px);
  gap: 20px;
}

/* Grid (não o .stat-row flex de base.css) pra controlar o formato exato.
   Empilhados numa coluna só (era 2 colunas com vitórias+sequência lado a
   lado) porque .side-panel tem a largura estreita de .layout acima (180-
   200px) — 2 colunas nessa largura deixava "SEQUÊNCIA" sem espaço,
   forçando quebra de linha e aumentando a altura dos 3 cards (grid força a
   mesma altura de linha entre eles). No mobile os 3 saem de dentro de
   .side-panel e vão pra cima do tabuleiro, virando 1 linha só (ver media
   query no fim do arquivo). margin-bottom separa o grupo de .side-rest
   logo abaixo, no desktop (gap de .side-panel é só 4px, ver abaixo). */
.top-stats{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 10px;
}

.side-panel{
  /* shared/base.css usa gap:14px (padrão da plataforma); aqui fica bem
     menor — entre .top-stats e .side-rest (que junta #capturas-stat e
     .controls) 14px deixava a distância grande demais, tanto no mobile
     quanto no desktop. */
  gap: 4px;
}

/* .side-rest junta tudo que fica abaixo de .top-stats (capturas, treinador,
   controles) num único bloco — existe pra que, no mobile, só .top-stats
   precise "escapar" de .side-panel pra cima do tabuleiro (ver media query
   no fim do arquivo), sem precisar dar uma área própria no grid pra cada
   filho aqui dentro (#treinador-lista/#treinador-feedback ficam .hidden a
   maior parte do tempo — como área nomeada de grid eles ainda reservariam
   o gap ao redor mesmo escondidos; como filhos de um flex column comum,
   gap simplesmente não conta pra quem tem display:none). */
.side-rest{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-wrap{
  position: relative;
  z-index: 1;
}

#start-modal,
#win-modal{
  /* O tabuleiro inicial já fica visível atrás do menu (ver "tabuleiro
     inicial visível atrás do menu" em game.js) e o tabuleiro final mostra
     a posição de xeque-mate/afogamento — os dois casos são justamente o
     que vale a pena ver, então sem o scrim escuro padrão de .modal. */
  background: transparent;
}

/* Mensagem de fim de partida arrastável (ver initArrastarModalFim em
   game.js), pra dar pra mover ela e ver as peças por trás — cursor de
   "pega e arrasta" em tudo, exceto os botões (evitar interferir no clique). */
#win-modal .modal-card-gameover{
  cursor: grab;
  touch-action: none;
}
#win-modal .modal-card-gameover .modal-actions{
  cursor: auto;
}
#win-modal .modal-card-gameover.arrastando{
  cursor: grabbing;
}

/* "Nova partida" fica numa segunda linha, abaixo dos 3 botões originais
   (Continuar/Reiniciar/Desistir), que continuam alinhados como antes. */
#pause-modal .modal-actions-secondary{
  margin-top: 10px;
}

.xadrez-board{
  --casa-clara: #ebedf0;
  --casa-escura: #6b8f71;

  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow, 0 2px 6px rgba(0,0,0,.3));
  touch-action: none;
}

:root[data-theme="geral"]:not(.day-mode) .xadrez-board{
  --casa-clara: #4b5563;
  --casa-escura: #374151;
}

.xadrez-casa{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.xadrez-casa.clara{ background-color: var(--casa-clara); }
.xadrez-casa.escura{ background-color: var(--casa-escura); }

.xadrez-casa.selecionada{ box-shadow: inset 0 0 0 3px var(--modal-accent); }

.xadrez-casa.destino::after{
  content: "";
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(30, 64, 175, 0.55);
  pointer-events: none;
}

.xadrez-casa.captura{
  box-shadow: inset 0 0 0 4px rgba(239, 68, 68, 0.75);
}

.xadrez-casa.ultimo-lance{
  box-shadow: inset 0 0 0 3px rgba(245, 158, 11, 0.65);
}

.xadrez-casa.em-xeque{
  background-color: rgba(239, 68, 68, 0.55) !important;
}

/* ---- Modo treinador — nível 1 (dica) ---- */
/* Magenta (complementar do verde das casas/tabuleiro, ver --casa-escura
   acima) em vez de verde — evita o anel da dica se misturar com a casa
   escura, que já é verde. */
@keyframes letchess-dica-piscar{
  0%, 100% { box-shadow: inset 0 0 0 4px rgba(219, 39, 119, 0.85); }
  50% { box-shadow: inset 0 0 0 4px rgba(219, 39, 119, 0.15); }
}
.xadrez-casa.dica-origem,
.xadrez-casa.dica-destino{
  animation: letchess-dica-piscar 0.9s ease-in-out infinite;
}

/* No modo dia, --casa-clara é cinza bem claro (#ebedf0) e --casa-escura é
   verde (#6b8f71) — o magenta padrão acima some contra os dois no ponto
   baixo do pisca (opacity 0.15). Magenta mais escuro/saturado + piso de
   opacidade mais alto (0.4 em vez de 0.15) mantém o anel visível nas duas
   casas. */
@keyframes letchess-dica-piscar-dia{
  0%, 100% { box-shadow: inset 0 0 0 4px rgba(157, 23, 77, 1); }
  50% { box-shadow: inset 0 0 0 4px rgba(157, 23, 77, 0.4); }
}
:root[data-theme="geral"].day-mode .xadrez-casa.dica-origem,
:root[data-theme="geral"].day-mode .xadrez-casa.dica-destino{
  animation: letchess-dica-piscar-dia 0.9s ease-in-out infinite;
}

.xadrez-peca{
  font-family: "ChessPieces";
  font-size: var(--peca-tamanho, 28px);
  line-height: 1;
  pointer-events: none;
}

.peca-branca{
  color: #f8fafc;
  text-shadow: 0 0 2px #111827, 0 0 1px #111827;
}

.peca-preta{
  color: #111827;
  text-shadow: 0 0 2px #f8fafc, 0 0 1px #f8fafc;
}

.xadrez-peca-fantasma{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

/* ---- Seletor de dificuldade (tela inicial) ---- */
/* Mesmo grid de .modal-actions (base.css) — colunas 1fr que respeitam o
   min-content de cada botão, pra ficar com a cara idêntica ao modal de
   Pausa (largura igual entre si, sem estourar rótulo largo tipo
   "Difícil"). */
.dificuldade-grupo{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  width: 100%;
  margin: 4px 0 16px;
}

/* .chip-treinador reaproveita o mesmo visual (grupo separado, combinado
   aqui só pra CSS) — as duas classes NÃO podem coexistir no mesmo botão:
   game.js consulta '.chip-dificuldade' e '.chip-treinador' separadamente
   pra ligar o listener/alternar 'selecionado' de cada grupo de forma
   independente; um botão de treinador com as duas classes seria pego pelas
   duas consultas e bagunçaria a seleção do outro grupo. */
.chip-dificuldade,
.chip-treinador{
  min-height: var(--btn-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--muted);
  color: var(--modal-ink);
  background: var(--ghost-fill);
  padding: 6px 4px;
  font: inherit;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, filter .1s ease;
}

/* Mesmo mouseover/active de .btn-ghost e .btn-primary (base.css) — chip
   não-selecionado se comporta como ghost, chip selecionado (fundo sólido)
   como primary. */
.chip-dificuldade:hover,
.chip-treinador:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}
.chip-dificuldade:active,
.chip-treinador:active{
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}
.chip-dificuldade.selecionado:hover,
.chip-treinador.selecionado:hover{
  filter: brightness(1.06);
}

.chip-dificuldade.selecionado,
.chip-treinador.selecionado{
  background: var(--modal-accent);
  border-color: var(--modal-accent);
  color: var(--modal-accent-text);
  /* Sem font-weight:bold de propósito: texto mais largo dentro de um chip
     flex:1 de largura fixa quebrava linha (ou mudava a largura do texto)
     só no botão selecionado, deformando a altura da fileira de chips. A
     cor/fundo já deixam claro qual está selecionado, sem precisar disso. */
}

/* ---- Promoção ---- */
.promotion-opcoes{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;
}

.btn-promocao{
  background: var(--bg-panel);
  color: var(--modal-ink);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 26px;
  padding: 8px 0;
  cursor: pointer;
}
.btn-promocao:hover{
  border-color: var(--modal-accent);
}

/* Faixa de destaque nos cards de placar (Vitórias/Sequência/Recorde) — mesmo
   padrão do Letmaze (.stat-accent), não é uma classe do base.css. */
.stat-accent{
  position: relative;
  overflow: hidden;
}
.stat-accent::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent-ink);
}
/* .stat-accent tem overflow:hidden (pro ::before acima não vazar) — sem
   isto, um rótulo de uma palavra só mais larga que o card (ex.
   "SEQUÊNCIA" num card estreito) fica cortado em vez de quebrar linha. */
.stat-accent .stat-label{ overflow-wrap: anywhere; }

/* Linha divisória só faz sentido sob o status-badge (só #capturas-stat tem
   um) — escopado pra não somar altura extra nos cards vitórias/sequência/
   recorde (.top-stats), que não têm badge e devem ficar do mesmo tamanho
   que os equivalentes do Letmaze (ex.: #phase-indicator). */
#capturas-stat .stat-label{
  border-top: 1px dashed var(--border);
  padding-top: 4px;
}

#capturas-stat .status-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
  text-align: center;
  color: var(--accent-ink);
}

/* Gatilho da dica (nível 1 do treinador) — vive ao lado do texto do badge
   em vez de ser um botão à parte em .controls, pra não empurrar o resto da
   grid de controles pra cima/baixo toda vez que ele aparece/some conforme
   a vez do jogador muda. */
.status-badge-dica{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent-ink);
  cursor: pointer;
}
.status-badge-dica-icone{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}
.status-badge-dica-texto{
  font-size: 16px;
  text-decoration: underline;
}
.status-badge-dica:hover,
.status-badge-dica:focus-visible{
  opacity: 0.75;
}

/* ---- Capturas ---- */
.capturas-linha{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  min-height: 22px;
}
.capturas-quem{
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
}
.capturas-linha span[id^="capturas-"]{
  font-family: "ChessPieces";
  overflow-wrap: anywhere;
  text-align: right;
}

/* ---- Controles ---- */
.controls{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

/* ---- Modo treinador — nível 2 (lista) e nível 3 (feedback) ---- */
.treinador-lista{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.treinador-item{
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.treinador-item:hover{
  border-color: var(--accent-ink);
  background: var(--bg-panel);
}

.treinador-feedback{
  font-size: 13px;
  color: var(--modal-ink, inherit);
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-panel);
}

/* .btn-ghost de base.css usa o padding compacto de botão de modal — ao
   lado do card de #capturas-stat (padding generoso, cantos 6px), fica raso
   e destoante. Padding maior e o mesmo raio de canto do .stat deixam os
   controles com a mesma proporção "encorpada" do #btn-give-up do Letrix. */
.controls .btn{
  padding: 14px 8px;
  border-radius: 6px;
}

@media (min-width: 700px){
  .xadrez-peca{ font-size: var(--peca-tamanho, 34px); }
}

@media (max-width: 720px){
  /* Em mobile, vitórias/sequência/recorde (.top-stats) precisam ficar
     ACIMA do tabuleiro — mas são filhos de .side-panel, que no DOM vem
     DEPOIS de .board-column, então nenhum flex-direction/order dá pra
     puxar só eles pra cima sem também levar .side-rest (capturas/
     treinador/controles) junto. Mesma solução do Letrix (ver letrix.css):
     vira grid nomeado no .layout, e .side-panel/.board-column somem da
     árvore de caixas via display:contents — só os 3 itens-folha
     (.top-stats, .board-wrap, .side-rest) sobram como itens diretos do
     grid, cada um plugado na área certa. */
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas: "topstats" "board" "rest";
    gap: var(--mobile-grid-gap);
  }
  .side-panel{ display: contents; }
  .board-column{ display: contents; }

  /* No mobile as 3 casas viram uma linha só (desktop empilha 1 por linha,
     ver .top-stats acima) — .layout ocupa a largura cheia da viewport
     nesse breakpoint, com espaço de sobra pras 3 colunas. margin-bottom
     zerado porque a separação de .board-wrap agora vem do gap do grid
     acima, não do próprio .top-stats (que só tinha isso pra se separar
     de .side-rest quando os dois viviam dentro do mesmo .side-panel
     flex, ver regra base de .top-stats). gap também reduzido pra
     --mobile-grid-gap aqui — mesma densidade de Letrix/Letfall/Letmaze
     entre os cards de topo em mobile, em vez do gap:14px do desktop
     (pensado pra empilhamento vertical, não pra 3 colunas lado a lado). */
  .top-stats{
    grid-area: topstats;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mobile-grid-gap);
    margin-bottom: 0;
  }
  .top-stats .stat:nth-child(3){ grid-column: auto; }

  .board-wrap{ grid-area: board; }
  .side-rest{ grid-area: rest; }

  /* scroll-margin-top: usado pelo scrollIntoView() do toque no tabuleiro
     (ver game.js) — 4px de folga acima do #jogadas-stat em vez de colar na
     borda da viewport. */
  #jogadas-stat{ scroll-margin-top: 4px; }
}