/* =============================================================
   Tabuleiro 10x10 - estilo aplicado a partir do pacote 10x10-B
   Escopo: somente moldura, bordas e anotação/numeração do tabuleiro.
   Não altera o layout geral da página.
   ============================================================= */

:root{
  --gridN: 10;
}

/* Moldura plana no padrão do projeto 10x10-B */
.board-wrap{
  padding: var(--frameT) !important;
  background: var(--sqDark) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Remove canal/efeitos antigos da moldura, preservando apenas a borda limpa */
.board-wrap::before,
.board-wrap::after{
  content: none !important;
  display: none !important;
}

/* Borda interna do tabuleiro */
.board{
  border: 1px solid rgba(244,246,226,.82) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--sqLight) !important;
}

/* Compatibilidade: caso algum HTML antigo ainda tenha files/ranks, ocultar. */
.coords .files,
.coords .ranks{
  display: none !important;
}

/* Estrutura das quatro faixas de anotação/numeração */
.coords .edge{
  position: absolute;
  display: grid;
}

.coords .edge.top,
.coords .edge.bottom{
  left: var(--frameT);
  right: var(--frameT);
  height: var(--frameT);
  grid-template-columns: repeat(var(--gridN, 10), 1fr);
}

.coords .edge.top{ top: 0; }
.coords .edge.bottom{ bottom: 0; }

.coords .edge.left,
.coords .edge.right{
  top: var(--frameT);
  bottom: var(--frameT);
  width: var(--frameT);
  grid-template-rows: repeat(var(--gridN, 10), 1fr);
}

.coords .edge.left{ left: 0; }
.coords .edge.right{ right: 0; }

/* Acabamento fino da anotação/numeração */
.coords .edge div{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f2e1 !important;
  text-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(9px, calc(var(--frameT) * .36), 12px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
  transform: none !important;
}

.coords .edge.top div{
  align-items: center !important;
  padding-top: 0 !important;
  transform: translateY(1px) !important;
}
.coords .edge.bottom div{
  align-items: flex-end !important;
  padding-bottom: clamp(4px, calc(var(--frameT) * .20), 7px) !important;
}
.coords .edge.left div{
  justify-content: flex-start !important;
  padding-left: clamp(4px, calc(var(--frameT) * .18), 7px) !important;
}
.coords .edge.right div{
  justify-content: flex-end !important;
  padding-right: clamp(4px, calc(var(--frameT) * .18), 7px) !important;
}

@media (max-width: 560px){
  .coords .edge div{
    font-size: 9px !important;
    font-weight: 700 !important;
  }
  .coords .edge.top div{
    align-items: center !important;
    padding-top: 0 !important;
    transform: translateY(1px) !important;
  }
  .coords .edge.bottom div{ padding-bottom: 4px !important; }
  .coords .edge.left div{ padding-left: 4px !important; }
  .coords .edge.right div{ padding-right: 4px !important; }
}

/* Correção de contraste das listas/selects no tema claro e no Chrome/Windows. */
select,
select option,
#gameSelect,
#gameSelect option,
#gameSelectMobile,
#gameSelectMobile option,
#boardStyleSelect,
#boardStyleSelect option,
#playbackSpeed,
#playbackSpeed option{
  background: #ffffff !important;
  color: #111827 !important;
}