/* Halloween skin for /jogos (Oct 2026). Every rule is scoped under html.tema-halloween, set by the small script
   in <head>: ?tema=halloween turns it on for this tab (sessionStorage rp_tema), ?tema=off turns it off.
   Art by Codex in asset/halloween/ (sources + sizes: jogos/design/halloween-v1/sprites.json); the hero, bats,
   ghosts, spiders and graveyard are added by src/halloween.js. Creepster is loaded by the <head> script. */
html.tema-halloween {
  --hw-night: #0e0718; --hw-night2: #1a0d2c; --hw-line: #3d2463;
  --hw-orange: #ff7a00; --hw-orange2: #ffb347; --hw-slime: #84f04a; --hw-text: #f6efff; --hw-muted: #b9a6d6;
  --hw-spooky: 'Creepster', 'Impact', cursive;
}
html.tema-halloween, html.tema-halloween body { background: var(--hw-night); }
html.tema-halloween body { color: var(--hw-text); }
html.tema-halloween body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('../asset/halloween/page-bg.webp') center top / cover no-repeat, linear-gradient(180deg, #0a0512, var(--hw-night2));
}
html.tema-halloween body::after {   /* dark edges */
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(0,0,0,.5) 100%);
}
html.tema-halloween .wrap { position: relative; z-index: 1; }

/* the panel banner + title make way for the Halloween hero */
html.tema-halloween .jogos-hero-banner, html.tema-halloween.hero-reserve .jogos-hero-banner.hidden, html.tema-halloween .header { display: none !important; }

/* ── hero: scene 1:1, hanging sign with the countdown, logo, tagline (positions from the art's own layout) ── */
.hw-hero { position: relative; aspect-ratio: 1 / 1; margin: 0 -12px 4px; overflow: hidden; container-type: inline-size; }
.hw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; pointer-events: none;
  background: linear-gradient(transparent, var(--hw-night)); }
.hw-plank { position: absolute; left: 18.33%; top: 1.67%; width: 63.33%; z-index: 3; animation: hwSway 5s ease-in-out infinite; transform-origin: 50% -40%; }
.hw-plank img { display: block; width: 100%; height: auto; }
.hw-plank-txt { position: absolute; left: 19.7%; top: 37.5%; width: 75%; height: 45%; display: flex; align-items: center; justify-content: center;
  font-family: var(--hw-spooky); font-size: 4.3cqw; letter-spacing: .04em; color: var(--hw-orange2); white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,122,0,.9), 0 2px 0 #3a1200; }
.hw-logo { position: absolute; left: 4.17%; top: 26%; width: 91.67%; height: auto; z-index: 1;
  filter: drop-shadow(0 0 14px rgba(255,110,0,.55)); animation: hwGlow 3.2s ease-in-out infinite, hwFlicker 9s infinite; }
.hw-tag { position: absolute; left: 0; right: 0; top: 71%; margin: 0; text-align: center; z-index: 3;
  font: 800 4.2cqw 'Sora', sans-serif; color: #f3e8ff; text-shadow: 0 2px 8px #000, 0 0 14px rgba(168,85,247,.8); }
@keyframes hwSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes hwGlow { 50% { filter: drop-shadow(0 0 22px rgba(255,130,0,.85)); } }
@keyframes hwFlicker { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .55; } 95% { opacity: 1; } 97% { opacity: .75; } 98% { opacity: 1; } }

/* ── light on the scene ── */
.hw-moon { position: absolute; left: 60%; top: 2%; width: 42%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,190,90,.55) 0%, rgba(255,140,40,.22) 40%, transparent 70%); animation: hwMoon 4.5s ease-in-out infinite; }
@keyframes hwMoon { 50% { opacity: .55; transform: scale(1.08); } }
.hw-pglow { position: absolute; left: var(--x); top: var(--y); width: var(--r); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,170,40,.7) 0%, rgba(255,90,0,.28) 38%, transparent 70%);
  animation: hwPumpkin 1.7s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes hwPumpkin { 0% { opacity: .95; } 35% { opacity: .55; } 50% { opacity: .9; } 70% { opacity: .65; } 100% { opacity: 1; } }
