:root {
  --cor-fundo: #0e1726;
  --cor-canvas: #2c3c59;
  --cor-drawer: #0b1220;
  --cor-texto: #eaf0ff;
  --cor-borda: #33456a;
  --cor-peca: #405682;
  --cor-peca-borda: #5b74a8;
  --era-elementos: #4aa3ff;
  --era-natureza: #45c26b;
  --era-vida: #ff8a5c;
  --era-tecnologia: #b57cff;
  --era-cultura: #ffd25c;
  --era-ficcao: #ff5c8a;
  --cor-orbe-ia: #c9a4ff; /* anel próprio do item inventado pela IA */
  --cor-orbe-nucleo: #0a0f1c; /* centro escuro comum a toda orbe */
  --cor-alem-mapa: #d9e6f5; /* platina/perolada fria — nunca o dourado de raridade/era/conclusão */
  /* fonte única do fundo cósmico full-screen (mesma arte da abertura do
     Álbum) — qualquer tela que precise dele referencia esta variável em vez
     de repetir o caminho do arquivo (ver .fundo-cosmico logo abaixo e a
     variante escurecida em styles/canvas.css). */
  --url-fundo-cosmico: url('../assets/album/fundo-cosmico.png');
}
/* utilitário: some visualmente, continua acessível a leitor de tela (mesmo
   padrão já usado em .barra-botao span, agora reutilizável) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  overflow: hidden;
}
#jogo { position: relative; height: 100%; display: flex; }
/* botões de barra e o "limpar" agora vivem em styles/barra.css */

/* ---- Fundo cósmico compartilhado: mesma arte full-screen usada na abertura
   do Álbum (assets/album/fundo-cosmico.png) — fonte única, sem duplicar em
   CSS por tela. Qualquer overlay de tela cheia que precise da mesma
   atmosfera de universo (Perfis hoje; Canvas possivelmente depois) usa esta
   classe em vez de recompor nebulosa/estrelas/orbe por conta própria. */
.fundo-cosmico {
  background-image: var(--url-fundo-cosmico);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Orbe: linguagem visual comum dos itens (substitui o card quadrado) ----
   Base discreta e neutra; cada contexto (canvas/gaveta/árvore/álbum) ajusta
   tamanho e intensidade do brilho por cima disso — ver respectivo styles/*.css.
   ~30% menos intensa que o protótipo aprovado, pra não virar "árvore de Natal"
   com muitos itens na tela ao mesmo tempo. */
.orbe {
  --cor-orbe: var(--cor-borda);
  position: relative;
  width: var(--orbe-tam, 44px);
  height: var(--orbe-tam, 44px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--cor-orbe) 28%, white 6%), transparent 55%),
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--cor-orbe) 20%, var(--cor-orbe-nucleo) 80%), var(--cor-orbe-nucleo) 84%);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--cor-orbe) 55%, transparent),
    0 0 8px 1px color-mix(in srgb, var(--cor-orbe) 24%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.orbe[data-era="elementos"]  { --cor-orbe: var(--era-elementos); }
.orbe[data-era="natureza"]   { --cor-orbe: var(--era-natureza); }
.orbe[data-era="vida"]       { --cor-orbe: var(--era-vida); }
.orbe[data-era="tecnologia"] { --cor-orbe: var(--era-tecnologia); }
.orbe[data-era="cultura"]    { --cor-orbe: var(--era-cultura); }
.orbe[data-era="ficcao"]     { --cor-orbe: var(--era-ficcao); }
/* faixa/coleção paralela "Inventadas com IA": identidade violeta/galáxia
   própria, nunca a cor da era herdada internamente pra raridade */
.orbe[data-era="ia"]         { --cor-orbe: var(--cor-orbe-ia); }

/* anel violeta discreto do item inventado pela IA — some com o anel de era */
.orbe[data-fonte="ia"] {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--cor-orbe) 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--cor-orbe-ia) 65%, transparent),
    0 0 9px 1px color-mix(in srgb, var(--cor-orbe-ia) 35%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
}

/* "Além do mapa": item curado que chegou ao fim da árvore (calculado em
   src/engine/alemDoMapa.js). Borda platina/perolada fria — nunca o dourado
   usado em descoberta/raridade lendária/era completa, pra não confundir os
   dois significados. Reflexo é ocasional (ciclo longo), não uma pulsação
   contínua; o símbolo (∞) nunca é a única pista — o texto acessível vem à
   parte (ver .sr-only ao lado de cada uso). */
.orbe[data-alem="mapa"] {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--cor-alem-mapa) 75%, transparent),
    0 0 10px 1px color-mix(in srgb, var(--cor-alem-mapa) 30%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
  animation: alem-mapa-reflexo 7s ease-in-out infinite;
}
.orbe[data-alem="mapa"]::after {
  content: "∞";
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 9px;
  line-height: 1;
  color: var(--cor-alem-mapa);
  text-shadow: 0 0 4px color-mix(in srgb, var(--cor-alem-mapa) 70%, transparent);
}
@keyframes alem-mapa-reflexo {
  0%, 88%, 100% { filter: brightness(1); }
  93% { filter: brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .orbe[data-alem="mapa"] { animation: none; }
}