/* ==========================================================================
   FICHA DO HERÓI (03/10, opção A3 escolhida pelo autor) — src/ui/player-card-ui.js
   O retrato é o MESMO de antes (`.col-ficha-retrato` > `.col-ficha-lutador`,
   150px, contexto "ficha" do Editor): nada aqui muda o tamanho do lutador,
   então a calibração continua valendo. Em volta dele, as 7 peças (como o
   Inventário); embaixo, Dano/Vida/Defesa e o resto em "Mais detalhes".
   ========================================================================== */
.col-ficha-card.fh{width:min(470px,100%);padding:16px 16px 14px;}
.fh-cabeca{text-align:center;margin-bottom:8px;}
.fh-cabeca .col-ficha-chips{justify-content:center;margin-bottom:0;}
.fh .col-ficha-placa{margin-bottom:2px;height:64px;}

/* O boneco: as 7 peças em volta do retrato. */
.fh-palco{display:grid;justify-content:center;gap:6px;
  grid-template-columns:58px 190px 58px;grid-template-rows:repeat(4,minmax(0,1fr));
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia";}
.fh-palco>.col-ficha-retrato{grid-area:ret;}
/* HERÓI NO PÉ DA MOLDURA (autor, 05/10: "meu personagem tá muito pra cima"). O lutador
   (150px) ficava preso a 34px do topo, com a asa e a cabeça cortadas em cima e ~40px vazios
   embaixo. Agora ele pisa perto do pé da moldura, que ficou mais alta, e sobra céu para
   asas grandes. Só a MOLDURA muda: o lutador e a calibração do Editor ficam iguais.
   06/10 (autor: "agora ficou baixo demais"): o pé sobe para 44px do chão; a asa Nv.5 ainda cabe em cima. */
.fh .col-ficha-retrato{height:262px;padding:0 0 44px;align-items:flex-end;}
/* HERÓI MAIOR NA FICHA (07/10, autor: "to achando eles muito pequenos dentro das fichas"; escolheu B).
   O lutador cresce INTEIRO por transform (asa, arma, pet e aura juntos), a partir do pé: a calibração do
   Editor (lutador:ficha:...) continua a mesma por dentro. PC +38%; celular +16% (mais que isso a asa e a
   arma encostam nos quadrados das peças); celular estreito +4%. */
.fh-palco{grid-template-columns:58px 290px 58px;}
.fh .col-ficha-retrato{height:370px;padding-bottom:48px;}
.fh .col-ficha-lutador{transform:scale(var(--fh-heroi,1.38));transform-origin:50% 100%;}
.fh-equip{display:contents;}
.fh-slot{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:52px;padding:2px;
  align-self:center;justify-self:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  color:#e9ebf0;cursor:var(--cur-mao,pointer);font:inherit;}
.fh-slot[data-slot="wing"]{grid-area:wing}
.fh-slot[data-slot="helmet"]{grid-area:helmet}
.fh-slot[data-slot="weapon"]{grid-area:weapon}
.fh-slot[data-slot="armor"]{grid-area:armor}
.fh-slot[data-slot="pendant"]{grid-area:pendant}
.fh-slot[data-slot="boots"]{grid-area:boots}
.fh-slot[data-slot="ring"]{grid-area:ring}
.fh-slot:disabled{cursor:var(--cur-seta,default);opacity:.55;}
.fh-slot.on,.fh-slot:not(:disabled):hover{border-color:#ffd56a;box-shadow:0 0 0 1px rgba(255,213,106,.35);}
.fh-slot .fh-arte{width:40px;height:40px;object-fit:contain;flex:0 0 auto;image-rendering:auto;}
.fh-slot .fh-silhueta{display:inline-flex;width:28px;height:28px;color:rgba(255,255,255,.28);}
.fh-slot .fh-silhueta svg{width:100%;height:100%;}
.fh-slot.r-common{border-color:rgba(200,200,200,.28);}
.fh-slot.r-uncommon{border-color:rgba(134,168,79,.6);}
.fh-slot.r-rare{border-color:rgba(90,150,255,.6);}
.fh-slot.r-epic{border-color:rgba(186,104,255,.65);}
.fh-slot.r-legendary{border-color:rgba(255,184,77,.7);}
.fh-slot.r-mythic,.fh-slot.r-ancestral{border-color:rgba(255,90,90,.7);}
.fh-mais{position:absolute;top:2px;right:4px;font-size:.66rem;font-weight:800;color:#ffd56a;text-shadow:0 1px 2px #000;}
/* O nome da peça fica só para leitor de tela (a ficha do item abre ao tocar). */
.fh-slot-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* A ficha do item abre numa janela POR CIMA (06/10), igual à da Aparência; no PC o balão do mouse
   (o #gameTooltip do jogo) passa a ficar por cima da ficha do herói (12000). */
html.col-com-ficha #gameTooltip{z-index:12100;}
.fh-item-janela{text-align:left;width:min(400px,100%);}
.fh-item-janela .fh-ap-voltar{display:block;margin:12px auto 0;}
.fh-item-janela .game-tooltip{position:static!important;display:block!important;max-width:none!important;width:auto!important;
  opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto;
  max-height:none!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;}

/* Resumo. */
.fh-bloco{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-top:8px;}
.fh-resumo{padding:8px;}
.fh-principais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.fh-stat{display:flex;flex-direction:column;align-items:center;min-width:0;background:rgba(0,0,0,.28);border-radius:7px;padding:5px 4px;}
.fh-stat span{font-size:.68rem;color:var(--muted,#9aa3b5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.fh-stat strong{font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.fh-stat.dano strong{color:#ff8a5c;}
.fh-stat.vida strong{color:#63c887;}
.fh-stat.defesa strong{color:#7fb2ff;}
.fh-nota-pvp,.fh-carregando{margin:6px 0 0;font-size:.68rem;color:#7d8597;text-align:center;}
.fh-sec{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:3px 8px;margin:8px 2px 0;font-size:.76rem;}
.fh-sec dt{color:var(--muted,#9aa3b5);white-space:nowrap;}
.fh-sec dd{margin:0;color:#fff;font-weight:700;font-variant-numeric:tabular-nums;}
.fh-atrib-mini,.fh-info-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.fh-atrib-mini span,.fh-info-chips span{font-size:.72rem;color:var(--muted,#9aa3b5);background:rgba(0,0,0,.28);border-radius:999px;padding:2px 8px;overflow-wrap:anywhere;}
.fh-atrib-mini span{color:#d7a944;font-weight:700;}
.fh-atrib-mini strong,.fh-info-chips strong{color:#fff;font-variant-numeric:tabular-nums;}
.fh-detalhes{margin-top:6px;}
.fh-detalhes>summary{cursor:var(--cur-mao,pointer);font-size:.76rem;font-weight:700;color:#ffd56a;padding:4px 2px;list-style:none;text-align:center;}
.fh-detalhes>summary::-webkit-details-marker{display:none;}
.fh-detalhes>summary::after{content:" ▾";}
.fh-detalhes[open]>summary::after{content:" ▴";}

/* Ações. */
.fh-acoes{display:flex;gap:8px;margin-top:10px;}
.fh-acoes:empty{display:none;}
.fh-botao{flex:1 1 0;min-width:0;min-height:40px;border-radius:8px;font:inherit;font-weight:800;font-size:.8rem;letter-spacing:.03em;
  cursor:var(--cur-mao,pointer);border:1px solid rgba(255,213,106,.55);background:linear-gradient(180deg,#3b2f14,#241c0c);color:#ffd56a;padding:6px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fh-botao.fh-mensagem{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#e9ebf0;}
.fh-botao:disabled{cursor:var(--cur-seta,default);opacity:.6;}
.fh-amigo[data-estado="amigos"]{border-color:rgba(99,200,135,.6);color:#63c887;background:rgba(99,200,135,.08);opacity:1;}
.fh-amigo[data-estado="enviado"]{opacity:.85;}
/* Duelo amistoso (05/10): numa linha só dele, embaixo de AMIGO e MENSAGEM. */
.fh-acoes{flex-wrap:wrap;}
.fh-botao.fh-duelo{flex:1 1 100%;border-color:rgba(255,120,90,.6);background:linear-gradient(180deg,#4a1f14,#2a110a);color:#ffb39a;}

/* ---------------------------------------------------------------- celular */
@media (max-width:600px){
  .col-ficha-fundo{padding:8px;}
  .col-ficha-card.fh{padding:12px 10px 10px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .fh-palco{grid-template-columns:52px minmax(0,240px) 52px;}
  .fh-slot{width:52px;height:50px;}
  .fh .col-ficha-retrato{flex:0 0 auto;height:310px;padding-bottom:46px;}
  .fh .col-ficha-lutador{--fh-heroi:1.16;}
  /* 46px: o selo da classe não passa por baixo do X (17/10, 360px com texto 130%). */
  .fh .fh-cabeca{padding:0 46px;}
}
/* Celular estreito: os dois botões um embaixo do outro, cada um numa linha só. */
@media (max-width:430px){
  .fh-acoes{flex-direction:column;}
  .fh-botao{flex:0 0 auto;}
}
@media (max-width:380px){.fh-sec{grid-template-columns:auto minmax(0,1fr);}
  .fh-palco{gap:4px;}.fh .col-ficha-retrato{height:280px;}.fh .col-ficha-lutador{--fh-heroi:1.04;}}
/* Celular deitado: pouca altura, então boneco e números lado a lado. */
@media (max-height:500px) and (min-width:640px){
  .col-ficha-card.fh{width:min(880px,100%);}
  .fh-corpo{display:grid;grid-template-columns:354px minmax(0,1fr);gap:12px;align-items:start;}
  .fh-conteudo{padding-top:34px;}
  .fh-conteudo>.fh-bloco:first-child{margin-top:0;}
  .fh-palco{grid-template-columns:52px 230px 52px;}
  .fh-slot{width:52px;height:50px;}
  .fh .col-ficha-retrato{height:300px;padding-bottom:44px;}
  .fh .col-ficha-lutador{--fh-heroi:1.12;}
  .fh .col-ficha-placa{height:44px;}
  .fh-acoes{flex-direction:column;}
  .fh-botao{padding:6px 4px;letter-spacing:0;}
}

/* 4ª A 6ª CLASSE (03/10): a classe de fim de jogo vira um selo com o brasão na cor da etapa
   (4ª azul, 5ª roxa, 6ª diamante), e a ficha e o retrato ganham uma aura da mesma cor. */
.fh.fh-etapa-3{--fh-aura:#4f8ef0;--fh-aura-claro:#cfe2ff;--fh-aura-fundo:rgba(20,48,107,.55)}
.fh.fh-etapa-4{--fh-aura:#a66bf0;--fh-aura-claro:#f0dcff;--fh-aura-fundo:rgba(61,22,112,.55)}
.fh.fh-etapa-5{--fh-aura:#bff4ff;--fh-aura-claro:#ffffff;--fh-aura-fundo:rgba(43,111,134,.55)}
.col-ficha-card.fh.fh-lendario{border-color:var(--fh-aura);box-shadow:0 0 0 1px var(--fh-aura),0 0 28px color-mix(in srgb,var(--fh-aura) 45%,transparent),0 18px 50px rgba(0,0,0,.6)}
.fh .col-ficha-classe.fh-classe-lendaria{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:6px auto 2px;padding:3px 14px 3px 6px;
  border:1px solid var(--fh-aura);border-radius:999px;background:linear-gradient(90deg,var(--fh-aura-fundo),rgba(0,0,0,.35));
  box-shadow:0 0 14px color-mix(in srgb,var(--fh-aura) 40%,transparent);color:var(--fh-aura-claro);
  font-family:Cinzel,Georgia,serif;font-weight:800;font-size:calc(15px * var(--text-scale, 1));letter-spacing:.04em;text-shadow:0 0 10px var(--fh-aura)}
.fh-classe-brasao{flex:0 0 auto;width:26px;height:30px;display:grid;place-items:center}
.fh-classe-brasao svg{width:100%;height:100%}
.fh-classe-nome{min-width:0;overflow-wrap:anywhere}
.fh-lendario .col-ficha-retrato{box-shadow:inset 0 0 40px color-mix(in srgb,var(--fh-aura) 35%,transparent),0 0 16px color-mix(in srgb,var(--fh-aura) 30%,transparent);
  background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--fh-aura) 28%,transparent),transparent 65%)}
.fh-etapa-5 .col-ficha-retrato{animation:fh-aura-pulso 3.2s ease-in-out infinite}
@keyframes fh-aura-pulso{50%{box-shadow:inset 0 0 56px color-mix(in srgb,var(--fh-aura) 50%,transparent),0 0 24px color-mix(in srgb,var(--fh-aura) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.fh-etapa-5 .col-ficha-retrato{animation:none}}

/* ==========================================================================
   APARÊNCIA (06/10, opção B + janela 2 do autor) — src/ui/player-card-ui.js
   Ícone embaixo das botas com contorno girando: dourado = VISUAL da Coleção,
   arco-íris = SKIN da Vitrine. Tocar abre a janela com Set, Arma e Asa.
   Leve de propósito (o brilho do aprimoramento do set já deu lag): um só
   gradiente girando por ícone, parado com efeitos desligados.
   Arte: corpo do set é quadrado com o boneco no meio, então ele é RECORTADO
   (cover) e nunca esticado; arma e asa ficam inteiras (contain).
   ========================================================================== */
@property --fh-ap-giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fhApGiro{to{--fh-ap-giro:360deg}}
@keyframes fhApPulso{50%{box-shadow:0 0 14px var(--fh-ap-luz)}}
.fh-slot.fh-ap{grid-area:aparencia;overflow:visible;isolation:isolate;border-color:transparent;
  --fh-ap-luz:rgba(255,200,80,.6);--fh-ap-faixa:conic-gradient(from var(--fh-ap-giro),#ffd56a,#fff6d0,#ff9d2e,#ffd56a 40%,rgba(255,213,106,.15) 55%,#ffd56a 70%,#fff6d0,#ffd56a);
  background:radial-gradient(circle at 50% 40%,rgba(255,213,106,.16),rgba(0,0,0,.45) 70%);
  box-shadow:0 0 8px var(--fh-ap-luz);animation:fhApPulso 2.4s ease-in-out infinite;}
.fh-slot.fh-ap.skin{--fh-ap-luz:rgba(197,139,255,.65);--fh-ap-faixa:conic-gradient(from var(--fh-ap-giro),#c58bff,#7fe3ff,#ffd56a,#ff7ad9,#c58bff);
  background:radial-gradient(circle at 50% 40%,rgba(197,139,255,.16),rgba(0,0,0,.45) 70%);}
.fh-slot.fh-ap::before,.fh-ap-quadro.vis::before,.fh-ap-quadro.skin::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:-1;pointer-events:none;
  background:var(--fh-ap-faixa);animation:fhApGiro 3.2s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.fh-slot.fh-ap.on,.fh-slot.fh-ap:hover{border-color:transparent;box-shadow:0 0 14px var(--fh-ap-luz);}
.fh-ap-leque{position:relative;display:block;width:46px;height:44px;overflow:hidden;border-radius:6px;}
.fh-ap-leque img{position:absolute;pointer-events:none;}
/* Corpo do set: o boneco ocupa o meio do quadrado; dobra e mostra da cabeça à cintura. */
.fh-ap-leque[data-principal="set"] .fh-ap-principal{width:92px;height:92px;left:-23px;top:-3px;object-fit:contain;}
.fh-ap-leque:not([data-principal="set"]) .fh-ap-principal{inset:2px;width:42px;height:40px;object-fit:contain;}
.fh-ap-canto{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000);}
.fh-ap-canto-weapon{left:-1px;bottom:-1px;}
.fh-ap-canto-wing{right:-1px;bottom:-1px;}
.fh-ap-leque[data-principal="set"] .fh-ap-canto-wing{top:-1px;bottom:auto;}
.fh-ap-tag{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);padding:1px 4px;border-radius:4px;white-space:nowrap;
  font-size:max(9px,.5rem);font-weight:900;letter-spacing:.05em;line-height:1.2;background:#2a2108;color:#ffd56a;border:1px solid rgba(255,213,106,.6);}
.skin>.fh-ap-tag{background:#22163a;color:#e2c8ff;border-color:rgba(197,139,255,.7);}
.real>.fh-ap-tag{background:#1a1d24;color:#9aa3b5;border-color:rgba(255,255,255,.2);}

/* A janela: por cima da ficha, dentro dela (fechar a ficha fecha a janela). */
.fh-ap-fundo{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,6,10,.72);}
.fh-ap-janela{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:#171a22;border:1px solid rgba(255,213,106,.45);
  border-radius:14px;padding:14px 14px 12px;box-shadow:0 10px 40px #000;color:#e9ebf0;text-align:center;}
.fh-ap-titulo{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;color:#ffd56a;font-size:1.05rem;}
.fh-ap-dono{margin:2px 0 0;font-weight:800;color:#fff;overflow-wrap:anywhere;}
.fh-ap-sub{margin:0 0 16px;color:#9aa3b5;font-size:.75rem;}
.fh-ap-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.fh-ap-col{display:flex;flex-direction:column;align-items:center;min-width:0;}
.fh-ap-quadro{position:relative;isolation:isolate;width:100%;aspect-ratio:5/8;border-radius:10px;background:rgba(0,0,0,.4);margin-bottom:14px;}
.fh-ap-quadro.vis{--fh-ap-faixa:conic-gradient(from var(--fh-ap-giro),#ffd56a,#fff6d0,#ff9d2e,#ffd56a 40%,rgba(255,213,106,.15) 55%,#ffd56a 70%,#fff6d0,#ffd56a);box-shadow:0 0 10px rgba(255,200,80,.45);}
.fh-ap-quadro.skin{--fh-ap-faixa:conic-gradient(from var(--fh-ap-giro),#c58bff,#7fe3ff,#ffd56a,#ff7ad9,#c58bff);box-shadow:0 0 10px rgba(197,139,255,.5);}
.fh-ap-quadro.real{border:1px dashed rgba(255,255,255,.2);}
.fh-ap-arte{position:absolute;inset:14px 4px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;}
.fh-ap-arte .fh-ap-img{display:block;width:100%;height:100%;object-fit:contain;}
.fh-ap-q-set:not(.real) .fh-ap-arte .fh-ap-img{object-fit:cover;object-position:50% 40%;}
.fh-ap-quadro.real .fh-ap-img,.fh-ap-quadro.real .fh-ap-silhueta{width:70%;height:auto;max-height:70%;aspect-ratio:auto;opacity:.38;filter:grayscale(.7);}
.fh-ap-quadro.real .fh-ap-silhueta{display:inline-flex;color:rgba(255,255,255,.4);}
.fh-ap-quadro.real .fh-ap-silhueta svg{width:100%;height:100%;}
.fh-ap-peca{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:1;padding:1px 6px;border-radius:4px;white-space:nowrap;
  font-size:max(9px,.58rem);font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#cfd6e4;background:#14171f;border:1px solid rgba(255,255,255,.15);}
.fh-ap-quadro .fh-mais{top:4px;right:6px;z-index:1;}
.fh-ap-nome{max-width:100%;font-size:.78rem;color:#fff;line-height:1.15;overflow-wrap:anywhere;}
.fh-ap-orig{max-width:100%;font-size:.66rem;color:#9aa3b5;line-height:1.2;overflow-wrap:anywhere;}
.fh-ap-nota{margin:16px 0 10px;color:#9aa3b5;font-size:.74rem;}
.fh-ap-voltar{padding:8px 22px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#e9ebf0;font:inherit;font-weight:800;cursor:var(--cur-mao,pointer);}
.fh-ap-voltar:hover{border-color:#ffd56a;}
@media (max-width:380px){.fh-ap-tres{gap:8px;}.fh-ap-janela{padding:12px 10px 10px;}}
/* Celular deitado: a janela é baixa, os três quadros encolhem pela altura. */
@media (max-height:500px) and (min-width:640px){
  .fh-ap-janela{width:min(520px,100%);padding:10px 14px;}
  .fh-ap-fundo{padding:8px;}
  .fh-ap-janela{max-height:calc(100dvh - 16px);}
  .fh-ap-sub{display:none;}
  .fh-ap-dono{margin-bottom:12px;}
  .fh-ap-tres{grid-template-columns:repeat(3,110px);justify-content:center;}
  .fh-ap-quadro{aspect-ratio:auto;height:clamp(90px,calc(100dvh - 250px),150px);}
  .fh-ap-nota{margin:8px 0 6px;}
  .fh-ap-voltar{padding:6px 18px;}
}
/* Sem efeitos: o contorno fica parado (continua colorido). */
body.combat-fx-off .fh-ap,body.graphics-lite .fh-ap,body.combat-fx-off .fh-ap::before,body.graphics-lite .fh-ap::before,
body.combat-fx-off .fh-ap-quadro::before,body.graphics-lite .fh-ap-quadro::before{animation:none;}
@media (prefers-reduced-motion:reduce){.fh-ap,.fh-ap::before,.fh-ap-quadro::before{animation:none;}}

/* ==========================================================================
   ZODÍACO (10/10, autor: "um botão a mais abaixo da skin (ZODÍACO); nada exagerado")
   Uma etiqueta pequena embaixo do quadrado da Aparência (ou no lugar dele, quando não há
   aparência). Abre a janela com os signos, a arma e a asa do jogador — a mesma janela da Aparência.
   ========================================================================== */
.fh-zod{grid-area:aparencia;align-self:end;justify-self:center;z-index:1;margin-bottom:-4px;padding:2px 6px;border-radius:5px;cursor:var(--cur-mao,pointer);
  font:inherit;font-size:max(9px,.52rem);font-weight:900;letter-spacing:.08em;line-height:1.3;white-space:nowrap;
  color:#ffe7b0;background:#2a2108;border:1px solid rgba(199,154,74,.7);}
.fh-zod:hover,.fh-zod:focus-visible{border-color:#ffd56a;color:#fff6d0;}
.fh-equip:not(:has(.fh-ap)) .fh-zod{align-self:center;margin:0;}
/* Com o botão, o quadrado da Aparência sobe um pouco: a etiqueta SKIN e o ZODÍACO não se cobrem no celular. */
/* Com o botão, a coluna da direita ganha uma linha curta embaixo da Aparência: a etiqueta SKIN e o
   ZODÍACO nunca se cobrem (celular de 360 com texto 130% inclusive). */
.fh-palco:has(.fh-ap):has(.fh-zod){grid-template-rows:repeat(4,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" ". . zod";}
.fh-palco:has(.fh-ap) .fh-zod{grid-area:zod;align-self:start;margin:2px 0 0;}
/* ==========================================================================
   TITAN (10/10, autor: "onde vai dar pra ver os titans do player nas fichas deles"; "na ficha
   também vai ter o sistema de zodíaco"). Uma etiqueta TITAN na MESMA fileira do ZODÍACO, do lado
   esquerdo (embaixo do Anel): nenhum bloco novo. Abre a janela com a arte da forma.
   ========================================================================== */
/* O botão chama o olho (autor: "quem passa o olho na ficha nem percebe"): rosto maior com anel na cor do
   elemento girando, brilho que passa pela etiqueta e a forma (F3). Continua na fileira do ZODÍACO. */
.fh-titan{grid-area:titan;align-self:start;justify-self:start;z-index:1;margin:0;position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:999px;cursor:var(--cur-mao,pointer);font:inherit;line-height:1.2;white-space:nowrap;
  color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--ft-c,#c79a4a) 55%,#140c08),#140c08 80%);
  border:1px solid var(--ft-c2,#ffd56a);box-shadow:0 0 10px color-mix(in srgb,var(--ft-c,#c79a4a) 70%,transparent),inset 0 0 6px rgba(255,255,255,.12);
  animation:ft-pulsa 2.4s ease-in-out infinite;}
.fh-titan::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);animation:ft-brilho 3.2s ease-in-out infinite;}
.fh-titan:hover,.fh-titan:focus-visible{box-shadow:0 0 16px var(--ft-c,#c79a4a),inset 0 0 6px rgba(255,255,255,.2);}
.fh-titan-rosto{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#000;
  box-shadow:0 0 0 2px var(--ft-c2,#ffd56a),0 0 8px var(--ft-c,#c79a4a);}
.fh-titan-txt{font-size:max(10px,.6rem);font-weight:900;letter-spacing:.12em;text-shadow:0 0 6px var(--ft-c,#c79a4a);}
.fh-titan-f{font-size:max(9px,.5rem);font-weight:900;padding:0 4px;border-radius:4px;color:#140c08;background:var(--ft-c2,#ffd56a);}
/* sem Titan escolhido (Reset 5+): o ovo e o "!" piscando chamam para o Altar */
.fh-titan-ovo .fh-titan-f{background:#ff3b3b;color:#fff;animation:ft-alerta 1s ease-in-out infinite;}
@keyframes ft-alerta{50%{opacity:.35;}}
@keyframes ft-pulsa{50%{box-shadow:0 0 18px var(--ft-c,#c79a4a),inset 0 0 6px rgba(255,255,255,.12);}}
@keyframes ft-brilho{0%,55%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
.fh-palco:has(.fh-equip):has(.fh-titan){grid-template-rows:repeat(4,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "titan titan zod";}
.fh-palco:has(.fh-titan):has(.fh-ap) .fh-zod{grid-area:zod;align-self:start;margin:2px 0 0;}
/* A janela: palco com raios e brasas na cor do elemento, Titan flutuando, trilha das 10 formas,
   3 números grandes e a Forma 10 em silhueta ("o que vem"). Sem arte nova. */
.fh-titan-janela{width:min(440px,100%);position:relative;overflow-x:hidden;padding-top:6px;
  background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--ft-c,#c79a4a) 30%,var(--ft-esc,#171a22)) 0%,#12141b 62%);
  border-color:var(--ft-c,#c79a4a);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,var(--ft-c,#c79a4a) 45%,transparent);}
.fh-titan-palco{position:relative;height:clamp(190px,32vh,270px);display:grid;place-items:center;margin:0 -16px;}
.fh-titan-janela{--ft-p:.5;}   /* 0 na Forma 1 → 1 na Forma 10: o fundo cresce com o Titan (pedido do autor) */
.fh-titan-raios{position:absolute;left:50%;top:50%;width:calc(105% + 70% * var(--ft-p));aspect-ratio:1;translate:-50% -50%;opacity:calc(.3 + .7 * var(--ft-p));
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--ft-c,#c79a4a) 38%,transparent) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 58%);mask:radial-gradient(circle,#000 8%,transparent 58%);animation:ft-gira calc(32s - 18s * var(--ft-p)) linear infinite;}
/* da Forma 5 em diante: uma 2ª coroa de raios finos girando ao contrário */
.fh-titan-raios::after{content:"";position:absolute;inset:8%;border-radius:50%;opacity:clamp(0,(var(--ft-p) - .4) * 2.2,1);
  background:repeating-conic-gradient(from 7deg,color-mix(in srgb,var(--ft-c2,#ffd56a) 45%,transparent) 0deg 2deg,transparent 2deg 11deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);animation:ft-gira 18s linear infinite reverse;}
/* o fundo (raios, brilho, brasas, onda) fica numa camada recortada: nunca cria rolagem na janela */
.fh-titan-fundo{position:absolute;inset:-20px 0 0;overflow:hidden;pointer-events:none;}
.fh-titan-fundo::before{content:"";position:absolute;left:50%;top:57%;width:calc(50% + 40% * var(--ft-p));aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:calc(.55 + .45 * var(--ft-p));
  background:radial-gradient(circle,color-mix(in srgb,var(--ft-c2,#ffd56a) 55%,transparent) 0%,color-mix(in srgb,var(--ft-c,#c79a4a) 35%,transparent) 40%,transparent 70%);
  animation:ft-respira 3s ease-in-out infinite;}
.fh-titan-brasas{position:absolute;inset:0;pointer-events:none;opacity:calc(.3 + .7 * var(--ft-p));
  background-image:radial-gradient(2px 2px at 12% 80%,var(--ft-c2,#ffd56a),transparent),radial-gradient(2px 2px at 30% 95%,var(--ft-c,#c79a4a),transparent),
    radial-gradient(1.5px 1.5px at 52% 88%,#fff,transparent),radial-gradient(2px 2px at 70% 92%,var(--ft-c2,#ffd56a),transparent),
    radial-gradient(1.5px 1.5px at 86% 84%,var(--ft-c,#c79a4a),transparent),radial-gradient(2px 2px at 42% 70%,var(--ft-c,#c79a4a),transparent);
  background-size:100% 100%;animation:ft-brasas calc(5.5s - 2.5s * var(--ft-p)) linear infinite;}
/* da Forma 6 em diante: mais brasas, maiores */
.fh-titan-brasas::after{content:"";position:absolute;inset:0;opacity:clamp(0,(var(--ft-p) - .5) * 2.5,1);
  background-image:radial-gradient(3px 3px at 20% 90%,var(--ft-c2,#ffd56a),transparent),radial-gradient(2.5px 2.5px at 62% 78%,#fff,transparent),
    radial-gradient(3px 3px at 78% 96%,var(--ft-c,#c79a4a),transparent),radial-gradient(2.5px 2.5px at 36% 84%,var(--ft-c2,#ffd56a),transparent),
    radial-gradient(3px 3px at 92% 72%,var(--ft-c2,#ffd56a),transparent),radial-gradient(2px 2px at 6% 66%,#fff,transparent);
  animation:ft-brasas 2.6s linear infinite .8s;}
/* Forma 10 (Primordial): uma onda de energia sai do Titan e a janela brilha mais */
.fh-titan-onda{display:none;}
.fh-titan-janela[data-forma="10"] .fh-titan-onda{display:block;position:absolute;left:50%;top:55%;width:40%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  border:2px solid var(--ft-c2,#ffd56a);box-shadow:0 0 18px var(--ft-c,#c79a4a),inset 0 0 18px var(--ft-c,#c79a4a);opacity:0;animation:ft-onda 2.8s ease-out infinite;}
.fh-titan-janela[data-forma="10"]{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 54px color-mix(in srgb,var(--ft-c,#c79a4a) 65%,transparent);}
.fh-titan-arte{position:absolute;left:0;right:0;bottom:3%;margin-inline:auto;height:96%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ft-c,#c79a4a) 80%,transparent)) drop-shadow(0 10px 12px rgba(0,0,0,.7));animation:ft-flutua 3.4s ease-in-out infinite;}
.fh-titan-selo{position:absolute;right:18px;bottom:8px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;line-height:1;
  color:#140c08;background:radial-gradient(circle at 35% 30%,#fff,var(--ft-c2,#ffd56a) 45%,var(--ft-c,#c79a4a));box-shadow:0 0 14px var(--ft-c,#c79a4a);}
.fh-titan-selo small{font-size:.48rem;font-weight:900;letter-spacing:.08em;margin-top:6px;}
.fh-titan-selo b{font-size:1.15rem;font-weight:900;margin-top:-8px;}
.fh-titan-topo{margin-top:2px;}
.fh-titan-dono{margin:0;color:#c9cfdb;font-size:.72rem;letter-spacing:.06em;}
.fh-titan-nome{margin:0;font-size:1.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1.1;
  background:linear-gradient(180deg,#fff 10%,var(--ft-c2,#ffd56a) 45%,var(--ft-c,#c79a4a));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ft-c,#c79a4a) 70%,transparent));}
.fh-titan-sub{margin:2px 0 0;color:#e9ebf0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.fh-titan-trilha{margin:10px 0 0;}
.fh-titan-pips{display:flex;justify-content:center;gap:5px;}
.fh-titan-pips i{width:11px;height:11px;rotate:45deg;border-radius:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);}
.fh-titan-pips i.feito{background:var(--ft-c,#c79a4a);border-color:var(--ft-c2,#ffd56a);}
.fh-titan-pips i.atual{background:var(--ft-c2,#ffd56a);border-color:#fff;box-shadow:0 0 10px var(--ft-c2,#ffd56a);animation:ft-respira 1.6s ease-in-out infinite;}
.fh-titan-nv{margin:6px 0 0;color:#e9ebf0;font-size:.82rem;}
.fh-titan-nv b{color:var(--ft-c2,#ffd56a);}
.fh-titan-poderes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;}
.fh-titan-poder{padding:8px 4px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--ft-c,#c79a4a) 55%,transparent);}
.fh-titan-poder b{display:block;font-size:1.45rem;font-weight:900;line-height:1.1;color:#fff;text-shadow:0 0 10px var(--ft-c,#c79a4a);}
.fh-titan-poder span{display:block;font-size:.66rem;color:#c9cfdb;text-transform:uppercase;letter-spacing:.06em;}
.fh-titan-suprema{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;margin:10px 0 0;padding:7px 10px;border-radius:10px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ft-c,#c79a4a) 28%,transparent),transparent);}
.fh-titan-suprema span{font-size:.62rem;font-weight:900;letter-spacing:.16em;color:var(--ft-c2,#ffd56a);}
.fh-titan-suprema b{font-size:.95rem;font-weight:900;color:#fff;}
.fh-titan-suprema small{font-size:.72rem;color:#c9cfdb;}
.fh-titan-futuro{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:6px 10px;border-radius:10px;text-align:left;
  background:rgba(0,0,0,.35);border:1px dashed color-mix(in srgb,var(--ft-c2,#ffd56a) 50%,transparent);}
.fh-titan-sombra{width:52px;height:52px;object-fit:contain;flex:0 0 auto;filter:brightness(0) drop-shadow(0 0 6px var(--ft-c,#c79a4a));opacity:.9;}
.fh-titan-futuro-tx{display:flex;flex-direction:column;min-width:0;}
.fh-titan-futuro-tx small{font-size:.6rem;font-weight:900;letter-spacing:.14em;color:var(--ft-c2,#ffd56a);}
.fh-titan-futuro-tx b{font-size:.86rem;color:#fff;}
.fh-titan-futuro-tx span{font-size:.72rem;color:#c9cfdb;}
.fh-titan-acoes{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;}
.fh-titan-cta{position:relative;overflow:hidden;width:100%;padding:11px 16px;border-radius:10px;border:1px solid var(--ft-c2,#ffd56a);cursor:var(--cur-mao,pointer);
  font:inherit;font-weight:900;letter-spacing:.12em;color:#140c08;background:linear-gradient(180deg,#fff 0%,var(--ft-c2,#ffd56a) 35%,var(--ft-c,#c79a4a));
  box-shadow:0 0 18px color-mix(in srgb,var(--ft-c,#c79a4a) 70%,transparent);animation:ft-pulsa 2.4s ease-in-out infinite;}
.fh-titan-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%);animation:ft-brilho 3.2s ease-in-out infinite;}
.fh-titan-aviso{margin:0;min-height:0;color:var(--ft-c2,#ffd56a);font-size:.78rem;font-weight:800;}
.fh-titan-aviso:empty{display:none;}
@keyframes ft-gira{to{rotate:360deg;}}
@keyframes ft-onda{0%{opacity:.9;scale:.6;}100%{opacity:0;scale:2.4;}}
@keyframes ft-respira{50%{opacity:.6;scale:.94;}}
@keyframes ft-flutua{50%{translate:0 -7px;}}
@keyframes ft-brasas{from{background-position:0 0;opacity:.9;}to{background-position:0 -60px;opacity:.2;}}
/* Sem efeitos (opção do jogador, modo leve ou movimento reduzido): tudo parado, o brilho continua. */
body.combat-fx-off .fh-titan,body.graphics-lite .fh-titan,body.combat-fx-off .fh-titan::after,body.graphics-lite .fh-titan::after,
body.combat-fx-off .fh-titan-janela *,body.graphics-lite .fh-titan-janela *,body.combat-fx-off .fh-titan-janela ::before,body.graphics-lite .fh-titan-janela ::before,
body.combat-fx-off .fh-titan-janela ::after,body.graphics-lite .fh-titan-janela ::after{animation:none;}
@media (prefers-reduced-motion:reduce){.fh-titan,.fh-titan::after,.fh-titan-ovo .fh-titan-f,.fh-titan-janela *,.fh-titan-janela ::before,.fh-titan-janela ::after{animation:none;}}
/* Celular deitado: o palco à esquerda e o resto à direita (cabe sem rolar). */
@media (max-height:520px) and (orientation:landscape){
  .fh-titan-janela{width:min(680px,100%);display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:14px;align-content:start;padding:10px 14px;}
  .fh-titan-janela>*{grid-column:2;}
  .fh-titan-janela>.fh-titan-palco{grid-column:1;grid-row:1 / span 7;align-self:center;height:min(300px,calc(100dvh - 60px));margin:0;}
  .fh-titan-nome{font-size:1.3rem;}
  .fh-titan-poderes,.fh-titan-trilha,.fh-titan-suprema,.fh-titan-futuro{margin-top:6px;}
  .fh-titan-poder b{font-size:1.15rem;}
  .fh-titan-acoes{flex-direction:row;margin-top:8px;}
  .fh-titan-acoes .fh-titan-cta{width:auto;flex:1;}
  /* 11/10: o efeito escrito vai para baixo do Titan, na coluna da esquerda (a da direita já está cheia) */
  .fh-titan-janela:has(.fh-titan-efeitos)>.fh-titan-palco{grid-row:1 / span 3;align-self:start;height:min(165px,calc(100dvh - 200px));}
  .fh-titan-janela>.fh-titan-efeitos{grid-column:1;grid-row:4 / span 3;align-self:start;margin-top:4px;}
  .fh-titan-efeitos p{font-size:.66rem;}
}
.fh-zod-janela{width:min(460px,100%);text-align:left;}
.fh-zod-janela .fh-ap-titulo,.fh-zod-janela .fh-ap-dono,.fh-zod-janela .fh-ap-nota{text-align:center;}
.fh-zod-janela .fh-ap-dono{margin-bottom:10px;}
.fh-zod-loja{margin:10px 0 0;padding:8px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,213,106,.18);}
.fh-zod-h{margin:0 0 6px;color:#e7c07a;font-size:.7rem;letter-spacing:.14em;}
.fh-zod-signo{position:relative;display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;}
.fh-zod-signo+.fh-zod-signo{border-top:1px solid rgba(255,255,255,.06);}
.fh-zod-signo.em-uso{background:rgba(197,139,255,.1);box-shadow:inset 0 0 0 1px rgba(197,139,255,.45);}
.fh-zod-signo>.fh-ap-tag{position:static;transform:none;margin-left:auto;background:#22163a;color:#e2c8ff;border-color:rgba(197,139,255,.7);}
.fh-zod-artes{display:flex;gap:3px;flex:0 0 auto;}
.fh-zod-artes img{width:30px;height:30px;object-fit:contain;border-radius:5px;background:rgba(0,0,0,.35);}
.fh-zod-artes img.falta{opacity:.25;filter:grayscale(1);}
.fh-zod-artes img.em-uso{box-shadow:0 0 0 1px rgba(197,139,255,.8);}
.fh-zod-txt{display:flex;flex-direction:column;min-width:0;}
.fh-zod-txt strong{font-size:.76rem;color:#fff;line-height:1.15;overflow-wrap:anywhere;}
.fh-zod-txt small{font-size:.66rem;color:#9aa3b5;}
.fh-zod-txt small b{color:#e7c07a;}
.fh-zod-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.fh-zod-chip{padding:2px 6px;border-radius:5px;font-size:.66rem;color:#d9ffd9;background:rgba(60,140,70,.18);border:1px solid rgba(120,210,130,.35);}
.fh-zod-chip b{color:#9ff59f;}
.fh-zod-janela .fh-zod-loja-btn{display:block;margin:0 auto 8px;border-color:rgba(199,154,74,.7);color:#ffe7b0;}
.fh-zod-janela>.fh-ap-voltar:last-child{display:block;margin:0 auto;}
@media (max-width:380px){.fh-zod-artes img{width:26px;height:26px;}}
/* 11/10: o efeito do Titan em palavras (horda e PvP) logo abaixo da SUPREMA */
.fh-titan-efeitos{display:grid;gap:2px;margin:4px 0 0;padding:4px 9px;border-left:3px solid var(--ft-c,#ff7a2b);border-radius:0 8px 8px 0;background:rgba(0,0,0,.32)}
.fh-titan-efeitos p{margin:0;font-size:.72rem;line-height:1.28;color:#f3ead8;text-align:left;overflow-wrap:anywhere}
/* o texto do efeito pede espaço: o palco encolhe um pouco para a janela continuar sem rolar (teste titans-ficha-browser) */
.fh-titan-janela:has(.fh-titan-efeitos) .fh-titan-palco{height:clamp(170px,26vh,250px)}
/* 31/10 (Titãs no PvP, plano A): a volta na raiva vale para todo Titã desde a Forma 1 (a Ajuda e o Altar explicam); no celular em pé
   a 3ª linha (💢) sai da janela para ela caber sem rolar e o selo da forma não bater no X */
@media (max-width:480px){.fh-titan-efeitos p:nth-child(3){display:none}}
.fh-titan-efeitos p span{font-weight:900;color:var(--ft-c2,#ffd56a)}

/* ==========================================================================
   SENTINELA (17/10, opção F1 do autor: "tira SENTINELA entre TITAN e ZODÍACO, do mesmo tamanho
   delas, em todas as fichas; tocar abre janela estilo Titan"). Com a Sentinela, TITAN, SENTINELA e
   ZODÍACO ficam numa fileira só embaixo do boneco (sem ela, a ficha continua como antes).
   ========================================================================== */
.fh .fh-palco.fh-com-tiras:has(.fh-equip){grid-template-rows:repeat(4,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "tiras tiras tiras";}
.fh-tiras{grid-area:tiras;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 6px;min-width:0;margin-top:2px;}
.fh-tiras>.fh-titan,.fh-tiras>.fh-zod,.fh .fh-palco .fh-tiras>.fh-zod{grid-area:auto;align-self:center;justify-self:auto;margin:0;}
/* a ZODÍACO acompanha a altura das outras duas na mesma fileira */
.fh-tiras>.fh-zod{min-height:26px;padding:2px 8px;border-radius:999px;}
.fh-sent{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:999px;cursor:var(--cur-mao,pointer);font:inherit;line-height:1.2;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ft-c,#f2d27a) 50%,#10131c),#10131c 80%);
  border:1px solid var(--ft-c2,#fff1b8);box-shadow:0 0 10px color-mix(in srgb,var(--ft-c,#f2d27a) 60%,transparent),inset 0 0 6px rgba(255,255,255,.12);
  animation:ft-pulsa 2.4s ease-in-out infinite;}
.fh-sent::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  transform:translateX(-120%);animation:ft-brilho 3.2s ease-in-out infinite 1.1s;}
.fh-sent:hover,.fh-sent:focus-visible{box-shadow:0 0 16px var(--ft-c,#f2d27a),inset 0 0 6px rgba(255,255,255,.2);}
.fh-sent-rosto{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#000;
  box-shadow:0 0 0 2px var(--ft-c2,#fff1b8),0 0 8px var(--ft-c,#f2d27a);}
.fh-sent-txt{font-size:max(10px,.6rem);font-weight:900;letter-spacing:.08em;text-shadow:0 0 6px var(--ft-c,#f2d27a);}
.fh-sent-f{font-size:max(9px,.5rem);font-weight:900;padding:0 4px;border-radius:4px;color:#140c08;background:var(--ft-c2,#fff1b8);}
.fh-sent.g-lendario .fh-sent-f{background:linear-gradient(90deg,#ffd56a,#ff9f2b);}
.fh-sent.g-extremo .fh-sent-f{background:linear-gradient(90deg,#ff5b7a,#b14bff);color:#fff;}
/* A janela: a mesma do Titan (palco, trilha, números), com a trilha dos 18 degraus em 3 grupos */
.fh-sent-titulo{margin:1px 0 0;color:#c9cfdb;font-size:.72rem;font-style:italic;}
.fh-sent-pips{gap:8px;flex-wrap:wrap;}
.fh-sent-grupo{display:inline-flex;gap:4px;padding:3px 4px;border-radius:7px;background:rgba(0,0,0,.25);}
.fh-sent-grupo i{width:10px;height:10px;rotate:45deg;border-radius:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);}
.fh-sent-grupo i.feito{background:var(--ft-c,#f2d27a);border-color:var(--ft-c2,#fff1b8);}
.fh-sent-grupo i.atual{background:var(--ft-c2,#fff1b8);border-color:#fff;box-shadow:0 0 10px var(--ft-c2,#fff1b8);animation:ft-respira 1.6s ease-in-out infinite;}
.fh-sent-grupo.g-lendario{box-shadow:inset 0 -2px 0 #ffb84a;}
.fh-sent-grupo.g-extremo{box-shadow:inset 0 -2px 0 #d24bff;}
.fh-sent-estrelas{color:var(--ft-c2,#fff1b8);letter-spacing:.06em;}
.fh-titan-poderes.fh-sent-dois{grid-template-columns:repeat(2,minmax(0,1fr));}
.fh-sent-janela .fh-titan-poder b{font-size:1.25rem;}
.fh-sent-skills p{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;}
.fh-sent-skills p b{color:#fff;font-weight:900;white-space:nowrap;}
.fh-sent-skills p small{color:#9aa3b5;font-size:.66rem;white-space:nowrap;}
.fh-sent-skills p.travada span{opacity:.6;filter:grayscale(1);}
.fh-sent-skills p small.fh-sent-skill-d{flex:1 0 100%;white-space:normal;line-height:1.3;color:#c3cad8;margin:1px 0 3px;}
/* celular: a janela não rola; o que cada skill faz fica na tela das Sentinelas */
@media (max-width:520px),(max-height:520px){.fh-sent-skills p small.fh-sent-skill-d{display:none;}}
body.combat-fx-off .fh-sent,body.graphics-lite .fh-sent,body.combat-fx-off .fh-sent::after,body.graphics-lite .fh-sent::after{animation:none;}
@media (prefers-reduced-motion:reduce){.fh-sent,.fh-sent::after{animation:none;}}
@media (max-width:380px){.fh-tiras{gap:4px;}.fh-sent-txt,.fh-tiras .fh-titan-txt{letter-spacing:.04em;}}
@media (max-height:520px) and (orientation:landscape){
  .fh-sent-janela .fh-titan-poder b{font-size:1.05rem;}
  .fh-sent-janela>.fh-sent-skills{grid-column:1;grid-row:4 / span 3;align-self:start;margin-top:4px;}
  /* deitado com texto grande: tudo um pouco mais justo para a janela não rolar */
  .fh-sent-janela .fh-sent-titulo{display:none;}
  .fh-sent-janela .fh-titan-poder{padding:4px;}
  .fh-sent-janela .fh-titan-futuro{padding:3px 8px;}
  .fh-sent-janela .fh-titan-sombra{width:36px;height:36px;}
  .fh-sent-janela .fh-titan-cta{padding:7px 8px;font-size:.8rem;letter-spacing:.04em;line-height:1.15;}
}
/* 1819 (17/10): o 2º Titã na janela do Titan da ficha */
.fh-titan-segundo{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:6px 10px;border-radius:10px;text-align:left;
  background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ft-c2,#ffd56a) 55%,transparent);}
.fh-titan-segundo-arte{width:60px;height:60px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 0 6px var(--ft-c2,#ffd56a));}
.fh-titan-segundo-tx{display:flex;flex-direction:column;min-width:0;}
.fh-titan-segundo-tx small{font-size:.6rem;font-weight:900;letter-spacing:.14em;color:var(--ft-c2,#ffd56a);}
.fh-titan-segundo-tx b{font-size:.86rem;color:#fff;}
.fh-titan-segundo-tx span{font-size:.72rem;color:#c9cfdb;}

/* A GUILDA E O CARGO embaixo do nome (18/10, autor: "DEVMARIK (Boss)"; cargo pela 1920).
   Uma linha discreta: não empurra o resto da ficha mais que ~18px e quebra em nome comprido. */
.fh-guilda{margin:1px 0 0;font-size:.8rem;line-height:1.25;color:#c9cfdb;overflow-wrap:anywhere;}
.fh-guilda-nome{font-weight:700;color:#e8d9a8;}
.fh-guilda-cargo{margin-left:4px;font-weight:600;color:#9aa3b5;}
.fh-guilda-cargo.fh-cargo-master{color:#ffd700;}
.fh-guilda-cargo.fh-cargo-sub_master{color:#7fb2f0;}

/* ==========================================================================
   LUVAS (27/10): com o 8º espaço o boneco ganha uma 5ª linha. A coluna da direita fica Elmo, Armadura,
   Luvas, Botas e Aparência; a da esquerda não muda. As variantes com ZODÍACO, TITAN e as tiras seguem
   iguais, uma linha mais baixas. Sem luva (chave desligada), nada disso vale.
   ========================================================================== */
.fh-slot[data-slot="gloves"]{grid-area:gloves}
.fh-palco.fh-com-luvas{grid-template-rows:repeat(5,minmax(0,1fr));
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" ". ret aparencia";}
.fh-palco.fh-com-luvas .fh-slot{height:min(52px,100%);}
.fh-palco.fh-com-luvas:has(.fh-ap):has(.fh-zod){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" ". ret aparencia" ". . zod";}
.fh-palco.fh-com-luvas:has(.fh-equip):has(.fh-titan){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" ". ret aparencia" "titan titan zod";}
.fh .fh-palco.fh-com-tiras.fh-com-luvas:has(.fh-equip){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" ". ret aparencia" "tiras tiras tiras";}

/* ---------------------------------------------------------------- PC sem rolar
   29/10 (autor: "as fichas, quando clicamos no nome, ficarem sem precisar rolar"). No PC a ficha
   vira uma janela larga: o boneco à esquerda e os números, já com "Mais detalhes" aberto, à
   direita, como no celular deitado. O lutador e a calibração do Editor não mudam de tamanho. */
@media (min-width:900px) and (min-height:501px){
  .col-ficha-card.fh{width:min(900px,100%);padding:14px 16px 12px;}
  .fh-corpo{display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px;align-items:start;}
  .fh .fh-cabeca{padding:0 8px;}
  .fh-conteudo{padding-top:40px;}
  .fh-conteudo>.fh-bloco:first-child{margin-top:0;}
  .fh-detalhes.fh-aberto-pc>summary{display:none;}
  .fh-detalhes{margin-top:2px;}
  .fh .col-ficha-editar{margin-top:10px;}
}
/* PC baixinho (768 de altura e texto grande): boneco um pouco menor para continuar sem rolar. */
@media (min-width:900px) and (min-height:501px) and (max-height:820px){
  .fh .col-ficha-placa{height:48px;}
  .fh-palco{grid-template-columns:58px 270px 58px;}
  .fh .col-ficha-retrato{height:340px;padding-bottom:44px;}
  .fh .col-ficha-lutador{--fh-heroi:1.3;}
}
@media (min-width:900px) and (min-height:501px) and (max-height:740px){
  .fh .col-ficha-placa{height:40px;}
  .fh .col-ficha-retrato{height:310px;padding-bottom:42px;}
  .fh .col-ficha-lutador{--fh-heroi:1.2;}
}
/* VIP e PATRONO ao lado do nome (29/10). */
/* O nome no centro; o VIP encosta nele pela esquerda e o PATRONO pela direita. */
.fh-nome-linha{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:6px;}
.fh-nome-linha .col-ficha-nome{grid-column:2;min-width:0;}
.fh-selos{display:flex;align-items:center;gap:4px;min-width:0;font-size:.8rem;}
.fh-selos-antes{grid-column:1;justify-content:flex-end;}
.fh-selos-depois{grid-column:3;justify-content:flex-start;}
.fh-selos .col-vip-em,.fh-selos .col-patrono-selo{margin:0;}
/* PC (29/10, autor com desenho no Paint: "tira o cavaleiro flamejante e sobe a parte toda do personagem"):
   sem a linha da classe, o boneco sobe. A aura da classe lendária continua na borda da janela. */
@media (min-width:900px) and (min-height:501px){
  .fh .col-ficha-placa{margin:0 0 2px;}
  .fh .fh-cabeca .col-ficha-classe{display:none;}
  .fh .fh-cabeca .fh-guilda{margin-bottom:6px;}
  .fh .fh-cabeca{margin-bottom:6px;}
}

/* CELULAR (29/10, autor: "no celular ficou gigante"): sem a linha da classe, título, boneco e peças menores. */
@media (max-width:600px){
  .fh .fh-cabeca .col-ficha-classe{display:none;}
  .fh .col-ficha-placa{height:44px;margin-bottom:0;}
  .fh .fh-cabeca{margin-bottom:4px;}
  .fh .col-ficha-nome{font-size:1.1rem;}
  .fh-palco{grid-template-columns:46px minmax(0,220px) 46px;gap:4px;}
  .fh-slot{width:46px;height:44px;}
  .fh-slot .fh-arte{width:34px;height:34px;}
  .fh .col-ficha-retrato{height:250px;padding-bottom:40px;}
  .fh .col-ficha-lutador{--fh-heroi:1;}
}
@media (max-width:380px){
  .fh .col-ficha-retrato{height:236px;}
  .fh .col-ficha-lutador{--fh-heroi:.94;}
}
/* Celular (29/10, autor: "não tem espaço pra deixar o VIP antes e o PATRONO depois?"): com o título em cima,
   a linha do nome fica abaixo do X e usa a largura toda; os selos encolhem um pouco e um nome muito
   comprido quebra em duas linhas no meio, sem empurrar os selos para fora. */
@media (max-width:600px){
  .fh .fh-lado:has(.col-ficha-placa) .fh-cabeca{padding:0;}
  .fh-nome-linha{column-gap:4px;}
  .fh-nome-linha .col-ficha-nome{overflow-wrap:anywhere;}
  .fh-selos .col-vip-em,.fh-selos .col-patrono-selo{font-size:.62rem;}
}
/* ZODÍACO no estilo do TITAN e da SENTINELA (29/10, autor: "um efeito meio zodiacal roxo, senão fica opaco"):
   a arte do Zodíaco no círculo, fundo roxo, brilho que passa e pulso. */
.fh .fh-zod{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
  color:#f3e6ff;line-height:1.2;letter-spacing:.08em;font-size:max(10px,.6rem);
  background:linear-gradient(90deg,#5a2a9a,#1a0f2c 80%);border:1px solid #d9b8ff;
  box-shadow:0 0 10px rgba(168,96,255,.7),inset 0 0 6px rgba(255,255,255,.12);animation:fz-pulsa 2.6s ease-in-out infinite;}
.fh .fh-zod::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(235,210,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);animation:ft-brilho 3.4s ease-in-out infinite .6s;}
.fh .fh-zod:hover,.fh .fh-zod:focus-visible{color:#fff;border-color:#f0e0ff;box-shadow:0 0 16px #a860ff,inset 0 0 6px rgba(255,255,255,.2);}
.fh-zod-rosto{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#000;box-shadow:0 0 0 2px #d9b8ff,0 0 8px #a860ff;}
.fh-zod-txt{font-weight:900;text-shadow:0 0 6px #a860ff;}
@keyframes fz-pulsa{50%{box-shadow:0 0 18px #a860ff,inset 0 0 6px rgba(255,255,255,.12);}}
body.combat-fx-off .fh-zod,body.graphics-lite .fh-zod,body.combat-fx-off .fh-zod::after,body.graphics-lite .fh-zod::after{animation:none;}
@media (prefers-reduced-motion:reduce){.fh .fh-zod,.fh .fh-zod::after{animation:none;}}
/* As três etiquetas (TITAN, SENTINELA, ZODÍACO) com a MESMA altura e o mesmo rosto (autor: "o titan é mais grosso"). */
.fh .fh-palco .fh-titan,.fh .fh-palco .fh-sent,.fh .fh-palco .fh-zod{height:26px;min-height:0!important;max-height:26px;box-sizing:border-box;padding-top:0;padding-bottom:0;}
/* (no celular uma regra de toque dava min-height 40px só ao TITAN) */
.fh .fh-palco .fh-titan .fh-titan-rosto,.fh .fh-palco .fh-sent .fh-sent-rosto{width:20px;height:20px;}
/* Celular: nome um pouco menor para VIP, nome e PATRONO caberem na mesma linha. */
@media (max-width:400px){.fh .fh-nome-linha .col-ficha-nome{font-size:1rem;}}
/* 04/11 (autor: "esse modal ... poderia caber sem precisar rolar? nem que você estique ele um pouco, tem espaço, titan a mesma coisa"):
   no PC as janelas do TITAN e da SENTINELA ficam largas, com a arte à esquerda e tudo o resto à direita, e cabem sem rolar
   (testes titans-ficha-browser e sentinelas-ficha-browser, com o 2º Titã e as habilidades escritas). */
@media (min-width:900px) and (min-height:521px){
  /* larga, a janela passa por baixo do X da ficha (z-index 6): ela fica por cima e fecha com o VOLTAR À FICHA ou o Esc */
  #colFichaTitan,#colFichaSentinela{z-index:7;padding:8px;}
  #colFichaTitan>.fh-ap-janela,#colFichaSentinela>.fh-ap-janela{max-height:calc(100dvh - 16px);}
  .fh-titan-janela{width:min(940px,100%);display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:18px;align-content:center;padding:10px 18px 10px 0;}
  .fh-titan-janela>*{grid-column:2;}
  .fh-titan-janela>.fh-titan-palco,.fh-titan-janela:has(.fh-titan-efeitos)>.fh-titan-palco{grid-column:1;grid-row:1 / span 12;align-self:stretch;height:auto;min-height:min(480px,calc(100dvh - 40px));margin:-10px 0;}
  .fh-titan-janela>.fh-titan-topo{margin-top:0;}
  .fh-titan-trilha,.fh-titan-poderes,.fh-titan-suprema,.fh-titan-futuro,.fh-titan-segundo{margin-top:7px;}
  .fh-titan-acoes{flex-direction:row;margin-top:10px;}
  .fh-titan-acoes .fh-titan-cta{width:auto;flex:1;}
  .fh-titan-sombra{width:44px;height:44px;}
  .fh-titan-segundo{gap:14px;padding:10px 14px;}
  .fh-titan-segundo-arte{width:96px;height:96px;}
  .fh-titan-segundo-tx b{font-size:1.15rem;}
  .fh-titan-segundo-tx span{font-size:.78rem;}
}
/* PC de tela baixa (1366x768 com a barra do navegador): um pouco mais justo para os 2 Titãs com letra grande caberem */
@media (min-width:900px) and (min-height:521px) and (max-height:720px){
  .fh-titan-trilha,.fh-titan-poderes,.fh-titan-suprema,.fh-titan-futuro,.fh-titan-segundo{margin-top:5px;}
  .fh-titan-efeitos p{line-height:1.22;}
}
/* 04/11: o selo do Passe antes do nome na ficha (a mesma arte do ranking e do chat), do tamanho da letra do nome */
.fh-selos .fh-selo-passe{display:block;flex:none;width:1.6rem;height:1.6rem;object-fit:contain;}
@media (max-width:400px){.fh-selos .fh-selo-passe{width:1.3rem;height:1.3rem;}}
/* 04/11: a SUPREMA do 2º Titã, no lugar da Forma 10 em silhueta (que saiu) */
.fh-titan-segundo-sup{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:3px 0 0;}
.fh-titan-segundo-sup span{font-size:.58rem;font-weight:900;letter-spacing:.14em;color:var(--ft-c2,#ffd56a);}
.fh-titan-segundo-sup b{font-size:.8rem;color:#fff;}
.fh-titan-segundo-sup small{font-size:.7rem;color:#c9cfdb;letter-spacing:normal;font-weight:400;}

/* ==========================================================================
   A MONTARIA NA FICHA (05/11, autor: "abaixo do anel ali"): um quadrado como o das peças embaixo do Anel, no
   lugar da tira comprida. Com Luvas a 5ª linha já existe (a esquerda estava vazia); sem Luvas o boneco ganha a 5ª
   linha só por causa dela. As variantes com ZODÍACO, TITAN e as tiras seguem iguais.
   ========================================================================== */
.fh-slot[data-slot="montaria"]{grid-area:mont;overflow:hidden;border-color:var(--ft-c,#c79a4a);
  background:radial-gradient(90% 80% at 50% 70%,color-mix(in srgb,var(--ft-c,#c79a4a) 30%,transparent),rgba(0,0,0,.4) 75%);}
.fh-mt-arte{position:absolute;inset:2px 2px 9px;background-size:300% 200%;background-position:0 0;background-repeat:no-repeat;}
.fh-mt-tag{position:absolute;left:0;right:0;bottom:1px;font-size:7.5px;font-weight:800;letter-spacing:.06em;text-align:center;
  color:#fff;text-shadow:0 1px 2px #000;pointer-events:none;}
.fh-palco.fh-com-mt{grid-template-rows:repeat(5,minmax(0,1fr));
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "mont ret .";}
.fh-palco.fh-com-mt .fh-slot{height:min(52px,100%);}
.fh-palco.fh-com-mt:has(.fh-ap):has(.fh-zod){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "mont ret ." ". . zod";}
.fh-palco.fh-com-mt:has(.fh-equip):has(.fh-titan){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "mont ret ." "titan titan zod";}
.fh .fh-palco.fh-com-mt.fh-com-tiras:has(.fh-equip){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret boots" "ring ret aparencia" "mont ret ." "tiras tiras tiras";}
.fh-palco.fh-com-mt.fh-com-luvas{grid-template-rows:repeat(5,minmax(0,1fr));
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" "mont ret aparencia";}
.fh-palco.fh-com-mt.fh-com-luvas:has(.fh-ap):has(.fh-zod){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" "mont ret aparencia" ". . zod";}
.fh-palco.fh-com-mt.fh-com-luvas:has(.fh-equip):has(.fh-titan){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" "mont ret aparencia" "titan titan zod";}
.fh .fh-palco.fh-com-mt.fh-com-tiras.fh-com-luvas:has(.fh-equip){grid-template-rows:repeat(5,minmax(0,1fr)) auto;
  grid-template-areas:"wing ret helmet" "weapon ret armor" "pendant ret gloves" "ring ret boots" "mont ret aparencia" "tiras tiras tiras";}