@font-face {
  font-family: "SeaFont";
  src: url("chessPieces/Seafont-FreeDemo-BF672cdea361ebd.otf") format("opentype");
}

body {
  /* O tabuleiro encolhe fluidamente conforme a largura E a altura da janela — nunca
     pode ultrapassar nenhuma das duas, porque a página não tem scroll (ver overflow abaixo) */
  --square-size: clamp(24px, min(9vw, 7vh), 84px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  background-color: #f4f4f4;
  overflow: hidden;
  position: relative;
}

#board-column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

#board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, var(--square-size));
  grid-template-rows: repeat(8, var(--square-size));
  border: 4px solid #004F70;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s ease;
}

#board.theme-hell {
  border-color: #ff5722;
}

.square {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  touch-action: none; /* impede o iOS/Android de fazer scroll, zoom ou "callout" ao tocar/arrastar */
  -webkit-touch-callout: none; /* impede o menu de "copiar/partilhar" do iOS ao segurar o dedo */
  -webkit-user-select: none;
  user-select: none;
}

#board {
  -webkit-user-select: none;
  user-select: none;
}

.square.selected {
  animation: selected-pulse 1s ease-in-out infinite;
}

.square.in-check {
  animation: check-pulse 1s ease-in-out infinite;
}

.square.just-captured {
  animation: capture-flash 0.5s ease-out;
}

.square.legal-move::after {
  content: "";
  width: calc(var(--square-size) * 0.36);
  height: calc(var(--square-size) * 0.36);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  position: absolute;
  animation: dot-in 0.2s ease-out;
}

.square.legal-move.capture-move::after {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 4px rgba(200, 30, 30, 0.75);
}

@keyframes selected-pulse {
  0%, 100% { box-shadow: inset 0 0 0 4px #ffd54f; }
  50% { box-shadow: inset 0 0 0 4px #fff3c4; }
}

@keyframes check-pulse {
  0%, 100% { box-shadow: inset 0 0 0 4px #d32f2f, inset 0 0 20px rgba(211, 47, 47, 0.7); }
  50% { box-shadow: inset 0 0 0 4px #ff6659, inset 0 0 32px rgba(211, 47, 47, 1); }
}

@keyframes capture-flash {
  0% { box-shadow: inset 0 0 0 8px rgba(211, 47, 47, 0.9); }
  100% { box-shadow: inset 0 0 0 0 rgba(211, 47, 47, 0); }
}

@keyframes dot-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes piece-pop {
  0% { opacity: 0.4; filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5)) brightness(1.8) saturate(1.4); }
  100% { opacity: 1; filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5)); }
}

.piece.just-moved {
  animation: piece-pop 0.35s ease-out;
}

.piece {
  --nudge-y: 0px; /* pequeno ajuste vertical fixo, por peça/tema */
  --slide-x: 0px; /* usados só durante a animação de deslize entre casas */
  --slide-y: 0px;
  width: 105%;  /* Ocupa a maior parte da casa, mas deixa uma margem bonitinha */
  height: 105%;
  object-fit: contain;
  user-select: none; /* Evita que o utilizador "arraste" a imagem por acidente */
  margin-bottom: calc(var(--square-size) * 0.18);
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5));
  pointer-events: none; /* O clique deve ir sempre para o quadrado por baixo, mesmo quando a peça transborda para o vizinho */
  transform: translate(var(--slide-x), var(--slide-y)) translateY(var(--nudge-y)) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.piece.sliding {
  transition: transform 0.25s ease;
}

.piece.drag-hidden {
  opacity: 0;
}

.square.draggable-piece {
  cursor: grab;
  touch-action: none; /* evita que o telemóvel faça scroll da página ao arrastar uma peça */
}

.drag-ghost {
  position: fixed;
  z-index: 50;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  cursor: grabbing;
  filter: drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.6));
}

/* Peões mais discretos */
.piece-pawn {
  width: 80%;
  height: 80%;
}

/* As imagens do tema Inferno são muito mais estreitas/altas que as do tema padrão
   (object-fit: contain encaixa pela altura), por isso cada peça precisa do seu próprio
   tamanho calibrado à proporção real do ficheiro, em vez de reaproveitar os valores do tema padrão */
#board.theme-hell .piece-pawn {
  width: 118%;
  height: 118%;
}

#board.theme-hell .piece-rook,
#board.theme-hell .piece-bishop {
  width: 165%;
  height: 165%;
}

#board.theme-hell .piece-horse {
  width: 155%;
  height: 155%;
}

#board.theme-hell .piece-queen {
  width: 190%;
  height: 190%;
}

#board.theme-hell .piece-king {
  width: 145%;
  height: 145%;
}

/* As peças do tema Inferno assentam mais para baixo na imagem, sobem um pouco mais */
#board.theme-hell .piece {
  --nudge-y: -16px;
}

#board.theme-hell .piece-queen {
  --nudge-y: -26px;
}

/* O rei tem uma caixa mais baixa que a rainha; o mesmo deslocamento fazia-o flutuar
   bem acima do "chão" onde as restantes peças da fileira assentam */
#board.theme-hell .piece-king {
  --nudge-y: -8px;
}

#board.theme-hell .piece-pawn {
  --nudge-y: -6px;
}

/* Torre, Cavalo e Bispo com mais presença */
.piece-rook,
.piece-horse,
.piece-bishop {
  width: 115%;
  height: 115%;
}

/* Rei e Rainha em destaque máximo */
.piece-queen,
.piece-king {
  width: 140%;
  height: 140%;
}

/* Peças importantes ligeiramente mais para cima */
img.piece-queen,
img.piece-king {
  --nudge-y: -8px;
}

