/* ============================================================
   VISUAL DAS TELAS DE FORA — etapa 96, frente "telas" (11/10/2026)
   ============================================================
   Cada tela fora da cidade e do mapa ganha uma ASSINATURA própria:
     · o site       — a cena viva no alto (céu que respira, brasas,
                      estrela cadente, cenas do jogo se revezando);
     · o Entrar     — a portaria: o cartão com a borda de eclipse;
     · a Sala       — um salão: campanhas como estandartes do tipo
                      (Padrão, Devotos, Caça aos Reis, Noite Eterna),
                      as notícias como pregão do arauto;
     · a escolha    — cada povo com a sua cinemática curta;
     · o perfil     — a moldura e o brasão como peças de vitrine;
     · o ranking    — o pódio sobe (3º, 2º, 1º) e o 1º acende;
     · o Jornal     — crônica: serifa, capitular, data de crônica;
     · manual e termos — leitura bonita, índice que acompanha;
     · a loja       — o brilho que corre nos pacotes.

   REGRAS DESTE ARQUIVO
   · Vem DEPOIS do estilo.css e só nas páginas que precisam. Não
     redefine token nenhum: lê os de lá (--gold, --corona, --painel…),
     então os temas da Loja de Aparência continuam trocando tudo.
   · Cada pedaço é preso a uma classe no <body> (vt-site, vt-entrar,
     vt-sala, vt-perfil, vt-ranking, vt-jornal, vt-leitura, vt-loja)
     ou a um componente com prefixo `vt-`. Nada vaza pra outra tela.
   · Todo movimento tem a versão parada em `prefers-reduced-motion`.
   ============================================================ */

/* ============================================================
   0. PEÇAS COMUNS
   ============================================================ */
.vt-cena {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out);
}
.vt-cena.vt-acesa { opacity: 1; }

/* O brilho que corre por cima de uma peça (pacote, estandarte, botão). */
@keyframes vtVarre { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes vtBrilho { 0% { transform: translateX(-140%) skewX(-18deg); } 18%, 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes vtSobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vtRespira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes vtGira { to { transform: rotate(1turn); } }
@keyframes vtTocha {
  0%, 100% { opacity: .78; transform: scale(1); }
  22% { opacity: .92; transform: scale(1.03); }
  48% { opacity: .7; transform: scale(.98); }
  71% { opacity: 1; transform: scale(1.04); }
}

/* ============================================================
   1. O SITE — a cena viva no alto
   ============================================================ */
.vt-site .ceu img {
  transform: translate3d(calc(var(--vt-px, 0) * -14px), calc(var(--vt-py, 0) * -10px + var(--vt-rolou, 0) * 60px), 0) scale(1.06);
  transition: transform .9s var(--ease-out), opacity 2.4s var(--ease);
  will-change: transform;
}
/* As cenas do jogo se revezam por cima da pintura do sistema. */
.vt-site .vt-cenas { position: absolute; inset: 0; }
.vt-site .vt-cenas img {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  opacity: 0; transition: opacity 2.4s var(--ease);
  animation: vtKen 16s linear infinite alternate; animation-play-state: paused;
}
.vt-site .vt-cenas img.vt-aqui { opacity: .9; animation-play-state: running; }
@keyframes vtKen { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }

/* A capa ganha profundidade: o canvas da cena atrás do texto. */
.vt-site .capa { position: relative; isolation: isolate; overflow: hidden; }
.vt-site .capa > .vt-cena { z-index: -1; }
.vt-site .capa::before {
  /* o halo do eclipse respirando atrás da marca */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 32%;
  width: min(900px, 140vw); aspect-ratio: 1.6; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255,176,59,.20), rgba(255,59,92,.08) 45%, transparent 72%);
  animation: vtRespira 6s var(--ease) infinite; pointer-events: none;
}
.vt-site .logo-largo, .vt-site .emblema {
  translate: calc(var(--vt-px, 0) * 6px) calc(var(--vt-py, 0) * 4px);
  transition: translate .9s var(--ease-out);
}
/* A marca entra como numa abertura de jogo: escurece, acende. */
.vt-site .capa > * { animation: vtSobe .9s var(--ease-out) both; }
.vt-site .capa > picture { display: contents; }
.vt-site .capa .logo-largo, .vt-site .capa > .emblema { animation: vtAcende 1.4s var(--ease-out) both; }
.vt-site .capa > .marca { animation-delay: .35s; }
.vt-site .capa > .fisgada { animation-delay: .5s; }
.vt-site .capa > .sub-fisgada { animation-delay: .62s; }
.vt-site .capa > .botoes-capa { animation-delay: .78s; }
.vt-site .capa > .sem-pegadinha, .vt-site .capa > .fase-ao-vivo { animation-delay: .92s; }
.vt-site .capa > .desce { animation-delay: 1.1s; }
.vt-site .capa > .vt-cena { animation: none; }
@keyframes vtAcende {
  0% { opacity: 0; filter: brightness(.2) blur(6px) drop-shadow(0 14px 40px rgba(0,0,0,.6)); transform: scale(.96); }
  60% { opacity: 1; filter: brightness(1.35) blur(0) drop-shadow(0 0 40px rgba(255,176,59,.55)); }
  100% { opacity: 1; filter: brightness(1) drop-shadow(0 14px 40px rgba(0,0,0,.6)); transform: none; }
}
/* O botão principal da capa: o brilho corre de tempos em tempos. */
.vt-site .botoes-capa .y-primario, .vt-site .fecho .y-primario { position: relative; overflow: hidden; }
.vt-site .botoes-capa .y-primario::after, .vt-site .fecho .y-primario::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: vtVarre 4.2s var(--ease) 2.2s infinite; pointer-events: none;
}
/* Os povos da vitrine: o retrato acende na cor do eclipse ao passar. */
.vt-site .povo { transition: transform var(--calmo) var(--ease-out), box-shadow var(--calmo) var(--ease-out); }
@media (hover: hover) {
  .vt-site .povo:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(255,106,61,.55), inset 0 0 0 1px rgba(255,176,59,.45); }
  .vt-site .povo:hover .nome { color: var(--gold-luz); text-shadow: 0 0 18px rgba(255,176,59,.5); }
}
.vt-site .ato.y-destaque { box-shadow: inset 0 0 0 1px rgba(255,176,59,.45), 0 0 40px -14px rgba(255,106,61,.6); }

