/* ==========================================================================
   Halloween da Unlockd (tema zumbi verde) — 23/10/2026, pedido do dono.
   Arquivo próprio: desligar o evento = tirar esta folha + os trechos hw- do header.
   As artes vêm da pasta "Tema Halloween" do dono; os cartões e itens dos jogos, de
   prototipo/halloween/gerar_imagens.py (OpenAI).
   ========================================================================== */
:root {
  --primary: 79 70% 49%;            /* #9DD425, o verde gosmento das artes (era 180 68% 55%) */
  --hw: #9dd425;
  --hw-claro: #c6f25a;
  --hw-escuro: #2f4a0c;
  --hw-vidro: rgba(14, 20, 10, 0.72);
  --uk-header-h: 84px;
}
@media (min-width: 1024px) { :root { --uk-header-h: 138px; } }

/* fundo fixo (24/10: "o background não tá fixo"): o brilho verde fica preso à tela enquanto a página rola, como o
   .site-glow-viewport da KaySto (um no topo, outro saindo do canto de cima à direita) */
body.uk-body {
  background-color: #050805;
  background-image: radial-gradient(88% 72% at 100% 0%, rgba(157, 212, 37, 0.15), rgba(157, 212, 37, 0.05) 40%, transparent 78%),
    radial-gradient(70rem 30rem at 50% -8rem, rgba(157, 212, 37, 0.14), transparent 70%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------- teias */
.hw-teias {
  position: fixed; inset: 0 0 auto 0; height: 100vh; z-index: 90; pointer-events: none;
  background: url('https://unlockd-pack-combo.unlockd-pack-combo.workers.dev/hw/teias_background.webp') top center / 100% auto no-repeat; opacity: 0.55;
}
@media (max-width: 1023px) { .hw-teias { background-size: 170% auto; opacity: 0.4; } }

/* ------------------------------------- enfeites fixos (como as abóboras da KaySto) */
/* tickets e cabeças de zumbi presos à tela, nas bordas, como as teias; seguem o mouse e boiam (halloween.js).
   Ficam abaixo do carrinho e do menu (z 40) e acima das seções. No celular, só duas cabeças pequenas. */
.hw-floats { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.hw-floats .hw-flutua { position: absolute; filter: drop-shadow(0 0 18px rgba(157, 212, 37, 0.28)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)); }
.hw-fl1 { left: -38px; top: 38%; width: 96px; }
.hw-fl2 { left: -50px; top: 70%; width: 112px; }
.hw-fl3 { right: -56px; top: 22%; width: 120px; }
.hw-fl4 { right: -34px; top: 56%; width: 80px; filter: blur(2.5px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)) !important; opacity: 0.9; }
.hw-fl5 { right: -44px; top: 82%; width: 88px; filter: blur(1.5px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)) !important; }
@media (max-width: 1023px) {
  .hw-fl1, .hw-fl4, .hw-fl5 { display: none; }
  .hw-fl2 { left: -28px; top: 64%; width: 62px; }
  .hw-fl3 { right: -30px; top: 30%; width: 66px; }
}

/* --------------------------------------------------------------- header */
.hw-header.uk-header, .hw-header.uk-header.is-solid { background: transparent; border-color: transparent;
  box-shadow: none; backdrop-filter: none; padding: 14px 16px 0; }
.hw-pilula {
  max-width: 1360px; margin: 0 auto; height: 68px; padding: 0 12px; border-radius: 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--hw-vidro); border: 1px solid rgba(157, 212, 37, 0.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hw-esq, .hw-dir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hw-dir { justify-content: flex-end; }
.hw-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #e9f5d8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hw-ic:hover { background: rgba(157, 212, 37, 0.14); border-color: rgba(157, 212, 37, 0.5); transform: translateY(-1px); }
.hw-ic svg, .hw-ic i { width: 18px; height: 18px; }
.hw-ic--conta { background: #fff; color: #0b0f08; border-color: #fff; }
.hw-ic--carrinho { color: var(--hw); border-color: rgba(157, 212, 37, 0.45); background: rgba(157, 212, 37, 0.10); }

.hw-busca { position: relative; flex: 1; max-width: 320px; height: 42px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.10); }
.hw-busca svg, .hw-busca i { width: 17px; height: 17px; color: var(--hw); flex: 0 0 auto; }
.hw-busca input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 14px; }
.hw-busca input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hw-busca:focus-within { border-color: rgba(157, 212, 37, 0.6); box-shadow: 0 0 0 3px rgba(157, 212, 37, 0.15); }
.hw-busca__res { position: absolute; left: 0; top: calc(100% + 10px); width: 460px; max-height: 420px; overflow: auto; z-index: 60;
  border-radius: 18px; border: 1px solid rgba(157, 212, 37, 0.25); background: rgba(6, 9, 5, 0.97); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }

