@font-face { font-family: 'system-pixel'; src: local('Consolas'); }

/* ---- Paleta centralizada (melhoria visual/UX aditiva — task "UX Combat"):
   nomes pra cores que já existiam espalhadas pelo CSS (mesmos valores hex
   já usados em #modal-conteudo, .card, bordas e destaque dourado), usados
   só nas regras NOVAS abaixo (painel de contexto de batalha, terrenos,
   profundidade da arena). Não repinta nenhum elemento já existente. ---- */
:root {
  --hda-bg: #1a1420;
  --hda-panel: #201811;
  --hda-panel-2: #2b2118;
  --hda-line: #4a3a26;
  --hda-gold: #f5a524;
  --hda-text: #f1e9d8;
  --hda-muted: #c8b89a;
  --hda-radius: 6px;

  /* Fundação visual canônica. Os aliases mantêm os valores já usados pelo
     jogo e permitem que HUD, entrada e painéis evoluam sem criar novas
     medidas ou famílias tipográficas a cada tela. */
  --hda-font-body: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --hda-font-display: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --hda-font-mono: 'system-pixel', Consolas, 'Courier New', monospace;
  --hda-text-caption: .65rem;
  --hda-text-xs: .72rem;
  --hda-text-sm: .8rem;
  --hda-text-body: 1rem;
  --hda-text-subtitle: 1.1rem;
  --hda-text-title: 1.35rem;
  --hda-text-heading: 1.8rem;
  --hda-text-display: clamp(1.6rem, 3vw, 2.4rem);
  --hda-leading-tight: 1.15;
  --hda-leading-body: 1.45;
  --hda-space-1: 2px;
  --hda-space-2: 4px;
  --hda-space-3: 6px;
  --hda-space-4: 8px;
  --hda-space-5: 10px;
  --hda-space-6: 12px;
  --hda-space-7: 14px;
  --hda-space-8: 16px;
  --hda-space-10: 20px;
  --hda-space-12: 24px;
  --hda-space-14: 28px;
  --hda-radius-xs: 2px;
  --hda-radius-sm: 4px;
  --hda-radius-md: 6px;
  --hda-radius-lg: 8px;
  --hda-radius-xl: 10px;
  --hda-radius-2xl: 12px;
  --hda-radius-3xl: 16px;
  --hda-radius-panel: 20px;
  --hda-radius-pill: 999px;

  /* Escala global de empilhamento. Componentes internos ainda podem usar
     z-index locais, mas superfícies de tela inteira devem ocupar uma destas
     faixas para não atravessarem modal, cutscene ou controles móveis. */
  --hda-layer-world: 0;
  --hda-layer-ambient: 2;
  --hda-layer-effects: 5;
  --hda-layer-dice-local: 9;
  --hda-layer-hud: 10;
  --hda-layer-controls: 12;
  --hda-layer-message: 15;
  --hda-layer-screen: 20;
  --hda-layer-navigation: 40;
  --hda-layer-modal: 50;
  --hda-layer-sheet-backdrop: 59;
  --hda-layer-sheet: 60;
  --hda-layer-cutscene: 90;
  --hda-layer-tutorial: 110;
  --hda-layer-reward: 1400;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: #0f0c0d; height: 100%; width: 100%;
  font-family: var(--hda-font-body); overflow: hidden; color: #f1e9d8;
  overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none;
}

/* ---- TELA CHEIA (mobile) -------------------------------------------------
   `100vh` no celular é a altura da janela COM a barra de endereço recolhida —
   um estado em que o navegador nem sempre está. O resultado era a última
   faixa do jogo escondida atrás da barra. `100dvh` é a altura visível AGORA e
   acompanha a barra aparecendo e sumindo; `100vh` fica antes como reserva
   para navegador antigo, que simplesmente ignora a linha seguinte. --------- */
html, body { height: 100vh; height: 100dvh; }

#app {
  position: relative;
  width: 100vw; width: 100dvw;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: #0f0c0d; touch-action: none;
  overflow: hidden;
}

/* O canvas OCUPA a viewport inteira, em vez de ser uma caixa de 960x640 que o
   navegador encolhia até caber. Num celular em pé de 390x844 o jogo era uma
   faixa de 390x260 com 580px de barra preta — e borrada, porque quem reduzia
   era o navegador, em cima de um canvas de 960px. Agora quem decide a escala
   é o Renderer (src/render/Renderer.js): ele dimensiona a memória do canvas
   em pixels reais do aparelho e escolhe o tamanho do tile.
   A moldura saiu: numa tela de 5 polegadas, 8px de borda são 8px de jogo. */
#game-canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #1a2a1a;
  display: block;
  width: 100%; height: 100%;
  border: 0;
  touch-action: none;
}

.hidden { display: none !important; }

