/* ═══════════════════════════════════════════════════════════════════
   CAMADA VISUAL — arte procedural (SVG) e cenas 3D (WebGL)

   Toda imagem do arquivo é desenhada por código a partir do
   identificador do registro: nenhuma depende de rede e nenhuma muda
   entre visitas. O 3D é enfeite — se faltar WebGL, ele some sem
   quebrar nada e o SVG por baixo continua cumprindo o papel.
   ═══════════════════════════════════════════════════════════════════ */

.art{display:block;width:100%;height:100%}

/* ── arte dentro dos cartões ──────────────────────────────────────── */
/* O corpo do cartão é uma coluna flexível: o texto ocupa o que
   precisar e a fileira de etiquetas é empurrada para o rodapé, de modo
   que cartões vizinhos terminem alinhados sem cortar frase nenhuma. */
.card-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.card-body .meta{margin-top:auto}
.card .meta{overflow:hidden}
.card .meta .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.card.has-art{padding:0}
.card.has-art .card-body{padding:14px 18px 18px}

/* banner no topo — jogos, guerras, territórios */
.card.art-wide{display:flex;flex-direction:column}
.card.art-wide .card-art{
  position:relative;width:100%;flex:0 0 auto;aspect-ratio:16/9;overflow:hidden;
  border-bottom:1px solid var(--line);background:#07080a;
}
/* A arte já traz a própria faixa de título; o cartão só acrescenta uma
   leve vinheta nas bordas, sem escurecer o rodapé e apagar o texto. */
.card.art-wide .card-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(5,6,7,.5) 100%);
}
.card.art-wide .card-art .art{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.card.art-wide:hover .card-art .art{transform:scale(1.05)}

/* miniatura lateral — organizações, personagens, estúdios */
.card.art-side{display:flex;flex-direction:row;align-items:stretch}
.card.art-side .card-art{
  flex:0 0 96px;position:relative;overflow:hidden;min-height:158px;
  border-right:1px solid var(--line);background:#07080a;
}
.card.art-side .card-art .art{
  position:absolute;inset:0;
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.card.art-side .art-insignia,
.card.art-side .art-studio{padding:10px}
/* o retrato cabe inteiro na coluna, como foto montada na ficha */
.card.art-side .art-portrait{padding:8px 6px}
.card.art-side:hover .card-art .art{transform:scale(1.06)}
@media (max-width:560px){
  .card.art-side .card-art{flex-basis:76px;min-height:140px}
}

/* ── arsenal ──────────────────────────────────────────────────────── */
.arsenal-item{padding-top:0 !important;overflow:hidden}
.arsenal-art{
  margin:0 -20px 14px;border-bottom:1px solid var(--line);
  background:#07080a;height:118px;overflow:hidden;
}
.arsenal-art .art{height:100%}

/* ── abertura visual dos dossiês ──────────────────────────────────── */
.m-hero{position:relative;margin:-30px -30px 22px;background:#07080a;border-bottom:1px solid var(--line);overflow:hidden}
@media (max-width:640px){.m-hero{margin:-20px -20px 18px}}

.m-hero-wide{aspect-ratio:16/7;overflow:hidden}
.m-hero-wide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(10,12,14,.92) 100%);
}
.m-hero-wide .art{height:100%}

/* brasão: SVG por baixo, insígnia 3D por cima quando houver WebGL */
/* espaço extra no topo para o botão de fechar não encostar no brasão */
.m-hero-crest{
  display:grid;place-items:center;padding:54px 0 26px;
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--tone) 16%,transparent),transparent 62%),
    #07080a;
}
.m-crest{position:relative;width:186px;height:186px}
.m-crest > .art{position:absolute;inset:0;transition:opacity .5s ease}
.m-emblem{position:absolute;inset:-8px;z-index:2}
.m-emblem canvas{display:block;width:100%;height:100%}
.m-crest:has(.m-emblem.has-3d) > .art{opacity:.16}

/* ficha de identificação */
.m-hero-id{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;padding:22px 30px}
@media (max-width:640px){.m-hero-id{grid-template-columns:104px 1fr;padding:18px 20px;gap:14px}}
.m-portrait{width:100%;aspect-ratio:120/150;overflow:hidden;border:1px solid var(--line-2)}
.m-idcard{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.16em;color:var(--ash);text-transform:uppercase}
.m-idcard b{color:var(--tone);font-weight:400;letter-spacing:.24em;font-size:10px}
.m-idcard span{color:var(--bone-2);border-bottom:1px dashed var(--line-2);padding-bottom:6px}
.m-idcard span:last-child{border-bottom:0}

/* ── globo ambiente do topo ───────────────────────────────────────── */
.hero-globe{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(760px,58vw);aspect-ratio:1;pointer-events:none;
  opacity:.5;z-index:1;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 78%);
}
@media (max-width:900px){.hero-globe{display:none}}

/* ── teatro de operações ──────────────────────────────────────────── */
.theatre{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;
  margin:0 0 32px;padding:22px;background:linear-gradient(160deg,var(--steel-2),var(--steel));
  border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden;
}
.theatre::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),transparent 70%)}
.theatre-stage{
  position:relative;aspect-ratio:1/1;max-height:460px;min-height:280px;
  cursor:grab;touch-action:none;border-radius:var(--r);
  background:radial-gradient(circle at 50% 50%,rgba(255,176,46,.07),transparent 65%);
}
.theatre-stage:active{cursor:grabbing}
.theatre-stage canvas{display:block;width:100%;height:100%}
/* sem WebGL o palco não ocupa espaço à toa */
.theatre-stage:not(.has-3d){display:none}
.theatre:not(:has(.theatre-stage.has-3d)){grid-template-columns:1fr}
.theatre-legend h3{margin:6px 0 10px;font-size:clamp(20px,2.4vw,27px);color:var(--bone)}
.theatre-legend p{margin:0 0 14px;color:var(--bone-2);font-size:14.5px;max-width:56ch}
.theatre-legend .theatre-foot{font-size:10.5px;line-height:1.7;letter-spacing:.12em;color:var(--ash-2);margin:16px 0 0;max-width:none}
.theatre-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px}
.theatre-list button{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  background:transparent;border:1px solid transparent;color:var(--bone-2);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:13px;cursor:pointer;border-radius:2px;text-align:left;transition:.16s;
}
.theatre-list button:hover{border-color:var(--tone);color:var(--bone);background:rgba(255,255,255,.03)}
.theatre-list button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.theatre-list .dot{width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 8px var(--tone);flex:0 0 auto}
.theatre-list em{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--ash-2);letter-spacing:.1em}
@media (max-width:900px){
  .theatre{grid-template-columns:1fr;padding:18px}
  .theatre-stage{max-height:320px}
}

/* etiqueta que segue o cursor sobre o globo */
.globe-tip{
  position:absolute;transform:translate(14px,-50%);pointer-events:none;z-index:3;
  background:rgba(7,8,10,.94);border:1px solid var(--amber);color:var(--bone);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12.5px;padding:5px 10px;border-radius:2px;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.6);max-width:240px;overflow:hidden;text-overflow:ellipsis;
}

@media (prefers-reduced-motion:reduce){
  .card.art-wide:hover .card-art .art,
  .card.art-side:hover .card-art .art{transform:none}
}