/* ============================================================
   2. O ENTRAR — a portaria
   ============================================================ */
.vt-entrar .pintura { animation: vtKenFundo 40s linear infinite alternate; transform-origin: 30% 30%; }
@keyframes vtKenFundo { from { transform: scale(1); } to { transform: scale(1.07); } }
.vt-entrar .vt-cena { position: fixed; z-index: 0; }
/* A borda de eclipse do cartão: uma luz que dá a volta, devagar. */
.vt-entrar main.painel.porta-cartao::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: var(--corte);
  background: conic-gradient(from var(--vt-ang, 0deg), transparent 0 62%, rgba(255,176,59,.95) 80%, rgba(255,59,92,.8) 88%, transparent 97%);
  animation: vtVolta 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: 2px;
}
@property --vt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes vtVolta { to { --vt-ang: 360deg; } }
.vt-entrar .porta-cartao form:not([hidden]), .vt-entrar .porta-cartao section:not([hidden]) { animation: vtSobe .42s var(--ease-out) both; }
.vt-entrar .porta-arte .logo-largo { animation: vtAcende 1.4s var(--ease-out) both; }
.vt-entrar .porta-arte .frase { animation: vtSobe .8s var(--ease-out) .3s both; }
.vt-entrar .porta-arte .chips { animation: vtSobe .8s var(--ease-out) .45s both; }
.vt-entrar .porta-arte .selos img {
  transition: transform var(--calmo) var(--mola), filter var(--calmo) var(--ease);
  animation: vtFlutua 5s var(--ease) infinite; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.vt-entrar .porta-arte .selos img:nth-child(2) { animation-delay: -1.2s; }
.vt-entrar .porta-arte .selos img:nth-child(3) { animation-delay: -2.5s; }
.vt-entrar .porta-arte .selos img:nth-child(4) { animation-delay: -3.7s; }
@keyframes vtFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.vt-entrar .porta-cartao .aba.ativa { box-shadow: 0 0 22px -6px rgba(255,106,61,.65); }
.vt-entrar .porta-arte .selos img {
  border-radius: 50%; padding: 4px;
  background: radial-gradient(circle, rgba(255,176,59,.22), rgba(255,106,61,.05) 60%, transparent 72%);
}
@media (hover: hover) { .vt-entrar .porta-arte .selos img:hover { transform: scale(1.14); filter: drop-shadow(0 0 16px rgba(255,176,59,.6)); } }

/* ============================================================
   3. A SALA — um salão do jogo
   ============================================================
   As cores de cada TIPO de campanha (o selo vem do servidor):
     padrão ✦  — o ouro do eclipse
     devotos ☀☾ — meio sol, meio lua
     reis ♛    — púrpura real com coroa de ouro
     noite ☾✶  — o vermelho da Lunares Sangrenta */
.vt-sala [data-tipo] { --tipo-a: var(--gold); --tipo-b: var(--sol); --tipo-tinta: var(--sobre); }
.vt-sala [data-tipo="devotos"] { --tipo-a: #ffc96b; --tipo-b: #8fb8ff; --tipo-tinta: #120d14; }
.vt-sala [data-tipo="reis"]    { --tipo-a: #c49bff; --tipo-b: #ffcf6e; --tipo-tinta: #140a1e; }
.vt-sala [data-tipo="noite"]   { --tipo-a: #ff4d6a; --tipo-b: #8f0f24; --tipo-tinta: #fff3ea; }

/* ---- O salão: tochas e arco no cartão grande ---- */
.vt-sala .sala-heroi { box-shadow: inset 0 0 0 1px rgba(255,176,59,.28), inset 0 -60px 80px -40px rgba(255,106,61,.18); }
.vt-sala .sala-heroi > .vt-tochas, .vt-sala .sala-heroi > .vt-arco { position: absolute; pointer-events: none; }
.vt-sala .sala-heroi > .vt-tochas { inset: 0; }
.vt-sala .vt-tochas i {
  position: absolute; bottom: -30%; width: 46%; height: 120%;
  background: radial-gradient(closest-side, rgba(255,150,60,.30), rgba(255,90,40,.10) 55%, transparent 75%);
  mix-blend-mode: screen; animation: vtTocha 3.4s steps(24) infinite; transform-origin: 50% 100%;
}
.vt-sala .vt-tochas i:first-child { left: -14%; }
.vt-sala .vt-tochas i:last-child { right: -14%; animation-duration: 4.1s; animation-delay: -1.3s; }
.vt-sala .sala-heroi > .vt-arco {
  left: 50%; top: 0; width: min(560px, 80%); height: 46px; translate: -50% 0;
  border-bottom: 1px solid rgba(255,201,107,.45); border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,201,107,.10), transparent 70%);
}
.vt-sala .sala-heroi > .vt-arco::after {
  content: "✦"; position: absolute; left: 50%; bottom: -9px; translate: -50% 0;
  font-size: 14px; line-height: 1; color: var(--gold-luz); text-shadow: 0 0 12px rgba(255,176,59,.8);
}
@media (max-width: 700px) { .vt-sala .sala-heroi > .vt-arco { height: 18px; width: 70%; } .vt-sala .sala-heroi > .vt-arco::after { display: none; } }
.vt-sala .sala-heroi h1 { text-shadow: 0 2px 24px rgba(0,0,0,.7), 0 0 40px rgba(255,176,59,.18); }
.vt-sala .sala-heroi-acao .botao { position: relative; overflow: hidden; box-shadow: 0 0 34px -8px rgba(255,106,61,.7); }
.vt-sala .sala-heroi-acao .botao::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: vtVarre 4.6s var(--ease) 1.5s infinite; pointer-events: none;
}
.vt-sala .sala-bloco-topo h2 { display: flex; align-items: center; gap: 10px; }
.vt-sala .sala-bloco-topo h2::before {
  content: ""; width: 10px; height: 10px; rotate: 45deg; flex: none;
  background: var(--corona); box-shadow: 0 0 10px rgba(255,106,61,.6);
}

/* ---- O estandarte (a flâmula do tipo) ---- */
.vt-estandarte {
  position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0;
  width: 40px; height: 56px; display: grid; place-items: start center; padding-top: 9px;
  background: linear-gradient(180deg, var(--tipo-a), var(--tipo-b));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transform-origin: 50% 0; animation: vtBalanca 6s var(--ease) infinite;
}
.vt-estandarte::before {
  /* a haste dourada de onde ela pende */
  content: ""; position: absolute; top: 0; left: -6px; right: -6px; height: 4px;
  background: linear-gradient(90deg, #8a5a1c, #ffd98a, #8a5a1c);
}
.vt-estandarte i {
  font-style: normal; font-size: 15px; line-height: 1; color: var(--tipo-tinta);
  text-shadow: 0 1px 0 rgba(255,255,255,.25); white-space: nowrap; letter-spacing: -.04em;
}
.vt-sala [data-tipo="devotos"] .vt-estandarte { background: linear-gradient(90deg, #ffc96b 50%, #8fb8ff 50%); }
@keyframes vtBalanca { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } }

/* ---- As campanhas como portais ---- */
.vt-sala .mundo-cartao { position: relative; }
.vt-sala .mundo-cartao[data-tipo] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tipo-a) 30%, transparent); }
.vt-sala .mundo-arte { height: 150px; overflow: hidden; }
.vt-sala .mundo-arte::before {
  /* o portal: um anel de luz na cor do tipo que se abre ao passar */
  content: ""; position: absolute; left: 50%; top: 55%; z-index: 1; width: 120px; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; opacity: .0; scale: .6;
  background: radial-gradient(circle, transparent 46%, color-mix(in srgb, var(--tipo-a, var(--gold)) 70%, transparent) 50%, transparent 66%);
  transition: opacity var(--calmo) var(--ease-out), scale .6s var(--ease-out);
  pointer-events: none;
}
.vt-sala .mundo-cartao .mundo-arte { transition: background-size .8s var(--ease-out); background-size: 100% auto; }
@media (hover: hover) {
  .vt-sala .mundo-cartao:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--tipo-a, var(--gold)), 0 20px 44px -22px color-mix(in srgb, var(--tipo-a, var(--gold)) 80%, transparent); }
  .vt-sala .mundo-cartao:hover .mundo-arte::before { opacity: 1; scale: 1.25; }
}
.vt-sala .mundo-cartao .frase-do-tipo { color: color-mix(in srgb, var(--tipo-a) 55%, var(--ink)); }
.vt-sala .mundo-cartao .frase-do-tipo b { color: var(--tipo-a); }
.vt-sala .mundo-trilho { height: 6px; border-radius: 3px; }
.vt-sala .mundo-trilho > i { background: linear-gradient(90deg, var(--tipo-b, var(--sol)), var(--tipo-a, var(--gold))); box-shadow: 0 0 10px color-mix(in srgb, var(--tipo-a, var(--gold)) 60%, transparent); }
.vt-sala .mundo-novo { position: relative; overflow: hidden; }
.vt-sala .mundo-novo::before {
  content: ""; position: absolute; inset: 22% 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,59,.16), transparent 70%);
  animation: vtRespira 4s var(--ease) infinite; pointer-events: none;
}
.vt-sala .mundo-novo .mais { position: relative; transition: transform var(--calmo) var(--mola); }
@media (hover: hover) { .vt-sala .mundo-novo:hover .mais { transform: rotate(90deg) scale(1.08); } }

