/* Eventos do calendario (temas.js) e brincadeiras sorteadas na tela (traquinagens.js).
   Nada aqui recebe clique. */

.mascote { overflow: visible; }

/* ---------- Fundo com as cores do evento ---------- */
.tema-aurora .aurora i:nth-child(1) { background: radial-gradient(closest-side, var(--aurora-1), transparent); }
.tema-aurora .aurora i:nth-child(2) { background: radial-gradient(closest-side, var(--aurora-2), transparent); }
.tema-aurora .aurora i:nth-child(3) { background: radial-gradient(closest-side, var(--aurora-3), transparent); }

/* ---------- Varal pendurado embaixo do topo do site ---------- */
.tema-varal {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 30px;
  overflow: hidden;
  pointer-events: none;
}
.tema-varal svg { position: absolute; inset: 0; display: block; }
.tema-varal-pisca { animation: temaPisca 1.3s steps(2, jump-none) infinite alternate; }
@keyframes temaPisca {
  from { opacity: 0; }
  to { opacity: 1; }
}
.is-nav-open .tema-varal, body:has(#page-admin:not([hidden])) .tema-varal { display: none; }

/* ---------- Aviso do evento no topo da home ---------- */
.tema-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 36px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tema-fundo, #2f67c7);
  color: var(--tema-texto, #fff);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 18px rgba(20, 10, 50, 0.2);
}
.tema-aviso-icone { flex: 0 0 auto; width: 22px; }
.tema-aviso-icone svg { display: block; width: 100%; height: auto; }
html[data-tema="halloween"] .tema-aviso-icone path,
html[data-tema="halloween"] .tema-casa path[fill="#231c30"] { fill: #ffd29a; }

/* ---------- Enfeite ao lado da casinha do rodape ---------- */
.tema-casa { position: absolute; left: -26px; bottom: 0; width: 30px; }
.tema-casa svg { display: block; width: 100%; height: auto; }

/* ---------- Chuva de enfeites ---------- */
.tema-chuva { position: fixed; inset: 0; z-index: 85; overflow: hidden; pointer-events: none; }
.tema-gota {
  position: absolute;
  top: -40px;
  display: block;
  opacity: 0.92;
  animation: temaCai 8s linear backwards;
}
.tema-gota svg { display: block; width: 100%; height: auto; }
@keyframes temaCai {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(var(--deriva, 0), calc(100vh + 80px)) rotate(var(--giro, 180deg)); }
}
.tema-voa { left: 0; animation-name: temaVoa; animation-timing-function: ease-in-out; }
.tema-voa svg { animation: temaAsa 0.2s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes temaVoa {
  0% { transform: translate(-60px, 0); }
  25% { transform: translate(25vw, -36px); }
  50% { transform: translate(50vw, 26px); }
  75% { transform: translate(75vw, -30px); }
  100% { transform: translate(calc(100vw + 60px), 10px); }
}
@keyframes temaAsa {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.45); }
}

/* ---------- Pecas das brincadeiras ---------- */
.tq-cabeca { position: absolute; bottom: -6px; filter: drop-shadow(0 8px 20px rgba(20, 10, 50, 0.25)); transform: translateY(105%); }
.tq-cabeca svg { display: block; width: 100%; height: auto; transform-origin: 50% 90%; }
.tq-dorme .m-olho { animation: none; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0.12); }
.tq-dorme .zzz { z-index: 2; }

.tq-respingo {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(170, 214, 245, 0.75) 60%, rgba(90, 150, 205, 0.8));
  animation: tqRespingo 2.4s cubic-bezier(0.2, 0.7, 0.4, 1) backwards;
  opacity: 0;
}
@keyframes tqRespingo {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  22% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.15); }
  60% { opacity: 0.9; transform: translate(var(--dx), calc(var(--dy) + 22px)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 72px)) scale(0.9); }
}

.tq-bafo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(213, 230, 242, 0.85), rgba(213, 230, 242, 0.4) 65%, transparent);
  opacity: 0;
}

.tq-rato svg, .tq-borboleta svg { display: block; width: 100%; height: auto; }
.tq-rato .ator-corpo { animation: saltita 0.14s linear infinite alternate; }
.tq-fio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 4px;
  border-radius: 4px;
  background: #d96aa7;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.tq-pegada {
  position: absolute;
  width: 34px;
  height: 34px;
  background: rgba(122, 84, 52, 0.62);
  -webkit-mask: var(--pata) center / contain no-repeat;
  mask: var(--pata) center / contain no-repeat;
  transform: rotate(var(--giro, 0deg));
  animation: tqPegada 4.2s ease-out backwards;
  animation-fill-mode: both;
}
@keyframes tqPegada {
  0% { opacity: 0; transform: rotate(var(--giro, 0deg)) scale(1.5); }
  6% { opacity: 1; transform: rotate(var(--giro, 0deg)) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--giro, 0deg)) scale(1); }
}

.tq-borboleta { position: absolute; left: 0; top: 0; }

