:root {
  --bg: #0f1115;
  --panel: #171a21;
  --text: #e8e8e8;
  --muted: #9aa0a6;
  --accent: #4fc3f7;
  --square-light: #e0cfa9; /* mais contraste com peças brancas */
  --square-dark: #769656;
  --square-size: 80px; /* tamanho fixo de cada casa (desktop) */
}

/* Tema Clássico */
body.theme-classic {
  --square-light: #f0d9b5 !important;
  --square-dark: #b58863 !important;
}

/* Tema Moderno */
body.theme-modern {
  --square-light: #e8e8e8 !important;
  --square-dark: #4a90e2 !important;
}

/* Tema Madeira */
body.theme-wood {
  --square-light: #d2b48c !important;
  --square-dark: #8b4513 !important;
}

/* Tema Mármore */
body.theme-marble {
  --square-light: #f5f5f5 !important;
  --square-dark: #708090 !important;
}

/* Tema Floresta */
body.theme-forest {
  --square-light: #90ee90 !important;
  --square-dark: #228b22 !important;
}

/* Tema Oceano */
body.theme-ocean {
  --square-light: #87ceeb !important;
  --square-dark: #006994 !important;
}

/* Tema Pôr do Sol */
body.theme-sunset {
  --square-light: #ffd700 !important;
  --square-dark: #ff6347 !important;
}

/* Tema Real */
body.theme-royal {
  --square-light: #ffd700 !important;
  --square-dark: #8b0000 !important;
}

/* Tema Neon */
body.theme-neon {
  --square-light: #00ff00 !important;
  --square-dark: #ff00ff !important;
}

/* Tema Vintage */
body.theme-vintage {
  --square-light: #f4e4bc !important;
  --square-dark: #8b4513 !important;
}

/* Tema Ártico */
body.theme-arctic {
  --square-light: #f0f8ff !important;
  --square-dark: #4682b4 !important;
}

/* Tema Cósmico */
body.theme-cosmic {
  --square-light: #e6e6fa !important;
  --square-dark: #4b0082 !important;
}

/* Tema Branco/Verde */
body.theme-white-green {
  --square-light: #ffffff !important;
  --square-dark: #228b22 !important;
}

/* Tema Escuro */
body.theme-dark {
  --square-light: #404040 !important;
  --square-dark: #1a1a1a !important;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

/* Indicador de pensando no topo */
.thinking-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  text-align: center;
  font-weight: 600;
}

.thinking-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.thinking-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.app { display: flex; flex-direction: column; min-height: 100vh; }

.toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid #20232b;
}
.toolbar .group { display: flex; gap: 8px; align-items: center; }
.toolbar select, .toolbar button {
  background: #1f2430;
  color: var(--text);
  border: 1px solid #2b3140;
  padding: 6px 10px;
  border-radius: 6px;
}
.toolbar button { cursor: pointer; }

.main {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 12px;
  padding: 12px;
  flex: 1;
  min-height: 0;
}

.side {
  background: var(--panel);
  border: 1px solid #20232b;
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
}
.side h3 { margin: 4px 0 8px; font-weight: 600; }
.muted { color: var(--muted); }

.board-wrap { display: grid; place-items: center; }

/* Container do tabuleiro com notações */
.chess-container {
  position: relative;
  display: inline-block;
}

.board {
  width: calc(var(--square-size) * 8);
  height: calc(var(--square-size) * 8);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid #2b3140;
  position: relative;
}

.square { 
  display: grid; 
  place-items: center; 
  font-size: 48px; 
  user-select: none;
  box-sizing: border-box;
  position: relative;
}
.light { background: var(--square-light); color: #222; }
.dark { background: var(--square-dark); }

.square.highlight { box-shadow: inset 0 0 0 4px rgba(79,195,247,0.55); }
.square.move-src { 
  box-shadow: inset 0 0 0 4px #ffca28;
  border: 2px solid #ffca28;
}
.square.move-dst { 
  box-shadow: inset 0 0 0 4px #29b6f6;
  border: 2px solid #29b6f6;
}
.square.in-check { box-shadow: inset 0 0 0 4px rgba(244,67,54,0.85); }

/* Notações ao redor do tabuleiro */
.notations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.letters {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 25px;
}

.numbers {
  position: absolute;
  top: 0;
  left: -30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 25px;
}

.letters span, .numbers span {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* Indicador de máquina calculando */
.calculating {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 10;
}

/* Bloqueio de interação durante cálculo da máquina */
.board.calculating {
  pointer-events: none;
}

.moves-list { 
  margin: 0; 
  padding-left: 18px; 
  max-height: 300px; 
  overflow-y: auto; 
  overflow-x: hidden;
}

/* Estilização da barra de rolagem para movimentos */
.moves-list::-webkit-scrollbar {
  width: 6px;
}

.moves-list::-webkit-scrollbar-track {
  background: var(--panel);
  border-radius: 3px;
}

.moves-list::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

.moves-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
.status { font-size: 14px; color: var(--muted); }

@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; }
  .side.moves { order: 3; }
  .side { max-height: 220px; }
  .moves-list { max-height: 150px; }
  :root { --square-size: 44px; }
  .piece-image { width: 85%; height: 85%; }
}

/* Imagens das peças */
.piece-image {
  width: 80%;
  height: 80%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Modal de promoção */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--panel); border: 1px solid #2b3140; border-radius: 10px; padding: 14px; min-width: 260px; }
.modal h4 { margin: 0 0 10px; }
.promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promo-btn { padding: 10px; background: #1f2430; color: var(--text); border: 1px solid #2b3140; border-radius: 8px; cursor: pointer; font-size: 18px; }
.promo-btn:hover { background: #263042; }