/* StrongHold Idle — estilos globais
   A configuração de cores/fontes do Tailwind fica em index.html (tailwind.config).
   Aqui ficam os estilos customizados que o utilitário não cobre. */

:root {
  /* Fundos */
  --bg-page: #080706;
  --bg-panel: #11100d;
  --bg-panel-secondary: #17130f;
  --bg-panel-elevated: #1d1812;
  --bg-card: #201a13;
  --bg-card-hover: #292016;
  --bg-gold-dark: #38250f;
  --bg-gold-active: #5a3912;
  --bg-selected: #6f4513;

  /* Bordas e metais */
  --border-dark: #33291d;
  --border-default: #584326;
  --border-bronze: #745424;
  --border-gold-muted: #94702e;
  --border-gold: #c38a27;
  --gold-dark: #8f611c;
  --gold: #c98b22;
  --gold-bright: #e4a52d;
  --gold-highlight: #f2bd4a;
  --gold-text: #e3b65f;

  /* Tipografia e estados */
  --text-primary: #e8dfd1;
  --text-secondary: #b8a58c;
  --text-muted: #7e715f;
  --text-dark: #21170c;
  --success: #79b542;
  --success-bright: #9bd755;
  --danger: #c74735;
  --danger-bright: #e25d48;
  --mana: #3c83bf;
  --energy: #6da843;
  --xp: #5489aa;
  --shadow-panel: rgba(0, 0, 0, 0.65);
  --shadow-gold: rgba(205, 144, 38, 0.18);

  /* Aliases legados: evitam que componentes antigos saiam da nova família. */
  --ui-void: var(--bg-page);
  --ui-coal: var(--bg-panel);
  --ui-charcoal: var(--bg-panel-secondary);
  --ui-bronze-dark: var(--border-dark);
  --ui-bronze: var(--border-bronze);
  --ui-gold: var(--gold);
  --ui-gold-light: var(--gold-highlight);
  --ui-parchment: var(--text-secondary);
  --stone-vein: rgba(51, 41, 29, 0.75);
  --panel-edge: var(--border-default);
}

/* --- Abas do popup de relatório de expedição --- */
.report-tab-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-panel-secondary);
  border: 1px solid var(--border-dark);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.report-tab-btn:hover {
  color: var(--gold-text);
  background: var(--bg-card-hover);
  border-color: var(--border-gold-muted);
}
.report-tab-btn.report-tab-active {
  color: #1a1006;
  background: linear-gradient(180deg, #d99a29 0%, #a86918 100%);
  border-color: #e3ad42;
}

/* --- Aba de nível 1 do popup de Comércio (Mercado/Forja) — maior e mais
 *  "de título" que .report-tab-btn, já que essa escolha é estrutural (troca
 *  o sistema inteiro exibido), não só um filtro dentro da mesma tela. Ver
 *  switchMercadoTopTab em ui.js. */
.mercado-top-tab-btn {
  flex: 1;
  padding: 0.6rem 0.4rem;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #a67c52;
  background: rgba(10, 9, 7, 0.4);
  border: 1px solid rgba(166, 124, 82, 0.35);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mercado-top-tab-btn:hover {
  color: #e8e0d4;
  border-color: rgba(196, 165, 116, 0.5);
}
.mercado-top-tab-btn.mercado-top-tab-active {
  color: #f5b942;
  background: rgba(224, 154, 43, 0.12);
  border-color: #e09a2b;
  border-bottom: 2px solid #f5b942;
}

/* --- Filtro de estrelas da lista de Missão (Expedições/Caças/Coleta) --- */
.mission-star-filter-btn {
  padding: 0.2rem 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: #a67c52;
  background: transparent;
  border: 1px solid rgba(166, 124, 82, 0.3);
  border-radius: 3px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mission-star-filter-btn:hover {
  color: #e8e0d4;
  border-color: rgba(196, 165, 116, 0.5);
}
.mission-star-filter-btn.mission-star-filter-active {
  color: #1a1005;
  background: linear-gradient(180deg, #e09a2b, #c47a15);
  border-color: #f5b942;
}

/* --- Slots de equipamento (popup de herói) ---
 * [MUDANÇA — pedido do jogador: "diminuir o tamanho dos slots, dessa modal
 * inteira, pra ser um pouco mais compacta"] Reduzido padding/gap/ícones
 * aqui e nos blocos relacionados abaixo (placeholder, decor, figura do
 * herói, grade da Mochila) — a modal ficou mais alta desde que o
 * Inventário passou a ficar sempre aberto (ver openEquipModal), então
 * compensa encolher o tabuleiro de cima. */
.equip-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.42rem 0.2rem;
  background: linear-gradient(180deg, rgba(24, 19, 13, 0.85), rgba(12, 10, 7, 0.92));
  border: 1px solid rgba(196, 165, 116, 0.35);
  transition: border-color 0.15s, background 0.15s;
}
/* Linha interna dupla (visual do mockup: borda fina dourada com um segundo
 * traço mais apagado por dentro) — overlay sem clique, não afeta nada. */
.equip-slot::after,
.equip-slot-placeholder::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(196, 165, 116, 0.14);
  pointer-events: none;
}
.equip-slot:hover {
  border-color: rgba(230, 194, 41, 0.65);
  background: rgba(26, 21, 16, 0.85);
}
.equip-slot-active {
  border-color: #e09a2b;
  background: rgba(224, 154, 43, 0.1);
}
.equip-slot-icon {
  font-size: 1.2rem;
  line-height: 1;
  position: relative;
}
/* Item equipado sem atender o requisito de atributo (reqFor/reqDex/reqInt —
 * ver heroMeetsItemRequirements em state.js) — efeitos desligados até
 * corrigir (ver equip-slot em ui.js). Borda vermelha no slot + selo ⚠️ no
 * canto do ícone chamam atenção sem esconder o item. */
.equip-slot-req-unmet {
  border-color: rgba(196, 58, 58, 0.65);
}
.equip-slot-warn {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

/* [NOVO — pedido do jogador: "adiciona aqui uma forma de bloquear o item,
 * ele nao vai permitir vc de quebrar o item na forja e nem vender" — ver
 * toggleItemLock em economy.js] Selo de cadeado no canto do ícone do Baú
 * (renderInventoryGrid, ui.js) — canto OPOSTO ao ⚠️ de requisito não
 * atendido acima (top-left em vez de top-right) pra nunca sobrepor os dois
 * ao mesmo tempo num item raro que seja as duas coisas. */
.equip-slot-lock-badge {
  position: absolute;
  top: -0.35rem;
  left: -0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

/* [NOVO — pedido do jogador: "adiciona uma bolinha de nivel do item, pra
 * facilitar a visualização do level requerido"] Selo circular reaproveitado
 * em TODO lugar que mostra o ícone de um item equipável (ver
 * itemLevelBadgeHtml, ui.js) — cada container abaixo já é/vira
 * `position: relative`, e o canto varia pra nunca sobrepor um selo que já
 * existisse ali (⚠️/🔒 no equip-slot ficam no top; a bolinha de nível desce
 * pro bottom-right desses). */
.item-level-badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.15rem;
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.92);
  border: 1px solid rgba(120, 190, 230, 0.65);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  color: #9fd8f2;
  pointer-events: none;
}
.equip-slot-icon .item-level-badge {
  bottom: -0.35rem;
  right: -0.35rem;
}
.forja-item-row-icon .item-level-badge {
  bottom: -0.3rem;
  right: -0.3rem;
}
.equip-slot-icon img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-icon-img {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.2em;
  image-rendering: pixelated;
}
.equip-slot-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa3b0;
  text-align: center;
}
.equip-slot-upgrade-pips { display: inline-flex; gap: 0.12rem; margin-top: 0.15rem; }
.equip-slot-upgrade-pips i { width: 0.25rem; height: 0.25rem; border: 1px solid rgba(207, 157, 74, 0.58); border-radius: 50%; background: rgba(11, 8, 4, 0.72); }
.equip-slot-upgrade-pips i.is-filled { border-color: #f2b842; background: #f2b842; box-shadow: 0 0 4px rgba(242, 184, 66, 0.6); }
.equip-slot-bonus {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.55rem;
  color: #9dc183;
}
/* Atributos (redesign de combate — docs/combat-redesign.md) — grade dentro
   do popup de Equipamentos, 5 linhas (FOR/DEX/INT/VIG/LUK) com valor,
   modificador e botão "+" pra gastar pontos livres. */
/* "Combate (novo)" — Ataque/CA calculados pelo sistema novo de atributos,
   mostrado separado do "Poder/Defesa" de sempre (equip-hero-stats). */
/* Painel lateral inteiro (Poder/Defesa + Atributos) — moldura única no
 * estilo do mockup: caixa escura com borda dourada fina e cabeçalho. */
.equip-side {
  border: 1px solid rgba(196, 165, 116, 0.4);
  background: linear-gradient(180deg, rgba(26, 20, 14, 0.75), rgba(14, 11, 8, 0.85));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 0.7rem 0.75rem;
}
.equip-combat-preview {
  border-bottom: 1px solid rgba(196, 165, 116, 0.25);
  padding: 0 0 0.5rem;
}
.equip-combat-preview-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f5b942;
}
.equip-combat-preview-row {
  display: flex;
  justify-content: space-around;
  margin-top: 0.35rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  color: #d8cdb8;
}
.equip-attr-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.equip-attr-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.74rem;
  color: #d8cdb8;
}
/* Linha separadora pontilhada entre atributos (visual do mockup). */
.equip-attr-row + .equip-attr-row {
  border-top: 1px dotted rgba(140, 108, 70, 0.35);
}
/* border-bottom pontilhada + cursor de ajuda: sinaliza que o nome do
 * atributo tem um tooltip (ver ATTRIBUTE_DESCRIPTIONS/hint-trigger em
 * ui.js/config.js) — sem isso não tinha nenhuma pista visual de que dava
 * pra passar o mouse ali. */
