/* =====================================================
   public.css — VidaAstral
   CSS compartilhado por TODOS os jogos + home (Tarot, Mapa Astral,
   Signos, Sinastria). Contém só o que é 100% idêntico entre eles,
   extraído comparando os arquivos reais lado a lado:

     - fontes (@font-face Cinzel + Cormorant Garamond)
     - paleta de cores e tokens de fonte (--gold-*, --night-*,
       --font-titulo, --font-corpo) — base = tarot.css, que tinha o
       conjunto mais completo (inclui --gold-700 e --night-600)
     - reset global mínimo (box-sizing, scrollbar, :focus-visible)
     - fundo místico (.fundo-mistico) — um fundo só, compartilhado
       por todos os jogos + home, com estrelas geradas por
       /assets/fundo-mistico.js (também compartilhado)
     - cabeçalho padrão de tema (.tema-cabecalho) — o padrão pedido,
       copiado do tarot.css
     - menu hambúrguer flutuante (#menu-jogos-flutuante) — já estava
       byte-a-byte idêntico nos 4 arquivos, só consolidado aqui

   Carregar ESTE arquivo ANTES do CSS de cada jogo/da home.
   ===================================================== */

/* ---------- fontes auto-hospedadas ---------- */
@font-face{font-family:Cinzel;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/cinzel-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cinzel;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/cinzel-latin.woff2) format("woff2");unicode-range:U+00-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/cormorant-italic-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/cormorant-italic-latin.woff2) format("woff2");unicode-range:U+00-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cormorant-normal-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cormorant-normal-latin.woff2) format("woff2");unicode-range:U+00-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens (paleta e fontes) — base: tarot.css ---------- */
:root{
  --gold-100:#fdf6e0; --gold-200:#f7e7b4; --gold-300:#f0d688; --gold-400:#e6c163;
  --gold-500:#d4a942; --gold-600:#b8892b; --gold-700:#8f6a1e;
  --night-950:#07040f; --night-900:#0d0819; --night-800:#150d29; --night-700:#1f1440; --night-600:#2b1c5a;
  --font-titulo:'Cinzel', Georgia, serif;
  --font-corpo:'Cormorant Garamond', Georgia, serif;
}

/* ---------- reset global mínimo ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--night-950); }
button{ -webkit-tap-highlight-color:transparent; font:inherit; }
input, select{ font-family:inherit; }
a{ color:inherit; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--night-900); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold-600), #6b4f14); border-radius:8px; border:2px solid var(--night-900); }

:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; }

/* ---------- fundo místico ----------
   Um fundo só, compartilhado por TODOS os jogos + home. Gerado por
   /assets/fundo-mistico.js (estrelas) — a mandala já vem no HTML. */
.fundo-mistico{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--night-950); }
.fundo-mistico .bg-gradient{ position:absolute; inset:0; background: radial-gradient(ellipse at top, var(--night-700) 0%, var(--night-900) 45%, var(--night-950) 100%); }
.fundo-mistico .bg-orb{ position:absolute; border-radius:50%; filter: blur(64px); transition:background 1000ms; }
.fundo-mistico .bg-orb-1{ left:-160px; top:25%; width:576px; height:576px; background: radial-gradient(circle, rgba(230,193,99,0.16) 0%, transparent 65%); }
.fundo-mistico .bg-orb-2{ right:-192px; bottom:0; width:640px; height:640px; background: radial-gradient(circle, rgba(230,193,99,0.12) 0%, transparent 65%); }
.fundo-mistico .bg-orb-3{ left:50%; top:-160px; width:800px; height:480px; transform: translateX(-50%); background: radial-gradient(circle, rgba(230,193,99,0.10) 0%, transparent 65%); }
.fundo-mistico .star-dot{ position:absolute; border-radius:50%; background:var(--gold-100); animation-name: twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fundo-mistico .mandala-wrap{ position:absolute; left:50%; top:50%; width:140vmax; height:140vmax; transform: translate(-50%,-50%); opacity:0.05; }
.fundo-mistico .mandala-wrap svg{ width:100%; height:100%; animation: mandala-spin 40s linear infinite; }
.fundo-mistico .bg-vignette{ position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 55%, rgba(7,4,15,0.8) 100%); }
@keyframes twinkle{ 0%,100%{ opacity:0.15; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1.15); } }
@keyframes mandala-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .fundo-mistico .star-dot, .fundo-mistico .mandala-wrap svg { animation:none !important; } }

