/* ==========================================================================
   base.css — reset, tipografia, animações e o cenário cósmico (fundo)
   Usado pelas duas páginas: index.html e admin.html
   ========================================================================== */

:root {
  --dourado: #E8CE8E;
  --dourado-claro: #F6E7BC;
  --dourado-escuro: #C79E4E;
  --creme: #FBF3E4;
  --creme-suave: #F1E3C0;
  --texto: #EDE4F2;
  --rosa: #FF3FBE;
  --rosa-claro: #FF9BD9;
  --verde: #7A8C2B;
  --roxo-fundo: #150723;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Karla, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--roxo-fundo); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--dourado); text-decoration: none; }
a:hover { color: var(--dourado-claro); }

/* --------------------------------------------------------------------------
   Animações
   -------------------------------------------------------------------------- */
@keyframes drift {
  0%   { transform: translate3d(0,0,0) rotate(var(--r,0deg)); }
  50%  { transform: translate3d(0,-18px,0) rotate(var(--r,0deg)); }
  100% { transform: translate3d(0,0,0) rotate(var(--r,0deg)); }
}
@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes haze {
  0%   { transform: translate3d(-3%,0,0) scale(1); }
  50%  { transform: translate3d(3%,-2%,0) scale(1.08); }
  100% { transform: translate3d(-3%,0,0) scale(1); }
}
@keyframes spinX { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes swirl {
  0%   { transform: translate3d(0,0,0) scale(1.04) rotate(0deg); }
  25%  { transform: translate3d(5%,-3.5%,0) scale(1.14) rotate(5deg); }
  50%  { transform: translate3d(-3%,3%,0) scale(1.08) rotate(-4deg); }
  75%  { transform: translate3d(3.5%,2%,0) scale(1.16) rotate(3deg); }
  100% { transform: translate3d(0,0,0) scale(1.04) rotate(0deg); }
}
@keyframes poeira {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1.06); }
  50%  { transform: translate3d(-4%,-4%,0) rotate(-6deg) scale(1.2); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1.06); }
}
@keyframes brilhoEstrelas { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes flip {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(540deg) scale(1.06); }
  100% { transform: rotateY(1080deg) scale(1); }
}
@keyframes breatheX {
  0%,100% { opacity: .9; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;  transform: translateX(-50%) scale(1.03); }
}
@keyframes breathe {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.04); }
}
@keyframes floatStars {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-26px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* --------------------------------------------------------------------------
   Cenário: camadas de fundo (fumaças, brilhos, lua, estrelas, cantos)
   O JavaScript (js/cenario.js) cria os elementos com estas classes.
   -------------------------------------------------------------------------- */
.cenario {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cenario--fixo { position: fixed; }

.fumaca {
  position: absolute;
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 70%, transparent 90%);
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 70%, transparent 90%);
}
.fumaca--violeta { background-image: url('../assets/fumaca-violeta.png'); }
.fumaca--magenta { background-image: url('../assets/fumaca-magenta.png'); }
.fumaca--quente { filter: saturate(1.05) brightness(1.02) blur(4px); }
.fumaca--fria   { filter: hue-rotate(196deg) saturate(.85) brightness(1.02) blur(5px); }

.brilho { position: absolute; }

