/*
 * 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 Letris/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).
 */

/* .layout vem de shared/base.css como flex genérico; aqui viramos grid pra
   poder mover só os 3 stats de topo (vitórias/sequência/recorde, agora em
   .top-stats) pra cima do tabuleiro no mobile, sem levar capturas/controles
   junto (esses ficam em .side-panel, que continua abaixo do tabuleiro). */
.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);
  /* auto 1fr (mesmo padrão do Letmaze, ver letmaze.css) — sem isso as 2
     linhas ficam "auto auto" implícitas e dividem a sobra de altura que
     "board" (span nas 2 linhas, bem mais alto que topstats+siderest juntos)
     força no grid, empurrando .side-panel (id="capturas-stat") pra baixo
     com um vão vazio entre RECORDE e capturas. Com a linha do topstats
     travada em "auto" (tamanho do conteúdo) e a do siderest em "1fr", toda
     a sobra vai pro .side-panel (que tem mais conteúdo pra absorver o
     espaço sem deixar vão no meio). */
  grid-template-rows: auto 1fr;
  grid-template-areas: "board topstats" "board siderest";
  row-gap: 14px;
  column-gap: 20px;
}

.board-column{
  grid-area: board;
}

/* 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 a área topstats agora tem a largura estreita do side-panel
   (180-200px, ver .layout acima) — 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
   vira 1 linha só com as 3 casas (ver media query no fim do arquivo, onde
   topstats ocupa a largura cheia da viewport). */
.top-stats{
  grid-area: topstats;
  display: grid;
  grid-template-columns: 1fr;
  /* align-content:start evita o esticamento vertical que deixava os cards
     mais altos que os equivalentes do Letmaze/Letrix/Letris: .top-stats é
     item de .layout (grid), que espalha na área "topstats" o mesmo tanto
     de altura que "board" ocupa nas 2 linhas (tabuleiro é bem mais alto que
     3 cards empilhados) — align-content:normal (padrão do grid) se
     comporta como stretch e distribui essa sobra entre as linhas internas,
     inflando cada card. Sem isso aqui, as linhas ficam do tamanho natural
     do conteúdo e a sobra vira espaço vazio abaixo, igual ao comportamento
     de flex (usado pelo .top-stats do Letmaze/Letrix, que não sofre disso). */
  align-content: start;
  gap: 14px;
}

.side-panel{
  grid-area: siderest;
}

.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;
}

.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));
}

: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;
}

.xadrez-peca{
  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) ---- */
.dificuldade-grupo{
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 4px 0 16px;
}

.chip-dificuldade{
  flex: 1;
  border: 1px solid var(--muted);
  color: var(--modal-ink);
  background: transparent;
  padding: 8px 4px;
  font: inherit;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
}

.chip-dificuldade.selecionado{
  background: var(--modal-accent);
  border-color: var(--modal-accent);
  color: var(--modal-accent-text);
  font-weight: bold;
}

/* ---- 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: 8px;
  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; }

#capturas-stat .status-badge{
  display: inline-block;
  margin-bottom: 6px;
  text-align: center;
}

/* ---- 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-"]{
  overflow-wrap: anywhere;
  text-align: right;
}

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

/* .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){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas: "topstats" "board" "siderest";
  }
  /* No mobile as 3 casas viram uma linha só (desktop empilha 1 por linha,
     ver .top-stats acima). scroll-margin-top: usado pelo
     scrollIntoView() do toque no tabuleiro (ver game.js) — 4px de folga
     acima do bloco em vez de colar na borda da viewport. */
  .top-stats{ grid-template-columns: repeat(3, 1fr); scroll-margin-top: 4px; }
  .top-stats .stat:nth-child(3){ grid-column: auto; }
}