.hw-logo { display: block; width: 56px; height: 56px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hw-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(157, 212, 37, 0.35)); }
.hw-logo:hover { transform: rotate(-6deg) scale(1.08); }

.hw-links { display: flex; align-items: center; gap: 22px; margin-right: 10px; }
.hw-links a { font: 600 14px/1 'Geist', sans-serif; color: rgba(255, 255, 255, 0.82); transition: color 0.2s; white-space: nowrap; }
.hw-links a { position: relative; }
.hw-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--hw);
  transform: scaleX(0); transform-origin: bottom right; transition: transform 0.25s cubic-bezier(0.32, 1, 0.23, 1); }
.hw-links a:hover { color: var(--hw); }
.hw-links a:hover::after { transform: scaleX(1); transform-origin: bottom left; }
.hw-pilula { transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.hw-header.is-rolou .hw-pilula { background: rgba(8, 12, 6, 0.9); border-color: rgba(157, 212, 37, 0.32);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(157, 212, 37, 0.1); }
.hw-ic, .hw-dir .uk-icon-btn { transition: background 0.2s, border-color 0.2s, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hw-ic:active, .hw-dir .uk-icon-btn:active { transform: scale(0.92); }
.hw-ic--carrinho:hover { transform: scale(1.06); }

.hw-atalhos { display: flex; justify-content: center; gap: 34px; padding: 14px 0 6px; }
.hw-atalhos a { display: inline-flex; align-items: center; gap: 9px; font: 800 16px/1 'Montserrat', sans-serif; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); transition: color 0.2s, transform 0.2s; }
.hw-atalhos a svg, .hw-atalhos a i { width: 19px; height: 19px; color: var(--hw); }
.hw-atalhos { max-height: 60px; overflow: hidden; transition: max-height 0.25s, opacity 0.2s, padding 0.25s; }
/* rolou a página: a linha de atalhos recolhe e fica só a pílula (como na KaySto) */
.hw-header.is-rolou .hw-atalhos { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.hw-atalhos a:hover { color: var(--hw-claro); transform: translateY(-1px); }

.hw-so-cel { display: none; }
@media (max-width: 1023px) {
  .hw-header.uk-header { padding: 10px 12px 0; }
  .hw-pilula { height: 62px; grid-template-columns: auto 1fr auto; padding: 0 8px; gap: 6px; }
  .hw-busca, .hw-links, .hw-atalhos { display: none; }
  .hw-logo { width: 48px; height: 48px; margin-left: 4px; }
  .hw-so-cel { display: grid; }
  .hw-ic { width: 38px; height: 38px; }
  .hw-dir { gap: 6px; }
}

/* suporte (components/support-dropdown) e conta logada (profile-dropdown) dentro da pílula: mesmo botão redondo */
.hw-dir .uk-icon-btn { width: 42px; height: 42px; padding: 0; border-radius: 12px; display: grid; place-items: center;
  color: #e9f5d8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); }
.hw-dir .uk-icon-btn:hover { background: rgba(157, 212, 37, 0.14); border-color: rgba(157, 212, 37, 0.5); }
.hw-dir #support-menu, .hw-dir #profile-menu { top: 54px; z-index: 70; }
.hw-dir #profile-button > div:not(:first-child), .hw-dir #profile-button > [data-lucide], .hw-dir #profile-button > svg { display: none; }
@media (max-width: 1023px) { .hw-dir .uk-icon-btn { width: 38px; height: 38px; } }

/* ------------------------------------------------- barra de baixo (celular) */
.hw-baixo { display: none; }
@media (max-width: 1023px) {
  .hw-baixo {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 95; height: 66px; padding: 0 6px;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    border-radius: 22px; background: var(--hw-vidro); border: 1px solid rgba(157, 212, 37, 0.22);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.5);
  }
  .hw-baixo > a, .hw-baixo > button { display: flex; flex-direction: column; align-items: center; gap: 4px;
    font: 600 11px/1 'Geist', sans-serif; color: rgba(255, 255, 255, 0.72); background: none; border: 0; }
  .hw-baixo > a.is-ativo { color: var(--hw); }
  .hw-baixo svg, .hw-baixo i { width: 21px; height: 21px; }
  .hw-baixo img { width: 26px; height: 26px; object-fit: contain; margin: -3px 0 -2px; }
  /* botão da busca: um pouco acima da barra (pedido do dono em 24/10: antes subia 28px e a lupa ficava no topo
     do botão, porque herdava o flex em coluna dos outros itens) */
  .hw-baixo .hw-baixo__busca { justify-self: center; align-self: center; display: grid; place-items: center; gap: 0;
    width: 54px; height: 54px; margin-top: -10px; border-radius: 16px;
    background: radial-gradient(circle at 35% 30%, var(--hw-claro), var(--hw) 55%, #5d8c12); color: #0b1205;
    box-shadow: 0 8px 22px rgba(157, 212, 37, 0.4), 0 0 0 5px #050805; transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .hw-baixo .hw-baixo__busca:active { transform: scale(0.92); }
  .hw-baixo .hw-baixo__busca svg, .hw-baixo .hw-baixo__busca i { display: block; width: 24px; height: 24px; }
  body.uk-body { padding-bottom: 86px; }
  .uk-whatsapp-float, [class*="whatsapp-float"] { bottom: 90px !important; }
}

/* ------------------------------------------------------- faixa do evento */
/* Na home (uk-immersive) o conteúdo não desce sozinho por baixo do header fixo: a faixa desce e o
   banner da loja, que vem logo depois dela, perde o recuo que tinha para fugir do header. */
.hw-faixa { position: relative; margin: calc(var(--uk-header-h) + 10px) auto 52px; }
.hw-faixa ~ * .uk-hero-section { padding-top: 0 !important; }
/* Computador: faixa fina (como a da KaySto) com o título, a frase e "Jogue agora!" lado a lado; o botão
   grande fica embaixo dela, mordendo o topo do banner da loja. */
.hw-faixa__banner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; height: 96px;
  border-radius: 26px; overflow: hidden; padding: 0 180px;
  background: url('https://unlockd-pack-combo.unlockd-pack-combo.workers.dev/hw/background_header.webp') center / cover no-repeat;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(157, 212, 37, 0.3);
}
.hw-faixa__banner::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.25)); }
.hw-faixa__titulo { position: relative; z-index: 2; height: 84px; width: auto; flex: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7)); }
.hw-faixa__sub { position: relative; z-index: 2; font: 900 26px/1 'Montserrat', sans-serif; letter-spacing: -0.5px; color: #fff;
  text-shadow: 0 3px 10px #000; white-space: nowrap; }
.hw-faixa__jogue { position: relative; z-index: 2; flex: none; padding: 9px 16px; border-radius: 999px; font: 900 12px/1 'Montserrat', sans-serif;
  color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(157, 212, 37, 0.5); }
.hw-flutua { position: absolute; z-index: 1; will-change: transform; pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55)); transition: transform 0.25s ease-out; }
.hw-faixa .hw-f1 { left: 3%; top: 6px; width: 110px; }
.hw-faixa .hw-f2 { right: 13%; top: 10px; width: 84px; }
.hw-faixa .hw-f3 { right: 2%; top: -4px; width: 118px; }
.hw-faixa__btn {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); z-index: 3; padding: 15px 36px; border-radius: 999px;
  font: 900 19px Montserrat, sans-serif; letter-spacing: 0.3px; color: #0b1205; white-space: nowrap;
  background: linear-gradient(180deg, var(--hw-claro), var(--hw) 60%, #6ea218);
  box-shadow: 0 10px 30px rgba(157, 212, 37, 0.45), 0 0 0 8px #070a06; transition: transform 0.2s, box-shadow 0.2s;
}
.hw-faixa__btn:hover { transform: translateX(-50%) translateY(-2px) scale(1.03); box-shadow: 0 16px 40px rgba(157, 212, 37, 0.6), 0 0 0 8px #070a06; }
@media (max-width: 1023px) {
  .hw-faixa { margin: calc(var(--uk-header-h) + 6px) 12px 40px; width: auto; padding: 0; }
  .hw-faixa__banner { display: block; height: 150px; border-radius: 20px; padding: 0; }
  .hw-faixa__titulo { position: absolute; left: 42%; top: 50%; height: auto; width: 68%; transform: translate(-50%, -64%); }
  .hw-faixa__sub { position: absolute; left: 2%; right: 19%; bottom: 30px; text-align: center; font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; }
  .hw-faixa__jogue { display: none; }
  .hw-faixa .hw-f1 { width: 70px; left: 1%; top: 10px; }
  .hw-faixa .hw-f2 { display: none; }
  .hw-faixa .hw-f3 { width: 82px; right: 0; top: auto; bottom: 10px; }
  .hw-faixa__btn { font-size: 14px; padding: 11px 22px; bottom: -20px; box-shadow: 0 8px 22px rgba(157, 212, 37, 0.4), 0 0 0 5px #050805; }
}

/* Tipos de jogo no celular: no computador ficam na segunda linha do header; aqui viram pílulas logo
   abaixo da faixa do evento, que roçam para o lado se não couberem. */
.hw-tipos-cel { display: none; }
@media (max-width: 1023px) {
  .hw-tipos-cel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: calc(var(--uk-header-h) + 8px) 12px 12px; }
  .hw-tipos-cel::-webkit-scrollbar { display: none; }
  .hw-tipos-cel a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 11px;
    border-radius: 10px; font: 800 12.5px/1 'Montserrat', sans-serif; color: #fff; white-space: nowrap;
    background: rgba(157, 212, 37, 0.08); border: 1px solid rgba(157, 212, 37, 0.28); }
  .hw-tipos-cel a svg, .hw-tipos-cel a i { width: 16px; height: 16px; color: var(--hw); }
}

