:root {
  --fundo: #15131b;
  --painel: #1f1c28;
  --painel-2: #2a2635;
  --painel-3: #332e40;
  --borda: #3a3548;
  --borda-forte: #4d4660;
  --texto: #ece8f4;
  --sutil: #a39cb5;
  --ouro: #f0c35a;
  --acento: #8f7cf2;
  --acento-forte: #a796ff;
  --perigo: #e0656b;
  --vida: #d9534f;
  --vida-inimigo: #c4473f;
  --mana: #4a86e8;
  --escudo: #7fd1e8;
  --exp: #9b7be0;
  --bom: #5cc28a;
  --for: #a8433a;
  --des: #2f8a63;
  --int: #3f63b5;
  --raio: 12px;
  --topo: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(1200px 600px at 50% -200px, #2a2142 0%, transparent 70%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.45 Inter, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

#app { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; }

h1, h2, h3, h4 { font-family: Cinzel, Georgia, serif; margin: 0; letter-spacing: 0.02em; }
h1 { font-size: 21px; color: var(--ouro); }
h2 { font-size: 22px; }
h3 { font-size: 16px; margin-bottom: 10px; }
h3 .sutil { font-family: Inter, system-ui, sans-serif; font-weight: 400; }
h4 { font-size: 14px; color: var(--sutil); margin: 6px 0 -2px; text-transform: uppercase; letter-spacing: 0.08em; }
p { margin: 0 0 8px; }

.sutil { color: var(--sutil); font-size: 13px; }
.centro { text-align: center; }
.alerta { color: var(--perigo); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  min-height: var(--topo); margin: 0 -16px 16px; padding: 10px 16px;
  background: rgba(21, 19, 27, 0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.titulo { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.titulo:hover h1 { color: #ffd98a; }
.indicadores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.indicador {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; white-space: nowrap; color: var(--texto);
}
.indicador.ouro { color: var(--ouro); font-weight: 600; }
.indicador.ativo { border-color: var(--bom); }
button.indicador { font: inherit; font-size: 13px; cursor: pointer; }
button.indicador:hover { border-color: var(--acento); }
.moeda {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe79a, #d49a2a); box-shadow: 0 0 0 1px #9c7224;
}
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bom); box-shadow: 0 0 6px var(--bom); }
.botao-icone {
  width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 50%; color: var(--texto);
}
.botao-icone svg { width: 18px; height: 18px; }
.botao-icone:hover { border-color: var(--acento); }

/* ---------- Atalhos entre construções ---------- */
.dock-locais {
  display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 12px; padding-bottom: 4px; scrollbar-width: thin;
}
.dock-item {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--sutil); cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 12px 3px 4px; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dock-item:hover { border-color: var(--acento); color: var(--texto); }
.dock-item.ativo { border-color: var(--ouro); color: var(--texto); background: var(--painel-3); }
.dock-arte { width: 28px; height: 28px; border-radius: 50%; background: #1b1630; display: grid; place-items: center; overflow: hidden; }
.dock-arte .mini-arte { width: 24px; height: 24px; }
.dock-locais .arte-svg * { animation: none !important; }

/* ---------- Banner das construções ---------- */
.banner-local {
  display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 18px;
  background: linear-gradient(135deg, #1b1630 0%, #2d2347 60%, #3d2c4c 100%);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 20px; margin-bottom: 16px; overflow: hidden; position: relative;
}
.banner-local::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.25)); pointer-events: none;
}
.banner-arte { height: 96px; display: flex; align-items: flex-end; justify-content: center; }
.mini-arte { height: 100%; width: 100%; }
.banner-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.banner-texto h2 { font-size: 26px; color: #f3e3b5; }
.banner-texto p { color: #cfc6e0; max-width: 680px; margin: 0; }
.botao.voltar { padding: 4px 12px; font-size: 13px; margin-bottom: 4px; }

/* ---------- Layout em duas colunas ---------- */
.layout-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.layout-lateral.largo { grid-template-columns: minmax(0, 1fr) 400px; }
.principal { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lateral { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topo) + 16px); }
.lateral .painel { margin: 0; }

/* ---------- Estruturas ---------- */
.dica { color: var(--sutil); margin: 0 0 12px; }
.painel {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px;
}
.painel.estreito { max-width: 560px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.seletor + .grade { margin-top: 12px; }

.carta {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.painel .carta { background: var(--painel-2); }
.carta.em-equipe { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.carta.compacta { gap: 8px; }
.carta-topo { display: flex; align-items: center; gap: 10px; }
.carta-topo h3 { margin: 0 0 1px; }
.carta-nome { flex: 1; min-width: 0; }
.carta-nome .sutil { display: block; }

.selo {
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 6px;
  padding: 1px 8px; font-size: 12px; white-space: nowrap; font-family: Inter, system-ui, sans-serif;
}
.selo.chefe { border-color: var(--perigo); color: var(--perigo); }
.selo.ambiente { border-color: var(--acento); }
.selo.equipe { border-color: var(--acento); color: var(--acento-forte); }
.selo.dano-fisico { border-color: #b98a5a; color: #e2b98a; }
.selo.dano-magico { border-color: #6f8ee8; color: #a9c0ff; }
.tier { font-family: Inter, system-ui, sans-serif; font-size: 12px; color: var(--sutil); font-weight: 600; }

.passiva { background: var(--painel-2); border-left: 3px solid var(--ouro); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.painel .passiva { background: var(--painel-3); }
.dicas { margin: 0; padding-left: 18px; color: var(--sutil); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Retratos ---------- */
.retrato {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center;
  color: #fff; background: var(--painel-3); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
}
.retrato svg { width: 58%; height: 58%; }
.retrato.grande { width: 54px; height: 54px; }
.retrato.pequeno { width: 22px; height: 22px; vertical-align: middle; }
.retrato.r-for { background: radial-gradient(circle at 35% 30%, #c95a4f, var(--for)); }
.retrato.r-des { background: radial-gradient(circle at 35% 30%, #45b183, var(--des)); }
.retrato.r-int { background: radial-gradient(circle at 35% 30%, #5f86dc, var(--int)); }
.retrato.com-busto { overflow: hidden; align-items: end; }
.retrato.com-busto svg { width: 100%; height: 100%; }

/* Mini palco das cartas de treino */
.carta-treino { padding-top: 0; overflow: hidden; }
.palco-mini {
  position: relative; height: 112px; margin: 0 -14px; display: flex; align-items: flex-end; justify-content: flex-start;
  background: var(--cor-palco, #2a2438); border-bottom: 1px solid var(--borda); padding: 0 14px;
}
.palco-mini.r-for { --cor-palco: linear-gradient(160deg, #4a2428, #241418); }
.palco-mini.r-des { --cor-palco: linear-gradient(160deg, #1e4232, #121e18); }
.palco-mini.r-int { --cor-palco: linear-gradient(160deg, #24305a, #121630); }
.palco-mini .figura { height: 104px; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45)); }
.palco-mini-nome { align-self: center; margin-left: 8px; min-width: 0; }
.palco-mini-nome h3 { margin: 0; font-size: 18px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.palco-mini-nome span { color: #cfc6e0; font-size: 12.5px; }
.palco-mini .selo { position: absolute; top: 10px; right: 10px; background: rgba(14, 11, 20, 0.75); }

/* Palco do personagem (Taberna) */
.palco-personagem {
  position: relative; height: 200px; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(120px 90px at 50% 82%, rgba(255, 255, 255, 0.12), transparent 70%), var(--cor-palco, #2a2438);
  border: 1px solid var(--borda); overflow: hidden;
}
.palco-personagem.r-for { --cor-palco: linear-gradient(180deg, #3a1f22, #24161c); }
.palco-personagem.r-des { --cor-palco: linear-gradient(180deg, #1c3328, #141f1b); }
.palco-personagem.r-int { --cor-palco: linear-gradient(180deg, #1e2648, #141830); }
.palco-personagem::after {
  content: ''; position: absolute; bottom: 10px; left: 50%; width: 120px; height: 16px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(0, 0, 0, 0.45);
}
.palco-personagem .figura { position: relative; z-index: 1; height: 185px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.nivel-palco { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Armas e ativas */
.moldura-icone {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #3a3448, #1c1924); border: 1px solid var(--borda-forte);
}
.moldura-icone .icone-arma { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.icone-ativa { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.icone-ativa.grande { width: 46px; height: 46px; }
.campo.com-icone { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; }
.campo.com-icone label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.com-icone label > span { font-size: 13px; color: var(--sutil); }
.ponto-metal { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); vertical-align: middle; }

.ativas-heroi { display: flex; gap: 6px; margin-top: 2px; }
.ativa-slot { position: relative; width: 34px; height: 34px; border-radius: 8px; transition: filter 0.2s, transform 0.2s; }
.ativa-slot .icone-ativa { width: 100%; height: 100%; }
.recarga-veu {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: conic-gradient(rgba(8, 6, 14, 0.74) calc(var(--resto, 0) * 360deg), transparent 0);
}
.recarga-txt {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 2px #000;
}
.ativa-slot.pronta { filter: drop-shadow(0 0 4px rgba(255, 216, 106, 0.7)); }
.combatente.conjurando .ativa-slot.pronta { transform: scale(1.06); }

.retrato.inimigo-comum { background: radial-gradient(circle at 35% 30%, #6d5a6a, #45394a); }
.retrato.inimigo-chefe { background: radial-gradient(circle at 35% 30%, #d06a4a, #8a2f22); color: #ffe0a0; }
.retrato.inimigo-superChefe { background: radial-gradient(circle at 35% 30%, #f0a040, #9c2a18); color: #fff3c4; box-shadow: 0 0 12px rgba(240, 120, 60, 0.6); }

/* ---------- Botões ---------- */
.botao, .pilula {
  font: inherit; color: var(--texto); cursor: pointer; border: 1px solid var(--borda-forte);
  background: var(--painel-2); border-radius: 8px; padding: 8px 12px; touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s;
}
.botao:hover:not(:disabled), .pilula:hover:not(:disabled) { border-color: var(--acento); }
.botao small { display: block; color: var(--sutil); font-size: 12px; }
.botao.principal { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.botao.principal small { color: #e6e0ff; }
.botao.principal:hover:not(:disabled) { background: var(--acento-forte); }
.botao.perigo { color: var(--perigo); }
.botao.perigo.cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; font-weight: 600; }
.botao.perigo.cheio:hover:not(:disabled) { filter: brightness(1.1); border-color: var(--perigo); }
.botao.pequeno { padding: 4px 10px; font-size: 13px; }
.botao.pequeno small { display: inline; }
.botao.largo { width: 100%; }
.botao.grande { padding: 14px 18px; font-size: 16px; width: 100%; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.pilula { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.pilula.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.pilula.sutil { color: var(--sutil); }
.seletor { display: flex; flex-wrap: wrap; gap: 6px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pilha { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }

/* ---------- Treino ---------- */
.atributos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.atrib {
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px;
  padding: 6px 4px; text-align: center;
}
.painel .atrib { background: var(--painel-3); }
.atrib span { display: block; font-size: 11px; color: var(--sutil); letter-spacing: 0.08em; }
.atrib strong { font-size: 17px; }
.atrib small { display: block; font-size: 11px; color: var(--sutil); }
.atrib.ativo { border-color: var(--ouro); }
.atrib.ativo strong { color: var(--ouro); }

.pontos-treino {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
  background: rgba(240, 195, 90, 0.08); border: 1px solid rgba(240, 195, 90, 0.35); border-radius: 8px; padding: 6px 10px;
}
.pontos-treino span { font-size: 12px; color: var(--sutil); text-transform: uppercase; letter-spacing: 0.06em; }
.pontos-treino strong { grid-row: span 2; font-size: 24px; color: var(--ouro); font-family: Cinzel, Georgia, serif; }
.pontos-treino small { font-size: 12px; color: var(--sutil); }
.pontos-treino.esgotado { background: rgba(224, 101, 107, 0.08); border-color: rgba(224, 101, 107, 0.4); }
.pontos-treino.esgotado strong { color: var(--perigo); }
.barra.progresso { height: 16px; }
.barra.progresso .preenchimento { background: linear-gradient(90deg, #b8862a, var(--ouro)); }

/* Balcão de bebidas */
.balcao { display: flex; flex-direction: column; gap: 4px; }
.bebida { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.bebida:first-of-type { border-top: 0; }
.bebida.especial .moldura-icone { border-color: #8a6ad8; box-shadow: 0 0 10px rgba(143, 124, 242, 0.25); }
.bebida-texto { display: flex; flex-direction: column; min-width: 0; }
.bebida-texto small { font-size: 12px; }
.bebida-texto .devolve { color: var(--bom); }
.icone-bebida { width: 36px; height: 36px; }
.flutuante.ponto-ganho { color: #7cf0a8; font-size: 20px; font-family: Cinzel, Georgia, serif; animation: subir-critico 1.2s ease-out forwards; }

.botao-treino {
  font: inherit; font-weight: 700; font-size: 17px; color: #1c1408; cursor: pointer;
  background: linear-gradient(#f5cf72, #e0a93a); border: 0; border-radius: 12px;
  padding: 18px 12px; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  box-shadow: 0 4px 0 #9c7224, 0 6px 16px rgba(224, 169, 58, 0.18); transition: transform 0.05s, box-shadow 0.05s;
}
.botao-treino small { display: block; font-weight: 500; font-size: 13px; color: #4a3510; }
.botao-treino:hover:not(:disabled) { filter: brightness(1.05); }
.botao-treino:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #9c7224; }
.botao-treino:disabled { background: var(--painel-2); color: var(--sutil); box-shadow: none; }
.botao-treino:disabled small { color: var(--sutil); }

.estado-personagem { border-radius: 8px; padding: 14px; text-align: center; background: var(--painel-2); }
.estado-personagem.na-masmorra { border: 1px dashed var(--acento); }
.linha-entre { display: flex; justify-content: space-between; align-items: center; gap: 8px; }


/* ---------- Barras ---------- */
.barra {
  position: relative; height: 18px; background: #110f17; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--borda);
}
.barra .preenchimento { position: relative; height: 100%; transition: width 0.18s ease-out; }
.barra .rastro {
  position: absolute; inset: 0 auto 0 0; height: 100%; background: rgba(255, 236, 200, 0.55);
  transition: width 0.55s ease-in 0.25s;
}
.barra.mana .rastro, .barra.escudo .rastro { background: rgba(200, 225, 255, 0.4); }
.barra.instantaneo .preenchimento, .barra.instantaneo .rastro { transition: none; }
.barra span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; text-shadow: 0 1px 1px #000;
}
.barra.vida .preenchimento { background: linear-gradient(#e66a65, var(--vida)); }
.barra.vida-inimigo .preenchimento { background: linear-gradient(#d65a50, var(--vida-inimigo)); }
.barra.mana .preenchimento { background: linear-gradient(#6aa0f0, var(--mana)); }
.barra.escudo .preenchimento { background: linear-gradient(#4cc0dc, #2a8fae); }
.barra.exp { height: 12px; }
.barra.exp .preenchimento { background: linear-gradient(90deg, #7d5fd0, var(--exp)); }
.barra.exp span { font-size: 10px; }

/* ---------- Taberna ---------- */
.vagas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vaga {
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--texto);
  background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px; cursor: pointer; min-width: 0;
}
.vaga span { min-width: 0; }
.vaga small, .membro-elenco small, .membro-faixa small { display: block; color: var(--sutil); font-size: 12px; font-weight: 400; }
.vaga.vazia { justify-content: center; flex-direction: column; gap: 2px; border-style: dashed; color: var(--sutil); cursor: default; min-height: 76px; text-align: center; }
.vaga.selecionado, .membro-elenco.selecionado { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset; }
.elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.membro-elenco {
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--texto);
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; cursor: pointer; min-width: 0;
}
.membro-elenco > span:not(.retrato):not(.selo):not(.marca-selecao) { flex: 1; min-width: 0; }
.membro-elenco:hover, .vaga:not(.vazia):hover { border-color: var(--acento); }
.membro-elenco.na-equipe { background: var(--painel-3); }
.marca-selecao { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borda-forte); display: grid; place-items: center; color: var(--ouro); font-weight: 700; }
.membro-elenco.selecionado .marca-selecao { border-color: var(--ouro); }
.detalhe-personagem { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Loja e Ferreiro ---------- */
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.numeros div { background: var(--painel-2); border-radius: 8px; padding: 6px 8px; }
.painel .numeros div { background: var(--painel-3); }
.numeros strong { font-size: 18px; display: block; }
.numeros small { color: var(--sutil); font-size: 11px; }
.carta.arma-magico { border-top: 3px solid #6f8ee8; }
.carta.arma-fisico { border-top: 3px solid #b98a5a; }

.linha-arma {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 150px auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--borda);
}
.linha-arma:first-of-type { border-top: 0; }
.linha-arma-nome { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha-arma-dono { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* Inventário da Loja: uma linha por arma, com o botão de vender */
.lista-venda { display: flex; flex-direction: column; margin-bottom: 8px; max-height: 420px; overflow-y: auto; }
.linha-venda { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--borda); }
.linha-venda:first-child { border-top: 0; }
.linha-venda .moldura-icone { width: 40px; height: 40px; }
.linha-venda .moldura-icone .icone-arma { width: 30px; height: 30px; }
.linha-venda-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linha-venda-nome strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.melhoria-arma { color: var(--ouro); }

.opcao-avancada p { color: var(--sutil); }

/* ---------- Masmorra ---------- */
/* Palco: cenário do ambiente ao fundo, figuras em pé, barras compactas embaixo de cada uma. */
.campo-batalha {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 16px;
  background: #141018; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.cenario-batalha { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.campo-batalha::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 16, 0.6) 0%, transparent 28%, transparent 70%, rgba(10, 8, 16, 0.4) 100%);
}
.cabecalho-andar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cabecalho-andar h2 { margin: 0; font-size: 26px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.cabecalho-andar .selo { background: rgba(14, 11, 20, 0.8); }
.arena {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end;
  gap: 8px; margin-top: 10px; min-height: 290px;
}
.lado { display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-width: 0; }
.versus {
  align-self: center; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 20px; color: var(--ouro);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 8, 16, 0.7); border: 1px solid rgba(240, 195, 90, 0.45); box-shadow: 0 0 18px rgba(240, 195, 90, 0.2);
}

/* As unidades encolhem juntas em vez de quebrar a linha (3 heróis sempre lado a lado). */
.combatente { flex: 0 1 132px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.combatente.tipo-chefe { flex-basis: 168px; }
.combatente.tipo-superChefe { flex-basis: 210px; }
.unidade-figura {
  width: 100%; height: 122px; display: flex; align-items: flex-end; justify-content: center;
  transition: transform 0.5s, opacity 0.5s, filter 0.5s; transform-origin: 50% 100%;
}
.tipo-chefe .unidade-figura { height: 156px; }
.tipo-superChefe .unidade-figura { height: 192px; }
.unidade-figura .figura {
  height: 100%; width: auto; transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); transition: filter 0.3s;
  animation: respirar-figura 2.8s ease-in-out infinite; animation-delay: var(--atraso, 0ms);
}
.combatente-corpo {
  width: 100%; display: flex; flex-direction: column; gap: 4px;
  background: rgba(14, 11, 20, 0.84); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 7px;
  transition: border-color 0.3s, opacity 0.5s;
}
.tipo-chefe .combatente-corpo, .tipo-superChefe .combatente-corpo { border-color: var(--perigo); box-shadow: 0 0 16px rgba(224, 101, 107, 0.25); }
.combatente .linha { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.combatente .linha strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.combatente .linha > span { white-space: nowrap; flex-shrink: 0; }
.combatente .barra { height: 12px; }
.combatente .barra span { font-size: 9.5px; }
.combatente .ativa-slot { width: 28px; height: 28px; }
.combatente .recarga-txt { font-size: 11px; }

/* "backwards": segura o início durante o atraso, mas não prende o estado final (o "caído" precisa mudar). */
.combatente.inimigo { animation: surgir-inimigo 0.45s ease-out backwards; animation-delay: var(--atraso, 0ms); }
.combatente.inimigo.tipo-chefe, .combatente.inimigo.tipo-superChefe { animation-name: surgir-chefe; animation-duration: 0.7s; }
/* Golpes animam o conteúdo, não a unidade: a unidade do inimigo já usa a animação de entrada. */
.combatente.atingido > * { animation: tremer 0.3s ease-out; }
.combatente.atingido-forte > * { animation: tremer-forte 0.32s ease-out; }
.combatente.atingido .figura, .combatente.atingido-forte .figura { filter: brightness(1.8) drop-shadow(0 0 6px #ff6a5a); }
.combatente.atingido-forte .combatente-corpo { border-color: var(--ouro); }
.combatente.curado .figura { filter: drop-shadow(0 0 12px #5cc28a) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); }
.combatente.esquivou > * { animation: esquivar 0.38s ease-out; }
.combatente.conjurando .figura { filter: drop-shadow(0 0 14px #a796ff) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); }
.combatente.conjurando .combatente-corpo { border-color: var(--acento-forte); }
.combatente.caido .unidade-figura { transform: rotate(-14deg) translateY(12px); opacity: 0.35; filter: grayscale(1); }
.combatente.caido .figura { animation-play-state: paused; }
.combatente.caido .combatente-corpo { opacity: 0.55; }
.campo-batalha.tremor { animation: tremor-tela 0.7s ease-out; }
.campo-batalha .cabecalho-andar h2 { animation: surgir-titulo 0.4s ease-out; }
.campo-batalha.andar-chefe .selo.chefe, .campo-batalha.andar-superChefe .selo.chefe { animation: piscar-selo 1.2s ease-in-out 3; }
@keyframes respirar-figura { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 0.985) translateY(1px); } }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--borda);
  background: var(--painel); white-space: nowrap;
}
.chip.pronta { border-color: var(--bom); }
.chip.recarga { color: var(--sutil); }
.chip.efeito { border-color: var(--ouro); color: var(--ouro); }
.aviso-base { padding: 8px 12px; border: 1px dashed var(--acento); border-radius: 8px; font-size: 13px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
.stats.uma-coluna { grid-template-columns: 1fr; }
.stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--borda); padding: 3px 0; }
.stats dt { color: var(--sutil); }
.stats dd { margin: 0; font-weight: 600; text-align: right; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.campo > span { font-size: 13px; color: var(--sutil); }
select {
  font: inherit; color: var(--texto); background: var(--painel-2); border: 1px solid var(--borda-forte);
  border-radius: 8px; padding: 7px 10px; max-width: 100%;
}
.painel select { background: var(--painel-3); }

.log { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; font-size: 13px; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--borda); }
.log-derrota { color: var(--perigo); }
.log-chefe, .log-superChefe { color: var(--ouro); }
.log-nivel { color: var(--bom); }
.log-ambiente { color: var(--acento-forte); }

.melhoria {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-top: 1px solid var(--borda); padding: 10px 0;
}
.melhoria:first-of-type { border-top: 0; padding-top: 0; }
.melhoria:last-child { padding-bottom: 0; }
.melhoria .botao { flex-shrink: 0; }

/* ---------- Cidade ---------- */
.mapa {
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  background: #141026; line-height: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.cena-cidade { width: 100%; height: auto; display: block; }
.cena-cidade .local { cursor: pointer; outline: none; }
.cena-cidade .local .arte { transition: filter 0.15s; }
.cena-cidade .local:hover .arte,
.cena-cidade .local:focus-visible .arte { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 214, 130, 0.55)); }
.cena-cidade .placa rect { fill: rgba(16, 12, 24, 0.86); stroke: #6b5a85; stroke-width: 1.5; transition: stroke 0.15s; }
.cena-cidade .local:hover .placa rect,
.cena-cidade .local:focus-visible .placa rect { stroke: var(--ouro); stroke-width: 2.5; }
.cena-cidade .placa-nome { fill: #f3e3b5; font: 700 17px Cinzel, Georgia, serif; text-anchor: middle; }
.cena-cidade .placa-status { fill: #c9bfdc; font: 500 13px Inter, system-ui, sans-serif; text-anchor: middle; }
.legenda-mapa { text-align: center; color: var(--sutil); font-size: 13px; margin: 8px 0 14px; }

.faixa-equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.membro-faixa {
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda); border-left: 3px solid var(--sutil); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.membro-faixa span { min-width: 0; }
.membro-faixa strong small { display: inline; }
.membro-faixa.treino { border-left-color: var(--ouro); }
.membro-faixa.masmorra { border-left-color: var(--bom); }
.membro-faixa.parado { border-left-color: var(--perigo); }
.membro-faixa:hover { border-color: var(--acento); }

.lista-locais { display: none; }
.local-lista {
  font: inherit; color: var(--texto); text-align: left; cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px;
}
.local-lista small { display: block; color: var(--sutil); font-size: 12px; }
.local-lista:hover { border-color: var(--acento); }

/* Animações da arte (mapa e banners) */
.arte-svg .fumaca { fill: #9a94a6; opacity: 0; animation: fumaca 3.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.arte-svg .fumaca.f2 { animation-delay: 1.2s; }
.arte-svg .fumaca.f3 { animation-delay: 2.4s; }
.arte-svg .chama { animation: chama 0.35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.arte-svg .brilho { animation: pulsar 2.4s ease-in-out infinite; }
.arte-svg .olho { animation: pulsar 1.8s ease-in-out infinite; }
.arte-svg .estrela { animation: pulsar 3s ease-in-out infinite; }
.arte-svg .estrela.e1 { animation-delay: 1s; }
.arte-svg .estrela.e2 { animation-delay: 2s; }
@keyframes fumaca {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(10px, -46px) scale(1.6); }
}
@keyframes chama { from { transform: scale(0.9, 0.85); } to { transform: scale(1.08, 1.12); } }
@keyframes pulsar { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .arte-svg * { animation: none !important; }
}

/* ---------- Efeitos passageiros (camada fixa) ---------- */
.camada-efeitos { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }

.flutuante {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  color: var(--ouro); font-weight: 700; font-size: 16px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.6);
  animation: subir 0.9s ease-out forwards;
}
.flutuante.dano { animation: subir-dano 0.95s ease-out forwards; font-size: 15px; }
.flutuante.dano.fisico { color: #fff1e0; }
.flutuante.dano.magico { color: #b9c8ff; }
.flutuante.dano.em-heroi { color: #ff8a80; font-size: 14px; }
.flutuante.dano.critico { font-size: 23px; color: #ffd24a; animation: subir-critico 1.05s ease-out forwards; }
.flutuante.cura { color: #7cf0a8; }
.flutuante.esquiva { color: #cfd6e6; font-size: 13px; font-style: italic; }
.flutuante.ativa {
  font-family: Cinzel, Georgia, serif; font-size: 14px; color: #e3dcff;
  background: rgba(60, 44, 120, 0.85); border: 1px solid var(--acento); border-radius: 999px; padding: 2px 10px;
  animation: subir-ativa 1.1s ease-out forwards;
}
.flutuante.derrotado { color: #c9bfdc; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.flutuante.treino { font-size: 18px; }
.flutuante.ouro-ganho { color: var(--ouro); font-size: 14px; animation: descer-ouro 1.1s ease-out forwards; }
.flutuante.ouro-gasto { color: var(--perigo); font-size: 14px; animation: descer-ouro 1.1s ease-out forwards; }

.faisca {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #ffd98a; box-shadow: 0 0 6px #ffb347; animation: faisca 0.6s ease-out forwards;
}

.anuncio {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 34px; color: #f3e3b5;
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(240, 195, 90, 0.5);
  animation: anuncio 1.5s ease-out forwards;
}
.anuncio.chefe { color: #ff9a7a; font-size: 38px; text-shadow: 0 2px 0 #000, 0 0 28px rgba(224, 101, 107, 0.7); }
.anuncio.superChefe { color: #ffb347; font-size: 44px; text-shadow: 0 2px 0 #000, 0 0 36px rgba(255, 120, 40, 0.9); animation-duration: 2s; }

.celebracao {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: linear-gradient(180deg, #3b2f14, #241c0c); border: 1px solid var(--ouro); border-radius: 999px;
  padding: 8px 20px; color: #ffe29a; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 16px;
  box-shadow: 0 0 24px rgba(240, 195, 90, 0.45); animation: celebrar 2.8s ease-out forwards;
}

#tela.entrando { animation: entrar-tela 0.32s ease-out; }
.fundo-modal { animation: aparecer 0.18s ease-out; }
.caixa-modal { animation: surgir-caixa 0.25s ease-out; }
.aviso.visivel { animation: balancar-aviso 0.4s ease-out; }

/* Cidade viva */
.arte-svg .agua { stroke-dasharray: 7 6; animation: agua 0.9s linear infinite; opacity: 0.85; }
@keyframes agua { to { stroke-dashoffset: -26; } }
.arte-svg .bandeira { animation: tremular 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0% 50%; }
.arte-svg .morcego .asa { animation: bater-asas 0.28s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.arte-svg .aura-portao { opacity: 0; transition: opacity 0.6s; }
.cena-cidade.expedicao-ativa .aura-portao { animation: aura 2.2s ease-in-out infinite; }
.cena-cidade.expedicao-ativa .olho { animation-duration: 0.9s; fill: #ff6a4c; }
.cena-cidade .local:hover .arte { transform: translateY(-3px); }
.cena-cidade .local .arte { transition: filter 0.15s, transform 0.2s ease-out; }

@keyframes subir { from { opacity: 1; transform: translate(-50%, -100%); } to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 50px)); } }
@keyframes subir-dano {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -260%) scale(0.9); }
}
@keyframes subir-critico {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.5) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -120%) scale(1.35) rotate(3deg); }
  35% { transform: translate(-50%, -140%) scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -280%) scale(1); }
}
@keyframes subir-ativa {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
  75% { opacity: 1; transform: translate(-50%, -150%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
@keyframes descer-ouro {
  0% { opacity: 0; transform: translate(-50%, -20%); }
  20% { opacity: 1; transform: translate(-50%, 10%); }
  100% { opacity: 0; transform: translate(-50%, 90%); }
}
@keyframes faisca { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.3); } }
@keyframes anuncio {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); letter-spacing: 0.3em; }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); letter-spacing: 0.04em; }
  30% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}
@keyframes celebrar {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.8); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
  20% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
@keyframes tremer { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes tremer-forte { 0%, 100% { transform: translate(0, 0) scale(1); } 20% { transform: translate(-7px, 1px) scale(1.02); } 45% { transform: translate(6px, -1px); } 70% { transform: translate(-3px, 0); } }
@keyframes esquivar { 0%, 100% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(14px) skewX(-6deg); opacity: 0.6; } }
@keyframes conjurar { 0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(167, 150, 255, 0.5), 0 0 22px var(--acento); } 100% { transform: scale(1); } }
@keyframes tremor-tela { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-6px, 3px); } 20% { transform: translate(6px, -3px); } 30% { transform: translate(-5px, 2px); } 45% { transform: translate(4px, -2px); } 60% { transform: translate(-2px, 1px); } }
@keyframes surgir-inimigo { from { opacity: 0; transform: translateX(24px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes surgir-chefe { 0% { opacity: 0; transform: scale(1.25); filter: brightness(2); } 60% { opacity: 1; transform: scale(0.98); } 100% { transform: none; filter: none; } }
@keyframes surgir-titulo { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes piscar-selo { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 14px rgba(224, 101, 107, 0.8); } }
@keyframes entrar-tela { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes surgir-caixa { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes balancar-aviso { 0% { transform: translate(-50%, 20px); } 60% { transform: translate(-50%, -4px); } 100% { transform: translate(-50%, 0); } }
@keyframes tremular { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(0.82) skewY(6deg); } }
@keyframes bater-asas { from { transform: scaleY(1); } to { transform: scaleY(-0.6); } }
@keyframes aura { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.28; } }

/* ---------- Efeitos das ativas ---------- */
/* Gestos do herói ao usar a ativa */
.combatente.avancando .figura { animation: avancar 0.45s ease-out; }
.combatente.disparando .figura { animation: recuar-disparo 0.3s ease-out; }
.combatente.girando .figura { animation: girar-figura 0.5s ease-in-out; }
@keyframes avancar { 0%, 100% { transform: none; } 35% { transform: translateX(26px) rotate(5deg); } }
@keyframes recuar-disparo { 0%, 100% { transform: none; } 30% { transform: translateX(-7px) rotate(-3deg); } }
@keyframes girar-figura { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(-1); } }

/* Efeito do tamanho da figura, centrado nela (--tam = altura da figura). */
.fx {
  position: absolute; width: var(--tam); height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2); animation: fx-vida 0.6s linear forwards;
}
.fx::before, .fx::after, .fx i { content: ''; position: absolute; display: block; }
@keyframes fx-vida { to { opacity: 1; } }

/* Cortes: arco branco que varre o alvo; o forte cruza dois arcos. */
.fx-corte::before, .fx-corte-forte::before, .fx-corte-forte::after, .fx-esmagar::before {
  inset: 14%; border-radius: 50%; border-top: 4px solid #fff; opacity: 0;
  filter: drop-shadow(0 0 6px #ffd98a); animation: fx-cortar 0.4s ease-out forwards;
}
.fx-corte-forte::before, .fx-esmagar::before { inset: 4%; border-top: 7px solid #fff3c4; filter: drop-shadow(0 0 10px #ffb347); }
.fx-corte-forte::after { inset: 18%; border-top-color: #ffb347; --g: 150deg; animation-delay: 0.08s; }
@keyframes fx-cortar {
  0% { opacity: 0; transform: rotate(calc(var(--g, 0deg) - 80deg)) scale(0.8); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--g, 0deg) + 50deg)) scale(1.05); }
}
.fx-esmagar::after, .fx-grito::before, .fx-grito::after, .fx-explosao::after {
  inset: 0; border-radius: 50%; border: 3px solid #ffb347; opacity: 0; animation: fx-onda 0.55s ease-out 0.05s forwards;
}
@keyframes fx-onda { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.35); } }

/* Redemoinho: anel tracejado girando em volta do herói. */
.fx-giro::before {
  inset: -10%; border-radius: 50%; border: 3px dashed #e3e9f0; opacity: 0;
  filter: drop-shadow(0 0 6px #fff); animation: fx-girar 0.55s ease-out forwards;
}
@keyframes fx-girar { 0% { opacity: 0; transform: rotate(0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(540deg) scale(1.15); } }

/* Acerto e dreno: clarão redondo. */
.fx-acerto::before, .fx-dreno::before, .fx-explosao::before, .fx-raio::after {
  inset: 25%; border-radius: 50%; opacity: 0; animation: fx-clarao 0.35s ease-out forwards;
  background: radial-gradient(circle, #fff 0, #ffd98a 30%, rgba(255, 179, 71, 0) 65%);
}
.fx-dreno::before { background: radial-gradient(circle, #f3d8ff 0, #b05ae0 35%, rgba(120, 40, 160, 0) 65%); }
.fx-explosao::before { inset: 0; animation-duration: 0.5s; background: radial-gradient(circle, #fff6c8 0, #ffb347 30%, #e0452b 55%, rgba(224, 69, 43, 0) 70%); }
.fx-explosao::after { border-color: #ff7a3a; }
@keyframes fx-clarao { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* Chuva de flechas: flechas caindo sobre o alvo. */
.fx-chuva { animation-duration: 1s; }
.fx-chuva i {
  width: 3px; height: 30%; left: calc(12% + var(--i) / var(--n) * 76%); top: -70%; opacity: 0;
  background: linear-gradient(#e8e0c8, #8a5a2e 80%, #d6dee8 80%);
  animation: fx-cair 0.45s ease-in forwards; animation-delay: calc(var(--i) * 60ms + var(--r) * 90ms);
}
@keyframes fx-cair { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--tam) * 1.05)); } }

/* Mira (Ponto Fraco) e Marca do Caçador: círculo com cruz que fecha sobre o alvo. */
.fx-mira::before, .fx-marca::before {
  inset: 18%; border-radius: 50%; border: 2px solid #f0c35a; opacity: 0;
  background: linear-gradient(#f0c35a, #f0c35a) center / 2px 100% no-repeat, linear-gradient(#f0c35a, #f0c35a) center / 100% 2px no-repeat;
  animation: fx-mirar 0.5s ease-out forwards;
}
.fx-marca { animation-duration: 1.3s; }
.fx-marca::before { border-color: #e0656b; background-image: linear-gradient(#e0656b, #e0656b), linear-gradient(#e0656b, #e0656b); animation: fx-mirar 0.5s ease-out, fx-piscar 0.8s ease-in-out 0.5s forwards; }
@keyframes fx-mirar { 0% { opacity: 0; transform: scale(1.8) rotate(-45deg); } 60% { opacity: 1; transform: scale(0.9) rotate(0); } 100% { opacity: 0; transform: scale(1); } }
@keyframes fx-piscar { 0%, 50% { opacity: 1; } 25%, 100% { opacity: 0.2; } }

/* Veneno: nuvem verde e bolhas subindo. */
.fx-veneno { animation-duration: 1.2s; }
.fx-veneno::before {
  inset: 20%; border-radius: 50%; opacity: 0; animation: fx-clarao 0.7s ease-out forwards;
  background: radial-gradient(circle, rgba(125, 255, 120, 0.7), rgba(60, 160, 60, 0) 70%);
}
.fx-veneno i {
  width: 9%; aspect-ratio: 1; border-radius: 50%; left: calc(20% + var(--r) * 60%); bottom: 25%; opacity: 0;
  background: #7dff78; box-shadow: 0 0 6px #5cc25a; animation: fx-bolha 0.8s ease-out forwards; animation-delay: calc(var(--i) * 70ms);
}
@keyframes fx-bolha { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--tam) * -0.45)) scale(1.1); } }

/* Grito de Guerra: ondas vermelhas saindo de cada aliado. */
.fx-grito { animation-duration: 0.8s; }
.fx-grito::before { border-color: #ff6a4c; }
.fx-grito::after { border-color: #ffb347; animation-delay: 0.18s; }

/* Muralha e Barreira: bolha protetora. */
.fx-muralha, .fx-barreira { animation-duration: 1.1s; }
.fx-muralha::before, .fx-barreira::before {
  inset: -4%; border-radius: 50% 50% 44% 44%; opacity: 0; animation: fx-bolha-escudo 1.1s ease-out forwards;
  border: 3px solid #d4a73a; background: radial-gradient(circle, rgba(240, 195, 90, 0) 50%, rgba(240, 195, 90, 0.35));
  box-shadow: 0 0 16px rgba(240, 195, 90, 0.5);
}
.fx-barreira::before {
  border-color: #6fb8ff; background: radial-gradient(circle, rgba(111, 184, 255, 0) 45%, rgba(111, 184, 255, 0.4));
  box-shadow: 0 0 18px rgba(111, 184, 255, 0.6);
}
@keyframes fx-bolha-escudo { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; transform: scale(1.06); } 40% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* Cura e Segundo Fôlego: brilho verde e cruzes subindo. */
.fx-cura { animation-duration: 1.4s; }
.fx-cura::before {
  inset: 0 10%; opacity: 0; animation: fx-clarao 0.9s ease-out forwards;
  background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(92, 194, 138, 0.6), rgba(92, 194, 138, 0));
}
.fx-cura i { left: calc(18% + var(--r) * 64%); bottom: 20%; opacity: 0; animation: fx-bolha 0.9s ease-out forwards; animation-delay: calc(var(--i) * 90ms); }
.fx-cura i::before { content: '+'; color: #7dffa0; font-weight: 800; font-size: calc(var(--tam) * 0.18); text-shadow: 0 0 6px #2e8a52; }

/* Frenesi: riscos amarelos de velocidade. */
.fx-frenesi { animation-duration: 0.9s; }
.fx-frenesi i {
  width: 2px; height: 34%; left: calc(14% + var(--i) / var(--n) * 72%); bottom: 10%; opacity: 0;
  background: linear-gradient(to top, rgba(255, 216, 106, 0), #ffd86a); animation: fx-bolha 0.6s ease-out forwards;
  animation-delay: calc(var(--r) * 250ms);
}

/* Passo Sombrio: fumaça roxa. */
.fx-sombra { animation-duration: 1s; }
.fx-sombra::before, .fx-sombra::after {
  inset: 10%; border-radius: 50%; opacity: 0; animation: fx-clarao 0.8s ease-out forwards;
  background: radial-gradient(circle, rgba(90, 60, 130, 0.85), rgba(40, 20, 60, 0) 70%);
}
.fx-sombra::after { inset: 25% 0 0 30%; animation-delay: 0.12s; }

/* Raio: descarga em zigue-zague caindo do alto sobre o alvo. */
.fx-raio::before {
  left: 35%; width: 30%; bottom: 50%; height: calc(var(--tam) * 2.2); opacity: 0;
  background: linear-gradient(#fff, #bfe6ff);
  clip-path: polygon(45% 0, 70% 0, 52% 38%, 78% 38%, 30% 100%, 44% 55%, 20% 55%);
  filter: drop-shadow(0 0 8px #6fb8ff); animation: fx-relampago 0.4s linear forwards;
}
.fx-raio::after { background: radial-gradient(circle, #fff 0, #bfe6ff 30%, rgba(111, 184, 255, 0) 65%); }
@keyframes fx-relampago { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: 0.3; } 100% { opacity: 0; } }

/* Magia Milenar: círculo arcano girando sobre cada inimigo. */
.fx-arcano { animation-duration: 0.9s; }
.fx-arcano::before, .fx-arcano::after {
  inset: 2%; border-radius: 50%; border: 3px dashed #c9a8ff; opacity: 0;
  filter: drop-shadow(0 0 8px #8f7cf2); animation: fx-girar 0.85s ease-out forwards;
}
.fx-arcano::after { inset: 22%; border-style: solid; border-width: 2px; animation-direction: reverse; }

/* Projéteis: o nó voa (Web Animations); o desenho fica no ::before. */
.projetil { position: absolute; left: 0; top: 0; }
.projetil::before { content: ''; position: absolute; display: block; }
.projetil.flecha::before {
  width: 28px; height: 3px; margin: -1.5px 0 0 -14px;
  background: linear-gradient(90deg, #e8e0c8 0 18%, #8a5a2e 18% 82%, #d6dee8 82%);
}
.projetil.fogo::before, .projetil.veneno::before, .projetil.dreno::before, .projetil.vida::before {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8 0, #ffb347 40%, #e0452b 70%, rgba(224, 69, 43, 0) 72%);
  box-shadow: 0 0 14px #ff7a3a;
}
.projetil.veneno::before { background: radial-gradient(circle, #e8ffe0 0, #7dff78 40%, #2e8a2e 70%, rgba(0, 0, 0, 0) 72%); box-shadow: 0 0 12px #5cc25a; }
.projetil.dreno::before { background: radial-gradient(circle, #f3d8ff 0, #b05ae0 45%, #5a1f7a 70%, rgba(0, 0, 0, 0) 72%); box-shadow: 0 0 12px #b05ae0; }
.projetil.vida::before { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle, #e8fff0 0, #5cc28a 50%, rgba(0, 0, 0, 0) 72%); box-shadow: 0 0 10px #5cc28a; }

@media (prefers-reduced-motion: reduce) {
  .camada-efeitos .faisca, .camada-efeitos .anuncio, .camada-efeitos .fx, .camada-efeitos .projetil { display: none; }
  .flutuante, .celebracao { animation-duration: 0.01s !important; animation-delay: 0.8s !important; }
  .combatente, .combatente *, #tela, .caixa-modal, .fundo-modal, .botao-treino, .campo-batalha, .campo-batalha * { animation: none !important; }
  .barra .preenchimento, .barra .rastro { transition: none; }
}

/* ---------- Aviso e modal ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 16px;
  transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 60; max-width: calc(100% - 32px);
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
.aviso.erro { border-color: var(--perigo); }

.fundo-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex;
  align-items: center; justify-content: center; padding: 16px; z-index: 40;
}
.caixa-modal {
  background: var(--painel); border: 1px solid var(--ouro); border-radius: var(--raio);
  padding: 20px; max-width: 440px; width: 100%;
}
.caixa-modal h2 { margin-bottom: 8px; }
.caixa-modal ul { padding-left: 20px; }
.caixa-modal.menu { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
/* Importar: o input de arquivo fica dentro do rótulo, invisível mas alcançável pelo teclado */
.caixa-modal.menu label.botao { position: relative; text-align: center; }
.caixa-modal.menu label.botao:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.caixa-modal.menu label.botao input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Título de painel com o seletor de quantidade de compra ao lado */
.titulo-painel { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.titulo-painel h3 { margin: 0; }
.seletor-qtd { display: flex; gap: 4px; }
.seletor-qtd .pilula { padding: 2px 9px; font-size: 12px; }

/* Ativas: cartão do slot e lista de escolha */
.slot-ativa {
  font: inherit; color: var(--texto); text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--painel-3); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px;
  transition: border-color 0.12s, background 0.12s;
}
.slot-ativa:hover:not(:disabled) { border-color: var(--acento); }
.slot-ativa:disabled { cursor: default; opacity: 0.7; }
.slot-ativa-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.slot-ativa-texto small { color: var(--sutil); font-size: 12px; }
.slot-ativa-texto strong { font-size: 15px; }
.slot-ativa-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.slot-ativa .trocar { color: var(--acento); font-size: 12px; font-weight: 600; }
.etiqueta {
  font-size: 11px; border-radius: 999px; padding: 1px 7px; border: 1px solid var(--borda-forte);
  color: var(--sutil); white-space: nowrap;
}
.etiqueta.mana { color: #8fb8ff; border-color: #3d5a8a; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.caixa-modal.escolha-ativas { max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; }
.grupo-ativas { margin: 14px 0 8px; font-size: 14px; }
.grupo-ativas small { color: var(--ouro); font-weight: 400; font-size: 12px; margin-left: 6px; }
.grupo-ativas.g-for { color: #f0a080; }
.grupo-ativas.g-des { color: #9be0a0; }
.grupo-ativas.g-int { color: #a8b8ff; }
.grade-ativas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.opcao-ativa {
  font: inherit; color: var(--texto); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start;
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px;
  transition: border-color 0.12s, background 0.12s;
}
.opcao-ativa:hover { border-color: var(--acento); background: var(--painel-3); }
.opcao-ativa.atual { border-color: var(--ouro); background: var(--painel-3); }
.opcao-ativa-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcao-ativa-texto small { color: var(--sutil); font-size: 12px; }
.opcao-ativa .selo { font-size: 11px; }

.caixa-modal.confirmacao { max-width: 380px; }
.caixa-modal.confirmacao.perigo { border-color: var(--perigo); }
.caixa-modal.confirmacao p { color: var(--sutil); margin-bottom: 16px; }
.acoes-modal { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- Telas menores ---------- */
@media (max-width: 1000px) {
  .layout-lateral, .layout-lateral.largo { grid-template-columns: 1fr; }
  .lateral { position: static; }
}

@media (max-width: 720px) {
  .lista-locais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .faixa-equipe { grid-template-columns: 1fr; }
  .banner-local { grid-template-columns: 96px 1fr; gap: 12px; padding: 12px; }
  .banner-arte { height: 84px; }
  .banner-texto h2 { font-size: 20px; }
  .banner-texto p { font-size: 13px; }
  .vagas { grid-template-columns: 1fr; }
  .linha-arma { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .linha-arma-dono { grid-column: 2; }
}

@media (max-width: 640px) {
  .arena { grid-template-columns: 1fr; min-height: 0; gap: 4px; }
  .versus { justify-self: center; width: 36px; height: 36px; font-size: 15px; }
  .lado { gap: 6px; }
  .combatente { flex-basis: 120px; }
  .combatente.tipo-chefe, .combatente.tipo-superChefe { flex-basis: 70%; }
  .unidade-figura { height: 92px; }
  .tipo-chefe .unidade-figura, .tipo-superChefe .unidade-figura { height: 140px; }
  .grade { grid-template-columns: 1fr; }
  h1 { font-size: 18px; }
  .topo { position: static; }
}