/* ---------- Pecas dos eventos ---------- */
.tq-abobora { position: absolute; bottom: -4px; transform: translateY(105%); filter: drop-shadow(0 8px 20px rgba(120, 50, 0, 0.4)); }
.tq-abobora svg { display: block; width: 100%; height: auto; }
.tq-chama { animation: tqChama 0.5s ease-in-out infinite alternate; }
@keyframes tqChama {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
.tq-morcego { position: absolute; left: 0; top: 0; }
.tq-morcego svg { display: block; width: 100%; height: auto; animation: temaAsa 0.18s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.tq-treno .ator-corpo { animation: voaOnda 1.4s ease-in-out infinite alternate; }
.tq-presente { position: absolute; width: 34px; }
.tq-presente svg, .tq-ovo svg { display: block; width: 100%; height: auto; }
.tq-ovo { position: absolute; bottom: 4px; width: 36px; animation: balaoSurge 0.3s var(--mola); }
.tq-faisca {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: tqFaisca 1.1s ease-out forwards;
}
@keyframes tqFaisca {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .tema-varal-pisca { animation: none; }
}

/* ---------- Aba Temas do painel ---------- */
.tema-painel { display: grid; gap: 16px; max-width: 760px; }
.tema-painel h3 { margin: 0; }
.tema-painel form { display: grid; gap: 14px; }
.tema-painel .field[hidden], .tema-painel [data-tema-modo][hidden] { display: none; }
.tema-agora { margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(47, 103, 199, 0.1); font-weight: 700; overflow-wrap: anywhere; }
.tema-opcoes { display: grid; gap: 10px; }
.tema-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid rgba(31, 31, 36, 0.15);
  border-radius: 12px;
  cursor: pointer;
}
.tema-opcao.is-escolhida { border-color: var(--color-primary, #2559b4); background: rgba(47, 103, 199, 0.07); }
.tema-opcao input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; }
.tema-opcao span { display: grid; gap: 2px; min-width: 0; }
.tema-opcao small { color: var(--color-text-soft); font-size: 0.85rem; line-height: 1.4; }
.tema-retorno { margin: 0; min-height: 1.3em; font-weight: 700; }
@media (min-width: 720px) {
  .tema-opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Enfeite que sobe em vez de cair ---------- */
.tema-sobe { top: auto; bottom: -70px; animation-name: temaSobe; }
@keyframes temaSobe {
  from { transform: translate(0, 0) rotate(-6deg); }
  to { transform: translate(var(--deriva, 0), calc(-100vh - 90px)) rotate(6deg); }
}

/* ---------- Cenas exclusivas de cada evento (festas.js) ---------- */
.tq-adereco { position: absolute; bottom: -4px; transform: translateY(108%); filter: drop-shadow(0 8px 20px rgba(20, 10, 50, 0.28)); }
.tq-adereco svg { display: block; width: 100%; height: auto; }
.tq-balanca svg { animation: tqBalanca 0.7s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes tqBalanca {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
.tq-pulsa svg { animation: tqPulsa 0.62s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes tqPulsa {
  from { transform: scale(0.94); }
  to { transform: scale(1.06); }
}
.tq-voador { position: absolute; left: 0; top: 0; }
.tq-voador svg { display: block; width: 100%; height: auto; }
.tq-bate svg { animation: temaAsa 0.2s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.tq-estoura {
  position: absolute;
  display: block;
  animation: tqEstoura 1.3s cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
}
.tq-estoura svg { display: block; width: 100%; height: auto; }
@keyframes tqEstoura {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  65% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(50deg); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(0.8) rotate(80deg); }
}
.tq-treme .ator-corpo { animation: tqTreme 0.26s ease-in-out infinite alternate; }
@keyframes tqTreme {
  from { transform: translateY(0) rotate(-0.6deg); }
  to { transform: translateY(-3px) rotate(0.6deg); }
}
.tq-rasteja .ator-corpo { animation: tqRasteja 0.3s ease-in-out infinite alternate; }
@keyframes tqRasteja {
  from { transform: scaleX(1) scaleY(0.92); }
  to { transform: scaleX(0.9) scaleY(1.08); }
}
.tq-etiqueta { position: absolute; top: 0; left: 0; transform: translateY(-105%); filter: drop-shadow(0 10px 20px rgba(20, 10, 50, 0.3)); }
.tq-etiqueta svg { display: block; width: 100%; height: auto; transform-origin: 50% 0; }
.tq-placa {
  position: absolute;
  bottom: 88%;
  padding: 6px 10px;
  border: 3px solid #7c3f1b;
  border-radius: 8px;
  background: #fff;
  color: #1c6b43;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  animation: tqBalanca 0.5s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.tq-flor { position: absolute; bottom: -6px; transform: scaleY(0); transform-origin: 50% 100%; }
.tq-flor svg { display: block; width: 100%; height: auto; }
.tq-almofada { position: absolute; left: -4%; right: -4%; bottom: -8%; }
.tq-seringa { bottom: 28px; }
.tq-seringa .ator-corpo { animation: tqTreme 0.16s ease-in-out infinite alternate; }