/* ══ A Jornada do Herói — estudo de experiência imersiva sobre Tibia ══
   Identidade oficial de tibia.com: fonte Asul · carvão · títulos #ffcc00 com sombra · CTA #ea6827 com anel.
   Elementos de interface inspirados no cliente do jogo: janelas de pedra, barras de PV/mana, texto de dano.
   Desempenho: o que se move por quadro tem camada própria (will-change) e só muda transform/opacity;
   sombras e desfoques ficam "assados" na rasterização (nada de backdrop-filter sobre o mapa em movimento).
   Regra de ouro: o que muda de CONTEÚDO por quadro (números, barras) mora na própria camada (will-change) — senão o
   navegador re-rasteriza o cartão/painel inteiro, com as sombras grandes, a cada quadro. */
@font-face{font-family:Asul;src:url(assets/asul-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Asul;src:url(assets/asul-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--ouro:#ffcc00;--laranja:#ea6827;--ardosia:#333649;--carvao:#1b1a18;--pedra:#2b2926;--papel:#e9dcbf;--tinta:#2a1f14;--texto:#e9dfc8;--suave:#b9ab8e;
  --jogo:Verdana,Tahoma,'Segoe UI',sans-serif;--contorno:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--carvao);color:var(--texto);font:400 16px/1.6 Asul,Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;touch-action:manipulation}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button svg{pointer-events:none}
em{font-style:normal}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}
.pular{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ouro);color:#000;padding:10px 14px;border-radius:6px}
.pular:focus{top:12px}

/* ── botões oficiais ── */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--laranja);color:#fff;border:2px solid #fff;border-radius:8px;
  box-shadow:0 0 0 3px var(--laranja),0 14px 30px rgba(0,0,0,.35);padding:13px 28px;font:700 18px/1.2 Asul,serif;transition:transform .25s,filter .25s,box-shadow .25s}
.botao:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 0 3px var(--laranja),0 18px 36px rgba(0,0,0,.4)}
.botao-mini{padding:8px 16px;font-size:14px;border-radius:6px;box-shadow:0 0 0 2px var(--laranja)}
.botao-fantasma{display:inline-flex;align-items:center;gap:8px;background:rgba(51,54,73,.9);color:#fff;border:1px solid #e6e6e6;border-radius:8px;
  box-shadow:0 0 0 3px rgba(51,54,73,.9);padding:12px 22px;font:400 16px/1.2 Asul,serif;transition:background .25s}
.botao-fantasma:hover{background:#41455c}

/* ── topo ── */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px 4%;
  background:linear-gradient(180deg,rgba(10,8,6,.7),rgba(10,8,6,0));transition:background .4s,box-shadow .4s}