.lua {
  position: absolute;
  left: 50%;
  top: clamp(58px, 8.5vw, 150px);
  width: clamp(215px, 25vw, 330px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background-image: url('../assets/lua-hd.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(1.06) contrast(1.06) saturate(1.05);
  animation: breatheX 16s ease-in-out infinite;
}
.lua-halo {
  position: absolute;
  left: 50%;
  top: clamp(150px, 20vw, 300px);
  width: min(720px, 96vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(246,231,188,.10) 0%, rgba(246,231,188,0) 70%);
  filter: blur(20px);
}

.estrelas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 190vh;
  animation: floatStars 34s ease-in-out infinite, brilhoEstrelas 9s ease-in-out infinite;
  background-image:
    radial-gradient(2.6px 2.6px at 7% 12%, rgba(246,231,188,.95), transparent),
    radial-gradient(2px 2px at 18% 30%, rgba(246,231,188,.7), transparent),
    radial-gradient(2.6px 2.6px at 27% 6%, rgba(255,232,241,.8), transparent),
    radial-gradient(2px 2px at 38% 19%, rgba(246,231,188,.6), transparent),
    radial-gradient(3.2px 3.2px at 47% 9%, rgba(246,231,188,.9), transparent),
    radial-gradient(2px 2px at 58% 24%, rgba(246,231,188,.65), transparent),
    radial-gradient(2.6px 2.6px at 69% 5%, rgba(255,232,241,.75), transparent),
    radial-gradient(2px 2px at 78% 17%, rgba(246,231,188,.6), transparent),
    radial-gradient(3.2px 3.2px at 88% 27%, rgba(246,231,188,.85), transparent),
    radial-gradient(2px 2px at 95% 8%, rgba(246,231,188,.6), transparent),
    radial-gradient(2.6px 2.6px at 5% 41%, rgba(246,231,188,.8), transparent),
    radial-gradient(2px 2px at 15% 53%, rgba(246,231,188,.55), transparent),
    radial-gradient(2.6px 2.6px at 33% 47%, rgba(255,232,241,.6), transparent),
    radial-gradient(2px 2px at 62% 44%, rgba(246,231,188,.6), transparent),
    radial-gradient(3.2px 3.2px at 84% 49%, rgba(246,231,188,.8), transparent),
    radial-gradient(2.6px 2.6px at 93% 60%, rgba(246,231,188,.7), transparent),
    radial-gradient(2px 2px at 11% 68%, rgba(246,231,188,.5), transparent),
    radial-gradient(2.6px 2.6px at 44% 74%, rgba(255,232,241,.55), transparent),
    radial-gradient(2px 2px at 73% 82%, rgba(246,231,188,.5), transparent),
    radial-gradient(2.6px 2.6px at 24% 88%, rgba(246,231,188,.6), transparent);
}
.estrelas--lenta {
  height: 200vh;
  opacity: .95;
  animation: floatStars 52s ease-in-out infinite reverse;
  background-image:
    radial-gradient(3.4px 3.4px at 12% 22%, rgba(255,248,224,1), transparent),
    radial-gradient(2.4px 2.4px at 31% 37%, rgba(246,231,188,.9), transparent),
    radial-gradient(3px 3px at 52% 29%, rgba(255,232,241,.95), transparent),
    radial-gradient(2.4px 2.4px at 66% 41%, rgba(246,231,188,.85), transparent),
    radial-gradient(3.4px 3.4px at 81% 33%, rgba(255,248,224,.95), transparent),
    radial-gradient(2.4px 2.4px at 9% 56%, rgba(246,231,188,.85), transparent),
    radial-gradient(3px 3px at 28% 64%, rgba(255,232,241,.9), transparent),
    radial-gradient(2.4px 2.4px at 57% 58%, rgba(246,231,188,.8), transparent),
    radial-gradient(3.4px 3.4px at 77% 69%, rgba(255,248,224,.9), transparent),
    radial-gradient(2.4px 2.4px at 92% 78%, rgba(246,231,188,.85), transparent),
    radial-gradient(3px 3px at 18% 84%, rgba(255,232,241,.85), transparent),
    radial-gradient(2.4px 2.4px at 47% 91%, rgba(246,231,188,.8), transparent),
    radial-gradient(3.4px 3.4px at 68% 95%, rgba(255,248,224,.9), transparent);
}

/* Molduras douradas nos quatro cantos */
.canto {
  position: absolute;
  width: clamp(60px, 9vw, 120px);
  aspect-ratio: 1;
}
.canto--se { left: 3%; top: 3%;    border-top: 1px solid rgba(216,183,106,.5); border-left: 1px solid rgba(216,183,106,.5); border-top-left-radius: 26px; }
.canto--sd { right: 3%; top: 3%;   border-top: 1px solid rgba(216,183,106,.5); border-right: 1px solid rgba(216,183,106,.5); border-top-right-radius: 26px; }
.canto--ie { left: 3%; bottom: 3%; border-bottom: 1px solid rgba(216,183,106,.4); border-left: 1px solid rgba(216,183,106,.4); border-bottom-left-radius: 26px; }
.canto--id { right: 3%; bottom: 3%;border-bottom: 1px solid rgba(216,183,106,.4); border-right: 1px solid rgba(216,183,106,.4); border-bottom-right-radius: 26px; }

/* Roda astrológica no rodapé do cenário */
.roda {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: clamp(170px, 22vw, 290px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(232,206,142,.9) 0deg 1deg, rgba(232,206,142,0) 1deg 15deg);
  mask-image: radial-gradient(circle, #000 0 46%, transparent 47%);
  -webkit-mask-image: radial-gradient(circle, #000 0 46%, transparent 47%);
  opacity: .5;
  animation: spinX 420s linear infinite;
}
.roda-centro {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: clamp(170px, 22vw, 290px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.roda-centro > div {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(216,183,106,.8);
  background: radial-gradient(60% 60% at 40% 34%, #C55CFF 0%, #7A1FE0 55%, #3B0A70 100%);
  box-shadow: 0 0 26px rgba(160,60,255,.6);
}

/* Naipes e faíscas decorativas */
.naipe-solto { position: absolute; text-shadow: 0 0 18px rgba(246,231,188,.35); }
.faisca { position: absolute; animation: twinkle 10s ease-in-out infinite; }
.ponto { position: absolute; border-radius: 50%; background: var(--dourado-claro); animation: twinkle 7s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Cartas arrastáveis
   -------------------------------------------------------------------------- */
.carta {
  position: absolute;
  width: clamp(88px, 12vw, 160px);
  aspect-ratio: .66;
  z-index: 25;
  pointer-events: auto;
}
.carta-face {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  border: 1px solid rgba(216,183,106,.6);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(60,16,104,.3) 0%, rgba(12,1,22,.36) 100%);
  backdrop-filter: blur(3px);
  transform-style: preserve-3d;
}
.carta-face:hover {
  box-shadow: 0 0 64px rgba(216,183,106,.5);
  border-color: rgba(216,183,106,.9);
}
.carta-face.girando { animation: flip 1150ms cubic-bezier(.35,.05,.25,1); }
.carta-moldura { position: absolute; inset: 6px; border: 1px solid rgba(216,183,106,.3); border-radius: 8px; }
.carta-letra {
  position: absolute;
  top: 8px;
  left: 11px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.6vw, 20px);
  color: var(--dourado);
}
.carta-naipe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: clamp(26px, 3.6vw, 48px);
  text-shadow: 0 0 22px rgba(246,231,188,.45);
}
.carta-naipe--dir { justify-content: flex-end; padding-right: 14px; }
.carta-naipe--esq { justify-content: flex-start; padding-left: 14px; }

/* --------------------------------------------------------------------------
   Botões e campos reaproveitados nas duas páginas
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(216,183,106,.45);
  background: transparent;
  color: var(--creme-suave);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
}
.btn:hover { background: rgba(216,183,106,.14); border-color: rgba(216,183,106,.8); color: var(--creme); }

.btn--ouro {
  border: none;
  background: linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
  color: #24102F;
  font-weight: 600;
  box-shadow: 0 14px 34px -14px rgba(216,183,106,.75);
}
.btn--ouro:hover { background: linear-gradient(135deg, var(--dourado-claro), #D6B269); color: #24102F; }

.btn--perigo { border-color: rgba(255,63,190,.4); color: var(--rosa-claro); }
.btn--perigo:hover { background: rgba(255,63,190,.1); border-color: rgba(255,63,190,.7); color: var(--rosa-claro); }

.btn--pequeno { min-height: 44px; padding: 12px 20px; font-size: 13px; letter-spacing: .08em; }

.campo {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(216,183,106,.28);
  background: rgba(8,2,16,.6);
  color: var(--creme-suave);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}
.campo:focus { outline: none; border-color: rgba(216,183,106,.75); }
textarea.campo { resize: vertical; }

.rotulo { display: grid; gap: 7px; }
.rotulo > span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(237,228,242,.5);
}