/* Na lista de campanhas: a fita do tipo à esquerda e a flâmula no quadro. */
.vt-sala .servidor[data-tipo] { box-shadow: inset 3px 0 0 var(--tipo-a), inset 0 0 0 1px var(--borda-sut); }
.vt-sala .servidor.meu[data-tipo] { box-shadow: inset 3px 0 0 var(--tipo-a), inset 0 0 0 1px rgba(255,176,59,.45); }
.vt-sala .servidor-arte { overflow: hidden; }
.vt-sala .servidor-arte .vt-estandarte { left: auto; right: 6px; translate: none; width: 26px; height: 38px; padding-top: 7px; }
.vt-sala .servidor-arte .vt-estandarte::before { left: -3px; right: -3px; height: 3px; }
.vt-sala .servidor-arte .vt-estandarte i { font-size: 11px; }
.vt-sala .etiqueta.tipo { color: var(--tipo-a); }

/* Os estandartes do salão, no alto de Campanhas */
.vt-estandartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; }
.vt-estandartes[hidden] { display: none; }
.vt-flamula {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 74px; padding: 10px 14px 10px 10px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tipo-a) 14%, transparent), transparent 60%), var(--painel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tipo-a) 34%, transparent); clip-path: var(--corte-p);
}
.vt-flamula .vt-estandarte { position: relative; left: auto; top: -10px; translate: none; align-self: start; }
.vt-flamula b { display: block; font-family: var(--disp); font-size: 13.5px; color: var(--tipo-a); }
.vt-flamula small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.vt-flamula-n {
  min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 6px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--tipo-tinta); background: var(--tipo-a);
  clip-path: var(--corte-p);
}

/* ---- O pregão do arauto: as notícias ---- */
.vt-sala .noticias .noticia { position: relative; transition: transform var(--calmo) var(--ease-out), box-shadow var(--calmo) var(--ease-out); }
.vt-sala .noticias .noticia-arte { transition: background-size .9s var(--ease-out); background-size: cover; }
@media (hover: hover) { .vt-sala .noticias .noticia:hover { transform: translateX(3px); } }
.vt-sala .noticias .noticia:first-child { grid-template-columns: 1fr; }
.vt-sala .noticias .noticia:first-child .noticia-arte { min-height: 170px; position: relative; }
.vt-sala .noticias .noticia:first-child .noticia-arte::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--painel) 0%, transparent 65%);
}
.vt-sala .noticias .noticia:first-child .noticia-txt { padding: 0 22px 18px; margin-top: -34px; position: relative; }
.vt-sala .noticias .noticia:first-child h3 { font-family: var(--disp); font-size: 19px; line-height: 1.25; }
.vt-sala .noticias .noticia:first-child::after {
  /* o selo de cera do arauto */
  content: "✦"; position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: #ffe2a8;
  background: radial-gradient(circle at 35% 30%, #d14a3a, #7d1d1d 70%);
  box-shadow: 0 0 0 3px rgba(125,29,29,.35), 0 6px 14px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.35);
  rotate: -12deg;
}
.vt-sala .noticia-pe time { color: var(--gold); opacity: .85; }

