/* ===== Tema de Halloween =====
 *
 * So vale com data-tema="halloween" no <html> (o terceiro tema do painel de
 * ajustes, ao lado do Rosa e do Amarelo PLF). As cores (--primary) ficam no
 * layouts/layout.html, como as dos outros temas.
 *
 * O cenario do banner (floresta, lua, aboboras, morcegos) e montado pelo
 * scripts/halloween.js so quando este tema esta ativo. Aqui ficam o visual
 * dele, a faixa do evento e o podio de lapides.
 *
 * Arquivo separado do core.css e do banner.css pelo limite de 64 KiB da
 * CentralCart: os dois ja estao perto do teto.
 */

/* ---------- Faixa do evento (acima do cabecalho) ----------
   Laranja do tema com morceguinhos bem fracos ao fundo. A esquerda a
   etiqueta escura do evento e o recado; a direita a contagem em blocos
   escuros (um por unidade) e o botao. */

.hw-faixa {
  display: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='44'%3E%3Cg fill='%23000' fill-opacity='.09'%3E%3Cpath transform='translate(14 9)' d='M10 2.2L10.8 3.4L11.6 2.2L11.8 4C13 2.6 15.5 1.6 19.6 2.6C18.2 3.2 17.6 4.4 17.6 5.6C16.6 4.9 15.2 4.9 14.2 5.6C13.6 5 12.6 4.9 11.8 5.4L10.8 7.6L9.8 5.4C9 4.9 8 5 7.4 5.6C6.4 4.9 5 4.9 4 5.6C4 4.4 3.4 3.2 2 2.6C6.1 1.6 8.6 2.6 9.8 4Z'/%3E%3Cpath transform='translate(80 27) rotate(-10) scale(.8)' d='M10 2.2L10.8 3.4L11.6 2.2L11.8 4C13 2.6 15.5 1.6 19.6 2.6C18.2 3.2 17.6 4.4 17.6 5.6C16.6 4.9 15.2 4.9 14.2 5.6C13.6 5 12.6 4.9 11.8 5.4L10.8 7.6L9.8 5.4C9 4.9 8 5 7.4 5.6C6.4 4.9 5 4.9 4 5.6C4 4.4 3.4 3.2 2 2.6C6.1 1.6 8.6 2.6 9.8 4Z'/%3E%3Cpath transform='translate(128 5) rotate(8) scale(.65)' d='M10 2.2L10.8 3.4L11.6 2.2L11.8 4C13 2.6 15.5 1.6 19.6 2.6C18.2 3.2 17.6 4.4 17.6 5.6C16.6 4.9 15.2 4.9 14.2 5.6C13.6 5 12.6 4.9 11.8 5.4L10.8 7.6L9.8 5.4C9 4.9 8 5 7.4 5.6C6.4 4.9 5 4.9 4 5.6C4 4.4 3.4 3.2 2 2.6C6.1 1.6 8.6 2.6 9.8 4Z'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 160px 44px,
    hsl(var(--primary));
  color: #1a0d05;
}

:root[data-tema='halloween'] .hw-faixa:not([hidden]) {
  display: block;
}

.hw-faixa-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-block: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.hw-faixa-aviso,
.hw-faixa-tempo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.hw-faixa-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  background: #160c06;
  color: #ffb27a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hw-faixa-selo svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.hw-faixa-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hw-faixa-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Contagem: o numero em branco e a unidade apagada, cada um no seu bloco. */
.hw-relogio {
  display: flex;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.hw-relogio > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-width: 34px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #160c06;
  color: #ffb27a;
  font-size: 11px;
  font-weight: 700;
}

.hw-relogio b {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.hw-faixa-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: #160c06;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.hw-faixa-botao svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .hw-faixa-botao:hover { background: #2b1609; }
  .hw-faixa-botao:hover svg { transform: translateX(2px); }
}

.hw-faixa-botao:focus-visible {
  outline: 2px solid #160c06;
  outline-offset: 2px;
}

/* Tablet sem o "Acaba em"; abaixo de 768px sai o recado; no celular o
   botao vira so a seta (o texto fica para o leitor de tela). */
@media (max-width: 1023px) {
  .hw-faixa-rotulo { display: none; }
}

@media (max-width: 767px) {
  .hw-faixa-texto { display: none; }
}