/* ----------------------------------------------------- página do evento */
.hw-evento { position: relative; min-height: calc(100vh - var(--uk-header-h)); overflow: hidden; padding: 20px 16px 70px;
  background: radial-gradient(60rem 30rem at 50% 20%, rgba(157, 212, 37, 0.28), transparent 70%),
              linear-gradient(180deg, #0b1407 0%, #060a04 60%, #050805 100%); }
.hw-evento__fundo { position: absolute; inset: 0; background: url('https://unlockd-pack-combo.unlockd-pack-combo.workers.dev/hw/background_header.webp') center top / auto 46% repeat-x;
  opacity: 0.35; filter: blur(2px); mask-image: linear-gradient(180deg, #000 30%, transparent 70%); }
.hw-evento__palco { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; text-align: center; }
.hw-evento__titulo { width: min(640px, 92%); margin: 10px auto 0; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.6)); }
.hw-evento__sub { margin-top: 6px; font: 900 34px/1.05 Montserrat, sans-serif; color: #fff; letter-spacing: -0.5px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8); }
.hw-jogos { margin: 46px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 26px; justify-content: center; }
.hw-jogo { position: relative; padding: 108px 22px 26px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 60, 16, 0.75), rgba(10, 14, 8, 0.92)); border: 1px solid rgba(157, 212, 37, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transition: transform 0.25s, border-color 0.25s; }
.hw-jogo:hover { transform: translateY(-4px); border-color: rgba(157, 212, 37, 0.7); }
.hw-jogo img { position: absolute; left: 50%; top: -58px; width: 180px; transform: translateX(-50%);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hw-jogo:hover img { transform: translateX(-50%) translateY(-6px) rotate(-4deg) scale(1.05); }
.hw-jogo h3 { font: 900 26px Montserrat, sans-serif; color: #fff; }
.hw-jogo p { margin-top: 8px; font: 400 15px/1.4 Geist, sans-serif; color: rgba(255, 255, 255, 0.72); }
.hw-jogo a { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 30px; border-radius: 10px;
  font: 900 15px Montserrat, sans-serif; color: #0b1205; background: linear-gradient(180deg, var(--hw-claro), var(--hw) 60%, #6ea218);
  box-shadow: 0 10px 26px rgba(157, 212, 37, 0.35); }
.hw-evento .hw-flutua { z-index: 1; }
.hw-evento .hw-bruxa { right: max(-60px, calc(50% - 760px)); bottom: 0; width: min(380px, 30vw); }
.hw-evento .hw-zumbi { left: max(-40px, calc(50% - 740px)); bottom: 40px; width: min(330px, 26vw); }
.hw-evento .hw-t1 { left: 8%; top: 120px; width: 130px; transform: rotate(-14deg); }
.hw-evento .hw-t2 { right: 10%; top: 90px; width: 110px; }
.hw-evento .hw-t3 { left: 22%; bottom: 60px; width: 90px; opacity: 0.85; }
.hw-evento .hw-t4 { right: 26%; top: 40%; width: 84px; opacity: 0.8; filter: blur(1.5px) drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }
.hw-evento__marca { margin-top: 40px; display: inline-flex; align-items: center; gap: 10px; font: 800 20px Montserrat, sans-serif; color: #fff; }
.hw-evento__marca img { width: 42px; height: 42px; }
@media (max-width: 1023px) {
  .hw-evento__sub { font-size: 22px; }
  .hw-jogos { grid-template-columns: 1fr; gap: 78px; margin-top: 82px; }
  .hw-evento .hw-bruxa { width: 130px; right: -18px; top: auto; bottom: 6px; }
  .hw-evento .hw-zumbi { width: 112px; left: -16px; top: auto; bottom: 18px; }
  .hw-evento .hw-t3, .hw-evento .hw-t4 { display: none; }
}


/* Halloween da Unlockd: páginas dos jogos (Zumbis Travessos e Roleta Mágica). Usa as cores do halloween.css. */
.hw-pg { position: relative; min-height: calc(100vh - var(--uk-header-h)); overflow: hidden; padding: 34px 16px 90px;
  background: radial-gradient(60rem 30rem at 50% 10%, rgba(157, 212, 37, 0.24), transparent 70%),
              linear-gradient(180deg, #0b1407 0%, #060a04 60%, #050805 100%); }
/* os jogos escondem peças com o atributo hidden; nenhum display das regras abaixo pode vencer isso */
.hw-pg [hidden] { display: none !important; }
.hw-pg__palco { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; text-align: center; }
.hw-pg .hw-flutua { z-index: 1; }
.hw-pg__d1 { left: max(-30px, calc(50% - 720px)); top: 160px; width: min(300px, 22vw); }
.hw-pg__d2 { right: max(-10px, calc(50% - 700px)); top: 120px; width: min(190px, 15vw); }
.hw-pg__d3 { right: max(20px, calc(50% - 640px)); bottom: 120px; width: 120px; opacity: 0.85; }

.hw-olho { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px;
  font: 800 12px/1 Montserrat, sans-serif; letter-spacing: 1.2px; color: var(--hw-claro);
  background: rgba(157, 212, 37, 0.1); border: 1px solid rgba(157, 212, 37, 0.35); }
.hw-olho svg, .hw-olho i { width: 15px; height: 15px; }
.hw-pg__titulo { margin-top: 14px; font: 900 clamp(32px, 9vw, 76px)/0.95 Montserrat, sans-serif; letter-spacing: -2px;
  background: linear-gradient(180deg, #f4ffd6 0%, var(--hw-claro) 35%, var(--hw) 70%, #5f8f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #1d2e07) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7)); }
.hw-pg__sub { margin: 14px auto 0; max-width: 560px; font: 500 17px/1.45 Geist, sans-serif; color: rgba(255, 255, 255, 0.78); }

.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: 10px; border: 0;
  font: 900 16px/1 Montserrat, sans-serif; color: #0b1205; cursor: pointer;
  background: linear-gradient(180deg, var(--hw-claro), var(--hw) 60%, #6ea218);
  box-shadow: 0 10px 26px rgba(157, 212, 37, 0.35); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; }
.hw-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(157, 212, 37, 0.5); }
.hw-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hw-btn svg, .hw-btn i { width: 18px; height: 18px; }
.hw-btn--grande { padding: 18px 44px; font-size: 19px; }
.hw-btn--mini { padding: 9px 16px; font-size: 13px; }
.hw-btn--vidro { color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
.hw-nota { display: block; margin-top: 10px; font: 400 13px/1.45 Geist, sans-serif; color: rgba(255, 255, 255, 0.55); }

/* entrada por e-mail */
.hw-entrar { position: relative; max-width: 440px; margin: 90px auto 0; padding: 88px 26px 26px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(40, 60, 16, 0.8), rgba(10, 14, 8, 0.94)); border: 1px solid rgba(157, 212, 37, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.hw-entrar > img { position: absolute; left: 50%; top: -70px; width: 160px; transform: translateX(-50%); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6)); }
.hw-entrar h2 { font: 900 24px Montserrat, sans-serif; color: #fff; }
.hw-entrar p { margin-top: 8px; font: 400 14.5px/1.45 Geist, sans-serif; color: rgba(255, 255, 255, 0.72); }
.hw-entrar input { width: 100%; margin: 18px 0 14px; padding: 14px 16px; border-radius: 14px; font: 500 16px Geist, sans-serif; color: #fff;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(157, 212, 37, 0.35); outline: none; }
.hw-entrar input:focus { border-color: var(--hw); box-shadow: 0 0 0 3px rgba(157, 212, 37, 0.25); }
.hw-entrar .hw-btn { width: 100%; }
.hw-entrar small { display: block; min-height: 18px; margin-top: 10px; font: 600 13px Geist, sans-serif; color: #ff8a7a; }

.hw-quem { margin-top: 22px; font: 400 13.5px Geist, sans-serif; color: rgba(255, 255, 255, 0.6); }
.hw-quem b { color: #fff; }
.hw-quem button { color: var(--hw-claro); text-decoration: underline; text-underline-offset: 3px; }

/* escolha do modo */
.hw-escolha { margin-top: 30px; }
.hw-escolha h2, .hw-ofertas h2 { font: 900 26px Montserrat, sans-serif; color: #fff; }
.hw-escolha__ops { margin: 22px auto 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 20px; justify-content: center; }
.hw-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 18px 22px; border-radius: 22px;
  text-align: center; cursor: pointer; background: linear-gradient(180deg, rgba(40, 60, 16, 0.7), rgba(10, 14, 8, 0.92));
  border: 2px solid rgba(157, 212, 37, 0.22); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.hw-op:hover { transform: translateY(-3px); border-color: rgba(157, 212, 37, 0.55); }
.hw-op.is-escolhido { border-color: var(--hw); box-shadow: 0 0 0 4px rgba(157, 212, 37, 0.2), 0 20px 50px rgba(0, 0, 0, 0.5); }
.hw-op img { width: 210px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55)); }
.hw-op__olho { font: 800 11px Montserrat, sans-serif; letter-spacing: 1px; color: var(--hw-claro); }
.hw-op b { font: 900 19px/1.15 Montserrat, sans-serif; color: #fff; }
.hw-op em { font: 700 14px Geist, sans-serif; font-style: normal; color: rgba(255, 255, 255, 0.65); }

/* tabuleiro dos zumbis */
.hw-mesa { margin-top: 26px; }
.hw-placar { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.hw-placar__valor { padding: 12px 22px; border-radius: 18px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(157, 212, 37, 0.35); }
.hw-placar__valor small { display: block; font: 800 10.5px Montserrat, sans-serif; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.55); }
.hw-placar__valor b { display: block; margin-top: 3px; font: 900 24px Montserrat, sans-serif; color: var(--hw-claro); }
.hw-tentativas { display: flex; gap: 8px; }
.hw-tentativas li { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; font: 800 15px Montserrat, sans-serif;
  color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2); }
.hw-tentativas li.is-doce { background: rgba(157, 212, 37, 0.15); border: 1px solid var(--hw); }
.hw-tentativas li.is-travessura { background: rgba(255, 110, 60, 0.12); border: 1px solid rgba(255, 140, 80, 0.7); }
.hw-tentativas li img { width: 40px; height: 40px; object-fit: contain; }
.hw-dica { margin-top: 16px; font: 600 15px Geist, sans-serif; color: rgba(255, 255, 255, 0.75); }
.hw-tab { margin: 22px auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; perspective: 900px; }
.hw-z { position: relative; aspect-ratio: 1; border-radius: 22px; cursor: pointer; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); animation: hw-z-entra 0.5s calc(var(--i) * 40ms) backwards; }
.hw-z__frente, .hw-z__verso { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; backface-visibility: hidden; }
.hw-z__frente { background: radial-gradient(circle at 50% 35%, rgba(157, 212, 37, 0.3), rgba(16, 24, 10, 0.95) 70%);
  border: 1px solid rgba(157, 212, 37, 0.28); box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(0, 0, 0, 0.45); }
.hw-z__frente img { width: 80%; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); }
.hw-z:hover:not(:disabled) .hw-z__frente img { transform: translateY(-5px) rotate(-6deg) scale(1.06); }
.hw-z:hover:not(:disabled) .hw-z__frente { border-color: rgba(157, 212, 37, 0.7); }
.hw-z:disabled { cursor: default; }
.hw-z:disabled:not(.is-aberto) { opacity: 0.45; filter: grayscale(0.5); }
.hw-z__verso { transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, rgba(157, 212, 37, 0.35), rgba(12, 18, 8, 0.96) 72%);
  border: 2px solid var(--hw); box-shadow: 0 0 30px rgba(157, 212, 37, 0.35); }
.hw-z.is-travessura .hw-z__verso { background: radial-gradient(circle at 50% 40%, rgba(255, 120, 60, 0.3), rgba(20, 10, 6, 0.96) 72%);
  border-color: rgba(255, 140, 80, 0.8); box-shadow: 0 0 30px rgba(255, 120, 60, 0.3); }
.hw-z__verso img { width: 66%; margin-top: -12%; }
.hw-z__chip { position: absolute; bottom: 9%; padding: 4px 10px; border-radius: 6px; font: 900 12px Montserrat, sans-serif; color: #0b1205; background: var(--hw); }
.hw-z__chip.is-travessura { color: #fff; background: #e8642c; }
.hw-z.is-aberto { transform: rotateY(180deg); }
.hw-z.is-tremendo { animation: hw-z-treme 0.32s ease-in-out infinite; }
.hw-z.is-animando .hw-z__verso img { animation: hw-z-pula 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes hw-z-entra { from { opacity: 0; transform: translateY(16px) scale(0.9); } }
@keyframes hw-z-treme { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(1.03); } 75% { transform: rotate(5deg) scale(1.03); } }
@keyframes hw-z-pula { from { transform: scale(0.3); opacity: 0; } }

/* prêmio final dos zumbis */
.hw-final { margin: 34px auto 0; max-width: 560px; padding: 26px; border-radius: 26px;
  background: radial-gradient(30rem 16rem at 50% 0%, rgba(157, 212, 37, 0.28), transparent 70%), rgba(10, 14, 8, 0.92);
  border: 1px solid rgba(157, 212, 37, 0.45); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.hw-final__premio { margin: 14px auto 6px; }
.hw-final__premio .hw-selo__img { width: min(340px, 90%); animation: hw-z-pula 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.hw-final__texto { margin-bottom: 18px; font: 400 15px/1.5 Geist, sans-serif; color: rgba(255, 255, 255, 0.78); }
.hw-final__texto b { color: #fff; }

/* selo de combo sem arte própria (4 ou 5 jogos): o ticket do tema com o texto por cima */
.hw-selo { position: relative; display: inline-grid; place-items: center; width: 300px; max-width: 100%; aspect-ratio: 1512 / 1040; }
.hw-selo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)); }
.hw-selo b, .hw-selo em { position: relative; font: 900 22px/1 Montserrat, sans-serif; font-style: normal; color: #fff6dc;
  text-shadow: 0 3px 0 #2d3d0a, 0 0 12px rgba(0, 0, 0, 0.8); }
.hw-selo b { margin-top: 18%; }
.hw-selo em { margin-top: -32%; font-size: 30px; color: var(--hw-claro); }

/* roleta */
.hw-roleta { position: relative; margin: 30px auto 0; max-width: 980px; }
.hw-roleta__janela { position: relative; overflow: hidden; padding: 26px 0; border-radius: 26px;
  background: linear-gradient(180deg, rgba(20, 30, 10, 0.85), rgba(6, 9, 5, 0.95)); border: 1px solid rgba(157, 212, 37, 0.3);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), 0 24px 60px rgba(0, 0, 0, 0.5);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.hw-roleta__fita { display: flex; gap: 14px; width: max-content; will-change: transform; }
.hw-cartao { flex: none; width: 210px; aspect-ratio: 1536 / 1024; display: grid; place-items: center; transition: transform 0.4s, filter 0.4s; }
.hw-cartao img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); }
.hw-cartao.is-ganhou { transform: scale(1.12); filter: drop-shadow(0 0 22px rgba(198, 242, 90, 0.75)); }
.hw-roleta__seta { position: absolute; left: 50%; top: -10px; bottom: -10px; width: 4px; transform: translateX(-50%); border-radius: 4px; z-index: 3;
  background: linear-gradient(180deg, var(--hw-claro), var(--hw)); box-shadow: 0 0 18px rgba(198, 242, 90, 0.8); }
.hw-roleta__seta::before, .hw-roleta__seta::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border: 12px solid transparent; }
.hw-roleta__seta::before { top: -4px; border-top-color: var(--hw-claro); }
.hw-roleta__seta::after { bottom: -4px; border-bottom-color: var(--hw-claro); }
.hw-giros { margin: 22px 0 14px; font: 800 14px Montserrat, sans-serif; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.7); }
.hw-giros b { font-size: 22px; color: var(--hw-claro); }

/* resultado do giro */
.hw-resultado { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s; }
.hw-resultado.is-aberto { opacity: 1; }
.hw-resultado__card { width: min(460px, 100%); padding: 18px 24px 26px; border-radius: 26px; text-align: center;
  background: radial-gradient(30rem 16rem at 50% 0%, rgba(157, 212, 37, 0.3), transparent 70%), #0a0e08;
  border: 1px solid rgba(157, 212, 37, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  transform: translateY(20px) scale(0.94); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hw-resultado.is-aberto .hw-resultado__card { transform: none; }
.hw-resultado__card img { width: min(330px, 90%); }
.hw-resultado__card h3 { margin-top: 6px; font: 900 24px/1.15 Montserrat, sans-serif; color: #fff; }
.hw-resultado__card p { margin-top: 8px; font: 400 15px/1.5 Geist, sans-serif; color: rgba(255, 255, 255, 0.75); }
.hw-resultado__card p b { color: #fff; }
.hw-resultado__acoes { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* minhas ofertas */
.hw-ofertas { margin: 46px auto 0; max-width: 720px; }
.hw-ofertas__lista { margin-top: 18px; display: grid; gap: 12px; }
.hw-oferta { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; text-align: left;
  background: rgba(10, 14, 8, 0.85); border: 1px solid rgba(157, 212, 37, 0.25); }
.hw-oferta .hw-selo__img { width: 120px; flex: none; }
.hw-oferta .hw-selo { width: 120px; flex: none; }
.hw-oferta .hw-selo b { font-size: 10px; } .hw-oferta .hw-selo em { font-size: 14px; }
.hw-oferta__txt { flex: 1; min-width: 0; }
.hw-oferta__txt b { display: block; font: 800 16px/1.25 Montserrat, sans-serif; color: #fff; }
.hw-oferta__txt small { font: 400 13px Geist, sans-serif; color: rgba(255, 255, 255, 0.55); }
.hw-oferta.is-usada { opacity: 0.5; }

/* regras e aviso */
.hw-regras { margin: 40px auto 0; max-width: 720px; text-align: left; border-radius: 18px; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1); }
.hw-regras summary { padding: 14px 18px; cursor: pointer; font: 800 15px Montserrat, sans-serif; color: #fff; }
.hw-regras ul { padding: 0 18px 16px 36px; list-style: disc; display: grid; gap: 6px; font: 400 14px/1.5 Geist, sans-serif; color: rgba(255, 255, 255, 0.7); }
.hw-regras b { color: #fff; }
.hw-aviso { position: fixed; left: 50%; bottom: 100px; z-index: 130; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: 0.25s;
  font: 600 14px Geist, sans-serif; color: #fff; background: #1b2410; border: 1px solid rgba(157, 212, 37, 0.5); }
.hw-aviso.is-visivel { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .hw-pg { padding-top: 24px; }
  .hw-pg__sub { font-size: 15px; }
  .hw-pg__d1 { width: 66px; left: -8px; top: 8px; }
  .hw-pg__d2 { width: 58px; right: -4px; top: 4px; }
  .hw-pg__d3 { display: none; }
  .hw-escolha__ops { grid-template-columns: 1fr; }
  .hw-op img { width: 170px; }
  .hw-tab { gap: 8px; }
  .hw-z { border-radius: 14px; }
  .hw-z__chip { font-size: 9px; padding: 3px 6px; }
  .hw-tentativas li { width: 42px; height: 42px; }
  .hw-cartao { width: 150px; }
  .hw-btn--grande { padding: 16px 30px; font-size: 17px; }
  .hw-oferta .hw-selo__img, .hw-oferta .hw-selo { width: 92px; }
  .hw-oferta__txt b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-z, .hw-z.is-tremendo { animation: none; }
}