.tela {
  position: absolute; inset: 0; z-index: var(--hda-layer-screen);
  background: linear-gradient(180deg, #1c1712 0%, #241b14 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
}

.tela h1 {
  font-family: var(--hda-font-display); font-size: 2.4em; color: #f5a524; text-shadow: 3px 3px 0 #4a2e0a; margin-bottom: var(--hda-space-2);
  letter-spacing: 1px;
}
.subtitulo { color: #c8b89a; margin-bottom: 24px; font-style: italic; }

button {
  font-family: inherit; font-size: 1em; padding: 10px 18px; margin: 6px;
  background: #3d2f1f; color: #f1e9d8; border: 2px solid #7a5c34;
  border-radius: 4px; cursor: pointer; transition: background 0.15s, transform 0.08s;
}
button:hover { background: #5a4327; transform: translateY(-1px); }
button:active { transform: translateY(0px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primario { background: #7a3b1e; border-color: #c8622f; }
button.primario:hover { background: #9c4c26; }
button.perigo { background: #6e2020; border-color: #b03a3a; }

#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--hda-layer-hud);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; pointer-events: none;
}
#hud-bars { display: flex; flex-direction: column; gap: 4px; pointer-events: auto;
  background: rgba(20,15,12,0.75); padding: 8px 12px; border-radius: 6px; border: 1px solid #4a3a26; }
.barra-wrap { display: flex; align-items: center; gap: 6px; }
.barra-label { width: 26px; font-size: 0.75em; color: #c8b89a; }
.barra { width: 150px; height: 12px; background: #241b14; border: 1px solid #5a4327; border-radius: 2px; overflow: hidden; }
.barra-fill { height: 100%; width: 0%; transition: width 0.25s; }
.barra-fill.hp { background: linear-gradient(90deg, #b03a3a, #e05555); }
.barra-fill.mp { background: linear-gradient(90deg, #2f4fb0, #4e77e0); }
.barra-fill.xp { background: linear-gradient(90deg, #b0862f, #e0b64e); }
#hud-info { pointer-events: auto; background: rgba(20,15,12,0.75); padding: 8px 14px; border-radius: 6px;
  border: 1px solid #4a3a26; font-size: 0.85em; text-align: center; }
#hud-buttons { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
#hud-buttons button { margin: 2px; padding: 6px 10px; font-size: 0.8em; }
#btn-auto.ativo { background: #2f7a3d; border-color: #4ecb71; color: #eafff1; animation: pulso-auto 1.6s infinite; }
@keyframes pulso-auto { 0%, 100% { box-shadow: 0 0 0 0 rgba(78,203,113,0.5); } 50% { box-shadow: 0 0 0 6px rgba(78,203,113,0); } }

#mensagem-topo {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: var(--hda-layer-message);
  background: rgba(20,15,12,0.9); border: 1px solid #7a5c34; padding: 8px 18px; border-radius: 6px;
  font-size: 0.9em; pointer-events: none; max-width: 80%; text-align: center;
}

#modal-overlay {
  position: absolute; inset: 0; z-index: var(--hda-layer-modal); background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
}
#modal-conteudo {
  background: #201811; border: 3px solid #7a5c34; border-radius: 8px; padding: 20px;
  max-width: 720px; width: 90%; max-height: 85vh; overflow-y: auto;
}
#modal-conteudo h2 { color: #f5a524; margin-top: 0; }
#modal-conteudo .fechar { float: right; }

.card {
  display: flex; align-items: center; gap: 10px; background: #2b2118; border: 1px solid #4a3a26;
  border-radius: 6px; padding: 8px; margin-bottom: 8px;
}
.card img { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 4px; }
.card .info { flex: 1; }
.card .nome { font-weight: bold; }
.card .desc { font-size: 0.8em; color: #c8b89a; }
.icon-frame { display: inline-block; padding: 2px; border-radius: 6px; border: 2px solid #888; }

/* ---- Inventário: slots de equipamento (task #39) ---- */
.equip-slots-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.equip-slot {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  background: #2b2118; border: 2px dashed #4a3a26; border-radius: 8px; padding: 8px 6px;
}
.equip-slot.preenchido { border-style: solid; }
.equip-slot.vazio { opacity: 0.6; }
.equip-slot-icone { font-size: 1.4em; }
.equip-slot-label { font-size: 0.72em; color: #c8b89a; text-transform: uppercase; letter-spacing: 0.03em; }
.equip-slot-vazio-texto { font-size: 0.78em; opacity: 0.7; }
.equip-slot-item-nome { font-size: 0.8em; font-weight: bold; }
.equip-slot .btn-desequipar { font-size: 0.72em; padding: 2px 6px; margin-top: 2px; }

/* ---- Inventário: comparação equipado x candidato (melhoria #16) ---- */
.comparacao-equip {
  width: 100%; font-size: 0.76em; color: #c8b89a; background: rgba(0,0,0,0.2);
  border-radius: 4px; padding: 4px 8px; margin: -4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.comparacao-stat { white-space: nowrap; }
.comparacao-stat.melhor { color: #6bffa0; font-weight: bold; }
.comparacao-stat.pior { color: #ff8a8a; }
.comparacao-stat.elemento { color: #7fd4ff; }

/* ---- Inventário: painel de equipamento automático ---- */
.auto-equipar {
  margin-top: 14px; padding: 10px 12px; border: 1px solid #3a3226;
  border-radius: 6px; background: rgba(0,0,0,0.18);
}
.auto-equipar h3 { margin: 0 0 6px; font-size: 0.95em; }
.auto-equipar-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85em; }
.auto-equipar-check input { flex: 0 0 auto; }
.auto-equipar-nota { font-size: 0.76em; margin: 4px 0 8px; }
.auto-equipar .btn-otimizar { font-size: 0.85em; }
.auto-equipar-titulo { font-size: 0.82em; margin: 10px 0 4px; color: #f5a524; }
.auto-equipar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.auto-equipar-item {
  font-size: 0.8em; background: rgba(0,0,0,0.22); border-radius: 4px;
  padding: 5px 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
}
.auto-equipar-item.vazio { border-left: 3px solid #6bffa0; }
.auto-equipar-confirma { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.auto-equipar-ok { font-size: 0.8em; margin: 8px 0 0; }

/* ---- Inventário: empilhamento de itens iguais (task #39) ---- */
.stack-badge {
  font-size: 0.75em; font-weight: bold; color: #f5a524; background: rgba(245,165,36,0.15);
  border-radius: 8px; padding: 0 6px; margin-left: 4px;
}

.grid-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; width: 100%; max-width: 800px; }

/* ---- Criação de personagem: descrições de habilidades iniciais (task #40) ---- */
.habilidades-iniciais-lista { margin-top: 6px; text-align: left; }
.habilidade-inicial { font-size: 0.78em; color: #c8b89a; margin-top: 4px; }
.opcao-card {
  background: #2b2118; border: 2px solid #4a3a26; border-radius: 8px; padding: 10px; cursor: pointer;
  text-align: center; transition: border-color 0.15s;
}
.opcao-card:hover { border-color: #c8622f; }
.opcao-card.selecionada { border-color: #f5a524; background: #3a2b18; }
.opcao-card h3 { margin: 4px 0; font-size: 1em; color: #f1e9d8; }
.opcao-card p { font-size: 0.75em; color: #c8b89a; margin: 2px 0; }

.stat-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.85em; }

#screen-criacao { justify-content: flex-start; padding-top: 30px; }
.painel-criacao { width: 100%; max-width: 900px; }
.passo-titulo { color: #f5a524; margin-bottom: 8px; }

#screen-batalha { background: linear-gradient(180deg, #2a1f2e 0%, #1a1420 100%); }
.horda-badge { color: #f5a524; font-weight: bold; text-align: center; margin-bottom: 6px; font-size: 0.95em; }
.sinergia-badge { color: #4caf50; font-weight: bold; text-align: center; margin-bottom: 4px; font-size: 0.88em; cursor: help; }
.sinergia-preview-item { color: #4caf50; font-size: 0.9em; cursor: help; margin: 2px 0; }
.batalha-arena { display: flex; justify-content: space-between; width: 100%; max-width: 900px; margin-bottom: 20px; }
.combatente { display: flex; flex-direction: column; align-items: center; width: 140px; }
.formacao-linha { font-size: 0.68em; opacity: 0.85; margin-top: 1px; }
.badge-formacao { color: #c8b89a; }

/* ---- Painel de contexto de batalha (aditivo): nome do terreno + atalho de
   Auto batalha, já que o HUD (onde fica o botão Automático original) some
   durante o combate. Reusa autoPlayState.ativo via BattleUI.js — não cria
   nenhum estado novo, só um segundo controle pro mesmo estado. ---- */
.batalha-contexto {
  width: 100%; max-width: 900px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 6px 10px;
  padding-top: max(6px, env(safe-area-inset-top));
  background: rgba(20,15,12,0.55); border: 1px solid var(--hda-line); border-radius: var(--hda-radius);
  font-size: 0.85em; color: var(--hda-muted);
}
.batalha-contexto .contexto-terreno { display: flex; align-items: center; gap: 6px; }
#btn-auto-batalha { margin: 0; padding: 5px 10px; font-size: 0.82em; }
#btn-auto-batalha.ativo { background: #2f7a3d; border-color: #4ecb71; color: #eafff1; animation: pulso-auto 1.6s infinite; }

/* ---- Barra de retratos do time (redesenho de layout inspirado no print de
   referência: faixa de retratos no topo mostrando ordem/prontidão de turno).
   Puramente visual — espelha combatentesTime, os cards de corpo inteiro na
   arena continuam a única fonte de interação (alvo, dano flutuante etc.). */
.batalha-retratos { width: 100%; max-width: 900px; display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.retrato-card { width: 52px; display: flex; flex-direction: column; align-items: center; opacity: 0.7; transition: opacity 0.15s, transform 0.15s; }
.retrato-card img, .retrato-card .retrato-vazio { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 50%; border: 2px solid var(--hda-line); background: var(--hda-panel); }
.retrato-card.pronto { opacity: 1; }
.retrato-card.pronto img, .retrato-card.pronto .retrato-vazio { border-color: var(--hda-gold); }
.retrato-card.ativo { opacity: 1; transform: translateY(-3px); }
.retrato-card.ativo img, .retrato-card.ativo .retrato-vazio { border-color: var(--hda-gold); box-shadow: 0 0 6px var(--hda-gold); }
.retrato-card.morto img, .retrato-card.morto .retrato-vazio { filter: grayscale(1) brightness(0.5); border-color: #5a4327; }
.asset-sprite-sheet { display:inline-block; background-repeat:no-repeat; background-size:300% 400%; background-position:50% 0%; image-rendering:pixelated; }
.retrato-card .asset-sprite-sheet { width:48px; height:48px; border-radius:50%; border:2px solid var(--hda-line); background-color:var(--hda-panel); }
.retrato-barra { width: 44px; height: 4px; background: #241b14; border: 1px solid #5a4327; border-radius: 2px; margin-top: 3px; overflow: hidden; }
.retrato-barra-fill { height: 100%; background: #c0392b; }

/* ---- Fundo da batalha tingido por terreno (aditivo): usa o mesmo elemento
   dominante já calculado em terrenoElementoAtual() (main.js/worldMap.js) e
   passado pra iniciarBatalha() — puramente decorativo, não influencia
   cálculo nenhum. Sem atributo (ou terreno não listado), cai no gradiente
   padrão de #screen-batalha já existente logo abaixo — nenhuma regressão
   visual pra batalhas fora desses terrenos. ---- */
#screen-batalha[data-battle-terrain="fogo"] { background: linear-gradient(180deg, #3a1f1a 0%, #1a1210 100%); }
#screen-batalha[data-battle-terrain="agua"] { background: linear-gradient(180deg, #1a2a3a 0%, #101a20 100%); }
#screen-batalha[data-battle-terrain="gelo"] { background: linear-gradient(180deg, #1e2c38 0%, #10181f 100%); }
#screen-batalha[data-battle-terrain="natureza"] { background: linear-gradient(180deg, #1e321f 0%, #101c10 100%); }
#screen-batalha[data-battle-terrain="terra"] { background: linear-gradient(180deg, #322619 0%, #1c150d 100%); }
#screen-batalha[data-battle-terrain="veneno"] { background: linear-gradient(180deg, #26321a 0%, #151c0d 100%); }
#screen-batalha[data-battle-terrain="vento"] { background: linear-gradient(180deg, #263038 0%, #131a1f 100%); }
#screen-batalha[data-battle-terrain="raio"] { background: linear-gradient(180deg, #2f2a3a 0%, #171420 100%); }
#screen-batalha[data-battle-terrain="sombrio"] { background: linear-gradient(180deg, #201526 0%, #100a15 100%); }
#screen-batalha[data-battle-terrain="radiante"] { background: linear-gradient(180deg, #3a3320 0%, #1f1a10 100%); }
#screen-batalha[data-battle-terrain="arcano"] { background: linear-gradient(180deg, #2a1f3a 0%, #15101f 100%); }

/* ---- Prévia de dano, papéis e comportamento de IA (100 melhorias: itens
   1, 4, 5, 10, 12) — só texto/badge informativo, nenhuma mudança de regra. ---- */
.linha-previa-dano { width: 100%; margin: -2px 0 4px; font-size: 0.78em; }
.dano-estimado { color: var(--hda-muted, #c8b89a); }
.dano-estimado.imune { color: #e05555; }
.dano-estimado-critico { color: var(--hda-gold, #f5a524); opacity: 0.85; }
.badge-papel { color: #7fd4ff; }
.badge-comportamento { color: #c8b89a; font-style: italic; }
.janela-resposta { font-size: 0.82em; opacity: 0.8; font-style: italic; }

/* ---- Profundidade da arena (aditivo, só visual): sombra de "chão" sob a
   arena inteira e uma sombra elíptica sob cada combatente, pra dar sensação
   de peso/aterramento sem mexer no layout (flex/posições ficam iguais). ---- */
.batalha-arena { border-radius: 10px; padding: 10px 10px 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,0.3) 100%);
  box-shadow: inset 0 -16px 22px -14px rgba(0,0,0,0.55); }
.sprite-wrap::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: -1;
  width: 64px; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}

/* ---- Grade de formação (task #43, tela Time do gacha) ---- */
.formacao-grade { display: flex; gap: 16px; margin: 10px 0 16px; flex-wrap: wrap; }
.formacao-fileira { flex: 1; min-width: 160px; background: #241b14; border: 1px dashed #4a3a26; border-radius: 8px; padding: 8px; }
.formacao-fileira-titulo { font-weight: bold; font-size: 0.85em; margin-bottom: 6px; color: #f5a524; }
.formacao-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #2b2118; border: 2px solid #4a3a26; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 0.85em; }
.formacao-chip .btn-trocar-posicao { font-size: 0.72em; padding: 2px 6px; }
.combatente .sprite-canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.combatente .nome-c { font-weight: bold; margin-top: 4px; font-size: 0.85em; }
.combatente .barra { width: 110px; }
.combatente .atb-barra { width: 110px; height: 6px; background: #241b14; border: 1px solid #5a4327; margin-top: 2px; }
.combatente .atb-fill { height: 100%; background: #4ecb71; width: 0%; }
.combatente.morto .sprite-canvas { filter: grayscale(1) brightness(0.5); }
.combatente.pronto .sprite-canvas { outline: 2px solid #f5a524; }
.combatente.ativo { background: rgba(245,165,36,0.12); border-radius: 8px; }
.combatente.ativo .sprite-canvas { outline: 3px solid #f5a524; border-radius: 4px; }
.combatente.ativo .nome-c { color: #f5a524; }
.combatente.telegrafando { background: rgba(224,85,85,0.14); border-radius: 8px; }
.combatente.telegrafando .sprite-canvas { outline: 3px dashed #e05555; border-radius: 4px; animation: pulso-telegrafo 0.7s ease-in-out infinite; }
.icone-telegrafo { display: inline-block; animation: pulso-telegrafo 0.7s ease-in-out infinite; }
@keyframes pulso-telegrafo { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.telegrafo-inimigo { font-size: 0.95em; padding: 6px 8px; border: 1px dashed #e05555; border-radius: 6px; background: rgba(224,85,85,0.1); width: 100%; }

/* ---- Barra de quebra/postura de chefe (melhoria pós-backlog original) ---- */
.combatente .postura-barra { width: 110px; height: 6px; margin-top: 2px; }
.barra-fill.postura { background: linear-gradient(90deg, #7a4fb0, #b06fe0); }
.barra-fill.postura.cheia { background: linear-gradient(90deg, #f5a524, #ffe066); }
.badge-atordoado { color: #ffe066; font-weight: bold; font-size: 0.85em; animation: pulso-telegrafo 0.7s ease-in-out infinite; }

/* ---- New Game+ (melhoria pós-backlog original) ---- */
.badge-ng-plus { color: #ff8a3d; font-weight: bold; }

/* ---- Modo História (melhoria pós-backlog) ---- */
.badge-modo-historia { color: #7ec4e8; font-weight: bold; }

/* ---- Clima/hora do dia por zona (melhoria pós-backlog original) ---- */
#hud-clima { font-size: 0.85em; color: #c8b89a; margin-top: 2px; }
/* ---- Indicador "Salvo às HH:MM" (melhoria de jogabilidade #17) ---- */
#hud-salvo { font-size: 0.78em; color: #8fd14f; margin-top: 2px; animation: hud-salvo-flash 1.6s ease-out; }
@keyframes hud-salvo-flash {
  0% { opacity: 0; transform: translateY(-3px); }
  15% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; }
}
.combatente.atordoado .sprite-canvas { outline: 3px solid #ffe066; border-radius: 4px; }

/* ---- Efeitos visuais de combate: dano/cura flutuantes, flash de acerto, tremor ---- */
.batalha-arena { position: relative; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: var(--hda-layer-effects); overflow: visible; }
.sprite-wrap { position: relative; width: 96px; height: 96px; }
.combatente.hit-flash .sprite-canvas { animation: hit-flash-anim 0.35s ease-out; }
@keyframes hit-flash-anim {
  0% { filter: brightness(2.6) saturate(0) drop-shadow(0 0 6px var(--flash-color, #ff5555)); }
  100% { filter: none; }
}
/* Crítico: flash mais forte/demorado que o golpe normal, cor dourada fixa
   (sobrepõe a cor elemental — crítico já é destaque suficiente por si só). */
.combatente.hit-flash-critico .sprite-canvas { animation: hit-flash-critico-anim 0.5s ease-out; }
@keyframes hit-flash-critico-anim {
  0% { filter: brightness(3.2) saturate(0.4) drop-shadow(0 0 12px #ffe066); transform: scale(1.12); }
  60% { filter: brightness(1.6) drop-shadow(0 0 8px #ffe066); transform: scale(1.05); }
  100% { filter: none; transform: scale(1); }
}
.dano-flutuante {
  position: absolute; transform: translate(-50%, 0);
  font-weight: bold; font-size: 1.15em; pointer-events: none;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  animation: flutuar 0.9s ease-out forwards;
}
.dano-flutuante.dano { color: #ff6b6b; }
.dano-flutuante.cura { color: #6bffa0; }
@keyframes flutuar {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.batalha-arena.shake, #arena.shake { animation: arena-shake 0.35s ease-in-out; }
@keyframes arena-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

#batalha-log { width: 100%; max-width: 900px; height: 90px; overflow-y: auto; background: rgba(0,0,0,0.35);
  border: 1px solid #4a3a26; border-radius: 6px; padding: 6px 10px; font-size: 0.82em; margin-bottom: 12px; }
#batalha-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; }

.raridade-badge { font-size: 0.7em; padding: 1px 6px; border-radius: 10px; color: #14100f; font-weight: bold; }

.classe-evidente { color: #f1e9d8; }
.badge-afinidade { color: #7fd4ff; font-weight: bold; font-size: 0.72em !important; cursor: help; }

.despertar-tag { font-weight: bold; font-size: 0.72em !important; }
.despertar-tag.despertar-disponivel { color: #f5d76e; animation: pulso-despertar 1.4s ease-in-out infinite; }
.despertar-tag.despertar-feito { color: #4ecb71; }
.despertar-tag.despertar-bloqueado { color: #8a7a63; font-style: normal; }
@keyframes pulso-despertar {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(245,215,110,0.8); }
}

.conjunto-resumo { color: #8a7a63; }
.conjunto-resumo.conjunto-ativo { color: #f5d76e; font-weight: bold; }

.vinculo-tag { font-weight: bold; font-size: 0.72em !important; }
.vinculo-tag.vinculo-disponivel { color: #ff9ecf; animation: pulso-vinculo 1.4s ease-in-out infinite; }
.vinculo-tag.vinculo-completo { color: #4ecb71; }
.vinculo-tag.vinculo-bloqueado { color: #8a7a63; font-style: normal; }
@keyframes pulso-vinculo {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(255,158,207,0.8); }
}

/* ---- Controles de toque (celular/tablet) ---- */
#touch-controls {
  position: absolute; inset: 0; z-index: var(--hda-layer-controls); pointer-events: none;
}
/* Altura que os controles precisam vencer pra não ficar embaixo da barra de
   navegação inferior (a barra só existe no celular, jogando — ver
   .hda-navbar em hda-ui.css). Antes o direcional era posicionado a 20px do
   fim da tela e a barra passava POR CIMA dele: no celular em pé, a seta
   "baixo" ficava debaixo do botão "Inventário". */
:root { --hda-piso-controles: calc(var(--hda-navbar-alt, 58px) + var(--hda-safe-bottom, 0px) + 10px); }

/* ===== ANALÓGICO DE OITO DIREÇÕES (Cristal Arcano) =====
   Um disco de cristal engastado em prata. O aro traz quatro raios cardeais
   gravados e uma rosa de oito pontas ao fundo; a manete é um núcleo ciano que
   acende e segue o polegar. Ocupa 34vw (antes 44vw) e some quase por completo
   quando o dedo sai — o mapa é o que tem de ser visto. */
#touch-dpad {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: var(--hda-piso-controles);
  width: min(34vw, 152px); height: min(34vw, 152px);
  pointer-events: auto; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: .62;
  transition: opacity .18s ease, transform .18s ease;
  background:
    radial-gradient(circle at 50% 40%, rgba(145,212,255,.16) 0%, rgba(20,27,48,.62) 46%, rgba(13,17,32,.80) 72%, rgba(13,17,32,0) 100%);
  border: 1px solid rgba(160,178,210,.42);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 22px rgba(120,190,255,.12), inset 0 0 0 3px rgba(11,16,34,.55);
}
#touch-dpad:focus-visible { outline: 2px solid var(--arc-crystal, #91d4ff); outline-offset: 3px; }
#touch-dpad.anlg-ativo { opacity: .95; }

/* Aro de prata com os quatro raios cardeais. */
.anlg-aro {
  position: absolute; inset: 7%; border-radius: 50%;
  border: 1px solid rgba(190,205,232,.55);
  box-shadow: inset 0 0 14px rgba(145,212,255,.14);
}
.anlg-raio { position: absolute; background: linear-gradient(var(--dir, to bottom), rgba(196,214,240,.85), rgba(196,214,240,0)); }
.anlg-n, .anlg-s { left: 50%; width: 1px; height: 13%; transform: translateX(-50%); }
.anlg-n { top: 3%; } .anlg-s { bottom: 3%; }
.anlg-l, .anlg-o { top: 50%; height: 1px; width: 13%; transform: translateY(-50%); }
.anlg-l { right: 3%; } .anlg-o { left: 3%; }

/* Rosa de oito pontas: as quatro diagonais, mais tênues que os cardeais —
   elas existem para o polegar saber que a diagonal é um destino legítimo. */
.anlg-rosa {
  position: absolute; inset: 20%; border-radius: 50%;
  background:
    conic-gradient(from 22.5deg,
      rgba(145,212,255,.10) 0 45deg, transparent 45deg 90deg,
      rgba(145,212,255,.10) 90deg 135deg, transparent 135deg 180deg,
      rgba(145,212,255,.10) 180deg 225deg, transparent 225deg 270deg,
      rgba(145,212,255,.10) 270deg 315deg, transparent 315deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
  mask: radial-gradient(circle, transparent 38%, #000 40%);
}

/* A manete. Fica no centro em repouso e segue o dedo enquanto arrasta. */
.anlg-manete {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38%; height: 38%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #e8f3ff 0%, #9fc6ea 26%, #43587e 62%, #1d2740 100%);
  border: 1px solid rgba(214,226,246,.75);
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .06s linear, box-shadow .12s ease;
}
.anlg-nucleo {
  width: 34%; height: 34%; border-radius: 50%;
  background: var(--arc-crystal, #91d4ff);
  box-shadow: 0 0 8px rgba(145,212,255,.85);
  opacity: .55; transition: opacity .12s ease, box-shadow .12s ease;
}
#touch-dpad.anlg-ativo .anlg-manete { box-shadow: 0 3px 14px rgba(0,0,0,.55), 0 0 18px rgba(145,212,255,.45), inset 0 1px 0 rgba(255,255,255,.3); }
#touch-dpad.anlg-ativo .anlg-nucleo { opacity: 1; box-shadow: 0 0 14px rgba(145,212,255,1); }

/* Setor aceso: um brilho de 45° na direção escolhida, ancorado no ângulo. */
#touch-dpad[data-direcao]::after {
  content: ""; position: absolute; inset: 7%; border-radius: 50%;
  background: conic-gradient(from calc(var(--anlg-ang, 0deg) - 22.5deg), rgba(145,212,255,.28) 0 45deg, transparent 45deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
  pointer-events: none;
}
#touch-dpad[data-direcao="direita"]        { --anlg-ang: 0deg; }
#touch-dpad[data-direcao="baixo-direita"]  { --anlg-ang: 45deg; }
#touch-dpad[data-direcao="baixo"]          { --anlg-ang: 90deg; }
#touch-dpad[data-direcao="baixo-esquerda"] { --anlg-ang: 135deg; }
#touch-dpad[data-direcao="esquerda"]       { --anlg-ang: 180deg; }
#touch-dpad[data-direcao="cima-esquerda"]  { --anlg-ang: 225deg; }
#touch-dpad[data-direcao="cima"]           { --anlg-ang: 270deg; }
#touch-dpad[data-direcao="cima-direita"]   { --anlg-ang: 315deg; }

/* Leitura para leitor de tela; invisível aos olhos. */
.anlg-leitura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .anlg-manete { transition: none; }
}

.touch-btn {
  background: rgba(20,27,48,0.82); color: var(--arc-ink, #edf1ff); border: 1px solid rgba(160,178,210,0.7);
  border-radius: 12px; font-size: 1.7em; line-height: 1; display: flex; align-items: center; justify-content: center;
  margin: 2px; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 0.06s, transform 0.06s, box-shadow 0.06s;
}
.touch-btn:active, .touch-btn.pressionado {
  background: rgba(70,110,160,0.95); border-color: var(--arc-crystal, #91d4ff);
  transform: scale(0.92); box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.touch-acao {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(var(--hda-piso-controles) + 12px);
  width: min(29vw, 126px); height: min(18vw, 76px); border-radius: 22px;
  pointer-events: auto; font-size: 1em; font-weight: bold; flex-direction: column; gap: 3px;
  /* Cristal Arcano: o botão de ação é o par do analógico, e estava na paleta
     marrom antiga — dois controles lado a lado em linguagens visuais
     diferentes. Agora é a mesma prata sobre índigo, com o ciano reservado
     para o estado ATIVO (há algo com que interagir). */
  background: linear-gradient(160deg, rgba(27,37,64,.92), rgba(16,23,39,.94));
  border: 1px solid rgba(178,194,222,.7);
  color: var(--arc-ink, #edf1ff);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 2px rgba(11,16,34,.5);
  transition: background .1s, transform .06s, box-shadow .12s, border-color .12s;
  opacity: .72;
}
.touch-acao-icone { font-size: 1.55em; line-height: .9; }
.touch-acao-rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72em; letter-spacing: .02em; }
.touch-acao[data-acao="nenhuma"] { opacity: .3; filter: saturate(.4); }
/* Com alvo por perto o botão acende em ciano — é o sinal de "dá para agir". */
.touch-acao:not([data-acao="nenhuma"]) {
  opacity: .95; border-color: var(--arc-crystal, #91d4ff);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px rgba(145,212,255,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.touch-acao .touch-acao-icone { color: var(--arc-crystal, #91d4ff); text-shadow: 0 0 10px rgba(145,212,255,.6); }
.touch-acao:active, .touch-acao.pressionado {
  background: linear-gradient(160deg, rgba(58,88,134,.96), rgba(31,45,74,.96));
  border-color: #bfe6ff; transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 22px rgba(145,212,255,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
body.touch #hud-buttons button { padding: 12px 16px; font-size: 1em; }

/* As três linhas do bloco de identidade (ver atualizarHUD em GameUI.js). No
   desktop as três aparecem, empilhadas como antes. */
#hud-info > span { display: block; }
#hud-info .hud-linha-xp { opacity: 0.75; font-size: 0.85em; }

@media (max-width: 680px), (pointer: coarse) {
  #hud { flex-direction: column; align-items: flex-start; gap: 6px; }
  #hud-bars { padding: 6px 8px; }
  .barra { width: 110px; }
  #hud-info { font-size: 0.75em; padding: 6px 10px; }
  #hud-buttons { flex-direction: row; flex-wrap: wrap; }
  .tela h1 { font-size: 1.6em; }
  #modal-conteudo { padding: 14px; max-height: 78vh; }
  .grid-opcoes { grid-template-columns: 1fr; }
  .batalha-arena { flex-wrap: wrap; justify-content: center; gap: 14px; }
  #batalha-acoes { padding-bottom: 170px; }
  .batalha-contexto { font-size: 0.78em; padding: 5px 8px; }
}

/* =========================================================================
   CELULAR EM PÉ — a orientação principal do jogo
   =========================================================================
   O mundo agora ocupa a tela inteira, e tudo que flutua por cima dele passou
   a ser dívida: cada caixa opaca no topo é mundo que o jogador não vê na
   direção em que ele anda. Esta faixa enxuga a sobreposição ao mínimo:

     • uma tira só no topo — barras curtas + onde você está;
     • identidade em uma linha; ouro, fragmentos e XP que falta saem daqui
       (estão a um toque nas telas, e no topo só tampavam o caminho);
     • mensagens logo abaixo dessa tira, nunca em cima dela;
     • controles acima da barra de navegação, do lado do polegar.
   ========================================================================= */
@media (max-width: 719px) {
  /* A tira do topo (barras, identidade, lugar) é composta na seção 10 do
     hda-ui.css, que carrega depois deste arquivo — é lá que ela mora, pra não
     existirem duas versões da mesma regra brigando por especificidade. Aqui
     fica só o que é desta camada. */
  #hud { flex-direction: column; }
  /* A mensagem descia 70px fixos do topo e caía em cima das barras em
     aparelho com entalhe. Agora ela desce a partir da área segura. */
  #mensagem-topo {
    top: calc(var(--hda-safe-top, 0px) + 78px);
    max-width: calc(100vw - 24px); font-size: 0.82em; padding: 6px 12px;
  }
}

/* Celular DEITADO: a tela fica baixa, então o direcional encolhe e a tira
   superior aperta ainda mais. A orientação principal continua sendo em pé —
   isto aqui é só não quebrar para quem virar o aparelho. */
@media (max-height: 460px) and (orientation: landscape) {
  #touch-dpad { width: min(30vw, 150px); height: min(30vw, 150px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .touch-acao { width: min(15vw, 78px); height: min(15vw, 78px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 8px); }
  #hud-info { display: none; }
  #mensagem-topo { top: calc(var(--hda-safe-top, 0px) + 8px); }
}

/* Enquanto uma tela cheia do jogo (batalha, criação, abertura) está aberta,
   os controles de mundo não fazem sentido e ainda por cima ficam por cima
   dela — some com eles pelo estado real da tela, sem sincronia manual. */
body:has(#screen-batalha:not(.hidden)) #touch-controls,
body:has(#screen-criacao:not(.hidden)) #touch-controls,
body:has(#screen-boot:not(.hidden)) #touch-controls,
body:has(#modal-overlay:not(.hidden)) #touch-controls { display: none !important; }

/* ---- Acessibilidade (melhoria pós-backlog, ver AccessibilitySystem.js/
   AccessibilityUI.js) — classes aplicadas no <body>, nunca em elementos
   individuais, pra cascatear em tudo sem precisar tocar em cada tela. ---- */
body.fonte-grande { font-size: 1.2em; }
body.fonte-gigante { font-size: 1.5em; }

body.alto-contraste {
  --alto-contraste: 1;
}
body.alto-contraste, body.alto-contraste .tela, body.alto-contraste #modal-conteudo {
  background: #000 !important; color: #fff !important;
}
body.alto-contraste button {
  background: #fff; color: #000; border: 2px solid #fff; font-weight: bold;
}
body.alto-contraste button:hover, body.alto-contraste button:focus {
  background: #ffe066; border-color: #ffe066;
}
body.alto-contraste .card, body.alto-contraste .barra {
  border-color: #fff !important;
}
body.alto-contraste .desc { color: #eee !important; }
body.alto-contraste .batalha-contexto { background: #000 !important; border-color: #fff !important; color: #fff !important; }
body.alto-contraste #screen-batalha { background: #000 !important; }

/* =========================================================================
   ANIMAÇÕES DE COMBATE (melhoria de jogabilidade: golpes visíveis, dado
   rolando, feedback de status/quebra de postura — ver BattleUI.js/
   DiceAnimation.js/CombatSystem.js). Toda duração aqui é só a "forma" da
   animação; a VELOCIDADE de fato é controlada em JS via duracaoAnimacao()
   (Acessibilidade → velocidade das animações de combate), então o mesmo
   @keyframes serve pro modo normal, rápido e instantâneo.
   ========================================================================= */

/* ---- Dado d20 animado (~1s) ---- */
.dado-layer {
  position: absolute; inset: 0; z-index: var(--hda-layer-dice-local); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.dado-rolagem {
  position:relative;width:clamp(104px,11vw,148px);height:clamp(104px,11vw,148px);
  display:grid;place-items:center;background:transparent;border:0;padding:0;
  color:#ffd56a;font-weight:900;font-size:clamp(1.65rem,3vw,2.5rem);
  filter:drop-shadow(0 15px 13px rgba(0,0,0,.72));transform-style:preserve-3d;
  animation:dado-girando .56s cubic-bezier(.34,.08,.66,.92) infinite;
}

/* Preferências ergonômicas por dispositivo. As classes vêm da configuração
   de Acessibilidade e não do save da aventura, portanto continuam iguais ao
   trocar de slot. A especificidade destas regras é maior que a adaptação de
   orientação acima para o preset escolhido nunca ser perdido ao girar. */
body.controles-compactos #touch-dpad { width:min(36vw,164px); height:min(36vw,164px); }
body.controles-grandes #touch-dpad { width:min(48vw,230px); height:min(48vw,230px); }
body.controles-compactos .touch-acao { width:min(25vw,108px); height:min(15vw,64px); }
body.controles-grandes .touch-acao { width:min(33vw,142px); height:min(21vw,88px); }
body.controles-discretos #touch-dpad,
body.controles-discretos .touch-acao { opacity:.55; }
body.controles-opacos #touch-dpad,
body.controles-opacos .touch-acao { opacity:1; }
body.controles-invertidos #touch-dpad {
  left:auto; right:max(14px, env(safe-area-inset-right));
}
body.controles-invertidos .touch-acao {
  right:auto; left:max(20px, env(safe-area-inset-left));
}
#touch-dpad:active, .touch-acao:active, .touch-acao.pressionado { opacity:1; }

@media (max-height: 460px) and (orientation: landscape) {
  body.controles-compactos #touch-dpad { width:min(25vw,122px); height:min(25vw,122px); }
  body.controles-grandes #touch-dpad { width:min(34vw,172px); height:min(34vw,172px); }
  .touch-acao { width:min(18vw,104px); height:min(13vw,60px); border-radius:18px; }
  body.controles-compactos .touch-acao { width:min(15vw,88px); height:min(11vw,52px); }
  body.controles-grandes .touch-acao { width:min(21vw,118px); height:min(15vw,68px); }
}

.acc-grupo-controles {
  width:100%; margin:2px 0; padding:10px; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
  border:1px solid rgba(160,124,72,.72); border-radius:10px;
}
.acc-grupo-controles legend { color:#f5a524; font-weight:700; padding:0 6px; }
.acc-grupo-controles label { min-width:0; font-size:.88em; }
.acc-grupo-controles select { display:block; width:100%; margin-top:4px; }
@media (max-width:680px) { .acc-grupo-controles { grid-template-columns:1fr; } }
.dado-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.dado-valor{position:relative;z-index:2;display:grid;place-items:center;min-width:1.55em;min-height:1.35em;padding:.02em .16em .12em;border-radius:48%;background:radial-gradient(ellipse,rgba(40,12,80,.94) 0 52%,rgba(44,15,84,.54) 68%,transparent 72%);color:#ffd565;-webkit-text-stroke:1px #8a4811;text-shadow:0 2px 0 #5f2608,0 0 7px #ffcc52}
@keyframes dado-girando {
  0%{transform:perspective(420px) rotateX(-18deg) rotateY(0deg) rotateZ(-8deg) scale(.82)}
  30%{transform:perspective(420px) rotateX(32deg) rotateY(150deg) rotateZ(18deg) scale(1.08) translateY(-8px)}
  65%{transform:perspective(420px) rotateX(-28deg) rotateY(300deg) rotateZ(-16deg) scale(.92)}
  100%{transform:perspective(420px) rotateX(-18deg) rotateY(360deg) rotateZ(8deg) scale(.82)}
}
.dado-rolagem.parado {
  animation:dado-pousa .42s cubic-bezier(.18,.85,.26,1.25);color:#fff3d6;
}
@keyframes dado-pousa {
  0%{transform:perspective(420px) scale(1.42) rotateX(22deg) rotateZ(12deg);filter:brightness(1.8) drop-shadow(0 22px 18px #000)}
  58%{transform:perspective(420px) scale(.91) rotateX(-6deg) rotateZ(-3deg)}
  100%{transform:perspective(420px) scale(1) rotateX(0) rotateZ(0);filter:drop-shadow(0 15px 13px rgba(0,0,0,.72))}
}
.dado-rolagem.critico {
  color:#ffe066;
  filter:drop-shadow(0 0 18px rgba(255,224,102,.95)) drop-shadow(0 16px 12px #000);
  animation: dado-pousa 0.28s ease-out, dado-critico-pulso 0.5s ease-in-out 0.28s 2;
}
@keyframes dado-critico-pulso {
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(255,224,102,.85)) drop-shadow(0 16px 12px #000)}
  50%{transform:scale(1.13);filter:drop-shadow(0 0 34px #ffe066) drop-shadow(0 18px 14px #000)}
}
.dado-rolagem.fumble {
  color:#ff9b9b;filter:grayscale(.25) drop-shadow(0 0 16px rgba(224,55,85,.8)) drop-shadow(0 15px 13px #000);
}

/* ---- Golpe: o card do atacante avança em direção ao adversário e volta ---- */
.combatente.golpe-jogador { animation: lunge-direita 0.35s ease-in-out; z-index: 4; }
.combatente.golpe-inimigo { animation: lunge-esquerda 0.35s ease-in-out; z-index: 4; }
@keyframes lunge-direita {
  0% { transform: translateX(0); }
  55% { transform: translateX(22px) scale(1.04); }
  100% { transform: translateX(0); }
}
@keyframes lunge-esquerda {
  0% { transform: translateX(0); }
  55% { transform: translateX(-22px) scale(1.04); }
  100% { transform: translateX(0); }
}

/* ---- Textos flutuantes: dano/cura (já existente), crítico, miss, status ---- */
.dano-flutuante.critico { font-size: 1.55em; color: #ffe066; text-shadow: 0 0 6px rgba(255,224,102,0.8), 2px 2px 0 rgba(0,0,0,0.6); }
.dano-flutuante.miss {
  color: #cfcfcf; font-style: italic; font-size: 1em;
  animation: flutuar-miss 0.9s ease-out forwards;
}
@keyframes flutuar-miss {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(1); }
}
.status-flutuante {
  font-size: 0.85em; font-weight: bold; white-space: nowrap;
  animation: flutuar-status 1.1s ease-out forwards;
}
.status-flutuante.status-bom { color: #6bffa0; }
.status-flutuante.status-ruim { color: #e0a15c; }
@keyframes flutuar-status {
  0% { opacity: 0; transform: translate(calc(-50% + var(--desvio-x, 0px)), 8px) scale(0.85); }
  18% { opacity: 1; transform: translate(calc(-50% + var(--desvio-x, 0px)), -2px) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--desvio-x, 0px)), -36px) scale(1); }
}

/* ---- Ícones de status ativos (indicador recorrente enquanto dura) ---- */
.status-icones { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.status-icone { font-size: 0.85em; animation: status-tick 1.2s ease-in-out infinite; }
.status-icone.status-ruim { animation-duration: 0.85s; } /* veneno/lentidão "cutucam" um pouco mais rápido */
@keyframes status-tick {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ---- Quebra de postura de chefe: momento visual à parte, além do log ---- */
.combatente.quebra-postura .sprite-canvas { animation: quebra-postura-anim 0.7s ease-out; }
@keyframes quebra-postura-anim {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,224,102,0)); transform: scale(1); }
  25% { filter: brightness(2.4) drop-shadow(0 0 16px #ffe066); transform: scale(1.18) rotate(-4deg); }
  55% { filter: brightness(1.8) drop-shadow(0 0 12px #ffe066); transform: scale(1.1) rotate(3deg); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,224,102,0)); transform: scale(1); }
}

/* ---- Telegraph de chefe: variante mais dramática que o telegraph comum ---- */
.combatente.telegrafando.telegrafo-chefe .sprite-canvas { outline-color: #ffe066; animation: pulso-telegrafo-chefe 0.55s ease-in-out infinite; }
@keyframes pulso-telegrafo-chefe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(255,224,102,0); }
  50% { opacity: 0.6; box-shadow: 0 0 14px rgba(255,224,102,0.7); }
}

/* ---- Tremor de tela: variante mais forte pra crítico ---- */
.batalha-arena.shake-forte, #arena.shake-forte { animation: arena-shake-forte 0.45s ease-in-out; }
@keyframes arena-shake-forte {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-13px); }
  30% { transform: translateX(11px); }
  45% { transform: translateX(-9px); }
  60% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
  90% { transform: translateX(2px); }
}

/* ---- Entrada da tela de batalha: só no primeiro render (ver
   `primeiraRenderizacao` em BattleUI.js) ---- */
.combatente.entrada-combatente {
  animation: entrada-combatente-anim 0.4s ease-out both;
  animation-delay: var(--entrada-atraso, 0ms);
}
@keyframes entrada-combatente-anim {
  0% { opacity: 0; transform: translateY(14px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Ações bloqueadas durante a animação de uma ação em andamento (ver
   `turnoEmAndamento` em BattleUI.js) — evita clique duplo no meio do golpe ---- */
#batalha-acoes.acoes-bloqueadas { pointer-events: none; opacity: 0.55; }

/* ---- Prévia de combo elemental antes de confirmar o ataque ---- */
.combo-preview {
  width: 100%; text-align: center; color: #f5d76e; font-size: 0.88em;
  margin: 2px 0 6px; cursor: help;
  animation: pulso-combo-preview 1.1s ease-in-out infinite;
}
@keyframes pulso-combo-preview {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(245,215,110,0.7); }
}

/* ---- Feedback de hover/press nos botões de ação de combate ---- */
#batalha-acoes button:hover:not(:disabled) { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 10px rgba(245,165,36,0.45); }
#batalha-acoes button:active:not(:disabled) { transform: translateY(0) scale(0.98); }

/* ---- Barra de ATB suavizada (as demais .barra-fill já têm transition) ---- */
.combatente .atb-fill { transition: width 0.15s linear; }

/* ---- Marcador de chefe em cooldown no mapa (Renderer.js desenha
   diretamente no canvas — aqui só documentamos a paleta usada lá pra ficar
   perto do resto das regras de combate/mundo). ---- */

/* =========================================================================
   FIM — ANIMAÇÕES DE COMBATE
   ========================================================================= */

/* =========================================================================
   CAMINHOS DO HERDEIRO — árvore visual (task #95)
   ========================================================================= */
#modal-conteudo.arvore-caminhos {
  max-width: 96vw; width: 96vw; max-height: 92vh; padding: 12px 14px;
  height:min(88vh,820px); display: flex; flex-direction: column;
}
#modal-conteudo.arvore-caminhos.arvore-so-heranca{height:min(64vh,580px)}
#modal-conteudo.arvore-caminhos {
  background: linear-gradient(145deg, #171222 0%, #241a35 52%, #11111f 100%);
  border: 1px solid rgba(188,145,255,.45); box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.08);
}
#modal-conteudo.arvore-caminhos h2 { color:#f0ddff; letter-spacing:.03em; text-shadow:0 0 18px rgba(183,125,255,.45); }
#modal-conteudo.arvore-caminhos h2 { margin-bottom: 6px; }
.progressao-heroi-nav {
  display:flex; gap:6px; align-items:center; width:max-content; max-width:100%;
  margin:0 auto 7px; padding:4px; border:1px solid rgba(151,111,210,.42);
  border-radius:12px; background:rgba(8,7,16,.56);
}
.progressao-heroi-nav button {
  min-height:32px; padding:5px 12px; border-radius:9px; font-size:.82rem;
  color:#cabfda; background:transparent; border:1px solid transparent;
}
.progressao-heroi-nav button.ativo {
  color:#fff6d8; border-color:#b686ff;
  background:linear-gradient(135deg,rgba(106,66,164,.8),rgba(77,43,119,.9));
  box-shadow:0 0 14px rgba(155,98,232,.22);
}
#caminho-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#caminho-pontos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ponto-badge {
  display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.82em;
  background: #2b2118; border: 1px solid #4a3a26;
}
.ponto-badge.classe { border-color: #2f4fb0; }
.ponto-badge.subclasse { border-color: #c8622f; }
.ponto-badge.heranca { border-color: #8a4fb0; }
#caminho-pontos #btn-respec { font-size: 0.78em; padding: 4px 10px; margin-left: 6px; }
#caminho-presets { display: flex; gap: 6px; }
.preset-btn { font-size: 0.8em; padding: 5px 12px; }
.preset-btn.ativo { background: #7a3b1e; border-color: #f5a524; }
#caminho-escolha-subclasse {
  background: rgba(245,165,36,0.1); border: 1px dashed #f5a524; border-radius: 6px;
  padding: 8px 10px; margin: 4px 0 8px; font-size: 0.85em;
}
#caminho-escolha-subclasse p { margin: 0 0 6px; }

#caminho-corpo { display: flex; gap: 10px; flex: 1; min-height: 0; }
#caminho-viewport-wrap {
  position: relative; flex: 1; min-width: 0; border: 2px solid #4a3a26; border-radius: 6px;
  background: radial-gradient(circle at 50% 0%, #31234b 0%, #171322 62%, #0e0d16 100%); overflow-x: auto; overflow-y: hidden;
  box-shadow: inset 0 0 60px rgba(114,75,175,.18);
}
#caminho-viewport{width:100%;min-height:100%;overflow:visible}
#svg-arvore{display:block;margin:0 auto;max-width:none;cursor:default;overflow:visible}
#caminho-viewport-wrap{scrollbar-color:#7653a6 #171322;scrollbar-width:thin}

#caminho-painel {
  width: 320px; flex-shrink: 0; background: linear-gradient(180deg,#281d3a,#191523); border: 1px solid #7653a6; border-radius: 12px;
  padding: 10px; overflow-y: auto;
}
.painel-vazio { font-size: 0.85em; opacity: 0.75; }
.painel-no-titulo { font-size: 1.1em; font-weight: bold; color: #f5a524; margin-bottom: 4px; }
.painel-no-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.painel-no-tags .tag, .painel-no-acao .tag {
  font-size: 0.72em; background: #2b2118; border: 1px solid #4a3a26; border-radius: 10px; padding: 2px 8px;
}
.painel-no-desc { font-size: 0.85em; color: #c8b89a; font-style: italic; }
.painel-no-efeito { font-size: 0.85em; }
.painel-no-sinergia { font-size: 0.8em; color: #6ec0ff; }
.painel-no-req { font-size: 0.78em; color: #e0b64e; }
.painel-no-bloqueio { font-size: 0.78em; color: #e07a7a; }
.painel-no-acao { margin-top: 8px; }
.escolhido-tag { border-color: #4ecb71 !important; color: #eafff1; }

.no-caminho { pointer-events: bounding-box; cursor: pointer; }
.no-area-clique { pointer-events: all; }
.no-caminho .no-forma { stroke: #7a5c34; stroke-width: 2px; transition: filter 0.15s, transform 0.1s; pointer-events: none; }
.no-caminho .no-forma { filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.no-caminho.estado-bloqueado .no-forma { opacity: 0.5; stroke-dasharray: 4 3; }
.no-caminho.estado-desbloqueavel .no-forma { stroke: #f5a524; stroke-width: 3px; filter: drop-shadow(0 0 6px rgba(245,165,36,0.65)); }
.no-caminho.estado-escolhido .no-forma { stroke: #eafff1; stroke-width: 3px; }
.no-caminho.selecionado .no-forma { stroke: #ffffff; stroke-width: 4px; }
.no-caminho:hover .no-forma { transform: scale(1.06); }
.no-anel-exclusivo { fill: none; stroke: #b03a3a; stroke-width: 1.5px; stroke-dasharray: 3 3; opacity: 0.85; pointer-events: none; }
.no-icone { font-size: 30px; pointer-events: none; }
.no-nivel{font-size:10px;font-weight:900;letter-spacing:.08em;fill:#f5c65e;paint-order:stroke;stroke:#110d18;stroke-width:3px;pointer-events:none}
.no-check { font-size: 14px; pointer-events: none; }
.no-label {
  font-size: 12px; font-weight:700; fill: #f1e9d8; pointer-events: none; paint-order: stroke;
  stroke: #0f0c0d; stroke-width: 3px;
}
.edge-requer { stroke: #9277bd; stroke-width: 2.5px; opacity:.8; }
.edge-exclusivo { stroke: #b03a3a; stroke-width: 2px; stroke-dasharray: 5 4; opacity: 0.8; }
.sub-titulo { font-size: 13px; fill: #f5a524; text-anchor: middle; font-weight: bold; }

@media (max-width: 820px) {
  #caminho-corpo { flex-direction: column; }
  #caminho-painel { width: 100%; max-height: 34vh; }
  #caminho-viewport-wrap { min-height: 40vh; }
}