/* Board rules — copied verbatim from mockups/tabuleiro-pecas.html */
#board{display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
  width:100%;height:100%;background:var(--board-bg,#e9dcc0)}
.cell{position:relative;display:flex;align-items:center;justify-content:center;background:var(--sq,#e9dcc0);
  cursor:pointer;outline:1px solid var(--grid,rgba(110,80,40,.28));outline-offset:-1px;-webkit-tap-highlight-color:transparent}
.cell.dark{background:var(--sq-dark,var(--sq))}
.sqart{position:absolute;inset:10%;opacity:.4;pointer-events:none;z-index:0}
.sqart svg,.sqart i{width:100%;height:100%;display:block}
.cell .dot{position:absolute;width:28%;height:28%;border-radius:50%;background:var(--dot,#5a5a5a);
  opacity:.30;z-index:2;pointer-events:none}
.cell.lastmove{box-shadow:inset 0 0 0 999px rgba(224,162,74,.28)}
.cell.sel{box-shadow:inset 0 0 0 4px var(--sel);background:rgba(224,162,74,.18)}
/* Rei ameaçado (a um lance da captura): anel vermelho pulsante na casa do rei. z-index acima
   da peça pra ler mesmo sob o rei; pulso desligado em "reduzir movimento". */
.cell.danger{background:rgba(220,58,52,.20)}
.cell.danger::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(220,58,52,.95);animation:king-danger 1.15s ease-in-out infinite}
@keyframes king-danger{0%,100%{box-shadow:inset 0 0 0 2px rgba(220,58,52,.5)}50%{box-shadow:inset 0 0 0 2px rgba(220,58,52,1)}}
/* Fim de partida (v136): a casa que conta a história pisca 3x enquanto o modal espera, e continua
   marcada depois (atrás do modal). Cor pela SORTE DO REI: vermelho = caiu; dourado = se safou. */
.cell.endmark::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  animation:end-strike .5s cubic-bezier(.22,.61,.36,1) 3 forwards}
.cell.end-lost::after{--end-c:220,58,52}
.cell.end-win::after{--end-c:224,162,74}
.cell.end-lost{background:rgba(220,58,52,.22)}
.cell.end-win{background:rgba(224,162,74,.22)}
/* anel de 2px (por dentro) + halo de até 4px (por fora, só no pulso) */
@keyframes end-strike{
  0%{box-shadow:inset 0 0 0 2px rgba(var(--end-c),0), 0 0 0 0 rgba(var(--end-c),.55)}
  35%{box-shadow:inset 0 0 0 2px rgba(var(--end-c),1), 0 0 0 4px rgba(var(--end-c),.28)}
  100%{box-shadow:inset 0 0 0 2px rgba(var(--end-c),.9), 0 0 0 0 rgba(var(--end-c),0)}
}
/* Camada invisível que segura o toque durante a espera: um toque pula direto para o modal. */
.end-hold{position:fixed;inset:0;z-index:60;background:transparent}
.piece{width:84%;height:84%;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  transition:transform .08s;user-select:none}
/* hover de casa: só realce de borda (pintura pura — nada de transform, que promovia camada
   e fazia o tabuleiro "tremer"/subir-descer no Chrome). Só no mouse p/ não grudar no toque. */
@media (hover:hover){.cell:hover{outline-color:var(--sel)}}
/* Modo Presencial: na vez do jogador do lado oposto, gira só os SÍMBOLOS 180° (tabuleiro/posições ficam parados). */
#board.flip-symbols .piece>*{transform:rotate(180deg)}
.disc{width:82%;height:82%;border-radius:50%;border:2px solid rgba(0,0,0,.45);display:flex;
  align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.disc svg{width:58%;height:58%;display:block}
.vk{width:92%;height:92%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.vk svg{width:100%;height:100%;display:block}
.vk img{width:100%;height:100%;object-fit:contain;display:block}
.sil{width:92%;height:92%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;filter:drop-shadow(0 0 .6px var(--pc-halo,rgba(0,0,0,.5))) drop-shadow(0 1px 1px rgba(0,0,0,.4))}

/* v09 — fantasma da peça capturada (fade-out) e respeito a "reduzir movimento" */
.piece.ghost{position:absolute;z-index:0;opacity:1;transition:opacity .18s ease, transform .18s ease;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .piece{transition:none}
  .piece.ghost{transition:none;display:none}
  .cell.danger::after{animation:none;box-shadow:inset 0 0 0 2px rgba(220,58,52,.95)}
  .cell.endmark::after{animation:none;box-shadow:inset 0 0 0 2px rgba(var(--end-c),.95)}
}

/* v10 — coordenadas dentro das casas de borda (estilo chess.com) */
.coord{position:absolute;font-size:10px;line-height:1;font-weight:600;color:var(--dot,#5a5a5a);opacity:.7;pointer-events:none;z-index:2;font-family:'Inter',sans-serif}
.coord.rank{top:2px;left:3px}
.coord.file{bottom:2px;right:3px}

/* v11 — overlay de seta (treinador) */
#board{position:relative}
.move-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}