/* AETHRA MONUMENTAL
   Novo corte vertical aprovado: Combate + Companhia. Esta camada não muda
   regras; transforma os mesmos dados numa composição durável para PC e toque. */

:root {
  --am-ink:#f1eadc;
  --am-muted:#aeb5b6;
  --am-night:#071014;
  --am-panel:#0c171c;
  --am-panel-2:#12232a;
  --am-gold:#d7aa52;
  --am-gold-soft:#7c6135;
  --am-line:#30424a;
  --am-cyan:#62b9c2;
}

/* =====================================================================
   COMPANHIA — herói, equipamento, formação e otimização num único lugar
   ===================================================================== */
.tela-party.hda-modal {
  --hda-modal-larg:min(1500px,97vw) !important;
  background:
    radial-gradient(circle at 45% 14%,rgba(42,96,111,.19),transparent 35%),
    linear-gradient(145deg,#11191d 0%,#080d10 58%,#17120d 100%);
  border-color:#5a4a31;
  box-shadow:0 30px 90px #000c,inset 0 0 80px #0008;
}
.tela-party .hda-modal-cab {
  min-height:62px;
  background:linear-gradient(180deg,#17262c,#0b1418);
  border-bottom:1px solid #5d4928;
  padding-inline:18px;
}
.tela-party .hda-modal-cab h2 {
  color:#f5dfaf;
  letter-spacing:.035em;
  font-family:Georgia,"Times New Roman",serif;
  text-shadow:0 2px 10px #000;
}
.tela-party .hda-modal-sub {
  border:1px solid #57482f;
  background:#090f12b8;
  color:#d9c79f;
}
.tela-party > .hda-tabs {
  margin:0;
  padding:7px 16px 0;
  gap:4px;
  background:#0a1216;
  border-bottom:1px solid #3e3425;
}
.tela-party > .hda-tabs button {
  min-width:145px;
  min-height:43px;
  color:#aeb8bb;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:transparent;
}
.tela-party > .hda-tabs button.ativa {
  color:#ffe8b1;
  border-color:#5e4a29;
  background:linear-gradient(180deg,#26343a,#142127);
  box-shadow:inset 0 2px #d7aa52;
}
.tela-party .companhia-corpo {
  padding:14px 16px 24px;
  background:linear-gradient(90deg,rgba(6,11,13,.72),transparent 22%,transparent 78%,rgba(6,11,13,.72));
}
.companhia-palco {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  min-height:clamp(270px,36vh,390px);
  margin-bottom:12px;
  border:1px solid #4d432f;
  background:
    linear-gradient(90deg,#081014 0 190px,transparent 190px),
    radial-gradient(circle at 48% 42%,rgba(68,126,137,.22),transparent 34%),
    linear-gradient(135deg,#152229,#090f12 64%,#1b140d);
  box-shadow:inset 0 0 60px #0008,0 14px 38px #0008;
  overflow:hidden;
  position:relative;
}
.companhia-palco::after {
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 72%,rgba(215,170,82,.035)),repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.015) 80px);
}
.companhia-trilho {
  min-width:0;
  padding:10px;
  border-right:1px solid #4d432f;
  position:relative;z-index:1;
}
.companhia-trilho > small {
  display:block;
  margin:0 4px 8px;
  color:#8f9da0;
  font-size:.67rem;
  letter-spacing:.14em;
}
.companhia-trilho .party-fileira {
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:330px;
  padding:0 3px 6px 0;
}
.companhia-trilho .party-card {
  width:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:1px 8px;
  padding:7px;
  border:1px solid #33434a;
  border-radius:4px;
  background:#0e191ec7;
  box-shadow:none;
}
.companhia-trilho .party-card:hover { transform:translateX(2px); border-color:#7f6a40; }
.companhia-trilho .party-card.ativo {
  border-color:#d7aa52;
  background:linear-gradient(90deg,#20323a,#121d22);
  box-shadow:inset 3px 0 #d7aa52,0 0 18px rgba(215,170,82,.12);
}
.companhia-trilho .party-retrato { grid-row:1/3;width:48px;height:52px;border-radius:3px; }
.companhia-trilho .party-nome { text-align:left;font-size:.78rem;align-self:end; }
.companhia-trilho .party-nivel { align-self:start;font-size:.69rem; }
.companhia-trilho .party-vitais,.companhia-trilho .party-slots { display:none; }
.companhia-vitrine {
  display:grid;
  grid-template-columns:minmax(210px,.9fr) minmax(260px,1.2fr) minmax(130px,.55fr);
  align-items:center;
  min-width:0;
  padding:20px clamp(18px,3vw,48px);
  position:relative;z-index:1;
}
.companhia-arte {
  align-self:stretch;
  min-height:230px;
  display:grid;
  place-items:end center;
  position:relative;
  isolation:isolate;
}
.companhia-arte::before {
  content:"";position:absolute;left:13%;right:13%;bottom:4%;height:15%;z-index:-1;
  border:1px solid color-mix(in srgb,var(--companhia-cor) 65%,transparent);
  border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--companhia-cor) 20%,transparent),transparent 68%);
  box-shadow:0 0 24px color-mix(in srgb,var(--companhia-cor) 18%,transparent);
}
.companhia-sprite {
  width:min(100%,270px);height:100%;max-height:330px;
  object-fit:contain;object-position:center bottom;
  image-rendering:pixelated;
  filter:drop-shadow(0 10px 5px #0009) drop-shadow(0 0 2px color-mix(in srgb,var(--companhia-cor) 62%,transparent));
}
.tela-party .companhia-sprite.asset-sprite-sheet { width:100%; height:240px; max-height:100%; background-size:300% 400%; background-position:50% 0%; }
.companhia-arte-vazia { width:150px;height:210px;align-items:center;justify-content:center;color:var(--companhia-cor);font-size:4rem; }
.companhia-identidade { min-width:0;padding:12px clamp(8px,2vw,28px);border-left:1px solid #34454a; }
.companhia-identidade > small,.companhia-poder > small { color:#8ea0a4;letter-spacing:.14em;font-size:.66rem; }
.companhia-identidade h3 { margin:5px 0 2px;font:500 clamp(1.45rem,2.4vw,2.35rem)/1 Georgia,serif;color:#fff0c9; }
.companhia-identidade p { margin:7px 0 14px;color:#aeb8b8; }
.companhia-selos { display:flex;flex-wrap:wrap;gap:6px; }
.companhia-selos > span { padding:5px 9px;border:1px solid #3a4b50;border-radius:999px;background:#081216c9;color:#d8e0dd;font-size:.76rem; }
.companhia-selos > span:first-child { border-color:var(--selo-cor);box-shadow:inset 0 -2px color-mix(in srgb,var(--selo-cor) 42%,transparent); }
.companhia-equip-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:14px; max-width:390px; }
.companhia-equip-slot { min-width:0; min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px; color:#dce6e5; background:#0a1519; border:1px solid #40545b; border-radius:5px; cursor:pointer; }
.companhia-equip-slot.preenchido { border-color:#d7aa52; background:linear-gradient(145deg,#283b40,#111b1f); }
.companhia-equip-slot:hover { border-color:#77d1dc; transform:translateY(-1px); }
.companhia-equip-slot small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.58rem; color:#aebdbc; }
.ficha-acoes { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 14px; padding:9px; border:1px solid #344b52; background:linear-gradient(90deg,#0d1b20,#111b1f); border-radius:6px; }
.ficha-acoes button { min-height:40px; padding:8px 12px; color:#e3efee; background:#152b32; border:1px solid #4b6870; border-radius:5px; cursor:pointer; }
.ficha-acoes button:first-child { border-color:#d7aa52; color:#ffe4a3; }
.ficha-acoes button:hover { border-color:#77d1dc; transform:translateY(-1px); }
.companhia-poder { min-width:0;padding:16px;text-align:right;border-left:1px solid #34454a; }
.companhia-poder strong { display:block;margin-top:3px;color:#f1c765;font:500 clamp(2rem,4vw,3.3rem)/1 Georgia,serif; }
.companhia-poder > span { color:#8e999a;font-size:.72rem; }
.companhia-poder-barra { height:5px;margin:11px 0;background:#080d0f;border:1px solid #35454a;overflow:hidden; }
.companhia-poder-barra i { display:block;height:100%;background:linear-gradient(90deg,#5e8790,#e0ae53);box-shadow:0 0 8px #e0ae53; }
.companhia-recursos { display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;color:#bac6c5;font-size:.72rem; }
.companhia-painel {
  border:1px solid #344249;
  background:linear-gradient(145deg,#101b20e8,#090f12ed);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  padding:12px;
}
.companhia-equipamento .party-filtros { margin-top:0;border-top:0;padding-top:0; }
.companhia-equipamento {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,.46fr);
  grid-template-areas:"filtros filtros" "mochila detalhe";
  gap:10px 14px;
  align-items:start;
}
.companhia-equipamento .party-filtros { grid-area:filtros; }
.companhia-equipamento .party-mochila { grid-area:mochila;min-width:0; }
.companhia-equipamento .party-detalhe,
.companhia-equipamento .companhia-estado-detalhe { grid-area:detalhe; }
.companhia-equipamento .hda-ladrilho { background:linear-gradient(145deg,#152229,#0b1114);border-color:#394951;border-radius:3px; }
.companhia-equipamento .hda-ladrilho.selecionado {
  border-color:#f0c46a;
  background:linear-gradient(145deg,#263840,#121b1f);
  box-shadow:inset 4px 0 #f0c46a,inset 0 0 0 1px #d7aa52,0 0 18px #d7aa5230;
}
.companhia-equipamento .hda-ladrilho:focus-visible,
.companhia-trilho .party-card:focus-visible,
.tela-party button:focus-visible,
.tela-party input:focus-visible {
  outline:3px solid #77d1dc;
  outline-offset:2px;
}
.party-busca-wrap { display:grid;gap:3px;flex:0 1 250px;color:#98a6a8;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase; }
.party-busca-wrap .party-busca { width:100%;min-height:38px;border-radius:3px;background:#071014;border-color:#3d5058; }
.companhia-estado,
.companhia-estado-detalhe {
  min-height:150px;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:5px;
  padding:24px;
  border:1px dashed #3b4b50;
  background:linear-gradient(145deg,#0e181c,#081014);
  color:#aeb9ba;
  text-align:center;
}
.companhia-estado > span,.companhia-estado-detalhe > span { color:#d7aa52;font-size:1.8rem; }
.companhia-estado strong,.companhia-estado-detalhe strong { color:#ead9b5;font:500 1rem Georgia,serif; }
.companhia-estado small,.companhia-estado-detalhe small { display:block;max-width:300px;margin-top:4px;color:#899799;line-height:1.45; }
.companhia-estado-detalhe { grid-template-columns:auto 1fr;place-content:center;justify-items:start;text-align:left; }
.companhia-estado-carregando > span { width:24px;height:24px;border:2px solid #3b4b50;border-top-color:#d7aa52;border-radius:50%;animation:companhia-giro .8s linear infinite; }
@keyframes companhia-giro { to { transform:rotate(360deg); } }
.tela-party .ficha-bloco,.tela-party .ficha-slot,.tela-party .auto-linha {
  border-radius:3px;
  border-color:#34454a;
  background:#091216b8;
}
.tela-party .party-detalhe {
  position:sticky;
  top:0;
  bottom:auto;
  margin:0;
  max-height:min(52vh,520px);
  background:#081115f5;
  border:1px solid #d7aa52;
  border-radius:3px;
  box-shadow:0 16px 36px #0008;
}
.tela-party .party-detalhe-cabecalho { padding-right:34px;position:relative; }
.tela-party .party-detalhe-fechar {
  position:absolute;right:0;top:0;width:32px;height:32px;padding:0;
  border:1px solid #4a5b60;background:#101c20;color:#dce4e2;font-size:1.15rem;
}
.tela-party .party-linhas { gap:6px; }
.tela-party .party-linha-membro {
  grid-template-columns:minmax(86px,.72fr) minmax(100px,1fr) auto minmax(110px,1fr) auto;
  gap:7px;
  border-color:#2e4047;
  background:#0b161ac7;
}
.tela-party .party-linha-membro.membro-ativo { border-color:#806835;box-shadow:inset 3px 0 #d7aa52; }
.tela-party .party-linha-info,.tela-party .party-linha-resultado { min-width:0;overflow-wrap:anywhere;color:#c4cecc;font-size:.74rem; }
.tela-party .party-linha-info small,.tela-party .party-linha-resultado small { display:block;margin-bottom:2px;color:#708083;font-size:.57rem;letter-spacing:.1em; }
.tela-party .party-linha-seta { color:#d7aa52; }
.tela-party .party-melhor,.tela-party .party-pior,.tela-party .party-igual { display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;background:#071014; }

/* =====================================================================
   COMBATE — campo domina, cenário respira e interface vive nas bordas
   ===================================================================== */
#screen-batalha.bt-screen {
  --am-combat-line:#4a5760;
  background:#05090c;
  color:var(--am-ink);
}
#screen-batalha.bt-screen .bt-header {
  min-height:48px;
  padding-inline:clamp(10px,2vw,24px);
  background:linear-gradient(180deg,#111d22f5,#071014ee);
  border-bottom:1px solid #5e4a2d;
  box-shadow:0 8px 24px #0008;
  z-index:20;
}
#screen-batalha.bt-screen .bt-header-nome { color:#f2ddb0;font-family:Georgia,"Times New Roman",serif;letter-spacing:.025em; }
#screen-batalha.bt-screen .bt-header-desc { color:#93a2a4; }
#screen-batalha.bt-screen .bt-mod { border-radius:3px;background:#081014d8;border-color:#3b4c52; }
#screen-batalha.bt-screen .bt-field { background:#0a1115; }
#screen-batalha.bt-screen .bt-cena { filter:saturate(.76) brightness(.78) contrast(1.02); }
#screen-batalha.bt-screen .bt-field::after {
  background:
    linear-gradient(180deg,rgba(0,0,0,.06),transparent 24%,transparent 72%,rgba(0,0,0,.34)),
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.32));
}
/* As duas formações terminam exatamente na pista de anúncio/d20. Esta
   regra final impede folhas visuais anteriores de voltarem a ocupar o
   centro em resoluções intermediárias de notebook. */
#screen-batalha.bt-screen .bt-row-inimigos {
  top:2%;
  height:calc(50% - var(--anuncio-meio) - 2%);
}
#screen-batalha.bt-screen .bt-row-herois {
  bottom:var(--ctx-alt);
  height:calc(50% - var(--anuncio-meio) - var(--ctx-alt));
}
#screen-batalha.bt-screen .bt-slot {
  min-height:0;
  overflow:hidden;
}
/* O slot corta o que passa dele, então o card tem de CABER nele. Como o card
   é `position:relative` (batalha-layout.css), a altura vinha do conteúdo: com
   os sprites maiores desta camada o card do inimigo passava ~17px do slot e
   perdia o botão "Alvo atual", e o do herói perdia a barra de MP e o ATB.
   Card limitado ao slot + sprite que só encolhe: quem cede espaço é o
   sprite (object-fit mantém a proporção), nunca uma barra ou um botão.
   Inimigo: altura do conteúdo, no máximo a do slot (a moldura de alvo abraça
   o card, sem um retângulo vazio embaixo). Herói: altura do slot inteira,
   porque o conteúdo dele assenta no chão (justify-content:flex-end). */
#screen-batalha.bt-screen .bt-slot .combatente { max-height:100%; }
#screen-batalha.bt-screen .bt-row-herois .bt-slot .combatente { height:100%; }
#screen-batalha.bt-screen .bt-slot .combatente .sprite-wrap { flex:0 1 auto; min-height:0; }
/* O mínimo de 120px de toque (design-polimento.css) fazia o botão passar da
   largura do card no celular — "elecionar alv", cortado dos dois lados. O
   card inteiro já seleciona o alvo; o botão só não pode ser maior que ele. */
#screen-batalha.bt-screen .bt-slot .combatente .btn-alvo { min-width:0; }
/* Slot baixo — o notebook comum com a barra do navegador (1366x657,
   1280x633): o card inteiro não cabe e o sprite encolhia até 35–45px num
   campo quase vazio. Aqui o secundário cede primeiro: a linha de formação
   sai (a do herói da vez continua no dock) e o número de HP entra na própria
   barra. O slot vira contêiner de consulta; ele já tem tamanho de fora
   (fileira + grade), então a contenção de tamanho não muda nada nele. */
#screen-batalha.bt-screen .bt-slot { container:slot-combate / size; }
@container slot-combate (max-height:180px) {
  #screen-batalha.bt-screen .bt-slot .combatente .linha-sinais > .formacao-linha { display:none; }
  #screen-batalha.bt-screen .bt-slot .combatente .linha-sinais { height:0; align-items:start; }
  #screen-batalha.bt-screen .bt-slot .combatente .linha-sinais > .combatente-sinais { height:auto; align-items:flex-start; }
  #screen-batalha.bt-screen .bt-slot .combatente > div[style*="0.7em"] {
    position:relative; z-index:2; margin-top:-13px; line-height:12px; white-space:nowrap;
  }
}
#screen-batalha.bt-screen .bt-slot .combatente {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
#screen-batalha.bt-screen .bt-slot .combatente.ativo { background:transparent;box-shadow:none; }
#screen-batalha.bt-screen .bt-slot .combatente .nome-c {
  max-width:100%;padding:2px 7px;border:1px solid #48565b;border-radius:999px;
  background:#071014df;color:#edf2ef;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#screen-batalha.bt-screen .bt-slot .combatente.ativo .nome-c { border-color:#d7aa52;background:#17170fdf; }
#screen-batalha.bt-screen .bt-slot .combatente .sprite-wrap::after {
  content:"";position:absolute;left:12%;right:12%;bottom:1%;height:10%;z-index:-1;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.62),transparent 70%);
}
#screen-batalha.bt-screen .bt-infobar {
  background:#071014f5;border-color:#37464c;box-shadow:0 -6px 20px #0007;
}
#screen-batalha.bt-screen .bt-dock {
  background:
    linear-gradient(90deg,rgba(215,170,82,.05),transparent 16%,transparent 84%,rgba(215,170,82,.05)),
    linear-gradient(180deg,#101b20,#070d10);
  border-top:1px solid #70572f;
  box-shadow:0 -12px 30px #0009,inset 0 1px rgba(255,225,166,.08);
}
#screen-batalha.bt-screen .carta-batalha {
  --carta-fundo:linear-gradient(160deg,#17262d,#0b1216 72%);
  --carta-borda:#405158;
  border-radius:4px;
  box-shadow:0 5px 12px #0007,inset 0 0 0 1px rgba(255,255,255,.035);
  outline-color:#05090c;
}
#screen-batalha.bt-screen .carta-batalha:hover,#screen-batalha.bt-screen .carta-batalha.estado-selecionado {
  border-color:#d7aa52;box-shadow:0 7px 18px #000b,0 0 18px rgba(215,170,82,.18),inset 0 0 0 1px rgba(255,225,166,.1);
}
#screen-batalha.bt-screen .carta-nome { color:#f3ead7; }
#screen-batalha.bt-screen .carta-custo-item,#screen-batalha.bt-screen .mao-recursos,#screen-batalha.bt-screen .mao-linha { background:#071014;border-color:#3a4b51; }
#screen-batalha.bt-screen #batalha-contexto-tatico { background:linear-gradient(180deg,transparent,#071014f4); }

@media (max-width:719px) {
  .tela-party .hda-modal-cab { min-height:52px;padding-inline:10px; }
  .tela-party > .hda-tabs { padding-inline:8px;overflow-x:auto; }
  .tela-party > .hda-tabs button { min-width:auto;flex:1 0 auto;min-height:44px;padding-inline:12px; }
  .tela-party .companhia-corpo { padding:8px 8px calc(84px + env(safe-area-inset-bottom)); }
  .companhia-palco { grid-template-columns:1fr;min-height:0;margin-bottom:8px; }
  .companhia-trilho { order:2;border-right:0;border-top:1px solid #4d432f;padding:7px; }
  .companhia-trilho > small { display:none; }
  .companhia-trilho .party-fileira { display:flex !important;max-height:none;overflow-x:auto;overflow-y:hidden;padding:0; }
  .companhia-trilho .party-card { flex:0 0 150px;width:150px;min-height:58px;grid-template-columns:44px minmax(0,1fr);padding:5px; }
  .companhia-trilho .party-retrato { width:40px;height:44px; }
  .companhia-vitrine { grid-template-columns:118px minmax(0,1fr);padding:10px;min-height:178px; }
  .companhia-arte { min-height:158px;grid-row:1/3; }
  .companhia-sprite { max-height:170px; }
  .companhia-identidade { padding:6px 8px;border-left:0; }
  .companhia-identidade h3 { font-size:1.25rem; }
  .companhia-identidade p { margin:4px 0 8px;font-size:.72rem; }
  .companhia-selos > span { padding:3px 6px;font-size:.65rem; }
  .companhia-poder { grid-column:2;padding:5px 8px;border-left:0;text-align:left;display:grid;grid-template-columns:auto auto 1fr;gap:3px 7px;align-items:end; }
  .companhia-poder > small { grid-column:1/-1; }
  .companhia-poder strong { font-size:1.45rem;margin:0; }
  .companhia-poder-barra { grid-column:1/-1;width:100%;margin:2px 0; }
  .companhia-recursos { grid-column:1/-1;justify-content:flex-start; }
  .companhia-painel { padding:8px; }
  .companhia-equipamento { display:block; }
  .companhia-equipamento .party-filtros { position:sticky;top:0;z-index:2;padding:5px;background:#0c171cf5;border-bottom:1px solid #344249; }
  .party-busca-wrap { flex:1 0 100%; }
  .companhia-estado-detalhe { min-height:72px;margin-top:8px;padding:12px; }
  .tela-party .party-detalhe {
    position:sticky;bottom:0;top:auto;z-index:8;
    max-height:min(62dvh,520px);margin-top:8px;
    border-radius:8px 8px 0 0;
    box-shadow:0 -18px 42px #000d;
  }
  .tela-party .party-linha-membro { grid-template-columns:minmax(82px,.8fr) 1fr auto;gap:5px; }
  .tela-party .party-linha-info { grid-column:1/2; }
  .tela-party .party-linha-seta { display:none; }
  .tela-party .party-linha-resultado { grid-column:2/3; }
  .tela-party .party-btn-equipar,.tela-party .party-btn-usar { grid-column:3;grid-row:1/3;min-height:44px; }
  .tela-party .party-detalhe-acoes { position:sticky;bottom:0;padding-top:8px;background:#081115; }
  #screen-batalha.bt-screen .bt-header { min-height:40px; }
  #screen-batalha.bt-screen .bt-cena { filter:saturate(.72) brightness(.74) contrast(1.02); }
  #screen-batalha.bt-screen .bt-slot .combatente .nome-c { font-size:.66rem;padding:1px 4px; }
  #screen-batalha.bt-screen .carta-batalha { border-radius:3px; }
}

@media (max-height:460px) and (orientation:landscape) {
  .companhia-vitrine { min-height:140px;grid-template-columns:110px minmax(0,1fr) 120px;padding-block:6px; }
  .companhia-arte { min-height:130px;grid-row:auto; }
  .companhia-sprite { max-height:138px; }
  .companhia-poder { grid-column:auto;display:block;text-align:right; }
  .tela-party .party-detalhe { max-height:72dvh; }
  #screen-batalha.bt-screen .bt-header { min-height:34px; }
}

@media (prefers-reduced-motion:reduce) {
  .companhia-estado-carregando > span { animation:none;border-color:#d7aa52; }
  .companhia-equipamento .hda-ladrilho,.companhia-trilho .party-card { scroll-behavior:auto;transition:none; }
}

/* =====================================================================
   ACABAMENTO DE DIREÇÃO DE ARTE — moldura única para todas as janelas
   ===================================================================== */
:root {
  --am-gold-hi:#ffe3a0;
  --am-surface:#0b171b;
  --am-surface-raised:#12242a;
  --am-focus:#82e1e8;
}

#modal-conteudo.hda-modal,
.hda-sheet,
.painel-criacao,
.recompensa-painel {
  border:1px solid color-mix(in srgb,var(--am-gold) 72%,#4b5d60);
  border-radius:10px;
  background-clip:padding-box;
  box-shadow:
    0 0 0 1px rgba(8,15,18,.92),
    0 0 0 3px rgba(215,170,82,.11),
    0 22px 70px rgba(0,0,0,.62),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(215,170,82,.08);
}
#modal-conteudo.hda-modal::after { opacity:.76; }
.hda-modal-cab { min-height:58px; padding-inline:clamp(14px,2vw,24px); }
.hda-modal-cab h2 { font-size:clamp(1.1rem,2vw,1.55rem); letter-spacing:.045em; }
.hda-modal-corpo { background:linear-gradient(180deg,rgba(9,18,22,.16),rgba(4,9,12,.23)); }
.hda-tabs { padding:7px clamp(12px,2vw,22px) 0; background:#071116; }
.hda-tabs button { position:relative; min-height:45px; padding-inline:clamp(12px,1.6vw,20px); border-radius:7px 7px 0 0; letter-spacing:.02em; }
.hda-tabs button.ativa::after { content:""; position:absolute; left:16%; right:16%; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--am-gold-hi),transparent); box-shadow:0 0 10px var(--am-gold); }
.hda-acoes { min-height:60px; background:linear-gradient(0deg,#071116,#0d1c21); border-top-color:rgba(215,170,82,.45); }
.hda-acoes button, .ficha-acoes button, .companhia-ferramentas button { border:1px solid #476169; background:linear-gradient(180deg,#1b353c,#0f242a); box-shadow:inset 0 1px rgba(255,255,255,.09),0 4px 12px #0005; }
.hda-acoes button.primario, .ficha-acoes button:first-child { border-color:var(--am-gold); background:linear-gradient(180deg,#5b4526,#302516); color:#ffe7ad; }

/* Cartões e ícones usam a mesma moldura, sem depender de emoji maior ou menor. */
.card, .missao-card, .gacha-colecao-card, .hda-ladrilho, .ld-slot, .ficha-bloco, .ficha-slot, .companhia-equip-slot {
  border-color:#38515a;
  background:linear-gradient(145deg,rgba(21,39,45,.96),rgba(8,17,21,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 5px 16px #0004;
}
.hda-ladrilho:hover, .card:hover, .ficha-slot:hover, .companhia-equip-slot:hover { border-color:var(--am-focus); }
.hda-icone { filter:drop-shadow(0 1px 1px #000); }

/* Companhia: superfícies discretas e informação com mais espaço útil. */
.tela-party .companhia-corpo { background:#0c161b; overflow-x:hidden; scrollbar-width:none; }
.tela-party .companhia-corpo::-webkit-scrollbar,
.tela-party .companhia-trilho .party-fileira::-webkit-scrollbar { display:none; }
.tela-party .companhia-trilho .party-fileira { scrollbar-width:none; }
.tela-party .companhia-palco { background:#101d23; box-shadow:none; border:0; border-radius:8px; min-height:0; }
.tela-party .companhia-palco::after { display:none; }
.tela-party .companhia-arte::before { border:0; box-shadow:none; background:radial-gradient(ellipse,#0006,transparent 70%); }
.tela-party .companhia-sprite { filter:drop-shadow(0 5px 4px #0005); }
.tela-party .companhia-identidade h3 { line-height:1.15; overflow-wrap:anywhere; }
.tela-party .companhia-painel { background:#0e191e; box-shadow:none; border:0; border-top:1px solid #293a40; }
.tela-party .companhia-equip-slot,
.tela-party .companhia-equip-slot.preenchido { background:#14252c; border-color:#34474e; box-shadow:none; }
.tela-party .companhia-equip-slot.preenchido { border-bottom-color:#baa374; }
.tela-party .companhia-equip-slot small { white-space:normal; overflow-wrap:anywhere; font-size:.7rem; line-height:1.3; }
.tela-party .ficha-acoes { padding:0; border:0; background:none; gap:8px; }
.tela-party .ficha-acoes button,
.tela-party .companhia-ferramentas button { box-shadow:none; background:#18303a; min-height:44px; }
.tela-party .companhia-trilho .party-card { border-color:transparent; background:transparent; box-shadow:none; }
.tela-party .companhia-trilho .party-card.ativo { border-color:#8baeb9; background:#213740; box-shadow:inset 3px 0 #d0b47e; }
.tela-party .companhia-trilho .party-card:hover,
.tela-party .companhia-equip-slot:hover { transform:none; background:#243d47; }
@media(min-width:900px) {
  .tela-party .companhia-vitrine { grid-template-columns:minmax(140px,.65fr) minmax(260px,1.5fr) minmax(105px,.45fr); padding:12px 18px; }
  .tela-party .companhia-arte { min-height:180px; }
  .tela-party .companhia-sprite { max-height:220px; width:min(100%,210px); }
  .tela-party .companhia-identidade h3 { font-size:clamp(1.3rem,2vw,1.85rem); }
  .tela-party .companhia-trilho .party-fileira { max-height:240px; }
  .tela-party .companhia-poder strong { font-size:2.4rem; }
}
.hda-botao-icone { border:1px solid #476169; border-radius:6px; background:#0d2026; }
button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--am-focus); outline-offset:3px; }

@media (max-width:719px) {
  #modal-conteudo.hda-modal, .hda-sheet { border-radius:0; box-shadow:inset 0 1px rgba(255,255,255,.08); }
  .hda-modal-cab { min-height:52px; }
  .hda-tabs { padding-inline:8px; }
}