.hw-fogl { position: absolute; left: -40%; width: 180%; pointer-events: none; mix-blend-mode: screen; }
.hw-fogl1 { bottom: 4%; height: 24%; background: radial-gradient(40% 50% at 30% 60%, rgba(190,160,255,.35), transparent 70%), radial-gradient(35% 45% at 75% 50%, rgba(190,160,255,.28), transparent 70%); animation: hwFogA 16s ease-in-out infinite alternate; }
.hw-fogl2 { bottom: 14%; height: 20%; background: radial-gradient(30% 50% at 55% 50%, rgba(255,160,90,.18), transparent 70%), radial-gradient(30% 45% at 15% 60%, rgba(200,170,255,.22), transparent 70%); animation: hwFogB 22s ease-in-out infinite alternate; }
@keyframes hwFogA { to { transform: translateX(18%); } }
@keyframes hwFogB { to { transform: translateX(-16%); } }
.hw-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hw-bolt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: 0;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #c4b5fd) drop-shadow(0 0 14px #a855f7); }
.hw-bolt path { fill: none; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hw-bolt path.br { stroke-width: 1.2px; opacity: .8; }
.hw-hero.hw-striking .hw-bolt { animation: hwBolt .9s ease-out; }
.hw-hero.hw-striking .hw-bg { animation: hwSkyFlash .9s ease-out; }
.hw-hero.hw-striking .hw-logo { animation: hwLogoFlash .9s ease-out; }
@keyframes hwBolt { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .15; } 22% { opacity: 1; } 55% { opacity: .6; } 100% { opacity: 0; } }
@keyframes hwSkyFlash { 0%, 100% { filter: none; } 6% { filter: brightness(1.9) saturate(.7); } 14% { filter: brightness(1.1); } 22% { filter: brightness(1.6) saturate(.8); } 45% { filter: brightness(1.05); } }
@keyframes hwLogoFlash { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255,110,0,.55)); } 6%, 22% { filter: drop-shadow(0 0 30px #fff) brightness(1.5); } }
.hw-flash { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(233,213,255,.6), rgba(168,85,247,.15) 60%, transparent); }
.hw-flash.on { animation: hwScreenFlash .9s ease-out; }
@keyframes hwScreenFlash { 0% { opacity: 0; } 6% { opacity: .7; } 14% { opacity: 0; } 22% { opacity: .45; } 60%, 100% { opacity: 0; } }
.hw-eyes { position: fixed; z-index: 1; width: 22px; height: 8px; pointer-events: none; opacity: 0; animation: hwEyes 9s infinite;
  background: radial-gradient(circle at 25% 50%, var(--c) 0 2.2px, transparent 3.5px), radial-gradient(circle at 75% 50%, var(--c) 0 2.2px, transparent 3.5px);
  filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 8px var(--c)); }
@keyframes hwEyes { 0%, 30% { opacity: 0; } 34%, 52% { opacity: .95; transform: scaleY(1); } 54% { transform: scaleY(.1); } 56%, 70% { opacity: .95; transform: scaleY(1); } 74%, 100% { opacity: 0; } }

/* ── sprites (Codex sheets, frames side by side) ── */
.hw-spider { position: absolute; top: 0; z-index: 3; width: 40px; pointer-events: none; animation: hwDangle 3.6s ease-in-out infinite; }
.hw-thread { position: absolute; left: 50%; top: 0; width: 1px; height: var(--len, 40px); background: linear-gradient(#fff0, #ffffffb0); }
.hw-spider-sp { position: absolute; top: calc(var(--len, 40px) - 6px); left: 0; width: 40px; height: 50px;
  background: url('../asset/halloween/spider.png') 0 0 / 240px 50px no-repeat; animation: hwSpider .75s steps(6) infinite; }
@keyframes hwSpider { to { background-position: -240px 0; } }
@keyframes hwDangle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
html.tema-halloween .lb-section, html.tema-halloween .vagas-card { position: relative; }

.hw-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hw-bat { position: absolute; left: -90px; width: 84px; height: 52px; animation: hwFly var(--d, 22s) linear infinite; animation-delay: var(--delay, 0s); }
.hw-bat i { display: block; width: 84px; height: 52px; background: url('../asset/halloween/bats.png') 0 0 / 672px 52px no-repeat; animation: hwBat .66s steps(8) infinite; }
@keyframes hwBat { to { background-position: -672px 0; } }
@keyframes hwFly {
  0% { transform: translate(0, 0) scale(var(--s, 1)); } 25% { transform: translate(30vw, -18px) scale(var(--s, 1)); }
  50% { transform: translate(60vw, 14px) scale(var(--s, 1)); } 75% { transform: translate(90vw, -10px) scale(var(--s, 1)); }
  100% { transform: translate(calc(100vw + 140px), 6px) scale(var(--s, 1)); }
}
.hw-ghost { position: absolute; right: -80px; width: 60px; height: 70px; opacity: .32; animation: hwGhost var(--d, 36s) linear infinite; animation-delay: var(--delay, 0s); }
.hw-ghost i { display: block; width: 60px; height: 70px; background: url('../asset/halloween/ghost.png') 0 0 / 360px 70px no-repeat; animation: hwGhostSp .75s steps(6) infinite; }
@keyframes hwGhostSp { to { background-position: -360px 0; } }
@keyframes hwGhost { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 180px)); } }