.equip-attr-label {
  color: #d8cdb8;
  cursor: help;
}
.equip-attr-icon {
  display: inline-block;
  width: 1.15rem;
  font-size: 0.72rem;
}
.equip-attr-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: inline-flex;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 3.6rem;
}
.equip-attr-mod { color: #9dc183; font-size: 0.65rem; display: inline-block; min-width: 2.1rem; text-align: left; }
.equip-attr-plus {
  width: 1.35rem;
  height: 1.35rem;
  line-height: 1.1rem;
  border: 1px solid rgba(230, 194, 41, 0.6);
  background: linear-gradient(180deg, rgba(230, 194, 41, 0.22), rgba(160, 120, 20, 0.18));
  color: #f5d99a;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.equip-attr-plus:hover { background: rgba(230, 194, 41, 0.32); }
/* Painel de Status detalhado expansível (pedido do jogador: "painelzinho
 * expandível igual no ragnarok... descendo a tela dos atributos" — ver
 * equipStatusPanelHtml em ui.js). Botão reaproveita a moldura dourada do
 * resto do painel lateral, só com um "acordeão" simples pra abrir/fechar. */
.equip-status-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: linear-gradient(180deg, rgba(45, 34, 22, 0.55), rgba(20, 15, 10, 0.55));
  color: #e6c229;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.equip-status-toggle:hover { background: rgba(230, 194, 41, 0.14); }
.equip-status-toggle-arrow { font-size: 0.6rem; color: #c4a574; }
/* [ATUALIZADO 2x — 1º pedido: "em vez de abrir pra baixo, ele nao poderia
 * expandir pra lateral?" (virou uma gaveta cobrindo a tela toda de altura,
 * feio); 2º pedido: "assim nao, ficou feio pra caramba, quero um popuzinho
 * que abra na lateral só isso"] agora é um popover PEQUENO (tamanho de
 * conteúdo, sem cobrir a tela e sem escurecer nada) ancorado do lado do
 * botão — a posição exata (esquerda/direita do botão, sem vazar pra fora da
 * tela) é calculada em JS, ver positionEquipStatusPopup em ui.js; aqui só
 * fica o visual da caixinha. */
.equip-status-popup {
  position: fixed;
  width: 232px;
  max-width: 86vw;
  z-index: 60;
  background: linear-gradient(180deg, rgba(26, 20, 14, 0.98), rgba(14, 11, 8, 0.99));
  border: 1px solid rgba(196, 165, 116, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  padding: 0.55rem 0.6rem;
}
.equip-status-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.25);
  /* Pedido do jogador: "tem como deixar esses popups que eu possa
     movê-los? arrastar pra posição que eu quiser" — o header inteiro (menos
     o botão de fechar) é a "alça" de arrastar, ver [data-drag-popup] em
     main.js. touch-action:none evita o navegador roubar o gesto pra
     scroll/zoom no touch enquanto arrasta. */
  cursor: move;
  touch-action: none;
  user-select: none;
}
.equip-status-popup-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f5b942;
}
.equip-status-popup-close {
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.05rem;
  text-align: center;
  border: 1px solid rgba(196, 165, 116, 0.3);
  background: rgba(0, 0, 0, 0.25);
  color: #d8cdb8;
  font-size: 0.8rem;
  cursor: pointer;
}
.equip-status-popup-close:hover { background: rgba(230, 65, 65, 0.22); color: #f5b3b3; }
.equip-status-grid { display: flex; flex-direction: column; gap: 0; }
.equip-status-row { padding: 0.22rem 0; font-size: 0.68rem; }
.equip-status-row .equip-attr-value { min-width: auto; }
/* Nível da perícia bem pequeno no popup de Maestria (ver
   trainingMasteryPopupHtml, ui.js — pedido do jogador: "coloca o nivel bem
   pequenino"). */
.training-skill-level { font-size: 0.6rem; color: #9aa3b0; }
/* Bestiário / coleção (redesign de combate — docs/combat-redesign.md §6).
   Reagrupado por Zona de Caça, cada zona é um tópico colapsável (pedido do
   jogador: "somente com aquela setinha... expandir ou colapsar"). */
.bestiary-group + .bestiary-group { margin-top: 0.75rem; }
.bestiary-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(154, 163, 176, 0.3);
  border-radius: 0.3rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  text-align: left;
}
.bestiary-group-header:hover { border-color: rgba(230, 194, 41, 0.5); }
.bestiary-group-arrow {
  font-size: 0.6rem;
  color: #e6c229;
  flex-shrink: 0;
}
.bestiary-group-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #e6c229;
  flex: 1;
}
.bestiary-group-progress {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  color: #9aa3b0;
  flex-shrink: 0;
}
.bestiary-group-reward { margin-top: 0.4rem; }
.bestiary-triad-done { color: #9dc183; font-size: 0.65rem; }
.bestiary-card-name-clickable { cursor: pointer; }
.bestiary-card-name-clickable:hover { color: #e6c229; }
.bestiary-group-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bestiary-card {
  border: 1px solid rgba(154, 163, 176, 0.3);
  border-radius: 0.4rem;
  padding: 0.5rem;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  display: flex;
  flex-direction: column;
}
.bestiary-card-locked { opacity: 0.75; }
.bestiary-card-unlocked { border-color: rgba(230, 194, 41, 0.5); }
.bestiary-card-icon { font-size: 1.1rem; }
.bestiary-card-icon-has-img { font-size: 0; line-height: 0; }
.bestiary-card-img {
  display: block;
  width: 100%;
  max-width: 6rem;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.3rem;
  border: 1px solid rgba(196, 122, 21, 0.35);
}
.bestiary-card-img-locked {
  /* Bem mais apagada/borrada que antes — só uma silhueta, não dá pra
     reconhecer o monstro de verdade antes de desbloquear (pedido do
     jogador: "menos visível, meio que ofuscado"). */
  filter: grayscale(1) brightness(0.12) contrast(0.85) blur(1.5px);
  opacity: 0.55;
  border-color: rgba(120, 120, 120, 0.25);
}
/* Figurinha DESBLOQUEADA (30 abates) — clicável, abre em tamanho grande (ver
 * openBestiaryImageLightbox em ui.js). Só a versão desbloqueada tem esse
 * cursor/hover — a trancada (.bestiary-card-img-locked acima) não abre nada. */
.bestiary-card-img-clickable {
  cursor: zoom-in;
  transition: transform 0.15s, border-color 0.15s;
}
.bestiary-card-img-clickable:hover {
  transform: scale(1.05);
  border-color: rgba(224, 154, 43, 0.7);
}
#bestiary-image-lightbox-modal {
  cursor: zoom-out;
}
#bestiary-lightbox-img {
  cursor: default;
  border-radius: 0.4rem;
}
.bestiary-card-name { font-size: 0.72rem; font-weight: 600; color: #d8cdb8; margin-top: 0.25rem; }
.bestiary-card-type { color: #9a9a9a; font-weight: 400; }
.bestiary-card-desc { font-size: 0.63rem; color: #b8ab8f; margin-top: 0.25rem; line-height: 1.35; }
.bestiary-card-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
  font-size: 0.62rem;
  color: #9dc183;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px dashed rgba(154, 163, 176, 0.25);
  text-align: left;
}
.bestiary-card-stats-grid span { white-space: nowrap; }
.bestiary-card-stats-grid b { color: #c8e0b6; font-weight: 600; }
.bestiary-card-stats-xp { grid-column: span 2; text-align: center; }
.bestiary-card-progress { font-size: 0.6rem; color: #9a9a9a; margin-top: 0.3rem; }
.bestiary-gm-kill {
  margin-top: 0.3rem;
  font-size: 0.55rem;
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(230, 194, 41, 0.4);
  background: rgba(230, 194, 41, 0.1);
  color: #e6c229;
  cursor: pointer;
}
.bestiary-claim-btn {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.56rem;
  font-weight: 600;
  padding: 0.25rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(196, 122, 21, 0.6);
  background: rgba(196, 122, 21, 0.18);
  color: #f0c26a;
  cursor: pointer;
}
.bestiary-claim-btn:hover { background: rgba(196, 122, 21, 0.3); }
.bestiary-claim-triad-btn { display: inline-block; width: auto; margin-top: 0; margin-left: 0.3rem; }
.bestiary-card-claimed { font-size: 0.56rem; color: #9dc183; margin-top: 0.35rem; }
/* Recuperação de loot perdido (redesign de combate — docs/combat-redesign.md §7) */
.loot-recovery-card {
  border: 1px solid rgba(154, 163, 176, 0.3);
  border-radius: 0.4rem;
  padding: 0.55rem 0.7rem;
  font-family: 'Source Sans 3', sans-serif;
}
.loot-recovery-title { font-size: 0.75rem; font-weight: 600; color: #e6c229; }
.loot-recovery-line { font-size: 0.68rem; color: #d8cdb8; margin-top: 0.25rem; }
.loot-recovery-value { color: #9dc183; font-weight: 600; }
.loot-recovery-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.loot-recovery-btn {
  flex: 1;
  min-width: 8rem;
  font-size: 0.62rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(154, 163, 176, 0.4);
  background: rgba(0, 0, 0, 0.2);
  color: #d8cdb8;
  cursor: pointer;
}
.loot-recovery-btn-pay {
  border-color: rgba(230, 194, 41, 0.5);
  background: rgba(230, 194, 41, 0.12);
  color: #e6c229;
}
/* Bug reportado: botão "Tentar recuperar" parecia não fazer nada (usava
   heróis já selecionados no painel de Expedições, sem aviso nenhum aqui, e
   o resultado só aparecia longe, no log geral). Hint mostra quem SERIA
   enviado antes de clicar; result mostra a última tentativa direto aqui. */
.loot-recovery-hint { font-style: italic; opacity: 0.85; }
.loot-recovery-hint-warn { color: #e0a03a; }
.loot-recovery-result { color: #9dc183; font-weight: 600; }
/* Variante compacta presa embaixo do card da missão certa na lista (ver
   missionListItemsHtml) — mesma info/botões do popup "📦 Loot perdido", só
   que "descendo" o próprio card, sem precisar abrir outro popup. */
.mission-loot-recovery-card {
  margin-top: 0.35rem;
  border-color: rgba(230, 194, 41, 0.4);
  background: rgba(230, 194, 41, 0.05);
}
.equip-slot.rarity-comum { border-color: rgba(154, 163, 176, 0.5); }
.equip-slot.rarity-magico { border-color: rgba(94, 163, 216, 0.65); }
.equip-slot.rarity-raro { border-color: rgba(230, 194, 41, 0.75); }
.equip-slot.rarity-lendario {
  border-color: rgba(224, 154, 43, 0.85);
  box-shadow: 0 0 8px rgba(224, 154, 43, 0.4);
}

/* Mochila (ver equipModalLayoutFor em ui.js) — mesmo visual de .equip-slot,
 * mas com um destaque sutil quando tem item esperando (ainda não guardado
 * no baú), pra chamar atenção sem virar alerta piscante. */
.equip-slot-backpack .equip-slot-bonus {
  color: #e09a2b;
}

/* Dropzone do baú no popup da Mochila — acende ao arrastar um item por cima
 * (ver dragenter/dragleave em main.js). */
#mochila-dropzone.mochila-dropzone-active,
.mochila-bau-btn.mochila-dropzone-active {
  border-color: #e09a2b;
  background: rgba(224, 154, 43, 0.16);
  color: #f5d99a;
}

/* Abas principais centralizadas: Personagem (equipamento/inventário) e
   Status (atributos, combate e perícias). */
.equip-page-tabs { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.85rem; }
.equip-page-tab { min-width: 9.5rem; padding: 0.55rem 1rem; border: 1px solid rgba(136, 96, 35, 0.45); background: rgba(12, 8, 4, 0.72); color: #a68a59; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.equip-page-tab.is-active { border-color: #df9c27; background: linear-gradient(180deg, #e9a72f, #b87112); color: #201305; }
#equip-modal-panel.equip-page-character #equip-attributes { display: none; }
#equip-modal-panel.equip-page-character .equip-main { grid-template-columns: minmax(0, 1fr); }
#equip-modal-panel.equip-page-status .equip-board-wrap,
#equip-modal-panel.equip-page-status #mochila-modal { display: none !important; }
#equip-modal-panel.equip-page-status .equip-main { display: block; }
#equip-modal-panel.equip-page-status #equip-attributes { max-width: 46rem; margin: 0 auto; }
.equip-status-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.equip-status-layout .equip-skills-group { grid-column: 1 / -1; }
@media (max-width: 640px) { .equip-status-layout { grid-template-columns: 1fr; } .equip-status-layout .equip-skills-group { grid-column: auto; } }

/* --- Modal de Equipamentos redesenhada (modelo "ficha de RPG" — slots ao
 * redor da imagem central do herói, ver equipModalLayoutFor/renderEquipModal
 * em ui.js e o mockup passado pelo jogador). ---------------------------- */
.equip-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .equip-main {
    flex-direction: row;
    align-items: flex-start;
  }
  .equip-board-wrap { flex: 1 1 58%; min-width: 0; }
  .equip-side { flex: 1 1 42%; min-width: 0; }
}

/* [MUDANÇA — pedido do jogador: "tem como a gente deixar nesse layout os
 * slots de equips?" (mandou print de referência: personagem grande no
 * meio, slots em 2 colunas verticais flanqueando dos dois lados) +
 * "aumentar o tamanho do personagem do mid"] Era um grid único de 3
 * colunas com áreas nomeadas (herói ocupando 2 linhas do meio — ver
 * histórico). Virou flex de verdade: coluna esquerda de slots, herói
 * (bem maior agora) ocupando o espaço que sobra, coluna direita de slots
 * — ver equipModalLayoutFor/renderEquipModal em ui.js pro novo jeito de
 * montar essas 3 partes. */
.equip-board {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
}

.equip-board-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 5.4rem;
  width: 5.4rem;
}
.equip-hero-center{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:flex-end}.equip-hero-quick-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.35rem}.equip-hero-quick-actions .btn-stone,.equip-hero-quick-actions .btn-torch{flex:1 1 4.7rem;padding:.34rem .3rem;font-size:.56rem}

/* .eq-area-* não decidem mais POSIÇÃO (isso agora é a ordem dentro de
 * .equip-board-col-left/right) — ficam só como gancho de CSS pra ajuste
 * fino pontual de um slot específico, se precisar no futuro. */

/* Imagem central do herói — transparente, com um "círculo de invocação"
 * sutil atrás (radial dourado), igual o mockup. A arte definitiva vem do
 * jogador (ver equipModalHeroArt em ui.js — por enquanto usa o retrato da
 * classe como fallback). Alinha embaixo (`end center`) pra o herói ficar
 * em pé BEM na auréola, sem vão entre os pés e o círculo. */
.equip-hero-figure {
  display: grid;
  place-items: end center;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 16rem;
  overflow: hidden;
}

.equip-hero-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 78%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(224, 154, 43, 0.28) 0%, rgba(224, 154, 43, 0.08) 55%, transparent 75%);
  pointer-events: none;
}

.equip-hero-figure img {
  position: relative;
  max-height: 19rem;
  max-width: 100%;
  object-fit: contain;
  /* As artes de assets/herois/modais são PNGs grandes (~1200px) — reduzir
   * com suavização fica melhor que image-rendering:pixelated aqui. */
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

/* Ícone da bebida ativa (ver taverna-drinks.js) — pedido do jogador: "não
   quero que o efeito do buff apareça aqui [modal de Equipamentos]... quero
   que ele apareça ali [card do herói]" — ver .hero-card-drink-icon abaixo,
   no card compacto (renderArmy, ui.js), não mais aqui no modal grande. */

/* Célula decorativa vazia (equilíbrio visual quando a classe não usa um dos
 * slots do tabuleiro — ex.: Mão 2 pra quem não é Ladino). */
.equip-slot-decor {
  border: 1px dashed rgba(139, 99, 64, 0.18);
  background: rgba(10, 9, 7, 0.25);
  min-height: 2.6rem;
}

/* --- Seção INVENTÁRIO (Mochila) expansível dentro da modal --------------- */
.equip-inventory-section {
  margin-top: 1rem;
  border-top: 1px solid rgba(140, 108, 70, 0.35);
  padding-top: 0.85rem;
}

.mochila-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 1px solid rgba(140, 108, 70, 0.4);
  font-size: 0.6rem;
  line-height: 1;
  color: #9aa3b0;
  transition: border-color 0.15s, color 0.15s;
}

.mochila-collapse-btn:hover {
  border-color: rgba(196, 165, 116, 0.6);
  color: #e8dcc8;
}

.mochila-sort-select {
  border: 1px solid rgba(140, 108, 70, 0.4);
  background: rgba(18, 14, 10, 0.85);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  color: #9aa3b0;
  padding: 0.15rem 0.25rem;
  max-width: 6.2rem;
}

/* Botão "Dispensar Mercenário" — faixa vermelha forte centralizada, no
 * estilo do mockup do jogador. */
#btn-dismiss-mercenary {
  background: linear-gradient(180deg, rgba(96, 18, 18, 0.5), rgba(52, 9, 9, 0.75));
  border-color: rgba(196, 58, 58, 0.55);
  color: #e08a8a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#btn-dismiss-mercenary:hover {
  background: rgba(120, 22, 22, 0.6);
  border-color: rgba(224, 80, 80, 0.7);
}

/* Item da Mochila compatível com o slot aberto no tabuleiro (ver
 * _equipModalOpenSlot em ui.js) — destaque dourado pra mostrar o que dá pra
 * equipar ali com 1 clique. */
.mochila-slot.is-compatible {
  border-color: rgba(230, 194, 41, 0.85);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 7px rgba(230, 194, 41, 0.4);
}

/* --- Popup da Mochila (estilo inventário 5×8) --------------------------- */
.mochila-panel {
  /* Altura só pelo conteúdo — sem esticar junto do painel de Equipamentos. */
  align-self: center !important;
  height: fit-content !important;
  max-height: none;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
}

.mochila-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  /* Reserva espaço pro botão "×" flutuante (.modal-close-x, top/right:0.6rem,
   * 1.8rem de diâmetro) — sem isso, o botão de ajuda "?" (fim da fileira,
   * empurrado pro canto por justify-content:space-between) ficava embaixo
   * do "×", sobrepondo os dois. */
  padding-right: 2.15rem;
}

.mochila-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mochila-title-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.mochila-title-icon img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.mochila-title-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5b942;
  line-height: 1.1;
}

.mochila-hero-name {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.62rem;
  color: #9aa3b0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7.5rem;
}

.mochila-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mochila-bau-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(196, 165, 116, 0.55);
  background: rgba(32, 26, 20, 0.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e8dcc8;
  transition: border-color 0.15s, background 0.15s;
}

.mochila-count {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #c4a574;
}

.mochila-filters {
  /* BUG VISUAL corrigido aqui (reportado pelo usuário: aba "Misc" — a 5ª —
     caía sozinha numa 2ª linha, desalinhada, quando o popup ficava estreito
     demais pro flex-wrap caber as 5 abas numa linha só). Grade fixa de 5
     colunas iguais (mesmo padrão de .mochila-grid logo abaixo) garante que
     as 5 abas sempre ficam numa única linha, encolhendo o texto/padding
     junto em vez de quebrar linha. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(140, 108, 70, 0.28);
}

.mochila-filter-btn {
  padding: 0.18rem 0.3rem;
  border: 1px solid rgba(140, 108, 70, 0.35);
  background: rgba(18, 14, 10, 0.65);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: #9aa3b0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mochila-filter-btn:hover {
  border-color: rgba(196, 165, 116, 0.55);
  color: #e8dcc8;
}

.mochila-filter-btn.is-active {
  border-color: #f5b942;
  color: #f5d99a;
  background: rgba(224, 154, 43, 0.12);
}

.mochila-grid {
  display: grid;
  /* Células de tamanho fixo compacto (~3.6rem) em vez de 5 colunas
   * esticadas — na modal larga nova os slots ficavam gigantes (reclamação
   * do jogador: "os slots da mochila ficaram muito grandes"). auto-fill
   * encaixa quantas colunas couberem na largura. */
  grid-template-columns: repeat(auto-fill, minmax(2.7rem, 3.2rem));
  justify-content: start;
  gap: 0.25rem;
  max-height: min(24rem, 48vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

/* [MUDANÇA — pedido do jogador: "nos materiais, quero colocar em lista
 * pequenas"] Abas Materiais/Outros (ver walletInventoryGridHtml em ui.js,
 * que liga essa classe no #mochila-grid) trocam o quadriculado grande de
 * itens por uma listinha de 1 linha por material — o nome deixa de ser
 * cortado ("Sucata de A...") porque cresce livre em vez de caber num
 * quadrado de ~3.6rem. */
.mochila-grid.is-list-view {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mochila-list-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(140, 108, 70, 0.3);
  background: rgba(24, 19, 13, 0.75);
  border-radius: 0.25rem;
  transition: border-color 0.15s, background 0.15s;
}

.mochila-list-row:hover {
  border-color: rgba(196, 165, 116, 0.5);
  background: rgba(32, 26, 20, 0.85);
}

.mochila-list-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  font-size: 1rem;
  line-height: 1;
}

.mochila-list-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.mochila-list-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e8dcc8;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.66rem;
}

.mochila-list-count {
  flex: none;
  color: #c4a574;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
}

/* Inventário em navegação lateral: categorias permanecem visíveis enquanto a
   grade compacta troca à direita, como na ficha de personagem. */
.equip-inventory-section:not(.hidden) {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.55rem;
}
.equip-inventory-section .mochila-header { grid-column: 1 / -1; margin-bottom: 0; }
.equip-inventory-section .mochila-filters {
  grid-column: 1;
  grid-row: 2 / span 3;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.35rem 0;
  border: 1px solid rgba(140, 108, 70, 0.3);
  border-bottom: 1px solid rgba(140, 108, 70, 0.3);
}
.equip-inventory-section .mochila-filter-btn {
  min-height: 2.2rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.62rem;
  white-space: normal;
}
.equip-inventory-section .mochila-filter-btn.is-active {
  border-left-color: #bd4a2a;
  background: linear-gradient(90deg, rgba(124, 39, 25, 0.32), transparent);
  color: #f5d99a;
}
.equip-inventory-section .mochila-grid { grid-column: 2; grid-row: 2; max-height: none; min-height: 12.5rem; }
/* Equipamentos: quatro fileiras sempre visíveis; os slots seguintes ficam
 * dentro da própria grade rolável, sem empurrar os controles da ficha. */
.equip-inventory-section .mochila-grid.is-equipment-view {
  /* Sem uma altura explícita para as trilhas, o CSS Grid tentava encolher
     TODAS as linhas para caber no max-height e achatava os quadrados. */
  grid-auto-rows: 3.2rem;
  height: calc(4 * 3.2rem + 3 * 0.25rem);
  min-height: calc(4 * 3.2rem + 3 * 0.25rem);
  max-height: calc(4 * 3.2rem + 3 * 0.25rem);
  overflow-y: auto;
}
.equip-inventory-section .mochila-heal-potion-shelf,
.equip-inventory-section .mochila-select-bar { grid-column: 2; }
@media (max-width: 640px) {
  .equip-inventory-section:not(.hidden) { grid-template-columns: 1fr; }
  .equip-inventory-section .mochila-header,
  .equip-inventory-section .mochila-filters,
  .equip-inventory-section .mochila-grid,
  .equip-inventory-section .mochila-heal-potion-shelf,
  .equip-inventory-section .mochila-select-bar { grid-column: auto; grid-row: auto; }
  .equip-inventory-section .mochila-filters { flex-direction: row; overflow-x: auto; border-left: 0; border-right: 0; }
  .equip-inventory-section .mochila-filter-btn { min-width: 6.5rem; text-align: center; border-left: 0; border-bottom: 2px solid transparent; }
  .equip-inventory-section .mochila-filter-btn.is-active { border-left: 0; border-bottom-color: #bd4a2a; }
}

/* --- Seleção múltipla da Mochila (ver toggleMochilaSelectMode/ui.js) ----
 * [MUDANÇA — pedido do jogador: trocar o botão ☑️ "feio" (emoji solto, sem
 * moldura, destoando do "?"/"Baú" ao lado) por um mini-interruptor on/off
 * com rótulo, opção escolhida entre os 3 mockups enviados. Mesmas cores já
 * usadas no toggle antigo (#9aa3b0 apagado / #f5d99a + dourado ligado), só
 * o desenho mudou. */
.mochila-select-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  padding: 0.16rem 0.4rem 0.16rem 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(140, 108, 70, 0.4);
  background: rgba(32, 26, 20, 0.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9aa3b0;
  transition: border-color 0.15s, color 0.15s;
}

.mochila-select-switch:hover {
  border-color: rgba(196, 165, 116, 0.55);
  color: #e8dcc8;
}

.mochila-select-switch-track {
  position: relative;
  width: 1.5rem;
  height: 0.78rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(140, 108, 70, 0.4);
  background: rgba(18, 14, 10, 0.9);
  transition: background 0.15s, border-color 0.15s;
}

.mochila-select-switch-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #9aa3b0;
  transition: transform 0.15s, background 0.15s;
}

.mochila-select-switch.is-active {
  border-color: #e0a92b;
  color: #f5d99a;
}

.mochila-select-switch.is-active .mochila-select-switch-track {
  background: rgba(224, 154, 43, 0.18);
  border-color: #e0a92b;
}

.mochila-select-switch.is-active .mochila-select-switch-knob {
  transform: translateX(0.72rem);
  background: #e0a92b;
  box-shadow: 0 0 6px rgba(224, 154, 43, 0.6);
}

/* Cabeçalho da Mochila já é apertado (Baú/contagem/ordenar/switch/ajuda/
 * recolher, tudo numa linha só — ver .mochila-header-actions). Em telas
 * estreitas some só o texto "Selecionar", o switch em si continua visível
 * (e mantém o title="..." pra quem passar o mouse/tocar e segurar). */
@media (max-width: 420px) {
  .mochila-select-switch-label { display: none; }
  .mochila-select-switch { padding: 0.2rem 0.3rem; }
}

.mochila-slot.is-selectable {
  cursor: pointer;
}

.mochila-slot.is-selected {
  border-color: #f5b942;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(245, 185, 66, 0.35);
}

.mochila-slot-check {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f5b942;
  color: #1a1410;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Mesmo cadeado do Baú (.equip-slot-lock-badge acima), versão pro grid da
 * Mochila — mesmo canto do .mochila-slot-check (top-left); os dois nunca
 * aparecem juntos (ver renderMochilaModal, ui.js: some sozinho enquanto o
 * item estiver selecionado no modo de seleção). */
.mochila-slot-lock-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.mochila-slot .item-level-badge {
  top: 2px;
  right: 2px;
}

.mochila-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0.4rem 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(245, 185, 66, 0.4);
  background: rgba(224, 154, 43, 0.08);
}

.mochila-select-count {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #e8dcc8;
  white-space: nowrap;
}

.mochila-select-actions {
  display: flex;
  gap: 0.3rem;
}

.mochila-select-action-btn {
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(196, 165, 116, 0.55);
  background: rgba(32, 26, 20, 0.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e8dcc8;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mochila-select-action-btn:hover {
  border-color: rgba(245, 185, 66, 0.7);
  color: #f5d99a;
}

.mochila-select-action-sell:hover {
  border-color: #e0a92b;
  background: rgba(224, 154, 43, 0.16);
}

.mochila-select-action-cancel {
  color: #a89c8c;
}

/* Prateleira de Potes de Cura do baú, dentro do popup da Mochila — clicar
   manda 1 unidade pro herói aberto (ver renderMochilaHealPotionShelf/ui.js,
   moveHealPotionToBackpack/economy.js). Mesmo visual de .mochila-select-bar
   (linha com borda sutil), só que sempre visível quando há pote no baú. */
.mochila-heal-potion-shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(140, 108, 70, 0.35);
  background: rgba(18, 14, 10, 0.5);
}

.mochila-heal-potion-shelf-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #a89c8c;
  width: 100%;
}

.mochila-heal-potion-shelf-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(196, 165, 116, 0.55);
  background: rgba(32, 26, 20, 0.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: #e8dcc8;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mochila-heal-potion-shelf-btn:hover {
  border-color: #f5b942;
  color: #f5d99a;
  background: rgba(224, 154, 43, 0.12);
}

/* Agrupa o botão principal (envia tudo) + o lápis de editar quantidade lado
   a lado, sem quebrar linha entre os dois. */
.mochila-heal-potion-shelf-item {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
}

.mochila-heal-potion-shelf-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.35rem;
  border: 1px solid rgba(196, 165, 116, 0.4);
  background: rgba(32, 26, 20, 0.9);
  font-size: 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.mochila-heal-potion-shelf-edit:hover {
  border-color: #f5b942;
  background: rgba(224, 154, 43, 0.12);
}

/* Mini-formulário inline (quantidade + Enviar/✕) — aberto ao clicar num
   pote da prateleira (ver _mochilaHealPotionShelfOpenKey/ui.js). Pedido do
   jogador: "fazer uma opção de clicar e colocar a quantidade em números e
   clicar em ok?" em vez de mandar 1 por clique. */
.mochila-heal-potion-shelf-form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.18rem 0.3rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  color: #e8dcc8;
}

.mochila-heal-potion-shelf-qty {
  width: 3.2rem;
  padding: 0.12rem 0.25rem;
  border: 1px solid rgba(196, 165, 116, 0.55);
  background: rgba(18, 14, 10, 0.85);
  color: #e8dcc8;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.62rem;
}

.mochila-heal-potion-shelf-ok {
  padding: 0.18rem 0.45rem;
  border: 1px solid #f5b942;
  background: rgba(224, 154, 43, 0.18);
  color: #f5d99a;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.mochila-heal-potion-shelf-ok:hover {
  background: rgba(224, 154, 43, 0.3);
}

.mochila-heal-potion-shelf-cancel {
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(140, 108, 70, 0.45);
  background: rgba(32, 26, 20, 0.9);
  color: #a89c8c;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  cursor: pointer;
}

.mochila-heal-potion-shelf-cancel:hover {
  color: #e8dcc8;
  border-color: rgba(196, 165, 116, 0.55);
}

.mochila-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 108, 70, 0.45);
  background: linear-gradient(180deg, rgba(36, 28, 20, 0.95), rgba(16, 12, 9, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  min-height: 0;
}

.mochila-slot.is-empty {
  opacity: 0.85;
  cursor: default;
}

.mochila-slot.is-filled {
  cursor: grab;
  border-color: rgba(196, 165, 116, 0.65);
}

.mochila-slot.is-filled:active {
  cursor: grabbing;
}

.mochila-slot-icon {
  width: 70%;
  height: 70%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

.mochila-slot-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Badge "×N" no canto do slot da Mochila — mesma ideia do Baú
 * (equip-slot-label), só que aqui o slot é só ícone (sem texto), então vira
 * um selo no canto em vez de ficar embutido no rótulo (ver groupInventoryItems/
 * renderMochilaModal em ui.js — materiais/ferramentas/poções empilham,
 * armadura/arma não). */
.mochila-slot-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  min-width: 1.1rem;
  padding: 0 0.2rem;
  border-radius: 2px;
  background: rgba(10, 8, 6, 0.85);
  border: 1px solid rgba(196, 165, 116, 0.5);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
  color: #f0c98a;
  pointer-events: none;
}

/* Carteiras de Materiais e Outros: recursos globais, sem arrastar nem ocupar
   slots da Mochila. Mantém a mesma linguagem visual da grade. */
/* .mochila-wallet-slot/.mochila-wallet-name ficaram mortas depois da troca
 * pra lista (ver .mochila-list-row/.mochila-grid.is-list-view acima) —
 * removidas. .mochila-wallet-empty continua (texto "Nenhum item ainda"). */
.mochila-wallet-empty { margin: 0.5rem; color: #86785e; font-family: var(--font-ui); font-size: 0.7rem; font-style: italic; }

/* Grupo de 4 slots trancado a cadeado (ver MOCHILA_GROUP_UNLOCK_COSTS em
 * config.js / renderMochilaModal em ui.js) — pedido do jogador: "um cadeado
 * com corrente em grupo de 4 slots". .is-unlockable = próximo grupo na fila
 * (clicável, mostra custo); sem essa classe = grupo mais à frente, ainda
 * bloqueado até destravar o(s) anterior(es) (não clicável). */
.mochila-slot.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  background: repeating-linear-gradient(
    135deg,
    rgba(10, 8, 6, 0.95),
    rgba(10, 8, 6, 0.95) 4px,
    rgba(30, 22, 14, 0.95) 4px,
    rgba(30, 22, 14, 0.95) 8px
  );
}

.mochila-slot.is-locked.is-unlockable {
  cursor: pointer;
  opacity: 0.9;
  border-color: rgba(230, 194, 41, 0.6);
}

.mochila-slot.is-locked.is-unlockable:hover {
  border-color: rgba(230, 194, 41, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 6px rgba(230, 194, 41, 0.35);
}

.mochila-slot-lock-icon {
  font-size: 0.95rem;
  opacity: 0.85;
  pointer-events: none;
}

.mochila-slot-lock-cost {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.5rem;
  color: #f0c98a;
  pointer-events: none;
  white-space: nowrap;
}

.mochila-slot.rarity-comum { border-color: rgba(154, 163, 176, 0.55); }
.mochila-slot.rarity-magico { border-color: rgba(94, 163, 216, 0.7); }
.mochila-slot.rarity-raro { border-color: rgba(230, 194, 41, 0.8); }
.mochila-slot.rarity-lendario {
  border-color: rgba(224, 154, 43, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 8px rgba(224, 154, 43, 0.35);
}

/* --- Aba "Armas" do Mercado (ver renderMercadoModal em ui.js) — mesmo
 *  espírito visual da grade da Mochila acima (.mochila-slot), só que o
 *  clique aqui SELECIONA o slot (mostra preço/comprar no painel de detalhe
 *  logo abaixo) em vez de arrastar/abrir menu de contexto. */
.mercado-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  /* Trava em ~4 linhas visíveis (5 colunas × 4 linhas = 20 slots) com
   * scroll PRÓPRIO pro resto — sem isso, uma lista grande (baú cheio, Forja
   * com muito item elegível) esticava a grade inteira e empurrava o popup
   * pra rolagem da PÁGINA toda, em vez de rolar só a grade. */
  max-height: 22rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

.mercado-grid::-webkit-scrollbar {
  width: 6px;
}
.mercado-grid::-webkit-scrollbar-thumb {
  background: rgba(166, 124, 82, 0.4);
}

.mercado-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 108, 70, 0.45);
  background: linear-gradient(180deg, rgba(36, 28, 20, 0.95), rgba(16, 12, 9, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.mercado-slot:hover {
  transform: translateY(-1px);
}

.mercado-slot.is-empty {
  opacity: 0.85;
  cursor: default;
}

.mercado-slot-icon {
  width: 70%;
  height: 70%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

.mercado-slot-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.mercado-slot.rarity-comum { border-color: rgba(154, 163, 176, 0.55); }
.mercado-slot.rarity-magico { border-color: rgba(94, 163, 216, 0.7); }
.mercado-slot.rarity-raro { border-color: rgba(230, 194, 41, 0.8); }
.mercado-slot.rarity-lendario {
  border-color: rgba(224, 154, 43, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 8px rgba(224, 154, 43, 0.35);
}

/* .is-selected vem DEPOIS das regras de raridade de propósito, pra sempre
 * ganhar (mesma especificidade CSS — quem vem por último no arquivo vence). */
.mercado-slot.is-selected {
  border-color: #f5b942;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 8px rgba(224, 154, 43, 0.55);
}

.mercado-slot-discount {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 0.5rem;
  padding: 0 0.15rem;
  background: rgba(107, 143, 78, 0.85);
  color: #0a0907;
  font-weight: 700;
  pointer-events: none;
}

/* Selo de nível dos equipamentos dentro da vitrine do Mercado. */
.mercado-slot-level {
  position: absolute;
  top: 0.18rem;
  right: 0.2rem;
  z-index: 1;
  min-width: 1.15rem;
  padding: 0.06rem 0.18rem;
  border: 1px solid rgba(245, 185, 66, 0.62);
  background: rgba(12, 9, 5, 0.88);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: #f5d071;
  pointer-events: none;
}

.mercado-slot.has-price .mercado-slot-discount { top: 0.18rem; left: 0.2rem; right: auto; }

/* Figurinha ainda não desbloqueada no álbum do Craftar da Forja — a imagem
 * já vem em cinza (ver filter: grayscale inline no ui.js), aqui só o
 * cadeado central por cima + o slot fica meio apagado, pra deixar claro que
 * dá pra ver o item mas ainda não craftar. */
.mercado-slot.is-locked {
  opacity: 0.55;
  cursor: pointer;
}

.mercado-slot-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.mercado-detail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(90, 74, 55, 0.4);
  background: rgba(10, 9, 7, 0.45);
  min-height: 4rem;
}

.mercado-detail-img {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* --- Tabuleiro do popup de equipamentos (herói no centro) ------------- */
.equip-slot-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.42rem 0.2rem;
  background: rgba(10, 9, 7, 0.35);
  border: 1px dashed rgba(196, 165, 116, 0.25);
  opacity: 0.6;
  cursor: default;
}
.equip-slot-placeholder .equip-slot-icon {
  font-size: 1rem;
  filter: grayscale(1);
  opacity: 0.7;
}
.equip-slot-soon {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.equip-portrait-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}
.equip-portrait-cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid rgba(224, 154, 43, 0.55);
  border-radius: 0.25rem;
  image-rendering: pixelated;
  background: #0a0907;
}

/* --- Mapa de Eldoria: zoom/pan no popup ampliado ---------------------- */
#map-zoom-viewport {
  touch-action: none;
  cursor: grab;
  aspect-ratio: 1050 / 700;
  user-select: none;
  -webkit-user-select: none;
}
#map-zoom-viewport img {
  -webkit-user-drag: none;
  user-drag: none;
}
#map-zoom-viewport.is-zoomed {
  cursor: grab;
}
#map-zoom-viewport.is-dragging {
  cursor: grabbing;
}
#expedition-map {
  transform-origin: 0 0;
  will-change: transform;
}
#expedition-map.is-panning {
  transition: none;
}
#expedition-map:not(.is-panning) {
  transition: transform 0.12s ease-out;
}

/* --- Mapa de Eldoria: trilha animada das expedições ------------------ */
.map-trail-path {
  fill: none;
  stroke: rgba(224, 154, 43, 0.85);
  stroke-width: 0.22;
  stroke-dasharray: 0.9 0.7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.map-marker-dest {
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  background: #d63b2f;
  border: 1px solid rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -100%) rotate(-45deg);
}
/* --- Mapa de Eldoria: rota da invasão vindo até o castelo ------------- */
.map-trail-path-threat {
  fill: none;
  stroke: rgba(196, 57, 43, 0.8);
  stroke-width: 0.24;
  stroke-dasharray: 0.5 0.9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.map-marker-threat-origin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b0f0a;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 6px rgba(196, 57, 43, 0.65);
}
.map-marker-threat {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(25, 5, 4, 0.92);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(196, 57, 43, 0.9);
  animation: invasion-marker-pulse 1.3s infinite ease-in-out;
  transition: left 1s linear, top 1s linear;
}
@keyframes invasion-marker-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(196, 57, 43, 0.55); }
  50% { box-shadow: 0 0 16px rgba(196, 57, 43, 0.95); }
}

/* --- Mapa de Eldoria: pins das missões disponíveis (ainda não despachadas) */
.map-marker-mission {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 30%, #e0b85a, #a6672a);
  border: 1px solid rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -100%) rotate(-45deg);
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.15s ease;
}

.map-marker-mission:hover {
  filter: drop-shadow(0 0 6px rgba(224, 154, 43, 0.85));
}

.map-marker-mission.is-selected {
  background: radial-gradient(circle at 35% 30%, #ffe08a, #e09a2b);
  box-shadow: 0 0 8px rgba(224, 154, 43, 0.75);
}

.map-marker-mission.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Zona clicável do reino vizinho (KINGDOMS, config.js) — SEM pin visível
   parado em cima do mapa (pedido do jogador: "deixa quando passar o mouse
   em cima do reino, ele meio que fica um glow em volta", "queria um glow
   igual vc tinha montado aqui pras imagens da fortaleza" — mesmo visual do
   hover dos prédios em #fortress-view, ver .fortress-hotspot-label acima:
   brilho âmbar + etiqueta com o nome aparecendo por baixo). O mapa é uma
   imagem única (sem camada separada por reino como as construções da
   Fortaleza), então o "contorno de verdade" vira um brilho circular âmbar
   ao redor da área — mais discreto que o antigo círculo azul sempre visível.
   Clique abre openKingdomModal (ver [data-kingdom] em main.js). */
/* [ATUALIZADO — pedido do jogador: "queria colocar um top down pra
   selecionar as cidades em vez de ficar clicando, e aí você pode tirar a
   funcionalidade de clicar nas outras cidades"] Pin virou só RÓTULO — sem
   glow de hover, sem cursor de clique, sem pointer-events (não abre mais
   nada — quem abre o popup do reino agora é o dropdown #map-kingdom-select,
   ver ui.js/main.js). Nome sempre visível (antes só aparecia no hover, que
   não existe mais). */
.map-marker-kingdom {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* [REMOVIDO — pedido do jogador: "retira esses nomes aqui"] A etiqueta de
   texto (.map-marker-kingdom-label) sumiu do markup (ver renderExpeditionMap,
   ui.js) — o mapa já tem os nomes das cidades desenhados nele, a tag preta
   duplicava. Regra deixada comentada só de referência, não é mais usada. */

/* --- "Você está aqui" — token FIXO na cidade onde o Herói principal está
   agora (ver currentLocationMarkerHtml, ui.js — pedido do jogador: "tanto no
   minimapa quanto no mapa grande, queria deixar um token meio que pré-fixo
   pra poder saber em qual cidade está"). Sempre visível nos dois mapas,
   independente de expedição/grind em andamento — bandeira dourada com um
   pulso sutil pra chamar atenção sem competir com o marcador de ameaça
   (vermelho, mais urgente). */
.map-marker-current-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}
/* [ATUALIZADO — pedido do jogador: "esse token ali do jogador, aquilo que
   vai estar mostrando onde que o player está e não esse emoji de token"]
   Era um emoji de bandeira (font-size); virou o retrato pixel art do Herói
   principal (heroPortrait, ver currentLocationMarkerHtml em ui.js). */
.map-marker-current-location-token {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 154, 43, 0.9);
  background: #0a0907;
  animation: current-location-pulse 1.8s infinite ease-in-out;
  filter: drop-shadow(0 0 4px rgba(224, 154, 43, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.map-marker-current-location-label {
  margin-top: 0.15rem;
  padding: 0.08rem 0.35rem;
  background: rgba(10, 9, 7, 0.9);
  border: 1px solid rgba(224, 154, 43, 0.55);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #f5c26b;
  white-space: nowrap;
}
@keyframes current-location-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
/* Variante do minimapa (card pequeno da tela principal, ver #map-thumbnail)
   — só a bandeira, sem a etiqueta de texto (não cabe num card tão pequeno);
   o nome da cidade continua disponível via `title` no elemento. */
.map-marker-current-location.is-thumb .map-marker-current-location-token {
  width: 0.85rem;
  height: 0.85rem;
}
.map-marker-current-location.is-thumb .map-marker-current-location-label {
  display: none;
}

/* --- Pontos de parada (waypoints) de uma expedição "longa" selecionada —
   ver mapWaypoints (waypointGeoAndChoices em state.js) e o loop extra em
   renderExpeditionMap (ui.js). Sempre verde, não-interativo (só ilustra a
   rota, não clicável como .map-marker-mission). */
.map-marker-waypoint {
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 30%, #9dd18a, #3f7d3a);
  border: 1px solid rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -100%) rotate(-45deg);
  pointer-events: none;
}

.map-marker-hero {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(224, 154, 43, 0.85);
  background: rgba(10, 9, 7, 0.6);
  object-fit: cover;
  transition: left 0.25s linear, top 0.25s linear;
}
.map-marker-battle {
  width: 46px;
  height: 46px;
  margin-top: -40px;
  background-image: url('../assets/esgrima_spritesheet.png');
  background-repeat: no-repeat;
  background-size: 644px 36px; /* 14 quadros de 46px */
  image-rendering: pixelated;
  animation: esgrima-sprite 1.4s steps(14) infinite;
}
@keyframes esgrima-sprite {
  from { background-position: 0 0; }
  to { background-position: -644px 0; }
}
.progress-fill-battle {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(214, 59, 47, 0.9),
    rgba(214, 59, 47, 0.9) 6px,
    rgba(232, 93, 76, 0.6) 6px,
    rgba(232, 93, 76, 0.6) 12px
  );
  animation: progress-battle-pulse 0.6s infinite alternate;
}
@keyframes progress-battle-pulse {
  0% { opacity: 0.75; }
  100% { opacity: 1; }
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--text-primary);
  min-height: 100vh;
  background-color: var(--bg-page);
  background-image:
    radial-gradient(ellipse 78% 42% at 50% -8%, rgba(116, 75, 24, 0.12), transparent 68%),
    linear-gradient(180deg, #0d0c0a 0%, var(--bg-page) 58%);
  /* Desliga seleção de texto/arrastar (clique-e-arrasta) em QUALQUER lugar
     do jogo — pedido do jogador, mesmo padrão do bloqueio do menu de
     contexto (ver contextmenu em main.js). Inputs/textareas continuam
     selecionáveis via a regra abaixo (senão o jogador não consegue nem
     editar o próprio nome do herói). */
  user-select: none;
  -webkit-user-select: none;
}
input, textarea {
  user-select: text;
  -webkit-user-select: text;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(185, 115, 22, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(74, 107, 53, 0.08), transparent),
    radial-gradient(ellipse 50% 35% at 0% 60%, rgba(143, 36, 25, 0.08), transparent),
    linear-gradient(180deg, #211a11 0%, #0b0a08 55%, #050403 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
}

.panel {
  position: relative;
  background: linear-gradient(180deg, #1b1712 0%, #12100d 45%, #0d0c0a 100%);
  border: 1px solid var(--border-default);
  box-shadow:
    inset 0 0 0 1px rgba(210, 154, 60, 0.05),
    0 4px 14px rgba(0, 0, 0, 0.55);
  animation: riseIn 0.55s ease-out both;
}

.panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(90, 74, 55, 0.35);
  pointer-events: none;
}

.panel-title {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
}

/* Botão redondo "×" no canto superior direito dos popups — substitui a
 * barra cheia "Fechar" no rodapé (removida da maioria dos popups: menos
 * clique pra rolar até embaixo, e o resto do rodapé sobra livre pra ação de
 * verdade do popup, tipo "Iniciar Expedição"/"Resgatar"/"Trocar"). Mantém o
 * MESMO id/handler de clique de antes — só mudou aparência e posição. */
.modal-close-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(166, 124, 82, 0.4);
  background: rgba(10, 9, 7, 0.55);
  color: #c9bfae;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.modal-close-x:hover {
  color: #f5e4dc;
  border-color: rgba(196, 165, 116, 0.6);
  background: rgba(143, 36, 25, 0.35);
  transform: scale(1.05);
}

.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(166, 124, 82, 0.7);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.55), transparent);
}