.topo.solido{background:rgba(27,26,24,.97);box-shadow:0 1px 0 rgba(255,204,0,.22),0 10px 30px rgba(0,0,0,.3)}
.topo-marca img{width:108px;height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.topo-acoes{display:flex;align-items:center;gap:20px}
.topo-link{font-size:14px;color:#e6e6e6;white-space:nowrap}
.topo-link:hover{color:var(--ouro)}

/* ── a jornada ── */
.jornada{position:relative;height:1100vh}
.palco{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#2c2519 0%,#15120d 70%);isolation:isolate}
.palco>picture{display:contents}

/* abertura (fica sob o mundo; o portal recorta o mundo por cima dela) */
.abertura{position:absolute;inset:0;z-index:4;overflow:hidden;background:#120f0b}
.abertura picture{display:contents}
.abertura-fundo-camada{position:absolute;inset:-3%;will-change:transform}
.abertura-fundo,.abertura-desfoque{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.abertura-fundo{object-fit:cover;object-position:55% 50%}
.abertura-desfoque{opacity:0;visibility:hidden;will-change:opacity}
.abertura-noite{position:absolute;inset:0;background:#000;opacity:0;will-change:opacity;pointer-events:none}
.abertura-sombra{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,6,.78) 0%,rgba(10,8,6,.25) 36%,rgba(10,8,6,.05) 58%,rgba(10,8,6,.7) 100%)}
.abertura-herois{position:absolute;left:50%;bottom:-1%;z-index:2;width:min(104vw,1900px);transform:translateX(-50%);will-change:transform}
.abertura-herois img{width:100%;height:auto;max-width:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.brasas{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.brasas i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgb(255,var(--g),60) 0 38%,rgba(255,var(--g),60,.35) 55%,rgba(255,var(--g),60,0) 72%);
  opacity:0;animation:brasa 10s linear infinite;will-change:transform,opacity}
@keyframes brasa{0%{transform:translate3d(0,0,0);opacity:0}14%{opacity:.85}25%{transform:translate3d(5px,-14vh,0)}50%{transform:translate3d(-4px,-28vh,0)}
  62%{opacity:.7}75%{transform:translate3d(5px,-42vh,0)}100%{transform:translate3d(0,-56vh,0);opacity:0}}
.brasas i:nth-child(3n){animation-name:brasa-alta}
@keyframes brasa-alta{0%{transform:translate3d(0,0,0);opacity:0}14%{opacity:.85}25%{transform:translate3d(-5px,-22vh,0)}50%{transform:translate3d(4px,-44vh,0)}
  62%{opacity:.7}75%{transform:translate3d(-5px,-66vh,0)}100%{transform:translate3d(0,-88vh,0);opacity:0}}
/* no toque, a deriva lenta substitui o parallax do ponteiro (propriedade translate: soma com o transform do motor) */
.deriva .abertura-fundo-camada{animation:deriva-fundo 9s ease-in-out infinite alternate}
.deriva .abertura-herois{animation:deriva-herois 9s ease-in-out infinite alternate}
@keyframes deriva-fundo{from{translate:6px 3px}to{translate:-6px -3px}}
@keyframes deriva-herois{from{translate:-10px -2px}to{translate:10px 2px}}
.abertura-texto{position:absolute;left:0;right:0;top:11svh;z-index:4;text-align:center;padding:0 20px;will-change:transform,opacity}
.sobretitulo{font:700 12px/1.4 Asul,serif;letter-spacing:.32em;color:#eadcb8;text-shadow:0 2px 8px #000}
.abertura-texto h1{margin:14px auto 8px;width:clamp(220px,24vw,380px)}
.abertura-logo{width:100%;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.7))}
.abertura-lema{font-size:clamp(17px,1.7vw,23px);color:#fff;text-shadow:0 2px 10px #000}
.abertura-lema em{color:var(--ouro)}
.abertura-acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:24px}

/* o mundo: o mapa é uma imagem composta sozinha (rasterizada uma vez no tamanho natural; a câmera só a transforma) */
.camada-mundo{position:absolute;inset:0;z-index:5;background:var(--papel);opacity:0;will-change:opacity;pointer-events:none}
.mapa{position:absolute;left:0;top:0;width:2784px;height:2592px;max-width:none;transform-origin:0 0;will-change:transform;filter:contrast(1.06) saturate(1.12)}
.rota{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.heroi-token{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .4s;will-change:transform;pointer-events:none}
.heroi-token.ligado{opacity:1}
.heroi-token i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:rgba(255,204,0,.32);border:3px solid var(--ouro);
  animation:pulso 1.6s ease-in-out infinite}
.heroi-token:not(.ligado) i{animation-play-state:paused}
.heroi-token img{position:absolute;left:-17px;top:-17px;width:34px;height:34px;max-width:none}
@keyframes pulso{0%,100%{transform:scale(.8);opacity:.9}50%{transform:scale(1.25);opacity:.4}}
.mundo-veu{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(40,24,8,.35) 100%)}
.mundo-escuro{position:absolute;inset:0;pointer-events:none;background:rgba(12,10,7,.72);opacity:0;visibility:hidden;will-change:opacity}

/* marcos no espaço da tela (tamanho constante; só os visíveis se movem) */
.marcos{position:absolute;inset:0;z-index:5;pointer-events:none}
/* camada própria SEMPRE (não só quando visível): criar/destruir 21 camadas ao mesmo tempo, no aparecer/sumir, dava quadros de 50ms */
.marco{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;pointer-events:none;will-change:transform,opacity}
.marco.visivel{opacity:1;visibility:visible;pointer-events:auto}
.marcos.instantaneo .marco,.marcos.instantaneo .marco span{transition:none}
.marco i{width:14px;height:14px;background:linear-gradient(135deg,#fff1a8,#ffcc00 50%,#9a6a12);border:2px solid #2a1f14;transform:rotate(45deg);box-shadow:0 0 0 3px rgba(255,204,0,.3),0 0 14px rgba(255,204,0,.7)}
.marco span{margin-bottom:8px;white-space:nowrap;background:rgba(30,22,12,.92);color:#f3e3bd;border:1px solid rgba(255,204,0,.45);border-radius:4px;padding:3px 10px;font:700 14px/1.3 Asul,serif;
  box-shadow:0 6px 14px rgba(0,0,0,.35);transition:opacity .25s,visibility .25s}
.marco.so-pino:not(:hover):not(:focus-visible):not(.aberto) span{opacity:0;visibility:hidden}
.marco em{position:absolute;top:calc(100% + 8px);white-space:nowrap;background:#f6ecd4;color:var(--tinta);border:1px solid #9a7a3a;border-radius:4px;padding:4px 10px;font:400 13px Asul,serif;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.marco:hover em,.marco.aberto em,.marco:focus-visible em{opacity:1;transform:none}
.marco:hover,.marco.aberto,.marco:focus-visible{z-index:2}

/* portal (aro dourado, sombra embutida na arte; largura de referência 1000px, a escala vem do JS) */
.portal{position:absolute;left:0;top:0;z-index:6;width:1000px;height:1000px;max-width:none;transform-origin:0 0;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity}

/* capítulos */
.cap{position:absolute;z-index:8;opacity:0;visibility:hidden;will-change:transform,opacity;contain:layout}
.cap-cartao{left:5%;top:50%;width:min(440px,38vw);transform:translateY(-50%);
  background:linear-gradient(180deg,rgba(33,26,17,.97),rgba(20,16,10,.97));border:1px solid rgba(255,204,0,.32);border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.45);padding:28px 30px 26px}
.missao{font:700 11px/1.4 Asul,serif;letter-spacing:.22em;color:var(--ouro);margin-bottom:12px}
.cap h2{font:700 clamp(30px,3.1vw,44px)/1.04 Asul,serif;color:#f6ecd6;letter-spacing:-.01em;margin-bottom:14px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}
.cap h2 em{color:var(--ouro)}
.cap p{font-size:15.5px;line-height:1.65;color:#d9ccb1}
.cap-dica{margin-top:14px;font-size:13px!important;color:var(--suave)!important}
.cap-dica:before{content:'◆ ';color:var(--ouro)}
.cap-nota{margin-top:10px;font-size:12.5px!important;color:var(--suave)!important}

/* as cinco vocações de hoje (ilustrações do manual oficial, sobre pergaminho) */
.cap-vocacao{width:min(660px,48vw)}
.vocacoes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.vocacao{display:flex;flex-direction:column;align-items:center;gap:2px;background:#15110b;border:1px solid rgba(255,204,0,.25);border-radius:8px;padding:0 0 10px;
  transition:transform .3s,border-color .3s,box-shadow .3s}
.vocacao:hover{transform:translateY(-3px);border-color:rgba(255,204,0,.6)}
.vocacao[aria-checked=true]{transform:translateY(-4px);border-color:var(--ouro);box-shadow:0 0 0 2px var(--ouro),0 0 26px rgba(255,204,0,.35)}
.vocacao-arte{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:7px 7px 0 0;
  background:radial-gradient(ellipse at 50% 45%,#f6ecd4 0%,#e6d3a9 62%,#c9ae76 100%)}
.vocacao-arte img{position:absolute;left:6%;top:6%;width:88%;height:88%;max-width:none;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(60,35,10,.25));transition:transform .4s}
.vocacao:hover .vocacao-arte img,.vocacao[aria-checked=true] .vocacao-arte img{transform:scale(1.06)}
.vocacao b{margin-top:8px;font:700 13.5px Asul,serif;color:#f6ecd6}
.vocacao small{font-size:10.5px;line-height:1.3;padding:0 4px;text-align:center;color:var(--suave)}

/* cenas de jogo (combate, nível, guilda) */
.cena{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:flex-end;padding:0 5% 0 0;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity}
.quadro-jogo{position:relative;width:min(56vw,960px);aspect-ratio:16/9;background:#0d0c0a;border:10px solid var(--pedra);border-radius:4px;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px #5a5347,0 30px 80px rgba(0,0,0,.65)}
.quadro-arte{width:100%;height:100%;object-fit:cover}
.barras{position:absolute;top:10px;left:12px;right:12px;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.barra{position:relative;height:16px;background:#1a0b0b;border:1px solid #000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.barra i{position:absolute;inset:0;background:linear-gradient(180deg,#f04a3a,#a31a12);transform-origin:0 50%;will-change:transform}
.barra-mana{background:#0b0f1f}
.barra-mana i{background:linear-gradient(180deg,#4f86f0,#1f3f9f)}
.barra b{position:absolute;left:6px;top:0;font:700 10px/16px var(--jogo);color:#fff;text-shadow:var(--contorno)}
.danos{position:absolute;inset:0;pointer-events:none;z-index:3}
.dano{position:absolute;font:700 24px/1 var(--jogo);color:#ff3b2f;text-shadow:var(--contorno);animation:dano 1.2s ease-out forwards;will-change:transform,opacity}
.dano.cura{color:#4ce04c}
@keyframes dano{0%{opacity:0;transform:translateY(8px) scale(.8)}15%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-60px)}}
.palco.em-luto .quadro-arte,.palco.em-luto .camada-mundo,.palco.em-luto .marcos{filter:grayscale(1) brightness(.6)}
.morte{position:absolute;inset:0;z-index:14;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.morte[hidden]{display:none}

/* janelas no estilo do cliente do jogo */
.janela-jogo{width:min(420px,90vw);background:#3a3936;border:1px solid #111;box-shadow:inset 1px 1px 0 #6b6a66,inset -1px -1px 0 #1d1d1d,0 24px 60px rgba(0,0,0,.6);
  color:#e8e1d0;font:400 14px/1.6 var(--jogo);text-align:center;padding:0 0 18px}
.janela-titulo{position:relative;background:linear-gradient(#5b5955,#3d3c39);border-bottom:1px solid #151515;padding:8px 36px;margin:0 0 14px;
  font:700 13px/1.4 var(--jogo);color:#dcd6c6;text-shadow:var(--contorno)}
.janela-jogo>p:not(.janela-titulo){padding:0 22px}
.botao-jogo{margin-top:16px;background:linear-gradient(#6a6964,#474642);border:1px solid #111;box-shadow:inset 1px 1px 0 #8d8c86;color:#f2ebda;
  font:700 13px var(--jogo);padding:8px 20px;text-shadow:var(--contorno)}
.botao-jogo:hover{background:linear-gradient(#77766f,#52514c)}

/* contador de nível */
.cap-nivel-texto{left:5%;top:50%;width:min(440px,38vw);transform:translateY(-50%)}
.contador-nivel{display:flex;flex-direction:column;margin-bottom:6px}
.contador-nivel small{font:700 13px Asul,serif;letter-spacing:.3em;color:var(--suave)}
.contador-nivel strong{align-self:flex-start;font:700 clamp(96px,11vw,168px)/.95 Asul,serif;color:var(--ouro);-webkit-text-stroke:3px #2a1f14;paint-order:stroke fill;
  text-shadow:6px 6px 0 rgba(0,0,0,.45);font-variant-numeric:tabular-nums;will-change:transform}
.cap-nivel-texto h2{font-size:clamp(28px,2.8vw,40px)}

/* final: o mundo guardado no medalhão, os heróis diante dele; texto à esquerda */
.final-herois{position:absolute;left:66%;bottom:56px;z-index:9;width:min(74vw,1200px);transform:translate3d(-50%,100%,0);opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.final-herois picture{display:contents}
.final-herois img{width:100%;height:auto;max-width:none;filter:drop-shadow(0 -10px 40px rgba(0,0,0,.5))}
.cap-final{left:6%;top:50%;z-index:10;width:min(470px,38vw);transform:translateY(-50%)}
.cap-final h2{font-size:clamp(38px,3.6vw,56px);color:var(--ouro);-webkit-text-stroke:1.5px #2a1f14;paint-order:stroke fill;text-shadow:3px 3px 0 rgba(0,0,0,.4)}
.cap-final h2 em{color:#fff}
.cap-final p{color:#efe4cc;text-shadow:0 2px 8px #000}
.final-acoes{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}

/* HUD */
.hud{position:absolute;left:50%;bottom:14px;z-index:20;transform:translateX(-50%);width:min(940px,calc(100% - 24px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:9px 10px 9px 16px;background:rgba(20,17,12,.96);border:1px solid rgba(255,204,0,.3);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;will-change:opacity;contain:layout}
.hud-heroi{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center}
.hud-vocacoes{display:flex;gap:4px}
.hud-v{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#15110b;border:1px solid rgba(255,204,0,.28);color:var(--suave);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s}
.hud-v svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hud-v:hover{color:var(--ouro);border-color:rgba(255,204,0,.7);transform:translateY(-1px)}
.hud-v[aria-checked=true]{background:linear-gradient(180deg,#ffdd55,#c99a1a);color:#2a1f14;border-color:var(--ouro);box-shadow:0 0 12px rgba(255,204,0,.55)}
.hud-v[aria-checked=true] svg{stroke-width:2.1}
.hud-voc{align-self:center;font:700 10px/1 var(--jogo);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);white-space:nowrap}
.hud-nivel{font:700 12px/1 var(--jogo);color:#e8e1d0;white-space:nowrap}
.hud-nivel b{display:inline-block;min-width:3ch;color:#fff;font-size:15px;font-variant-numeric:tabular-nums;will-change:transform}
.hud-xp{width:150px;height:7px;background:#0d0b08;border:1px solid #000;box-shadow:inset 0 0 0 1px rgba(255,204,0,.2);overflow:hidden}
.hud-xp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#9a6a12,#ffcc00 60%,#ea6827);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.hud-missao{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 10px;border-radius:8px;transition:background .2s}
.hud-missao:hover{background:rgba(255,204,0,.08)}
.hud-missao span{font:700 10px var(--jogo);letter-spacing:.14em;color:var(--suave);white-space:nowrap}
.hud-missao b{font:700 15px Asul,serif;color:#f6ecd6;white-space:nowrap}
.hud-setas{display:flex;gap:8px}
.hud-setas button{width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,204,0,.35);background:#15110b;font-size:18px;transition:background .2s}
.hud-setas button:hover{background:#2a2215}

/* mensagem de servidor (animada pela Web Animations API: transform/opacity no compositor) */
.msg-servidor{position:absolute;left:50%;bottom:92px;z-index:21;transform:translateX(-50%);max-width:calc(100% - 32px);text-align:center;
  font:700 15px/1.4 var(--jogo);color:#fff;text-shadow:var(--contorno);background:rgba(18,13,6,.92);border:1px solid rgba(255,204,0,.55);border-radius:10px;
  padding:8px 16px;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.45);opacity:0;pointer-events:none;will-change:transform,opacity}
.faiscas{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

/* diário de missões */
.diario{margin:auto;border:0;padding:0;background:transparent}
.diario::backdrop{background:rgba(0,0,0,.62)}
.diario .janela-jogo{width:min(440px,92vw);text-align:left}
.diario-fechar{position:absolute;right:8px;top:4px;font:700 18px var(--jogo);color:#dcd6c6}
.diario-lista{list-style:none;padding:0 14px}
.diario-lista li{counter-increment:m}
.diario-lista button{display:flex;gap:12px;width:100%;text-align:left;padding:10px 8px;border-bottom:1px solid #2a2927;font:400 14px var(--jogo);color:#e8e1d0}
.diario-lista button:before{content:counter(m,decimal-leading-zero);color:var(--ouro);font-weight:700}
.diario-lista button:hover{background:rgba(255,204,0,.08);color:#fff}

/* epílogo */
.epilogo{position:relative;z-index:2;background:linear-gradient(180deg,#15120d,var(--carvao));padding:90px 6% 70px;text-align:center;border-top:1px solid rgba(255,204,0,.2)}
.epilogo-logo{width:min(300px,70vw);margin:0 auto 34px}
.epilogo-fatos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:900px;margin:0 auto 40px}
.epilogo-fatos strong{display:block;font:700 44px/1 Asul,serif;color:var(--ouro);text-shadow:2px 2px 4px #000}
.epilogo-fatos span{font-size:13px;color:var(--suave)}
.epilogo-links{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin:34px 0 22px;font-size:14px}
.epilogo-links a:hover{color:var(--ouro)}
.epilogo small{display:block;font-size:12px;color:#8f846e;line-height:1.7}
.sem-js{padding:40px;text-align:center}

/* modo leve (ativado pelo motor quando o aparelho não sustenta o ritmo): reduz a resolução dos canvas e as partículas.
   NUNCA tirar o filtro do .mapa: com ele o mapa vira uma superfície estável; sem ele o Chrome re-rasteriza o mapa a cada zoom
   (medido: 55 → 28 fps). Transições CSS em algo que o JS muda a cada quadro também são proibidas (reiniciam e recriam camadas). */
.leve .brasas i:nth-child(2n){display:none}

/* ══ celular: tudo o que existe no computador, recomposto para a tela vertical ══ */
/* ── crédito PROMPTO ── */
.credito{position:relative;z-index:2;background:var(--carvao);border-top:1px solid rgba(255,204,0,.12);padding:14px 6% 18px;display:flex;justify-content:center}
.credito-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;color:#fff}
.credito-txt{font:400 12px/1 var(--jogo);letter-spacing:.02em;color:var(--suave);transition:color .25s}
.credito-link:hover .credito-txt,.credito-link:focus-visible .credito-txt{color:var(--texto)}
.credito-logo{display:block;height:15px;width:122px;fill:currentColor}

@media(max-width:760px){
  .topo{padding:10px 14px}
  .topo-marca img{width:84px}
  .topo-acoes{gap:14px}
  .topo-link{font-size:13px}
  .abertura-texto{top:10svh}
  .abertura-texto h1{width:min(240px,64vw)}
  /* a arte vertical corta a chama e o arco na própria borda: com a deriva (±10px na horizontal, ±2px na vertical)
     a borda entraria na tela — então a arte sobra 16px de cada lado e 8px embaixo (maior que o percurso da deriva) */
  .abertura-herois{width:calc(100vw + 32px);bottom:-8px}
  .abertura-acoes{flex-direction:column;align-items:center;gap:12px}
  .botao{font-size:16px;padding:12px 24px}

  /* cartões ancorados acima do painel */
  .cap-cartao,.cap-nivel-texto{left:12px;right:12px;top:auto;bottom:104px;width:auto;transform:none;padding:16px 16px 14px}
  .cap h2{font-size:26px;margin-bottom:8px}
  .cap p{font-size:13.5px;line-height:1.55}
  .missao{font-size:10px;margin-bottom:8px}
  .cap-dica{margin-top:8px}
  .cap-nota{font-size:11.5px!important}

  /* vocações: as cinco à vista, em lista de duas colunas (arte + nome + papel) */
  .cap-vocacao{width:auto}
  .vocacoes{grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
  .vocacao{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:9px;row-gap:1px;align-items:center;padding:5px 8px 5px 5px;text-align:left}
  .vocacao:hover,.vocacao[aria-checked=true]{transform:none}
  .vocacao:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 3px)}
  .vocacao-arte{grid-row:1/3;width:40px;border-radius:5px}
  .vocacao b{align-self:end;margin:0;font-size:14px;line-height:1.2}
  .vocacao small{align-self:start;padding:0;text-align:left;font-size:11.5px;line-height:1.25}

  .cena{justify-content:center;align-items:flex-start;padding:15svh 12px 0}
  .quadro-jogo{width:100%;border-width:6px}
  .dano{font-size:18px}
  .contador-nivel strong{font-size:84px;-webkit-text-stroke:2px #2a1f14}
  .cap-nivel-texto h2{font-size:24px}

  .cap-final{left:0;right:0;top:9svh;width:auto;transform:none;text-align:center;padding:0 18px}
  .cap-final h2{font-size:32px}
  .cap-final p{font-size:14px;margin-top:4px}
  .final-acoes{justify-content:center;gap:12px;margin-top:12px}
  .final-acoes .botao,.final-acoes .botao-fantasma{font-size:14px;padding:10px 16px}
  /* arte vertical de borda a borda (como na abertura e no site oficial): as bordas da arte coincidem com as da tela,
     nada aparece cortado no meio; a altura (bottom) e o medalhão são calculados no motor (medir) */
  .final-herois{left:50%;width:100vw;bottom:0}

  /* painel em duas linhas: vocação e setas em cima; nível, experiência e missão embaixo */
  .hud{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;padding:7px 8px 8px 10px;bottom:10px}
  .hud-heroi{display:contents}
  .hud-vocacoes{order:1}
  .hud-voc{order:2;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .hud-setas{order:3;gap:6px}
  .hud:after{content:'';order:4;flex-basis:100%;height:0}
  .hud-nivel{order:5;margin-top:7px}
  .hud-xp{order:6;flex:1 1 0;min-width:36px;width:auto;margin-top:7px}
  .hud-missao{order:7;flex-direction:row;align-items:baseline;gap:6px;padding:0 2px;margin-top:7px;min-width:0}
  .hud-missao b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
  .hud-v{width:24px;height:24px}
  .hud-v svg{width:13px;height:13px}
  .hud-setas button{width:32px;height:32px;font-size:16px}
  .msg-servidor{top:60px;bottom:auto;font-size:12px;padding:6px 12px}
  .marco span{font-size:12.5px;padding:2px 8px;margin-bottom:6px}
  .marco em{font-size:12px}
  .epilogo-fatos{grid-template-columns:repeat(2,1fr)}
  .epilogo-fatos strong{font-size:36px}
}
@media(max-width:340px){
  .topo-link{display:none}
}
@media(prefers-reduced-motion:reduce){
  .heroi-token i,.dano,.brasas i{animation:none}
}