/* ── sponsor strip + top bar ── */
html.tema-halloween .platform-strip { background: var(--hw-night); }
html.tema-halloween .platform-strip::before { background: linear-gradient(to right, var(--hw-night), transparent); }
html.tema-halloween .platform-strip::after { background: linear-gradient(to left, var(--hw-night), transparent); }
html.tema-halloween .platform-card { border-color: #ff7a0066; box-shadow: 0 0 10px rgba(255,122,0,.3); }
html.tema-halloween .rp-top-bar { background: rgba(14,7,24,.9); border-bottom: 1px solid #ff7a0055; box-shadow: 0 6px 18px -8px rgba(255,122,0,.4); margin-bottom: 0; }
html.tema-halloween .rp-brand img { filter: drop-shadow(0 0 8px rgba(255,122,0,.55)); }
html.tema-halloween #rp-top-username { color: var(--hw-muted); }
html.tema-halloween .btn-logout { border-color: var(--hw-line); color: var(--hw-muted); }
html.tema-halloween .btn-login-sm { background: linear-gradient(120deg, #ff6a00, #ffb347); color: #1a0b00; box-shadow: 0 0 14px rgba(255,122,0,.5); }

/* ── section heads on the slime plaque ── */
html.tema-halloween .hub-sec-head { padding-left: 0; align-items: center; text-align: center; }
html.tema-halloween .hub-sec-head::before { display: none; }
html.tema-halloween .hub-sec-head h2 {
  width: 100%; aspect-ratio: 1000 / 150; justify-content: center; padding: 0 12% 2.2%;
  background: url('../asset/halloween/sec-plaque.png') center / 100% 100% no-repeat;
  font-family: var(--hw-spooky); font-weight: 400; font-size: clamp(17px, 5.4vw, 24px); letter-spacing: .05em;
  color: var(--hw-orange2); text-shadow: 0 0 10px rgba(255,122,0,.8), 0 2px 0 #3a1200;
}
html.tema-halloween .hub-sec-ico { display: none; }
html.tema-halloween .hub-sec-sub { color: var(--hw-muted); margin-top: 2px; }

/* ── game cards inside the slime frames ── */
html.tema-halloween .game-card { border: 0; border-radius: 7%/7%; box-shadow: 0 10px 26px -10px rgba(255,100,0,.65); }
html.tema-halloween .game-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url('../asset/halloween/card-frame-portrait.png') center / 100% 100% no-repeat;
}
html.tema-halloween .games-live .game-card::after { background-image: url('../asset/halloween/card-frame-square.png'); }
html.tema-halloween .card-show::after { background-image: url('../asset/halloween/card-frame-wide.png'); }
html.tema-halloween .game-card .chip, html.tema-halloween .game-card .badge { z-index: 2; top: 14%; }
html.tema-halloween .game-card .body { z-index: 2; }
html.tema-halloween .game-card .scrim { background: linear-gradient(0deg, rgba(20,6,30,.95) 0%, rgba(40,10,50,.5) 46%, transparent 70%); }
html.tema-halloween .game-card .badge {
  background: url('../asset/halloween/pumpkin-badge.png') center / 100% 100% no-repeat; box-shadow: none;
  color: #3a1500; padding: 4px 9px 4px 22px; min-width: 52px; text-align: center; text-shadow: 0 1px 0 #ffd08a;
}
html.tema-halloween .game-card .game-name { font-family: var(--hw-spooky); font-weight: 400; letter-spacing: .04em; font-size: 16px; color: #ffe2b8; text-shadow: 0 0 10px rgba(255,122,0,.8), 0 2px 0 #000; }
html.tema-halloween .game-card .game-cta { background: linear-gradient(135deg, var(--hw-orange2), var(--hw-orange)); color: #1a0b00; box-shadow: 0 0 10px rgba(255,122,0,.55); }
html.tema-halloween .inf-promo { border-color: var(--hw-orange); box-shadow: 0 0 30px -4px rgba(255,122,0,.65); }

/* ── ranking: pumpkin-night colours, garland across the top ── */
html.tema-halloween .lb-section { --lb-g1: #7c2d12 !important; --lb-g2: #3b0f5c !important; --lb-g3: #12081f !important;
  border: 2px solid #ff7a0077; box-shadow: 0 0 30px -8px rgba(255,122,0,.6); padding-top: 44px; }
html.tema-halloween .lb-section::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1200 / 180; pointer-events: none;
  background: url('../asset/halloween/ranking-garland.png') center top / 100% auto no-repeat;
}
html.tema-halloween .lb-title { position: relative; margin-top: -30px; font-family: var(--hw-spooky); font-weight: 400; font-size: 22px; letter-spacing: .1em; color: #ffd8a8; opacity: 1; text-shadow: 0 0 12px rgba(255,122,0,.8); }
html.tema-halloween .lb-tab.active, html.tema-halloween .lb-chip.active { background: linear-gradient(100deg, #ffb347, #ff7a00); color: #1a0b00; }

/* ── PopGram, Vagas de Volta, Muro da Fama tombstones, footer graveyard ── */
html.tema-halloween .gram-highlight { color: var(--hw-text);
  background: linear-gradient(#1f1033, #1f1033) padding-box, linear-gradient(135deg, var(--hw-orange2), #f02d8b 45%, #7c3aed 85%) border-box;
  box-shadow: 0 0 26px -8px rgba(240,45,139,.5); }
html.tema-halloween .gram-highlight::before { background: radial-gradient(ellipse at 25% 30%, #3a1d5e 0%, transparent 48%), radial-gradient(ellipse at 75% 65%, #4a1838 0%, transparent 48%), linear-gradient(120deg, #1f1033, #2a1445 55%, #1a0d2b); }
html.tema-halloween .gram-highlight-desc, html.tema-halloween .gram-highlight-eyebrow { color: var(--hw-muted); }
html.tema-halloween .gram-highlight-eyebrow .dot { background: var(--hw-orange); }
html.tema-halloween .gram-highlight-cta { background: linear-gradient(135deg, var(--hw-orange2), var(--hw-orange)); color: #1a0b00; box-shadow: 0 0 16px rgba(255,122,0,.45); }
html.tema-halloween .vagas-card { background: linear-gradient(180deg, #2a1645 0%, #1c0f30 140px); border-color: var(--hw-line); box-shadow: 0 0 24px -10px rgba(168,85,247,.6); }
html.tema-halloween .vagas-card-hint { color: var(--hw-muted); }
html.tema-halloween .fame-row { gap: 4px; }
html.tema-halloween .fame-lbl { color: var(--hw-orange2); font-family: var(--hw-spooky); font-weight: 400; font-size: 17px; letter-spacing: .05em; flex-basis: 100%; text-align: center; }
html.tema-halloween .fame-row a {
  width: 76px; aspect-ratio: 2 / 1; display: inline-flex; align-items: center; justify-content: center; padding: 6px 6px 0;
  background: url('../asset/halloween/tombstone-chip.webp') center / 100% 100% no-repeat; border: 0; border-radius: 0;
  color: #ece6ff; font-size: 10.5px; text-shadow: 0 1px 2px #000;
}
html.tema-halloween .footer { color: var(--hw-muted); position: relative; z-index: 1; }
html.tema-halloween .footer a { color: var(--hw-orange2); }
.hw-ground { margin-top: -10px; pointer-events: none; }
.hw-ground img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-ghost, .hw-eyes, .hw-flash { display: none; }
  .hw-hero *, .hw-spider, .hw-spider-sp { animation: none !important; }
}