/* --- Recursos (cabeçalho) --- */
.resource-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 6rem;
  padding: 0.4rem 0.7rem;
  background: var(--bg-panel-secondary);
  border: 1px solid var(--border-dark);
  box-shadow: inset 0 1px 0 rgba(210, 154, 60, 0.04);
}

/* [ATUALIZADO — pedido do jogador: "diminuir também o tamanho das imagens
   dos recursos... a fonte das quantidades também, estão muito grandes"]
   Ícone 2rem → 1.35rem e a quantidade (ver .font-display.text-lg → text-sm
   em index.html) — chip inteiro encolheu proporcionalmente (gap/padding/
   min-width acima) pra não sobrar espaço vazio em volta do ícone menor. */
.resource-icon {
  width: 1.35rem;
  height: 1.35rem;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* --- Estruturas --- */
.structure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-panel-elevated);
  border: 1px solid #443521;
  transition: border-color 0.2s, background 0.2s;
}

.structure-row:hover {
  border-color: var(--border-bronze);
  background: var(--bg-card-hover);
}

.structure-icon {
  width: 3rem;
  height: 3rem;
  image-rendering: pixelated;
  border: 1px solid rgba(90, 74, 55, 0.5);
  background: #0a0907;
  flex-shrink: 0;
}

/* --- Ilustração clicável da Fortaleza (Muralha/Fortaleza/Taverna/Quartel/Mercado) --- */
/* Camadas independentes: Muralha é o fundo (ocupa o palco inteiro); Castelo,
 * Taverna, Quartel e Mercado são recortes com fundo transparente
 * posicionados por cima, cada um evoluindo de imagem sozinho conforme o
 * nível/construção — sem precisar de uma ilustração inteira nova a cada
 * combinação de upgrades. */
.fortress-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0907;
}

.fortress-layer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.fortress-layer-frame {
  position: absolute;
  pointer-events: none;
  transition: top 0.3s ease, width 0.3s ease, left 0.3s ease;
}

.fortress-layer-frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
  transition: opacity 0.3s ease, filter 0.2s ease;
}

.fortress-layer-castelo {
  transform: translateX(-50%);
  z-index: 3;
}

.fortress-layer-side {
  z-index: 4;
}

/* Trocado o composto de camadas em PNG por nível pela imagem única de Dunmar
 * (ver renderFortress em ui.js) — o glow agora é o mesmo box-shadow + borda
 * arredondada acompanhando o retângulo do hotspot que os reinos estrangeiros
 * já usam (.kingdom-hotspot), em vez de drop-shadow em cima de uma camada
 * separada que não existe mais. */
.fortress-hotspot {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 6;
  transition: transform 0.2s ease;
}

.fortress-hotspot::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(236, 180, 59, 0.34) 0%, rgba(224, 154, 43, 0.13) 42%, transparent 72%);
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.78);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fortress-hotspot:hover::before,
.fortress-hotspot.is-selected::before {
  opacity: 1;
  transform: scale(1);
}

.fortress-hotspot.is-locked:hover::before {
  background: radial-gradient(ellipse, rgba(172, 63, 46, 0.3) 0%, rgba(150, 40, 30, 0.1) 45%, transparent 72%);
}

/* Legado — mantido pra não quebrar nada que ainda referencie a classe, mas a
 * Muralha não usa mais o layer 100%/100% de antes (agora é um hotspot
 * retangular normal, como os outros). */
.fortress-hotspot-muralha {
  z-index: 2;
}

/* Em vez de uma caixa retangular brilhando por cima (ficava "neon" contra o
 * fundo transparente das construções), o destaque de hover/seleção é um
 * brilho suave que segue o contorno de verdade da imagem (drop-shadow
 * respeita o alfa do PNG). A Muralha, que é o fundo cheio, usa uma
 * vinheta mais discreta em vez de contorno. */
.fortress-hotspot[data-structure='taverna']:hover ~ #fortress-taverna-layer img,
.fortress-hotspot[data-structure='taverna'].is-selected ~ #fortress-taverna-layer img,
.fortress-hotspot[data-structure='fortaleza']:hover ~ #fortress-castelo-layer img,
.fortress-hotspot[data-structure='fortaleza'].is-selected ~ #fortress-castelo-layer img,
.fortress-hotspot[data-structure='quartel']:hover ~ #fortress-quartel-layer img,
.fortress-hotspot[data-structure='quartel'].is-selected ~ #fortress-quartel-layer img,
.fortress-hotspot[data-structure='mercado']:hover ~ #fortress-mercado-layer img,
.fortress-hotspot[data-structure='mercado'].is-selected ~ #fortress-mercado-layer img {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(224, 154, 43, 0.75))
    brightness(1.06);
}

.fortress-hotspot-muralha:hover ~ .fortress-layer-bg,
.fortress-hotspot-muralha.is-selected ~ .fortress-layer-bg {
  filter: brightness(1.05) saturate(1.05) drop-shadow(0 0 16px rgba(224, 154, 43, 0.65));
}

.fortress-hotspot.is-locked {
  cursor: not-allowed;
}

.fortress-hotspot[data-structure='taverna'].is-locked:hover ~ #fortress-taverna-layer img,
.fortress-hotspot[data-structure='quartel'].is-locked:hover ~ #fortress-quartel-layer img,
.fortress-hotspot[data-structure='mercado'].is-locked:hover ~ #fortress-mercado-layer img {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 9px rgba(150, 40, 30, 0.6));
}