/* ---- A coluna: comandante e salão da fama ---- */
.vt-sala .cartao-lado h3 { display: flex; align-items: center; gap: 8px; color: var(--gold-luz); }
.vt-sala .cartao-lado h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,176,59,.4), transparent); }
.vt-sala #cartaoPerfil { background: radial-gradient(260px 140px at 20% 0%, rgba(255,176,59,.10), transparent 70%), var(--painel); }
.vt-sala .xp-mini .barra { border-radius: 3px; overflow: hidden; }
.vt-sala .xp-mini .barra > i { background: var(--corona); box-shadow: 0 0 10px rgba(255,106,61,.6); transition: width 1.2s var(--ease-out); }
.vt-fama {
  position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 92px; padding: 14px 16px; text-decoration: none; color: var(--ink); overflow: hidden;
  background: radial-gradient(200px 120px at 0% 100%, rgba(255,201,74,.18), transparent 70%), var(--painel);
  box-shadow: inset 0 0 0 1px rgba(255,201,74,.32); clip-path: var(--corte);
  transition: box-shadow var(--calmo) var(--ease-out), transform var(--calmo) var(--ease-out);
}
.vt-fama-podio { display: flex; align-items: flex-end; gap: 3px; height: 58px; }
.vt-fama-podio i {
  flex: 1; display: grid; place-items: start center; padding-top: 4px; font-style: normal;
  font-family: var(--disp); font-weight: 900; font-size: 11px; color: #1a0f12;
  clip-path: polygon(0 4px, 4px 0, 100% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%; animation: vtDegrau .9s var(--mola) both;
}
.vt-fama-podio i:nth-child(1) { height: 66%; background: linear-gradient(180deg, #eef2f6, #9aa4ae); animation-delay: .25s; }
.vt-fama-podio i:nth-child(2) { height: 100%; background: linear-gradient(180deg, #ffe08a, #d9952a); animation-delay: .45s; box-shadow: 0 0 18px rgba(255,201,74,.6); }
.vt-fama-podio i:nth-child(3) { height: 46%; background: linear-gradient(180deg, #f0b98a, #a8622d); animation-delay: .1s; }
@keyframes vtDegrau { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.vt-fama-txt b { display: block; font-family: var(--disp); font-size: 15px; color: #ffd98a; }
.vt-fama-txt small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.vt-fama-ir { font-size: 26px; color: var(--gold); transition: transform var(--calmo) var(--mola); }
@media (hover: hover) {
  .vt-fama:hover { box-shadow: inset 0 0 0 1px #ffd98a, 0 14px 30px -18px rgba(255,201,74,.8); transform: translateY(-2px); }
  .vt-fama:hover .vt-fama-ir { transform: translateX(4px); }
}

/* ============================================================
   4. A ESCOLHA DE POVO — a cinemática curta de cada povo
   ============================================================
   A cor de cada povo é a do catálogo (RACAS[].cor, src/conteudo/mundo.js). */
[data-povo] { --povo: var(--gold); }
[data-povo="estorinatis"] { --povo: #d8c98a; }
[data-povo="momoriteres"] { --povo: #d08a4e; }
[data-povo="balanetes"] { --povo: #7fd4c1; }
[data-povo="navallares"] { --povo: #e0e0d6; }
[data-povo="natavalis"] { --povo: #6fc3dd; }
[data-povo="koflags"] { --povo: #c78a3e; }
[data-povo="vivenciadores"] { --povo: #b4a8c4; }
[data-povo="orcakis"] { --povo: #a3bd62; }
[data-povo="filhos_sol_lua"] { --povo: #e0a94a; }
[data-povo="vilubrinares"] { --povo: #5fb6cc; }

/* ---- A mini-cena no cartão (mouse parado 0,4 s) ---- */
.esc-povo .vt-cartao-frase {
  position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 2;
  font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--ink);
  text-shadow: 0 1px 8px rgba(0,0,0,.9); opacity: 0; translate: 0 8px;
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.esc-povo .vt-cartao-mentor {
  position: absolute; top: 10px; left: 10px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  background: #120d14 center / cover no-repeat; box-shadow: 0 0 0 2px var(--povo), 0 6px 16px rgba(0,0,0,.6);
  opacity: 0; scale: .6; transition: opacity .4s var(--ease-out), scale .5s var(--mola);
}
.esc-povo.vt-cena-cartao .vt-cartao-mentor { background-image: var(--mentor); opacity: 1; scale: 1; }
.esc-povo.vt-cena-cartao .vt-cartao-frase { opacity: 1; translate: 0 0; }
.esc-povo.vt-cena-cartao .esc-retrato img { transform: scale(1.1) translateY(-2%); transition-duration: 2.6s; }
.esc-povo.vt-cena-cartao .esc-retrato::after { background: linear-gradient(0deg, var(--painel) 3%, rgba(18,13,20,.55) 40%, transparent 70%); }
.esc-povo.vt-cena-cartao { box-shadow: 0 0 0 1px color-mix(in srgb, var(--povo) 70%, transparent), 0 18px 40px -20px var(--povo); }
.esc-povo.vt-cena-cartao .esc-nome { color: var(--povo); }

/* ---- A cinemática em tela cheia ---- */
.vt-cine {
  position: fixed; inset: 0; z-index: var(--z-dialogo, 460); overflow: hidden; cursor: pointer;
  background: #07050a; color: var(--ink);
  animation: vtCineEntra .35s var(--ease-out) both;
}
.vt-cine.vt-cine-sai { animation: vtCineSai .42s var(--ease) both; }
@keyframes vtCineEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtCineSai { to { opacity: 0; transform: scale(1.03); } }
.vt-cine-fundo {
  position: absolute; inset: -8%; background: var(--arte) center 20% / cover no-repeat;
  filter: blur(28px) brightness(.45) saturate(1.2); transform: scale(1.1);
  animation: vtCineFundo 3.2s linear both;
}
.vt-cine::before {
  /* a luz do povo varrendo a tela */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 72% 40%, color-mix(in srgb, var(--povo) 30%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(7,5,10,.92) 0%, rgba(7,5,10,.55) 42%, transparent 70%);
}
@keyframes vtCineFundo { from { transform: scale(1.18); } to { transform: scale(1.05); } }
.vt-cine-retrato {
  position: absolute; z-index: 1; right: 6%; bottom: 0; height: 92%; width: auto; max-width: 52%;
  object-fit: cover; object-position: 50% 15%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(0deg, transparent, #000 22%);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) intersect, linear-gradient(0deg, transparent, #000 22%);
  animation: vtCineRetrato 3s var(--ease-out) both;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--povo) 40%, transparent));
}
@keyframes vtCineRetrato { from { opacity: 0; transform: translateX(6%) scale(1.04); } 30% { opacity: 1; } to { opacity: 1; transform: translateX(0) scale(1.0); } }
.vt-cine-tarja { position: absolute; left: 0; right: 0; height: 9vh; z-index: 3; background: #000; animation: vtTarja .5s var(--ease-out) both; }
.vt-cine-cima { top: 0; transform-origin: top; }
.vt-cine-baixo { bottom: 0; transform-origin: bottom; }
@keyframes vtTarja { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.vt-cine-txt {
  position: absolute; z-index: 2; left: max(6vw, 24px); top: 50%; translate: 0 -50%;
  width: min(560px, 48vw); display: grid; gap: 14px;
}
.vt-cine-olho {
  margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--povo); animation: vtSobe .5s var(--ease-out) .2s both;
}
.vt-cine-nome {
  margin: 0; font-family: var(--disp); font-weight: 900; line-height: 1; letter-spacing: -.02em;
  font-size: clamp(36px, 6.4vw, 84px); text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, var(--povo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(0,0,0,.6));
  animation: vtCineNome .9s var(--ease-out) .3s both;
}
@keyframes vtCineNome { from { opacity: 0; letter-spacing: .18em; filter: blur(10px); } to { opacity: 1; letter-spacing: -.02em; filter: drop-shadow(0 4px 30px rgba(0,0,0,.6)); } }
.vt-cine-frase {
  margin: 0; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; color: #f2e8df; font-style: italic;
  max-width: 44ch; text-wrap: pretty; text-shadow: 0 2px 14px rgba(0,0,0,.8);
  animation: vtSobe .7s var(--ease-out) .85s both;
}
.vt-cine-mentor {
  margin: 8px 0 0; display: flex; align-items: center; gap: 12px;
  animation: vtSobe .6s var(--ease-out) 1.3s both;
}
.vt-cine-mentor img {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--povo), 0 0 24px -4px var(--povo), 0 8px 18px rgba(0,0,0,.6);
}
.vt-cine-mentor small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vt-cine-mentor b { display: block; font-family: var(--disp); font-size: 15px; color: var(--ink); margin-top: 2px; }
.vt-cine-pular {
  position: absolute; z-index: 4; right: 18px; top: calc(9vh + 14px); min-height: 44px; padding: 0 18px;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(7,5,10,.55); border: 1px solid rgba(255,243,234,.25); cursor: pointer;
  backdrop-filter: blur(6px); clip-path: var(--corte-p);
}
.vt-cine-pular:hover, .vt-cine-pular:focus-visible { border-color: var(--povo); color: var(--povo); outline: none; }
.vt-cine-tempo {
  position: absolute; z-index: 4; left: 0; bottom: 9vh; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--povo), transparent); transform-origin: left;
  animation: vtTempo 2.8s linear both;
}
@keyframes vtTempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 700px) {
  .vt-cine::before { background: linear-gradient(0deg, rgba(7,5,10,.96) 0%, rgba(7,5,10,.7) 38%, transparent 66%), radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--povo) 26%, transparent), transparent 70%); }
  .vt-cine-retrato { right: 50%; translate: 50% 0; bottom: 18%; height: 66%; max-width: 92%; }
  .vt-cine-txt { left: 20px; right: 20px; width: auto; top: auto; bottom: calc(9vh + 18px); translate: none; gap: 10px; }
  .vt-cine-tarja { height: 6vh; }
  .vt-cine-pular { top: calc(6vh + 10px); right: 12px; }
  .vt-cine-tempo { bottom: 6vh; }
  .vt-cine-mentor img { width: 46px; height: 46px; }
}

/* ============================================================
   5. O PERFIL — a moldura e o brasão como peças de vitrine
   ============================================================ */
.vt-perfil #painel .capa {
  position: relative; overflow: hidden; isolation: isolate; min-height: 170px;
  background:
    radial-gradient(240px 200px at 70px 50%, color-mix(in srgb, var(--cor-aro, var(--gold)) 22%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255,176,59,.07), rgba(0,0,0,.22));
}
.vt-perfil #painel .capa.vt-com-povo::before {
  /* o retrato do povo dele ao fundo, à direita, sumindo no painel */
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 46%;
  background: var(--vt-povo-arte) center 18% / cover no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%);
  opacity: .38; filter: saturate(1.1);
}
.vt-capa-brasao {
  position: absolute; z-index: -1; right: 4%; top: 50%; translate: 0 -50%; pointer-events: none;
  opacity: .16; filter: drop-shadow(0 0 30px rgba(0,0,0,.6)); rotate: -8deg;
}
.vt-capa-brasao svg { display: block; width: clamp(110px, 22vw, 170px); height: auto; }
/* O aro grande: uma luz na cor da moldura dando a volta, devagar. */
.vt-perfil #painel .capa .aro { isolation: isolate; }
.vt-perfil #painel .capa .aro::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--cor-aro, var(--gold)) 85%, #fff) 75%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  animation: vtGira 6s linear infinite;
}
.vt-perfil #painel .capa .aro::after { box-shadow: 0 0 26px -2px var(--cor-aro, #b3a3b1), inset 0 0 12px -4px var(--cor-aro, #b3a3b1); }
.vt-perfil #painel .capa .aro .caixilho { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cor-aro, var(--gold)) 70%, transparent)); }
.vt-perfil .quem h1 { font-family: var(--disp); font-size: clamp(24px, 3.4vw, 32px); text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.vt-perfil .titulo-conta { box-shadow: 0 0 16px -4px var(--gold); }
.vt-perfil .xp-cheio { background: var(--corona); box-shadow: 0 0 12px rgba(255,106,61,.6); transition-duration: 1.4s; }
/* A prateleira: cada peça sobe, a que está vestida respira. */
.vt-perfil .peca { transition: transform var(--calmo) var(--mola), border-color var(--normal), box-shadow var(--calmo); }
.vt-perfil .peca:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 24px -14px var(--gold); }
.vt-perfil .peca:hover:not(:disabled) .aro.mini { transform: rotate(-8deg) scale(1.08); }
.vt-perfil .peca .aro.mini { transition: transform var(--calmo) var(--mola); }
.vt-perfil .peca.usando { position: relative; box-shadow: 0 0 0 1px var(--gold), 0 0 22px -6px var(--gold); }
.vt-perfil .peca.usando::after {
  content: "✓"; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--sobre);
  background: var(--corona); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.vt-perfil .cartoes .cartao { transition: transform var(--calmo) var(--ease-out); }
.vt-perfil .cartoes .cartao .num { text-shadow: 0 0 18px rgba(255,176,59,.35); }
@media (max-width: 560px) { .vt-perfil #painel .capa.vt-com-povo::before { width: 70%; opacity: .26; } .vt-capa-brasao { opacity: .1; } }

/* ============================================================
   6. O RANKING — o pódio sobe: 3º, 2º e, por último, o 1º acende
   ============================================================
   O pódio é desenhado de novo a cada aba (podioDe, ranking.html),
   então a subida toca de novo a cada troca — é o placar "abrindo". */
.vt-ranking .rk-podio { gap: 10px; margin-top: 18px; }
.vt-ranking .rk-degrau {
  transform-origin: 50% 100%;
  animation: vtPodioSobe .85s var(--mola) both;
}
.vt-ranking .rk-degrau.rk-d3 { animation-delay: .1s; }
.vt-ranking .rk-degrau.rk-d2 { animation-delay: .38s; }
.vt-ranking .rk-degrau.rk-d1 { animation-delay: .7s; padding-top: 34px; overflow: hidden; }
@keyframes vtPodioSobe {
  0% { opacity: 0; transform: translateY(70px) scaleY(.35); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.vt-ranking .rk-medalha { animation: vtMedalha .7s var(--mola-forte) both; }
.vt-ranking .rk-d3 .rk-medalha { animation-delay: .55s; }
.vt-ranking .rk-d2 .rk-medalha { animation-delay: .85s; }
.vt-ranking .rk-d1 .rk-medalha { animation-delay: 1.2s; width: 58px; height: 58px; font-size: 24px; }
@keyframes vtMedalha { from { transform: scale(0) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vt-ranking .rk-podio-nome, .vt-ranking .rk-podio-sub, .vt-ranking .rk-podio-pts { animation: vtSobe .5s var(--ease-out) both; }
.vt-ranking .rk-d3 :is(.rk-podio-nome, .rk-podio-sub, .rk-podio-pts) { animation-delay: .7s; }
.vt-ranking .rk-d2 :is(.rk-podio-nome, .rk-podio-sub, .rk-podio-pts) { animation-delay: 1s; }
.vt-ranking .rk-d1 :is(.rk-podio-nome, .rk-podio-sub, .rk-podio-pts) { animation-delay: 1.35s; }
.vt-ranking .rk-d1 .rk-podio-nome { font-size: 16px; }
.vt-ranking .rk-d1 .rk-podio-pts { font-size: 18px; text-shadow: 0 0 16px rgba(255,201,74,.6); }
/* Os degraus mais altos: o pódio de verdade. */
.vt-ranking .rk-base { height: 40px; font-size: 16px; position: relative; overflow: hidden; }
.vt-ranking .rk-d2 .rk-base { height: 58px; }
.vt-ranking .rk-d1 .rk-base { height: 82px; font-size: 22px; }
.vt-ranking .rk-base::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: vtVarre 5s var(--ease) 2s infinite;
}
/* O 1º: raios de luz atrás da medalha, a coroa por cima. */
.vt-ranking .rk-d1::before {
  content: ""; position: absolute; left: 50%; top: 62px; width: 340px; aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255,201,74,.20) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%);
  animation: vtGira 24s linear infinite, vtSobe 1s var(--ease-out) 1.3s both;
}
.vt-ranking .rk-degrau { isolation: isolate; }
.vt-ranking .rk-d1::after {
  content: "♛"; position: absolute; left: 50%; top: 4px; translate: -50% 0;
  font-size: 22px; line-height: 1; color: #ffd76a; text-shadow: 0 0 14px rgba(255,201,74,.9);
  animation: vtCoroa .8s var(--mola-forte) 1.5s both, vtFlutua 3s var(--ease) 2.4s infinite;
}
@keyframes vtCoroa { from { opacity: 0; transform: translateY(-14px) scale(.4); } to { opacity: 1; transform: none; } }
.vt-ranking .rk-degrau.rk-d1 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 55%, transparent), 0 0 50px -14px rgba(255,201,74,.7); }
/* A linha do "você", com a cor de quem está no placar. */
.vt-ranking .rk-degrau.eu .rk-podio-nome b { color: var(--gold-luz); }
@media (max-width: 520px) {
  .vt-ranking .rk-d1 .rk-base { height: 66px; }
  .vt-ranking .rk-d2 .rk-base { height: 48px; }
  .vt-ranking .rk-d1::before { width: 240px; }
}

/* ============================================================
   7. O JORNAL — crônica
   ============================================================
   Serifa de livro (as do próprio aparelho: nenhum byte de fonte a
   mais), capitular na primeira letra de cada nota, a data por extenso
   como linha de crônica e um ornamento entre os dias. */
.vt-jornal { --cronica: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif; }
.vt-jornal .y-cabeca h1 { font-family: var(--cronica); font-weight: 700; font-size: clamp(30px, 5vw, 44px); letter-spacing: .01em; font-variant: small-caps; }
.vt-jornal .y-cabeca .y-sobretitulo { font-family: var(--cronica); font-style: italic; text-transform: none; letter-spacing: .04em; font-size: 15px; }
.vt-jornal #lista { counter-reset: nota; }
.vt-jornal .vt-cronica-dia {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin: 26px 0 4px; padding: 0 0 10px; border: 0; position: relative;
  font-family: var(--cronica); font-weight: 400; letter-spacing: 0; text-transform: none;
  animation: vtSobe .5s var(--ease-out) both;
}
.vt-jornal .vt-cronica-dia:first-child { margin-top: 6px; }
.vt-jornal .vt-cronica-dia::after {
  content: "❦"; position: absolute; left: 0; right: 0; bottom: -8px; text-align: center;
  font-size: 13px; color: var(--gold); line-height: 1;
  background: linear-gradient(90deg, transparent, rgba(255,201,107,.35) 20%, rgba(255,201,107,.35) 46%, transparent 46%, transparent 54%, rgba(255,201,107,.35) 54%, rgba(255,201,107,.35) 80%, transparent) center / 100% 1px no-repeat;
}
.vt-jornal .vt-cronica-nome { font-size: 22px; font-style: italic; color: var(--gold-luz); text-transform: capitalize; }
.vt-jornal .vt-cronica-data { font-size: 15px; color: var(--ink); }
.vt-jornal .vt-cronica-ato {
  margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); padding: 3px 9px; box-shadow: inset 0 0 0 1px rgba(255,176,59,.4);
}
.vt-jornal .noticia { animation: vtSobe .5s var(--ease-out) both; }
.vt-jornal .noticia h3 {
  font-family: var(--cronica); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: 0; color: var(--gold-luz);
}
.vt-jornal .noticia h3 .onde { font-family: var(--mono); }
.vt-jornal .noticia p { font-family: var(--cronica); font-size: 16px; line-height: 1.65; color: var(--ink); }
/* A capitular: na primeira nota de cada dia, como abre um capítulo. */
.vt-jornal .vt-cronica-dia + .noticia > div:last-child > p::first-letter {
  float: left; font-family: var(--cronica); font-weight: 700; font-size: 2.75em; line-height: .9;
  margin: .04em .08em 0 0; color: var(--gold-luz); text-shadow: 0 0 18px rgba(255,176,59,.4);
}
.vt-jornal .noticia.publicacao h3 { font-family: var(--cronica); font-style: italic; font-weight: 600; font-size: 18.5px; color: var(--ink); }
.vt-jornal .vt-cronica-dia + .noticia.publicacao > div:last-child > p::first-letter { color: #f1e3c4; text-shadow: none; }
.vt-jornal .noticia .assina { font-family: var(--cronica); font-style: italic; font-size: 14px; }
.vt-jornal .noticia .quando { font-family: var(--mono); }
.vt-jornal .noticia .quando b { display: none; }   /* o dia já está na linha da crônica */
.vt-jornal .noticia .quando { font-size: 13px; color: var(--gold); padding-top: 6px; }
.vt-jornal .noticia.ato { background: linear-gradient(100deg, rgba(255,176,59,.12), rgba(255,176,59,.03)); box-shadow: inset 3px 0 0 var(--gold); border-radius: 0; }
.vt-jornal .noticia.ato h3 { font-size: 26px; font-variant: small-caps; }
.vt-jornal .jn-abrir { font-family: var(--cronica); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 16px; font-weight: 600; }
.vt-jornal .y-vazio-frase { font-family: var(--cronica); font-style: italic; font-size: 22px; }

/* ============================================================
   8. MANUAL E TERMOS — leitura bonita
   ============================================================ */
.vt-leitura .documento { text-rendering: optimizeLegibility; }
.vt-leitura .y-cabeca, .vt-legal .doc-cabeca, .vt-legal header:first-of-type { position: relative; }
.vt-leitura .y-cabeca .y-cabeca-selo { animation: vtAcende 1.2s var(--ease-out) both; }
.vt-manual .y-cabeca { box-shadow: inset 0 0 0 1px rgba(255,176,59,.22), 0 20px 50px -30px rgba(255,106,61,.6); }
/* A barra de leitura no alto (rolagem ligada ao CSS: sem JavaScript;
   navegador que não sabe fazer isso simplesmente não mostra). */
@supports (animation-timeline: scroll()) {
  .vt-manual::after {
    content: ""; position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
    background: var(--corona); transform-origin: left; transform: scaleX(0);
    animation: vtLeitura linear both; animation-timeline: scroll(root);
    box-shadow: 0 0 10px rgba(255,106,61,.6);
  }
  @keyframes vtLeitura { to { transform: scaleX(1); } }
}
/* O manual como códice: cada capítulo é uma página que se abre. */
.vt-manual details.cap > .cap-titulo { position: relative; transition: color var(--normal), padding-left var(--calmo) var(--ease-out); }
.vt-manual details.cap > .cap-titulo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: -1; opacity: 0;
  background: linear-gradient(90deg, rgba(255,176,59,.10), transparent 70%);
  transition: opacity var(--calmo) var(--ease-out);
}
@media (hover: hover) {
  .vt-manual details.cap > .cap-titulo:hover { padding-left: 10px; }
  .vt-manual details.cap > .cap-titulo:hover::before { opacity: 1; }
  .vt-manual details.cap > .cap-titulo:hover .cap-num { color: var(--gold-luz); box-shadow: inset 0 0 0 1px rgba(255,176,59,.5); }
}
.vt-manual details.cap[open] > .cap-titulo::before { opacity: 1; }
.vt-manual details.cap[open] .cap-num { box-shadow: 0 0 14px rgba(255,176,59,.55); }
.vt-manual details.cap[open] > .cap-corpo {
  padding: 6px 18px 24px; margin: 0 0 10px; position: relative;
  background: radial-gradient(500px 220px at 0% 0%, rgba(255,176,59,.06), transparent 70%), rgba(255,243,234,.02);
  box-shadow: inset 2px 0 0 rgba(255,176,59,.5);
  animation: vtSobe .4s var(--ease-out) both;
}
.vt-manual .cap-grupo-titulo { position: relative; }
.vt-manual .cap-grupo-titulo::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 120px;
  background: var(--corona); box-shadow: 0 0 8px rgba(255,106,61,.7);
}
.vt-manual .cap-grupo-titulo img { transition: transform var(--calmo) var(--mola); }
.vt-manual .cap-grupo:hover .cap-grupo-titulo img { transform: rotate(-8deg) scale(1.1); }
.vt-manual .cap-atalhos a { transition: color var(--normal), border-color var(--normal), background-color var(--normal); }
.vt-manual .cap-atalhos a:hover { background: rgba(255,176,59,.08); }
.vt-manual .ficha-bicho { border-radius: 0; clip-path: var(--corte-p); }
.vt-manual .cap-corpo h3, .vt-manual .cap-corpo h4 { color: var(--gold-luz); }

/* Os termos: a mesma leitura calma, com o número de cada seção em ouro. */
.vt-legal .doc-texto h2 { position: relative; padding-left: 22px; border-top-color: transparent; }
.vt-legal .doc-texto h2::before {
  content: ""; position: absolute; left: 2px; bottom: .62em; width: 9px; height: 9px; rotate: 45deg; translate: 0 50%;
  background: var(--corona); box-shadow: 0 0 10px rgba(255,106,61,.55);
}
.vt-legal .doc-texto h2::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,176,59,.4), var(--borda-sut) 40%, transparent);
}
.vt-legal .doc-resumo { box-shadow: 0 18px 40px -28px rgba(255,176,59,.6); }
.vt-legal .doc-cabeca h1 { text-shadow: 0 2px 30px rgba(255,176,59,.18); }
.vt-legal .doc-texto p, .vt-legal .doc-texto li { max-width: 68ch; }

/* ============================================================
   9. A LOJA DE DIAMANTES — o brilho do Eclipse Eterno
   ============================================================
   Só visual: preço, pacote, passos e pagamento são os mesmos (o
   preço vem do servidor). O brilho corre por cima de cada pacote em
   tempos diferentes, o escolhido ganha o anel de diamante. */
.vt-loja .pacote { position: relative; overflow: hidden; isolation: isolate; }
.vt-loja .pacote::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(200,245,255,.26), transparent);
  transform: translateX(-140%) skewX(-18deg);
  animation: vtBrilho 7s var(--ease) infinite;
}
.vt-loja .pacote:nth-child(2)::after { animation-delay: 1.1s; }
.vt-loja .pacote:nth-child(3)::after { animation-delay: 2.2s; }
.vt-loja .pacote:nth-child(4)::after { animation-delay: 3.3s; }
.vt-loja .pacote:nth-child(5)::after { animation-delay: 4.4s; }
.vt-loja .pacote:nth-child(6)::after { animation-delay: 5.5s; }
.vt-loja .pacote .arte { position: relative; }
.vt-loja .pacote .arte::before {
  /* o halo do eclipse atrás da arte do pacote */
  content: ""; position: absolute; left: 50%; top: 50%; width: 150px; aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgba(168,236,255,.20), rgba(125,227,255,.05) 50%, transparent 70%);
  animation: vtRespira 4.5s var(--ease) infinite;
}
.vt-loja .pacote.dourado .arte::before { background: radial-gradient(circle, rgba(255,201,107,.26), rgba(255,106,61,.06) 50%, transparent 70%); }
.vt-loja .pacote:hover .arte img { transform: scale(1.08) translateY(-4px) rotate(-2deg); }
.vt-loja .pacote[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--diamante), 0 0 40px -10px rgba(125,227,255,.75); }
.vt-loja .fita { box-shadow: 0 4px 14px -4px rgba(0,0,0,.6); }
.vt-loja .fita.melhor_oferta { animation: vtRespiraFita 2.6s var(--ease) infinite; }
@keyframes vtRespiraFita { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.vt-loja .saldo-grande img { animation: vtFlutua 4s var(--ease) infinite; }
.vt-loja .loja-topo h1 {
  background: linear-gradient(100deg, #fff3ea 30%, var(--diamante) 60%, #fff3ea 80%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vtTitulo 7s linear infinite;
}
@keyframes vtTitulo { from { background-position: 120% 0; } to { background-position: -100% 0; } }

/* ============================================================
   MOVIMENTO REDUZIDO — tudo parado, nada some
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vt-site .ceu img { transform: none !important; transition: none; }
  .vt-site .logo-largo, .vt-site .emblema { translate: none !important; transition: none; }
  .vt-site .vt-cenas { display: none; }
  .vt-site .capa::before, .vt-site .capa > *, .vt-site .capa .logo-largo,
  .vt-site .botoes-capa .y-primario::after, .vt-site .fecho .y-primario::after,
  .vt-entrar .pintura, .vt-entrar main.painel.porta-cartao::after,
  .vt-entrar .porta-cartao form, .vt-entrar .porta-cartao section,
  .vt-entrar .porta-arte .logo-largo, .vt-entrar .porta-arte .frase, .vt-entrar .porta-arte .chips,
  .vt-entrar .porta-arte .selos img,
  .vt-sala .vt-tochas i, .vt-sala .sala-heroi-acao .botao::after, .vt-estandarte,
  .vt-sala .mundo-novo::before, .vt-fama-podio i { animation: none !important; }
  .vt-sala .sala-heroi-acao .botao::after, .vt-loja .pacote::after { display: none; }
  .vt-sala .mundo-arte::before { transition: none; }
  .vt-cine { display: none !important; }
  .vt-perfil #painel .capa .aro::before { animation: none; }
  .vt-loja .pacote::after, .vt-loja .pacote .arte::before, .vt-loja .fita.melhor_oferta, .vt-loja .saldo-grande img, .vt-loja .loja-topo h1,
  .vt-jornal .vt-cronica-dia, .vt-jornal .noticia, .vt-leitura .y-cabeca .y-cabeca-selo, .vt-manual details.cap[open] > .cap-corpo,
  .vt-ranking .rk-degrau, .vt-ranking .rk-medalha, .vt-ranking .rk-podio-nome, .vt-ranking .rk-podio-sub,
  .vt-ranking .rk-podio-pts, .vt-ranking .rk-base::after, .vt-ranking .rk-d1::before, .vt-ranking .rk-d1::after { animation: none !important; }
  .esc-povo .vt-cartao-frase, .esc-povo .vt-cartao-mentor { transition: none; }
  .vt-site .botoes-capa .y-primario::after, .vt-site .fecho .y-primario::after { display: none; }
}