@media (max-width: 639px) {
  .hw-faixa-conteudo { gap: 6px 10px; }
  .hw-faixa-tempo { gap: 6px; }
  .hw-relogio > span { min-width: 0; padding: 3px 5px; }
  .hw-faixa-botao { padding: 5px 7px; }
  .hw-faixa-botao span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Celular estreito (360px): tudo um pouco mais junto para caber numa linha. */
@media (max-width: 400px) {
  .hw-faixa-selo { gap: 5px; padding: 4px 7px 4px 6px; letter-spacing: 0.06em; }
  .hw-relogio { gap: 3px; }
  .hw-relogio > span { padding: 3px 4px; }
}

/* ---------- Painel de ajustes: amostra da cor ---------- */

.ajustes-amostra-halloween {
  background: linear-gradient(135deg, #ff7a1a, #c2410c);
}

/* ---------- Fundo da pagina ----------
   O mesmo fundo dos outros temas (tres camadas soltas de 360, 480 e 720px,
   que andam devagar com a rolagem e acendem na cor do tema perto do mouse,
   no main.js), so que as marcas de mira viram morcegos, aboboras,
   fantasmas, teias, aranhas, luas, lapides, chapeus de bruxa, doces e
   estrelinhas. So troca o desenho (--marcas do banner.css), nao a logica.
   Geradas com semente fixa (sempre o mesmo desenho). */
:root[data-tema='halloween'] .grid-background {
  --marcas:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(269.3 112.9) rotate(-9) scale(0.74)' fill='white' fill-opacity='0.6' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(305.9 233.6) rotate(6) scale(0.91)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(28.8 109.4) rotate(10) scale(0.81)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.60' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 -7.4A7.6 7.6 0 1 0 7.4 2.6A5.6 5.6 0 0 1 2.6 -7.4Z'/%3E%3C/g%3E%3Cg transform='translate(335.0 78.1) rotate(-18) scale(0.77)' fill='white' fill-opacity='0.6' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(157.6 251.9) rotate(13) scale(0.82)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.59' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(179.7 99.4) rotate(0) scale(0.75)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.73' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-5 7V-2A5 5 0 0 1 5 -2V7ZM-7 7H7M-2 0.5H2M0 -1.8V4'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.7' cx='116.5' cy='216.9' r='0.7'/%3E%3Ccircle fill='white' fill-opacity='0.6' cx='67.5' cy='176.3' r='1.1'/%3E%3C/svg%3E") 0 0 / 360px 360px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg transform='translate(143.4 370.7) rotate(0) scale(0.83)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.57' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -15V-3.2M-1.6 -1.4L-5 -4L-6.8 -1.4M1.6 -1.4L5 -4L6.8 -1.4M-1.8 0.6L-5.6 1.4L-6.6 4.6M1.8 0.6L5.6 1.4L6.6 4.6'/%3E%3Ccircle r='2.2' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(48.9 332.6) rotate(-11) scale(0.71)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.84' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-8 5H8M-5 5L-1 -6.5L3.5 -2.2M-3.6 1.5H3.8'/%3E%3Cpath d='M-1 -6.5Q2 -8 4.2 -4.6'/%3E%3C/g%3E%3Cg transform='translate(140.9 187.6) rotate(1) scale(0.67)' fill='white' fill-opacity='0.9' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(176.8 274.2) rotate(0) scale(1.02)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.28' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -15V-3.2M-1.6 -1.4L-5 -4L-6.8 -1.4M1.6 -1.4L5 -4L6.8 -1.4M-1.8 0.6L-5.6 1.4L-6.6 4.6M1.8 0.6L5.6 1.4L6.6 4.6'/%3E%3Ccircle r='2.2' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(56.8 168.9) rotate(2) scale(0.95)' fill='white' fill-opacity='1' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(284.2 272.2) rotate(-15) scale(0.96)' fill='white' fill-opacity='0.6' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(292.4 107.2) rotate(0) scale(1.02)' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1.27' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -15V-3.2M-1.6 -1.4L-5 -4L-6.8 -1.4M1.6 -1.4L5 -4L6.8 -1.4M-1.8 0.6L-5.6 1.4L-6.6 4.6M1.8 0.6L5.6 1.4L6.6 4.6'/%3E%3Ccircle r='2.2' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(332.5 343.8) rotate(-9) scale(0.51)' fill='white' fill-opacity='0.7' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(402.5 447.8) rotate(-6) scale(0.90)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse rx='3.6' ry='2.6'/%3E%3Cpath d='M-3.6 0L-7.4 -2.8V2.8ZM3.6 0L7.4 -2.8V2.8Z'/%3E%3C/g%3E%3Cg transform='translate(418.2 65.9) rotate(-1) scale(1.10)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.18' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 -7.4A7.6 7.6 0 1 0 7.4 2.6A5.6 5.6 0 0 1 2.6 -7.4Z'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.6' cx='313.9' cy='461.6' r='1.0'/%3E%3Ccircle fill='white' fill-opacity='0.5' cx='62.7' cy='153.5' r='1.2'/%3E%3Ccircle fill='white' fill-opacity='0.5' cx='8.3' cy='192.5' r='0.9'/%3E%3C/svg%3E") 0 0 / 480px 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg transform='translate(141.1 484.2) rotate(270) scale(0.97)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.34' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-7 -7H8M-7 -7V8M-7 -7L4 4M-7 -7L7 -1.6M-7 -7L-1.6 7M-2.5 -7Q-3.4 -3.4 -7 -2.5M2 -7Q0.6 0.6 -7 2M6.4 -7Q4.8 4.8 -7 6.4'/%3E%3C/g%3E%3Cg transform='translate(520.9 263.7) rotate(11) scale(0.97)' fill='white' fill-opacity='1' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(213.0 485.3) rotate(-18) scale(0.68)' fill='white' fill-opacity='0.6' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(302.9 677.2) rotate(2) scale(0.83)' fill='white' fill-opacity='0.8' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(341.9 429.1) rotate(-6) scale(0.89)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.46' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-8 5H8M-5 5L-1 -6.5L3.5 -2.2M-3.6 1.5H3.8'/%3E%3Cpath d='M-1 -6.5Q2 -8 4.2 -4.6'/%3E%3C/g%3E%3Cg transform='translate(30.0 52.0) rotate(8) scale(0.76)' fill='white' fill-opacity='0.8' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(252.1 233.4) rotate(270) scale(0.75)' fill='none' stroke='white' stroke-opacity='1' stroke-width='1.73' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-7 -7H8M-7 -7V8M-7 -7L4 4M-7 -7L7 -1.6M-7 -7L-1.6 7M-2.5 -7Q-3.4 -3.4 -7 -2.5M2 -7Q0.6 0.6 -7 2M6.4 -7Q4.8 4.8 -7 6.4'/%3E%3C/g%3E%3Cg transform='translate(149.1 658.2) rotate(-5) scale(0.78)' fill='white' fill-opacity='0.5' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(671.3 475.7) rotate(15) scale(0.97)' fill='none' stroke='white' stroke-opacity='1' stroke-width='1.34' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(605.1 220.6) rotate(0) scale(0.75)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.73' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -15V-3.2M-1.6 -1.4L-5 -4L-6.8 -1.4M1.6 -1.4L5 -4L6.8 -1.4M-1.8 0.6L-5.6 1.4L-6.6 4.6M1.8 0.6L5.6 1.4L6.6 4.6'/%3E%3Ccircle r='2.2' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(428.3 580.9) rotate(17) scale(0.99)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(562.0 50.4) rotate(0) scale(0.99)' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1.31' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-5 7V-2A5 5 0 0 1 5 -2V7ZM-7 7H7M-2 0.5H2M0 -1.8V4'/%3E%3C/g%3E%3Cg transform='translate(429.9 455.5) rotate(0) scale(0.99)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.31' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-7 -7H8M-7 -7V8M-7 -7L4 4M-7 -7L7 -1.6M-7 -7L-1.6 7M-2.5 -7Q-3.4 -3.4 -7 -2.5M2 -7Q0.6 0.6 -7 2M6.4 -7Q4.8 4.8 -7 6.4'/%3E%3C/g%3E%3Cg transform='translate(694.2 60.8) rotate(0) scale(1.05)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.23' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-5 7V-2A5 5 0 0 1 5 -2V7ZM-7 7H7M-2 0.5H2M0 -1.8V4'/%3E%3C/g%3E%3Cg transform='translate(249.4 49.4) rotate(-6) scale(1.08)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.21' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(642.4 141.2) rotate(-4) scale(0.74)' fill='white' fill-opacity='0.8' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Cg transform='translate(437.4 152.2) rotate(-11) scale(0.79)' fill='none' stroke='white' stroke-opacity='1' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 7V-1A6 6 0 0 1 6 -1V7L4 5.4L2 7L0 5.4L-2 7L-4 5.4Z'/%3E%3Ccircle cx='-2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3Ccircle cx='2' cy='-1' r='0.7' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(25.7 224.1) rotate(0) scale(1.14)' fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -15V-3.2M-1.6 -1.4L-5 -4L-6.8 -1.4M1.6 -1.4L5 -4L6.8 -1.4M-1.8 0.6L-5.6 1.4L-6.6 4.6M1.8 0.6L5.6 1.4L6.6 4.6'/%3E%3Ccircle r='2.2' fill='white' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(657.2 312.8) rotate(-17) scale(0.74)' fill='white' fill-opacity='0.9' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(222.0 341.2) rotate(-9) scale(0.54)' fill='white' fill-opacity='0.7' stroke='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(-20 -6.5)' d='M20 4.2C19.4 3 18.6 2.4 18 3.2C15.6 1 10.6 0.2 4 2C7.2 3 8.6 5 8.8 7.6C10.8 6.2 13.4 6.6 14.8 9C16.4 8 18.6 8.6 20 11C21.4 8.6 23.6 8 25.2 9C26.6 6.6 29.2 6.2 31.2 7.6C31.4 5 32.8 3 36 2C29.4 0.2 24.4 1 22 3.2C21.4 2.4 20.6 3 20 4.2Z M18.4 3.4L18.8 1.2L19.6 3.2Z M20.4 3.2L21.2 1.2L21.6 3.4Z'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.7' cx='566.3' cy='526.0' r='1.3'/%3E%3Ccircle fill='white' fill-opacity='0.5' cx='411.6' cy='21.2' r='1.3'/%3E%3Ccircle fill='white' fill-opacity='0.5' cx='192.3' cy='8.5' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.6' cx='399.4' cy='624.0' r='1.0'/%3E%3Ccircle fill='white' fill-opacity='0.9' cx='473.2' cy='240.3' r='1.3'/%3E%3C/svg%3E") 0 0 / 720px 720px;
}

/* ---------- Logo da PLF no visual da lua ----------
   No Halloween a logo do cabecalho, do rodape e do login vira a mesma lua
   do banner: pessego, com crateras e os dois cortes vazados (mascara, entao
   fica certa em qualquer fundo). Usa o mesmo lugar da logo amarela
   (.logo-tema-amarelo, que ja vem na pagina e se ajusta ao tamanho). */
:root[data-tema='halloween'] .logo-tema-padrao { display: none; }

:root[data-tema='halloween'] .logo-tema-amarelo {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cmask id='c'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M240 175V112H140A45 45 0 0 0 95 157V234H50 M272 337V400H372A45 45 0 0 0 417 355V278H462' fill='none' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23c)'%3E%3Cpath fill='%23f3b676' fill-rule='evenodd' d='M168 87H348A110 110 0 0 1 458 197V315A110 110 0 0 1 348 425H168A110 110 0 0 1 58 315V197A110 110 0 0 1 168 87Z M207 175H305A52 52 0 0 1 357 227V285A52 52 0 0 1 305 337H207A52 52 0 0 1 155 285V227A52 52 0 0 1 207 175Z'/%3E%3Cg fill='%23f3b676'%3E%3Crect x='243' y='63' width='26' height='30'/%3E%3Crect x='243' y='419' width='26' height='30'/%3E%3Crect x='33' y='243' width='30' height='26'/%3E%3Crect x='449' y='243' width='30' height='26'/%3E%3Crect x='233' y='233' width='46' height='46' rx='12'/%3E%3C/g%3E%3Cg fill='%23e3a062'%3E%3Ccircle cx='292' cy='131' r='13'/%3E%3Ccircle cx='340' cy='130' r='7'/%3E%3Ccircle cx='126' cy='286' r='16'/%3E%3Ccircle cx='81' cy='306' r='8'/%3E%3Ccircle cx='406' cy='196' r='14'/%3E%3Ccircle cx='226' cy='396' r='10'/%3E%3Ccircle cx='166' cy='376' r='12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Selo do banner (so no Halloween) ---------- */

:root:not([data-tema='halloween']) .hw-selo {
  display: none !important;
}

/* ---------- Banner: ceu e camadas ---------- */

/* Ceu azul da noite, mais claro atras da lua e do podio. As artes e o
   efeito dos outros temas saem de cena. */
:root[data-tema='halloween'] .hero-stage {
  background: radial-gradient(ellipse 75% 90% at 70% 40%, #6b97b4 0%, #4b7395 32%, #30506f 62%, #1f3554 100%);
}

:root[data-tema='halloween'] .hero-stage .fundo-tema,
:root[data-tema='halloween'] .hero-stage .grid-background,
:root[data-tema='halloween'] .hero-stage .hero-spotlight,
:root[data-tema='halloween'] .hero-stage .hero-veil,
:root[data-tema='halloween'] .banner-estilhacos {
  display: none;
}

@media (max-width: 1023px) {
  :root[data-tema='halloween'] .hero-stage {
    background: radial-gradient(ellipse 120% 55% at 50% 66%, #6b97b4 0%, #4b7395 32%, #30506f 64%, #1f3554 100%);
  }
}

.hw-cena {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: hw-surgir 0.8s ease-out both;
}

.hw-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Escurece a esquerda (onde fica o texto) e funde o pe do banner com o
   fundo da pagina. */
.hw-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(12 19 34 / 0.5) 0%, rgb(12 19 34 / 0.22) 38%, transparent 60%),
    linear-gradient(to top, rgb(var(--background)) 0%, transparent 12%);
}

@media (max-width: 1023px) {
  .hw-veu {
    background:
      linear-gradient(to bottom, rgb(12 19 34 / 0.45) 0%, transparent 40%),
      linear-gradient(to top, rgb(var(--background)) 0%, transparent 8%);
  }
}

/* Chao embaixo do podio no celular: a faixa de pagamentos fica em cima
   dele, e nao em cima do ceu. A altura vem do halloween.js (--hw-base). */
.hw-chao {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0f182a;
}

.hw-ceu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* No celular o ceu e ampliado (slice) e as nuvens caem atras do texto do
   banner: ficam bem mais fracas para nao atrapalhar a leitura. */
@media (max-width: 639px) {
  .hw-ceu > [class^='hw-nuvem'] { opacity: 0.2; }
}

/* A lua: o halloween.js poe ela atras do podio. Sem podio, fica no canto. */
.hw-lua {
  position: absolute;
  top: 8%;
  right: 8%;
  width: min(32vw, 440px);
  aspect-ratio: 1;
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -10px), calc((var(--my, 0.5) - 0.5) * -6px));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-lua svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Faixa de arvores e chao, presa embaixo. No celular corta as laterais
   e mostra o miolo. */
.hw-mata {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 380;
  min-height: 200px;
}

/* Arvores tortas das laterais (computador). Passam um pouco da borda para o
   parallax nao abrir uma fresta. */
.hw-arvore {
  position: absolute;
  bottom: 0;
  height: min(100%, 820px);
  width: auto;
  aspect-ratio: 560 / 720;
}

.hw-arvore-esq { left: -30px; }
.hw-arvore-dir { right: -30px; }

/* Celular e tablet: uma moldura so, com as duas arvores. */
.hw-moldura {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 300;
  max-height: 70%;
}

/* No celular o podio fica embaixo do texto e a faixa de pagamentos vem
   depois dele: a moldura e o chao sobem ate a base do podio (--hw-base =
   distancia do pe do podio ate o fim do banner, medida no halloween.js). */
@media (max-width: 1023px) {
  .hw-arvore { display: none; }
  .hw-moldura { display: block; }
  .hw-moldura,
  .hw-mata { bottom: max(0px, calc(var(--hw-base, 0px) - 24px)); }
  .hw-chao {
    display: block;
    height: max(0px, calc(var(--hw-base, 0px) - 18px));
  }
}

.hw-poleiro {
  fill: none;
  stroke: none;
}

/* O chao e a base das arvores continuam abaixo da borda do desenho: com o
   mouse no pe do banner o parallax sobe essas camadas uns pixels, e sem a
   sobra abria uma faixa com o ceu azul aparecendo. O banner (.hw-cena)
   continua cortando tudo na borda dele. */
.hw-mata,
.hw-arvore,
.hw-moldura {
  overflow: visible;
}

/* Parallax: cada camada anda numa velocidade com o mouse (--mx/--my vem do
   main.js, no banner). A frente anda mais, o fundo quase nada. */
.hw-arvore,
.hw-moldura,
.hw-bando,
.hw-mata .hw-frente {
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -52px), calc((var(--my, 0.5) - 0.5) * -20px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-mata .hw-meio {
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -32px), calc((var(--my, 0.5) - 0.5) * -14px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-mata .hw-longe {
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -18px), calc((var(--my, 0.5) - 0.5) * -8px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vida na cena: estrelas, nuvens, aboboras e folhas. */
.hw-estrela { animation: hw-estrela 3s ease-in-out infinite alternate; }
.hw-nuvem { animation: hw-nuvem 38s ease-in-out infinite alternate; }
.hw-nuvem2 { animation: hw-nuvem2 46s ease-in-out infinite alternate; }
/* Vela das aboboras: rosto, luz vazando na casca e brilho no chao tremem
   juntos (mesmo tempo; o atraso de cada abobora vem do halloween.js). A
   chama em si (o gradiente que balanca e muda de cor) e animada no SVG. */
.hw-vela { animation: hw-vela 2.6s linear infinite; }
.hw-luz-dentro { animation: hw-luz-vela 2.6s linear infinite; }

.hw-brilho-vela {
  transform-box: fill-box;
  transform-origin: center;
  animation: hw-brilho-vela 2.6s linear infinite;
}

.hw-folha {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Morcegos 3D ---------- */

.hw-bando {
  position: absolute;
  inset: 0;
}

.hw-morcego {
  position: absolute;
  left: 0;
  top: 0;
}

.hw-voo-x {
  position: absolute;
  height: 0;
}

.hw-voo-y {
  position: absolute;
  top: 0;
  width: 0;
}

/* Caixa 100x70 do desenho, com o corpo no meio (50, 35). */
.hw-corpo {
  position: absolute;
  left: -50px;
  width: 100px;
  height: 70px;
}

.hw-zigue,
.hw-gesto,
.hw-orienta,
.hw-modelo {
  position: absolute;
  inset: 0;
}

/* O 3D: perspectiva para o giro do corpo para o lado em que ele voa. */
.hw-orienta { perspective: 420px; }

.hw-desenho {
  display: block;
  width: 100px;
  height: 70px;
  overflow: visible;
}

/* Silhueta escura contra o ceu, com um fio de luz da lua na borda; os
   ossos dos dedos um pouco mais claros, marcando a membrana. */
.hw-membrana {
  fill: #121d31;
  stroke: rgb(243 182 118 / 0.38);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.hw-ossos {
  fill: none;
  stroke: #2c4060;
  stroke-width: 0.8;
  stroke-linecap: round;
}

.hw-pelo {
  fill: #0b1322;
  stroke: rgb(243 182 118 / 0.3);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.hw-peito { fill: #1a2740; }

.hw-garras {
  fill: none;
  stroke: #0b1322;
  stroke-width: 1;
  stroke-linecap: round;
}

/* Olhos laranja, como nos morcegos da arte de referencia. */
.hw-olho { fill: #ffb45a; }

/* Pousado: so a asa fechada. Voando: a asa que bate (o proprio desenho
   anima a pose, no halloween.js). */
.hw-morcego[data-estado='pousado'] .hw-asa-voo,
.hw-morcego:not([data-estado='pousado']) .hw-asa-fechada {
  display: none;
}

/* ---------- Podio de lapides ----------
   Os degraus viram lapides de pedra: topo em semicirculo e laterais retas
   (raio grande demais = o navegador reduz para meia largura), moldura
   entalhada seguindo o arco, a borda de cima pegando a luz da lua, base de
   pedra, mato no pe, rachadura nas do 2o e do 3o, e as duas de lado
   levemente tortas, como num cemiterio velho. As faces 3D dos outros temas
   viram a base (tampa) e o mato (lateral direita). */

:root[data-tema='halloween'] .banner-podio-degrau {
  --hw-racha: none;
  --hw-racha-pos: center;
  padding-top: 22px;
  border: 1px solid rgb(8 12 20 / 0.9);
  border-bottom: 0;
  border-radius: 999px 999px 6px 6px;
  background:
    var(--hw-racha) var(--hw-racha-pos) / 22px 40px no-repeat,
    var(--grao),
    radial-gradient(ellipse 80% 45% at 60% 0%, rgb(243 182 118 / 0.13), transparent 70%),
    linear-gradient(90deg, rgb(0 0 0 / 0.3), transparent 32%, transparent 68%, rgb(255 255 255 / 0.05)),
    linear-gradient(180deg, #3d4a60 0%, #2c374b 45%, #1b2333 100%);
  /* Profundidade: chanfro na borda da frente (claro a esquerda, escuro a
     direita), a luz da lua no alto, e a espessura da pedra aparecendo pela
     direita e por cima (sombras duras, uma por pixel, cada vez mais escuras,
     que seguem o mesmo arco). Por fim, a sombra no chao. */
  box-shadow:
    inset 0 2px 0 rgb(243 182 118 / 0.28),
    inset 3px 0 0 rgb(255 255 255 / 0.05),
    inset -4px 0 0 rgb(0 0 0 / 0.22),
    inset 0 -30px 26px -14px rgb(0 0 0 / 0.62),
    1px -1px 0 #27324a,
    2px -2px 0 #252f45,
    3px -2px 0 #222c40,
    4px -3px 0 #20293b,
    5px -4px 0 #1e2637,
    6px -4px 0 #1b2332,
    7px -5px 0 #19202e,
    8px -5px 0 #161d2a,
    9px -6px 0 #141a26,
    10px -6px 0 rgb(8 12 20 / 0.95),
    0 14px 22px -8px rgb(0 0 0 / 0.65);
  transform-origin: bottom center;
}

/* Rachaduras (desenho fino em SVG, so nas lapides de lado). */
:root[data-tema='halloween'] .banner-podio-2 .banner-podio-degrau {
  --hw-racha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40'%3E%3Cpath d='M15 0L12 9L16 15L10 24L13 31L8 40M12 9L7 12M10 24L5 25' fill='none' stroke='rgb(8 12 20)' stroke-opacity='0.7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 1L13 10L17 16L11 25L14 32' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  --hw-racha-pos: right 20% top 26%;
  rotate: -2deg;
}

:root[data-tema='halloween'] .banner-podio-3 .banner-podio-degrau {
  --hw-racha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40'%3E%3Cpath d='M6 0L9 8L5 15L11 22L8 30L12 40M9 8L14 10M8 30L13 31' fill='none' stroke='rgb(8 12 20)' stroke-opacity='0.7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 1L10 9L6 16L12 23L9 31' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  --hw-racha-pos: left 22% top 30%;
  rotate: 1.6deg;
}

:root[data-tema='halloween'] .banner-podio-louro,
:root[data-tema='halloween'] .banner-podio-face-esq {
  display: none;
}

/* Moldura entalhada: um fio escuro com rebatida clara, a 9px da borda,
   seguindo o mesmo arco. No hover ela acende na cor da medalha (regra do
   banner.css, que ja anima o ::after). */
:root[data-tema='halloween'] .banner-podio-degrau::after {
  content: '';
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: auto;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.04);
}

:root[data-tema='halloween'] .banner-podio-1 .banner-podio-degrau::after {
  background: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.04);
}

/* Base de pedra no pe da lapide (era a tampa do bloco 3D). */
:root[data-tema='halloween'] .banner-podio-face-topo {
  top: auto;
  bottom: -2px;
  left: -9%;
  right: -9%;
  height: 14px;
  transform: translateZ(1px);
  border: 1px solid rgb(8 12 20 / 0.9);
  border-radius: 3px 3px 0 0;
  background: var(--grao), linear-gradient(180deg, #3a465b, #1f2838);
  /* A face de cima da base aparecendo (mesma espessura das lapides). */
  box-shadow:
    inset 0 1px 0 rgb(243 182 118 / 0.16),
    1px -1px 0 #2f3a50,
    2px -2px 0 #2b3549,
    3px -3px 0 #273043,
    4px -4px 0 #232c3d,
    5px -5px 0 rgb(8 12 20 / 0.95);
}

/* Mato escuro na frente da base (era a lateral direita do bloco 3D). */
:root[data-tema='halloween'] .banner-podio-face-dir {
  top: auto;
  bottom: -5px;
  left: -14%;
  right: -14%;
  width: auto;
  height: 16px;
  transform: translateZ(2px);
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16L2 9L4 16L6 6L8 16L10 10L12 16L15 4L17 16L19 9L21 16L24 7L26 16L28 11L30 16L33 5L35 16L37 10L40 16Z' fill='%230f182a'/%3E%3C/svg%3E") left bottom / 40px 16px repeat-x;
}

/* "R.I.P" gravado no alto da lapide (no lugar da luz de hover): letra
   escura com a rebatida clara embaixo, como entalhe. */
:root[data-tema='halloween'] .banner-podio-degrau::before {
  content: 'R.I.P';
  inset: auto 0 auto 0;
  top: 22%;
  background: none;
  opacity: 1;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  line-height: 1;
  text-align: center;
  color: #161d2a;
  text-shadow: 0 1px 0 rgb(170 190 215 / 0.22);
}

/* Numero gravado na pedra; o do 1o na cor do tema. */
:root[data-tema='halloween'] .banner-podio-numero {
  background: none;
  color: #8a98af;
  -webkit-text-stroke: 0;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.55), 0 1.5px 0 rgb(255 255 255 / 0.1);
  filter: none;
}

:root[data-tema='halloween'] .banner-podio-1 .banner-podio-numero {
  color: hsl(var(--primary));
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.5), 0 1.5px 0 rgb(255 220 180 / 0.18);
}

/* ---------- Presas de vampiro no lugar das coroas ----------
   No Halloween as coroas do podio e do ranking do cabecalho viram uma
   mordida de vampiro no topo do avatar, como numa moeda: os dentinhos e as
   duas presas cravados dentro da borda (a linha dos dentes segue a curva da
   medalha), e o sangue escorrendo das pontas na cor da colocacao
   (--medalha: dourado, prata ou bronze). Os dentes sao um desenho; o sangue
   e uma mascara pintada com a cor do lugar. */
:root[data-tema='halloween'] {
  --hw-dentes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M22 12.05Q32 9.95 42 12.05L42 15.9Q40.5 18.6 39 16.2Q37.5 18.6 36 16.2Q34.5 18.7 32 16.3Q29.5 18.7 28 16.2Q26.5 18.6 25 16.2Q23.5 18.6 22 15.9Z' fill='%23efe5d2' stroke='%230b0f1a' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpath d='M13.5 14.7Q18 12.8 22.5 12Q21.6 22.5 19.4 31.6Q18.6 33 17.9 31.4Q15.9 23 13.5 14.7Z' fill='%23f4ecdc' stroke='%230b0f1a' stroke-width='0.8' stroke-linejoin='round'/%3E%3Cpath d='M50.5 14.7Q46 12.8 41.5 12Q42.4 22.5 44.6 31.6Q45.4 33 46.1 31.4Q48.1 23 50.5 14.7Z' fill='%23f4ecdc' stroke='%230b0f1a' stroke-width='0.8' stroke-linejoin='round'/%3E%3Cpath d='M21.2 14.4Q20.6 23 18.9 29.8M42.8 14.4Q43.4 23 45.1 29.8' fill='none' stroke='%23c7b9a0' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hw-sangue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg fill='white'%3E%3Cpath d='M17.3 27Q18.8 25.5 20.3 27L20.2 32Q19.5 35.5 19.5 37.6A1.5 1.5 0 1 1 18.3 37.6Q18.3 35.5 17.6 32Z'/%3E%3Cpath d='M43.7 27Q45.2 25.5 46.7 27L46.6 32Q45.9 36.5 45.8 39.6A1.5 1.5 0 1 1 44.6 39.6Q44.5 36.5 43.8 32Z'/%3E%3Ccircle cx='31' cy='20.4' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-tema='halloween'] .banner-podio-coroa svg,
:root[data-tema='halloween'] .ranking-mini-coroa {
  display: none;
}

/* --mordida e a escala do desenho (64 x 48) em relacao ao avatar. A margem
   puxa o avatar para cima ate a linha dos dentes ficar uns 3px dentro do
   aro da medalha: 37 das 48 unidades do desenho ficam sobre ele. */
:root[data-tema='halloween'] .banner-podio-coroa {
  --mordida: 1.1;
  width: calc(var(--mordida) * 64px);
  height: calc(var(--mordida) * 48px);
  margin-bottom: calc(var(--mordida) * -37px - 3px);
  z-index: 3;
}

:root[data-tema='halloween'] .banner-podio-1 .banner-podio-coroa { --mordida: 1.375; }

@media (max-width: 639px) {
  :root[data-tema='halloween'] .banner-podio-coroa { --mordida: 0.68; }
  :root[data-tema='halloween'] .banner-podio-1 .banner-podio-coroa { --mordida: 0.88; }
}

:root[data-tema='halloween'] .banner-podio-coroa::before,
:root[data-tema='halloween'] .banner-podio-coroa::after,
:root[data-tema='halloween'] .ranking-mini-rosto::before,
:root[data-tema='halloween'] .ranking-mini-rosto::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

:root[data-tema='halloween'] .banner-podio-coroa::before,
:root[data-tema='halloween'] .banner-podio-coroa::after {
  inset: 0;
}

/* No cabecalho o avatar e pequeno (22px): so as pontas das presas entram,
   senao cobrem a inicial. Desce menos que com a coroa (8px), que era mais
   alta. */
:root[data-tema='halloween'] .ranking-mini-rosto {
  margin-top: 3px;
}

:root[data-tema='halloween'] .ranking-mini-rosto::before,
:root[data-tema='halloween'] .ranking-mini-rosto::after {
  top: -9px;
  left: 50%;
  width: 24px;
  height: 18px;
  translate: -50% 0;
  z-index: 1;
}

:root[data-tema='halloween'] .banner-podio-coroa::before,
:root[data-tema='halloween'] .ranking-mini-rosto::before {
  background: var(--hw-dentes) center / contain no-repeat;
}

:root[data-tema='halloween'] .banner-podio-coroa::after,
:root[data-tema='halloween'] .ranking-mini-rosto::after {
  background: var(--medalha);
  -webkit-mask: var(--hw-sangue) center / contain no-repeat;
  mask: var(--hw-sangue) center / contain no-repeat;
}

/* Passando o mouse no lugar, a mordida aperta (desce um pouco) em vez do
   giro da coroa. */
@media (hover: hover) {
  :root[data-tema='halloween'] .banner-podio-lugar:hover .banner-podio-coroa {
    transform: translateY(3px) scale(1.04);
  }
}

/* ---------- Movimento ---------- */

@keyframes hw-surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes hw-estrela { from { opacity: 0.12; } to { opacity: 0.7; } }
@keyframes hw-nuvem { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes hw-nuvem2 { from { transform: translateX(50px); } to { transform: translateX(-50px); } }
/* Tremida irregular de chama: quedas rapidas e voltas, nunca no mesmo
   compasso. */
@keyframes hw-vela {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.8; }
  10% { opacity: 0.97; }
  23% { opacity: 0.86; }
  27% { opacity: 1; }
  41% { opacity: 0.7; }
  44% { opacity: 0.95; }
  58% { opacity: 0.84; }
  62% { opacity: 1; }
  77% { opacity: 0.76; }
  80% { opacity: 0.98; }
  91% { opacity: 0.88; }
}
@keyframes hw-luz-vela {
  0%, 100% { opacity: 0.6; }
  7% { opacity: 0.36; }
  10% { opacity: 0.55; }
  23% { opacity: 0.42; }
  27% { opacity: 0.62; }
  41% { opacity: 0.26; }
  44% { opacity: 0.52; }
  58% { opacity: 0.4; }
  62% { opacity: 0.6; }
  77% { opacity: 0.32; }
  80% { opacity: 0.56; }
  91% { opacity: 0.44; }
}
@keyframes hw-brilho-vela {
  0%, 100% { opacity: 1; transform: scale(1); }
  7% { opacity: 0.78; transform: scale(0.95); }
  10% { opacity: 0.95; transform: scale(0.99); }
  23% { opacity: 0.84; transform: scale(0.97); }
  27% { opacity: 1; transform: scale(1.04); }
  41% { opacity: 0.68; transform: scale(0.93); }
  44% { opacity: 0.94; transform: scale(1); }
  58% { opacity: 0.82; transform: scale(0.97); }
  62% { opacity: 1; transform: scale(1.05); }
  77% { opacity: 0.74; transform: scale(0.95); }
  80% { opacity: 0.96; transform: scale(1.01); }
  91% { opacity: 0.86; transform: scale(0.98); }
}
@keyframes hw-folha {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(70px, 380px) rotate(320deg); opacity: 0; }
}
@keyframes hw-folha2 {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(-60px, 360px) rotate(-280deg); opacity: 0; }
}

/* Voo: o morcego anda no X e no Y em camadas separadas (a largura/altura da
   camada e a distancia, entao 100% = ate onde ele vai). */
@keyframes hw-ir-dir { to { transform: translateX(100%); } }
@keyframes hw-ir-esq { to { transform: translateX(-100%); } }
@keyframes hw-ir-cima { to { transform: translateY(-100%); } }
@keyframes hw-ir-baixo { to { transform: translateY(100%); } }
@keyframes hw-onda { from { transform: translateY(-3px) rotate(-2deg); } to { transform: translateY(3px) rotate(2deg); } }
/* Zigue-zague irregular do voo de morcego: sobe, desce e desvia um pouco,
   inclinando o corpo junto. */
@keyframes hw-zigue {
  0% { transform: translate(0, 0) rotate(0deg); }
  16% { transform: translate(5px, -11px) rotate(-4deg); }
  33% { transform: translate(-3px, 5px) rotate(3deg); }
  49% { transform: translate(6px, -5px) rotate(-2deg); }
  66% { transform: translate(-5px, 10px) rotate(4deg); }
  83% { transform: translate(3px, -8px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* O corpo vira mais e menos para o lado em que voa (o 3D). */
@keyframes hw-guinada-dir { from { transform: rotateY(12deg); } to { transform: rotateY(34deg); } }
@keyframes hw-guinada-esq { from { transform: rotateY(-12deg); } to { transform: rotateY(-34deg); } }
@keyframes hw-pendular { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes hw-pendular-leve { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes hw-decolar-pendurado { 0% { transform: rotate(180deg); } 35% { transform: translateY(12px) rotate(120deg); } 100% { transform: rotate(0deg); } }
@keyframes hw-decolar-sentado { 0% { transform: translateY(0); } 40% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes hw-pousar-pendurado { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

/* "Reduzir animacoes" (painel) ou o sistema pedindo menos movimento: a cena
   fica parada (os morcegos tambem nao fogem, o halloween.js confere). */
:root[data-menos-animacao='sim'] .hw-cena,
:root[data-menos-animacao='sim'] .hw-cena * {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hw-cena,
  .hw-cena * {
    animation: none !important;
    transition: none !important;
  }
}