.fortress-hotspot-label {
  margin-bottom: -1.4rem;
  padding: 0.1rem 0.4rem;
  background: rgba(10, 9, 7, 0.85);
  border: 1px solid rgba(90, 74, 55, 0.5);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e8e0d4;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.fortress-hotspot:hover .fortress-hotspot-label,
.fortress-hotspot.is-selected .fortress-hotspot-label {
  opacity: 1;
}

/* Hotspots das estruturas dentro do popup de reino (kingdom-modal — ver
 * KINGDOM_STRUCTURES_STANDARD em config.js e openKingdomModal em ui.js).
 * Aqui não tem PNG recortado por prédio como na Fortaleza (o jogador pediu
 * pra usar uma imagem só e "contornar" a área aproximada), então o glow é
 * simulado com box-shadow + borda arredondada acompanhando o retângulo do
 * hotspot em vez de drop-shadow seguindo o alfa da imagem. */
.kingdom-hotspot {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Pedido do jogador: "tira esses glows aqui e deixa eles transparentes ou
 * sem nada mesmo pq eu achei que ele iria ficar somente as estruturas...
 * mas nao foi" — o hover antes desenhava um retângulo inteiro brilhando
 * (borda + box-shadow + fundo) do tamanho do hotspot inteiro, bem maior que
 * a estrutura em si. Área de clique continua a mesma (cursor muda), só não
 * pinta mais nada — o rótulo (.kingdom-hotspot-label) já aparece sozinho no
 * hover, isso é o único feedback visual que sobra. */
.kingdom-hotspot:hover {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.kingdom-hotspot.is-locked {
  cursor: not-allowed;
}

.kingdom-hotspot.is-locked:hover {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.kingdom-hotspot-label {
  margin-bottom: -1.3rem;
  padding: 0.1rem 0.4rem;
  background: rgba(10, 9, 7, 0.9);
  border: 1px solid rgba(90, 74, 55, 0.5);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e8e0d4;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  pointer-events: none;
}

.kingdom-hotspot.is-locked .kingdom-hotspot-label {
  color: #c99a91;
}

.kingdom-hotspot:hover .kingdom-hotspot-label {
  opacity: 1;
}

/* --- Botões --- */
.btn-stone {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  background: #211a12;
  border: 1px solid #644923;
  color: #d6b06a;
  transition: transform 0.15s, filter 0.15s, opacity 0.15s;
}

.btn-stone:hover:not(:disabled) {
  background: #302315;
  border-color: #a3732b;
  filter: none;
  transform: translateY(-1px);
}

.btn-stone:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Bolinha vermelha no botão "✉️ Tarefas" — avisa que a tarefa do dia atual
 * já pode ser resgatada (ver renderDailyTasksModal em ui.js). */
.daily-task-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #e0473a;
  border: 1px solid #2e2820;
  box-shadow: 0 0 6px rgba(224, 71, 58, 0.7);
}

/* Botão flutuante "Contratos Ativos" e seu popup (ver renderFloatingContracts
 * em ui.js) — fica fixo no canto da tela, por cima de tudo, independente
 * de qual painel/modal está aberto no momento. */
/* Botão "?" de ajuda contextual (ver HELP_TOPICS em help-content.js,
   openHelpModal em ui.js) — pequeno, inline ao lado de títulos de painel,
   pra não competir visualmente com os botões de ação de verdade. */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: #e0a92b;
  background: rgba(224, 154, 43, 0.12);
  border: 1px solid rgba(224, 154, 43, 0.45);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.help-btn:hover {
  background: rgba(224, 154, 43, 0.28);
  transform: scale(1.08);
}

/* Corpo das modais de ajuda (?) — NÃO usa Cormorant Garamond (font-body):
 * serif fino em fundo escuro fica ilegível no celular. Source Sans 3,
 * tamanho maior, contraste alto e entrelinha folgada. */
.help-modal-body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: #e8e0d4;
  font-style: normal;
  letter-spacing: 0.01em;
}

.help-modal-body b,
.help-modal-body strong {
  font-weight: 700;
  color: #f5b942;
}

.help-modal-body i,
.help-modal-body em {
  font-style: italic;
  color: #c8cdd4;
}

/* Coluna de botões flutuantes fixos (Novidades/Guia/Bestiário — ver
 * #quick-fab-stack em index.html) — mesmo visual do ícone de Contratos logo
 * abaixo (.floating-contracts-btn), empilhada por CIMA dele, no MESMO lado
 * direito (pedido do jogador). O painel de Contratos (.floating-contracts-
 * panel) foi empurrado pra cima o suficiente (ver bottom ali embaixo) pra
 * abrir por cima de TODA essa coluna em vez de cobri-la. Empilha na ORDEM
 * do HTML (de cima pra baixo) — um botão novo desse tipo só precisa entrar
 * dentro de #quick-fab-stack que já entra na pilha sozinho, sem precisar
 * mexer em CSS/posição nenhuma (só ajustar o bottom do painel de Contratos
 * se a pilha ficar mais alta). */
.quick-fab-stack {
  position: fixed;
  right: 1.1rem;
  bottom: 4.6rem;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quick-fab-btn {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: linear-gradient(180deg, #2a231a, #17130d);
  border: 1px solid rgba(224, 154, 43, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(224, 154, 43, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quick-fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(224, 154, 43, 0.35);
}

.floating-contracts-btn {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 45;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: linear-gradient(180deg, #2a231a, #17130d);
  border: 1px solid rgba(224, 154, 43, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(224, 154, 43, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.floating-contracts-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(224, 154, 43, 0.35);
}

.floating-contracts-panel {
  position: fixed;
  /* Abre do LADO do próprio botão (mesma altura, bottom:1.1rem — igual o
   * ícone de Contratos), não mais acima da coluna de #quick-fab-stack: com
   * bottom empurrado pra cima o painel abria longe do botão que o jogador
   * acabou de clicar. right = largura do botão (3rem) + respiro (0.6rem)
   * a partir do mesmo right:1.1rem do botão. */
  right: 4.6rem;
  bottom: 1.1rem;
  z-index: 45;
  width: 17.5rem;
  max-height: 60vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1510, #12100c);
  border: 1px solid rgba(139, 99, 64, 0.35);
  border-radius: 6px;
  padding: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.btn-torch {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e0a02d 0%, #b87519 55%, #915814 100%);
  color: #1b1107;
  border: 1px solid #efbd52;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 14px rgba(202, 139, 34, 0.16);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}

.btn-torch:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(202, 139, 34, 0.26);
}

.btn-torch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* Botão de ação destrutiva (ex: "Quebrar" item na Forja) — mesma família
 * visual do btn-torch mas em tom sangue, pra deixar claro que a ação é
 * irreversível (o item some e vira sucata/material). */
.btn-blood {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #a83a2b, #7a1f15);
  color: #f5e4dc;
  border: 1px solid #d65a42;
  box-shadow: 0 0 20px rgba(168, 58, 43, 0.25);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}

.btn-blood:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(168, 58, 43, 0.4);
}

.btn-blood:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Popup da Forja (Ferraria): pele "interior de forja" (pedido do
 * jogador, referência com brasas/bigorna) — escopado só em #ferraria-modal
 * pra não vazar pra nenhum outro popup/painel do jogo. Reaproveita o mesmo
 * .panel de sempre (gradiente + borda dourada), só soma a imagem de fundo
 * por baixo de um véu escuro (mantém o texto/legibilidade idêntico ao resto
 * do jogo). Ver docs/ui-mockup/forja-*.html pro protótipo aprovado. */
.forja-modal-panel {
  background-image:
    linear-gradient(180deg, rgba(10, 7, 4, 0.88) 0%, rgba(10, 7, 4, 0.93) 100%),
    url('../assets/page_layout/forja_bg.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(246, 197, 101, 0.12);
}

.forja-main-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; padding: 0.35rem; border: 1px solid rgba(166, 124, 82, 0.27); background: rgba(8, 6, 4, 0.55); }
.forja-main-tabs .report-tab-btn { min-height: 3.15rem; padding: 0.4rem 0.2rem; font-size: 0.61rem; line-height: 1.2; text-align: center; }
.forja-reforge-intro { margin-bottom: 0.65rem; padding: 0.55rem 0.7rem; border-left: 2px solid rgba(245, 185, 66, 0.9); background: linear-gradient(90deg, rgba(224, 154, 43, 0.1), transparent); color: rgba(215, 190, 151, 0.8); font-family: 'Source Sans 3', sans-serif; font-size: 0.7rem; }
.forja-reforge-detail { display: flex; width: 100%; flex-direction: column; gap: 0.75rem; }
.forja-reforge-item-header { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(166, 124, 82, 0.35); background: linear-gradient(115deg, rgba(74, 49, 25, 0.38), rgba(9, 7, 5, 0.68)); }
.forja-reforge-item-header .mercado-detail-img { width: 3rem; height: 3rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.forja-reforge-kicker, .forja-reforge-section-head span { margin: 0; color: #d4a75e; font-family: 'Cinzel', serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.forja-reforge-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; }
.forja-reforge-section-head small { color: rgba(175, 146, 105, 0.72); font-family: 'Source Sans 3', sans-serif; font-size: 0.65rem; text-align: right; }
.forja-reforge-effects { display: flex; flex-direction: column; gap: 0.35rem; }
.forja-reforge-effect { display: flex; flex-direction: column; align-items: stretch; gap: 0.26rem; min-height: 2.5rem; padding: 0.38rem 0.48rem 0.34rem 0.6rem; border: 1px solid rgba(112, 83, 51, 0.42); background: rgba(6, 5, 4, 0.56); transition: border-color 0.15s, background 0.15s; }
.forja-reforge-effect:hover { border-color: rgba(217, 166, 76, 0.65); background: rgba(70, 44, 16, 0.27); }
.forja-reforge-effect.is-target { border-color: #f2b842; background: linear-gradient(90deg, rgba(221, 147, 28, 0.2), rgba(16, 10, 5, 0.62)); box-shadow: inset 3px 0 0 #f2b842; }
.forja-reforge-effect.is-locked { opacity: 0.68; }
.forja-reforge-effect-select { display: flex; width: 100%; min-width: 0; align-items: center; gap: 0.5rem; border: 0; background: transparent; color: #e8e0d4; font-family: 'Source Sans 3', sans-serif; font-size: 0.76rem; font-weight: 700; text-align: left; }
.forja-reforge-effect-select:disabled { cursor: not-allowed; }
.forja-reforge-effect-dot { width: 0.45rem; height: 0.45rem; flex: none; border: 1px solid rgba(214, 169, 91, 0.62); border-radius: 50%; }
.is-target .forja-reforge-effect-dot { background: #f5b942; box-shadow: 0 0 8px #f5b942; }
.forja-reforge-effect-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forja-effect-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.42rem; min-height: 1.35rem; padding-left: 0.95rem; }
.forja-effect-pips { display: inline-flex; flex: none; gap: 0.16rem; margin-right: auto; padding-right: 0.1rem; }
.forja-effect-pips i { width: 0.32rem; height: 0.32rem; border: 1px solid rgba(207, 157, 74, 0.58); border-radius: 50%; background: rgba(11, 8, 4, 0.7); }
.forja-effect-pips i.is-filled { border-color: #f2b842; background: #f2b842; box-shadow: 0 0 5px rgba(242, 184, 66, 0.6); }
.hint-balloon-row-value .forja-effect-pips { margin: 0; padding: 0; vertical-align: middle; }
.forja-reforge-transform { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.65rem; padding: 0.65rem 0.75rem; border: 1px dashed rgba(166, 124, 82, 0.42); background: rgba(8, 6, 4, 0.48); }
.forja-reforge-transform div { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.forja-reforge-transform div:last-child { text-align: right; }
.forja-reforge-transform small { color: rgba(183, 151, 108, 0.73); font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; }
.forja-reforge-transform strong { overflow: hidden; color: #eee5d5; font-family: 'Source Sans 3', sans-serif; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.forja-reforge-transform .is-random { color: #dba64d; font-style: italic; font-weight: 600; }
.forja-reforge-arrow { color: #f2b842; font-size: 1.15rem; text-shadow: 0 0 9px rgba(242, 184, 66, 0.45); }
.forja-reforge-cost-card { padding: 0.7rem; border: 1px solid rgba(166, 124, 82, 0.32); background: linear-gradient(135deg, rgba(60, 39, 18, 0.32), rgba(8, 6, 4, 0.66)); }
.forja-reforge-resource-grid { display: grid; grid-template-columns: minmax(0, 16rem); gap: 0.4rem; margin-top: 0.55rem; }
.forja-reforge-resource { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.35rem; align-items: center; padding: 0.45rem; border: 1px solid rgba(139, 105, 61, 0.35); background: rgba(0, 0, 0, 0.25); }
.forja-reforge-resource.is-missing { border-color: rgba(185, 70, 54, 0.75); background: rgba(105, 25, 20, 0.2); }
.forja-reforge-resource-icon { grid-row: span 2; font-size: 1rem; }
.forja-reforge-resource-label { overflow: hidden; color: rgba(217, 194, 155, 0.78); font-family: 'Cinzel', serif; font-size: 0.53rem; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.forja-reforge-resource-values { color: #b9d28a; font-family: 'Source Sans 3', sans-serif; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.forja-reforge-resource-values small { color: rgba(214, 190, 151, 0.65); font-size: 0.62rem; font-weight: 400; }
.is-missing .forja-reforge-resource-values { color: #ef786a; }
.forja-reforge-action { width: 100%; padding: 0.72rem 1rem; font-size: 0.82rem; letter-spacing: 0.04em; }

/* --- Arena / Torre Infinita ------------------------------------------ */
.arena-modal-panel { background-image: linear-gradient(180deg, rgba(12, 8, 4, 0.9), rgba(8, 7, 6, 0.96)), radial-gradient(circle at 50% 0%, rgba(177, 104, 21, 0.22), transparent 36%); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(247, 201, 94, 0.13); }
.arena-progress-head { display: grid; grid-template-columns: minmax(10rem, 1.4fr) repeat(2, minmax(7rem, 1fr)); gap: 0.45rem; }
.arena-progress-head > div { display: flex; min-height: 4.05rem; flex-direction: column; justify-content: center; padding: 0.55rem 0.7rem; border: 1px solid rgba(167, 121, 55, 0.35); background: rgba(0, 0, 0, 0.28); }
.arena-progress-head > div:first-child { background: linear-gradient(110deg, rgba(146, 83, 12, 0.28), rgba(0, 0, 0, 0.22)); }
.arena-eyebrow { color: rgba(215, 167, 79, 0.83); font-family: 'Cinzel', serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.arena-progress-head strong { color: #f4c45d; font-family: 'Cinzel', serif; font-size: 1.25rem; line-height: 1.15; }
.arena-progress-head strong small { color: rgba(235, 215, 175, 0.6); font-size: 0.7rem; }
.arena-progress-head span:not(.arena-eyebrow), .arena-progress-head small { color: rgba(210, 183, 133, 0.72); font-family: 'Source Sans 3', sans-serif; font-size: 0.62rem; }
.arena-streak span { color: #dba64d !important; font-family: 'Cinzel', serif !important; font-size: 0.55rem !important; letter-spacing: 0.08em; text-transform: uppercase; }
.arena-progress-track { height: 0.45rem; margin-top: 0.45rem; overflow: hidden; border: 1px solid rgba(172, 122, 46, 0.35); background: rgba(0, 0, 0, 0.55); }
.arena-progress-track > div { height: 100%; background: linear-gradient(90deg, #9f5b11, #f1be49, #fff0a9); box-shadow: 0 0 12px rgba(240, 185, 56, 0.65); transition: width 0.35s ease; }
.arena-layout { display: grid; grid-template-columns: minmax(15rem, 0.86fr) minmax(22rem, 1.14fr); gap: 0.85rem; }
.arena-column { min-width: 0; padding: 0.75rem; border: 1px solid rgba(147, 103, 43, 0.34); background: rgba(5, 5, 4, 0.38); }
.arena-duel-column { background: linear-gradient(145deg, rgba(69, 38, 11, 0.22), rgba(5, 5, 4, 0.42)); }
.arena-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.38rem; border-bottom: 1px solid rgba(171, 123, 50, 0.25); }
.arena-section-title span { color: #d7a854; font-family: 'Cinzel', serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.arena-section-title small { color: rgba(192, 162, 112, 0.62); font-family: 'Source Sans 3', sans-serif; font-size: 0.6rem; }
.arena-hero-list { display: flex; max-height: 10rem; flex-direction: column; gap: 0.35rem; margin-top: 0.55rem; overflow-y: auto; padding-right: 0.2rem; }
.arena-hero-card { display: flex; width: 100%; align-items: center; gap: 0.55rem; padding: 0.42rem 0.5rem; border: 1px solid rgba(133, 99, 59, 0.36); background: rgba(5, 5, 4, 0.4); text-align: left; transition: border-color 0.15s, transform 0.15s, background 0.15s; }
.arena-hero-card:hover { transform: translateX(2px); border-color: rgba(230, 176, 65, 0.66); background: rgba(91, 52, 13, 0.27); }
.arena-hero-card.is-selected { border-color: #e9ae3c; background: linear-gradient(90deg, rgba(203, 132, 23, 0.25), rgba(8, 6, 3, 0.4)); box-shadow: inset 3px 0 0 #f4c65a; }
.arena-level-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.32rem; margin-top: 0.55rem; }
.arena-level-node { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(132, 97, 55, 0.35); background: rgba(4, 4, 3, 0.58); color: rgba(176, 143, 89, 0.6); font-family: 'Cinzel', serif; font-size: 0.67rem; transition: transform 0.14s, border-color 0.14s, background 0.14s; }
.arena-level-node.is-completed { border-color: rgba(92, 147, 73, 0.6); background: rgba(51, 102, 41, 0.26); color: #a9d98d; }
.arena-level-node.is-current { cursor: pointer; border-color: #f4bd42; background: radial-gradient(circle, rgba(224, 151, 30, 0.44), rgba(54, 27, 4, 0.6)); color: #fff0b2; box-shadow: 0 0 13px rgba(239, 175, 48, 0.36); animation: arena-current-pulse 1.8s ease-in-out infinite; }
.arena-level-node.is-current:hover { transform: translateY(-2px); }
.arena-level-node.is-dueling { cursor: wait; animation: none; opacity: 0.8; }
.arena-level-node.is-champion { border-color: rgba(222, 154, 42, 0.8); }
.arena-level-crown { color: #f5c34e; font-size: 1.05rem; text-shadow: 0 0 9px rgba(245, 195, 78, 0.75); }
@keyframes arena-current-pulse { 50% { box-shadow: 0 0 22px rgba(245, 186, 54, 0.72); } }
.arena-ready-status, .arena-live-status { display: flex; align-items: center; gap: 0.7rem; min-height: 3.9rem; padding: 0.65rem 0.75rem; border: 1px solid rgba(216, 160, 50, 0.52); background: linear-gradient(100deg, rgba(125, 71, 12, 0.3), rgba(10, 7, 4, 0.66)); }
.arena-ready-status > span, .arena-live-status > span { color: #f5c658; font-size: 1.55rem; }
.arena-ready-status p, .arena-live-status p { margin: 0; color: #f3e1b6; font-family: 'Cinzel', serif; font-size: 0.74rem; font-weight: 700; }
.arena-ready-status small, .arena-live-status small { color: rgba(215, 188, 141, 0.72); font-family: 'Source Sans 3', sans-serif; font-size: 0.68rem; }
.arena-live-status { border-color: rgba(235, 145, 42, 0.7); }
.arena-live-status.is-victory { border-color: rgba(111, 173, 79, 0.75); background: linear-gradient(100deg, rgba(57, 101, 31, 0.38), rgba(6, 12, 5, 0.62)); }
.arena-live-pulse { width: 0.65rem; height: 0.65rem; flex: none; border-radius: 50%; background: #f2a53c; box-shadow: 0 0 0 0 rgba(242, 165, 60, 0.65); animation: arena-live-pulse 1.5s infinite; }
@keyframes arena-live-pulse { 70% { box-shadow: 0 0 0 0.55rem rgba(242, 165, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 165, 60, 0); } }
.arena-duel-card { overflow: hidden; border: 1px solid rgba(166, 116, 42, 0.46); background: rgba(3, 3, 3, 0.43); }
.arena-duel-card.is-champion { border-color: #df9c35; box-shadow: inset 0 0 25px rgba(184, 108, 21, 0.17); }
.arena-duel-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.45rem; padding: 0.7rem; }
.arena-duel-versus > div { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.arena-duel-versus strong { max-width: 100%; overflow: hidden; color: #ebdfca; font-family: 'Cinzel', serif; font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-duel-versus small { color: rgba(203, 176, 129, 0.7); font-family: 'Source Sans 3', sans-serif; font-size: 0.61rem; }
.arena-duel-versus > b { color: #f5bd40; font-family: 'Cinzel', serif; font-size: 0.78rem; font-style: italic; }
.arena-opponent-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid rgba(218, 155, 50, 0.6); background: rgba(100, 48, 9, 0.4); color: #f4c052; font-size: 1.25rem; }
.arena-duel-stats { display: flex; justify-content: center; gap: 0.8rem; padding: 0.38rem 0.65rem; border-block: 1px solid rgba(141, 100, 48, 0.25); color: rgba(217, 189, 140, 0.8); font-family: 'Source Sans 3', sans-serif; font-size: 0.67rem; }
.arena-reward-preview { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.55rem 0.65rem; color: rgba(206, 184, 145, 0.78); font-family: 'Source Sans 3', sans-serif; font-size: 0.67rem; text-align: center; }
.arena-reward-preview b { color: #c7df96; font-weight: 700; }
.arena-reward-preview small { color: #e4af4b; font-size: 0.63rem; }
.arena-start-btn, .arena-action-disabled { width: 100%; padding: 0.68rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.06em; }
.arena-action-disabled { color: rgba(221, 190, 137, 0.6); background: rgba(0, 0, 0, 0.35); font-family: 'Cinzel', serif; text-align: center; }
.arena-log { max-height: 10rem; margin-top: 0.55rem; overflow-y: auto; border: 1px solid rgba(126, 91, 47, 0.28); background: rgba(0, 0, 0, 0.28); padding: 0.55rem 0.65rem; color: rgba(214, 195, 163, 0.78); font-family: 'Source Sans 3', sans-serif; font-size: 0.66rem; }
.arena-log p { margin: 0 0 0.24rem; }
.arena-empty { padding: 1rem; border: 1px dashed rgba(157, 111, 54, 0.35); color: rgba(196, 166, 119, 0.6); font-family: 'Source Sans 3', sans-serif; font-size: 0.72rem; text-align: center; }
@media (max-width: 760px) {
  .arena-layout { grid-template-columns: 1fr; }
  .arena-progress-head { grid-template-columns: 1fr 1fr; }
  .arena-progress-head > div:first-child { grid-column: 1 / -1; }
  .arena-hero-list { max-height: 8rem; }
}
@media (max-width: 420px) {
  .arena-progress-head { grid-template-columns: 1fr; }
  .arena-progress-head > div:first-child { grid-column: auto; }
  .arena-level-grid { gap: 0.22rem; }
  .arena-duel-stats { gap: 0.35rem; font-size: 0.6rem; }
}
/* Em desktop, Reforjar deixa de empilhar lista e detalhe: a lista fica na
 * coluna esquerda e a decisão/custo na direita. Isso reduz bastante a altura
 * total da modal e mantém o botão de confirmar visível sem rolar a página. */
@media (min-width: 641px) {
  #forja-tab-reforjar:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(12rem, 0.78fr) minmax(20rem, 1.22fr);
    align-items: start;
    gap: 0.8rem;
  }
  #forja-tab-reforjar .forja-reforge-intro { grid-column: 1 / -1; }
  #forja-tab-reforjar .forja-item-list { max-height: 25rem; }
  #forja-tab-reforjar .mercado-detail { margin-top: 0; min-height: 0; }
}
@media (max-width: 640px) { .forja-main-tabs { gap: 0.2rem; padding: 0.2rem; } .forja-main-tabs .report-tab-btn { min-height: 2.75rem; font-size: 0.53rem; } .forja-reforge-section-head { align-items: flex-start; flex-direction: column; gap: 0.15rem; } .forja-reforge-section-head small { text-align: left; } .forja-reforge-resource-grid { gap: 0.25rem; } .forja-reforge-resource { padding: 0.32rem; column-gap: 0.22rem; } .forja-reforge-resource-icon { font-size: 0.8rem; } .forja-reforge-resource-label { font-size: 0.46rem; } .forja-reforge-resource-values { font-size: 0.61rem; } }

/* Chip de travar/destravar 1 efeito da aba Reforjar (ver renderForjaReforjarTab
 * em ui.js) — mesma família visual do .btn-torch (Cinzel, dourado), só em
 * formato pílula pequena porque fica ao lado de cada linha de efeito, não
 * como ação principal da tela. */
.btn-lock {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(166, 124, 82, 0.4);
  color: #a67c52;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s, background 0.15s;
}

.btn-lock:hover {
  filter: brightness(1.2);
}

.btn-lock.is-locked {
  background: rgba(224, 154, 43, 0.15);
  border-color: #f5b942;
  box-shadow: 0 0 10px rgba(224, 154, 43, 0.25);
}

.forja-effect-upgrade {
  min-width: 6.7rem;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.24rem 0.45rem;
  background: linear-gradient(180deg, rgba(141, 91, 18, 0.44), rgba(47, 27, 7, 0.5));
  border-color: rgba(229, 171, 55, 0.68);
  color: #f0c766;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
}

.forja-effect-upgrade span { color: #f6d786; font-size: 0.5rem; letter-spacing: 0.08em; }
.forja-effect-upgrade b { font-size: 0.59rem; }

.forja-effect-upgrade:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* Lista de itens da Forja (Qualidade/Nível/Reforjar/Quebrar) — pedido do
 * jogador: trocar a grade quadrada de ícones (.mercado-grid/.mercado-slot,
 * ainda usada por Mochila/Mercado/Craftar da Forja) por uma lista vertical
 * compacta com miniatura + nome + raridade, no mesmo espírito da lista de
 * itens do popup de referência aprovado (docs/ui-mockup/forja-popup.html).
 * Ver forjaItemGridHtml em ui.js. max-height reduzido de 22rem pra 13rem
 * (pedido do jogador, "ajusta a proporção"): a lista sozinha ocupava quase
 * metade do popup e empurrava o painel de detalhe (efeitos + materiais +
 * botão de ação) pra fora da tela. 13rem ~= 5-6 linhas visíveis antes de
 * rolar — o popup inteiro também rola agora (ver #ferraria-modal), então
 * itens extras continuam alcançáveis. */
.forja-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 13rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

.forja-item-list::-webkit-scrollbar {
  width: 6px;
}
.forja-item-list::-webkit-scrollbar-thumb {
  background: rgba(166, 124, 82, 0.4);
}

/* [NOVO — pedido do jogador: "os que estão bloqueados, nao da pra
 * quebrar"] Grade de Quebrar da Forja (.mochila-grid/.mochila-slot
 * reaproveitados, ver renderForjaQuebrarTab em ui.js) — item bloqueado
 * (item.locked) fica visualmente "apagado" só nos modos Rápido/Selecionar
 * (onde clicar nele não faz nada) pra deixar claro de cara que ele não
 * entra na leva; no modo Normal (clique único, mostra prévia embaixo)
 * continua com opacidade cheia, porque lá o objetivo é justamente poder
 * clicar pra ver o atalho de "🔓 Desbloquear". */
.mochila-slot.is-forja-locked {
  opacity: 0.4;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

.forja-item-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(140, 108, 70, 0.35);
  border-left-width: 3px;
  background: linear-gradient(180deg, rgba(36, 28, 20, 0.9), rgba(16, 12, 9, 0.95));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.forja-item-row:hover {
  transform: translateX(1px);
  background: linear-gradient(180deg, rgba(46, 36, 26, 0.92), rgba(20, 15, 11, 0.97));
}

/* A lista de itens do Baú reutiliza `.forja-item-row` e também é um
   `.hint-trigger`. Um `transform` no próprio gatilho cria um novo containing
   block e faz o balão `position:fixed` calcular a posição fora da tela. O
   fundo ainda muda no hover; só removemos o deslocamento nesses itens. */
.forja-item-row.hint-trigger:hover {
  transform: none;
}

.forja-item-row-icon {
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(140, 108, 70, 0.3);
  pointer-events: none;
}

.forja-item-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.forja-item-row-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  pointer-events: none;
}

.forja-item-row-name {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e8e0d4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forja-item-row-meta {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.62rem;
  color: rgba(196, 165, 116, 0.75);
}

.forja-item-row.rarity-comum { border-left-color: rgba(154, 163, 176, 0.85); }
.forja-item-row.rarity-magico { border-left-color: rgba(94, 163, 216, 0.9); }
.forja-item-row.rarity-raro { border-left-color: rgba(230, 194, 41, 0.9); }
.forja-item-row.rarity-lendario {
  border-left-color: rgba(224, 154, 43, 1);
  box-shadow: 0 0 8px rgba(224, 154, 43, 0.18);
}

/* [MUDANÇA — pedido do jogador: "tem algum jeito de mudar esse visual? de
 * seleção de itens?"] Reaproveita .forja-item-row (ver acima) pro seletor
 * "Escolha um item do Baú" da modal de Equipamentos (ver equip-picker-list
 * em renderEquipModal/ui.js) — 2 variações novas só pra esse contexto:
 * "Remover [item equipado]" (vermelho, sempre no topo da lista) e item que
 * o herói não atende o requisito ainda (vermelho mais discreto, mas
 * continua clicável — ver heroMeetsItemRequirements). .is-blocked vem
 * DEPOIS das regras de raridade de propósito, pra sempre vencer a cor da
 * raridade (mesma convenção já usada em .is-selected logo abaixo). */
.forja-item-row.is-remove {
  border-left-color: rgba(196, 58, 58, 0.75);
  background: linear-gradient(180deg, rgba(60, 18, 18, 0.55), rgba(24, 10, 10, 0.85));
}
.forja-item-row.is-remove:hover {
  background: linear-gradient(180deg, rgba(76, 22, 22, 0.6), rgba(28, 12, 12, 0.9));
}
.forja-item-row.is-remove .forja-item-row-name { color: #e08a8a; }
.forja-item-row.is-blocked {
  border-left-color: rgba(196, 58, 58, 0.6);
  background: linear-gradient(180deg, rgba(40, 20, 18, 0.85), rgba(16, 12, 9, 0.95));
}

/* .is-selected vem DEPOIS das regras de raridade de propósito, pra sempre
 * ganhar (mesma especificidade CSS — quem vem por último no arquivo vence,
 * mesma convenção já usada em .mercado-slot.is-selected acima). */
.forja-item-row.is-selected {
  border-color: #f5b942;
  background: linear-gradient(180deg, rgba(60, 44, 20, 0.9), rgba(28, 20, 12, 0.96));
  box-shadow: 0 0 10px rgba(224, 154, 43, 0.3);
}

/* --- Caixa de ameaça (invasão) --- */
.threat-box {
  background:
    radial-gradient(ellipse at center, rgba(143, 36, 25, 0.35), transparent 70%),
    rgba(18, 8, 7, 0.85);
  border: 1px solid rgba(196, 57, 43, 0.45);
  animation: threatPulse 2.4s ease-in-out infinite;
  transition: filter 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
}

/* Poção de Proteção ativa: janela cinza, sem pulso — o timer grande fica
   travado; o countdown da pausa roda só na linha "Invasão pausada". */
.threat-box.threat-box-paused {
  filter: grayscale(1);
  opacity: 0.78;
  animation: none;
  border-color: rgba(120, 120, 120, 0.55);
  background:
    radial-gradient(ellipse at center, rgba(80, 80, 80, 0.28), transparent 70%),
    rgba(18, 18, 18, 0.88);
}

/* --- Barra de progresso --- */
.progress-track {
  height: 0.7rem;
  background: #090806;
  border: 1px solid rgba(112, 76, 35, 0.56);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  /* [AJUSTADO — pedido do jogador: "ta um loop muito rapido e carregando
   * blocos de status grande e desordenados"] Listra de 6px/12px (ciclo de
   * 12px) dentro de um background-size de 24px — o tile não batia com o
   * ciclo do gradiente, then cada "bloco" de 24px continha 2 listras
   * inteiras avançando quase 1 ciclo por frame do keyframe (30px/s),
   * parecendo picotado. Agora listra e tile usam o MESMO ciclo (10px cada
   * cor = 20px), then o "march" abaixo desloca exatamente um ciclo por
   * volta — sem salto visível na costura do loop. */
  background: repeating-linear-gradient(
    -45deg,
    #6b8f4e,
    #6b8f4e 10px,
    #9dc183 10px,
    #9dc183 20px
  );
  background-size: 20px 20px;
  transition: width 0.25s linear;
}

/* [CORRIGIDO — pedido do jogador: "essa barra de progresso fica sempre
 * estática, mas bem no começo do projeto ela se movimentava... existe
 * algum jeito de voltar a ser animada?" / depois: "mas aí vc aplicou em
 * todas, é somente na barra de tempo"] Primeira tentativa botou a animação
 * como padrão de TODO `.progress-fill` — pegou também barras que usam essa
 * mesma classe só pra estrutura (track+fill), mas mostram progresso de
 * ESTADO, não de TEMPO passando (ex.: Integridade da Muralha, que só muda
 * quando o jogador repara/leva dano, não sozinha) — ali "andar" sem
 * ninguém mexer em nada ficava estranho, parecendo bugado.
 * `.progress-fill--timer` é a classe OPT-IN certa: só as barras que
 * representam um cronômetro rodando de verdade (grind de Zona, timer de
 * Expedição — ver renderZoneGrindTimers/renderExpeditionTimers em ui.js)
 * ganham o `data-progress-timer`/classe abaixo. Todo resto (Vida/XP/
 * Energia/Mana/Muralha/objetivos) fica com o `.progress-fill` parado,
 * sem precisar de `animation:none` extra em lugar nenhum. */
/* [AJUSTADO DE NOVO — pedido do jogador: "não está mais dando a sensação de
 * estar se mexendo, parece que uma linha verde anda e volta 1px"] Animar
 * `background-position` (como o `march` acima fazia) roda na THREAD
 * PRINCIPAL do navegador — a mesma que renderTimers/render() do jogo usam a
 * cada tick. Com a aba ocupada, o navegador pula frames dessa animação de
 * forma irregular, e o olho lê os saltos como "andou e voltou". Trocado por
 * `transform: translateX` num `::after` por cima — transform roda no
 * COMPOSITOR (thread separada da GPU), então continua liso mesmo com a
 * thread principal ocupada. O `.progress-fill--timer` vira só a moldura
 * (position/overflow) — quem desenha e desliza a listra é o pseudo-elemento
 * abaixo, com o dobro da largura pra nunca mostrar uma borda vazia durante
 * o deslize. */
.progress-fill--timer {
  position: relative;
  overflow: hidden;
  background: #4f6b3a; /* fallback sólido — só aparece 1 frame antes do ::after pintar */
}
.progress-fill--timer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: repeating-linear-gradient(
    -45deg,
    #6b8f4e,
    #6b8f4e 10px,
    #9dc183 10px,
    #9dc183 20px
  );
  background-size: 20px 20px;
  animation: march-slide 1.8s linear infinite;
  will-change: transform;
}
@keyframes march-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-20px); }
}

/* --- Retratos de herói (pixel art) --- */
.hero-portrait {
  width: 2.75rem;
  height: 2.75rem;
  image-rendering: pixelated;
  object-fit: cover;
  border: 1px solid var(--class, rgba(166, 124, 82, 0.5));
  background: #0a0907;
  flex-shrink: 0;
}

.hero-portrait-lg {
  width: 3.5rem;
  height: 3.5rem;
}

/* Seletor de skin na criação do Herói (ver renderHeroCreationSkinList em
 * login-ui.js) — mesma pixel art, só troca a borda quando selecionada. */
.hero-skin-btn {
  padding: 2px;
  border: 1px solid rgba(166, 124, 82, 0.3);
  background: rgba(10, 9, 7, 0.4);
  transition: border-color 0.15s ease;
}

.hero-skin-btn.hero-skin-btn-active {
  border-color: #e8b23d;
  background: rgba(232, 178, 61, 0.12);
}

.hero-skin-btn .hero-portrait {
  border: none;
}

.class-guerreiro { --class: #c4392b; }
.class-mago { --class: #5b7fb8; }
.class-arqueiro { --class: #6b8f4e; }
.class-ladino { --class: #8b6bb0; }

/* --- Scrollbar fina --- */
.scroll-thin::-webkit-scrollbar {
  width: 6px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(166, 124, 82, 0.4);
}

/* --- Cena de patrulha (Fortaleza) --- */
.patrol-scene {
  position: relative;
  height: 4.5rem;
  border: 1px solid rgba(90, 74, 55, 0.35);
  background:
    linear-gradient(180deg, rgba(10, 9, 7, 0.4), rgba(10, 9, 7, 0.75) 60%),
    repeating-linear-gradient(90deg, rgba(166, 124, 82, 0.06) 0 2px, transparent 2px 26px);
  overflow: hidden;
}

.patrol-fort {
  position: absolute;
  left: 0.5rem;
  bottom: 0.35rem;
  width: 2.75rem;
  height: 2.75rem;
  image-rendering: pixelated;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(224, 154, 43, 0.15));
}

.patrol-guard {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 48px;
  animation: patrolMarch 9s linear infinite;
}

/* Duas camadas do mesmo soldado (andando / lutando) que se revezam por opacidade,
   sincronizadas com o momento em que ele encontra o monstro no meio do caminho. */
.patrol-guard .pixel-soldier.ps-walk-layer {
  position: absolute;
  inset: 0;
  animation: spriteWalk 0.9s steps(4) infinite, patrolWalkFade 9s linear infinite;
}
.patrol-guard .pixel-soldier.ps-fight-layer {
  position: absolute;
  inset: 0;
  animation: spriteAttack 0.6s steps(3) infinite, patrolFightFade 9s linear infinite;
}

.patrol-monster {
  position: absolute;
  left: 56%;
  bottom: 0;
  width: 30px;
  height: 40px;
  animation: monsterBob 1.3s ease-in-out infinite, monsterEncounter 9s linear infinite;
}
.patrol-monster img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* --- Estrada de expedição --- */
.battle-road {
  position: relative;
  height: 3.5rem;
  border: 1px solid rgba(90, 74, 55, 0.35);
  background:
    linear-gradient(180deg, transparent 60%, rgba(139, 99, 64, 0.12) 60%),
    repeating-linear-gradient(90deg, rgba(166, 124, 82, 0.08) 0 3px, transparent 3px 22px);
  overflow: hidden;
}

.road-fort {
  position: absolute;
  left: 0.4rem;
  bottom: 0.3rem;
  width: 2.25rem;
  height: 2.25rem;
  image-rendering: pixelated;
  opacity: 0.85;
}

.road-flag {
  position: absolute;
  right: 0.5rem;
  bottom: 0.35rem;
  font-size: 1.1rem;
  filter: drop-shadow(0 0 4px rgba(157, 193, 131, 0.4));
}

.road-monster {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 36px;
  opacity: 0;
  transition: left 0.9s linear, opacity 0.3s ease;
  animation: monsterBob 1.3s ease-in-out infinite;
}
.road-monster img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.road-monster.visible { opacity: 1; }
.road-monster.hit { animation: monsterBob 1.3s ease-in-out infinite, monsterHit 0.5s ease-out; }
.road-monster.defeated { opacity: 0; }

.marcher {
  position: absolute;
  bottom: 0;
  left: 0.4rem;
  width: 34px;
  height: 48px;
  transition: left 0.9s linear, opacity 0.3s ease;
  opacity: 0;
}

.marcher.walking { opacity: 1; }

.marcher-spark {
  position: absolute;
  inset: -8px -14px;
  opacity: 0;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.65), transparent 70%);
}

.marcher.arrived .marcher-spark {
  animation: sparkBurst 0.5s ease-out;
}

/* --- Soldado pixel art (sprite sheet real, 4 quadros de caminhada) --- */
.pixel-soldier {
  width: 34px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 136px 48px; /* 4 quadros de 34px */
  image-rendering: pixelated;
  animation: spriteWalk 0.9s steps(4) infinite;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4));
}

.pixel-soldier.class-guerreiro { background-image: url('../assets/sprites/sprite-guerreiro-walk.png'); }
.pixel-soldier.class-mago { background-image: url('../assets/sprites/sprite-mago-walk.png'); }
.pixel-soldier.class-arqueiro { background-image: url('../assets/sprites/sprite-arqueiro-walk.png'); }
.pixel-soldier.class-ladino { background-image: url('../assets/sprites/sprite-ladino-walk.png'); }

/* --- Estado de combate: troca para o ciclo de golpe (3 quadros) --- */
.pixel-soldier.fighting {
  background-size: 102px 48px; /* 3 quadros de 34px */
  animation: spriteAttack 0.6s steps(3) infinite;
}

.pixel-soldier.fighting.class-guerreiro { background-image: url('../assets/sprites/sprite-guerreiro-attack.png'); }
.pixel-soldier.fighting.class-mago { background-image: url('../assets/sprites/sprite-mago-attack.png'); }
.pixel-soldier.fighting.class-arqueiro { background-image: url('../assets/sprites/sprite-arqueiro-attack.png'); }
.pixel-soldier.fighting.class-ladino { background-image: url('../assets/sprites/sprite-ladino-attack.png'); }

/* --- Keyframes --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes threatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 57, 43, 0.35); }
  50% { box-shadow: 0 0 28px 4px rgba(196, 57, 43, 0.25); }
}


@keyframes torchFlicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.85; }
  70% { opacity: 0.95; }
}

.animate-torch {
  animation: torchFlicker 2.8s ease-in-out infinite;
}

/* O guarda sai do castelo, anda até o monstro, briga, segue andando e some pela direita —
   nunca volta andando de ré. Ao reiniciar o loop ele reaparece junto ao castelo. */
@keyframes patrolMarch {
  0%   { left: 0.4rem; opacity: 0; }
  4%   { opacity: 1; }
  36%  { left: 52%; opacity: 1; }
  58%  { left: 52%; opacity: 1; }
  94%  { left: 104%; opacity: 1; }
  100% { left: 104%; opacity: 0; }
}

@keyframes patrolWalkFade {
  0%, 34% { opacity: 1; }
  38%, 56% { opacity: 0; }
  60%, 100% { opacity: 1; }
}

@keyframes patrolFightFade {
  0%, 34% { opacity: 0; }
  38%, 56% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes monsterBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes monsterHit {
  0% { filter: brightness(1); transform: translateX(0); }
  30% { filter: brightness(2); transform: translateX(2px); }
  60% { filter: brightness(1.6); transform: translateX(-2px); }
  100% { filter: brightness(1); transform: translateX(0); }
}

/* O monstro espera parado, leva os golpes durante a briga e "morre" até o próximo herói passar. */
@keyframes monsterEncounter {
  0%, 8% { opacity: 0; }
  16% { opacity: 1; transform: scale(1); filter: brightness(1); }
  34% { opacity: 1; }
  40% { filter: brightness(1.5); transform: scale(1.06); }
  46% { filter: brightness(1.9); transform: translateX(2px); }
  52% { filter: brightness(1.9); transform: translateX(-2px); }
  57% { opacity: 0.3; transform: scale(0.75); filter: brightness(2.2); }
  60%, 100% { opacity: 0; }
}

@keyframes sparkBurst {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes spriteWalk {
  from { background-position-x: 0; }
  to { background-position-x: -136px; }
}

@keyframes spriteAttack {
  from { background-position-x: 0; }
  to { background-position-x: -102px; }
}

/* ==========================================================================
   Tela de Login / Cadastro + Barra de conta
   ========================================================================== */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(196, 122, 21, 0.22), transparent 55%),
    linear-gradient(180deg, #1a1510 0%, #0a0907 60%, #050403 100%);
}

.auth-screen.hidden {
  display: none;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
  background: linear-gradient(165deg, rgba(42, 34, 26, 0.98) 0%, rgba(22, 18, 14, 0.99) 100%);
  border: 1px solid var(--panel-edge);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.06), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(90, 74, 55, 0.4);
  padding-bottom: 0.75rem;
}

.auth-tab {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 0.5rem;
  color: rgba(196, 165, 116, 0.7);
  background: rgba(10, 9, 7, 0.4);
  border: 1px solid rgba(90, 74, 55, 0.4);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.auth-tab:hover {
  color: #e8e0d4;
}

.auth-tab-active {
  color: #1a1005;
  background: linear-gradient(180deg, #e09a2b, #c47a15);
  border-color: #f5b942;
}

.auth-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c4a574;
}

.auth-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  color: #e8e0d4;
  background: rgba(10, 9, 7, 0.6);
  border: 1px solid rgba(90, 74, 55, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
  outline: none;
  border-color: rgba(224, 154, 43, 0.7);
  box-shadow: 0 0 0 2px rgba(224, 154, 43, 0.15);
}

.auth-input::placeholder {
  color: rgba(107, 114, 128, 0.7);
}

.auth-error {
  min-height: 1.1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  color: #e85d4c;
}

/* Mensagem de sucesso/aviso no form de login (ex.: "confirme seu e-mail",
 * "link reenviado") — mesmo espaço do .auth-error, cor verde em vez de
 * vermelha (ver #login-info no index.html). */
.auth-success {
  min-height: 1.1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  color: #7bbf6a;
}

.account-bar {
  border: 1px solid var(--border-default);
  background: var(--bg-panel);
  box-shadow: inset 0 0 0 1px rgba(210, 154, 60, 0.04), 0 4px 14px rgba(0, 0, 0, 0.4);
  padding: 0.6rem 1rem;
}

.account-crest {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
  color: #f4cf73;
  border: 1px solid rgba(190, 125, 31, 0.56);
  background: #0b0906;
}

/* --- Árvore de talentos (cadeia de nós conectados por linha) --------- */

.talent-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f5b942;
  background: linear-gradient(180deg, rgba(32, 26, 20, 0.9), rgba(16, 13, 10, 0.95));
  border: 1px solid rgba(245, 185, 66, 0.4);
  padding: 0.35rem 0.75rem;
}

/* Balão de hint ÚNICO — layout compartilhado por TUDO que mostra um popup ao
 *  passar o mouse (missão, talento, item de equipamento). Antes cada lugar
 *  tinha seu próprio bolo de classes Tailwind repetido (e um pouco
 *  diferente) — agora é só `.hint-trigger` (no elemento que recebe o hover)
 *  envolvendo `.hint-balloon` (o popup em si, montado por hintBalloonHtml()
 *  em ui.js). De propósito SEM transform/z-index não-auto no `.hint-trigger`
 *  — isso criaria um novo contexto de empilhamento e prenderia o balão atrás
 *  de elementos vizinhos (mesmo bug que já corrigimos nos nós de talento). */
.hint-trigger {
  position: relative;
}

/* position:fixed (não mais absolute ancorado no trigger) — o balão agora
 * SEGUE O MOUSE (ver o listener de 'mousemove' em main.js, que escreve
 * left/top em px direto no style toda vez que o cursor anda em cima de um
 * .hint-trigger). left/top de partida (abaixo, antes do 1º mousemove
 * chegar) ficam fora da tela de propósito — evita um "flash" no canto
 * superior esquerdo antes da 1ª posição de verdade ser calculada. */
.hint-balloon {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 60;
  width: max-content;
  min-width: 190px;
  max-width: 260px;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(196, 122, 21, 0.45);
  border-radius: 0.5rem;
  background: #0a0907;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.hint-trigger:hover .hint-balloon,
.hint-trigger:focus-within .hint-balloon {
  opacity: 1;
  visibility: visible;
}

/* A setinha apontava pro trigger quando o balão vivia grudado nele por
 * position:absolute — sem sentido agora que ele segue o cursor solto pela
 * tela, então some. */
.hint-balloon-arrow {
  display: none;
  position: absolute;
  top: -0.4rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  transform: translateX(-50%) rotate(45deg);
  background: #0a0907;
  border-left: 1px solid rgba(196, 122, 21, 0.45);
  border-top: 1px solid rgba(196, 122, 21, 0.45);
}

.hint-balloon-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fcd34d;
}

.hint-balloon-title + .hint-balloon-rows {
  margin-top: 0.4rem;
}

.hint-balloon-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hint-balloon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.66rem;
  color: #d8cdb8;
}

.hint-balloon-row-value {
  color: #f5b942;
}

/* [NOVO — pedido do jogador: "quero colocar o comparativo do que está
 * equipado"] Bloco extra do balão (ver compareLabel/compareRows em
 * hintBalloonHtml, ui.js) — mesma borda separadora do .hint-balloon-desc
 * abaixo, mas SEM itálico (é dado numérico, não texto de sabor) e com um
 * rótulo pequeno acima das linhas dizendo contra o que está comparando. */
.hint-balloon-compare-label {
  position: relative;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(139, 99, 64, 0.3);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a7c63;
}

.hint-balloon-compare-rows {
  margin-top: 0.2rem;
}

.hint-balloon-desc {
  position: relative;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(139, 99, 64, 0.3);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.63rem;
  font-style: italic;
  line-height: 1.35;
  color: #b3a892;
  white-space: pre-line;
}

.hint-balloon-desc:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Mesmo ajuste do .hint-balloon-desc:first-child acima, pro caso raro de
 * um item sem NENHUMA row normal (rows vem vazio) mas com comparativo —
 * sem isso o divisor duplicaria logo abaixo do título. */
.hint-balloon-compare-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Barra de Maestria (aba Expedições — só missões fixas, ver m.fixedId em
 * renderMissions, ui.js) — nível + progresso de vitórias até o próximo. */
.mission-mastery {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.mission-mastery-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  color: #e8b23d;
  white-space: nowrap;
}

.mission-mastery-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 2.5rem;
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(139, 99, 64, 0.25);
  overflow: hidden;
}

.mission-mastery-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8b23d, #f4d37a);
  transition: width 0.3s ease;
}

.mission-mastery-text {
  display: none;
}

@media (min-width: 640px) {
  .mission-mastery-text {
    display: inline;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.58rem;
    color: #8a8071;
    white-space: nowrap;
  }
}

/* Tabuleiro 2D: nós espalhados num "mapa" escuro de pedra, galhos
 *  radiando de um nó central, linhas em SVG por baixo — visual inspirado
 *  em árvore de runas clássica. */
.talent-map-wrap {
  overflow: auto;
  border: 1px solid rgba(90, 74, 55, 0.5);
  background: #171310;
  max-height: 60vh;
  /* zoom fica só no scroll do mouse sobre essa área — ver handleTalentMapWheel
   * em ui.js — por isso o cursor de "mãozinha" pra indicar que também dá pra
   * arrastar (ver handleTalentMapPointerDown/Move/Up em ui.js), igual o mapa
   * de Eldoria ampliado (ver setupMapZoom em main.js). */
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.talent-map-wrap.is-panning {
  cursor: grabbing;
}

/* Navegação entre as árvores permanentes do herói. Cada uma é exibida
 * isoladamente: o jogador troca de contexto conscientemente, em vez de
 * precisar afastar o zoom para caber Aprendiz + classe + especialização. */
.talent-tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.45rem;
  border: 1px solid rgba(117, 88, 50, 0.42);
  background: rgba(11, 8, 5, 0.48);
}

.talent-tree-tabs,
.talent-tree-map-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.talent-tree-tabs {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

.talent-tree-tabs button,
.talent-tree-map-controls button {
  flex: none;
  min-height: 1.8rem;
  border: 1px solid rgba(139, 104, 61, 0.52);
  background: rgba(31, 24, 17, 0.8);
  color: #bfb09a;
  font-family: 'Cinzel', serif;
  font-size: 0.61rem;
  letter-spacing: 0.05em;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.talent-tree-tabs button { padding: 0.25rem 0.6rem; }
.talent-tree-map-controls button { min-width: 1.8rem; padding: 0.2rem 0.45rem; }
.talent-tree-tabs button:hover,
.talent-tree-map-controls button:hover { border-color: rgba(238, 181, 64, 0.85); color: #f5d99a; }
.talent-tree-tabs button.is-active { border-color: #d99b2b; background: linear-gradient(180deg, #9d6817, #6f430e); color: #fff0be; box-shadow: inset 0 0 10px rgba(255, 191, 65, 0.22); }

@media (max-width: 38rem) {
  .talent-tree-toolbar { align-items: flex-start; flex-direction: column; }
  .talent-tree-map-controls { align-self: flex-end; }
}

.talent-map {
  position: relative;
  width: 680px;
  height: 430px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(60, 48, 36, 0.25), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(60, 48, 36, 0.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 17px),
    #191512;
}

/* Árvore da Fortaleza cresceu (reforma dos Talentos) — tabuleiro maior só
 * pra ela; a árvore do Herói continua no tamanho padrão acima. O
 * .talent-map-wrap já tem overflow:auto, então isso só cria mais área de
 * scroll, sem quebrar nada. */
#stronghold-talents-map {
  width: 2600px;
  height: 1800px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(60, 48, 36, 0.25), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(60, 48, 36, 0.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 17px),
    #191512;
}

/* Pedido do jogador: "nao da pra deixar todos do mesmo estilo visual que os
 * talentos da fortaleza?" seguido de "eu quero eles um pouco mais junto do
 * centro" — tabuleiro do Herói escalado ×1.8 (ver TALENT_MAP_SIZE em
 * ui.js, ajustado de ×3.5 pra ×1.8 depois do feedback), mesmo tratamento
 * de #stronghold-talents-map acima (override de tamanho só pra esse id,
 * mesmo gradient de fundo). */
#hero-talents-map {
  width: 1024px;
  height: 774px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(60, 48, 36, 0.25), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(60, 48, 36, 0.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 17px),
    #191512;
}

/* [NOVO — pedido do jogador: "queria que a arvore ficasse assim... quando
 * resetasse, resetaria TUDO inclusive a parte do aprendiz"] Herói que já
 * escolheu classe mostra a árvore do Aprendiz (base permanente) EMPILHADA
 * em cima da árvore da classe atual, na mesma tela — ver renderHeroTalentsModal
 * (ui.js). `#hero-talents-map.talent-map--combined` some com o tamanho/fundo
 * fixos de UM tabuleiro só (cada `.talent-map-layer` dentro dele já traz o
 * próprio fundo) — mantém `position:relative` (herdado de `.talent-map`,
 * não redeclarado aqui) porque é ele quem serve de referência pro
 * `offsetTop` de cada layer (ver centerTalentMapScroll, ui.js). De propósito
 * SEM zoom/scroll próprios: o zoom do mouse (handleTalentMapWheel) continua
 * pegando ESTE elemento (é o primeiro `.talent-map` dentro de
 * `.talent-map-wrap`), escalando as duas seções juntas de uma vez. */
#hero-talents-map.talent-map--combined {
  width: 1024px;
  height: auto;
  background: none;
}

/* Cada seção empilhada (Aprendiz / classe atual) é o mesmo tabuleiro de
 * sempre — mesmo tamanho/fundo do #hero-talents-map original — só que
 * agora existem 2 lado a lado no eixo vertical em vez de 1 só. Repete o
 * fundo em vez de compartilhar (mesmo padrão já usado por #stronghold-talents-map/
 * #hero-talents-map acima, cada `<canvas>` de árvore sempre teve o próprio
 * bloco de gradient). */
.talent-map-layer {
  width: 1024px;
  height: 774px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(60, 48, 36, 0.25), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(60, 48, 36, 0.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 17px),
    #191512;
}

.talent-tree-section-title {
  margin: 0.6rem 0 0.4rem;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #cbb98a;
}

.talent-map-layer:first-of-type,
.talent-tree-section-title:first-child {
  margin-top: 0;
}

.talent-tree-divider {
  height: 1px;
  margin: 1rem 0;
  background: linear-gradient(90deg, transparent, rgba(140, 108, 70, 0.5), transparent);
}

.talent-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.talent-map .talent-map-line {
  stroke: rgba(232, 224, 212, 0.28);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.talent-map .talent-map-line.is-filled {
  stroke: #7fb56f;
  stroke-dasharray: none;
}

/* De propósito SEM transform/z-index aqui: um `transform` (ou z-index não-auto)
 * criaria um novo contexto de empilhamento, prendendo o tooltip (z-30) e o
 * núcleo (z-index: 3) num duelo local em vez de comparar direto com todo
 * mundo — foi o que causava o tooltip ficando atrás de nós vizinhos. O wrap
 * fica com posição zero (âncora em left/top via JS) e os filhos (ícone,
 * legenda, tooltip) é que se auto-centralizam com o próprio transform. */
.talent-node-wrap {
  position: absolute;
}

/* [REDESENHADO — pedido do jogador: "o design ficou uma bosta, eu queria
 * realmente que ficasse da forma do design do protótipo"] O nó era um
 * quadradinho de 1.9rem só com o ícone: ilegível, sem o nome do talento, e
 * com o emblema de rank colado por cima. Agora segue o
 * tools/hero-talent-tree-builder.html — disco REDONDO de 62px, nome do
 * talento embaixo, rank abaixo do nome. Mesmos valores do protótipo
 * (border-radius 50%, radial-gradient, inset shadow). */
.talent-node {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 25px;
  line-height: 1;
  border: 2px solid #55483a;
  background: radial-gradient(circle at 35% 30%, #2f2720, #191410 70%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.65);
  color: #6b6154;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.2s, border-color 0.2s;
}

/* Nome do talento, logo abaixo do disco — é o que faltava pra dar pra ler a
 * árvore sem passar o mouse em cada nó, um por um. */
.talent-node-name {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 2.1rem);
  /* 86px, não 100: o gerador de layout espaça nós irmãos em 96px
     (siblingStep), então um rótulo de 100px encostaria no vizinho. */
  width: 86px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  color: #9b9081;
  word-break: break-word;
  pointer-events: none;
}

.talent-node.is-filled ~ .talent-node-name { color: #cfe3bd; }
.talent-node.is-next ~ .talent-node-name { color: #f5d99a; }

/* Cabeçalho da coluna temática (CORPO · COMBATE · INSTINTO) */
.talent-col-head {
  position: absolute;
  top: 46px;
  transform: translateX(-50%);
  width: 190px;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9b9081;
  pointer-events: none;
  user-select: none;
}

.talent-col-head .rule {
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(90deg, transparent, rgba(140, 108, 70, 0.6), transparent);
}

.talent-node-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
}

.hint-balloon-title .talent-node-icon {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: middle;
  margin-right: 0.2rem;
  border: 1px solid rgba(140, 108, 70, 0.55);
}

.talent-node.is-filled {
  border-color: #6fae57;
  color: #d9f0c4;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(111, 174, 87, 0.3);
}

.talent-node.is-filled::after {
  content: '✓';
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  display: grid;
  place-items: center;
  width: 0.85rem;
  height: 0.85rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: #0e1408;
  background: #7fb56f;
  border: 1px solid #a8d494;
  border-radius: 50%;
}

.talent-node.is-next {
  border-color: #f5b942;
  color: #f5d99a;
  cursor: pointer;
  animation: talentNextPulse 1.6s ease-in-out infinite;
  z-index: 2;
}

.talent-node.is-next:hover {
  transform: translate(-50%, -50%) scale(1.14);
}

.talent-node.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Rank ("3/10") — sem caixinha, abaixo do nome, igual ao protótipo. */
.talent-node-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 3.75rem);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: #7d7365;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.talent-node-core {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.15rem;
  border-color: #f5b942;
  background: radial-gradient(circle at 50% 35%, #4a3416, #1c1206);
  color: #f5d99a;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(245, 185, 66, 0.35);
  z-index: 3;
}

@keyframes talentNextPulse {
  0%, 100% { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(217, 164, 65, 0.18); }
  50% { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(217, 164, 65, 0.32); }
}

.talent-summary-panel {
  border: 1px solid rgba(166, 124, 82, 0.35);
  background: linear-gradient(180deg, rgba(32, 26, 20, 0.85), rgba(16, 13, 10, 0.92));
  padding: 0.75rem;
}

.talent-summary-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: #f5b942;
  margin-bottom: 0.6rem;
}

.talent-summary-group-title {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f5b942;
  margin-bottom: 0.3rem;
}

.talent-summary-item {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  color: #e8e0d4;
  padding: 0.15rem 0;
}

/* --- Modal da Taverna: taverneiro + painel no mesmo “stage” -----------------
 * O NPC fica no fluxo (não absolute pra fora da tela). Em zoom alto / viewport
 * estreita, height/width usam min(vh, vw) e o flex encolhe o conjunto inteiro,
 * então a arte não corta na borda esquerda. */
.taverna-modal-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.taverna-modal-keeper {
  display: none;
  flex: 0 1 auto;
  width: min(34vw, 15rem);
  max-height: min(22rem, 58vh);
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  margin-right: -2.5rem;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}

@media (min-width: 640px) {
  .taverna-modal-keeper {
    display: block;
  }
}

.taverna-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  /* flex-basis (16rem, abaixo) manda mais que `width` num flex item, então
     sem max-width aqui o flex-grow:1 deixava o painel esticar até preencher
     o espaço todo do stage quando o conteúdo da aba (Missões da Vila) tinha
     linhas mais longas — ficava enorme comparado à aba de Recrutamento. */
  max-width: 28rem;
  min-width: 0;
  flex: 1 1 16rem;
  max-height: min(90vh, 42rem);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Guia do Reino — wiki (ver wiki-content.js, renderWikiModal em ui.js).
   Nav de tópicos à esquerda + texto do tópico ativo à direita. */
.wiki-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.2rem;
}
@media (min-width: 640px) {
  .wiki-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
/* Cabeçalho colapsável de cada seção da nav (Reino/Atividades/Herói) —
   pedido do jogador: "coloca pra expandir e colapsar cada tópico também",
   mesmo padrão visual do Bestiário (setinha ▶/▼). */
.wiki-nav-section-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.15rem 0.2rem;
  text-align: left;
  cursor: pointer;
}
.wiki-nav-section-header:first-child { margin-top: 0; }
.wiki-nav-section-arrow {
  font-size: 0.55rem;
  color: #e6c229;
  flex-shrink: 0;
}
.wiki-nav-section {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e6c229;
}
.wiki-nav-link {
  display: block;
  width: auto;
  text-align: left;
  padding: 0.25rem 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  color: #c8ccd4;
  border-left: 2px solid transparent;
  border-radius: 0.2rem;
}
@media (min-width: 640px) {
  .wiki-nav-link { width: 100%; }
}
.wiki-nav-link:hover { color: #e6c229; background: rgba(230, 194, 41, 0.08); }
.wiki-nav-link-active {
  color: #e6c229;
  border-left-color: #e6c229;
  background: rgba(230, 194, 41, 0.12);
  font-weight: 600;
}
.wiki-content-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #e6c229;
  margin-bottom: 0.5rem;
}
.wiki-content p { margin-bottom: 0.6rem; }
.wiki-list { margin: 0.3rem 0 0.6rem 0; padding-left: 0; list-style: none; }
.wiki-list li { margin-bottom: 0.35rem; }
.wiki-content button[data-wiki-goto] {
  color: #e0b84a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.wiki-content button[data-wiki-goto]:hover { color: #f5d67a; }

/* Ícone pequeno da bebida ativa no card compacto do herói (ver
   taverna-drinks.js, renderArmy em ui.js) — canto do retrato pequeno,
   pedido do jogador (ver comentário em .equip-hero-figure acima). */
.hero-card-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}
.hero-card-drink-icon {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(230, 194, 41, 0.8);
  background: #0a0907;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* [NOVO — renda passiva da base, ver structureProductionPending em state.js
 * e renderFortress em ui.js] Prédio com produção esperando pra ser coletada
 * pulsa em dourado no pátio. Pedido do jogador: "como que podemos deixar isso
 * meio que 'chamativo'?" — a ideia é que dê pra ver que tem coisa pra pegar
 * SEM abrir popup nenhum, que é o que faz o jogador voltar ao jogo.
 * O hover/seleção continua tendo prioridade visual (regras acima vêm depois
 * na cascata pra .is-selected, e :hover sobrescreve pelo mesmo motivo). */
.fortress-hotspot.has-production {
  animation: fortress-production-pulse 2.2s ease-in-out infinite;
}

@keyframes fortress-production-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(224, 154, 43, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(224, 154, 43, 0.55));
  }
}

/* Prédio bloqueado nunca pulsa, mesmo que algum estado antigo tenha deixado
 * a classe pendurada. */
.fortress-hotspot.is-locked.has-production {
  animation: none;
}

/* =====================================================================
   REDESIGN DE LAYOUT (2026-08) — cabeçalho com banner, brasão, medalhões
   da barra lateral e marca-d'água dos painéis.

   Tudo o que entra aqui é ADITIVO de propósito: nenhuma regra acima foi
   alterada, então dá pra reverter o redesign inteiro apagando este bloco.
   Os assets vêm de assets/page_layout/png/ (PNG com alfa, já recortados e
   escurecidos pra paleta — ver o comparativo de tons).
   ===================================================================== */

/* --- Cabeçalho: banner panorâmico ----------------------------------
   O escurecimento das bordas é feito AQUI, com mask-image, e não queimado
   na imagem: assim o degradê termina exatamente na cor real do fundo
   (#0a0907) em qualquer largura de tela. Com a vinheta dentro do arquivo,
   telas mais largas que o banner mostrariam uma emenda visível. */
.app-header {
  position: relative;
  isolation: isolate;
  padding: 1.75rem 0 1.5rem;
}

.app-header::before {
  content: '';
  position: absolute;
  inset: -1.5rem -2rem 0 0;
  z-index: -1;
  background-image: url('../assets/page_layout/banner_panoramico.png');
  background-size: cover;
  /* O castelo mora no terço direito da arte — ancorar à direita mantém ele
     visível quando a tela estreita, em vez de cortar justo nele. */
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.9;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%),
    linear-gradient(180deg, transparent 0%, #000 25%, #000 65%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%),
    linear-gradient(180deg, transparent 0%, #000 25%, #000 65%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Véu por cima do banner: garante contraste pro título dourado mesmo se a
   arte for trocada por uma mais clara. Sem isto, texto dourado sobre céu
   dourado some — foi o motivo de escolher o banner com o vale escuro à
   esquerda. */
.app-header::after {
  content: '';
  position: absolute;
  inset: -1.5rem -2rem 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 9, 7, 0.95) 0%, rgba(10, 9, 7, 0.85) 32%, rgba(10, 9, 7, 0.66) 62%, rgba(10, 9, 7, 0.6) 100%);
}

/* Brasão (flâmula) ao lado do título — substitui o SVG de estrela inline. */
.app-crest {
  width: 3.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
  animation: crest-glow 4.5s ease-in-out infinite;
}

@keyframes crest-glow {
  0%, 100% { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75)); }
  50%      { filter: drop-shadow(0 3px 14px rgba(224, 154, 43, 0.35)); }
}

/* --- Painéis: marca-d'água no canto ---------------------------------
   Silhueta chapada da paleta (#a67c52) a 7% — presença, não desenho. Fica
   atrás de tudo (z-index/-1 no contexto do painel) e não intercepta clique. */
.panel-crest {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  opacity: 0.07;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.panel-crest--fortaleza { background-image: url('../assets/page_layout/png/fortaleza.png'); }
.panel-crest--taverna   { background-image: url('../assets/page_layout/png/taverna.png'); }
.panel-crest--mapa      { background-image: url('../assets/page_layout/png/mapa.png'); }

/* Rótulo do painel (FORTALEZA/TAVERNA/MAPA) alinhado à esquerda, sem os
   filetes que cercam o texto. Modificador em vez de mudar .ornament direto:
   a classe base é usada em mais de 10 popups, que continuam centralizados. */
.ornament--panel {
  gap: 0;
  letter-spacing: 0.3em;
  font-weight: 600;
  color: rgba(166, 124, 82, 0.85);
}
.ornament--panel::before,
.ornament--panel::after {
  content: none;
}

/* --- Barra lateral: medalhões --------------------------------------
   A moldura é UMA imagem repetida em todos os botões (por isso os cinco
   ficam idênticos de verdade) e o símbolo vai por dentro. Enquanto um
   símbolo não existir em PNG, o emoji antigo continua aparecendo no miolo
   — nada quebra, só não fica dourado ainda. */
.quick-fab-btn,
.floating-contracts-btn {
  background-image: url('../assets/page_layout/png/moldura.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.quick-fab-btn:hover,
.floating-contracts-btn:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 14px rgba(224, 154, 43, 0.4);
}

/* [AJUSTADO — pedido do jogador: usar assets/lore/chapter-open.png (fundo
   transparente) puro, sem nenhum fundo/moldura/glow por trás -- só a
   própria imagem. */
#btn-open-lore-book {
  background: none;
  background-image: none;
  border: 0;
  box-shadow: none;
}
#btn-open-lore-book:hover {
  background: none;
  box-shadow: none;
  transform: translateY(-2px);
}
.lore-fab-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  transition: transform .15s ease, filter .15s ease;
}
#btn-open-lore-book:hover .lore-fab-icon {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)) brightness(1.12);
}

/* Símbolo dourado dentro do medalhão. */
.fab-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.fab-icon--trofeu     { background-image: url('../assets/page_layout/png/trofeu.png'); }
.fab-icon--pergaminho { background-image: url('../assets/page_layout/png/pergaminho.png'); }
.fab-icon--bestiario  { background-image: url('../assets/page_layout/png/bestiario.png'); }
.fab-icon--novidades  { background-image: url('../assets/page_layout/png/novidades.png'); }
.fab-icon--guia       { background-image: url('../assets/page_layout/png/guia_reino.png'); }
.fab-icon--leilao     { background-image: url('../assets/page_layout/png/leilao.png'); }
.fab-icon--bau        { width:1.8rem; height:1.8rem; background-image: url('../assets/itens/dgs/bau_1.png'); filter:drop-shadow(0 .12rem .16rem rgba(0,0,0,.65)); }

/* Baú da Fortaleza — armazenamento geral em 60 espaços (6 × 10). */
.fortress-chest-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(4,3,2,.78); backdrop-filter:blur(3px); }
.fortress-chest-shell { position:relative; width:min(52rem,100%); max-height:calc(100vh - 2rem); overflow:auto; padding:1.2rem; border:1px solid var(--border-gold-muted); background:linear-gradient(180deg,#1b1712,#100e0b); box-shadow:inset 0 0 0 1px rgba(242,189,74,.07),0 1.2rem 3.5rem rgba(0,0,0,.7); }
.fortress-chest-heading { display:flex; align-items:center; gap:.75rem; padding:0 .2rem .85rem; border-bottom:1px solid var(--border-dark); }
.fortress-chest-heading img { width:3.25rem; height:3.25rem; object-fit:contain; filter:drop-shadow(0 .2rem .3rem rgba(0,0,0,.65)); }
.fortress-chest-heading .ornament { margin:0; color:var(--gold-text); font:700 .54rem 'Source Sans 3',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.fortress-chest-heading h2 { margin:.1rem 0; color:var(--gold-highlight); font:700 1.25rem 'Cinzel',Georgia,serif; }
.fortress-chest-heading p:last-child { margin:0; color:var(--text-secondary); font:.66rem 'Source Sans 3',sans-serif; }
.fortress-chest-filters { display:flex; flex-wrap:wrap; gap:.35rem; }
.fortress-chest-filter { border:1px solid var(--border-dark); background:#17120d; color:var(--text-secondary); padding:.32rem .55rem; font:600 .58rem 'Source Sans 3',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.fortress-chest-filter span { color:var(--gold-text); font-variant-numeric:tabular-nums; }
.fortress-chest-filter:hover,.fortress-chest-filter.is-active { border-color:var(--border-gold-muted); color:var(--gold-highlight); background:#2b1e0d; }

/* [NOVO -- pedido do jogador: "adiciona por favor um ordenador de itens
 * para level... e um botão que vc escolha os filtros, ele abre uma lista e
 * essa lista vai abrir e mostrar os filtros"] Barra com o select de
 * ordenação (mesmo componente .mochila-sort-select da Mochila, reaproveitado
 * aqui) + o botão que abre/fecha o painel de filtros logo abaixo. */
.fortress-chest-toolbar { display:flex; align-items:center; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.fortress-chest-filters-toggle {
  display:flex; align-items:center; gap:.3rem;
  border:1px solid var(--border-dark); background:#17120d; color:var(--text-secondary);
  padding:.3rem .6rem; font:600 .58rem 'Source Sans 3',sans-serif; text-transform:uppercase; letter-spacing:.04em;
}
.fortress-chest-filters-toggle:hover,
.fortress-chest-filters-toggle[aria-expanded="true"] { border-color:var(--border-gold-muted); color:var(--gold-highlight); background:#2b1e0d; }
.fortress-chest-filters-count {
  display:inline-grid; place-items:center; min-width:1.05rem; height:1.05rem; padding:0 .25rem;
  border-radius:999px; background:var(--gold-text); color:#17120d; font:700 .55rem 'Source Sans 3',sans-serif;
}
/* Painel que "abre" com a lista de filtros -- mesma paleta/moldura das
 * pílulas de raridade que já existiam, só agrupadas em duas fileiras
 * (Raridade / Tipo) dentro de um contêiner que aparece/some. */
.fortress-chest-filters-panel {
  display:flex; flex-direction:column; gap:.45rem;
  margin-top:.55rem; padding:.65rem .7rem; border:1px solid var(--border-dark); background:rgba(12,10,8,.55);
}
.fortress-chest-filters-group-label {
  margin:0; font:700 .55rem 'Source Sans 3',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary);
}
.fortress-chest-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.42rem; margin-top:.9rem; }
.fortress-chest-slot { position:relative; display:flex; min-width:0; min-height:5.6rem; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border-dark); background:linear-gradient(145deg,#201a13,#12100d); color:var(--text-secondary); cursor:pointer; }
.fortress-chest-slot:not(.fortress-chest-slot--empty):hover { border-color:var(--border-gold-muted); background:linear-gradient(145deg,#2a2116,#18120d); box-shadow:0 0 .65rem var(--shadow-gold); }
.fortress-chest-slot--empty { cursor:default; background:linear-gradient(145deg,rgba(31,25,18,.42),rgba(12,10,8,.65)); box-shadow:inset 0 0 .55rem rgba(0,0,0,.28); }
.fortress-chest-slot-icon { display:grid; place-items:center; width:3.5rem; height:3.5rem; font-size:2.25rem; }
.fortress-chest-slot-icon img { max-width:100%; max-height:100%; object-fit:contain; }
/* [NOVO -- pedido do jogador: "faltou colocar esse level nos itens que
 * ficam no baú tambem"] mesma bolinha de nível (.item-level-badge) de
 * Mochila/Forja/equip-slot -- aqui o slot inteiro é o botão (não só o
 * ícone), então o canto é relativo a .fortress-chest-slot; cadeado já mora
 * no top-left e a contagem de pilha no bottom-right, então a bolinha de
 * nível fica no top-right. */
.fortress-chest-slot .item-level-badge { top:.2rem; right:.2rem; }
.fortress-chest-slot.rarity-comum { border-color:rgba(154,163,176,.72); }
.fortress-chest-slot.rarity-magico { border-color:rgba(94,163,216,.82); box-shadow:inset 0 0 .55rem rgba(94,163,216,.09); }
.fortress-chest-slot.rarity-raro { border-color:rgba(230,194,41,.88); box-shadow:inset 0 0 .55rem rgba(230,194,41,.1); }
.fortress-chest-slot.rarity-lendario { border-color:rgba(224,154,43,.95); box-shadow:inset 0 0 .7rem rgba(224,154,43,.17),0 0 .45rem rgba(224,154,43,.2); }
.fortress-chest-stack-count { position:absolute; right:.22rem; bottom:.18rem; min-width:1.45rem; padding:.08rem .2rem; border:1px solid rgba(242,189,74,.52); background:rgba(10,8,5,.88); color:var(--gold-highlight); font:700 .63rem 'Source Sans 3',sans-serif; text-align:center; text-shadow:0 1px #000; }
.fortress-chest-modal .hint-balloon { z-index:80; }
.fortress-chest-overflow { margin:.75rem 0 0; color:var(--danger-bright); font:.64rem 'Source Sans 3',sans-serif; text-align:center; }
#item-context-menu { z-index:70; }
@media (max-width:520px) { .fortress-chest-shell { padding:.85rem; }.fortress-chest-grid { gap:.3rem; }.fortress-chest-slot { min-height:4.4rem; }.fortress-chest-slot-icon { width:2.65rem; height:2.65rem; font-size:1.65rem; } }

/* Rótulo embaixo de cada botão. */
.quick-fab-stack {
  gap: 0.85rem;
}
.fab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.fab-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(166, 124, 82, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Em tela estreita o rótulo some — o medalhão sozinho já cabe, o rótulo
   junto empurraria conteúdo do jogo. */
@media (max-width: 640px) {
  .fab-label { display: none; }
}

/* --- Moldura do mapa do reino --------------------------------------
   [pedido do jogador: "tem como colocar uma borda bonita em volta do mapa
   do reino?"]

   Por que um WRAPPER e não uma borda na própria .fortress-stage: os hotspots
   dos prédios (Castelo, Quartel, Ferraria...) são posicionados em PORCENTAGEM
   dentro da .fortress-stage. Porcentagem de elemento absoluto resolve contra
   a caixa de padding do pai — então borda/padding aplicados direto na stage
   deslocariam TODOS os hotspots em relação ao desenho, e cada prédio ficaria
   com a área de clique fora do lugar. Com a moldura num elemento por fora, a
   stage continua com o mesmo sistema de coordenadas de sempre e nenhum
   hotspot se mexe.

   Zero asset novo: o relevo é todo gradiente + os cantos são 8 barrinhas
   desenhadas com background-image. Escala em qualquer tamanho de tela sem
   perder nitidez, o que uma moldura de imagem (9-slice) não faria de graça. */
.map-frame {
  --frame-gold: rgba(224, 154, 43, 0.55);
  position: relative;
  padding: 0.7rem;
  background:
    linear-gradient(160deg, #3d2f1e 0%, #241c13 30%, #1a1510 55%, #241c13 78%, #3d2f1e 100%);
  border: 1px solid rgba(196, 165, 116, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Filete dourado interno, encostado no mapa. */
.map-frame::before {
  content: '';
  position: absolute;
  inset: 0.45rem;
  border: 1px solid var(--frame-gold);
  pointer-events: none;
}

/* Cantoneiras: duas barras por canto (uma deitada, uma em pé). */
.map-frame::after {
  content: '';
  position: absolute;
  inset: 0.18rem;
  pointer-events: none;
  background-image:
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold)),
    linear-gradient(var(--frame-gold), var(--frame-gold));
  background-repeat: no-repeat;
  background-size:
    22px 2px, 2px 22px,   /* superior esquerdo */
    22px 2px, 2px 22px,   /* superior direito */
    22px 2px, 2px 22px,   /* inferior esquerdo */
    22px 2px, 2px 22px;   /* inferior direito */
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* A stage perde o cantinho arredondado e a borda própria (rounded/border-…
   vindos das classes utilitárias no index.html) — quem faz a borda agora é a
   moldura, e duas bordas concorrendo ficam sujas. */
.map-frame > .fortress-stage,
.map-frame > #kingdom-view-stage {
  border: 0;
  border-radius: 0;
}

/* =====================================================================
   SALA DE COMANDO — tela principal

   A página deixa de ser uma grade de três cartões iguais. O reino continua
   à esquerda, sem alterar seu mapa/hotspots; Expedição vira a ação central e
   Heróis a coluna de apoio. Toda a moldura é CSS: não depende de arte nova.
   ===================================================================== */
.game-dashboard {
  display: grid;
  grid-template-columns: minmax(17rem, 0.88fr) minmax(31rem, 1.48fr) minmax(17rem, 0.88fr);
  grid-template-areas: 'kingdom heroes expedition';
  align-items: start;
  gap: 0.9rem;
}

.game-dashboard > .panel {
  overflow: hidden;
  min-width: 0;
  border-color: var(--border-default);
  background: linear-gradient(180deg, #1b1712 0%, #12100d 45%, #0d0c0a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(210, 154, 60, 0.05),
    0 4px 14px var(--shadow-panel);
}

.game-dashboard > .panel::before {
  inset: 4px;
  border-color: rgba(116, 84, 36, 0.35);
}

.kingdom-panel { grid-area: kingdom; }
.expedition-command-panel { grid-area: expedition; }
.hero-roster-panel { grid-area: heroes; }

/* [NOVO — refatoração do painel direito da Expedição, pedido do jogador]
   Indicador pequeno de status do bloco "Expedição em Andamento": verde
   discreto com atividade, cinza sem nenhuma. Só uma bolinha — reaproveita
   os tokens de cor já existentes (--success/--text-muted), sem paleta nova. */
.expedition-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.expedition-status-dot.is-active {
  background: var(--success);
  box-shadow: 0 0 5px rgba(121, 181, 66, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Card compacto de atividade em andamento (Caçada/Dungeon) dentro do bloco
   "Expedição em Andamento" — mesma superfície/borda já usada pelos cards
   antigos de renderZoneGrindProgress/renderDungeonRunProgress (border-bark
   + bg-fort-950), só reembalado num nome de classe próprio pra não repetir
   a mesma lista de classes Tailwind em toda linha de expeditionCommandCardHtml. */
.expedition-command-card {
  border: 1px solid var(--border-dark);
  background: var(--bg-panel);
  padding: 0.85rem;
}
.expedition-command-card + .expedition-command-card {
  margin-top: 0.75rem;
}


/* O título ganha uma faixa própria — é ela que faz painéis grandes e
   subpainéis parecerem parte de uma mesma interface, em vez de cards soltos. */
.game-dashboard .ornament--panel {
  position: relative;
  margin: -0.25rem -0.25rem 0.7rem;
  padding: 0.5rem 0.65rem 0.55rem;
  border-bottom: 1px solid var(--border-dark);
  background: linear-gradient(90deg, rgba(56, 37, 15, 0.66), rgba(23, 19, 15, 0.2) 72%, transparent);
  color: var(--gold);
  text-shadow: 0 1px 2px #000;
}

.game-dashboard .panel-title {
  color: var(--gold-bright);
  font-size: clamp(1rem, 1.15vw, 1.32rem);
  line-height: 1.2;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}

.game-dashboard .panel-title + p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.25;
}

/* O mapa de Erevia é preservado literalmente. Só recebe o mesmo acabamento
   de vitrine dos outros elementos da nova tela. */
.kingdom-panel .map-frame {
  margin-top: 0.9rem;
  padding: 0.48rem;
  --frame-gold: rgba(148, 112, 46, 0.72);
  background: linear-gradient(145deg, var(--bg-gold-dark), var(--bg-panel) 46%, #2b1d0e);
  border-color: var(--border-bronze);
}

.kingdom-panel .map-frame::before { inset: 0.27rem; }
.kingdom-panel .map-frame::after { inset: 0.1rem; }
.kingdom-panel #kingdom-view-desc { color: #c4b292; line-height: 1.42; }

/* Primeiro painel — visão administrativa do reino. A arte e os hotspots
   continuam logo após o resumo, preservando a interação de cada cidade. */
.kingdom-panel #invasion-box,
.kingdom-panel #invasion-locked-box {
  display: none !important;
}

/* A descrição já aparece no resumo administrativo; evita repetir o mesmo
   texto depois da imagem interativa quando outro reino estiver selecionado. */
.kingdom-panel #kingdom-view-desc { display: none; }

.kingdom-panel #fortress-kingdom-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
}

.kingdom-panel #fortress-kingdom-tabs .report-tab-btn {
  display: block !important;
  min-width: 0;
  padding: 0.52rem 0.32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.61rem;
  letter-spacing: 0.025em;
}

.kingdom-overview {
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-dark);
}

.kingdom-overview-header {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.kingdom-overview-emblem {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--gold-text);
  font-size: 1.2rem;
  border: 1px solid var(--border-bronze);
  background: linear-gradient(145deg, var(--bg-gold-dark), var(--bg-panel));
  box-shadow: inset 0 0 0 1px rgba(242, 189, 74, 0.05);
}

.kingdom-current-name {
  margin: 0;
  color: var(--gold-bright);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kingdom-current-status {
  margin: 0.12rem 0 0;
  color: var(--text-muted);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.68rem;
}

.kingdom-city-slot {
  margin-top: 0.72rem;
}

.kingdom-city-slot > #fortress-dunmar-view,
.kingdom-city-slot > #fortress-kingdom-view {
  margin-top: 0 !important;
}

/* A reparação da muralha continua disponível nas Atualizações do Reino. O
   resumo substitui este botão redundante para a imagem ficar limpa aqui. */
.kingdom-city-slot #fortress-dunmar-view > .mt-3 {
  display: none;
}

.kingdom-current-desc {
  min-height: 3.7rem;
  margin: 0.68rem 0 0;
  color: var(--text-secondary);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.93rem;
  line-height: 1.28;
}

.kingdom-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0.78rem;
  padding-top: 0.78rem;
  border-top: 1px solid var(--border-dark);
}

.kingdom-stat-card {
  min-width: 0;
  min-height: 10.35rem;
  padding: 0.58rem 0.45rem;
  background: linear-gradient(180deg, #1d1812, #13100d);
  border: 1px solid #443521;
  box-shadow: inset 0 1px 0 rgba(242, 189, 74, 0.035);
  text-align: center;
}

.kingdom-stat-label {
  margin: 0;
  color: var(--gold-text);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.18;
  text-transform: uppercase;
}

.kingdom-stat-value {
  margin: 0.75rem 0 0.38rem;
  color: var(--text-muted);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.kingdom-stat-value strong {
  display: block;
  margin-top: 0.03rem;
  color: var(--gold-bright);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.42rem;
  line-height: 1;
}

.kingdom-meter {
  height: 0.38rem;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  background: #0d0c0a;
}

.kingdom-meter > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
  transition: width 0.24s ease;
}

.kingdom-meter--morale > span { background: linear-gradient(90deg, #527d2d, var(--success)); }
.kingdom-meter--domain > span { background: linear-gradient(90deg, #8f611c, #e4a52d); }

.kingdom-stat-detail {
  margin: 0.38rem 0 0;
  color: var(--text-secondary);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.56rem;
  line-height: 1.2;
}

.kingdom-production-list {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  margin-top: 0.72rem;
  text-align: left;
}

.kingdom-production-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  width: 4.65rem;
  margin-inline: auto;
  gap: 0.28rem;
  color: var(--gold-text);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.69rem;
  font-weight: 700;
}

.kingdom-production-row img {
  width: 0.92rem;
  height: 0.92rem;
  object-fit: contain;
  image-rendering: pixelated;
  justify-self: center;
}

.kingdom-morale-status {
  margin: 0.7rem 0 0;
  color: var(--success-bright);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.77rem;
  font-weight: 700;
  text-transform: uppercase;
}

.kingdom-morale-value {
  margin: 0.08rem 0 0.5rem;
  color: var(--text-primary);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.kingdom-domain-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.78rem;
  padding: 0.62rem 0.7rem;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-panel-secondary));
  border: 1px solid var(--border-default);
  box-shadow: inset 0 1px 0 rgba(242, 189, 74, 0.05);
}

.kingdom-domain-main { min-width: 0; flex: 1; }
.kingdom-domain-progress-row { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.43rem; }
.kingdom-domain-progress-row .kingdom-meter { flex: 1; }
.kingdom-domain-progress { flex: 0 0 auto; color: var(--text-secondary); font-family: 'Source Sans 3', sans-serif; font-size: 0.61rem; white-space: nowrap; }

.kingdom-level-medallion {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  place-content: center;
  border: 1px solid var(--border-gold-muted);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #3b2a12, #17110a 70%);
  color: var(--text-secondary);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.kingdom-level-medallion strong { display: block; margin-top: 0.16rem; color: var(--gold-highlight); font-family: 'Cinzel', Georgia, serif; font-size: 1rem; }

.kingdom-return-slot { margin-top: 0.7rem; }
.kingdom-return-slot .btn-torch { width: 100%; padding-block: 0.68rem; }

@media (max-width: 760px) {
  .kingdom-panel #fortress-kingdom-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kingdom-stat-grid { grid-template-columns: 1fr; }
  .kingdom-stat-card { min-height: 0; }
  .kingdom-production-list { display: grid; grid-template-columns: repeat(4, 1fr); }
}

/* Todo bloco interno passa a usar a mesma profundidade: borda dourada fina,
   fundo preto e uma faixa de luz no alto. IDs e estrutura existentes ficam
   intactos, então renderizadores de JS continuam funcionando. */
.game-dashboard .progress-track,
.game-dashboard #invasion-box,
.game-dashboard #expedition-progress-list > *,
.game-dashboard #zone-grind-progress-list > *,
.game-dashboard #dungeon-run-progress-list > *,
.game-dashboard #expedition-schedule-list > *,
.game-dashboard #zone-grind-battle-reports-list > *,
.game-dashboard #army-slots > * {
  box-shadow: inset 0 1px 0 rgba(255, 224, 142, 0.06);
}

.game-dashboard .btn-stone,
.game-dashboard .report-tab-btn {
  border-color: #644923;
  background: #211a12;
  color: #d6b06a;
}

.game-dashboard .btn-stone:hover:not(:disabled),
.game-dashboard .report-tab-btn:hover {
  background: #302315;
  border-color: #a3732b;
}

.game-dashboard .btn-torch,
.game-dashboard .report-tab-active {
  color: #1b1107;
  border-color: #efbd52;
  background: linear-gradient(180deg, #e0a02d 0%, #b87519 55%, #915814 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 14px rgba(202, 139, 34, 0.16);
}

/* Expedição fica deliberadamente maior e mais respirável: é o painel no
   qual o jogador toma a decisão principal da sessão. */
.expedition-command-panel { min-height: 36rem; }

.expedition-command-panel #map-thumbnail {
  margin-top: 1rem;
  border: 1px solid var(--border-bronze);
  border-radius: 0;
  background: #0a0805;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.65), 0 8px 19px rgba(0, 0, 0, 0.35);
}

.expedition-command-panel #map-thumbnail img {
  opacity: 0.86;
  filter: saturate(0.68) sepia(0.22) contrast(1.08);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.expedition-command-panel #map-thumbnail:hover img {
  opacity: 1;
  filter: saturate(0.92) sepia(0.12) contrast(1.08);
  transform: scale(1.012);
}

.expedition-command-panel #map-thumbnail > span {
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-gold-muted);
  border-radius: 0;
  background: rgba(20, 13, 6, 0.9);
  color: var(--gold-text);
}

.expedition-command-panel #expedition-progress-list,
.expedition-command-panel #zone-grind-progress-list,
.expedition-command-panel #dungeon-run-progress-list,
.expedition-command-panel #expedition-schedule-list,
.expedition-command-panel #zone-grind-battle-reports-list {
  position: relative;
  padding: 0.7rem;
  border: 1px solid var(--border-dark);
  background: var(--bg-panel-secondary);
}

.hero-roster-panel { min-height: 42rem; border-color: var(--border-gold-muted) !important; }

.hero-roster-panel #army-slots,
.hero-roster-panel #inventory-grid {
  position: relative;
  padding: 0.55rem;
  border: 1px solid var(--border-dark);
  background: var(--bg-panel-secondary);
}

.hero-roster-panel .report-tab-btn {
  min-height: 2.25rem;
}

/* Painel central — comando da Expedição Idle. Componentes internos usam a
   paleta global, sem criar uma segunda identidade visual. */
.legacy-tavern-main { display: none !important; }
.idle-expedition-hub { display: flex; flex-direction: column; gap: 0.62rem; margin-top: 0.85rem; }
/* [NOVO — pedido do jogador: "o painel todo das configurações das
 * missoes tem que ficar bloqueado" enquanto o herói está em expedição]
 * Trava visual + de interação em bloco (opacity + pointer-events), igual
 * já se fazia botão a botão (.btn-torch:disabled) — ver toggle em
 * renderIdleExpeditionHub (ui.js), que também seta `disabled` nos campos
 * de verdade (inputs/checkboxes não respeitam pointer-events sozinhos
 * pro teclado, então o disabled real continua sendo a trava principal;
 * isso aqui só entrega o feedback visual). */
#idle-mission-config-panel.is-locked { opacity: 0.45; pointer-events: none; filter: grayscale(0.25); }

.idle-hero-summary { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.72rem; padding-bottom: 0.68rem; border-bottom: 1px solid var(--border-dark); }
.idle-hero-portrait-frame{position:relative;width:8rem;height:9.5rem;padding:.22rem;border:1px solid var(--border-gold-muted);background:linear-gradient(135deg,#2d2112,#0d0c0a 58%,#38250f);box-shadow:inset 0 0 0 1px rgba(242,189,74,.16),0 3px 10px rgba(0,0,0,.5)}.idle-hero-portrait-frame::before,.idle-hero-portrait-frame::after{position:absolute;width:1.15rem;height:1.15rem;border-color:var(--gold-text);content:'';opacity:.75}.idle-hero-portrait-frame::before{top:.14rem;left:.14rem;border-top:1px solid;border-left:1px solid}.idle-hero-portrait-frame::after{right:.14rem;bottom:.14rem;border-right:1px solid;border-bottom:1px solid}.idle-hero-portrait { display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border:1px solid var(--border-dark);background:var(--bg-panel-secondary);filter:saturate(.88) contrast(1.04); }.idle-hero-level{position:absolute;z-index:2;top:.35rem;left:.35rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid var(--gold-text);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(180deg,#21170c,#0b0a08);color:var(--gold-highlight);font:700 .85rem 'Cinzel',Georgia,serif;text-shadow:0 1px #000}.idle-hero-crest{position:absolute;z-index:2;left:.34rem;bottom:.3rem;display:grid;place-items:center;width:1.25rem;height:1.25rem;border:1px solid var(--success);background:#16200d;color:var(--success-bright);font-size:.72rem;clip-path:polygon(50% 0,90% 20%,82% 84%,50% 100%,18% 84%,10% 20%)}
.idle-hero-info { min-width: 0; }
.idle-hero-name { margin: 0; color: var(--gold-bright); font: 700 1.02rem/1.15 'Cinzel', Georgia, serif; letter-spacing: .045em; text-transform: uppercase; }
.idle-hero-meta { margin: .22rem 0 .48rem; color: var(--text-secondary); font: .68rem/1.2 'Source Sans 3', sans-serif; }
.idle-hero-vitals { display: grid; gap: .32rem; }
.idle-use-energy { width: 100%; margin-top: .18rem; padding: .42rem .65rem; font-size: .62rem; }
.idle-vital-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; color: var(--text-secondary); font: .58rem 'Source Sans 3', sans-serif; }
.idle-vital-row strong { color: var(--text-primary); font-weight: 600; }
.idle-vital-track { height: .32rem; overflow: hidden; border: 1px solid var(--border-dark); background: var(--bg-page); }
.idle-vital-track i { display:block; height:100%; background: var(--success); }
.idle-vital-row--hp i { background:#bd4338; }.idle-vital-row--energy i { background:var(--energy); }.idle-vital-row--mana i { background:var(--mana); }.idle-vital-row--xp i { background:var(--xp); }
.idle-two-up,.idle-three-up { display:grid; gap:.55rem; }.idle-two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }.idle-three-up { grid-template-columns:repeat(3,minmax(0,1fr)); }
.idle-subcard,.idle-mission-card,.idle-loot-card { background:linear-gradient(180deg,var(--bg-panel-elevated),#13100d); border:1px solid #443521; box-shadow:inset 0 1px 0 rgba(242,189,74,.035); }
.idle-subcard { min-width:0; padding:.6rem; }.idle-subcard-title { margin:0; color:var(--gold-text); font:700 .55rem/1.2 'Source Sans 3',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.idle-active-bonuses { display:grid; gap:0; margin-top:.45rem; border-top:1px solid var(--border-dark); }.idle-bonus-row { display:grid; grid-template-columns:1.25rem 1fr auto; align-items:center; gap:.34rem; min-height:1.58rem; border-bottom:1px solid var(--border-dark); color:var(--text-secondary); font:.64rem 'Source Sans 3',sans-serif; }.idle-bonus-row:last-child{border-bottom:0}.idle-bonus-row i{color:var(--success-bright);font-size:.91rem;font-style:normal;text-align:center;text-shadow:0 0 5px rgba(155,215,85,.32)}.idle-bonus-row strong { color:var(--success-bright);font-size:.67rem; }
.idle-combat-stance-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; margin-top:.48rem; }.idle-stance-button { min-height:4.7rem; padding:.26rem; border:1px solid var(--border-dark); background:var(--bg-panel); color:var(--text-secondary); font:600 .49rem 'Source Sans 3',sans-serif; text-transform:uppercase; }.idle-stance-button img { display:block; width:1.5rem; height:1.5rem; margin:0 auto .18rem; object-fit:contain; }.idle-stance-button small{display:block;margin-top:.18rem;font-size:.43rem;line-height:1.15;text-transform:none}.idle-stance-button.is-active { border-color:var(--border-gold); background:var(--bg-gold-dark); color:var(--gold-highlight); box-shadow:0 0 10px var(--shadow-gold), inset 0 0 0 1px rgba(242,189,74,.1); }.idle-stance-effects { min-height:1.7rem; margin:.42rem 0 0; color:var(--text-muted); font:.56rem/1.25 'Source Sans 3',sans-serif; }.idle-modifier--gain{color:var(--success-bright)}.idle-modifier--loss{color:var(--danger-bright)}
.idle-mission-card,.idle-loot-card { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.65rem .72rem; }.idle-mission-name { margin:.22rem 0 0; color:var(--text-primary); font:700 .78rem 'Cinzel',Georgia,serif; }.idle-centered { text-align:center; }.idle-rewards-per-hour { display:flex; justify-content:center; flex-wrap:wrap; gap:.26rem .45rem; margin-top:.53rem; color:var(--gold-text); font:600 .63rem 'Source Sans 3',sans-serif; }.idle-reward-estimate { color:var(--gold-highlight); font-size:.67rem; }.idle-rewards-per-hour small { flex-basis:100%; color:var(--text-muted); font-size:.5rem; }.idle-success-chance,.idle-danger-level { margin:.48rem 0 0; font:700 1.1rem 'Cinzel',Georgia,serif; }.idle-success-chance { color:var(--success-bright); }.idle-danger-level { color:var(--gold); }.idle-afk-loot { margin-top:.3rem; color:var(--text-secondary); font:.62rem/1.35 'Source Sans 3',sans-serif; }.idle-start-button { width:100%; padding:.82rem; font-size:.85rem; }
.idle-mission-banner { position:relative; min-height:5.45rem; isolation:isolate; overflow:hidden; border-color:var(--border-default); background:#110e0a; box-shadow:inset 0 0 0 1px rgba(242,189,74,.04),inset 0 -1.6rem 2rem rgba(0,0,0,.34); }
.idle-mission-banner-image { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.9; filter:saturate(.82) contrast(1.08) brightness(1.16); }
.idle-mission-banner::before { position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(13,10,7,.78) 0%,rgba(13,10,7,.43) 46%,rgba(5,4,3,.1) 100%); content:''; }
.idle-mission-copy { position:relative; z-index:1; min-width:0; text-shadow:0 .12rem .3rem rgba(0,0,0,.9); }
.idle-mission-banner .btn-stone { position:relative; z-index:1; flex-shrink:0; background:rgba(27,21,14,.86); backdrop-filter:blur(2px); }
.idle-duration-buttons,.idle-expedition-toggles { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.48rem; }.idle-duration-button,.idle-toggle-button { padding:.35rem .44rem; border:1px solid var(--border-dark); background:var(--bg-panel); color:var(--text-secondary); font:700 .53rem 'Source Sans 3',sans-serif; text-transform:uppercase; }.idle-duration-button.is-active,.idle-toggle-button.is-active { border-color:var(--border-gold-muted); background:var(--bg-gold-dark); color:var(--gold-text); }.idle-automation-row{display:grid;grid-template-columns:1fr 1.8rem .8rem;align-items:center;width:100%;padding:.18rem 0;border:0;background:transparent;color:var(--gold-text);font:700 .53rem 'Source Sans 3',sans-serif;text-align:left;text-transform:uppercase}.idle-automation-row i{position:relative;width:1.7rem;height:.85rem;border:1px solid var(--border-default);border-radius:999px;background:var(--bg-panel)}.idle-automation-row i::after{position:absolute;top:.08rem;left:.1rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--text-muted);content:'';transition:.16s}.idle-automation-row.is-active i{border-color:var(--gold-bright);background:var(--bg-gold-active)}.idle-automation-row.is-active i::after{left:.85rem;background:var(--gold-highlight)}.idle-automation-row small{color:var(--gold-text);font-size:.58rem}.idle-duration-custom{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;color:var(--text-muted);font:600 .58rem 'Source Sans 3',sans-serif}.idle-duration-custom input{width:3.75rem;padding:.33rem;border:1px solid var(--border-default);background:var(--bg-panel);color:var(--gold-text);font:700 .62rem 'Source Sans 3',sans-serif;text-align:center}.idle-potion-picker{display:grid;gap:.46rem;margin-top:.46rem}.idle-potion-row{padding:.45rem 0;color:var(--text-secondary);font:.58rem 'Source Sans 3',sans-serif}.idle-potion-row:first-child{border-top:0}.idle-potion-options,.idle-loot-filter{display:flex;flex-wrap:wrap;gap:.35rem .65rem;margin-top:.45rem}.idle-loot-filter label,.idle-potion-options label{display:flex;align-items:center;gap:.24rem;color:var(--text-secondary);font:.56rem 'Source Sans 3',sans-serif}.idle-loot-chest{width:4.8rem;height:4.8rem;object-fit:contain;image-rendering:auto}.idle-loot-content{min-width:0;flex:1}.idle-loot-card{min-height:5.5rem}.idle-afk-reward-list{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin-top:.25rem;color:var(--gold-text);font:700 .62rem 'Source Sans 3',sans-serif}.idle-loot-card .btn-torch{flex-shrink:0}
.idle-zone-challenge-hint{margin-top:.4rem;color:var(--text-muted);font:600 .56rem 'Source Sans 3',sans-serif;line-height:1.35}
.idle-potion-panel { position:relative; }
.idle-afk-reward-list span { display:inline-flex; align-items:center; gap:.22rem; }
.idle-afk-reward-list img { width:1rem; height:1rem; object-fit:contain; }
.idle-potion-picker { margin-top:.2rem; }
.idle-potion-row { position:relative; padding:.12rem 0 0; }
.idle-potion-enable { position:absolute; top:calc(-.52rem - .55rem); right:0; display:block; width:1.8rem; height:.9rem; cursor:pointer; }
.idle-potion-enable input { position:absolute; opacity:0; pointer-events:none; }
.idle-potion-enable i { position:absolute; inset:0; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-panel); }
.idle-potion-enable i::after { position:absolute; top:.1rem; left:.12rem; width:.54rem; height:.54rem; border-radius:50%; background:var(--text-muted); content:''; transition:.16s ease; }
.idle-potion-enable input:checked + i { border-color:var(--gold-bright); background:var(--bg-gold-active); }
.idle-potion-enable input:checked + i::after { left:.9rem; background:var(--gold-highlight); box-shadow:0 0 5px rgba(242,189,74,.32); }
.idle-potion-enable input:focus-visible + i { outline:1px solid var(--gold-highlight); outline-offset:2px; }
.idle-potion-threshold { display:grid; grid-template-columns:auto minmax(4rem,1fr) 2.2rem; align-items:center; gap:.38rem; color:var(--text-secondary); font:.58rem 'Source Sans 3',sans-serif; }
.idle-potion-threshold input[type='range'] { width:100%; min-width:0; accent-color:var(--gold-bright); }
.idle-potion-threshold span { color:var(--gold-text); font-weight:700; text-align:right; }
.idle-potion-options,.idle-loot-filter { gap:.38rem .68rem; margin-top:.54rem; }
.idle-loot-filter label,.idle-potion-options label { cursor:pointer; }
.idle-loot-filter input[type='checkbox'],.idle-potion-options input[type='checkbox'] { appearance:none; width:.78rem; height:.78rem; margin:0; border:1px solid var(--border-default); border-radius:.1rem; background:var(--bg-panel); display:grid; place-content:center; cursor:pointer; }
.idle-loot-filter input[type='checkbox']::after,.idle-potion-options input[type='checkbox']::after { width:.42rem; height:.22rem; border:solid var(--text-dark); border-width:0 0 .12rem .12rem; content:''; opacity:0; transform:rotate(-45deg) translate(.03rem,-.06rem); }
.idle-loot-filter input[type='checkbox']:checked,.idle-potion-options input[type='checkbox']:checked { border-color:var(--gold-highlight); background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.idle-loot-filter input[type='checkbox']:checked::after,.idle-potion-options input[type='checkbox']:checked::after { opacity:1; }
.idle-loot-filter input[type='checkbox']:focus-visible,.idle-potion-options input[type='checkbox']:focus-visible { outline:1px solid var(--gold-highlight); outline-offset:1px; }
.idle-loot-filter-panel.is-disabled { opacity:.48; }
.idle-loot-filter-panel.is-disabled .idle-subcard-title::after { margin-left:.38rem; color:var(--text-muted); font:600 .48rem 'Source Sans 3',sans-serif; letter-spacing:0; text-transform:none; content:'(ative Prioridade de loot)'; }
.idle-loot-card { position:relative; isolation:isolate; overflow:hidden; min-height:6.2rem; padding:.5rem .72rem; background:linear-gradient(90deg,#16110b 0%,#21170d 18%,#17120d 62%,#110f0c 100%); box-shadow:inset 0 0 0 1px rgba(226,164,45,.055),inset 0 1px 0 rgba(242,189,74,.09),0 4px 14px rgba(0,0,0,.42); }
.idle-loot-card::before { position:absolute; z-index:-1; top:-2.2rem; bottom:-2.2rem; left:-1rem; width:11rem; background:radial-gradient(ellipse at center,rgba(196,120,23,.24),rgba(99,58,13,.1) 39%,transparent 70%); content:''; filter:blur(.2rem); }
.idle-loot-card::after { position:absolute; z-index:-1; top:.35rem; bottom:.35rem; left:6.1rem; width:1px; background:linear-gradient(180deg,transparent,var(--border-default),transparent); content:''; opacity:.55; }
.idle-loot-chest { position:relative; z-index:1; width:5.6rem; height:5.6rem; filter:drop-shadow(0 .32rem .38rem rgba(0,0,0,.7)) drop-shadow(0 0 .55rem rgba(193,119,23,.18)); }
.idle-loot-content { position:relative; z-index:1; }
.idle-loot-reward-well { min-height:2.45rem; margin-top:.25rem; padding:.22rem .48rem; border:1px solid rgba(69,47,21,.5); border-radius:.15rem; background:linear-gradient(90deg,rgba(8,7,6,.48),rgba(29,21,13,.72) 68%,rgba(9,8,7,.2)); box-shadow:inset 0 1px 6px rgba(0,0,0,.38); }
.idle-afk-reward-list { min-height:.1rem; margin-top:0; }
.idle-afk-loot { margin-top:.12rem; color:var(--text-secondary); }
.idle-loot-card .btn-torch { position:relative; z-index:1; min-width:10.35rem; }
@media (max-width:760px) { .idle-hero-summary{grid-template-columns:5.8rem minmax(0,1fr)}.idle-hero-portrait{width:5.8rem;height:7.2rem}.idle-two-up,.idle-three-up{grid-template-columns:1fr}.idle-stance-button{min-height:3.3rem}.idle-loot-card{align-items:flex-start;flex-direction:column}.idle-loot-card .btn-torch{width:100%} }

@media (max-width: 1199px) {
  .game-dashboard {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(22rem, 1.1fr);
    grid-template-areas:
      'kingdom heroes'
      'expedition heroes';
  }
}

@media (max-width: 760px) {
  .game-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .game-dashboard > .panel { width: 100%; }
  .expedition-command-panel,
  .hero-roster-panel { min-height: 0; }
  .game-dashboard .panel-title { font-size: 1.05rem; }
}

/* =====================================================================
   MOLDURA DOS MODAIS (2026-08) — [pedido do jogador: mockups de Leadership/
   Equipamentos/Quartel/Comércio/Mapa com moldura dourada ornamentada]

   POR QUE ISTO É SÓ CSS, SEM MEXER EM NENHUM MODAL: os 26 modais do jogo já
   compartilham exatamente a mesma estrutura —

     <div class="... fixed inset-0 z-50 ...">   (overlay)
       <div class="panel ...">                  (o cartão)
         <button class="modal-close-x">×</button>
         <div class="ornament">Rótulo</div>
         <h2 class="panel-title">Título</h2>

   — então o seletor `.fixed.inset-0 > .panel` pega TODOS eles de uma vez
   e nenhum outro elemento do jogo. As classes utilitárias do Tailwind são
   classes CSS de verdade, dá pra encadear. (Sem o `.z-50` no seletor de
   propósito: 6 modais usam `z-[60]` em vez de `z-50` — Câmbio, Reino,
   Bem-vindo e outros — e ficariam de fora, com um visual diferente do
   resto do jogo sem motivo nenhum.) Os três painéis do tabuleiro
   (Fortaleza/Taverna/Mapa) NÃO são atingidos: eles não vivem dentro de um
   overlay.

   Zero asset novo aqui também — bisel em gradiente e cantoneiras desenhadas.
   Quando existir o PNG de arabesco de canto, é trocar o `background-image`
   de .fixed.inset-0 > .panel::after por ele (4×, um por canto).
   ===================================================================== */

.fixed.inset-0 > .panel,
.fixed.inset-0 .taverna-modal-panel {
  --modal-gold: rgba(224, 154, 43, 0.6);
  --modal-gold-soft: rgba(196, 165, 116, 0.35);
  position: relative;
  background:
    linear-gradient(165deg, rgba(38, 30, 22, 0.99) 0%, rgba(18, 15, 11, 0.995) 55%, rgba(26, 21, 16, 0.99) 100%);
  border: 1px solid rgba(224, 154, 43, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    0 18px 60px rgba(0, 0, 0, 0.75);
}

/* Filete dourado interno (a "segunda linha" da moldura dos mockups).
   Substitui o .panel::before genérico, que é um retângulo cinza sem graça. */
.fixed.inset-0 > .panel::before,
.fixed.inset-0 .taverna-modal-panel::before {
  inset: 5px;
  border: 1px solid var(--modal-gold-soft);
}

/* Arabescos nos quatro cantos. Quatro arquivos porque background-image não
   rotaciona — as orientações saem espelhadas na hora de processar a arte
   (a original veio como canto superior esquerdo). */
.fixed.inset-0 > .panel::after,
.fixed.inset-0 .taverna-modal-panel::after {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background-image:
    url('../assets/page_layout/png/borda_se.png'),
    url('../assets/page_layout/png/borda_sd.png'),
    url('../assets/page_layout/png/borda_ie.png'),
    url('../assets/page_layout/png/borda_id.png');
  background-repeat: no-repeat;
  background-size: 3.2rem 3.2rem;
  background-position: left top, right top, left bottom, right bottom;
}

/* --- Título do modal ------------------------------------------------
   Nos mockups o título é ouro escovado com um brilho de cima pra baixo.
   background-clip:text dá isso sem imagem nenhuma. */
.fixed.inset-0 > .panel .panel-title,
.fixed.inset-0 .taverna-modal-panel .panel-title {
  background: linear-gradient(180deg, #fff1a8 0%, #f5b942 42%, #c47a15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* O rótulo pequeno acima do título (LEADERSHIP, QUARTEL, COMÉRCIO...) ganha
   os losangos que os mockups têm nas pontas, no lugar dos filetes lisos. */
.fixed.inset-0 > .panel > .ornament,
.fixed.inset-0 .taverna-modal-panel .ornament {
  justify-content: center;
  gap: 0.6rem;
  color: rgba(224, 154, 43, 0.85);
  letter-spacing: 0.32em;
  font-weight: 600;
}
.fixed.inset-0 > .panel > .ornament::before,
.fixed.inset-0 > .panel > .ornament::after,
.fixed.inset-0 .taverna-modal-panel .ornament::before,
.fixed.inset-0 .taverna-modal-panel .ornament::after {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 6px;
  /* Losango em SVG inline (data-URI): um quadrado rotacionado não dá pra
     desenhar com gradiente de fundo, e o SVG fica nítido em qualquer zoom. */
  background:
    linear-gradient(90deg, transparent, var(--modal-gold)) no-repeat left center / 1.6rem 1px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 L10 5 L5 10 L0 5 Z' fill='%23e09a2b'/%3E%3C/svg%3E") no-repeat right center / 6px 6px;
}
.fixed.inset-0 > .panel > .ornament::before,
.fixed.inset-0 .taverna-modal-panel .ornament::before {
  transform: scaleX(-1);
}

/* --- Botão de fechar ------------------------------------------------ */
.fixed.inset-0 .modal-close-x {
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid rgba(224, 154, 43, 0.65);
  background:
    radial-gradient(circle at 50% 35%, rgba(61, 47, 30, 0.95), rgba(12, 10, 8, 0.98));
  color: #f5b942;
  font-size: 1.2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 230, 180, 0.12);
}
.fixed.inset-0 .modal-close-x:hover {
  color: #fff1a8;
  border-color: rgba(245, 185, 66, 0.9);
  background: radial-gradient(circle at 50% 35%, rgba(143, 36, 25, 0.55), rgba(12, 10, 8, 0.98));
}

/* --- Emblema central e bandeiras laterais dos modais ----------------
   [pedido do jogador: "resolve os cantos, mas e os ícones superiores
   centrais? e as bandeiras?"]

   EMBLEMA (o brasão que fica montado na borda de cima, no meio): é o único
   pedaço do redesign que precisa de marcação por modal, porque o desenho
   MUDA por assunto — coroa no Ranking, espadas no Quartel, balança no
   Comércio. Resolvido com um atributo `data-crest` no cartão + um <span
   class="modal-crest"> vazio, inseridos por script (tools/add_crests.py) em
   27 modais de uma vez. Trocar a arte depois é mexer só nas 4 regras abaixo.

   Os 3 modais que ficaram de fora são de propósito: class-change (não tem
   moldura — os cards de classe SÃO a interface), taverna (o cartão fica
   dentro do palco do taverneiro) e mochila (não é overlay, é uma seção
   dentro de Equipamentos).

   BANDEIRA: entra como CAMADA DE BACKGROUND do próprio cartão, não como
   elemento. Assim não ocupa espaço no fluxo, não intercepta clique e não
   gasta os pseudo-elementos (::before e ::after do cartão já estão levando o
   filete e as cantoneiras). Só nos 8 modais largos — num cartão `max-w-md`
   a bandeira comeria a área útil. */
.modal-crest {
  position: absolute;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.2rem;
  height: 4.2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
  pointer-events: none;
  z-index: 3;
}

/* Os quatro compartilham a mesma moldura (escudo escuro + volutas + losango
   na base) e trocam só o símbolo do centro — é o que faz os 27 modais
   parecerem do mesmo jogo. */
[data-crest="coroa"]   .modal-crest { background-image: url('../assets/page_layout/png/crest_coroa.png'); }
[data-crest="espadas"] .modal-crest { background-image: url('../assets/page_layout/png/crest_espadas.png'); }
[data-crest="balanca"] .modal-crest { background-image: url('../assets/page_layout/png/crest_balanca.png'); }
[data-crest="mapa"]    .modal-crest { background-image: url('../assets/page_layout/png/crest_mapa.png'); }
[data-crest="taverna"] .modal-crest { background-image: url('../assets/page_layout/png/crest_taverna.png'); }

/* --- Crônicas de Eldoria -------------------------------------------------
 * Livro de lore paginado. A arte é uma gravura sem moldura, integrada ao
 * próprio papel; a página direita é HTML para continuar legível em desktop e
 * celular. Os estados de capítulo fechado são preparados para a campanha. */
.lore-book-shell {
  position: relative;
  width: min(72rem, 100%);
  padding: 1.2rem 1.3rem 1rem;
  border: 1px solid rgba(173, 122, 49, .6);
  background: radial-gradient(circle at 50% 0%, rgba(104, 69, 28, .2), transparent 38%), #0b0907;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .82), inset 0 0 0 3px rgba(0, 0, 0, .45);
}
.lore-book-spread {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: min(36rem, 72vh);
  overflow: hidden;
  transform-origin: 50% 50%;
  background: #c8a677;
  box-shadow: inset 0 0 42px rgba(45, 26, 10, .72), 0 10px 30px rgba(0,0,0,.45);
}
.lore-book-art,
.lore-book-page {
  min-height: inherit;
  background-color: #c8a677;
  background-image: radial-gradient(ellipse at 50% 40%, rgba(255, 236, 184, .38), transparent 56%), linear-gradient(115deg, rgba(70, 40, 16, .15), transparent 22%, rgba(77, 45, 18, .16));
}
.lore-book-art {
  background-image: url('../assets/lore/prologo-dunmar.png'), radial-gradient(ellipse at 50% 42%, rgba(255, 235, 181, .66), rgba(126, 83, 37, .18) 66%, rgba(48, 28, 13, .32));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain, cover;
  border-right: 1px solid rgba(57, 33, 15, .35);
  filter: saturate(.72) contrast(1.02);
}
.lore-book-art-muted { opacity: .25; filter: grayscale(1) sepia(.4); }
.lore-book-page--text {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem);
  /* [AJUSTADO — pedido do jogador: fonte mais escura pra leitura] era #3a2515. */
  color: #2b1808;
  box-shadow: inset 22px 0 30px -28px rgba(35, 18, 8, .9), inset 0 0 40px rgba(79, 43, 15, .22);
}
.lore-book-kicker {
  margin: 0;
  color: #80551f;
  font: 700 .65rem/1.2 var(--font-ui, 'Source Sans 3', sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lore-book-title {
  margin: .45rem 0 1.25rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(84, 49, 19, .35);
  color: #40270f;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}
.lore-book-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.55;
  /* [AJUSTADO — pedido do jogador: texto vazando pra fora do livro, por
     cima das setas] só o parágrafo (não o título/kicker/rodapé) cresce e
     rola dentro do espaço disponível -- assim o rodapé fica sempre numa
     posição fixa, nunca coberto nem cobrindo as setas. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(109, 67, 25, .45) transparent;
}
.lore-book-text::-webkit-scrollbar { width: .4rem; }
.lore-book-text::-webkit-scrollbar-track { background: transparent; }
.lore-book-text::-webkit-scrollbar-thumb { background: rgba(109, 67, 25, .45); border-radius: 999px; }
.lore-book-text p { margin: 0 0 1rem; }
.lore-book-section-break {
  margin: 1.4rem 0 .9rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(84, 49, 19, .3);
  text-align: center;
  break-inside: avoid;
}
.lore-book-section-kicker {
  margin: 0 0 .35rem !important;
  color: #80551f;
  font: 700 .58rem/1.2 var(--font-ui, 'Source Sans 3', sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lore-book-section-title {
  margin: 0;
  color: #40270f;
  font: 700 clamp(1rem, 1.5vw, 1.35rem)/1.2 'Cinzel', Georgia, serif;
}
.lore-book-paragraph-italic {
  font-style: italic;
  color: #4a3018;
}
/* [NOVO — pedido do jogador: número de página por coluna, no rodapé,
   em vez do antigo "Página X de Y" que ficava por cima do texto] página
   direita é sempre ímpar, esquerda sempre par -- como um livro de verdade. */
.lore-book-page-number { margin: .5rem 0 0; text-align: center; color: #73522f; font: 700 .62rem/1 var(--font-ui, sans-serif); text-transform: uppercase; letter-spacing: .1em; }
.lore-book-pagination { margin-top: auto; display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: end; gap: .8rem; padding-top: 1rem; }
.lore-book-turn {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.4rem;
  border: 1px solid #6d4319;
  color: #4a2b12;
  background: linear-gradient(145deg, rgba(255, 222, 145, .8), rgba(142, 85, 26, .55));
  box-shadow: inset 0 0 0 2px rgba(255, 232, 169, .24), 0 2px 6px rgba(52, 26, 6, .25);
  transition: transform .15s ease, filter .15s ease;
}
.lore-book-turn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.lore-book-turn:disabled { opacity: .28; cursor: not-allowed; }
.lore-book-dots { display: flex; justify-content: center; gap: .3rem; min-height: .65rem; }
.lore-book-dot { width: .42rem; height: .42rem; border: 1px solid #6b421a; border-radius: 50%; background: transparent; }
.lore-book-dot.is-active { background: #d2942b; box-shadow: 0 0 5px rgba(203, 131, 24, .75); }
.lore-book-chapters { display: flex; justify-content: center; gap: .4rem; overflow-x: auto; padding: 1rem .1rem .05rem; }
.lore-book-chapter { display: grid; place-items: center; flex: 0 0 auto; width: 2.15rem; height: 2.15rem; border: 1px solid rgba(141, 94, 34, .64); color: #c8953e; background: #120e0a; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.lore-book-chapter.is-unlocked:hover { border-color: #edb344; transform: translateY(-1px); }
.lore-book-chapter.is-active { border-color: #f1bc48; background: linear-gradient(145deg, #4d2f11, #1c130b); box-shadow: 0 0 10px rgba(228, 155, 37, .38), inset 0 0 10px rgba(255, 195, 70, .18); }
.lore-book-chapter.is-locked { opacity: .5; color: #746a5d; cursor: not-allowed; }
@keyframes lore-page-turn-forward { 0% { transform: perspective(1400px) rotateY(0); filter: brightness(1); } 42% { transform: perspective(1400px) rotateY(-7deg) scaleX(.94); filter: brightness(.74); } 100% { transform: perspective(1400px) rotateY(0); filter: brightness(1); } }
@keyframes lore-page-turn-back { 0% { transform: perspective(1400px) rotateY(0); filter: brightness(1); } 42% { transform: perspective(1400px) rotateY(7deg) scaleX(.94); filter: brightness(.74); } 100% { transform: perspective(1400px) rotateY(0); filter: brightness(1); } }
.lore-book-spread.is-turning-forward { animation: lore-page-turn-forward .48s cubic-bezier(.2,.72,.25,1); }
.lore-book-spread.is-turning-back { animation: lore-page-turn-back .48s cubic-bezier(.2,.72,.25,1); }
/* Em zoom alto o navegador reduz a largura CSS da janela mesmo em monitor
   horizontal. 640px fazia o livro cair no layout vertical e desmontava a
   carcaça ilustrada; até 480px é o corte seguro para celular estreito. */
@media (max-width: 479px) {
  .lore-book-shell { padding: .75rem; }
  .lore-book-spread { grid-template-columns: 1fr; min-height: 0; }
  .lore-book-art { min-height: 13rem; border-right: 0; border-bottom: 1px solid rgba(57,33,15,.35); background-size: contain, cover; }
  .lore-book-page { min-height: 21rem; }
  .lore-book-page--text { padding: 1.35rem 1.25rem; }
  .lore-book-chapters { justify-content: flex-start; }
}

/* Segunda passada do Livro: a arte de conceito aprovada vira a própria
   carcaça da UI. Os controles HTML ficam por cima dela para continuarem
   clicáveis, localizáveis e capazes de exibir as páginas futuras. */
/* Tela horizontal sempre usa a abertura completa, mesmo que o zoom reduza
   a largura CSS abaixo de 480px. Retrato estreito continua no layout móvel. */
@media (min-width: 480px), (orientation: landscape) {
  .lore-book-shell {
    width: min(100rem, 100%);
    aspect-ratio: 1.6;
    min-height: 0;
    padding: 0;
    border: 0;
    background: url('../assets/lore/lore-book-frame-cover-nav-v2.jpg') center / contain no-repeat;
    box-shadow: none;
  }
  .lore-book-shell.is-story-spread { background-image: url('../assets/lore/lore-book-frame-story-nav-v2.jpg'); }
  /* Artes de capítulo entregues já são a abertura inteira. A UI só desenha
     o texto por cima da folha direita vazia, sem criar uma segunda moldura. */
  .lore-book-shell > .modal-close-x { top: 4.1%; right: 6.8%; z-index: 3; background: rgba(18, 12, 6, .78); }
  .lore-book-spread {
    position: absolute;
    top: 8.8%;
    left: 9.6%;
    width: 81.1%;
    height: 69%;
    min-height: 0;
    display: block;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  .lore-book-art { display: none; }
  .lore-book-shell.has-chapter-book-art .lore-book-art { display: none !important; }
  .lore-book-page--text {
    position: absolute;
    top: 0;
    /* [AJUSTADO — pedido do jogador: "um pouco mais pra esquerda e deixa
       como limite uma linha imaginária das setas da esquerda e direita"]
       right:0/left:51.2% deixava o texto esticar até a borda da página,
       passando por baixo das setas de navegação (que ficam absolutas,
       por cima, perto da borda). Agora o texto desloca um pouco mais pra
       esquerda (left menor) e para antes de chegar na seta direita
       (right maior), e ganha mais respiro embaixo (padding-bottom maior)
       pra nunca ficar atrás das setas mesmo rolando o texto. */
    right: 9%;
    /* O painel continua até o rodapé para os botões ficarem sobre as setas;
       a reserva é feita no padding do conteúdo, não no painel inteiro. */
    bottom: 0;
    left: 49%;
    min-height: 0;
    padding: 8% 4% 3% 5.5%;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  /* [REVERTIDO — o ajuste anterior (texto ocupando quase a largura toda)
     jogava o texto por cima da própria ilustração, porque a arte da capa
     (lore-book-frame-cover-clean.png) TAMBÉM é um layout de 2 colunas
     (arte à esquerda, página em branco à direita) — não uma página única
     como foi assumido. A regra original (metade direita fixa) já estava
     correta pra esse caso; o problema real era vazamento por falta de
     rolagem, corrigido abaixo em .lore-book-page--text/.lore-book-art. */
  .lore-book-spread.is-story-spread .lore-book-art {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 49.2%;
    /* [AJUSTADO — pedido do jogador: "a página da esquerda, coloca um
       pouco mais pra direita" (texto clipado na borda) + "as duas
       colocam um pouco mais pra cima"] padding-left maior (era 7.8%) e
       padding-top menor (era 11.4%).
       [AJUSTE 2 — pedido do jogador: "traga os textos da pagina esquerda
       pouca coisa pra direita pra descolar do canto da folha"] 11% -> 14%
       à esquerda e 6.2% -> 7.4% à direita: o bloco de texto descola da
       dobra sem encostar na borda externa. */
    padding: 8% 7.4% 3% 14%;
    background: transparent;
  }
  .lore-book-left-kicker, .lore-book-left-title, .lore-book-left-text { margin: 0; }
  /* Páginas que continuam a narrativa não têm título no cabeçalho. Sem
     esta regra, o h2 vazio ainda mantinha margem e borda, empurrando a
     continuação para baixo como se houvesse um título invisível. */
  .lore-book-left-kicker:empty, .lore-book-left-title:empty { display: none; }
  .lore-book-left-kicker { color: #76501d; font: 700 clamp(.46rem, .62vw, .64rem)/1.2 'Source Sans 3', sans-serif; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
  .lore-book-left-title { margin: .42rem 0 1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(92, 55, 20, .22); color: #40270f; font: 700 clamp(1.1rem, 1.7vw, 1.7rem)/1.15 'Cormorant Garamond', Georgia, serif; text-align: center; }
  .lore-book-left-text {
  /* [AJUSTADO — pedido do jogador: "deixa a fonte um pouco mais escura e
     melhor para a leitura"] #40270f -> #2b1808 (mesma tinta da página
     direita), contraste bem maior sobre o papel claro. */
  color: #2b1808;
  /* Mesma escala tipográfica da página direita: cada abertura parece uma
     única narrativa, não duas interfaces diferentes. */
  font: 600 clamp(1.05rem, 1.35vw, 1.3rem)/1.56 'Cormorant Garamond', Georgia, serif;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
  .lore-book-left-text p { margin: 0 0 .8rem; }
  .lore-book-left-text .lore-book-paragraph-italic,
  .lore-book-text .lore-book-paragraph-italic {
    font-style: italic;
    color: #4a3018;
  }
  /* A gravura ocupa a folha inteira, como a arte de abertura do prólogo.
     Assim ela não parece um cartão/parchment solto dentro do livro. */
  .lore-book-art.has-lore-illustration { padding: 0; filter: none; }
  .lore-book-art.has-lore-illustration .lore-book-left-text { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .lore-book-left-illustration { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; filter: saturate(.96) contrast(1.08); }
  .lore-book-kicker { width: 100%; margin: 0 auto .45rem; color: #76501d; font-size: clamp(.46rem, .62vw, .64rem); text-align: center; }
  .lore-book-kicker:empty, .lore-book-title:empty { display: none; }
  .lore-book-title { width: 100%; margin: 0 auto 1rem; padding-bottom: .55rem; font-size: clamp(1.1rem, 1.7vw, 1.7rem); text-align: center; }
  .lore-book-text { width: 100%; max-width: 27rem; margin-left: 0; margin-right: auto; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.56; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .lore-book-text p { margin-bottom: .8rem; }
  .lore-book-section-break { margin: 1.05rem 0 .75rem; padding-top: .7rem; }
  .lore-book-section-kicker { font-size: clamp(.42rem, .55vw, .56rem); }
  .lore-book-section-title { font-size: clamp(.86rem, 1.25vw, 1.1rem); }
  .lore-book-next-pickup { width: 100%; max-width: 27rem; margin: .45rem auto 0; color: #72532e; font: 700 clamp(.47rem, .64vw, .66rem)/1.25 'Source Sans 3', sans-serif; letter-spacing: .06em; text-align: center; text-transform: uppercase; flex: 0 0 auto; }
  .lore-book-pagination { position: absolute; right: 5%; bottom: 2.2%; left: 5%; z-index: 8; width: auto; max-width: none; margin: 0; grid-template-columns: 3.25rem 1fr 3.25rem; padding-top: 0; pointer-events: auto; }
  .lore-book-turn { position: relative; z-index: 9; width: 3rem; height: 3rem; border-color: transparent; background: transparent; box-shadow: none; color: transparent; isolation: isolate; cursor: pointer; }
  .lore-book-turn::after { position: absolute; z-index: -1; inset: -.3rem; border-radius: 50%; background: radial-gradient(circle, rgba(248, 184, 57, .48), rgba(226, 143, 24, .12) 42%, transparent 72%); content: ''; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
  .lore-book-turn:hover:not(:disabled)::after, .lore-book-turn:focus-visible:not(:disabled)::after { opacity: 1; transform: scale(1.18); }
  .lore-book-turn:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-1px); }
  .lore-book-turn:disabled { cursor: not-allowed; pointer-events: none; }
  #btn-lore-book-prev { justify-self: start; }
  #btn-lore-book-next { justify-self: end; }
  /* Nas páginas de história, os controles acompanham os ícones pequenos
     gravados no rodapé de cada página: voltar à esquerda, avançar à direita. */
  .lore-book-spread.is-story-spread .lore-book-pagination {
    right: 5%;
    bottom: 2.2%;
    left: -92%;
  }
  /* As duas primeiras artes recebidas tinham as setas gravadas mais abaixo
     dentro do PNG. A exceção é limitada a elas; todas as demais mantêm a
     navegação na posição-base do livro. */
  .lore-book-shell.has-lower-book-navigation .lore-book-pagination { bottom: -9%; }
  .lore-book-chapters {
    position: absolute;
    /* [AJUSTADO — pedido do jogador: "são 14 que tem que ser liberados",
       sumindo da fileira] a largura era fixa (57.8% do livro) com
       overflow:hidden -- os 15 ícones (livro + 14 cadeados) não cabiam
       nesse espaço e o CSS cortava/escondia o resto em silêncio, sem
       nenhum indício visual de que faltava algo. Alarga bastante o
       espaço disponível e troca "hidden" por rolagem horizontal como
       rede de segurança, caso ainda não caiba tudo numa tela estreita. */
    right: 6%;
    bottom: 3.5%;
    left: 6%;
    height: 6.6%;
    justify-content: center;
    gap: clamp(.15rem, .35vw, .45rem);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 67, 25, .45) transparent;
  }
  .lore-book-chapters::-webkit-scrollbar { height: .3rem; }
  .lore-book-chapters::-webkit-scrollbar-track { background: transparent; }
  .lore-book-chapters::-webkit-scrollbar-thumb { background: rgba(109, 67, 25, .45); border-radius: 999px; }
  .lore-book-chapter { width: clamp(1.6rem, 2.6vw, 2.9rem); height: clamp(1.6rem, 2.6vw, 2.9rem); padding: 0; border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; }
  /* [AJUSTADO — pedido do jogador: tirar o fundo dourado atrás do ícone
     ativo (chapter-open.png tem fundo transparente, mas .is-active (fora
     do media query) tem mais especificidade que a regra acima e continua
     aplicando fundo/borda/glow). Repete aqui, dentro do media query, pra
     ganhar por ordem de declaração com a mesma especificidade. */
  .lore-book-chapter.is-active,
  .lore-book-chapter.is-unlocked:hover,
  .lore-book-chapter.is-unlocked:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .lore-book-chapter-icon { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; }
  .lore-book-chapter.is-unlocked:hover .lore-book-chapter-icon, .lore-book-chapter.is-unlocked:focus-visible .lore-book-chapter-icon { transform: translateY(-2px); }
}

/* A mesma abertura em desktops com zoom alto.  Não é um novo visual: são as
   coordenadas da moldura já usada acima, aplicadas por classe para que uma
   largura CSS artificialmente pequena não transforme o livro em três blocos
   empilhados. */
.lore-book-shell.lore-book--desktop {
  width: min(100rem, 100%);
  aspect-ratio: 1.6;
  min-height: 0;
  padding: 0;
  border: 0;
  background: url('../assets/lore/lore-book-frame-cover-nav-v2.jpg') center / contain no-repeat;
  box-shadow: none;
}
.lore-book-shell.lore-book--desktop.is-story-spread { background-image: url('../assets/lore/lore-book-frame-story-nav-v2.jpg'); }
.lore-book-shell.lore-book--desktop > .modal-close-x { top: 4.1%; right: 6.8%; z-index: 3; background: rgba(18, 12, 6, .78); }
.lore-book-shell.lore-book--desktop .lore-book-spread {
  position: absolute;
  top: 8.8%;
  left: 9.6%;
  width: 81.1%;
  height: 69%;
  min-height: 0;
  display: block;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.lore-book-shell.lore-book--desktop .lore-book-art { display: none; }
.lore-book-shell.lore-book--desktop.has-chapter-book-art .lore-book-art { display: none !important; }
.lore-book-shell.lore-book--desktop .lore-book-page--text {
  position: absolute;
  top: 0;
  right: 9%;
  bottom: 0;
  left: 49%;
  min-height: 0;
  padding: 8% 4% 3% 5.5%;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.lore-book-shell.lore-book--desktop .lore-book-spread.is-story-spread .lore-book-art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 49.2%;
  padding: 8% 7.4% 3% 14%;
  background: transparent;
}
.lore-book-shell.lore-book--desktop .lore-book-left-kicker:empty,
.lore-book-shell.lore-book--desktop .lore-book-left-title:empty,
.lore-book-shell.lore-book--desktop .lore-book-kicker:empty,
.lore-book-shell.lore-book--desktop .lore-book-title:empty { display: none; }
.lore-book-shell.lore-book--desktop .lore-book-left-kicker { color: #76501d; font: 700 clamp(.46rem, .62vw, .64rem)/1.2 'Source Sans 3', sans-serif; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.lore-book-shell.lore-book--desktop .lore-book-left-title { margin: .42rem 0 1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(92, 55, 20, .22); color: #40270f; font: 700 clamp(1.1rem, 1.7vw, 1.7rem)/1.15 'Cormorant Garamond', Georgia, serif; text-align: center; }
.lore-book-shell.lore-book--desktop .lore-book-left-text { color: #2b1808; font: 600 clamp(1.05rem, 1.35vw, 1.3rem)/1.56 'Cormorant Garamond', Georgia, serif; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lore-book-shell.lore-book--desktop .lore-book-left-text p,
.lore-book-shell.lore-book--desktop .lore-book-text p { margin-bottom: .8rem; }
.lore-book-shell.lore-book--desktop .lore-book-art.has-lore-illustration { padding: 0; filter: none; }
.lore-book-shell.lore-book--desktop .lore-book-art.has-lore-illustration .lore-book-left-text { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lore-book-shell.lore-book--desktop .lore-book-left-illustration { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; filter: saturate(.96) contrast(1.08); }
.lore-book-shell.lore-book--desktop .lore-book-kicker { width: 100%; margin: 0 auto .45rem; color: #76501d; font-size: clamp(.46rem, .62vw, .64rem); text-align: center; }
.lore-book-shell.lore-book--desktop .lore-book-title { width: 100%; margin: 0 auto 1rem; padding-bottom: .55rem; font-size: clamp(1.1rem, 1.7vw, 1.7rem); text-align: center; }
.lore-book-shell.lore-book--desktop .lore-book-text { width: 100%; max-width: 27rem; margin-left: 0; margin-right: auto; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.56; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lore-book-shell.lore-book--desktop .lore-book-pagination { position: absolute; right: 5%; bottom: 2.2%; left: 5%; z-index: 8; width: auto; max-width: none; margin: 0; grid-template-columns: 3.25rem 1fr 3.25rem; padding-top: 0; pointer-events: auto; }
.lore-book-shell.lore-book--desktop .lore-book-turn { position: relative; z-index: 9; width: 3rem; height: 3rem; border-color: transparent; background: transparent; box-shadow: none; color: transparent; isolation: isolate; cursor: pointer; }
.lore-book-shell.lore-book--desktop #btn-lore-book-prev { justify-self: start; }
.lore-book-shell.lore-book--desktop #btn-lore-book-next { justify-self: end; }
.lore-book-shell.lore-book--desktop .lore-book-spread.is-story-spread .lore-book-pagination { right: 5%; bottom: 2.2%; left: -92%; }
.lore-book-shell.lore-book--desktop.has-lower-book-navigation .lore-book-pagination { bottom: -9%; }
.lore-book-shell.lore-book--desktop .lore-book-chapters { position: absolute; right: 6%; bottom: 3.5%; left: 6%; height: 6.6%; justify-content: center; gap: clamp(.15rem, .35vw, .45rem); overflow-x: auto; overflow-y: hidden; padding: 0; }
.lore-book-shell.lore-book--desktop .lore-book-chapter { width: clamp(1.6rem, 2.6vw, 2.9rem); height: clamp(1.6rem, 2.6vw, 2.9rem); padding: 0; border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; }
.lore-book-shell.lore-book--desktop .lore-book-chapter.is-active,
.lore-book-shell.lore-book--desktop .lore-book-chapter.is-unlocked:hover,
.lore-book-shell.lore-book--desktop .lore-book-chapter.is-unlocked:focus-visible { border: 0; background: transparent; box-shadow: none; }
.lore-book-shell.lore-book--desktop .lore-book-chapter-icon { display: block; width: 100%; height: 100%; object-fit: contain; }

/* O emblema estoura pra fora da borda de cima — o cartão não pode cortar.
   E o topo ganha respiro: sem isso o brasão desce em cima do rótulo e come
   o meio da palavra (LEADERSHIP virava "LEAD...SHIP"). */
.fixed.inset-0 > .panel[data-crest],
.fixed.inset-0 .taverna-modal-panel[data-crest] {
  overflow: visible;
  padding-top: 2.4rem;
}

/* Bandeiras: duas camadas de imagem no topo, uma de cada lado. A da direita
   é um arquivo espelhado — background-image não inverte, e as duas apontando
   pro mesmo lado ficariam repetidas em vez de simétricas. */
.fixed.inset-0 > .panel[data-pennant] {
  background-image:
    url('../assets/page_layout/png/bandeira.png'),
    url('../assets/page_layout/png/bandeira_dir.png'),
    linear-gradient(165deg, rgba(38, 30, 22, 0.99) 0%, rgba(18, 15, 11, 0.995) 55%, rgba(26, 21, 16, 0.99) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* A da direita recuada 4.2rem pra não bater no botão × do canto. */
  background-position: left 1.6rem top -0.4rem, right 4.2rem top -0.4rem, center;
  background-size: 3.4rem auto, 3.4rem auto, auto;
}

/* Em tela estreita a bandeira sai: sobra pouca largura e ela passaria por
   baixo do conteúdo em vez de emoldurar. */
@media (max-width: 900px) {
  .fixed.inset-0 > .panel[data-pennant] {
    background-image: linear-gradient(165deg, rgba(38, 30, 22, 0.99) 0%, rgba(18, 15, 11, 0.995) 55%, rgba(26, 21, 16, 0.99) 100%);
  }
  .modal-crest { width: 3.2rem; height: 3.2rem; top: -1.2rem; }
}


/* --- Grade do Mercado: preço no rodapé do slot ----------------------
   [pedido do jogador: "faltou colocar os preços com um ícone de ouro embaixo
   de cada item"] O slot vira duas faixas: o ícone do item em cima (ocupando
   o que sobra) e a faixa de preço embaixo. A classe `has-price` isola a
   mudança — .mercado-slot também é usado na Mochila e na Forja, que não têm
   preço e continuam com o ícone centralizado como sempre. */
.mercado-slot.has-price {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: stretch;
}

.mercado-slot.has-price .mercado-slot-icon {
  width: 100%;
  height: 100%;
  padding: 16% 16% 6%;
  place-self: center;
}

.mercado-slot-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.16rem 0.2rem;
  border-top: 1px solid rgba(140, 108, 70, 0.4);
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.5), rgba(10, 9, 7, 0.8));
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: #f5b942;
  pointer-events: none;
}

/* Com o desconto do talento Contatos no Mercado o preço fica verde — mesma
   cor que o painel de detalhe já usa pra marcar desconto. */
.mercado-slot-price.is-discounted { color: #9dc183; }

.mercado-slot-coin {
  width: 0.62rem;
  height: 0.62rem;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.mercado-slot-price-more {
  color: rgba(196, 165, 116, 0.85);
  font-weight: 400;
}

/* Slot vazio ganha uma rosa-dos-ventos apagada (SVG inline, sem asset novo)
   — sem isso, a grade com poucos itens vira um bloco de buracos pretos.
   Regra ADITIVA: a .mercado-slot.is-empty original (opacity/cursor) continua
   lá em cima e vale junto; aqui só entra o desenho de fundo. */
.mercado-slot.is-empty {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'><g%20fill='%23a67c52'%20opacity='.22'><path%20d='M50.0%204.0%20L55.0%2038.0%20L82.5%2017.5%20L62.0%2045.0%20L96.0%2050.0%20L62.0%2055.0%20L82.5%2082.5%20L55.0%2062.0%20L50.0%2096.0%20L45.0%2062.0%20L17.5%2082.5%20L38.0%2055.0%20L4.0%2050.0%20L38.0%2045.0%20L17.5%2017.5%20L45.0%2038.0%20Z'/><path%20fill-rule='evenodd'%20d='M50%2030%20A20%2020%200%201%200%2050%2070%20A20%2020%200%201%200%2050%2030%20Z%20M50%2033%20A17%2017%200%201%201%2050%2067%20A17%2017%200%201%201%2050%2033%20Z'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/* --- Subgrupos dentro dos modais ------------------------------------
   [pedido do jogador: "deixar esses subgrupos nesse estilo também"] As
   caixas internas (nível/Melhorar, produção, avisos) são escritas com as
   mesmas utilitárias no jogo inteiro: `border-bark-600/25 bg-fort-950/40`.
   Dá pra pegar todas de uma vez por essas classes — inclusive as que o JS
   monta em tempo de execução, caso do bloco de nível do Mercado. */
.fixed.inset-0 .bg-fort-950\/40 {
  position: relative;
  border-color: rgba(224, 154, 43, 0.3) !important;
  background: linear-gradient(180deg, rgba(32, 25, 18, 0.9), rgba(13, 11, 8, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Marquinhas de canto. `position:absolute` é obrigatório: várias dessas
   caixas são flex, e um ::after em fluxo entraria como item do flex e
   empurraria o conteúdo pro lado. */
.fixed.inset-0 .bg-fort-950\/40::after {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  --tick: rgba(224, 154, 43, 0.5);
  background-image:
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}

/* --- Castelo: centro de comando -------------------------------------
   A modal reúne caçadas, vitrine e construções. Esta camada dá a cada aba
   uma hierarquia própria, sem alterar as regras que já alimentam os cards. */
.castelo-modal-panel {
  max-height: calc(100vh - 2rem);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(224, 154, 43, 0.12), transparent 28rem),
    linear-gradient(165deg, rgba(44, 35, 25, 0.99), rgba(17, 14, 10, 0.995));
}

.castelo-main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(166, 124, 82, 0.28);
  background: rgba(7, 6, 4, 0.5);
}
.castelo-main-tabs .report-tab-btn { min-height: 3.25rem; padding: 0.5rem; font-size: 0.66rem; line-height: 1.25; }

.castelo-command-summary {
  display: grid;
  grid-template-columns: minmax(10rem, 1.35fr) repeat(3, minmax(5.6rem, 0.8fr)) auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(224, 154, 43, 0.26);
  background: linear-gradient(100deg, rgba(103, 67, 22, 0.32), rgba(12, 10, 7, 0.72));
}
.castelo-command-lead { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.castelo-command-lead-icon { font-size: 1.45rem; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); }
.castelo-command-lead small, .castelo-command-stat small { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(196, 165, 116, 0.72); }
.castelo-command-lead strong { display: block; overflow: hidden; font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; white-space: nowrap; text-overflow: ellipsis; color: #f5d07a; }
.castelo-command-stat { padding-left: 0.55rem; border-left: 1px solid rgba(166, 124, 82, 0.25); }
.castelo-command-stat strong { display: block; margin-top: 0.1rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.78rem; color: #e8e0d4; }
.castelo-command-status { justify-self: end; padding: 0.3rem 0.45rem; border: 1px solid rgba(125, 154, 93, 0.28); background: rgba(81, 108, 62, 0.11); font-family: 'Source Sans 3', sans-serif; font-size: 0.6rem; color: #a8c98a; white-space: nowrap; }
.castelo-command-status.is-active { border-color: rgba(245, 185, 66, 0.4); background: rgba(224, 154, 43, 0.12); color: #f5c86b; }

.castelo-tab-intro { margin: 0; padding: 0.6rem 0.75rem; border-left: 2px solid #d99425; background: linear-gradient(90deg, rgba(224, 154, 43, 0.12), transparent); font-family: 'Source Sans 3', sans-serif; font-size: 0.72rem; font-style: italic; line-height: 1.45; color: rgba(215, 190, 151, 0.84); }
.castelo-zone-contracts #zone-contracts-zone-picker { min-height: 2.7rem; border-color: rgba(224, 154, 43, 0.35); background: rgba(10, 8, 6, 0.72); }
.castelo-contract-card { padding: 0.85rem; border: 1px solid rgba(224, 154, 43, 0.38); background: linear-gradient(120deg, rgba(97, 60, 19, 0.2), rgba(10, 8, 6, 0.8)); box-shadow: inset 3px 0 #d99425, 0 5px 18px rgba(0, 0, 0, 0.24); }
.castelo-contract-card-top { display: flex; justify-content: space-between; gap: 1rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b79356; }
.castelo-contract-card-top strong { color: #f5c86b; }
.castelo-contract-reward { display: flex; flex-wrap: wrap; gap: 0.45rem 0.85rem; margin: 0.7rem 0 0; padding-top: 0.55rem; border-top: 1px solid rgba(166, 124, 82, 0.22); font-family: 'Source Sans 3', sans-serif; font-size: 0.67rem; color: #bda985; }
.castelo-contract-reward strong { color: #e8e0d4; }

.castelo-market-panel #dungeon-chave-shop { border-color: rgba(224, 154, 43, 0.25); }
.castelo-market-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(166, 124, 82, 0.28); background: linear-gradient(105deg, rgba(45, 31, 17, 0.62), rgba(10, 8, 6, 0.72)); transition: border-color 0.15s, transform 0.15s; }
.castelo-market-item:hover { border-color: rgba(245, 185, 66, 0.58); transform: translateX(2px); }
.castelo-market-item.is-locked { opacity: 0.74; }
.castelo-market-item-tag { margin: 0 0 0.14rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ae8750; }

.castelo-update-group { padding: 0.8rem; border: 1px solid rgba(166, 124, 82, 0.22); background: rgba(8, 7, 5, 0.38); }
.castelo-update-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(166, 124, 82, 0.2); }
.castelo-update-heading span { font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #e7bd64; }
.castelo-update-heading small { font-family: 'Source Sans 3', sans-serif; font-size: 0.61rem; color: #9c825e; }
.castelo-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.castelo-update-card { min-width: 0; padding: 0.75rem; border: 1px solid rgba(166, 124, 82, 0.3); background: linear-gradient(145deg, rgba(45, 34, 23, 0.86), rgba(12, 10, 7, 0.9)); }
.castelo-update-card--fortaleza { border-color: rgba(245, 185, 66, 0.42); }
.castelo-update-card--muralha { border-color: rgba(113, 155, 183, 0.4); }
.castelo-update-card-title { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 0.82rem; font-weight: 700; color: #eee2c6; }
.castelo-update-card-kicker { margin: 0.16rem 0 0.65rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.57rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a8875b; }
.castelo-update-card .bg-fort-950\/40 { margin-top: 0.55rem; }

@media (max-width: 760px) {
  .castelo-modal-panel { max-width: 36rem; }
  .castelo-command-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .castelo-command-lead { grid-column: 1 / -1; }
  .castelo-command-status { justify-self: start; }
}
@media (max-width: 540px) {
  .castelo-main-tabs { gap: 0.2rem; padding: 0.2rem; }
  .castelo-main-tabs .report-tab-btn { min-height: 3rem; padding: 0.35rem 0.2rem; font-size: 0.55rem; }
  .castelo-command-summary { gap: 0.4rem; padding: 0.55rem; }
  .castelo-command-stat { padding-left: 0.4rem; }
  .castelo-update-grid { grid-template-columns: 1fr; }
  .castelo-update-heading { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
}

/* --- Mercado: vitrine única com gestão no rodapé -------------------- */
.mercado-modal-panel {
  max-height: calc(100vh - 2rem);
  background-image:
    radial-gradient(circle at 82% 8%, rgba(224, 154, 43, 0.11), transparent 23rem),
    linear-gradient(165deg, rgba(43, 34, 24, 0.99), rgba(15, 12, 9, 0.995));
}
.mercado-main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(166, 124, 82, 0.28);
  background: rgba(8, 6, 4, 0.52);
}
.mercado-main-tabs .report-tab-btn { min-height: 2.8rem; padding: 0.45rem; font-size: 0.66rem; }
#mercado-modal .mercado-grid { max-height: min(24rem, 41vh); gap: 0.55rem; padding: 0.1rem; }
#mercado-modal .mercado-slot { background: linear-gradient(145deg, rgba(52, 39, 24, 0.96), rgba(13, 10, 7, 0.99)); }
#mercado-modal .mercado-slot.has-price .mercado-slot-icon { padding: 15% 15% 5%; }
.mercado-category-note { margin: 0.7rem 0 0; padding: 0.42rem 0.58rem; border-left: 2px solid rgba(224, 154, 43, 0.75); background: linear-gradient(90deg, rgba(224, 154, 43, 0.1), transparent); font-family: 'Source Sans 3', sans-serif; font-size: 0.66rem; color: #bba17a; }

.mercado-ammo-section { margin-top: 0.9rem; padding: 0.7rem; border: 1px solid rgba(166, 124, 82, 0.25); background: rgba(7, 6, 4, 0.38); }
.mercado-ammo-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(166, 124, 82, 0.18); }
.mercado-ammo-heading span { font-family: 'Cinzel', Georgia, serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #e3ba62; }
.mercado-ammo-heading small { font-family: 'Source Sans 3', sans-serif; font-size: 0.6rem; color: #9c825e; }

.mercado-management-footer { display: flex; align-items: stretch; gap: 0.55rem; margin-top: 0.75rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(166, 124, 82, 0.3); background: linear-gradient(105deg, rgba(32, 24, 15, 0.88), rgba(8, 7, 5, 0.94)); }
.mercado-stock-cycle { display: flex; flex: 0 0 10.5rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.28rem; padding: 0.25rem 0.5rem; border-right: 1px solid rgba(166, 124, 82, 0.24); font-family: 'Source Sans 3', sans-serif; font-size: 0.62rem; color: #a88960; }
.mercado-stock-cycle strong { color: #f3c35f; }
.mercado-management-footer #mercado-modal-build { min-width: 0; flex: 1; }
.mercado-footer-build { display: flex; min-height: 100%; align-items: center; gap: 0.6rem; padding: 0.15rem 0.25rem; }
.mercado-footer-level, .mercado-footer-production { display: flex; flex-direction: column; min-width: max-content; }
.mercado-footer-level { padding-right: 0.55rem; border-right: 1px solid rgba(166, 124, 82, 0.22); }
.mercado-footer-build small { font-family: 'Source Sans 3', sans-serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9e825b; }
.mercado-footer-build strong { margin-top: 0.08rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.67rem; color: #e8dfcc; }
.mercado-footer-level strong { font-family: 'Cinzel', Georgia, serif; color: #f2c86b; }
.mercado-footer-action { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 0.45rem; margin-left: auto; }
.mercado-footer-cost, .mercado-footer-build-state { overflow: hidden; font-family: 'Source Sans 3', sans-serif; font-size: 0.57rem; white-space: nowrap; text-overflow: ellipsis; color: #a8906e; }

@media (max-width: 640px) {
  .mercado-main-tabs { gap: 0.2rem; padding: 0.2rem; }
  .mercado-main-tabs .report-tab-btn { min-height: 2.65rem; padding: 0.32rem 0.18rem; font-size: 0.55rem; }
  #mercado-modal .mercado-grid { gap: 0.35rem; }
  .mercado-management-footer { flex-direction: column; }
  .mercado-stock-cycle { flex: auto; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(166, 124, 82, 0.24); }
  .mercado-footer-build { flex-wrap: wrap; gap: 0.45rem; }
  .mercado-footer-action { flex-basis: 100%; justify-content: space-between; margin-left: 0; }
  .mercado-ammo-heading { align-items: flex-start; flex-direction: column; gap: 0.12rem; }
}

/* Catálogo em lista: evita sprites ampliados demais e deixa preço/nível
   comparáveis sem abrir card por card. Escopado ao Mercado; Mochila e Forja
   mantêm suas próprias grades/listas. */
#mercado-modal { align-items: flex-start; overflow-y: auto; }
#mercado-modal .mercado-modal-panel { margin: 1.5rem auto; max-height: none; }
/* [ATUALIZADO — pedido do jogador: "em todas as abas do mercado, em vez de
   ser uma lista dessa forma, eu queria colocar um grid com 2 colunas"] Era
   `display:flex; flex-direction:column`, ou seja uma coluna só: com a aba
   Materiais nova a lista ficou comprida e obrigava a rolar muito. Agora são
   2 colunas em telas normais (e volta pra 1 no celular, mais abaixo, onde
   duas colunas espremeriam o nome do item). Vale pras 4 abas de uma vez,
   porque todas usam .mercado-grid. */
#mercado-modal .mercado-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; max-height: min(21rem, 39vh); gap: 0.38rem; overflow-y: auto; padding: 0.12rem 0.15rem 0.12rem 0; }
/* Mensagem de "nada disponível" ocupa a largura das 2 colunas, senão fica
   espremida numa metade com um buraco vazio do lado. */
#mercado-modal .mercado-grid > p { grid-column: 1 / -1; }
.mercado-item-row { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; width: 100%; min-height: 3.7rem; padding: 0.38rem 0.55rem; border: 1px solid rgba(140, 108, 70, 0.4); border-left: 3px solid rgba(140, 108, 70, 0.45); background: linear-gradient(100deg, rgba(46, 34, 21, 0.92), rgba(12, 10, 7, 0.96)); text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.mercado-item-row:hover { border-color: rgba(245, 185, 66, 0.55); background: linear-gradient(100deg, rgba(72, 49, 21, 0.82), rgba(17, 13, 8, 0.98)); }
.mercado-item-row.rarity-comum { border-left-color: rgba(154, 163, 176, 0.75); }
.mercado-item-row.rarity-magico { border-left-color: rgba(94, 163, 216, 0.9); }
.mercado-item-row.rarity-raro { border-left-color: rgba(230, 194, 41, 0.95); }
.mercado-item-row.rarity-lendario { border-left-color: rgba(224, 154, 43, 1); box-shadow: inset 0 0 12px rgba(224, 154, 43, 0.07); }
.mercado-item-row.is-selected { border-color: #f5b942; background: linear-gradient(100deg, rgba(102, 65, 18, 0.45), rgba(20, 15, 9, 0.98)); box-shadow: 0 0 10px rgba(224, 154, 43, 0.22); }
.mercado-item-row-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(166, 124, 82, 0.28); background: rgba(7, 6, 4, 0.6); }
.mercado-item-row-img { width: 2.35rem; height: 2.35rem; object-fit: contain; image-rendering: pixelated; }
.mercado-item-row-info { display: flex; min-width: 0; flex-direction: column; gap: 0.15rem; }
.mercado-item-row-name { overflow: hidden; font-family: 'Source Sans 3', sans-serif; font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: #ece3d2; }
.mercado-item-row-name em { font-size: 0.6rem; font-style: normal; color: #9dc183; }
.mercado-item-row-meta { overflow: hidden; font-family: 'Source Sans 3', sans-serif; font-size: 0.62rem; white-space: nowrap; text-overflow: ellipsis; color: #a99472; }
.mercado-item-row-value { display: flex; align-items: flex-end; flex-direction: column; gap: 0.3rem; min-width: 4.7rem; }
.mercado-item-row-value .mercado-slot-level { position: static; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #dcb75e; }
.mercado-item-row-value .mercado-slot-price { min-width: 4.5rem; padding: 0.22rem 0.3rem; border: 1px solid rgba(166, 124, 82, 0.28); background: rgba(7, 6, 4, 0.65); font-size: 0.64rem; }

@media (max-width: 540px) {
  #mercado-modal .mercado-modal-panel { margin: 1.2rem auto; }
  #mercado-modal .mercado-grid { grid-template-columns: minmax(0, 1fr); max-height: min(19rem, 37vh); }
  .mercado-item-row { grid-template-columns: 2.65rem minmax(0, 1fr) auto; min-height: 3.35rem; gap: 0.42rem; padding: 0.3rem 0.38rem; }
  .mercado-item-row-icon { width: 2.3rem; height: 2.3rem; }
  .mercado-item-row-img { width: 2rem; height: 2rem; }
  .mercado-item-row-name { font-size: 0.71rem; }
  .mercado-item-row-meta { font-size: 0.56rem; }
  .mercado-item-row-value { min-width: 3.65rem; }
  .mercado-item-row-value .mercado-slot-price { min-width: 3.55rem; font-size: 0.57rem; }
}

/* --- Compra por quantidade no Mercado --------------------------------
   [pedido do jogador: "poder comprar os consumiveis digitando a quantidade
   que ele quer comprar, NAO quero um botao fixo que simplesmente escolha
   por mim"]. Substitui o "Comprar" solto (e o +1/+10 das flechas) por
   campo digitável + total ao vivo + botão. Ver mercadoQtyControlHtml em
   src-js/ui.js. */
.mercado-qty {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.5rem;
  margin-top: 0.45rem;
}

/* Dentro do painel de detalhe (flex em linha) o bloco senta à direita, sem
   margem de topo — lá ele é irmão do ícone/descrição, não vem embaixo. */
.mercado-detail { flex-wrap: wrap; }
.mercado-detail .mercado-qty { margin-top: 0; margin-left: auto; }

.mercado-qty-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(166, 124, 82, 0.4);
  background: rgba(7, 6, 4, 0.7);
}

.mercado-qty-step,
.mercado-qty-max {
  padding: 0 0.5rem;
  min-width: 1.7rem;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.7rem;
  color: #d8c39e;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mercado-qty-max {
  border-left: 1px solid rgba(166, 124, 82, 0.35);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mercado-qty-step:hover:not([disabled]),
.mercado-qty-max:hover:not([disabled]) { background: rgba(166, 124, 82, 0.22); color: #f0dcb4; }
.mercado-qty-step[disabled],
.mercado-qty-max[disabled] { opacity: 0.35; cursor: default; }

.mercado-qty-input {
  width: 3.2rem;
  padding: 0 0.25rem;
  border: 0;
  border-left: 1px solid rgba(166, 124, 82, 0.35);
  border-right: 1px solid rgba(166, 124, 82, 0.35);
  background: transparent;
  color: #f4e6c8;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.mercado-qty-input:focus { outline: none; background: rgba(166, 124, 82, 0.14); }

.mercado-qty-total {
  font-size: 0.62rem;
  color: #a89372;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Total acima do que o jogador tem — o botão já fica travado, isto só
   explica por quê sem precisar abrir o cabeçalho de recursos. */
.mercado-qty-total.is-short { color: #d98a72; }

@media (max-width: 640px) {
  .mercado-qty { justify-content: flex-start; width: 100%; }
  .mercado-detail .mercado-qty { margin-left: 0; margin-top: 0.4rem; }
  .mercado-qty-input { width: 2.8rem; }
}

/* Arte que não carregou (ver o listener de 'error' em src-js/main.js): o
   <img> vira um selo "?" neutro. Só um leve apagamento pra ficar claro que é
   placeholder, sem chamar mais atenção que o item em si. */
.img-missing { opacity: 0.6; image-rendering: auto; }

/* [NOVO — FTUE, ver ftue.js] Tour guiado de primeiros passos pra conta
   nova: overlay escuro com um "buraco" (spotlight) recortado em cima do
   elemento real da UI que o passo pede pra clicar, mais um card com o
   texto do passo. Elementos criados/removidos via JS (não existem no
   index.html), sempre no topo de tudo (z-index acima de qualquer modal
   do jogo, que usam z-50/z-[60]). */
#ftue-dim {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(4, 3, 1, .88);
  pointer-events: none;
  transition: opacity .18s ease;
}
#ftue-dim.hidden { opacity: 0; }
#ftue-spot {
  position: fixed;
  z-index: 10041;
  border-radius: .6rem;
  box-shadow: 0 0 0 9999px rgba(4, 3, 1, .88), 0 0 0 3px rgba(226, 155, 37, .95), 0 0 34px 6px rgba(226, 155, 37, .5), inset 0 0 40px 6px rgba(255, 226, 150, .18);
  pointer-events: none;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
#ftue-spot.hidden { display: none; }
#ftue-card {
  position: fixed;
  z-index: 10042;
  width: min(21rem, calc(100vw - 24px));
  padding: 1rem 1.1rem;
  border: 1px solid rgba(173, 122, 49, .6);
  background: #17110a;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(226, 155, 37, .12);
  pointer-events: auto;
}
#ftue-card.ftue-card-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.ftue-card-eyebrow {
  margin: 0;
  color: #c8953e;
  font: 700 .62rem/1.2 var(--font-ui, 'Source Sans 3', sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ftue-card-title {
  margin: .4rem 0 .5rem;
  color: #f3d9a0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}
.ftue-card-text {
  margin: 0;
  color: #d8c6ad;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .82rem;
  line-height: 1.5;
}
.ftue-card-footer {
  margin-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.ftue-card-skip {
  border: 0;
  background: none;
  padding: 0;
  color: #96876c;
  font: 700 .68rem/1 var(--font-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.ftue-card-skip:hover { color: #c8953e; }
.ftue-card-next {
  border: 1px solid #6d4319;
  background: linear-gradient(145deg, rgba(255, 222, 145, .8), rgba(142, 85, 26, .55));
  color: #2a1608;
  padding: .45rem 1rem;
  font: 700 .72rem/1 var(--font-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.ftue-card-next:hover { filter: brightness(1.1); }
.ftue-card-next.hidden { display: none; }
@media (max-width: 640px) {
  #ftue-card { padding: .85rem .9rem; }
  .ftue-card-title { font-size: 1rem; }
}