/* fundo do Canvas: mesmo universo do Álbum/Perfis (.fundo-cosmico, ver
   styles/base.css), só que numa variante bem discreta — escurecida,
   dessaturada e com um véu azul-marinho por cima, pra não competir com
   orbes/nós/linhas. Fica num ::before só decorativo (nunca um filho de
   verdade), então o `filter` que escurece a foto nunca alcança as peças
   reais, que continuam pintadas por cima, com cor plena. */
.canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--cor-canvas); /* segue como base sólida antes da imagem decodificar */
  touch-action: none;
}
.canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 13, 26, 0.4), rgba(6, 9, 20, 0.62)),
    var(--url-fundo-cosmico) center / cover no-repeat;
  filter: saturate(0.5) brightness(0.4) contrast(0.94);
  pointer-events: none;
}
.canvas-mundo { position: absolute; inset: 0; transform-origin: 0 0; }

/* a peça virou só um wrapper: quem carrega o visual agora é a .orbe dentro dela */
.peca {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: grab;
  user-select: none;
}
.peca .peca-nome {
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); /* legibilidade sobre o fundo cósmico, sem pílula atrás */
}
.peca.arrastando { cursor: grabbing; }

/* orbe do tabuleiro: a mais viva das quatro — é a peça "pegável" */
.orbe-canvas {
  --orbe-tam: 52px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cor-orbe) 65%, transparent),
    0 0 14px 2px color-mix(in srgb, var(--cor-orbe) 38%, transparent),
    inset 0 0 8px rgba(0, 0, 0, 0.35);
}
.orbe-canvas .peca-icone { font-size: 26px; line-height: 1; animation: icone-bob 4s ease-in-out infinite alternate; }

/* varia o compasso pra não pulsarem em uníssono */
.canvas-mundo > .peca:nth-of-type(3n) .peca-icone { animation-delay: -1.3s; }
.canvas-mundo > .peca:nth-of-type(3n+1) .peca-icone { animation-delay: -2.6s; }

@keyframes icone-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-2px); }
}

/* segurando pra arrastar: a orbe "acende" um pouco mais, sente que foi pega */
.peca.arrastando .orbe-canvas {
  transform: scale(1.08);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cor-orbe) 80%, transparent),
    0 0 20px 4px color-mix(in srgb, var(--cor-orbe) 55%, transparent),
    inset 0 0 8px rgba(0, 0, 0, 0.35);
}

/* aviso acessível de "nada aconteceu": lido por leitor de tela, invisível na tela */
.canvas-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* toast visível e lúdico quando a combinação/geração não pôde acontecer.
   Não bloqueia o jogo (fora um toque nele = tentar de novo), some sozinho e
   nunca empurra o layout (position: absolute dentro do canvas). */
.canvas-toast {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 7;
  max-width: min(320px, calc(100vw - 28px));
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.96);
  border: 1px solid var(--cor-peca-borda);
  color: var(--cor-texto);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: canvas-toast-entra 180ms ease;
}
.canvas-toast[hidden] { display: none; }
@keyframes canvas-toast-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .canvas-toast { animation: none; } }

/* resultado de fusão: a orbe pulsa um flash de luz quente */
.peca.surgindo { animation: peca-surgindo 320ms ease-out; }
@keyframes peca-surgindo {
  0%   { transform: scale(0.4); opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.peca.surgindo .orbe-canvas { animation: orbe-flash-fusao 320ms ease-out; }
@keyframes orbe-flash-fusao {
  0%   { box-shadow: 0 0 0 2px rgba(255, 236, 160, 0), 0 0 0 0 rgba(255, 236, 160, 0), inset 0 0 8px rgba(0,0,0,0.35); }
  55%  { box-shadow: 0 0 0 2px rgba(255, 236, 160, 0.9), 0 0 26px 8px rgba(255, 236, 160, 0.7), inset 0 0 8px rgba(0,0,0,0.35); }
  100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-orbe) 65%, transparent), 0 0 14px 2px color-mix(in srgb, var(--cor-orbe) 38%, transparent), inset 0 0 8px rgba(0,0,0,0.35); }
}

/* fusão sem resultado: quique de volta ao lugar */
.peca.quique { animation: peca-quique 260ms ease-in-out; }
@keyframes peca-quique {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-6px) scale(1.06); }
  60%      { transform: translateY(2px) scale(0.97); }
}

/* espera de combinação (normalmente = consultando a IA): o mascote "pensando"
   real, com um anel sutil de carregamento ao redor — comunica "processando"
   sem ser só um spinner genérico. */
.peca-pensando {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--era-cultura) 55%, transparent);
  border-top-color: var(--era-cultura);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: peca-pensando-gira 1.1s linear infinite;
}
.peca-pensando img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  animation: peca-pensando-gira 1.1s linear infinite reverse;
}
.peca-pensando-texto {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 160px;
  text-align: center;
  font-size: 11px;
  color: #cdd8f5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
@keyframes peca-pensando-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .peca.surgindo, .peca.quique, .peca.surgindo .orbe-canvas { animation: none; }
  .peca-pensando, .peca-pensando img { animation: none; }
  .orbe-canvas .peca-icone { animation: none; }
}