/* V392 — Guia da primeira batalha. * * Depois do First Morning, o jogador sabe o que cada janela faz mas nao sabe * qual e o proximo passo. Duas dicas cobrem esse vao: o botao MAP pulsa ate ele * abrir o mapa, e o Stage 1 recebe um halo e uma caixa ate a primeira run. * * Estado puramente local e de apresentacao. Nao concede nem altera nada. */ /* --- 1. Botao MAP pulsando ------------------------------------------- */ /* Marcado no para que a regra sobreviva a qualquer re-render do HUD. * * O brilho vem de um ::after e nao do box-shadow do proprio botao: * 40-pixel-polish.css declara box-shadow e border com !important em .navbtn, e * pela cascata do CSS uma declaracao !important vence uma animacao. Animar o * botao direto faria a animacao rodar sem pintar nada na tela. * .navbtn nao usa nenhum pseudo-elemento, entao o ::after esta livre. */ body.firstStageHintMapV392 #mapBtn{position:relative} /* Camada 1: a moldura pisca com contraste forte, para o olho pegar o botao mesmo na visao periferica. */ body.firstStageHintMapV392 #mapBtn::after{ content:"";position:absolute;inset:-3px;z-index:2;pointer-events:none; border:3px solid #ffcf5e; animation:firstStageBeaconV392 .95s ease-in-out infinite; } @keyframes firstStageBeaconV392{ 0%,100%{opacity:.12;box-shadow:0 0 0 0 #f2b24c00} 50%{opacity:1;box-shadow:0 0 22px 5px #ffc75e,inset 0 0 9px 1px #fff2cf} } /* Camada 2: anel expandindo, como um ping de radar. Da movimento para fora do botao e denuncia a posicao mesmo se o jogador estiver olhando o centro. */ body.firstStageHintMapV392 #mapBtn::before{ content:"";position:absolute;inset:-3px;z-index:1;pointer-events:none; border:2px solid #ffcf5e; animation:firstStageBeaconRingV392 1.9s ease-out infinite; } @keyframes firstStageBeaconRingV392{ 0%{opacity:.85;transform:scale(1)} 75%{opacity:0;transform:scale(1.5)} 100%{opacity:0;transform:scale(1.5)} } /* --- 2. Halo dourado no Stage 1 --------------------------------------- */ /* Selector por atributo: #portalNodes tem o innerHTML reescrito a cada renderizacao, entao o halo precisa vir do CSS e nao de um elemento nosso. */ body.firstStageHintStageV392 #portalNodes .portalStageNode[data-portal-stage="1"]::after{ content:"";position:absolute;left:50%;top:50%;width:34px;height:34px; border-radius:50%;border:2px solid #f2b24c; transform:translate(-50%,-50%);pointer-events:none; animation:firstStageHaloV392 1.9s ease-out infinite; } @keyframes firstStageHaloV392{ 0%{opacity:.95;transform:translate(-50%,-50%) scale(.85)} 70%{opacity:0;transform:translate(-50%,-50%) scale(2.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)} } /* --- 3. Caixa de texto ao lado do Stage 1 ----------------------------- */ /* Filha de .portalMapWrap, e nao de #portalNodes, para nao ser apagada junto com os nos. As coordenadas vem do proprio no, via variavel. */ #firstStageHintBoxV392{ position:absolute;left:var(--hint-left,29%);top:var(--hint-top,18%); z-index:6;display:none;margin-left:30px;padding:8px 12px; transform:translateY(-50%);pointer-events:none;white-space:nowrap; border:1px solid #9c7027;background:rgba(7,12,17,.95); box-shadow:inset 0 0 0 2px #171107,0 4px 18px #000b; color:#f2d078;font:900 11px/1.4 var(--pixel-font,monospace);letter-spacing:.1em; animation:firstStageHintInV392 .3s ease-out both; } body.firstStageHintStageV392 #firstStageHintBoxV392{display:block} /* Seta ligando a caixa ao no. */ #firstStageHintBoxV392::before{ content:"";position:absolute;right:100%;top:50%; border:6px solid transparent;border-right-color:#9c7027; transform:translateY(-50%); } @keyframes firstStageHintInV392{from{opacity:0;transform:translateY(-50%) translateX(-8px)} to{opacity:1;transform:translateY(-50%) translateX(0)}} /* Telas estreitas: a caixa nao cabe a direita do no, entao vai para baixo. */ @media(max-width:850px){ #firstStageHintBoxV392{ margin-left:0;margin-top:26px;transform:translateX(-50%); font-size:11px;padding:6px 9px; } #firstStageHintBoxV392::before{ right:auto;left:50%;top:auto;bottom:100%; border-right-color:transparent;border-bottom-color:#9c7027; transform:translateX(-50%); } @keyframes firstStageHintInV392{from{opacity:0}to{opacity:1}} } /* Acessibilidade: a informacao permanece, so a pulsacao para. O botao fica com brilho fixo e o halo vira um anel estatico, ambos ainda visiveis. Cobre as tres fontes: REDUCE MOTION e REDUCE FLASHES do Settings do jogo (79-settings-v300.js marca as classes no ) e a preferencia do sistema operacional, para quem nunca abriu o Settings. */ /* Reducao de movimento nao significa aviso invisivel. O que incomoda vestibulo e movimento grande - escala, deslocamento, parallax - e nao uma variacao de opacidade. Entao o anel que expande sai de cena, mas a moldura continua piscando, mais devagar e com contraste menor. O jogador precisa achar o botao; o tutorial trava ali se ele nao achar. REDUCE FLASHES e mais restritivo por definicao e para a piscada de vez. */ @keyframes firstStageBeaconCalmV392{ 0%,100%{opacity:.45;box-shadow:0 0 6px 1px #ffc75e4d} 50%{opacity:1;box-shadow:0 0 16px 3px #ffc75e8f} } @media(prefers-reduced-motion:reduce){ body.firstStageHintMapV392 #mapBtn::after{animation:firstStageBeaconCalmV392 2.4s ease-in-out infinite} body.firstStageHintMapV392 #mapBtn::before{animation:none;opacity:0} body.firstStageHintStageV392 #portalNodes .portalStageNode[data-portal-stage="1"]::after{ animation:none;opacity:.9;transform:translate(-50%,-50%) scale(1.6) } #firstStageHintBoxV392{animation:none} } .tharkiraReduceMotionV300 body.firstStageHintMapV392 #mapBtn::after{ animation:firstStageBeaconCalmV392 2.4s ease-in-out infinite; } /* Sem piscar: brilho fixo, ainda destacado. */ .tharkiraReduceFlashesV300 body.firstStageHintMapV392 #mapBtn::after{ animation:none;opacity:1;box-shadow:0 0 16px 3px #ffc75e8f; } .tharkiraReduceMotionV300 body.firstStageHintMapV392 #mapBtn::before, .tharkiraReduceFlashesV300 body.firstStageHintMapV392 #mapBtn::before{ animation:none;opacity:0; } .tharkiraReduceMotionV300 body.firstStageHintStageV392 #portalNodes .portalStageNode[data-portal-stage="1"]::after, .tharkiraReduceFlashesV300 body.firstStageHintStageV392 #portalNodes .portalStageNode[data-portal-stage="1"]::after{ animation:none;opacity:.9;transform:translate(-50%,-50%) scale(1.6); } .tharkiraReduceMotionV300 #firstStageHintBoxV392{animation:none}