/* A mesa de damas: tabuleiro a esquerda, controles a direita. */

.moldura {
  position: relative;
  z-index: 1;
  max-width: 1420px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 400px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1080px) { .moldura { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- cabecalho */

.topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
}
.topo .logo { font-family: var(--titulo); font-weight: 900; font-size: 22px; letter-spacing: 0.16em; }
.topo .logo a { color: var(--apagado); text-decoration: none; }
.topo .logo a:hover { color: var(--ciano); }
.estado-jogo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titulo);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pisca { width: 9px; height: 9px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.pensando .pisca { background: var(--magenta); box-shadow: 0 0 14px var(--magenta); animation: pulsar 0.9s infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* ------------------------------------------------------------- tabuleiro */

.mesa { padding: 18px; }

.placar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--apagado);
}
.placar b { font-family: var(--titulo); font-size: 20px; }
.placar .voce b { color: var(--ciano); }
.placar .maquina b { color: var(--magenta); }
.placar .meio { flex: 1; text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

.tabuleiro-caixa {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(100vh - 250px));
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.55), rgba(255, 43, 214, 0.55));
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.18), 0 0 80px rgba(255, 43, 214, 0.12);
}
.tabuleiro {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 10px;
  overflow: hidden;
  background: #04050d;
}

.casa { position: relative; }
.casa.clara { background: rgba(140, 170, 220, 0.09); }
.casa.escura { background: linear-gradient(160deg, rgba(0, 60, 90, 0.55), rgba(60, 0, 50, 0.55)); }
.casa .numero {
  position: absolute;
  left: 5px;
  top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(216, 230, 255, 0.24);
  pointer-events: none;
}
.casa.origem { box-shadow: inset 0 0 0 2px var(--ciano), inset 0 0 22px rgba(0, 240, 255, 0.35); }
.casa.ultimo { box-shadow: inset 0 0 0 2px rgba(182, 255, 58, 0.55); }
.casa.dica { box-shadow: inset 0 0 0 2px var(--ambar), inset 0 0 26px rgba(255, 176, 58, 0.3); }

.casa .alvo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.casa .alvo::after {
  content: '';
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.8);
  animation: respirar 1.4s ease-in-out infinite;
}
.casa .alvo.come::after {
  width: 78%;
  height: 78%;
  background: transparent;
  border: 2px dashed var(--magenta);
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.5);
}
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.22); opacity: 0.55; } }

/* pecas em camada propria, para deslizarem de casa em casa */
.pecas { position: absolute; inset: 0; pointer-events: none; }
.peca {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s;
  pointer-events: auto;
  cursor: pointer;
}
.peca i {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  transition: transform 0.14s;
}
.peca.branca i {
  background: radial-gradient(circle at 36% 30%, #b6feff, #0fd6f2 45%, #036a86 78%, #012533);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.55), inset 0 -4px 10px rgba(0, 0, 0, 0.45), inset 0 4px 8px rgba(255, 255, 255, 0.25);
}
.peca.preta i {
  background: radial-gradient(circle at 36% 30%, #ffb4f0, #f025bc 45%, #7a0a5c 78%, #2b0020);
  box-shadow: 0 0 16px rgba(255, 43, 214, 0.5), inset 0 -4px 10px rgba(0, 0, 0, 0.5), inset 0 4px 8px rgba(255, 255, 255, 0.22);
}
.peca.dama i::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: coroa 2.2s ease-in-out infinite;
}
@keyframes coroa { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.peca.minha:hover i { transform: scale(1.06); }
.peca.selecionada i { box-shadow: 0 0 26px var(--ciano), inset 0 0 14px rgba(255, 255, 255, 0.4); }
.peca.aponta i {
  box-shadow: 0 0 0 3px var(--lima), 0 0 26px rgba(182, 255, 58, 0.8);
  animation: chamar 0.7s ease-in-out infinite;
}

.peca.obrigada i {
  box-shadow: 0 0 0 3px var(--ambar), 0 0 26px rgba(255, 176, 58, 0.75);
  animation: chamar 1.1s ease-in-out infinite;
}
@keyframes chamar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

.peca.morrendo { opacity: 0; transform: scale(0.3) rotate(45deg); }
.peca.condenada i { animation: tremer 0.24s linear infinite; box-shadow: 0 0 24px var(--magenta); }
@keyframes tremer { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }

/* ------------------------------------------------------------- painel */

.coluna { display: flex; flex-direction: column; gap: 16px; }
.bloco { padding: 16px 18px; }
.bloco h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); margin-bottom: 14px; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-botoes button { flex: 1; }

.cerebros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cerebros button { font-size: 11px; padding: 9px 6px; }
.cerebros button.ativo {
  color: #04050d;
  background: linear-gradient(180deg, var(--magenta), #b01695);
  border-color: var(--magenta);
  box-shadow: 0 0 20px rgba(255, 43, 214, 0.45);
}
.cerebros button:disabled { opacity: 0.3; }

.niveis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.niveis button { font-size: 11px; padding: 9px 6px; }
.niveis button.ativo {
  color: #04050d;
  background: linear-gradient(180deg, var(--ciano), #00a7bd);
  border-color: var(--ciano);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.45);
}
.nivel-descricao { font-size: 14px; color: var(--apagado); min-height: 40px; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pequeno { font-size: 13px; color: var(--apagado); font-family: var(--mono); }

.marcador { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--apagado); cursor: pointer; }
.marcador input { accent-color: var(--ciano); width: 16px; height: 16px; }

.diario { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.nota { border-left: 2px solid var(--borda); padding: 6px 0 6px 10px; font-size: 14px; }
.nota .cabeca { font-family: var(--titulo); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
.nota.eu { border-color: rgba(0, 240, 255, 0.5); }
.nota.eu .cabeca { color: var(--ciano); }
.nota.ela { border-color: rgba(255, 43, 214, 0.5); }
.nota.ela .cabeca { color: var(--magenta); }
.nota.aviso { border-color: var(--ambar); }
.nota.aviso .cabeca { color: var(--ambar); }
.nota .miudo { font-family: var(--mono); font-size: 11px; color: var(--apagado); margin-top: 4px; }
.nota pre { white-space: pre-wrap; font-family: var(--mono); font-size: 11px; color: var(--apagado); max-height: 150px; overflow-y: auto; margin: 6px 0 0; }

.conselho { border: 1px dashed rgba(255, 176, 58, 0.5); border-radius: 10px; padding: 12px; font-size: 15px; }
.conselho b { color: var(--ambar); font-family: var(--titulo); letter-spacing: 0.06em; }

/* ------------------------------------------------------------- modais */

.veu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background: rgba(2, 3, 10, 0.82);
  backdrop-filter: blur(6px);
}
.veu.aberto { display: grid; }
.veu .caixa { width: min(420px, 92vw); padding: 26px; text-align: center; }
.veu h2 { font-size: 26px; margin-bottom: 10px; }
.veu p { color: var(--apagado); margin: 0 0 18px; }