.coord {
  position: absolute;
  font-family: "SeaFont", "Playfair Display", serif;
  font-size: calc(var(--square-size) * 0.226);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.coord-file {
  right: 4px;
  bottom: 2px;
}

.coord-rank {
  left: 4px;
  top: 2px;
}

.light .coord {
  color: #006994;
}

.dark .coord {
  color: #E6D8B1;
}

#board.theme-hell .light .coord {
  color: #ffab40;
}

#board.theme-hell .dark .coord {
  color: #ffe0b2;
}

/* Casas claras: textura de areia */
.light {
  background-color: #E6D8B1; /* Um bege areia quente (fallback) */
  background-image: url("chessPieces/sandTexture.jpg");
  background-size: cover;
  background-position: center;
}

/* Casas escuras: textura de água do mar */
.dark {
  background-color: #006994; /* Um azul marinho rico (fallback) */
  background-size: cover;
  background-position: center;
}

/* Tema alternativo "hell": pedra vulcânica (neutra) nas casas claras para contrastar
   com as peças vermelhas E as peças roxo-escuras; lava nas escuras */
#board.theme-hell .light {
  background-image: none;
  background-color: #34302c;
}

#board.theme-hell .dark {
  background-image: none;
  background-color: #7a1a05;
}

#right-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  width: min(210px, 90vw);
  flex-shrink: 0;
}

#turn-indicator {
  position: relative;
  z-index: 1;
  font-family: "SeaFont", "Playfair Display", serif;
  font-size: clamp(14px, 3vw, 24px);
  color: #E6D8B1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  white-space: normal;
  padding: clamp(8px, 2vw, 18px) clamp(10px, 3vw, 22px);
  width: min(210px, 90vw);
  text-align: center;
  box-sizing: content-box;
  border: 3px solid #004F70;
  border-radius: 10px;
  background-color: rgba(0, 79, 112, 0.35);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

#theme-toggle {
  font-family: "SeaFont", "Playfair Display", serif;
  font-size: clamp(11px, 2.2vw, 18px);
  letter-spacing: 1px;
  color: #E6D8B1;
  background-color: rgba(0, 79, 112, 0.35);
  border: 3px solid #004F70;
  border-radius: 10px;
  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 18px);
  width: min(210px, 90vw);
  box-sizing: border-box;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}

#theme-toggle:hover {
  transform: scale(1.03);
}

#theme-toggle.theme-hell {
  color: #ffd9a0;
  background-color: rgba(120, 20, 0, 0.45);
  border-color: #ff5722;
}

/* Faixas finas de peças capturadas, encostadas ao tabuleiro (como no chess.com):
   a peça fica do lado do jogador que a capturou, não do lado de quem a perdeu. */
.captured-row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: calc(var(--square-size) * 8 + 8px); /* mesma largura do tabuleiro (8 casas + borda) */
  min-height: calc(var(--square-size) * 0.5);
  padding: 4px 8px;
  box-sizing: border-box;
  border: 2px solid #004F70;
  border-radius: 8px;
  background-color: rgba(0, 79, 112, 0.35);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

#board-column.theme-hell .captured-row {
  border-color: #ff5722;
  background-color: rgba(120, 20, 0, 0.45);
}

.captured-icon {
  width: calc(var(--square-size) * 0.4);
  height: calc(var(--square-size) * 0.4);
  object-fit: contain;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
}

#turn-indicator.game-over {
  color: #ffd54f;
  background-color: rgba(0, 0, 0, 0.55);
  border-color: #ffd54f;
  animation: game-over-glow 1.4s ease-in-out infinite;
}

@keyframes game-over-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 213, 79, 0.5); }
  50% { box-shadow: 0 0 32px rgba(255, 213, 79, 0.9); }
}

#turn-indicator.turn-black {
  color: #223b49;
  background-color: rgba(230, 216, 177, 0.35);
}

/* Botão de ajuda ("?") com as regras do xadrez */
#help-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: "SeaFont", "Playfair Display", serif;
  font-size: 22px;
  color: #E6D8B1;
  background-color: rgba(0, 79, 112, 0.55);
  border: 3px solid #004F70;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}

#help-button:hover {
  transform: scale(1.08);
}

#help-button.theme-hell {
  color: #ffd9a0;
  background-color: rgba(120, 20, 0, 0.6);
  border-color: #ff5722;
}

#help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
}

#help-overlay.visible {
  display: flex;
}

#help-modal {
  position: relative;
  max-width: 520px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 32px;
  border: 3px solid #004F70;
  border-radius: 14px;
  background-color: #0b2e3d;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  color: #E6D8B1;
  font-family: "Lato", sans-serif;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

#help-modal.theme-hell {
  border-color: #ff5722;
  background-color: #2a0c04;
}

#help-modal h2 {
  margin-top: 0;
  font-family: "SeaFont", "Playfair Display", serif;
  font-size: 26px;
  letter-spacing: 1px;
}

#help-modal ul {
  padding-left: 20px;
  margin: 0 0 16px;
}

#help-modal li {
  margin-bottom: 10px;
  line-height: 1.4;
}

#help-modal p {
  line-height: 1.4;
  margin: 0;
}

#help-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #E6D8B1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Telemóvel: tabuleiro maior (aproveita o espaço libertado por esconder o botão de tema),
   indicador de turno mais discreto, e o botão de tema (ainda "in the works") fica escondido */
@media (max-width: 700px) {
  body {
    --square-size: clamp(30px, min(11.5vw, 9vh), 84px);
    gap: 10px;
    padding: 8px;
  }

  #theme-toggle {
    display: none;
  }

  #turn-indicator {
    font-size: clamp(11px, 3.2vw, 16px);
    padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2.5vw, 12px);
    border-width: 2px;
  }
}

#help-modal.theme-hell #help-close {
  color: #ffd9a0;
}