/* CABAL ACTION — Identidade Imperial (22/10): ouro, platina e verde Força; acabamento de metal e profundidade 3D.
   Carregado por último: só sobrepõe. Peças do ID-14 em static/img/ui, marca rota A em static/img/marca.
   Regra que continua valendo: --fundo dos chanfros tem que ser opaco. */

:root {
  --forca: #00E08A;
  --forca-nucleo: #B8FFE6;
  --forca-profunda: #00A86B;
  --ouro-luz: #FFE7A3;
  --ouro: #E0B54A;
  --ouro-base: #A8741E;
  --ouro-sombra: #5C3A0E;
  --platina-luz: #F7F8FA;
  --platina: #D3D7DD;
  --platina-base: #9AA1AB;
  --metal-ouro: linear-gradient(180deg, var(--ouro-luz) 0%, var(--ouro) 42%, var(--ouro-base) 78%, #C9963A 100%);
  --metal-platina: linear-gradient(180deg, var(--platina-luz) 0%, var(--platina) 50%, var(--platina-base) 100%);
}

/* ---------- fundo geral: noite de aço com filigrana de ouro ---------- */
body { background: #0B0D10 url("../img/arte/textura-fundo.webp") repeat; background-size: 512px; }

/* ---------- cabeçalho ---------- */
.cabecalho { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(224,181,74,.7), transparent) 1; }
.marca__img-h { display: block; height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: filter .25s ease; }
.marca:hover .marca__img-h { filter: drop-shadow(0 0 10px rgba(224,181,74,.45)); }
@media (max-width: 420px) { .marca__img-h { height: 36px; } }
.nav__link[aria-current="page"] { color: var(--ouro-luz); }
.nav__link[aria-current="page"]::after { background: var(--metal-ouro); }

/* ---------- títulos em metal ---------- */
.secao__cab h2, .topo-pagina h1, .ficha__nome, .titulo-bloco, .palco__frase, .chamada h2 {
  background: var(--metal-platina); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55));
}
.palco__frase em, .chamada h2 em { background: var(--metal-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow, .especial__tipo, .ficha__pos { color: var(--ouro); }
.eyebrow { letter-spacing: .26em; }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: middle; background: var(--forca); transform: rotate(45deg); box-shadow: 0 0 8px var(--forca); }

/* ---------- botões forjados ---------- */
.btn--principal { color: #2A1A05; --borda: var(--ouro-luz);
  --fundo: linear-gradient(180deg, rgba(255,240,190,.55), rgba(255,255,255,0) 45%, rgba(92,58,14,.35)), url("../img/ui/ouro-escovado.webp") center / 256px, var(--ouro); }
.btn--principal:hover { color: #1A1003; filter: brightness(1.08) drop-shadow(0 0 16px rgba(224,181,74,.55)); }
.btn--principal::after { box-shadow: inset 0 1px 0 rgba(255,250,225,.8), inset 0 -3px 0 rgba(92,58,14,.45); }
.btn--secundario { --borda: var(--platina-base); --fundo: linear-gradient(180deg, #1A1F25, #0E1216); color: var(--platina-luz); }
.btn--secundario:hover { --borda: var(--ouro); color: var(--ouro-luz); }
.chip--tg { --borda: var(--ouro-base); }

/* ---------- divisor ornamental ---------- */
.divisor { height: 54px; margin: 6px auto; background: url("../img/ui/divisor.webp") center / min(1000px, 90%) auto no-repeat; }

/* ---------- palco: sigilo girando atrás da marca + profundidade ---------- */
.palco__marca { position: relative; }
.palco__marca img { width: clamp(300px, 38vw, 600px); filter: drop-shadow(0 0 36px rgba(224,181,74,.28)) drop-shadow(0 10px 24px rgba(0,0,0,.85)); }
.palco__sigilo { position: absolute; left: 50%; top: 30%; width: 74%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(224,181,74,.28);
  background:
    radial-gradient(circle, transparent 60%, rgba(224,181,74,.22) 60.3%, transparent 60.8%),
    radial-gradient(circle, transparent 66%, rgba(0,224,138,.14) 66.3%, transparent 67%),
    repeating-conic-gradient(from 0deg, rgba(224,181,74,.30) 0 .6deg, transparent .6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 63.2%, #000 69%, transparent 69.2%, transparent 70%, #000 70.2%);
  mask: radial-gradient(circle, transparent 63%, #000 63.2%, #000 69%, transparent 69.2%, transparent 70%, #000 70.2%);
  animation: gira 140s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
/* wallpaper fixo (Bruno, 22/10: o parallax confundia); a animação leve fica por cima: partículas e pulso do pilar */
.palco__arte img { animation: none; transform: none; }
.palco::before, .palco::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.palco::before { /* partículas de Força e ouro subindo devagar */
  background-image:
    radial-gradient(1.5px 1.5px at 12% 80%, rgba(184,255,230,.85), transparent 60%),
    radial-gradient(1px 1px at 27% 65%, rgba(255,231,163,.8), transparent 60%),
    radial-gradient(2px 2px at 41% 90%, rgba(0,224,138,.7), transparent 60%),
    radial-gradient(1px 1px at 58% 72%, rgba(255,231,163,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 69% 85%, rgba(184,255,230,.8), transparent 60%),
    radial-gradient(1px 1px at 83% 60%, rgba(255,231,163,.75), transparent 60%),
    radial-gradient(2px 2px at 93% 92%, rgba(0,224,138,.6), transparent 60%);
  background-size: 100% 640px; background-repeat: repeat;
  animation: particulas 26s linear infinite; opacity: .8; }
@keyframes particulas { from { background-position: 0 0; } to { background-position: 0 -640px; } }
.palco::after { /* respiração da luz do pilar central */
  background: radial-gradient(14% 70% at 50% 62%, rgba(0,224,138,.20), transparent 70%),
              radial-gradient(30% 22% at 50% 70%, rgba(224,181,74,.10), transparent 70%);
  animation: pilarLuz 7s ease-in-out infinite; }
@keyframes pilarLuz { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.palco__centro { transform: translateY(-6%); }
.palco__tg { --borda: var(--ouro-base); --fundo: linear-gradient(180deg, #14110B, #0B0D10); }
.palco__tg-valor { color: var(--ouro-luz); text-shadow: 0 0 18px rgba(224,181,74,.45); }
.palco__trilho a:hover, .palco__trilho a[aria-current="true"] { border-left-color: var(--ouro); }
.palco__trilho a[aria-current="true"] .palco__trilho-n { color: var(--ouro); }
@media (max-width: 720px) { .palco__centro { transform: none; } }
@media (prefers-reduced-motion: reduce) { .palco::before, .palco::after { animation: none; } }

/* ---------- topo de página em cena (texto à esquerda) ---------- */
.topo-pagina--cena { position: relative; overflow: hidden; isolation: isolate; padding: 128px 0 76px; border-bottom: 0; }
.topo-pagina--cena::before { display: none; }
.topo-pagina--cena .topo-pagina__arte { position: absolute; inset: 0; z-index: -2; opacity: 1; }
.topo-pagina--cena .topo-pagina__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.topo-pagina--cena .topo-pagina__veu { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,9,11,.92) 0, rgba(7,9,11,.7) 34%, rgba(7,9,11,.15) 70%, rgba(7,9,11,.35) 100%), linear-gradient(0deg, #0B0D10 0, transparent 35%); }
.topo-pagina--cena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ouro), transparent); opacity: .6; }
.topo-pagina--fundo .topo-pagina__arte img { object-position: 50% 50%; }
@media (max-width: 720px) {
  .topo-pagina--cena { padding: 88px 0 48px; }
  .topo-pagina--cena .topo-pagina__veu { background: linear-gradient(0deg, #0B0D10 0, rgba(7,9,11,.75) 55%, rgba(7,9,11,.45) 100%); }
}

/* ---------- guerra: brasões 3D ---------- */
.brasao-3d { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
.guerra__titulo { display: flex; align-items: center; gap: 12px; }
.ficha__emblema { width: 104px; height: 104px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.75)); }

/* ---------- pódio com medalhas e molduras de metal ---------- */
.podio__medalha { position: absolute; top: 10px; left: 10px; width: 64px; height: 64px; z-index: 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.podio__item--1 .podio__medalha { width: 84px; height: 84px; }
.podio__item--1 .podio__cartao, .ficha__poder { --borda: transparent; border: 20px solid transparent; border-image: url("../img/ui/moldura-ouro.webp") 64 / 20px stretch; }
.podio__item--2 .podio__cartao { --borda: transparent; border: 16px solid transparent; border-image: url("../img/ui/moldura-platina.webp") 64 / 16px stretch; }
.podio__item--1 .podio__poder { color: var(--ouro-luz); }
.ficha__poder { --fundo: radial-gradient(70% 70% at 50% 30%, rgba(224,181,74,.14), transparent 70%), #0E0D0A; padding: 6px 4px; }
.ficha__valor { background: var(--metal-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(224,181,74,.35)); }

/* ranking: 1º ouro, 2º platina */
.linha-1 .pos { background: var(--metal-ouro); color: #2A1A05; }
.linha-2 .pos { background: var(--metal-platina); color: #1A1F25; box-shadow: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tabela tr.linha-2 { background: linear-gradient(90deg, rgba(211,215,221,.07), transparent 55%); }

/* ---------- ficha: slot de inventário em metal ---------- */
.slot__icone--foto { background: url("../img/ui/slot.webp") center / cover; border: 0; box-shadow: none; }
.slot__icone--foto::after { display: none; }
.slot--vazio .slot__icone { background: url("../img/ui/slot-vazio.webp") center / cover; border: 0; }
.slot__refino--max { color: var(--ouro-luz); border-color: var(--ouro-base); background: #16110A; text-shadow: 0 0 8px rgba(224,181,74,.4); }
.equip__centro::before { background: linear-gradient(180deg, var(--ouro), var(--ouro-base) 40%, #2C343E 75%); }

/* ---------- página da marca ---------- */
.rota-final__vitrine img { max-height: 260px; width: auto; }
.paleta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.paleta div { display: flex; flex-direction: column; gap: 6px; }
.paleta dt { font: 700 .72rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.paleta__cor { margin: 0; height: 64px; display: flex; align-items: flex-end; padding: 8px; font: 700 .8rem/1 var(--f-texto); }
.paleta__cor--ouro { background: var(--metal-ouro); color: #2A1A05; }
.paleta__cor--platina { background: var(--metal-platina); color: #1A1F25; }
.paleta__cor--forca { background: linear-gradient(180deg, #5CF2B4, var(--forca) 55%, var(--forca-profunda)); color: #04291B; }
.paleta__cor--noite { background: #0B0D10; color: var(--texto); border: 1px solid var(--aco-700); }
@media (max-width: 720px) { .paleta { grid-template-columns: 1fr 1fr; } }

/* ---------- profundidade 3D: inclinação + brilho que segue o ponteiro (JS adiciona .tilt) ---------- */
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.tilt.tilt--ativo { transition: transform .08s linear; }
.tilt__brilho { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,231,163,.16), rgba(0,224,138,.06) 35%, transparent 60%);
  clip-path: polygon(var(--c, var(--ch)) 0, 100% 0, 100% calc(100% - var(--c, var(--ch))), calc(100% - var(--c, var(--ch))) 100%, 0 100%, 0 var(--c, var(--ch))); }
.tilt--ativo .tilt__brilho { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .palco__sigilo { animation: none; }
  .palco__arte img, .palco__centro, .tilt { transition: none; transform: none; }
}