/* MONSTERIDLE — AURA DOS POKÉMON PEGOS COM MONSTER BALL E PREMIER BALL * * Quem foi pego com uma dessas duas bolas carrega a aura para sempre * (p.aura = "master" | "premier", gravado em Jogo.guardarCaptura). É só * cosmético: nenhum stat muda. * * Como o mockup (mockups/monsterball, "MonsterBall.dc.html") pede, a aura NÃO * é mais um brilho borrado em volta do bicho: é um CONTORNO DURO de 1 px que * abraça a silhueta do sprite + um halo macio a 55% por fora. * - No DOM: quatro drop-shadow SEM blur (direita, esquerda, baixo, cima — * encadeados eles também fecham as diagonais) + um quinto COM blur (halo). * - No canvas do mapa: o mesmo sprite desenhado 4x deslocado de 1 px na cor * da vez, e o sprite normal por cima (Aura.desenharNoCanvas, em sprites.js). * * UM RELÓGIO SÓ. A cor de um bicho no mapa e a do mesmo bicho na ficha aberta * são iguais no mesmo instante: quem escreve as cores (--aura-cor, --aura-bx…) * em cada elemento é Aura.pintarDom (js/ui/sprites.js), com o MESMO instante do * quadro do mapa. Aqui fica só o desenho. Não há @keyframes para a cor de * propósito: vários cards são reescritos por innerHTML a cada 100 ms e uma * animação CSS recomeçaria do zero a cada vez. * * Como usar em qualquer tela (inclusive as de outros módulos): * '' * Aura.classe(p) devolve "aura-monster", "aura-premier" ou "" (sem aura); * Aura.dados(p) devolve o data-aura-fase do bicho (a fase deslocada dele). * Sem o data-aura-fase a aura funciona igual, só com fase 0. */ /* ---------------- MONSTER BALL: contorno que gira o matiz ---------------- * --aura-cor / --aura-cor-halo: a cor da vez (hsl, matiz andando 360° em 5 s, * fase deslocada por bicho), escritas pelo Aura.pintarDom. */ .aura-monster, img.aura-rgb { --aura-px: 2px; /* 1 px do sprite: nos cards ele aparece a ~2x */ --aura-halo: 6px; /* !important: vários lugares (ficha, cards) já têm um filter de brilho do tipo, com seletor mais específico — a aura manda por cima dele */ filter: drop-shadow(var(--aura-px) 0 0 var(--aura-cor, #ff2d95)) drop-shadow(calc(var(--aura-px) * -1) 0 0 var(--aura-cor, #ff2d95)) drop-shadow(0 var(--aura-px) 0 var(--aura-cor, #ff2d95)) drop-shadow(0 calc(var(--aura-px) * -1) 0 var(--aura-cor, #ff2d95)) drop-shadow(0 0 var(--aura-halo) var(--aura-cor-halo, rgba(255,45,149,.55))) !important; } /* ---------------- PREMIER BALL: a marca de quem apoia ---------------- * Mesma técnica (contorno de 1 px + halo), outra identidade: em vez de girar o * matiz, o contorno é BRANCO-PÉROLA e, a cada 3,6 s, um brilho dourado de borda * vermelha (as cores da própria Premier) passa pela silhueta, de cima-esquerda * para baixo-direita, em ~1,2 s. No DOM o brilho é o sexto drop-shadow * (--aura-bx/--aura-by/--aura-bc), que atravessa o sprite na diagonal enquanto * o contorno esquenta de pérola para ouro e rosa e volta. No canvas é uma faixa * de luz de verdade andando pelo contorno — no mesmo tempo. */ .aura-premier { --aura-px: 2px; --aura-halo: 6px; filter: drop-shadow(var(--aura-px) 0 0 var(--aura-cor, #fff3e3)) drop-shadow(calc(var(--aura-px) * -1) 0 0 var(--aura-cor, #fff3e3)) drop-shadow(0 var(--aura-px) 0 var(--aura-cor, #fff3e3)) drop-shadow(0 calc(var(--aura-px) * -1) 0 var(--aura-cor, #fff3e3)) drop-shadow(0 0 var(--aura-halo) rgba(255,243,227,.55)) drop-shadow(var(--aura-bx, 6px) var(--aura-by, 6px) var(--aura-halo) var(--aura-bc, rgba(255,120,90,0))) !important; } /* ---------------- ativo em combate: o contorno respira ---------------- * ±4,5% em 1,15 s, como no mockup (--aura-esc, escrito pelo Aura.pintarDom). */ .aura-ativo { transform: scale(var(--aura-esc, 1)); } /* ---------------- espessura por tamanho de exibição ---------------- * O contorno é "1 px do sprite" (8 px na escala 8x do mockup). Nos cards o * sprite de pixel (Aura.sprite: ~25x31) aparece a ~2x -> 2 px de tela; na * ficha, a ~4x -> 3 px; no card pequeno do topo, a ~1,5x -> 1,5 px. */ .f-glow img.aura-monster, .f-glow img.aura-premier { --aura-px: 3px; --aura-halo: 12px; } .f-arte img.aura-monster:first-child, .f-arte img.aura-premier:first-child { --aura-px: 2px; --aura-halo: 12px; } #topo-poke .meu img.aura-monster, #topo-poke .meu img.aura-premier, .fus-card img.aura-monster, .fus-card img.aura-premier { --aura-px: 1.5px; --aura-halo: 5px; } .bs-alvo img.aura-monster, .bs-alvo img.aura-premier, .fus-moldura.grande img.aura-monster, .fus-moldura.grande img.aura-premier { --aura-px: 2.5px; --aura-halo: 9px; } /* ---------------- o selo "AURA · Monster Ball" da ficha ---------------- * Monster: o fundo é a cor da vez do MESMO bicho (mesmo data-aura-fase). * Premier: pérola com o brilho dourado passando no mesmo tempo da aura. */ .aura-selo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; color: #14141a; vertical-align: 1px; } .aura-selo-monster { background: var(--aura-cor, #ff2d95); box-shadow: 0 0 10px var(--aura-cor-halo, rgba(255,45,149,.45)); } .aura-selo-premier { background: linear-gradient(115deg, #fff3e3 0 38%, #ff4d5e 43%, #ffd36b 50%, #ff4d5e 57%, #fff3e3 62% 100%); background-size: 300% 100%; background-position: var(--aura-bp, 0%) 0; box-shadow: 0 0 10px rgba(255,211,107,.35); } /* a bola da captura no rodapé da ficha */ .f-bola-ico { width: 18px; height: 18px; margin: -3px 0; } /* ---------------- o ícone da Monster Ball ---------------- * O PNG (assets/itens/28198.png) tem casco grafite e base prata NEUTROS: a * única cor é o equador. hue-rotate não mexe em cinza neutro, então girar o * ícone inteiro gira só o equador — no mesmo relógio da aura (fase 0). Pega o * ícone em qualquer tela (bolsa, loja, helper, calendário, barra de ação) sem * mexer no HTML de ninguém. */ img[src$="itens/28198.png"] { filter: hue-rotate(var(--aura-giro, 0deg)); } /* ---------------- acessibilidade ---------------- * Sem animação (o Aura.pintarDom também para): a Monster fica num ciano fixo, * a Premier em pérola parada, a bola no tom do PNG. */ @media (prefers-reduced-motion: reduce) { .aura-monster, img.aura-rgb { filter: drop-shadow(var(--aura-px) 0 0 #2dffd5) drop-shadow(calc(var(--aura-px) * -1) 0 0 #2dffd5) drop-shadow(0 var(--aura-px) 0 #2dffd5) drop-shadow(0 calc(var(--aura-px) * -1) 0 #2dffd5) drop-shadow(0 0 var(--aura-halo) rgba(45,255,213,.55)) !important; } .aura-premier { filter: drop-shadow(var(--aura-px) 0 0 #fff3e3) drop-shadow(calc(var(--aura-px) * -1) 0 0 #fff3e3) drop-shadow(0 var(--aura-px) 0 #fff3e3) drop-shadow(0 calc(var(--aura-px) * -1) 0 #fff3e3) drop-shadow(0 0 var(--aura-halo) rgba(255,211,107,.45)) !important; } .aura-ativo { transform: none; } .aura-selo-monster { background: #2dffd5; } }