/* ---------- cabeçalho padrão de tema — usar em todos os jogos ---------- */
.tema-cabecalho{ text-align:center; }
.tema-cabecalho .eyebrow{ font-family:var(--font-titulo); font-size:0.7rem; letter-spacing:0.5em; text-transform:uppercase; color:rgba(230,193,99,0.8); margin:0; }
@media (min-width:640px){ .tema-cabecalho .eyebrow{ font-size:0.75rem; } }
.tema-cabecalho h1{ font-family:var(--font-titulo); font-weight:700; font-size:2.25rem; line-height:1.2; margin:0.75rem 0 0; }
@media (min-width:640px){ .tema-cabecalho h1{ font-size:3.75rem; } }
.tema-cabecalho .lead{ max-width:36rem; margin:1.25rem auto 0; font-family:var(--font-corpo); font-style:italic; font-size:1.125rem; line-height:1.6; color:rgba(253,246,224,0.75); }
@media (min-width:640px){ .tema-cabecalho .lead{ font-size:1.25rem; } }

/* ---------- divisor sol/lua — usar em todos os jogos ---------- */
.divisor-sol-lua{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:1rem; }
.divisor-sol-lua .filete{ height:1px; width:5rem; background:linear-gradient(to right, transparent, rgba(230,193,99,.45) 20%, rgba(230,193,99,.45) 80%, transparent); }
@media (min-width:640px){ .divisor-sol-lua .filete{ width:7rem; } }
.divisor-sol-lua .ponto{ width:.25rem; height:.25rem; border-radius:9999px; background:rgba(230,193,99,.7); }
.divisor-sol-lua .glifo{ display:inline-flex; color:rgba(230,193,99,.8); }

/* ---------- menu hambúrguer flutuante ---------- */
#menu-jogos-flutuante {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}

#btn-menu-jogos {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 100, 0.5);
  background: rgba(20, 15, 35, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

#btn-menu-jogos span {
  width: 18px;
  height: 2px;
  background: #d4af64;
  border-radius: 2px;
}

#painel-menu-jogos {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 200px;
  background: rgba(20, 15, 35, 0.95);
  border: 1px solid rgba(212, 175, 100, 0.4);
  border-radius: 10px;
  padding: 8px;
  display: none;
  flex-direction: column;
}

#painel-menu-jogos.aberto {
  display: flex;
}

.item-menu-jogos {
  color: #f0e6d2;
  text-decoration: none;
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: 0.5px;
  border-radius: 6px;
}

.item-menu-jogos:hover {
  background: rgba(212, 175, 100, 0.15);
}

.divisor-menu-jogos {
  height: 1px;
  background: rgba(212, 175, 100, 0.25);
  margin: 4px 0;
}

/* ---------- efeito de brilho dourado no texto ----------
   Aplicar a classe "brilho-texto" em qualquer span/elemento de texto
   (ex: dentro do h1 do .tema-cabecalho) pra ganhar o gradiente dourado
   deslizante — mesmo efeito usado no título do Tarot. Puro CSS, sem JS. */
.brilho-texto{
  background:linear-gradient(100deg, #b8892b 0%, #f7e7b4 25%, #e6c163 50%, #fdf6e0 70%, #b8892b 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:brilhar-texto 6s linear infinite;
}
@keyframes brilhar-texto{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }
@media (prefers-reduced-motion: reduce){ .brilho-texto{ animation:none; } }