/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DO HERÓI — Conceito C (Dossiê Cinematográfico)
   Base: Forja-cena (painéis panel.png sobre céu) + Constelação (poeira de estrelas).
   Fiel à maquete _previews/conceito_heroi_c.html. Toda a MECÂNICA vive em js/ficha.js;
   aqui só a CAMADA DE APRESENTAÇÃO da página de PERFIL (a árvore = arvore.css, intocada).
   Classes prefixadas `hc-` p/ não colidir com a ficha antiga (.fc-*) nem a árvore (.tt-/.cst-).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --hc-amber:#e2c074; --hc-brasa:#d6963a; --hc-txt:#cdbf9a; --hc-muted:#948f86;
  --hc-title:#c6aa70; --hc-strong:#f0c77f; --hc-gold:#d9b24c;
}

/* o overlay #ficha vira a CENA inteira (a .ov global centraliza um card; aqui enchemos tudo) */
#ficha.hc-mode{ align-items:stretch; justify-content:stretch; background:transparent; }
.hc-root{ position:relative; width:100%; height:100%; overflow:hidden; color:var(--hc-txt);
  font-family:var(--game-font);
  background:
    radial-gradient(620px 380px at 30% 30%, rgba(214,150,58,.11), transparent 72%),
    radial-gradient(760px 460px at 24% 82%, rgba(150,110,48,.08), transparent 72%),
    radial-gradient(520px 320px at 78% 60%, rgba(214,150,58,.06), transparent 72%),
    linear-gradient(180deg,#07060c 0%, #0a0810 55%, #0b0810 100%); }
.hc-root button{ background:none; appearance:none; -webkit-appearance:none; font-family:var(--game-font); cursor:pointer; border:0; color:inherit; }

/* poeira de estrelas (2 camadas — igual à Constelação) */
.hc-stars, .hc-stars2{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hc-stars{ background-image:
  radial-gradient(1.5px 1.5px at 24px 36px, rgba(255,255,255,.85), transparent 60%),
  radial-gradient(1px 1px at 120px 90px, rgba(255,244,214,.7), transparent 60%),
  radial-gradient(2px 2px at 200px 160px, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(1.5px 1.5px at 68px 210px, rgba(226,192,116,.7), transparent 60%),
  radial-gradient(1px 1px at 170px 250px, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.5px 1.5px at 226px 66px, rgba(255,244,214,.55), transparent 60%);
  background-size:260px 300px; }
.hc-stars2{ background-image:
  radial-gradient(1px 1px at 40px 120px, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(2.5px 2.5px at 300px 60px, rgba(255,240,200,.5), transparent 60%),
  radial-gradient(1px 1px at 240px 220px, rgba(226,192,116,.6), transparent 60%),
  radial-gradient(1.5px 1.5px at 130px 300px, rgba(255,255,255,.4), transparent 60%);
  background-size:380px 340px; }
.hc-veu{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,5,9,.20) 0%, rgba(6,5,9,.30) 46%, rgba(6,5,9,.66) 70%, rgba(6,5,9,.82) 100%); }

.hc-ui{ position:relative; z-index:2; width:100%; height:100%; padding:12px 18px 14px; display:flex; flex-direction:column; }
.hc-panel-bg{ border:34px solid transparent; border-image:url('/assets/ui/forja/panel.png') 82 fill stretch; }

/* ══ TOPO: abas-chip dos 5 heróis (como a Forja) ══ */
.hc-top{ display:flex; align-items:center; gap:12px; height:64px; flex:0 0 auto; }
.hc-brand{ font-family:var(--font-title); font-size:13px; color:var(--hc-title); letter-spacing:.08em; text-shadow:0 1px 2px #000; white-space:nowrap; }
.hc-tabs{ margin:0 auto; display:flex; gap:10px; }
.hc-tab{ position:relative; min-height:46px; min-width:120px; display:flex; align-items:center; gap:9px; padding:2px 14px 2px 10px;
  border:12px solid transparent; border-image:url('/assets/ui/forja/panel.png') 82 fill stretch; color:var(--hc-muted); }
.hc-tab img{ width:34px; height:34px; border-radius:50%; object-fit:cover; image-rendering:pixelated; opacity:.7; }
.hc-tab .hc-av-fb{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#120c18; font-size:15px; opacity:.85; }
.hc-tab .tx b{ font-size:11px; color:var(--hc-title); display:block; letter-spacing:.02em; }
.hc-tab .tx span{ font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#6d675e; }
.hc-tab.on{ color:var(--hc-strong); }
.hc-tab.on img{ opacity:1; box-shadow:0 0 0 2px #14100a, 0 0 0 3px #f0d060, 0 0 12px rgba(240,208,96,.5); }
.hc-tab.on .tx b{ color:var(--hc-strong); }
.hc-tab.on::after{ content:""; position:absolute; left:16%; right:16%; bottom:2px; height:12px; pointer-events:none;
  background:radial-gradient(58% 120% at 50% 100%, rgba(214,150,58,.5), rgba(214,150,58,0) 72%); }
/* seta dourada de alerta de pontos de talento (discreta, no herói/aba com pontos) */
/* ONDA 4 (28/07, auditoria visual #29): top:-11px deixava o glifo em y=-2 no celular (22% decepado
   pelo topo da tela); -8px dá folga pra arte inteira aparecer no ciclo todo da animação (o bob só desce). */
.hc-tab .hc-talarrow{ position:absolute; top:-8px; left:50%; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid #f5c542;
  filter:drop-shadow(0 0 5px rgba(245,197,66,.9)); animation:hc-bob 1.2s ease-in-out infinite; }
@keyframes hc-bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,3px);} }
.hc-close{ border:12px solid transparent; border-image:url('/assets/ui/forja/panel.png') 82 fill stretch;
  color:var(--hc-title); font-size:13px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.hc-close:hover{ filter:brightness(1.25); }

.hc-body{ flex:1; display:flex; gap:16px; min-height:0; }

/* ══ ESQUERDA: cena — herói corpo inteiro grande ══ */
.hc-scene{ flex:1; position:relative; min-width:0; }
.hc-glow{ position:absolute; left:44%; top:52%; width:520px; height:560px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(214,150,58,.16), transparent 70%); }
/* z-index 2 (30/07, martelo Lucas: "o personagem está por baixo do texto"): ele ficava sem camada
   declarada e a placa de nome (.hc-nameplate, z-index 3) passava por cima do sprite. Agora o herói
   fica ACIMA do véu e do brilho de fundo, e só a constelação — que é interativa — vem à frente. */
.hc-hero-big{ position:absolute; left:46%; top:50%; z-index:2; transform:translate(-50%,-50%); filter:drop-shadow(0 12px 22px rgba(0,0,0,.6)); }
.hc-hero-big .cr-sprite{ image-rendering:pixelated; }
.hc-hero-big .hc-av-fb{ width:340px; height:340px; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:120px; font-weight:800; color:#120c18; }
.hc-hero-shadow{ position:absolute; left:46%; top:82%; width:300px; height:38px; transform:translateX(-50%); pointer-events:none;
  border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent 75%); }
/* nome cravado sobre a cena */
.hc-nameplate{ position:absolute; left:8px; top:8px; max-width:52%; z-index:3; }
.hc-nameplate b{ font-family:var(--font-title); font-weight:700; font-size:30px; color:var(--hc-strong); letter-spacing:.06em;
  text-shadow:0 2px 4px #000, 0 0 20px rgba(216,173,90,.4); display:block; }
.hc-nameplate .sub{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--hc-muted); margin-top:6px; }
.hc-nameplate .sub .role{ color:var(--hc-amber); }
.hc-nameplate .lore{ font-size:11px; font-style:italic; color:#a89a78; margin-top:12px; max-width:330px; line-height:1.55;
  border-left:2px solid rgba(217,178,76,.4); padding-left:11px; }

/* MINI-CONSTELAÇÃO (árvore) no canto inferior — clicável */
.hc-mini{ position:absolute; left:6px; bottom:6px; width:300px; padding:2px 14px 12px; z-index:3; cursor:pointer;
  border:22px solid transparent; border-image:url('/assets/ui/forja/panel.png') 82 fill stretch; }
.hc-mini:hover{ filter:brightness(1.08); }
.hc-mini .mc-hd{ display:flex; align-items:baseline; gap:6px; }
.hc-mini .mc-hd b{ font-family:var(--font-title); font-size:10px; color:var(--hc-title); letter-spacing:.05em; }
.hc-mini .mc-hd .a{ margin-left:auto; font-size:9px; color:var(--hc-amber); }
.hc-mc-sky{ position:relative; height:96px; margin-top:6px; }
.hc-mc-sky svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hc-mc-star{ position:absolute; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%;
  background:#cfd3d8; box-shadow:0 0 4px 1px rgba(210,214,220,.5); }
.hc-mc-star.inv{ background:#ecc77e; box-shadow:0 0 7px 2px rgba(236,199,126,.7); }
.hc-mc-star.max{ width:11px; height:11px; background:#ffdf82; box-shadow:0 0 10px 3px rgba(255,222,130,.8); }
.hc-mc-star.cap{ width:16px; height:16px; background:radial-gradient(circle at 40% 35%, #fff3cf, #f0c24a 55%, #c98a2e);
  box-shadow:0 0 0 2px rgba(240,208,96,.3), 0 0 14px 5px rgba(255,220,130,.6); animation:hc-pulse 2.2s ease-in-out infinite; }
.hc-mc-star.lock{ background:#4d4a44; box-shadow:0 0 3px 1px rgba(120,115,105,.25); }
@keyframes hc-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.15);} }
.hc-mc-tabs{ display:flex; gap:5px; margin-top:8px; }
.hc-mc-tabs span{ flex:1; text-align:center; font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:var(--hc-muted);
  padding:3px 2px; box-shadow:inset 0 0 0 1px #2c2114; }
.hc-mc-tabs span.on{ color:var(--hc-amber); box-shadow:inset 0 0 0 1px #5a4419; background:rgba(214,150,58,.1); }
.hc-mc-open{ margin-top:8px; display:flex; align-items:center; gap:6px; }
.hc-mc-open b{ font-family:var(--font-title); font-size:9px; color:var(--hc-strong); letter-spacing:.04em; }

/* ══ DIREITA: painéis empilhados estilo Forja ══ */
.hc-stack{ width:406px; flex:0 0 auto; display:flex; flex-direction:column; gap:12px; min-height:0; overflow-y:auto; }
/* ONDA 4 (28/07, auditoria visual #19): o card "Equipamento" ficava 100% fora da tela no celular
   (clientHeight 317 vs scrollHeight 776) SEM nenhuma pista de rolagem — o scrollbar overlay do
   Windows 11 se esconde e não reserva espaço. Scrollbar CUSTOM (::-webkit-scrollbar) força a barra
   clássica: sempre pintada e ocupando espaço de layout, no celular e no PC (lá estourava 116px). */
.hc-stack::-webkit-scrollbar{ width:8px; }
.hc-stack::-webkit-scrollbar-track{ background:rgba(0,0,0,.30); }
.hc-stack::-webkit-scrollbar-thumb{ background:rgba(217,178,76,.45); border-radius:4px; }
.hc-card{ border:24px solid transparent; border-image:url('/assets/ui/forja/panel.png') 82 fill stretch; padding:2px 6px 6px; flex:0 0 auto; }
.hc-ptitle{ text-align:center; font-family:var(--font-title); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#b89355;
  border-bottom:1px solid #3a352c; padding-bottom:6px; margin:0 0 8px; }
/* atributos em grade */
.hc-attr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hc-attr{ background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px #2c2114; padding:6px 4px; text-align:center; }
.hc-attr .k{ font-size:8.5px; letter-spacing:.04em; color:var(--hc-muted); text-transform:uppercase; }
.hc-attr .v{ font-size:17px; font-weight:800; color:var(--hc-strong); margin-top:1px; }
.hc-attr.dmg{ background:rgba(214,150,58,.10); box-shadow:inset 0 0 0 1px #5a4419; grid-column:span 3; display:flex; align-items:center; justify-content:center; gap:10px; padding:5px; }
.hc-attr.dmg .k{ font-size:9px; } .hc-attr.dmg .v{ color:var(--hc-amber); font-size:16px; }
/* stat EFETIVO — quando talento/equipamento somou, realça o valor em dourado + o delta ganho.
   (só apresentação; a grade não muda de layout — casa o kit dourado da página C) */
.hc-attr .v .hc-bon{ font-size:10px; font-weight:700; margin-left:4px; letter-spacing:0; vertical-align:baseline; }
.hc-attr .v .hc-bon.up{ color:var(--hc-gold); }
.hc-attr .v .hc-bon.dn{ color:#c98a6a; }
.hc-attr.hc-boost{ box-shadow:inset 0 0 0 1px #5a4419; }
.hc-attr.hc-boost .v{ color:#ffdf92; }
.hc-attr.dmg.hc-boost .v{ color:#ffcf74; }
.hc-passive{ margin-top:8px; font-size:9.5px; line-height:1.45; color:#c4b892; padding:6px 9px; background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px #2c2114; }
.hc-passive b{ color:var(--hc-gold); }
/* skills compactas */
.hc-skl{ display:flex; align-items:center; gap:9px; padding:5px 6px; margin-bottom:4px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px #2c2114; }
.hc-skl .ic{ width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:16px;
  background:url('/assets/ui/pixellab/slot_comum.png') center/100% 100% no-repeat; text-shadow:0 2px 3px #000; }
.hc-skl .ic.ult{ background-image:url('/assets/ui/pixellab/slot_lendario.png'); }
.hc-skl .tx{ flex:1; min-width:0; }
.hc-skl .sn{ font-size:11px; font-weight:700; color:var(--hc-strong); line-height:1.1; }
.hc-skl .sn .ultag{ font-size:7px; letter-spacing:.1em; color:#f4e0a0; background:linear-gradient(180deg,#a8281e,#7c1812); padding:0 4px; margin-left:4px; text-transform:uppercase; vertical-align:1px; }
.hc-skl .sd{ font-size:8.5px; color:var(--hc-muted); margin-top:1px; }
.hc-skl-more{ font-size:8.5px; color:var(--hc-muted); text-align:center; margin-top:2px; opacity:.8; }
/* equipamento compacto (linha de slots) */
/* ONDA 4 (28/07, auditoria visual #30): soquete SEMPRE quadrado — o flex encolhia só a LARGURA
   (30px no celular, height fixa 44) e achatava a moldura pixel-art em 31,8%. height:auto +
   aspect-ratio faz a moldura encolher por igual quando falta espaço (celular ~30×30; PC ~43×43
   com a barra do #19); align-items:flex-start impede o stretch do flex de re-esticar a altura. */
.hc-eqline{ display:flex; gap:6px; justify-content:space-between; align-items:flex-start; }
.hc-eqs{ width:44px; height:auto; aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:url('/assets/ui/pixellab/slot_comum.png') center/100% 100% no-repeat; text-shadow:0 2px 3px #000; }
.hc-eqs .cr, .hc-eqs img{ width:30px; height:30px; object-fit:contain; image-rendering:pixelated; }
.hc-eqs.empty{ opacity:.4; filter:grayscale(.6); }
.hc-eqs small{ position:absolute; bottom:-13px; left:-14px; right:-14px; font-size:7px; text-align:center; color:#9a8a63; letter-spacing:.02em; }
.hc-eq-wrap{ padding-bottom:14px; }

/* ═══ MOBILE paisagem (≤900px de largura E baixo — 844×390): herói menor à esquerda, painéis roláveis ═══ */
/* 30/07 — o gatilho era só `max-width:900px`, e o celular do Lucas tem 926 de LARGURA em paisagem:
   ele nunca recebia estas regras e via o layout de desktop espremido em 428px de altura (foi a causa
   de "a árvore de talentos está muito grande e por cima do personagem"). Paisagem de celular se
   reconhece pela ALTURA baixa, não pela largura — daí a segunda condição. */
@media (max-width:900px), (max-height:520px){
  .hc-ui{ padding:6px 10px 8px; }
  .hc-top{ height:48px; gap:7px; }
  .hc-brand{ display:none; }
  .hc-tabs{ gap:5px; }
  .hc-tab{ min-width:0; min-height:38px; padding:2px 7px 2px 6px; gap:5px; }
  .hc-tab img, .hc-tab .hc-av-fb{ width:26px; height:26px; }
  .hc-tab .tx b{ font-size:9px; } .hc-tab .tx span{ display:none; }
  .hc-close{ width:36px; height:36px; }
  .hc-body{ gap:9px; }
  .hc-stack{ width:290px; gap:8px; }
  .hc-card{ border-width:18px; }
  .hc-nameplate b{ font-size:20px; } .hc-nameplate .lore{ display:none; }
  .hc-glow{ width:320px; height:340px; }
  /* ═══ CELULAR (30/07, martelos do Lucas) ═══════════════════════════════════════════════
     "a árvore de talentos está muito grande e por cima do personagem, diminua a caixa e chegue o
     personagem um pouco para a direita". Medido antes: a .hc-mini cobria 36.128px² do retrato — 53%
     do personagem. 230 → 186px de largura e o herói de 46% para 58% tiram a constelação de cima
     dele sem encolher fonte nenhuma (ele tem baixa visão; largura é o que cede, não o texto). */
  .hc-mini{ width:186px; border-width:14px; padding:2px 7px 7px; }
  .hc-hero-big{ left:58%; }
  .hc-hero-shadow{ left:58%; }
  .hc-glow{ left:56%; }
  /* o texto de lore parava em cima do personagem: 330px de largura num campo de 926 alcançavam o
     sprite, que começa em 103px. Estreitar resolve sem cortar palavra. */
  .hc-nameplate{ max-width:40%; }
  .hc-nameplate .lore{ max-width:250px; }
  .hc-mc-sky{ height:70px; }
  .hc-attr .v{ font-size:15px; }
  /* ONDA 4 (28/07, auditoria visual #30): soquetes ~30×30 no celular → ícone/emoji acompanham
     (30px cobriria a moldura inteira); gap menor devolve ~2px de largura a cada soquete. */
  .hc-eqline{ gap:4px; }
  .hc-eqs{ font-size:14px; }
  .hc-eqs .cr, .hc-eqs img, .hc-eqs .itemimg{ width:20px; height:20px; }
}
/* telas MUITO baixas (paisagem de celular): comprime verticalmente sem estourar */
@media (max-height:430px){
  .hc-top{ height:44px; }
  .hc-mini{ bottom:2px; }
  .hc-hero-big{ top:46%; }
}