/* ===== Página dedicada do Modo Upar (dashboard) — layout ANINHADO =====
   Hub central (#panelChar) + até 2 "asas" retráteis de cada lado (esquerda:
   Inventário/Status · direita: Cidade/NPCs/Caçada). Painéis fechados moram em
   #panelPool (fora da tela); abrir move o nó de verdade pra dentro de um
   .up-wing-slot (ver PAINÉIS / GERENCIADOR DE ENCAIXES em up.js). */
.up-body {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2333 0%, var(--bg) 60%);
  /* cursor estilizado (seta dourada pixel-art, PixelLab) — só enquanto dentro do
     jogo; elementos com cursor próprio de grab/text/etc continuam com o deles
     (a regra abaixo só troca o padrão "auto/default" herdado).
     DOIS estados (pedido do usuário): esta é a seta NORMAL; quem é clicável usa
     `cursor_ouro_aceso.png` (mesma silhueta + contorno brilhante), aplicado em
     TODA declaração `cursor:pointer` do up.css/game.css — 68 no total. O `pointer`
     no fim de cada uma é o fallback se o PNG não carregar.
     O "0 0"/"2 2" é o HOTSPOT: a ponta da seta medida no canal alfa (não chutada),
     senão o clique sai deslocado do bico — a versão acesa tem 3px de folga do
     brilho em volta, por isso o hotspot dela é deslocado.
     Tamanho reduzido pra 21×24 (a 1ª versão, 30×35 nativa, ficou grande demais).
     Cursor anterior (SVG dourado 24×24) está no git, caso queira voltar. */
  cursor: url('../img/ui/cursor_ouro.png') 0 0, auto;
}
.up-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid var(--border);
  background: rgba(10, 13, 18, .88); position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(4px);
  flex-wrap: wrap; row-gap: 8px;
}
.up-logo { font-weight: 800; font-size: 1.15rem; color: var(--text); }
.up-logo span { color: var(--gold); }
.up-logo em { font-style: normal; color: var(--muted); font-weight: 600; font-size: .85rem; margin-left: 6px; }
.up-logo .up-ver-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--muted); font-size: .65rem; font-weight: 700;
  vertical-align: middle; letter-spacing: .3px;
}
.up-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* fundo desfocado — preenche a tela quando só o hub está aberto */
.up-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/cidade/plaza.png') center 30% / cover no-repeat, var(--bg);
  filter: blur(18px) brightness(.42) saturate(1.15);
  transform: scale(1.12); /* esconde a borda borrada nas quinas */
}
.up-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1000px 560px at 50% 15%, rgba(20,26,38,.18), rgba(8,10,15,.74) 78%);
}

.up-layout { position: relative; z-index: 1; }
/* faixa central: asa esquerda | hub | asa direita */
.up-hub-wrap {
  display: flex; align-items: flex-start;
  justify-content: center;
  justify-content: safe center;   /* com tudo aberto e mais largo que a tela, "center"
    sozinho corta os dois lados igualmente (inclusive escondendo o começo sem rolar pra
    trás) — "safe" cai pro alinhamento à esquerda nesse caso, então dá sempre pra rolar
    e ver tudo. Navegador sem suporte a "safe" ignora a linha e fica só no "center". */
  gap: 14px; max-width: 1760px; margin: 0 auto; padding: 20px 16px;
  overflow-x: auto;   /* rede de segurança: com MUITA coisa aberta ao mesmo tempo, rola
                          de lado em vez de cortar algo escondido sem aviso */
}
/* cada asa quebra linha sozinha — não são mais 2 encaixes fixos: qualquer nº de painéis
   pode ficar aberto ao mesmo tempo; o que não cabe numa linha desce pra próxima, e a
   própria asa rola por dentro se tiver mais linhas do que a tela tem altura */
.up-wing {
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
  gap: 14px; flex-shrink: 0; max-width: 680px;
}
.up-wing-left { flex-direction: row-reverse; }
.up-wing-right { flex-direction: row; }   /* só a Caçada mora aqui agora — Cidade e as
  lojas de NPC viraram modal dedicado (#cityOverlay, ver mais abaixo) */

.up-wing-slot {
  width: 0; opacity: 0; overflow: hidden; flex-shrink: 0;
  transition: width .32s cubic-bezier(.22,.9,.32,1), opacity .2s ease;
}
.up-wing-slot.slot-open { width: 300px; opacity: 1; }
.up-wing-slot.slot-open.wing-wide-hunt { width: 640px; }

/* modal da Cidade: a praça E a loja do NPC clicado (nunca as duas juntas) abrem
   centralizadas em #cityOverlay (padrão .up-pick-overlay — fundo escuro+desfocado,
   cobre a tela toda) em vez de encaixar na asa. .city-slot aqui não tem animação de
   largura (não faz sentido num modal) — só aparece/some junto com o nó no DOM. */
.up-city-overlay .up-wing-slot.city-slot {
  position: relative; width: 420px; max-width: calc(100vw - 36px);
  opacity: 1; overflow: visible; transition: none;
}
.up-city-overlay .up-wing-slot.city-slot > .up-panel {
  opacity: 1; transform: none; transition: none;
  max-height: calc(100vh - 60px); overflow-y: auto;
}
.up-city-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel); border: 2px solid rgba(240,180,0,.5);
  color: var(--text); font-size: .85rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.up-city-close:hover { border-color: #ff7b7b; color: #ff7b7b; }

.up-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
/* só painéis DENTRO de um encaixe de asa animam (o hub #panelChar fica sempre visível) */
.up-wing-slot > .up-panel {
  opacity: 0; transform: translateY(4px);
  transition: opacity .24s ease .05s, transform .24s ease .05s;
}
.up-wing-left .up-wing-slot > .up-panel { transform: translateX(-18px) translateY(4px); }
.up-wing-right .up-wing-slot > .up-panel { transform: translateX(18px) translateY(4px); }
.up-wing-slot.slot-open > .up-panel { opacity: 1; transform: translateX(0) translateY(0); }

/* hub — o painel do Personagem, sempre visível e centralizado */
.up-hub {
  flex: 0 0 340px; min-width: 0;
  border-color: rgba(240,180,0,.4);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(240,180,0,.1);
}

/* estoque dos painéis fechados — [hidden] já cuida do display:none */
.up-panel-pool { position: absolute; }

/* ===== altura própria por caixa (desktop): nenhuma caixa empurra a PÁGINA pra baixo.
   #panelChar e cada .up-wing (a COLUNA de painéis, não o painel individual) rolam por
   dentro; DENTRO da asa, cada .up-panel também tem seu próprio teto — em vh, não em %
   (% de um encaixe com altura automática não resolve — o Chrome deixava a caixa crescer
   sem limite, cortada pelo overflow:hidden do wrap, sem jeito de rolar pra ver o resto:
   era o bug do Status "sem scroll e cortado no canto"). ===== */
@media (min-width: 1321px) {
  .up-body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  .up-header { flex: 0 0 auto; position: static; }
  .up-layout { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .up-hub-wrap { height: 100%; overflow-y: hidden; }
  .up-hub { max-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .up-wing { max-height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
  .up-wing-slot > .up-panel { max-height: 82vh; overflow-y: auto; overflow-x: hidden; }
  /* Caçada NUNCA rola por dentro — a arena (448px fixos) + o log (92px fixos, já rola
     sozinho) já são de tamanho conhecido; cortar em 82vh só atrapalhava a visão do
     combate. Fica no tamanho natural (o que sobrar, a própria asa rola por fora). */
  .up-wing-slot > .up-panel.up-panel-hunt { max-height: none; overflow-y: visible; }
}
/* rolagem própria de cada caixa — fininha, discreta, no tom do jogo */
.up-panel::-webkit-scrollbar, .up-wing::-webkit-scrollbar, .up-hub-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.up-panel::-webkit-scrollbar-track, .up-wing::-webkit-scrollbar-track, .up-hub-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,.2); border-radius: 8px; }
.up-panel::-webkit-scrollbar-thumb, .up-wing::-webkit-scrollbar-thumb, .up-hub-wrap::-webkit-scrollbar-thumb { background: rgba(240,180,0,.35); border-radius: 8px; }
.up-panel::-webkit-scrollbar-thumb:hover, .up-wing::-webkit-scrollbar-thumb:hover, .up-hub-wrap::-webkit-scrollbar-thumb:hover { background: rgba(240,180,0,.55); }

@media (max-width: 1320px) {
  .up-hub-wrap { flex-direction: column; align-items: center; }
  .up-wing { justify-content: center; max-width: 100%; }
  .up-wing-left, .up-wing-right { flex-direction: row; }
}
@media (max-width: 760px) {
  .up-wing-slot.slot-open,
  .up-wing-slot.slot-open.wing-wide-hunt { width: 100%; max-width: 460px; }
  .up-hub { flex-basis: 100%; max-width: 460px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .up-wing-slot, .up-panel { transition: none !important; }
}

.up-panel h3 { margin-bottom: 10px; color: var(--gold); }
.up-sub { display: block; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }

/* painel personagem */
.char-portrait.big {
  width: 100%; height: 170px; background: #ffffff;
  border: 1px solid var(--border); border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px;
}
.char-portrait.big img { width: 100%; height: 100%; object-fit: contain; }
.char-name.center { text-align: center; }
.char-stats.col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.char-actions.col { flex-direction: column; align-items: stretch; }
.char-actions.col .btn { width: 100%; }
/* carteira do jogador (moedas) no painel do personagem */
.char-wallet { display: flex; gap: 6px; margin: 6px 0 2px; }
.cw-coin {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 3px; font-size: .74rem; font-weight: 800; color: var(--text);
  cursor: default;
}
.cw-coin i { font-style: normal; font-size: .9rem; line-height: 1; }
.cw-gold  { border-color: rgba(240,180,0,.4);  color: #ffd76a; }
.cw-den   { border-color: rgba(120,190,255,.4); color: #9cd0ff; }
.cw-presa { border-color: rgba(150,226,120,.4); color: #a6e0a0; }

/* ============================================================ */
/* ===== PAINEL PERSONAGEM — visual MMORPG (ficha do herói) ==== */
/* ============================================================ */
#panelChar {
  background:
    linear-gradient(180deg, rgba(240,180,0,.05), transparent 120px),
    var(--panel);
}
/* --- cabeçalho: identidade do herói --- */
.cs-header {
  display: flex; gap: 10px; align-items: stretch;
  border: 2px solid rgba(240,180,0,.35);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(240,180,0,.10), rgba(0,0,0,.15));
  padding: 9px 10px; margin-bottom: 8px;
}
.cs-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.cs-name {
  font-weight: 800; font-size: 1.02rem; color: var(--text); line-height: 1.15;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.cs-sub { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.cs-classname { font-size: .62rem; font-weight: 600; color: var(--muted); }
.cs-sub .cs-lvl { color: var(--gold); margin: 0; font-weight: 800; }
.cs-xp { margin: 2px 0 0; height: 15px; }

/* --- seções com moldura (estilo menu de JRPG) --- */
.cs-section {
  border: 2px solid var(--border);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28);
  background: rgba(10,13,18,.45);
  padding: 8px; margin-bottom: 8px;
}
.cs-sec-title {
  font-size: .58rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(240,180,0,.28);
  display: flex; align-items: baseline; gap: 6px;
}
.cs-sec-hint { font-size: .52rem; color: var(--muted); font-weight: 400; letter-spacing: .3px; text-transform: none; }
.inv-sort-btn { margin-left: auto; padding: 3px 7px; font-size: .8rem; line-height: 1; }

/* --- paper-doll: 2 colunas de vagas + herói no centro --- */
.cs-paperdoll {
  display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: stretch;
}
.cs-pd-col { display: flex; flex-direction: column; gap: 7px; }
.cs-pd-col .char-eq-slot {
  width: 42px; height: 42px; background: #0a0d12;
  border: 2px solid rgba(240,180,0,.28); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; position: relative;
}
.cs-pd-col .char-eq-slot.empty { opacity: .5; cursor: default; }
.cs-pd-col .char-eq-slot.empty:hover { opacity: .8; }
.cs-pd-col .char-eq-slot.filled:hover { border-color: #ff7b7b; }
.cs-pd-col .char-eq-slot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* vaga vazia: silhueta fantasma (mesmo sprite do item, tingido de dourado e bem apagado) —
   substitui o emoji genérico de antes. Some ao passar o mouse (empty:hover já abre pra .8). */
.cs-pd-col .char-eq-slot .eq-ghost {
  filter: grayscale(1) brightness(1.7) sepia(1) hue-rotate(-15deg) saturate(2.4);
  opacity: .75;
}
.cs-pd-col .char-eq-slot .eq-tag {
  position: absolute; left: 0; right: 0; bottom: -1px;
  font-size: .4rem; font-style: normal; text-align: center; letter-spacing: 0;
  color: var(--muted); background: rgba(10,13,18,.82); border-radius: 0 0 3px 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.cs-pd-col .char-eq-slot.filled .eq-tag { color: var(--gold); }
.cs-pd-hero {
  position: relative; align-self: stretch;
  width: 100% !important; height: auto !important;
  background:
    radial-gradient(ellipse 60% 22% at 50% 92%, rgba(240,180,0,.30), transparent 75%),
    linear-gradient(180deg, #10141d 0%, #0a0d14 100%) !important;
  border: 2px solid rgba(255,255,255,.10); border-radius: 4px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.cs-pd-hero img {
  width: 100%; height: auto; max-width: 100%; max-height: 168px;
  object-fit: contain; object-position: bottom center; align-self: flex-end;
  image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}

/* --- troca de roupa do herói (teste) --- */
.cs-skins {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12);
}
.cs-skins-lbl { font-size: .58rem; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.cs-skin-btn {
  font-size: .62rem; padding: 3px 8px; border-radius: 4px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: var(--panel2); color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
}
.cs-skin-btn:hover { border-color: var(--gold); filter: brightness(1.12); }
.cs-skin-btn.on { background: rgba(240,180,0,.18); border-color: var(--gold); color: var(--gold); font-weight: 800; }
.cs-skin-btn[disabled] { cursor: default; }
.cs-skin-btn[disabled]:hover { border-color: rgba(255,255,255,.12); filter: none; }
.cs-skin-btn.on[disabled] { border-color: var(--gold); }
.cs-skin-btn.locked { opacity: .55; }           /* traje acima do nível — clicável mesmo assim */
.cs-outfit-btn.locked:hover { opacity: .85; }
.cs-skin-lvl { font-style: normal; font-size: .55rem; opacity: .8; margin-left: 3px; }
.cs-outfit-auto { color: var(--muted); }

/* --- barra de PERFEIÇÃO do equipamento (média de perfPct das 10 vagas) --- */
.cs-perf {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12);
}
/* pedido do usuário: texto normal (não a fonte retrô do jogo) — fica difícil de ler
   nesse tamanho pequeno */
.cs-perf-lbl { font-family: 'Segoe UI', system-ui, Arial, sans-serif; font-size: .62rem; color: var(--muted); font-weight: 700; letter-spacing: normal; flex: 0 0 auto; }
.cs-perf-bar {
  flex: 1 1 80px; min-width: 60px; height: 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.cs-perf-bar i {
  display: block; height: 100%; border-radius: 6px; transition: width .3s;
  background: linear-gradient(90deg, #a86a1a, #ffd77a);
}
.cs-perf-bar.is-perfect i {
  background: linear-gradient(90deg, #ffb700, #ffe08a);
  box-shadow: 0 0 8px rgba(255,215,0,.75);
}
.cs-perf-pct { font-family: 'Segoe UI', system-ui, Arial, sans-serif; font-size: .68rem; font-weight: 800; color: #ffd77a; flex: 0 0 auto; }
.cs-perf-bar.is-perfect + .cs-perf-pct, .cs-perf:has(.is-perfect) .cs-perf-pct {
  color: #ffe08a; text-shadow: 0 0 6px rgba(255,215,0,.6);
}

/* --- barra de PONTOS DE PODER (atributo+equipamento+resistência vs. exigência do
   próximo mapa travado) — mesmo molde da barra de Perfeição acima, cor própria (azul)
   pra não confundir as duas; "is-maxed" = nenhum mapa liberado até agora ainda travado */
.cs-power {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12);
}
.cs-power-lbl { font-family: 'Segoe UI', system-ui, Arial, sans-serif; font-size: .62rem; color: var(--muted); font-weight: 700; letter-spacing: normal; flex: 0 0 auto; }
.cs-power-bar {
  flex: 1 1 80px; min-width: 60px; height: 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.cs-power-bar i {
  display: block; height: 100%; border-radius: 6px; transition: width .3s;
  background: linear-gradient(90deg, #2a6fb0, #6fc3ff);
}
.cs-power-bar.is-maxed i {
  background: linear-gradient(90deg, #7a2ad6, #c58aff);
  box-shadow: 0 0 8px rgba(150,80,255,.75);
}
.cs-power-pct { font-family: 'Segoe UI', system-ui, Arial, sans-serif; font-size: .68rem; font-weight: 800; color: #8ecbff; flex: 0 0 auto; }
.cs-power-bar.is-maxed + .cs-power-pct, .cs-power:has(.is-maxed) .cs-power-pct {
  color: #c58aff; text-shadow: 0 0 6px rgba(150,80,255,.6);
}

/* --- atributos (ficha de status) --- */
.cs-stats { grid-template-columns: 1fr 1fr; gap: 5px 6px; margin-top: 0; }
.cs-stats div {
  background: var(--panel2); border: 1px solid rgba(255,255,255,.05); border-radius: 4px;
  padding: 5px 7px; font-size: .66rem; display: flex; justify-content: space-between;
  align-items: center; gap: 4px;
}
.cs-stats span { color: var(--muted); }
.cs-stats b { color: var(--text); font-weight: 800; }

/* --- Atributos / Resistência a Elementos: MESMA caixa, 2 abas, só uma mostra por vez
   (pedido do usuário — nada de caixa separada lado a lado) --- */
.cs-stats-tabs { display: flex; gap: 6px; border-bottom: none; padding-bottom: 0; margin-bottom: 8px; }
.cs-tab-btn {
  flex: 1; font-family: inherit; font-size: .58rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; padding: 6px 4px; border-radius: 4px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: var(--panel2); color: var(--muted); border: 1px solid rgba(255,255,255,.08);
}
.cs-tab-btn:hover { color: var(--text); border-color: rgba(240,180,0,.35); }
.cs-tab-btn.on { background: rgba(240,180,0,.14); color: var(--gold); border-color: var(--gold); }
.cs-resist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cs-resist-chip {
  display: flex; align-items: center; gap: 5px; background: var(--panel2);
  border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 5px 7px;
  font: inherit; color: var(--muted); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; text-align: left; font-size: .66rem;
}
.cs-resist-chip:hover { border-color: rgba(240,180,0,.4); }
.cs-resist-chip.on { border-color: var(--gold); background: rgba(240,180,0,.10); }
.cs-resist-chip.has .cr-val { color: #8be07a; }
.cs-resist-chip .cr-ico { font-size: .8rem; line-height: 1; flex: none; }
.cs-resist-chip .cr-name { flex: 1; }
.cs-resist-chip .cr-val { color: var(--text); font-weight: 800; }
.cs-resist-detail {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(255,255,255,.12);
  font-size: .64rem;
}
.cs-resist-detail .rd-title { display: block; color: var(--gold); margin-bottom: 5px; font-size: .6rem; }
.cs-resist-detail .rd-row {
  display: flex; justify-content: space-between; gap: 6px; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text);
}
.cs-resist-detail .rd-row b { color: #8be07a; }
.cs-resist-detail .rd-empty { color: var(--muted); line-height: 1.35; }

/* --- valor JÁ investido de uma skill (não só o "por ponto" genérico da descrição) --- */
.st-current {
  font-size: .58rem; color: #8be07a; margin-top: 3px; padding-top: 3px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.st-current b { color: #a8f09a; }

/* --- companheiros: pet e montaria em DUAS colunas lado a lado (cada um na sua
   caixinha) em vez de empilhados (pedido do usuário — "ficou estranho" empilhado) --- */
.cs-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.cs-comp-col { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 6px; }
.cs-companions .pet-section, .cs-companions .mount-row { margin-top: 0; }
.cs-companions .char-eq-row label, .cs-companions .pet-header label { font-size: .58rem; }

/* --- modo compacto (só o hub #panelChar): tudo mais junto pra caber sem precisar
   rolar a caixa — o resto do jogo (Cubo/etc. reusam .cs-section/.cs-actionbar) não
   é afetado, por isso tudo aqui é escopado com #panelChar na frente. --- */
#panelChar .cs-header { padding: 6px 9px; margin-bottom: 6px; }
#panelChar .char-wallet { margin: 4px 0 2px; }
#panelChar .premium-row { margin-top: 6px; }
#panelChar .premium-grid { grid-template-columns: repeat(5, 28px); gap: 4px; }
#panelChar .premium-slot { width: 28px; height: 28px; }
#panelChar .cs-section { padding: 6px; margin-bottom: 6px; }
#panelChar .cs-sec-title { margin-bottom: 4px; padding-bottom: 3px; }
#panelChar .cs-paperdoll { gap: 5px; }
#panelChar .cs-pd-col { gap: 4px; }
#panelChar .cs-pd-col .char-eq-slot { width: 28px; height: 28px; }
#panelChar .cs-pd-hero img { max-height: 100px; }
#panelChar .cs-skins { margin-top: 4px; padding-top: 4px; gap: 4px; }
#panelChar .cs-skin-btn { padding: 2px 6px; }
#panelChar .cs-stats div { padding: 3px 6px; }
#panelChar .cs-comp-grid { gap: 5px; }
#panelChar .cs-comp-col { padding: 4px; }
#panelChar .mount-card { padding: 4px; gap: 6px; }
#panelChar .mount-ico { width: 36px; height: 36px; }
#panelChar .mount-ico img { width: 28px; height: 28px; }
#panelChar .pet-section .pet-slot.filled { height: 36px; }
#panelChar .pet-section .pet-slot.empty { height: 36px; min-height: 0; }
#panelChar .cs-elo { padding: 5px 8px; margin-bottom: 0; gap: 6px; }
#panelChar .cs-elo > img { width: 30px; height: 30px; }
#panelChar .cs-ident { gap: 3px; }
#panelChar .cs-xp { height: 11px; margin-top: 1px; }
#panelChar .cs-relics { padding: 5px 6px; }
#panelChar .cs-relics .relic-empty { padding: 2px; }
#panelChar .cs-actionbar { gap: 5px; margin-top: 0; }
#panelChar .cs-action-row { gap: 5px; }
#panelChar .cs-actionbar .btn { padding: 7px 10px !important; }

/* --- barra de ações (action bar) --- */
.cs-actionbar { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.cs-hunt { width: 100%; }
/* só sobrou o "Trocar" nessa fileira (Inventário/Status/Cidade saíram — já tem atalho
   fixo no cabeçalho) — 1 coluna só, ocupa a fileira inteira */
.cs-action-row { display: grid; grid-template-columns: 1fr; gap: 7px; }
.cs-action-row .cs-act { width: 100%; background: var(--panel2); border: 1px solid rgba(240,180,0,.3); color: var(--text); }
.cs-action-row .cs-act:hover { border-color: var(--gold); filter: brightness(1.12); }
/* botões do hub que abrem/fecham uma asa (Inventário/Status/Cidade/Caçada): sem
   `background` próprio, então caem no cinza escuro padrão de `.btn` (game.css) —
   dourado quando a asa está aberta (.on, abaixo) */
.hub-menu-btn.on {
  background: linear-gradient(180deg, #3a2d05, #241d08) !important;
  border-color: var(--gold) !important; color: var(--gold) !important;
}
/* botão "💛 Doar" do cabeçalho: dourado com borda animada iluminando, pra chamar
   atenção (pedido do usuário). Sobrescreve em cima do `.btn.donate-btn` que o
   próprio data_donate.js injeta (só na 1ª vez que abre o modal, tarde demais pro
   botão já nascer bonito) — aqui fica estático desde o load, sem depender de clique.
   !important vence o cinza padrão de `.btn` E o CSS tardio (mesma especificidade,
   mas o nosso é !important + 2 classes).
   Gotcha: NÃO dá pra animar `border-color`/`box-shadow` do próprio `.btn` — a regra
   genérica `.btn{border:3px solid #000 !important; box-shadow:4px 4px 0 #000 !important}`
   (o contorno pixel-art de todo botão) sempre vence uma animação nessas MESMAS
   propriedades, não importa a especificidade (regra do CSS: !important sempre bate
   animação, mesmo `!important` dentro de @keyframes é inválido/ignorado). Por isso
   o brilho vive num `::after` à parte (anel por trás do botão) — propriedades que
   nada mais reivindica, livre pra animar de verdade. */
.btn.donate-btn {
  background: linear-gradient(180deg, #f6b73c, #d59b35) !important;
  color: #1c1300 !important;
  font-weight: 700 !important;
  position: relative; z-index: 0;
}
.btn.donate-btn::after {
  content: ""; position: absolute; inset: -4px; z-index: -1;
  border-radius: inherit; border: 2px solid #7a5410;
  animation: donateGlow 1.8s ease-in-out infinite; pointer-events: none;
}
@keyframes donateGlow {
  0%, 100% { border-color: #7a5410; box-shadow: 0 0 6px 1px rgba(246,183,60,.55); }
  50%      { border-color: #ffe9b0; box-shadow: 0 0 16px 5px rgba(255,214,120,.95); }
}
.btn.donate-btn:hover { filter: brightness(1.12); }

/* ============================================================ */
/* ===== PAINEL INVENTÁRIO — visual MMORPG (bolsa do herói) ==== */
/* ============================================================ */
#panelInv {
  background:
    linear-gradient(180deg, rgba(240,180,0,.05), transparent 110px),
    var(--panel);
}
/* --- cabeçalho: maleta ativa + capacidade --- */
.iv-header {
  border: 2px solid rgba(240,180,0,.35);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(240,180,0,.10), rgba(0,0,0,.15));
  padding: 8px 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.iv-hd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iv-hd-name { font-weight: 800; font-size: .92rem; color: var(--text); letter-spacing: .3px; }
.iv-hd-cap { font-weight: 800; font-size: .9rem; color: #a6e0a0; }
.iv-hd-cap span { font-size: .66rem; color: var(--muted); font-weight: 700; }
.iv-hd-cap.warn { color: #ffd24a; }
.iv-hd-cap.full { color: #ff8a8a; }
.iv-fill { max-width: none; height: 9px; }
.iv-fill.warn i { background: linear-gradient(90deg, #b8860b, #ffd24a); }
.iv-fill.full i { background: linear-gradient(90deg, #a12b2b, #ff6b6b); }
.iv-hd-sub {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: .62rem; color: var(--muted); font-weight: 700;
}
.iv-hd-sub b { color: #ffe9a8; }
/* --- seções (reusa .cs-section / .cs-sec-title do painel do Personagem) --- */
.iv-sec { padding: 8px; }
.iv-sec .inv-filters { flex-wrap: wrap; gap: 4px; }
.iv-sec .inv-filter { flex: 1 1 auto; }
/* --- bolsa: moldura de couro + grade 5x5 --- */
.iv-bag {
  position: relative;
  max-width: 360px; margin: 0 auto;
  border: 2px solid rgba(120,90,50,.45);
  border-radius: 4px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240,180,0,.06), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px),
    rgba(6,8,12,.55);
  box-shadow: inset 0 0 14px rgba(0,0,0,.5);
  padding: 8px 6px;
}
/* grade elástica: 5 colunas quadradas que encolhem p/ caber na coluna do painel */
.iv-bag .char-inv.inv-5x5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto;
  gap: 5px; width: 100%; overflow: visible;
  justify-content: stretch; justify-items: stretch;
}
.iv-bag .char-inv.inv-5x5 .char-inv-item {
  width: auto; height: auto; min-width: 0; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.iv-bag .char-inv.inv-5x5 .char-inv-item img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* filtro "Outros" (não-equipamento) */
.inv-filter.f-outros.active { color: #b7c7a8; border-color: #b7c7a8; background: rgba(183,199,168,.10); }
/* --- seletor de página --- */
.iv-sec .inv-abas { justify-content: center; margin: 8px 0 0; flex-wrap: wrap; }
.iv-sec .inv-aba { width: 22px; height: 22px; }
/* --- maletas: grade de 5 por fileira, número sempre visível --- */
.iv-sec-maletas .kv-bar { flex-wrap: wrap; gap: 3px; margin-bottom: 0; }
.iv-sec-maletas .kv-btn {
  position: relative; min-width: 0; flex: 1 1 calc(12.5% - 3px);
  text-align: center; padding: 3px 2px; font-size: .58rem; border-radius: 6px;
}
.iv-sec-maletas .kv-btn.locked { opacity: .55; }
.kv-btn .kv-lock {
  position: absolute; top: 0; right: 1px; font-size: .48rem; font-style: normal;
  line-height: 1; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); pointer-events: none;
}
.iv-foot { margin-top: 8px; display: block; text-align: center; opacity: .8; }

/* --- bolsa de SELEÇÃO reutilizável (Aldric / Kaelen) — mesmo visual da bolsa do herói --- */
.char-inv-item.pb-sel {
  border-color: #9be27a !important;
  box-shadow: 0 0 0 2px rgba(155,226,122,.6), 0 0 10px rgba(155,226,122,.5) !important;
}
.iv-bag.pb-empty { display: flex; flex-direction: column; align-items: center; }
.pb-empty-msg { margin-top: 8px; font-size: .66rem; color: var(--muted); font-weight: 700; text-align: center; padding: 2px 0; }
/* nesses painéis a bolsa clica p/ ESCOLHER (não equipar) — cursor de mão */
#panelAging .iv-bag .char-inv-item[data-pbid], #panelCubo .iv-bag .char-inv-item[data-pbid] { cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
/* bolsa um pouco MENOR dentro dos NPCs (Ferreiro/Cubo/Fundição/Aldric/Valtor) — só ali,
   o Inventário principal (#panelInv) continua no tamanho normal (não usa pickBagHtml) */
#panelFerreiro .iv-bag, #panelCubo .iv-bag, #panelFundicao .iv-bag,
#panelAging .iv-bag, #panelMercado .iv-bag { max-width: 300px; }

/* painel cacada */
.up-panel-hunt { min-height: 400px; }
/* barra de XP do personagem na caçada — enche sozinha conforme ganha XP */
.hunt-xpbar { margin: 4px 0 8px; height: 15px; }
.hunt-xpbar i { transition: width .35s ease; }
.hunt-xpbar.leveled i { background: linear-gradient(90deg, #f0b400, #ffd966); }
.hunt-xpbar.leveled { box-shadow: 0 0 10px rgba(240,180,0,.5); animation: huntXpLvl 1s ease-in-out infinite; }
@keyframes huntXpLvl { 0%,100% { box-shadow: 0 0 6px rgba(240,180,0,.35); } 50% { box-shadow: 0 0 14px rgba(240,180,0,.75); } }
.hunt-tips { margin-top: 10px; font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
/* caixas de drop: barra horizontal acima do log */
.char-loot-bar { margin-top: 10px; padding: 6px; background: #0a0d12; border: 1px solid var(--border); border-radius: 6px; }
.char-loot-bar label { display: block; font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.char-loot-bar > div { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; }
.char-loot-bar .loot-box { margin: 0; }
.char-log { height: 92px; }

/* overlay de escolha */
.up-pick-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,8,12,.88); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  overflow: auto;
}
.up-pick-overlay[hidden] { display: none; }

/* atributos */
.char-attr-head { font-size: .72rem; color: var(--muted); margin-bottom: 6px; }
.char-attr-head .attr-pts { color: var(--gold); font-size: .8rem; }
.char-attr-grid { display: flex; flex-direction: column; gap: 4px; }
.char-attr {
  display: grid;
  grid-template-columns: 22px 1fr auto 30px 34px;
  align-items: center; gap: 4px;
  background: #0a0d12; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; font-size: .72rem;
}
.char-attr .attr-ico { text-align: center; }
.char-attr .attr-name { font-weight: 700; }
.char-attr .attr-desc { color: var(--muted); font-weight: 400; font-size: .62rem; }
.char-attr .attr-val { text-align: right; color: var(--gold); font-weight: 800; }
.char-attr .attr-btn {
  padding: 1px 4px; font-size: .68rem; width: 100%;
  background: linear-gradient(135deg, #6b4423, #9c6b34); color: #fff2df;
  border: none; border-radius: 4px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 700;
}
.char-attr .attr-btn:hover:not(:disabled) { background: linear-gradient(135deg, #7d5029, #b47c3d); }
.char-attr .attr-btn:disabled { background: #3a3128; color: #6a5f52; cursor: not-allowed; }

/* ===== bloquear seleção/arrasto acidental (modo jogo) ===== */
body { -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
/* pets */
.pet-section { margin-top: 10px; }
.pet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pet-header label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.btn-blue { background: #1a6fc4; color: #fff; border: none; border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 700; }
.btn-blue:hover { background: #1e88e5; }
.btn-small { padding: 3px 10px; font-size: .7rem; }
.pet-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.pet-slot {
  width: 30px; height: 34px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed rgba(240,180,0,.4); background: #0a0d12; cursor: default; position: relative;
  font-size: .42rem; gap: 1px;
}
.pet-slot.filled { border-style: solid; border-color: var(--gold); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
.pet-slot.filled:hover { border-color: #ff7b7b; }
.pet-slot .pet-ico { font-size: .78rem; line-height: 1; }
.pet-slot.filled .pet-ico { font-size: .9rem; }
.pet-slot .pet-name { text-align: center; color: var(--muted); font-style: normal; max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-slot.filled .pet-name { color: var(--text); }
/* pet voando ao lado do herói na caçada */
.pet-ride {
  position: absolute; left: 34%; top: -10px; width: 26px; height: 26px;
  image-rendering: auto; z-index: 3; pointer-events: none;
  animation: petFloat 1.6s ease-in-out infinite;
}
@keyframes petFloat {
  0%, 100% { transform: translateY(0) translateX(-4px); }
  50% { transform: translateY(-4px) translateX(2px); }
}
.pet-remove {
  position: absolute; top: -6px; right: -4px;
  width: 16px; height: 16px; background: #c0392b; color: #fff;
  border: none; border-radius: 50%; font-size: .5rem; line-height: 1;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.pet-slot.filled:hover .pet-remove { opacity: 1; }

/* pet picker overlay */
.pet-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 380px; overflow-y: auto; padding: 4px; }
.pet-pick-item {
  width: 120px; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel2); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center; transition: border-color .15s, background .15s;
}
.pet-pick-item:hover:not(.disabled) { border-color: var(--gold); background: #1a1f2e; }
.pet-pick-item.disabled { opacity: .45; cursor: not-allowed; }
.pet-pick-item .pick-pet-ico { font-size: 2rem; }
.pet-pick-item b { font-size: .72rem; color: var(--text); }
.pet-pick-item em { font-size: .6rem; text-transform: uppercase; letter-spacing: .3px; }
.pet-pick-item small { font-size: .58rem; color: var(--muted); line-height: 1.3; }
.pet-tem { color: var(--gold); font-size: .6rem; margin-top: 2px; }
.pet-tem::before { content: "✓ "; }

/* equipamento por categoria (10 vagas: 5 x 2) */
.char-eq-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.char-eq-slot { position: relative; }
.char-eq-slot.filled { border-style: solid; border-color: var(--gold); background: var(--panel2); }
.char-eq-slot.filled:hover { border-color: #ff7b7b; }
.char-eq-slot.empty { opacity: .55; }
.char-eq-slot.empty:hover { opacity: .85; }
.char-eq-slot .eq-tag {
  position: absolute; bottom: -1px; left: 0; right: 0;
  font-size: .48rem; font-style: normal; text-align: center;
  color: var(--muted); letter-spacing: .2px; pointer-events: none;
  background: rgba(10,13,18,.75); border-radius: 0 0 4px 4px;
}
.char-eq-slot.filled .eq-tag { color: var(--gold); }
/* aura de raridade no item EQUIPADO (mesmo efeito pulsante do inventário) */
.char-eq-slot.filled.r-comum    { border-color: rgba(180,190,200,.55); }
.char-eq-slot.filled.r-raro     { border-color: rgba(110,180,255,.75); animation: borderGlowRaro 1.6s ease-in-out infinite; }
.char-eq-slot.filled.r-epico    { border-color: rgba(190,130,255,.8);  animation: borderGlowEpico 1.5s ease-in-out infinite; }
.char-eq-slot.filled.r-lendario { border-color: rgba(255,214,0,.85);   animation: borderGlowLend 1.4s ease-in-out infinite; }
/* etiqueta de categoria nos itens do inventario */
.char-inv-item { position: relative; }
.char-inv-item .cat-tag {
  position: absolute; top: -6px; right: -6px;
  font-size: .5rem; font-style: normal; font-weight: 700;
  background: #0a0d12; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 4px; padding: 0 3px; pointer-events: none;
}
.char-inv-item.sem-cat .cat-tag { border-color: #6b7280; color: #9ca3af; }
.char-inv-item.sem-cat { opacity: .6; }


/* inventario sem scroll — forja: grade 6x5 (6 colunas) */
.inv-count { font-size: .62rem; color: var(--muted); font-weight: 400; }
.char-inv {
  display: grid; grid-template-columns: repeat(6, 40px);
  gap: 5px; overflow: hidden; max-height: none;
}
.char-inv.forge { display: grid; grid-template-columns: repeat(6, 40px); gap: 5px; }
/* inventario: grade fixa 7x5 = 35 slots sempre visiveis */
.char-inv.inv-7x5 {
  grid-template-columns: repeat(7, 40px);
}
.char-inv.inv-7x5 .char-inv-item.empty {
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.12);
  cursor: default;
}
.char-inv.inv-7x5 .char-inv-item.empty:hover { transform: none; border-color: rgba(255,255,255,.12); }
/* paginação do inventário (30 por página, grade 6x5) */
.inv-pages { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.inv-page-btn {
  min-width: 22px; height: 22px; padding: 0 6px;
  background: #0a0d12; border: 1px solid var(--border);
  color: var(--muted); border-radius: 4px; font-size: .68rem; font-weight: 700;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.inv-page-btn:hover { border-color: var(--gold); color: var(--gold); }
.inv-page-btn.active { background: var(--gold); border-color: var(--gold); color: #0a0d12; }

/* estado "forjando..." do botão de fundir */
.btn.btn-loading { animation: fusePulse 1s ease-in-out infinite; pointer-events: none; }
@keyframes fusePulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* brilho no slot de resultado enquanto forja */
.char-fuse-result.result-loading { animation: resultGlow 1s ease-in-out infinite; }
@keyframes resultGlow {
  0%,100% { box-shadow: 0 0 0 rgba(240,180,0,0); }
  50% { box-shadow: 0 0 14px 2px rgba(255,214,0,.7); }
}

/* caixa popup de item forjado (na tela, com efeito) */
.forge-result-box {
  position: fixed; z-index: 500; left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(1);
  background: linear-gradient(180deg, #2a2f1d, #0a0d12);
  border: 2px solid var(--gold); border-radius: 14px;
  padding: 18px 26px; text-align: center;
  box-shadow: 0 0 40px rgba(255,214,0,.5), 0 12px 40px rgba(0,0,0,.7);
  opacity: 1; pointer-events: auto;
}
.forge-result-box.show {
  animation: none;
}
.forge-result-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; }
.forge-result-icon {
  width: 84px; height: 84px; margin: 0 auto 8px;
  background: var(--panel2); border: 1px solid var(--gold); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  animation: iconShine 1.6s ease-in-out infinite;
}
.forge-result-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.forge-result-name { font-size: 1rem; font-weight: 800; color: var(--gold); margin-bottom: 12px; }
@keyframes iconShine {
  0% { box-shadow: 0 0 6px rgba(255,214,0,.4); }
  50% { box-shadow: 0 0 24px 4px rgba(255,214,0,.8); }
  100% { box-shadow: 0 0 6px rgba(255,214,0,.4); }
}
/* toast */
.up-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(24px);
  background: #0a0d12; color: var(--text); border: 2px solid var(--gold);
  padding: 12px 20px; border-radius: 10px; z-index: 400; font-weight: 800; font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 10px 40px rgba(0,0,0,.7);
  max-width: 90vw; text-align: center;
}
.up-toast.show { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.up-toast.gold { border-color: #ffe066; color: #ffe066; }
.up-toast.warn { border-color: #ff9f43; color: #ffd9a0; }
.up-toast.drop { border-color: #4ade80; color: #a7f3c0; }

/* box popup de itens conquistados nas caixas de drop */
.loot-result-box { width: min(560px, 92vw); }
.loot-list {
  display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center;
  overflow-x: auto; overflow-y: hidden; margin-bottom: 12px; padding: 2px;
  min-height: 74px; text-align: center;
}
.loot-item {
  position: relative; flex: 0 0 auto; width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,214,0,.25);
  border-radius: 8px; padding: 5px 5px;
}
/* o popup da Forja/Caixa não usa a animação .in do loot da caçada (game.css) — força visível */
.loot-result-box .loot-item { opacity: 1 !important; transform: none !important; }
.loot-item img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.loot-item .loot-noimg {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: var(--muted); background: var(--panel2); border-radius: 6px;
}
.loot-item .loot-name { font-size: .6rem; color: var(--text); line-height: 1.05; word-break: break-word; max-width: 100%; }
.loot-item .loot-qty {
  position: absolute; top: -7px; right: -7px;
  background: var(--gold); color: #1a1400; font-size: .6rem; font-weight: 800;
  border-radius: 8px; padding: 1px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* badge de quantidade empilhada no inventario/forja */
.char-stack-qty {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--gold); color: #1a1400; font-size: .58rem; font-weight: 800;
  border-radius: 7px; padding: 1px 5px;
  pointer-events: none;
}

/* ============ painel Ferreiro (vender itens por ouro) ============ */
.fer-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.fer-face {
  width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated;
  border: 2px solid var(--gold); border-radius: 12px; background: var(--panel2);
  box-shadow: 0 0 18px rgba(255,214,0,.35);
}
.fer-gold {
  font-size: 1rem; color: var(--muted);
}
.fer-gold b { color: var(--gold); font-size: 1.15rem; }
.fer-dropzone {
  min-height: 56px; border: 2px dashed rgba(255,214,0,.45); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); background: rgba(255,255,255,.03); cursor: copy; padding: 8px 16px;
  transition: border-color .15s, background .15s, color .15s;
}
.fer-dropzone.drag-over {
  border-color: var(--gold); background: rgba(255,214,0,.14); color: var(--gold);
  box-shadow: 0 0 18px rgba(255,214,0,.4) inset;
}
.fer-dropzone.sold {
  border-color: #4ade80; border-style: solid; background: rgba(74,222,128,.12); color: #a7f3c0;
}
.fer-drop-hint { font-size: .85rem; line-height: 1.3; pointer-events: none; }
.fer-drop-hint small { font-size: .7rem; opacity: .85; }
.fer-dropzone.sold .fer-drop-hint b { color: #4ade80; }
/* itens do inventario ficam com cursor de arrastar */
.char-inv-item[draggable="true"] { cursor: grab; }
.char-inv-item[draggable="true"]:active { cursor: grabbing; }
/* cores de raridade */
.r-comum   { border-color: #6b7686 !important; }
.r-raro    { border-color: #4d9fff !important; box-shadow: 0 0 4px rgba(77,159,255,.5); }
.r-epico   { border-color: #b06bff !important; box-shadow: 0 0 6px rgba(176,107,255,.6); }
.r-lendario{ border-color: #ffd000 !important; box-shadow: 0 0 8px rgba(255,208,0,.7); }
.loot-item.r-comum { background: rgba(107,118,134,.12); }
.loot-item.r-raro { background: rgba(77,159,255,.14); }
.loot-item.r-epico { background: rgba(176,107,255,.16); }
.loot-item.r-lendario { background: rgba(255,208,0,.16); }
.loot-item.not-stored { opacity: .5; }
.loot-item .loot-nofit { display: block; font-size: .5rem; font-weight: 800; color: #ff8a65; margin-top: 1px; }
.cr-drop.r-comum i { color: #6b7686; }
.cr-drop.r-raro i { color: #4d9fff; }
.cr-drop.r-epico i { color: #b06bff; }
.cr-drop.r-lendario i { color: #ffd000; }
/* resumo compacto dos itens dropados no fim da caçada (por raridade) */
.cr-drop-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cr-drop-summary.empty { font-size: .68rem; color: var(--muted); padding: 2px; }
.cr-drop-sum {
  display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px;
}
.cr-drop-sum b { font-size: .85rem; }
.cr-drop-sum.r-comum   { border-color: rgba(107,118,134,.5); color: #c6cdd8; }
.cr-drop-sum.r-raro    { border-color: rgba(77,159,255,.6);  color: #6fb6ff; }
.cr-drop-sum.r-epico   { border-color: rgba(176,107,255,.6); color: #c89bff; }
.cr-drop-sum.r-lendario{ border-color: rgba(255,208,0,.6);   color: #ffd000; }
.it-head.r-comum .it-title { color: #c6cdd8; }
.it-head.r-raro .it-title { color: #6fb6ff; }
.it-head.r-epico .it-title { color: #c89bff; }
.it-head.r-lendario .it-title { color: #ffd000; }
.it-rar { font-size: .62rem; padding: 1px 6px; border-radius: 8px; margin-left: 6px; background: rgba(255,255,255,.1); }

/* ===== ÍCONE do item no tooltip — fundo/borda na cor da RARIDADE (só o ícone) ===== */
.it-head.r-raro .it-icon img     { border-color: #4d9fff; background: radial-gradient(circle at 35% 30%, rgba(77,159,255,.5), rgba(30,55,100,.85)); box-shadow: 0 0 10px rgba(77,159,255,.55); }
.it-head.r-epico .it-icon img    { border-color: #b06bff; background: radial-gradient(circle at 35% 30%, rgba(176,107,255,.5), rgba(60,30,105,.85)); box-shadow: 0 0 10px rgba(176,107,255,.6); }
.it-head.r-lendario .it-icon img { border-color: #ffd000; background: radial-gradient(circle at 35% 30%, rgba(255,208,0,.5), rgba(110,80,15,.88)); box-shadow: 0 0 12px rgba(255,208,0,.65); }
.it-head.r-comum .it-icon img    { border-color: #6b7686; background: radial-gradient(circle at 35% 30%, rgba(150,160,175,.32), #0a0d12); }
/* valor de venda no Ferreiro (logo abaixo do nome) */
.it-sell { margin-top: 2px; font-size: .66rem; font-weight: 700; color: #ffdf9e; display: flex; align-items: center; gap: 4px; }
.it-sell b { color: #ffd000; font-size: .78rem; }
.it-aging { margin-top: 2px; font-size: .66rem; font-weight: 700; color: #c6bdf5; }
.it-aging b { color: #b7f09a; }
.it-aging-stones { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.it-aging-stone { display: inline-flex; align-items: center; gap: 1px; font-size: .58rem; font-weight: 700; color: #d8cffa;
  background: rgba(143,124,230,.15); border-radius: 4px; padding: 0 3px; }
.it-aging-stone img { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; }
.it-eff { margin-top: 4px; font-size: .7rem; color: #ffd07a; }
.it-slots { margin-top: 3px; font-size: .68rem; color: var(--muted); }
.it-lvl { margin-top: 3px; font-size: .68rem; color: #ff9a6f; font-weight: 700; }
.it-cat { margin-top: 3px; font-size: .68rem; color: var(--muted); font-weight: 700; }
.it-cls { margin-top: 3px; font-size: .68rem; color: #8fd4ff; font-weight: 700; }
/* slot de gravação */
.it-grav {
  margin-top: 4px; font-size: .68rem; font-weight: 700; color: #9be2ff;
  border: 1px dashed rgba(155,226,255,.55); border-radius: 6px; padding: 3px 5px;
  display: flex; flex-direction: column; gap: 1px;
}
.it-grav-ico { font-size: .8rem; }
.it-grav-txt { font-size: .6rem; color: var(--muted); font-weight: 600; }
.it-grav.done { border-color: rgba(122,222,122,.5); color: #8ce08c; }
.it-quality { margin-top: 3px; font-size: .68rem; color: #c9b8ff; font-weight: 800; }
.it-perfect { margin-top: 3px; font-size: .72rem; font-weight: 800; color: #ffd77a; }
.it-perfect.is-perfect { color: #ffe08a; text-shadow: 0 0 6px rgba(255,215,0,.6); }
.it-spec { margin-top: 5px; display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 800; color: #ffe0b2;
  background: linear-gradient(90deg, rgba(255,140,40,.28), rgba(255,140,40,.06)); border: 1px solid rgba(255,170,80,.55);
  border-left: 3px solid #ff9a3c; border-radius: 5px; padding: 4px 6px; text-transform: uppercase; letter-spacing: .3px; }
.it-spec b { color: #ffd27a; font-size: .9rem; }
.it-spec-ico { font-size: .8rem; filter: drop-shadow(0 0 3px rgba(255,170,60,.8)); }
.it-spec-txt { margin-left: 4px; font-size: .6rem; color: #ffc98a; font-weight: 600; text-transform: none; letter-spacing: 0; }
.it-affix { margin-top: 4px; border-top: 1px dashed rgba(255,179,107,.35); padding-top: 3px; display: flex; flex-direction: column; gap: 1px; }
.it-affix-title { font-size: .62rem; font-weight: 800; color: #ffb36b; text-transform: uppercase; letter-spacing: .5px; }
.it-affix-row { font-size: .74rem; color: #ffd9b0; }
.char-inv-item .inv-grav, .char-inv-item .inv-grav-done {
  position: absolute; top: 1px; right: 1px; font-size: .66rem; font-style: normal;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); z-index: 3;
}
.char-inv-item .inv-perfect {
  position: absolute; top: 1px; left: 1px; font-size: .66rem; font-style: normal;
  color: #ffe08a; filter: drop-shadow(0 0 3px rgba(255,215,0,.8)); z-index: 3;
}
.char-inv-item .inv-grav-done.is-perfect, .char-inv-item .inv-grav.is-perfect { color: #ffe08a; }
.char-inv-item .inv-spec {
  position: absolute; bottom: 1px; left: 1px; font-size: .6rem; font-style: normal;
  color: #ffb36b; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); z-index: 3;
}
/* item com AGING — visual distinto (moldura roxa + brilho + selo ⏳+N) */
.char-inv-item.is-aged {
  border-color: #8f7ce6 !important;
  box-shadow: 0 0 0 1px rgba(143,124,230,.55), 0 0 10px rgba(143,124,230,.45);
  background: linear-gradient(160deg, rgba(90,70,180,.28), rgba(10,13,18,.6));
}
.char-inv-item.is-aged::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 8px rgba(170,140,255,.35);
}
.char-inv-item .inv-aged {
  position: absolute; bottom: 1px; right: 1px; font-size: .56rem; font-weight: 800; font-style: normal;
  background: linear-gradient(180deg, #7c68e0, #4a3aa0); color: #fff; border-radius: 5px;
  padding: 0 3px; z-index: 4; box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.item-lvl {
  position: absolute; top: 2px; left: 2px; z-index: 3;
  font-size: .58rem; font-weight: 800; line-height: 1;
  background: rgba(0,0,0,.7); color: #ffb07a;
  padding: 2px 3px; border-radius: 5px; border: 1px solid rgba(255,160,110,.5);
}
/* aura de raridade no inventário (só isso aparece no tile) */
.char-inv-item { border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(10,13,18,.6); transition: transform .08s, box-shadow .12s; }
.char-inv-item.r-comum { box-shadow: inset 0 0 0 1px rgba(180,190,200,.35); }
.char-inv-item.r-raro { box-shadow: 0 0 8px rgba(80,160,255,.55), inset 0 0 0 1px rgba(80,160,255,.6); }
.char-inv-item.r-epico { box-shadow: 0 0 10px rgba(170,110,255,.7), inset 0 0 0 1px rgba(170,110,255,.7); }
.char-inv-item.r-lendario { box-shadow: 0 0 14px rgba(255,200,0,.85), inset 0 0 0 1px rgba(255,200,0,.8); }
.char-inv-item:hover { transform: translateY(-2px) scale(1.04); }
/* cadeado: item acima do nível do personagem */
.char-inv-item.locked { opacity: .6; filter: grayscale(.5); }
.char-inv-item.locked::after {
  content: "🔒"; position: absolute; bottom: 1px; right: 1px; font-size: .8rem; z-index: 3;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.8));
}
/* aura nas BORDAS (efeito acendendo) para RARO / ÉPICO / LENDÁRIO */
.char-inv-item.r-raro {
  border-color: rgba(110,180,255,.35);
  animation: borderGlowRaro 1.6s ease-in-out infinite;
}
.char-inv-item.r-épico, .char-inv-item.r-epico {
  border-color: rgba(190,130,255,.4);
  animation: borderGlowEpico 1.5s ease-in-out infinite;
}
.char-inv-item.r-lendário, .char-inv-item.r-lendario {
  border-color: rgba(255,214,0,.45);
  animation: borderGlowLend 1.4s ease-in-out infinite;
}
@keyframes borderGlowRaro {
  0%, 100% { box-shadow: 0 0 2px rgba(80,160,255,.25), inset 0 0 0 1px rgba(80,160,255,.3); }
  50% { box-shadow: 0 0 8px rgba(110,180,255,.95), inset 0 0 0 1px rgba(140,200,255,1); }
}
@keyframes borderGlowEpico {
  0%, 100% { box-shadow: 0 0 2px rgba(170,110,255,.25), inset 0 0 0 1px rgba(170,110,255,.35); }
  50% { box-shadow: 0 0 9px rgba(190,130,255,1), inset 0 0 0 1px rgba(220,170,255,1); }
}
@keyframes borderGlowLend {
  0%, 100% { box-shadow: 0 0 3px rgba(255,214,0,.3), inset 0 0 0 1px rgba(255,214,0,.4); }
  50% { box-shadow: 0 0 11px rgba(255,214,0,1), inset 0 0 0 1px rgba(255,230,120,1); }
}
.char-inv-item img { position: relative; z-index: 2; }
/* ===== Árvore de Habilidades — estilo talento MMORPG (espinha central + nós em zigue-zague) ===== */
.skilltree { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.st-branch-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 2px;
}
.st-branch.magics .st-branch-title { color: #ffb86a; }

.st-spine { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.st-spine::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px);
  background: linear-gradient(180deg, transparent, rgba(120,190,255,.5) 12%, rgba(120,190,255,.5) 88%, transparent);
}
.st-branch.magics .st-spine::before {
  background: linear-gradient(180deg, transparent, rgba(255,150,60,.55) 12%, rgba(255,150,60,.55) 88%, transparent);
}

.st-node {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: calc(62% + 16px);
  background: var(--panel2); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 6px 8px;
}
.st-node.left  { align-self: flex-start; flex-direction: row-reverse; text-align: right; }
.st-node.right { align-self: flex-end; }
/* conector horizontal até a espinha central */
.st-node::before {
  content: ""; position: absolute; top: 50%; width: 16px; height: 2px;
  background: rgba(120,190,255,.5);
}
.st-node.left::before  { right: -16px; }
.st-node.right::before { left: -16px; }
.st-branch.magics .st-node::before { background: rgba(255,150,60,.55); }

.st-node.passive { border-color: rgba(120,190,255,.32); background: linear-gradient(180deg, rgba(120,190,255,.08), rgba(0,0,0,.12)); }
.st-node.magic   { border-color: rgba(255,150,60,.4);  background: linear-gradient(180deg, rgba(255,150,60,.09), rgba(0,0,0,.12)); }
.st-node:not(.learned) { opacity: .6; }
.st-node.maxed { border-color: rgba(255,214,0,.55); box-shadow: 0 0 8px rgba(255,214,0,.22); opacity: 1; }

.st-ico {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #11151f; border: 2px solid rgba(255,255,255,.16); border-radius: 8px;
}
.st-node.learned .st-ico { border-color: rgba(120,190,255,.7); }
.st-node.maxed .st-ico   { border-color: rgba(255,214,0,.8); }
.st-ico img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.st-ico-emoji { font-size: 1.15rem; line-height: 1; }
.st-ico .st-lv {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  font-size: .58rem; font-weight: 800; line-height: 15px; text-align: center;
  color: #0c0c0c; background: var(--gold); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.st-node:not(.learned) .st-lv { display: none; }

.st-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-line { display: flex; align-items: baseline; gap: 6px; }
.st-node.left .st-line { flex-direction: row-reverse; }
.st-name { font-size: .72rem; font-weight: 800; color: var(--text); }
.st-rank { font-size: .58rem; font-weight: 800; color: var(--gold); }
.st-req {
  font-size: .54rem; font-weight: 800; letter-spacing: .02em;
  padding: 1px 5px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.14);
}
.st-req.met    { background: rgba(120,200,120,.16); color: #9fdc9f; border-color: rgba(120,200,120,.34); }
.st-req.locked { background: rgba(255,90,90,.16);  color: #ff9a9a; border-color: rgba(255,90,90,.4); }
.st-node.lvl-locked { opacity: .5; }
.st-node.lvl-locked .st-ico { filter: grayscale(.7); border-color: rgba(255,90,90,.35); }
.st-lock-note { margin: 2px 0 0; font-size: .58rem; color: #ff9a9a; font-weight: 700; }
.st-node.left .st-lock-note { text-align: right; }
.st-node.lvl-locked .st-plus { background: rgba(255,90,90,.18); color: #ff9a9a; cursor: not-allowed; }
.st-pips { display: flex; gap: 2px; }
.st-node.left .st-pips { justify-content: flex-end; }
.st-pips i { width: 6px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.14); }
.st-pips i.on { background: var(--gold); box-shadow: 0 0 3px rgba(255,214,0,.8); }
.st-pips-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.st-pips-bar i { display: block; height: 100%; background: var(--gold); }
.st-desc { font-size: .57rem; color: var(--muted); line-height: 1.25; margin: 0; }

.st-plus {
  flex: 0 0 auto; align-self: center;
  padding: 3px 8px; font-size: .72rem; font-weight: 800; line-height: 1.3;
  background: linear-gradient(135deg, #6b4423, #9c6b34); color: #fff2df;
}
.st-plus:hover:not(:disabled) { background: linear-gradient(135deg, #7d5029, #b47c3d); }
.st-plus:disabled { background: #3a3128; color: #6a5f52; opacity: 1; cursor: not-allowed; }
.st-node.maxed .st-plus { background: linear-gradient(135deg, #8a6a1e, #d0a02e); color: #241a05; }

@media (max-width: 460px) {
  .st-node, .st-node.left, .st-node.right { width: 100%; align-self: stretch; flex-direction: row; text-align: left; }
  .st-node::before { display: none; }
  .st-spine::before { left: 21px; }
  .st-node.left .st-line, .st-node.left .st-pips { flex-direction: row; justify-content: flex-start; }
}
/* penalidade de XP */
.hunt-penalty { font-size: .68rem; color: #ff8a65; font-weight: 700; }
.hunt-penalty.ok { color: #7fce7f; }
.hunt-penalty.warn { color: #ffcf7a; }
.hunt-penalty.premium { color: #ffd6a8; }
.hunt-penalty.premium small { color: var(--muted); }
/* mapa do continente: só tom de deserto + poeira (mesmo tamanho do mapa-múndi) */
.mini-map {
  position: relative; width: 100%; max-width: 480px; margin: 2px auto 0;
  aspect-ratio: 240 / 135; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, #cfae7d 0%, #b98f5c 55%, #a67c48 100%);
  border: 3px solid #3a2613; border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px #6b5430, inset 0 0 30px rgba(90,58,26,.35);
}
/* poeira que passa (sem imagem, só CSS) */
.mini-map::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(60px 30px at 20% 30%, rgba(240,222,180,.20), transparent 70%),
    radial-gradient(80px 34px at 60% 60%, rgba(240,222,180,.16), transparent 70%),
    radial-gradient(50px 24px at 85% 40%, rgba(240,222,180,.18), transparent 70%);
  animation: mapDust 14s linear infinite;
}
.mini-map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(0,0,0,0) 55%, rgba(60,38,18,.35) 100%);
}
@keyframes mapDust {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(6%, -3%); }
  100% { transform: translate(0, 0); }
}
/* ===== CLIMAS por continente ===== */
/* 1 — Vales Primaveris (verde) */
.mini-map.clima-verde {
  background: radial-gradient(ellipse at 30% 25%, #bcd48c 0%, #91b661 55%, #6f9a4a 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px #6b5430, inset 0 0 30px rgba(36,66,24,.42);
}
.mini-map.clima-verde::before {
  background:
    radial-gradient(60px 30px at 20% 30%, rgba(224,255,184,.24), transparent 70%),
    radial-gradient(80px 34px at 60% 60%, rgba(214,250,172,.17), transparent 70%),
    radial-gradient(50px 24px at 85% 40%, rgba(232,255,194,.2), transparent 70%);
}
.mini-map.clima-verde::after { background: radial-gradient(circle, rgba(0,0,0,0) 55%, rgba(24,52,18,.4) 100%); }
/* 2 — Deserto de Kazan (padrão areia) */
.mini-map.clima-deserto { background: radial-gradient(ellipse at 30% 25%, #cfae7d 0%, #b98f5c 55%, #a67c48 100%); }
/* 3 — Abismo Cinéreo (sombrio) */
.mini-map.clima-sombrio {
  border-color: #2a2636;
  background: radial-gradient(ellipse at 30% 25%, #6a6472 0%, #47424f 55%, #322e3a 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px #4a4658, inset 0 0 44px rgba(8,6,14,.6);
}
.mini-map.clima-sombrio::before {
  background:
    radial-gradient(60px 30px at 20% 30%, rgba(190,188,206,.14), transparent 70%),
    radial-gradient(80px 34px at 60% 60%, rgba(168,164,188,.12), transparent 70%),
    radial-gradient(50px 24px at 85% 40%, rgba(200,194,214,.12), transparent 70%);
}
.mini-map.clima-sombrio::after { background: radial-gradient(circle, rgba(0,0,0,0) 42%, rgba(4,3,10,.6) 100%); }
.mini-map.clima-sombrio .region-trail polyline { stroke: #d3c4e6; stroke-opacity: .5; filter: drop-shadow(0 .5px 0 rgba(0,0,0,.5)); }
.mini-map.clima-sombrio .node-tag { background: rgba(8,5,16,.86); }
/* tinta das placas de continente no mapa-múndi */
.world-cont.clima-verde .wc-banner   { background: linear-gradient(180deg, #dceeb2, #b7d98a); border-color: #5e8a44; }
.world-cont.clima-deserto .wc-banner { background: linear-gradient(180deg, #efe0bd, #d9c398); }
.world-cont.clima-sombrio .wc-banner { background: linear-gradient(180deg, #cbc5d8, #aaa3bc); border-color: #4a4658; color: #2a2636; }
/* trilha pontilhada ligando as bandeiras */
.region-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.region-trail polyline {
  fill: none; stroke: #5a3a1e; stroke-opacity: .85; stroke-width: .8;
  stroke-dasharray: 2 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 .5px 0 rgba(255,240,210,.4));
}
/* cabeçalho do continente + botão voltar */
.region-head {
  display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 4px auto 4px;
  padding: 4px 6px; border-radius: 6px;
  background: linear-gradient(180deg, #4a3a24, #38291a); border: 1px solid #6b5636;
}
.rh-back {
  flex: 0 0 auto; font-size: .62rem; font-weight: 800; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  color: #ffe9c4; padding: 3px 9px; border-radius: 4px;
  background: linear-gradient(180deg, #5a3a1e, #3b2512); border: 1px solid #caa441;
  text-shadow: 1px 1px 0 #000;
}
.rh-back:hover { filter: brightness(1.12); }
.region-name { font-size: .72rem; font-weight: 800; color: #ffe9a8; text-shadow: 1px 1px 0 #000; }
.region-name em { font-style: normal; font-weight: 700; color: #d8c39a; }

/* ===== TABULEIRO da caçada — tema por clima (mantido ESCURO p/ os sprites aparecerem) ===== */
.char-arena.clima-verde, .char-arena.clima-deserto, .char-arena.clima-sombrio { border-width: 2px; }
/* Vale das Primaveras — fundo pixel-art gerado (PixelLab "high top-down", seed 44).
   arte 320x320 escalada p/ 448 (image-rendering:pixelated); scrim escuro POR CIMA
   p/ trazer pra paleta do jogo e manter os sprites legíveis. */
.char-arena.clima-verde {
  border-color: #3a5a24;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/arena_verde.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* grade 8x8 escondida neste tema (fica só a ilustração) */
.char-arena.clima-verde .ar-cell { border-color: transparent; }
/* vinheta de borda só — tira os blobs verdes que brigavam com a imagem */
.char-arena.clima-verde::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,.5) 100%);
}
/* sombra "de chão" sob cada sprite — assenta o monstro na grama e disfarça o
   halo escuro do matte dos GIFs contra o fundo claro */
.char-arena.clima-verde .ar-unit::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 20%;
  background: radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.5), transparent 72%);
  z-index: -1; pointer-events: none;
}
/* ===== Vale das Primaveras — os 8 mapinhas, cada um com a própria arte (mesmo
   scrim/vinheta/sombra da .clima-verde acima — só troca a imagem). Regra
   .char-arena.map-<id> tem a MESMA especificidade de .clima-verde; por vir
   DEPOIS no arquivo, vence quando o elemento carrega as duas classes. ===== */
.char-arena.map-jardim {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_jardim.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-estrada {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_estrada.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-floresta {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_floresta.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-vale {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_vale.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-bamboo {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_bamboo.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-refugio {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_refugio.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-espiritos {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_espiritos.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-castelo {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8,14,6,.34) 0%, rgba(8,12,6,.55) 58%, rgba(4,8,3,.80) 100%),
    url("../img/maps/mapa_castelo.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}

/* Deserto de Kazan — fundo pixel-art gerado (PixelLab "high top-down", seed 44).
   Mesmo esquema da clima-verde: arte 320x320 escalada p/ 448 + scrim quente por cima. */
.char-arena.clima-deserto {
  border-color: #5a3f1c;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/arena_deserto.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.char-arena.clima-deserto .ar-cell { border-color: transparent; }
.char-arena.clima-deserto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,.5) 100%);
}
.char-arena.clima-deserto .ar-unit::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 20%;
  background: radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.5), transparent 72%);
  z-index: -1; pointer-events: none;
}
/* ===== Deserto de Kazan — os 8 mapinhas, cada um com a própria arte (mesmo scrim/
   vinheta/sombra da .clima-deserto acima). Vencem por especificidade igual + ordem
   depois no arquivo, igual ao esquema do Vale das Primaveras. ===== */
.char-arena.map-ruinen {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_ruinen.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-navisko {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_navisko.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-maldita {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_maldita.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-maltida {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_maltida.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-calabouco1 {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_calabouco1.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-esquecida {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_esquecida.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-acacias {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_acacias.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-calabouco2 {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(16,10,4,.34) 0%, rgba(14,9,4,.55) 58%, rgba(8,5,2,.80) 100%),
    url("../img/maps/mapa_calabouco2.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}

/* Abismo Cinéreo — fundo pixel-art gerado (PixelLab "high top-down", seed 27).
   A arte já nasce escura → scrim BEM mais leve que verde/deserto (só aprofunda a borda). */
.char-arena.clima-sombrio {
  border-color: #3a2f52;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/arena_sombrio.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.char-arena.clima-sombrio .ar-cell { border-color: transparent; }
.char-arena.clima-sombrio::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%);
}
.char-arena.clima-sombrio .ar-unit::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 20%;
  background: radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.55), transparent 72%);
  z-index: -1; pointer-events: none;
}
/* ===== Abismo Cinéreo — os 8 mapinhas, cada um com a própria arte (mesmo scrim
   leve/vinheta/sombra da .clima-sombrio acima). ===== */
.char-arena.map-calabouco3 {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_calabouco3.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-proibida {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_proibida.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-oasis {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_oasis.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-campo {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_campo.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-cavernabelhas {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_cavernabelhas.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-cavernacogumelos {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_cavernacogumelos.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-templo {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_templo.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.map-santuario {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,3,10,.14) 0%, rgba(4,3,10,.32) 60%, rgba(2,1,6,.60) 100%),
    url("../img/maps/mapa_santuario.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}

/* ===== MAPA-MÚNDI (5 continentes) ===== */
.world-map {
  position: relative; width: 100%; max-width: 480px; margin: 2px auto 0;
  aspect-ratio: 240 / 135; overflow: hidden;
  background: url("../img/maps/world_bg.png") center / 100% 100% no-repeat, #b09866;
  border: 3px solid #3a2613; border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px #6b5430;
  image-rendering: pixelated;
}
.world-cont {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 0; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; z-index: 2; transition: transform .1s;
}
.world-cont:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 4; }
.wc-flag { font-size: .95rem; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.wc-banner {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-size: .58rem; font-weight: 800; color: #3a2a12; white-space: nowrap;
  background: linear-gradient(180deg, #efe0bd, #d9c398);
  border: 1px solid #8a6b3e; border-radius: 3px; padding: 1px 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.wc-banner em { font-style: normal; font-size: .5rem; font-weight: 700; color: #6b5330; }
.world-cont.sel .wc-banner { border-color: #ffd600; box-shadow: 0 0 8px rgba(255,214,0,.7); }
.world-cont.locked { cursor: not-allowed; }
.world-cont.locked .wc-banner { color: #7a7060; background: linear-gradient(180deg, #cfc6b4, #b6ac96); border-color: #6a6252; }
.world-cont.locked .wc-flag { filter: grayscale(1) drop-shadow(1px 1px 0 rgba(0,0,0,.5)); opacity: .85; }
.world-hint {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  font-size: .56rem; color: #fff3d6; text-shadow: 1px 1px 0 #000; z-index: 3; pointer-events: none;
}
/* pontos de fase = bandeirinha fincada no chão da trilha */
.mini-node {
  position: absolute; transform: translate(-50%, -88%);
  background: none; border: none; margin: 0; padding: 0; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; z-index: 2;
  transition: transform .1s;
}
.node-pin { position: relative; display: block; width: 20px; height: 34px; }
.node-pole {
  position: absolute; left: 8px; top: 0; width: 3px; height: 32px;
  background: linear-gradient(#f2e4c2, #8a6b3e);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.node-flag {
  position: absolute; left: 11px; top: 1px; width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 15px solid #c8402f;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6));
  transform-origin: left center; animation: nodeWave 1.9s ease-in-out infinite;
}
.node-base {
  position: absolute; left: 2px; bottom: -2px; width: 18px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, #8a6636, #3e2b12);
  box-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.node-tag {
  position: absolute; left: 21px; bottom: -2px; white-space: nowrap;
  font-size: .5rem; font-weight: 800; line-height: 1; color: #fff3d6;
  padding: 1px 5px; border-radius: 3px; background: rgba(28,16,6,.82);
  text-shadow: 1px 1px 0 #000;
}
.mini-node.tag-left .node-tag { left: auto; right: 12px; }
@keyframes nodeWave { 0%,100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.82); } }
.mini-node:hover { transform: translate(-50%, -88%) scale(1.16); z-index: 4; }
.mini-node.current .node-flag { border-left-color: #4fd34f; }
.mini-node.current .node-pin { filter: drop-shadow(0 0 5px rgba(90,220,90,.9)); animation: nodeGlowG 1.4s ease-in-out infinite; }
.mini-node.current .node-tag { color: #b6ffb0; }
.mini-node.selected .node-flag { border-left-color: #ffd600; }
.mini-node.selected .node-pin { filter: drop-shadow(0 0 6px rgba(255,214,0,.95)); }
.mini-node.selected .node-tag { color: #ffd600; background: rgba(58,42,8,.9); }
.mini-node.boss { transform: translate(-50%, -88%) scale(1.28); }
.mini-node.boss:hover { transform: translate(-50%, -88%) scale(1.42); }
.mini-node.boss .node-flag { border-left-color: #ff3524; border-top-width: 6px; border-bottom-width: 6px; border-left-width: 13px; }
.mini-node.boss .node-pin { filter: drop-shadow(0 0 7px rgba(255,60,30,.95)); animation: nodeGlowR 1.5s ease-in-out infinite; }
.mini-node.boss .node-tag { color: #ffc9b0; }
@keyframes nodeGlowG { 0%,100% { filter: drop-shadow(0 0 3px rgba(90,220,90,.55)); } 50% { filter: drop-shadow(0 0 9px rgba(90,220,90,1)); } }
@keyframes nodeGlowR { 0%,100% { filter: drop-shadow(0 0 4px rgba(255,60,30,.55)); } 50% { filter: drop-shadow(0 0 11px rgba(255,80,40,1)); } }
.mini-map-legend {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-size: .6rem; color: #ffe9a8; text-shadow: 0 1px 2px #000; z-index: 3; pointer-events: none;
}
.mini-map-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.btn-auto { width: auto !important; height: auto !important; white-space: nowrap; }
.mini-map-hint { font-size: .64rem; color: var(--muted); min-width: 0; }
/* miniaturas dos monstros do mapa clicado */
.mini-mobs { margin-top: 10px; }
/* NPC com recolor (Valtor usa retrato do Magnus + hue-rotate) */
.npc-valtor { filter: hue-rotate(150deg) saturate(1.35) brightness(1.05); }
/* MERCADO DE VALTOR */
.mkt-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; margin-bottom: 6px; }
.mkt-sell { margin-bottom: 8px; }
.mkt-sell-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 78px auto;
  gap: 6px; align-items: center; min-width: 0;
}
.mkt-sell-row .cube-sel { min-width: 0; }
.mkt-sell-pick {
  min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  padding: 4px 7px; font-size: .7rem; font-weight: 800; height: 30px;
}
.mkt-sell-pick img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; flex: none; }
.mkt-sell-pick b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-sell-pick i { font-style: normal; font-weight: 400; }
.mkt-list { display: flex; flex-direction: column; gap: 5px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.mkt-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  border-left: 4px solid rgba(150,160,175,.5);
}
.mkt-item.r-raro { border-left-color: #6fb6ff; }
.mkt-item.r-épico { border-left-color: #c89bff; }
.mkt-item.r-lendario { border-left-color: #ffd600; }
.mkt-ico {
  width: 44px; height: 44px; flex: none; border-radius: 8px; cursor: help;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mkt-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mkt-ico.r-raro { border-color: rgba(80,160,255,.55); box-shadow: 0 0 6px rgba(80,160,255,.4); }
.mkt-ico.r-épico { border-color: rgba(170,110,255,.55); box-shadow: 0 0 7px rgba(170,110,255,.45); }
.mkt-ico.r-lendario { border-color: rgba(255,214,0,.6); box-shadow: 0 0 8px rgba(255,214,0,.5); }
.mkt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mkt-info b { font-size: .7rem; }
.mkt-info small { font-size: .56rem; color: var(--muted); }
.mkt-price { font-size: .78rem; color: #ffd600; font-weight: 800; white-space: nowrap; }
.mkt-item .btn { font-size: .6rem; padding: 3px 8px; }
.mkt-x { min-width: 26px; padding: 3px 7px !important; font-weight: 800; }
.mkt-buy { min-width: 30px; padding: 3px 8px !important; font-weight: 800; font-size: .78rem !important; }
.mkt-confirm-txt { font-size: .78rem; color: #ffe9a8; line-height: 1.5; margin-bottom: 10px; }
.mkt-confirm-txt b { color: #ffd600; }
.mkt-confirm-txt small { color: var(--muted); }
/* box de escolher quantidade (Ferreiro) */
.qty-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; flex-wrap: nowrap; }
.qty-row .btn { white-space: nowrap; flex: 0 0 auto; padding: 5px 8px; }
.qty-row .btn-blue { min-width: 64px; padding: 5px 14px; font-size: .8rem; }
.qty-total { text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.qty-total b { color: var(--gold); }
.qty-row input {
  width: 64px; background: var(--panel2); color: var(--text);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 6px 8px; font-size: .9rem; font-weight: 800; text-align: center;
}
#nickInp { width: 200px; text-align: left; }
/* selo "à venda" no seletor de personagem (continua jogável) */
.pick-sale {
  position: absolute; top: 2px; left: 2px; font-size: .5rem; font-weight: 800;
  background: rgba(0,0,0,.8); color: #ffd600; border: 1px solid rgba(255,214,0,.5);
  border-radius: 5px; padding: 1px 4px; font-style: normal;
}
.char-pick-item { position: relative; }
.char-portrait.big { position: relative; overflow: visible; }
.hero-portrait-info { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: #1a1a1a; border: 2px solid #ffd600; border-radius: 50%; cursor: help; z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hero-desc-popup { display: none; position: absolute; top: 30px; right: 0; width: 260px; background: #0f141f; border: 1px solid #ffd600; border-radius: 8px; padding: 10px 12px; font-size: .72rem; color: #e8e8e8; line-height: 1.4; z-index: 30; box-shadow: 0 4px 14px rgba(0,0,0,.7); }
.hero-portrait-info:hover .hero-desc-popup { display: block; }
.hero-name-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; background: #1a1a1a; border: 1.5px solid #ffd600; border-radius: 50%; cursor: help; vertical-align: middle; margin-left: 6px; }
.hero-name-info .hero-desc-popup { top: 22px; left: 50%; right: auto; transform: translateX(-50%); }
.hero-name-info:hover .hero-desc-popup { display: block; }
.hero-desc-popup b { display: block; color: #ffd600; font-size: .78rem; margin-bottom: 5px; }
.hero-desc-popup span { display: block; }
/* ícones dos equipados no tooltip de personagem */
.it-eq-row { margin-top: 5px; font-size: .66rem; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.it-eq-row b { color: #ffe9a8; }
.it-eq-ico {
  width: 28px; height: 28px; border-radius: 6px; overflow: hidden; cursor: help;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,214,0,.4);
  display: inline-flex; align-items: center; justify-content: center;
}
.it-eq-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.it-eq-ico span { font-size: .48rem; color: var(--muted); padding: 0 2px; }
.mkt-legend { margin-top: 6px; }
.mkt-legend small { font-size: .6rem; color: var(--muted); }
/* itens premium (5 slots pequenos, tooltip no hover) */
.premium-row { margin-top: 10px; }
.premium-row label { font-size: .68rem; font-weight: 800; color: #ffd6a8; display: block; margin-bottom: 4px; }
.premium-grid { display: grid; grid-template-columns: repeat(5, 34px); gap: 5px; }
.premium-slot {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: rgba(255,214,0,.04); border: 1px dashed rgba(255,214,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.premium-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.premium-slot span { font-size: .9rem; opacity: .35; }
.premium-slot.empty { cursor: default; }
.premium-slot { cursor: help; }
.it-premium-time { margin-top: 5px; font-size: .7rem; color: #ffe9a8; font-weight: 800; }
.it-premium-time b { color: #ffd600; }
.it-premium-time .muted { color: var(--muted); font-weight: 600; }
.premium-desc { font-size: .66rem; color: var(--muted); margin-top: 3px; }
/* PRAÇA DA CIDADE (hub de NPCs) — box fixa, tamanho do Ferreiro */
#panelCidade { padding: 14px; }
.cidade-box {
  position: relative; width: 100%; aspect-ratio: 11 / 9; min-height: 160px; overflow: hidden;
  background: #14100c; border: 3px solid #3a2613; border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 0 0 2px #6b5430;
}
#panelCidade.flash { outline: 2px solid #4d9fff; }
/* a arte da praça tem a MESMA proporção da box → object-fit:fill mostra tudo, sem cortar,
   e as posições % dos NPCs batem com o desenho */
.cidade-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; image-rendering: pixelated; }
.cidade-node {
  position: absolute; transform: translate(-50%, -100%);
  width: 16%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; padding: 0;
}
.cidade-node.node-wide { width: 27%; }
.cidade-npc {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; object-position: bottom; image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5));
  transition: transform .12s, filter .12s;
  transform-origin: 50% 100%;
}
.cidade-npc.cidade-npc-wide { aspect-ratio: 1 / 1; }
/* Retrato estático no cabeçalho do painel: recorta o busto da arte de corpo inteiro */
.npc-still { object-fit: cover !important; object-position: top center !important; }
.cidade-ico { font-size: 2rem; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5)); }
.cidade-node b {
  font-size: .56rem; font-weight: 800; color: #fff7df; text-shadow: 1px 1px 0 #000;
  background: rgba(10,13,18,.62); padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.cidade-node:hover .cidade-npc { transform: scale(1.08); filter: drop-shadow(3px 4px 0 rgba(0,0,0,.6)) brightness(1.12); }
.cidade-node.sel .cidade-npc { outline: 2px solid #ffd600; border-radius: 8px; box-shadow: 0 0 12px rgba(255,214,0,.6); }
.cidade-node.sel b { color: #ffd600; border-color: #ffd600; }
.cidade-mv {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  font-size: .8rem; font-weight: 800; color: #ffd600;
  background: rgba(10,13,18,.9); border: 1px solid rgba(255,214,0,.55);
  border-radius: 6px; padding: 0 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; z-index: 5;
}
.cidade-mv:hover { background: rgba(255,214,0,.25); }
.cidade-tip {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-size: .62rem; color: #ffe9a8; text-shadow: 0 1px 2px #000; z-index: 4; pointer-events: none;
}
body.rearrange-on .cidade-node { cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
/* modo reorganizar (só a praça — setas ◄► p/ trocar a posição dos NPCs) */
.up-panel { position: relative; }
.btn.rz-active { background: #2563eb; color: #fff; }
/* item dropado NA ARENA (clicar p/ pegar) */
.ar-drop {
  position: absolute; width: 40px; height: 40px; z-index: 8;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; pointer-events: auto !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.65));
  -webkit-tap-highlight-color: transparent;
}
.ar-drop img, .ar-drop .drop-aura { pointer-events: none !important; }
.ar-drop .drop-img {
  width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
  animation: dropBob 1.2s ease-in-out infinite;
}
@keyframes dropBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ar-drop:hover .drop-img { filter: brightness(1.35); }
/* aura pulsando ao redor do item (só RARO+) */
.ar-drop .drop-aura {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--aura, rgba(255,255,255,.55)) 0%, transparent 70%);
  filter: blur(3px); opacity: .8;
  animation: auraPulse 1.3s ease-in-out infinite;
}
@keyframes auraPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.12); }
}
.ar-drop.r-raro { --aura: rgba(80,160,255,.9); }
.ar-drop.r-epico { --aura: rgba(190,120,255,.95); }
.ar-drop.r-lendario { --aura: rgba(255,214,0,1); }
.ar-drop.expiring { transition: opacity 1s ease; opacity: 0; }

/* PACOTE DE OURO na arena (moeda que brilha, 1 clique pega — 15s no chão) */
.ar-coin {
  position: absolute; width: 20px; height: 20px; z-index: 9;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; pointer-events: auto !important; -webkit-tap-highlight-color: transparent;
  display: grid; place-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: coinBob 1.1s ease-in-out infinite;
}
.ar-coin > * { pointer-events: none; }
.ar-coin .coin-face { font-size: 15px; line-height: 1; position: relative; z-index: 2; }
.ar-coin .coin-shine {
  position: absolute; inset: -6px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(255,224,120,.95) 0%, rgba(255,196,0,.35) 45%, transparent 72%);
  filter: blur(2px);
  animation: coinShine 1.15s ease-in-out infinite;
}
.ar-coin .coin-amt {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe27a;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255,196,0,.8); white-space: nowrap; z-index: 3;
}
.ar-coin:hover { filter: drop-shadow(0 0 8px rgba(255,214,0,.9)) brightness(1.15); }
.ar-coin.expiring { transition: opacity .8s ease; opacity: 0; }
.ar-coin.coin-got { animation: coinGot .26s ease-out forwards; }
@keyframes coinBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes coinShine { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes coinGot { to { transform: translateY(-26px) scale(.4); opacity: 0; } }
/* ============================================================ */
/* ===== PAINEL KAELEN — visual MMORPG (Cubo de Síntese) ====== */
/* ============================================================ */
#panelCubo {
  background:
    linear-gradient(180deg, rgba(240,180,0,.05), transparent 110px),
    var(--panel);
}
.cube-header {
  display: flex; gap: 10px; align-items: center;
  border: 2px solid rgba(240,180,0,.35);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(240,180,0,.10), rgba(0,0,0,.15));
  padding: 8px 10px; margin-bottom: 8px;
}
.cube-portrait {
  width: 56px; height: 56px; flex: none; object-fit: contain; image-rendering: pixelated;
  border: 2px solid rgba(240,180,0,.5); border-radius: 6px; background: #0a0d12;
  filter: drop-shadow(0 0 6px rgba(160,120,255,.4));
}
.cube-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cube-name { font-weight: 800; font-size: .98rem; color: var(--text); }
.cube-role { font-size: .56rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cube-wallet { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.ck-chip {
  font-size: .64rem; font-weight: 800; color: var(--muted);
  background: var(--panel2); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 2px 6px; cursor: default;
}
.ck-chip.ck-gold { border-color: rgba(240,180,0,.4); color: #ffd76a; }
.cube-tabs { margin-bottom: 8px; }
#panelCubo .cs-section .cube-board { margin-bottom: 4px; }
#panelCubo .cs-section .up-sub { margin-top: 0; margin-bottom: 6px; }
#panelCubo .cube-info { margin-top: 6px; margin-bottom: 0; }
#panelCubo .cube-meta { margin-bottom: 0; }
#panelCubo .cs-actionbar { gap: 8px; margin-top: 0; }
#panelCubo .cs-actionbar .btn-primary { width: 100%; }
#panelCubo .cube-confirm { margin-bottom: 0; }
.cube-rules { margin-top: 8px; display: block; }

/* painel CUBO DE SÍNTESE (Kaelen) */
.cube-face { width: 64px; height: 64px; }
.cube-tip { display: flex; flex-direction: column; gap: 4px; }
.cube-board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cube-row { display: flex; gap: 6px; justify-content: center; }
.cube-row.mid { align-items: center; }
.cube-slot {
  position: relative; width: 64px; height: 64px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.16);
  border-radius: 10px; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cube-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cube-slot span { font-size: .55rem; color: var(--muted); text-align: center; padding: 0 2px; }
.cube-slot .cube-slot-plus { font-size: 1.1rem; font-weight: 800; color: rgba(255,255,255,.25); }
.cube-slot .cube-slot-x {
  position: absolute; top: 1px; right: 1px; font-size: .5rem; font-style: normal;
  background: rgba(0,0,0,.7); color: #ff8a8a; border-radius: 4px; padding: 1px 3px; z-index: 3;
}
.cube-slot.drag-over { border-color: #4d9fff; box-shadow: 0 0 10px rgba(77,159,255,.6); }
.cube-slot:hover { border-color: rgba(255,255,255,.4); }
.cube-slot.center { border: 1px solid rgba(255,214,0,.45); }
.cube-slot.center:hover { border-color: #ffd600; box-shadow: 0 0 10px rgba(255,214,0,.45); }
.stone-name { font-size: .46rem; color: #ffd600; font-weight: 800; }
/* ícone da pedra no pino central (mesma imagem do inventário) */
.stone-img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
/* preview da pedra a usar (preto e branco / desaturada) */
.stone-img.stone-preview { filter: grayscale(1) brightness(.85); opacity: .75; }
/* overlay de síntese (barra "sintetizando...") */
.synth-progress {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
}
.synth-box {
  background: var(--panel); border: 2px solid var(--gold); border-radius: 12px; padding: 20px 30px;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.7); min-width: 240px;
}
.synth-ico { font-size: 2rem; margin-bottom: 6px; }
.synth-txt { font-weight: 800; color: var(--text); margin-bottom: 12px; }
.synth-bar { height: 12px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
.synth-bar i {
  display: block; height: 100%; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, #d89a00, #ffe066); animation: synthFill 1.5s ease-in-out forwards;
}
@keyframes synthFill { from { width: 0; } to { width: 100%; } }
/* efeito de borda no item resultado (imersão no sucesso) */
.cube-pop.ok .item-preview { animation: synthItemGlow 1s ease-in-out infinite; }
@keyframes synthItemGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,214,0,.5), inset 0 0 0 2px rgba(255,214,0,.6); }
  50% { box-shadow: 0 0 24px rgba(255,214,0,1), inset 0 0 0 3px rgba(255,230,120,1); }
}
/* prévia do item na síntese bem-sucedida */
.item-preview {
  border: 2px solid var(--gold); border-radius: 12px; padding: 12px 18px; text-align: center;
  background: rgba(10,13,18,.75); min-width: 220px; margin: 4px auto 0;
}
.item-preview .ip-img { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; margin: 4px auto; }
.item-preview .ip-name { font-weight: 800; color: var(--text); font-size: 1rem; }
.item-preview .ip-line { font-size: .72rem; color: #c9b8ff; margin-top: 3px; }
.item-preview .ip-stats { margin-top: 8px; font-size: .72rem; color: var(--text); line-height: 1.5; display: inline-block; text-align: left; }
/* config do Pity no Kaelen */
.cube-tune { margin-top: 10px; }
.cube-tune .up-sub { margin-bottom: 4px; }
.cube-tune-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .68rem; font-weight: 800; color: var(--muted); }
.cube-tune-row input {
  width: 52px; background: var(--panel2); color: var(--text);
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 4px 6px; font-size: .8rem; font-weight: 800; text-align: center;
}
.stone-glow { font-size: 1.2rem; filter: drop-shadow(0 0 5px rgba(255,214,0,.8)); animation: borderGlowLend 1.4s ease-in-out infinite; }
.cube-pincer { position: relative; display: flex; align-items: center; justify-content: center; }
.cube-stone-pick {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 4px; z-index: 50;
  background: var(--panel); border: 1px solid rgba(255,214,0,.5); border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); width: 150px;
}
.cube-stone-pick.open { display: flex; }
.cube-sp-btn {
  padding: 4px 8px; border-radius: 8px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 700; font-size: .62rem;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--text);
}
.cube-sp-btn.sel { border-color: #ffd600; color: #ffd600; }
/* mini-inventário de Pedras de Síntese (no Kaelen) */
.cube-stones { margin-top: 10px; }
.cube-stones .up-sub { margin-bottom: 4px; }
.stone-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.stone-slot {
  display: inline-flex; align-items: center; gap: 4px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  font-size: .62rem; font-weight: 800; padding: 4px 8px; border-radius: 8px;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--muted);
}
.stone-slot em { font-style: normal; font-size: .55rem; opacity: .85; }
.stone-slot.sel { border-color: #ffd600; color: #ffd600; background: rgba(255,214,0,.08); box-shadow: 0 0 8px rgba(255,214,0,.35); }
.stone-slot:hover { border-color: var(--gold); }
.cube-sp-btn.nop { color: var(--muted); }
/* ===== FORJA DE FRAGMENTOS ===== */
.forge-frag-slot.empty { border-style: dashed; }
.forge-frag-slot { border-color: rgba(120,180,255,.35); }
.forge-frag-slot:not(.empty) { border-style: solid; border-color: rgba(120,180,255,.7); box-shadow: 0 0 8px rgba(90,140,220,.35) inset; }
.forge-stone-slot { border: 1px solid rgba(180,120,255,.5); }
.forge-stone-slot:hover { border-color: #c98bff; box-shadow: 0 0 10px rgba(180,120,255,.45); }
.forge-stone-slot .stone-img { width: 44px; height: 44px; }
.char-inv.forge .char-forge-item.dim { opacity: .32; filter: grayscale(.7); }
.char-inv.forge.forge-stone-inv .char-forge-item.selected { border-color: #c98bff; box-shadow: 0 0 9px rgba(180,120,255,.7); }
.char-inv.forge.forge-stone-inv .char-forge-item img { padding: 3px; }
.char-inv.forge .char-forge-item .char-stack-qty {
  position: absolute; right: 1px; bottom: 0; font-size: .5rem; font-weight: 800;
  color: #ffe066; text-shadow: 0 1px 2px #000;
}
.char-inv.forge .char-forge-item { position: relative; }
/* baú de fragmento no rail da caçada */
.loot-box.loot-box-frag { position: relative; border-color: #7fd08a; box-shadow: 0 0 7px rgba(110,210,150,.5); }
.loot-box-frag .chest-band {
  position: absolute; top: -4px; left: -4px; min-width: 13px; height: 13px; padding: 0 2px;
  border-radius: 7px; background: #1b6b3a; color: #eafff0; font-size: .5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35);
}
.loot-box-frag.frag-b1 { border-color: #8fbf7f; }
.loot-box-frag.frag-b2 { border-color: #6fc0d0; }
.loot-box-frag.frag-b3 { border-color: #6f9fe0; }
.loot-box-frag.frag-b4 { border-color: #b06bff; }
.loot-box-frag.frag-b5 { border-color: #ffd000; box-shadow: 0 0 10px rgba(255,208,0,.7); }
/* pedra de raridade no chão da arena */
.ar-drop.ar-stone .drop-aura { animation-duration: 1s; }
.ar-drop.ar-stone.stone-rara { --aura: rgba(80,160,255,.95); }
.ar-drop.ar-stone.stone-epica { --aura: rgba(190,120,255,.95); }
.ar-drop.ar-stone.stone-lendaria { --aura: rgba(255,214,0,1); }
/* personagem: abas ao lado (Status / Habilidades / Inventário) */
.char-layout { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start; }
.char-left { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.char-right { min-width: 0; }
.char-tabbar { display: flex; gap: 6px; margin-bottom: 8px; }
.char-tab {
  padding: 7px 12px; border-radius: 9px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800; font-size: .74rem;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--muted);
}
.char-tab.active { color: #ffd600; border-color: #ffd600; background: rgba(255,214,0,.08); box-shadow: 0 0 8px rgba(255,214,0,.25); }
.char-side { animation: fadeSlide .18s ease-out; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.char-inv-inside { padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(0,0,0,.15); }
.char-inv-inside.flash { outline: 2px solid #4d9fff; }
/* popup do resultado da síntese */
.cube-pop {
  position: fixed; inset: 0; margin: auto; width: max-content; height: max-content; max-width: 92vw;
  z-index: 600; background: linear-gradient(180deg, #2a2f1d, #0a0d12); border: 2px solid var(--gold);
  border-radius: 14px; padding: 20px 30px; text-align: center; opacity: 0;
  box-shadow: 0 0 40px rgba(255,214,0,.5), 0 12px 40px rgba(0,0,0,.7);
  transition: opacity .18s ease;
}
.cube-pop.show { opacity: 1; }
.cube-pop.fail { border-color: #ff6b6b; box-shadow: 0 0 40px rgba(255,107,107,.5), 0 12px 40px rgba(0,0,0,.7); }
.cube-pop-title { font-size: .8rem; font-weight: 800; letter-spacing: 1px; color: var(--gold); margin-bottom: 10px; }
.cube-pop.fail .cube-pop-title { color: #ff8a8a; }
.cube-pop-item img { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated; margin: 4px auto; }
.cube-pop-item b { display: block; font-size: .9rem; color: var(--text); }
.cube-pop-line { font-size: .68rem; color: #c9b8ff; margin-top: 3px; }
.cube-pop-fail { font-size: .76rem; color: #ffb0b0; font-weight: 700; margin-bottom: 10px; }
.cube-pop .btn-gold { margin-top: 10px; }

/* ===== AGING (Aldric) ===== */
.aging-face { border-color: #7b6bd8 !important; }
.aging-body { display: flex; flex-direction: column; gap: 7px; }
/* dropzone: arraste o item aqui */
.aging-drop {
  min-height: 64px; border: 2px dashed rgba(140,120,230,.5); border-radius: 8px;
  background: linear-gradient(180deg, rgba(123,107,216,.10), rgba(0,0,0,.2));
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; position: relative;
}
.aging-drop.drag-over { border-color: #9be27a; background: rgba(155,226,122,.12); }
.aging-drop.has { border-style: solid; }
.aging-drop-hint { font-size: 1rem; line-height: 1.4; color: var(--muted); text-align: center; width: 100%; pointer-events: none; }
.aging-drop-hint small { font-size: .72rem; opacity: .85; }
.aging-drop-img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; flex: none; }
.aging-drop-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aging-drop-info b { font-size: .82rem; }
.aging-drop-x { position: absolute; top: 4px; right: 6px; background: none; border: none; color: var(--muted); font-size: .8rem; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
.aging-drop-x:hover { color: #ff8a8a; }
.aging-arrow { font-size: .74rem; color: var(--muted); font-weight: 700; }
.aging-arrow .aging-lv { color: #c6bdf5; font-size: .92rem; }
.aging-arrow .aging-lv.next { color: #9be27a; }
.aging-max { font-size: .72rem; font-weight: 800; color: #ffd24a; }
/* (o mini-inventário do Aldric agora usa a Bolsa de seleção padrão — ver .pb-* / .iv-bag) */
.aging-bonus { font-size: .7rem; color: #cfe6ff; }
.aging-bonus b.up { color: #9be27a; }
.aging-bonus span { margin: 0 4px; }
/* aba 🏷 Spec do Kaelen: escolher a Pedra de Classe (1 por herói) */
.spec-cls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.spec-cls {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  border-radius: 8px; cursor: pointer; color: var(--text);
  background: var(--panel2); border: 2px solid transparent;
}
.spec-cls:hover { border-color: rgba(255,255,255,.18); }
.spec-cls.on { border-color: var(--gold); background: rgba(240,180,0,.12); }
.spec-cls.poor { opacity: .5; }
.spec-cls.cur { outline: 1px dashed rgba(255,255,255,.25); }
.spec-cls img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.spec-cls em { font-style: normal; font-size: .58rem; font-weight: 700; text-align: center; line-height: 1.1; }
.spec-cls b { font-size: .56rem; }
.spec-cls b.ok { color: #6ee7a0; }
.spec-cls b.no { color: #ff8a8a; }

/* tira de itens EQUIPADOS nos NPCs de serviço (Aldric/Kaelen): clicar tira do
   personagem e joga na bancada; no fim o item volta sozinho pra vaga de origem */
.eqs-strip {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; padding: 6px;
  background: #0a0d12; border: 1px solid var(--border); border-radius: 8px;
}
.eqs-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 52px;
  padding: 4px 3px; border-radius: 7px; cursor: pointer;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.10); color: var(--text);
}
.eqs-item:hover { border-color: var(--gold); background: rgba(240,180,0,.10); }
.eqs-item img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.eqs-emoji { font-size: 22px; line-height: 30px; }
.eqs-item em { font-style: normal; font-size: .54rem; font-weight: 700; text-align: center; line-height: 1.1; }
.aging-slots { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.aging-slot { position: relative; aspect-ratio: 1/1; border-radius: 5px; border: 1px solid rgba(255,255,255,.12);
  background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.aging-slot img { width: 84%; height: 84%; object-fit: contain; image-rendering: pixelated; }
.aging-slot.empty { color: var(--muted); font-size: .6rem; opacity: .35; }
.aging-slot.ok { border-color: rgba(122,222,122,.6); box-shadow: inset 0 0 0 1px rgba(122,222,122,.3); }
.aging-slot.miss { border-color: rgba(255,120,120,.6); box-shadow: inset 0 0 0 1px rgba(255,120,120,.3); }
.aging-slot-q { position: absolute; bottom: -3px; right: -3px; font-size: .5rem; font-weight: 800;
  background: rgba(0,0,0,.85); border-radius: 5px; padding: 0 3px; color: #9be27a; }
.aging-slot-q.no { color: #ff9a9a; }
.aging-reduce { display: flex; align-items: center; gap: 7px; font-size: .68rem; color: var(--text); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: rgba(40,170,160,.10); border: 1px solid rgba(40,170,160,.35); border-radius: 8px; padding: 6px 8px; }
.aging-reduce.off { opacity: .5; cursor: not-allowed; }
.aging-reduce input { accent-color: #28aaa0; width: 15px; height: 15px; flex: none; }
.aging-reduce img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; flex: none; }
.aging-reduce b { color: #7fe0d6; }
.aging-chance { font-size: .74rem; font-weight: 700; color: var(--text); }
.aging-chance b { font-size: .92rem; }
.aging-chance b.hi { color: #7ee07e; } .aging-chance b.mid { color: #ffd24a; } .aging-chance b.lo { color: #ff8a8a; }
.aging-cost { font-size: .74rem; font-weight: 700; color: #ffe0a0; }
.aging-cost.no { color: #ff8a8a; }
.aging-go { margin-top: 3px; }

/* pop de sucesso / falha do aging */
.aging-pop .aging-pop-burst { font-size: 2.6rem; animation: agingBurst .5s ease-out; }
.aging-pop.ok { border-color: #9be27a; box-shadow: 0 0 44px rgba(155,226,122,.5), 0 12px 40px rgba(0,0,0,.7); }
.aging-pop.ok .cube-pop-title { color: #b7f09a; text-shadow: 0 0 10px rgba(155,226,122,.7); }
@keyframes agingBurst { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.35) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.aging-pop.fail .aging-pop-burst { animation: agingShake .5s ease-in-out; }
@keyframes agingShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-6deg); } 50% { transform: translateX(9px) rotate(6deg); } 75% { transform: translateX(-5px); } }
.cube-info {
  font-size: .76rem; font-weight: 800; color: #9be2ff;
  background: rgba(77,159,255,.08); border: 1px solid rgba(77,159,255,.3);
  border-radius: 8px; padding: 6px 8px; margin-bottom: 6px;
}
.cube-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .66rem; color: var(--muted); margin-bottom: 8px; align-items: center; }
.cube-meta b { color: #ffd6a8; }
.cube-meta-title { font-weight: 800; color: var(--gold); }
.cube-meta-item { font-size: .66rem; }
.cube-meta-item .cm-r { font-weight: 800; }
.cube-confirm { display: flex; gap: 6px; align-items: center; font-size: .66rem; color: var(--muted); margin-bottom: 8px; }
/* ===== Kaelen: aba Mutação (roleta) ===== */
.mut-stone-cnt {
  position: absolute; right: 2px; bottom: 2px; font-size: .66rem; font-weight: 800;
  padding: 0 4px; border-radius: 5px; background: rgba(0,0,0,.82); line-height: 1.4;
}
.mut-stone-cnt.ok { color: #8ce08c; }
.mut-stone-cnt.no { color: #ff9a9a; }
#btnMutar { background: linear-gradient(180deg, #7a45c0, #5a2f9f); border-color: #8f5cd0; }
#btnMutar:hover:not(:disabled) { filter: brightness(1.15); }
/* Pedra de Afinidade (checkbox opcional na Mutação) */
.mut-affinity {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 2px;
  font-size: .68rem; color: var(--text); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: rgba(40,170,160,.10); border: 1px solid rgba(40,170,160,.35);
  border-radius: 8px; padding: 6px 8px;
}
.mut-affinity.off { opacity: .5; cursor: not-allowed; }
.mut-affinity input { accent-color: #28aaa0; width: 15px; height: 15px; flex: none; }
.mut-aff-ico { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; flex: none; }
.mut-affinity i { color: var(--muted); font-style: normal; }
.cube-result { font-size: .78rem; font-weight: 800; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.cube-result.ok { color: #8ce08c; background: rgba(122,222,122,.1); border: 1px solid rgba(122,222,122,.4); animation: resultGlow 1s ease-in-out infinite; }
.cube-result.fail { color: #ff8a8a; background: rgba(255,120,120,.08); border: 1px solid rgba(255,120,120,.4); animation: cubeShake .5s ease-in-out; }
.cube-result-line { font-size: .7rem; color: #ffe9a8; margin-top: 3px; }
@keyframes cubeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
/* painel LOJA DO MAGNUS */
.loja-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.loja-npc { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.loja-npc b { font-size: .72rem; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.loja-face {
  width: 74px; height: 74px; object-fit: contain; image-rendering: pixelated;
  border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,214,0,.35);
}
.loja-denari { font-size: .95rem; font-weight: 800; color: #ffe9a8; }
.loja-denari b { color: #ffd600; font-size: 1.1rem; }
.loja-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.loja-tab {
  flex: 1; padding: 6px 4px; border-radius: 8px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800; font-size: .7rem;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--muted);
}
.loja-tab.active { color: #ffd600; border-color: #ffd600; background: rgba(255,214,0,.08); }
.loja-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); grid-auto-rows: 1fr; gap: 6px;
  max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.loja-grid::-webkit-scrollbar { width: 8px; }
.loja-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; }
.loja-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 8px 6px 8px; height: 100%;
}
.loja-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.loja-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.loja-ico { font-size: 1.8rem; }
.loja-name { font-size: .68rem; font-weight: 800; text-align: center; line-height: 1.1; min-height: 2.1em; }
.loja-desc { font-size: .58rem; color: var(--muted); text-align: center; line-height: 1.2; min-height: 3.4em; }
.loja-owned { font-size: .58rem; color: #7fd27f; font-weight: 800; min-height: 1em; }
.loja-actions { display: flex; gap: 4px; margin-top: auto; }
.loja-buy { padding: 4px 10px; font-size: .72rem; font-weight: 800; background: linear-gradient(135deg, #d89a00, #f0b400); border-radius: 8px; }
.loja-buy:disabled { opacity: .45; cursor: not-allowed; }
.loja-use { padding: 4px 8px; font-size: .62rem; }
/* painel Fundição (joia no slot de gravação) */
.fund-face { border-radius: 10px; }
.fund-grid { margin-bottom: 8px; }
.fund-grid .up-sub { margin-top: 4px; }
.fund-sel {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 6px 8px; font-size: .76rem; font-weight: 700;
}
/* inventário de joias em grade (quadradinhos, estilo inventário) */
.fund-joia-grid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 5px; }
.fund-slot {
  position: relative; width: 40px; height: 40px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.14);
  border-radius: 8px; padding: 0; overflow: hidden;
}
.fund-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.fund-slot-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.2rem; }
.fund-slot.empty { opacity: .65; }
.fund-slot.sel { border: 1px solid #ffd600; box-shadow: 0 0 8px rgba(255,214,0,.5); }
.fund-slot-qty {
  position: absolute; right: 1px; bottom: 1px; font-size: .5rem; font-weight: 800;
  background: rgba(0,0,0,.75); color: #ffd600; padding: 1px 3px; border-radius: 4px;
}
/* seletor de moeda na loja */
.loja-cur { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: .68rem; color: var(--muted); font-weight: 700; }
.loja-cur-btn {
  padding: 4px 10px; border-radius: 8px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800; font-size: .7rem;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--muted);
}
.loja-cur-btn.active { color: #ffd600; border-color: #ffd600; background: rgba(255,214,0,.08); }
.loja-prices { font-size: .56rem; color: #cbb98a; font-weight: 800; }
.loja-premium-tag {
  display: inline-block; font-size: .52rem; font-weight: 800; color: #8fd0ff;
  border: 1px solid rgba(120,190,255,.4); background: rgba(120,190,255,.08);
  border-radius: 6px; padding: 1px 5px; margin-top: 2px;
}
.fund-preview { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.fund-pv-item, .fund-pv-jewel {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  font-size: .74rem; font-weight: 800;
}
.fund-pv-item img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.fund-pv-item.empty, .fund-pv-jewel.empty { color: var(--muted); opacity: .6; }
.fund-pv-jewel { font-size: 1.1rem; }
.fund-plus { font-size: 1rem; color: var(--gold); font-weight: 800; }
.fund-result { min-height: 20px; }
.fund-result-line { font-size: .76rem; color: #8ce08c; font-weight: 800; }
/* mini caçada: janela pequena flutuante (continua rodando de fundo) */
#panelHunt.hunt-mini {
  position: fixed; right: 12px; bottom: 12px; z-index: 600;
  width: 680px; max-height: 88vh; overflow-y: auto;
  border: 3px solid #3a2613; border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.65), inset 0 0 0 2px #6b5430;
  transform: scale(.46); transform-origin: bottom right;
  transition: transform .18s ease, right .18s ease, bottom .18s ease;
}
#panelHunt.hunt-mini h3 { position: sticky; top: 0; background: rgba(10,13,18,.95); z-index: 5; margin-top: 0; }
#panelHunt.hunt-mini .ar-scale9 { display: block; }
#panelHunt.hunt-mini::-webkit-scrollbar { width: 8px; }
/* abas de maletas (inventários 1..10) */
.kv-bar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; flex: 1; }
.kv-btn {
  min-width: 34px; padding: 5px 7px; border-radius: 8px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14);
  color: var(--muted); font-weight: 800; font-size: .68rem;
}
.kv-btn em { font-style: normal; font-size: .58rem; opacity: .8; }
.kv-btn.active { color: #ffd600; border-color: #ffd600; background: rgba(255,214,0,.08); box-shadow: 0 0 8px rgba(255,214,0,.3); }
.kv-btn.locked { opacity: .5; color: #8a94a0; cursor: not-allowed; }
.kv-btn.locked em { display: none; }
.inv-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; font-size: .66rem; color: var(--muted);
}
.inv-bottom b { color: #ffe9a8; font-weight: 800; }
/* layout geral do inventário */
.inv-summary { font-size: .6rem; color: var(--muted); font-weight: 700; margin-left: 6px; }
.inv-tools { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.inv-filters { display: flex; gap: 4px; flex-wrap: nowrap; }
.inv-filter {
  padding: 4px 7px; border-radius: 999px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800; font-size: .62rem;
  background: var(--panel2); border: 1px solid rgba(255,255,255,.14); color: var(--muted);
  white-space: nowrap; flex: 1 1 auto; text-align: center; min-width: 0;
}
.inv-filter em { font-style: normal; font-size: .56rem; opacity: .8; margin-left: 2px; }
.inv-filter.active { color: #ffd600; border-color: #ffd600; background: rgba(255,214,0,.08); }
.inv-filter.f-comum.active { color: #c6cdd8; border-color: #c6cdd8; }
.inv-filter.f-raro.active { color: #6fb6ff; border-color: #6fb6ff; }
.inv-filter.f-epico.active { color: #c89bff; border-color: #c89bff; }
.inv-filter.f-lendario.active { color: #ffd600; }
.inv-bag-head { display: flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.inv-fill { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; max-width: 220px; }
.inv-fill i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #4d9fff); border-radius: 6px; transition: width .2s; }
/* grade do inventário: 5x5 (25 itens) do slot ativo, centralizada */
.char-inv.inv-5x5 { grid-template-columns: repeat(5, 52px); grid-auto-rows: 52px; gap: 6px; justify-content: center; justify-items: center; width: 100%; }
.char-inv.inv-5x5 .char-inv-item { width: 52px; height: 52px; }
/* slots vazios: borda PONTILHADA */
.char-inv.inv-5x5 .char-inv-item.empty {
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.18);
  cursor: default;
}
.char-inv.inv-5x5 .char-inv-item.empty:hover { transform: none; border-color: rgba(255,255,255,.18); }
/* abas internas (parte de baixo, começo à esquerda): caixinha bem pequena, só o número */
.inv-abas { display: flex; gap: 4px; align-items: center; justify-content: flex-start; margin: 10px 0 6px; }
.inv-aba-label { font-size: .6rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-right: 3px; }
.inv-aba {
  width: 20px; height: 20px; border-radius: 5px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800;
  font-size: .6rem; background: #05070a; color: #fff; border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.inv-aba.active { border-color: #ffd600; color: #ffd600; background: rgba(255,214,0,.1); box-shadow: 0 0 8px rgba(255,214,0,.4); }
/* abas das maletas embaixo do inventário */
.inv-maletas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.inv-maletas-title { font-size: .66rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.inv-maletas .kv-bar { margin-bottom: 0; flex-wrap: nowrap; }
.inv-maletas .kv-btn { min-width: 26px; padding: 5px 6px; }
.char-inv-item .char-stack-qty {
  position: absolute; left: 2px; bottom: 2px; z-index: 3;
  font-size: .56rem; font-weight: 800; color: var(--gold);
  background: none; padding: 0 2px;
}
.mini-mobs label { display: block; font-size: .68rem; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.mini-mobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.mini-mob {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 4px 2px 3px;
}
.mini-mob img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.mini-mob span {
  font-size: .56rem; font-weight: 700; color: var(--muted);
  text-align: center; line-height: 1.1; max-width: 100%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ===== ESTÁBULO DO FOX (montarias / pets com nível e raridade) ===== */
/* moldura de madeira estilo estábulo: tábuas + pregos nos 4 cantos + trave */
.stable-frame {
  position: relative;
  border: 5px solid #4a2f16;
  border-radius: 6px;
  padding: 12px 12px 14px;
  background-image:
    radial-gradient(circle 3px at 9px 9px, #d9b25a 42%, #5a3d17 70%, transparent 74%),
    radial-gradient(circle 3px at calc(100% - 9px) 9px, #d9b25a 42%, #5a3d17 70%, transparent 74%),
    radial-gradient(circle 3px at 9px calc(100% - 9px), #d9b25a 42%, #5a3d17 70%, transparent 74%),
    radial-gradient(circle 3px at calc(100% - 9px) calc(100% - 9px), #d9b25a 42%, #5a3d17 70%, transparent 74%),
    repeating-linear-gradient(90deg, #3a2412 0 4px, #45301a 4px 8px),
    linear-gradient(180deg, #2c1c0e, #1d130a);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  box-shadow: inset 0 0 0 2px #6b4a26, inset 0 0 0 5px #241708, inset 0 0 26px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35);
  image-rendering: pixelated;
}
.stable-frame .up-sub { color: #e7c48a; }
.stable-frame .loja-face { border-color: #6b4a26; }

/* auras de raridade (atrás do sprite) */
.stable-aura { position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; z-index: 0; }
.r-comum    .stable-aura { background: radial-gradient(circle, rgba(180,190,200,.22), transparent 70%); }
.r-raro     .stable-aura { background: radial-gradient(circle, rgba(77,159,255,.5), transparent 68%); animation: stAura 1.9s ease-in-out infinite; }
.r-epico    .stable-aura { background: radial-gradient(circle, rgba(176,92,230,.55), transparent 68%); animation: stAura 1.6s ease-in-out infinite; }
.r-lendario .stable-aura { background: radial-gradient(circle, rgba(240,180,0,.62), transparent 66%); animation: stAura 1.25s ease-in-out infinite; }
@keyframes stAura { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }

/* montaria ativa */
.stable-active {
  display: flex; gap: 12px; align-items: center; margin: 4px 0 8px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px;
}
.stable-active.empty { display: block; color: var(--muted); font-size: .74rem; }
.stable-active.r-raro     { border-color: rgba(77,159,255,.4); }
.stable-active.r-epico    { border-color: rgba(176,92,230,.45); }
.stable-active.r-lendario { border-color: rgba(240,180,0,.5); box-shadow: 0 0 14px rgba(240,180,0,.18); }
.stable-mount {
  position: relative; flex: 0 0 auto; width: 76px; height: 76px;
  display: grid; place-items: center;
  background: #11151f; border: 2px solid rgba(255,255,255,.14); border-radius: 10px;
}
.stable-mount.r-raro     { border-color: #4d9fff; }
.stable-mount.r-epico    { border-color: #b05ce6; }
.stable-mount.r-lendario { border-color: #f0b400; }
.stable-mount img { position: relative; z-index: 1; width: 66px; height: 66px; object-fit: contain; image-rendering: pixelated; }
.stable-active-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stable-active-name { font-size: .82rem; font-weight: 800; color: var(--text); }
.stable-rar-tag, .stable-shop-rar.r-comum, .mount-sub {
  font-size: .58rem; font-weight: 800; padding: 0 4px; border-radius: 4px;
}
.stable-rar-tag.r-comum,   .mount-sub.r-comum    { color: #b9c0c9; }
.stable-rar-tag.r-raro,    .mount-sub.r-raro     { color: #7fbfff; }
.stable-rar-tag.r-epico,   .mount-sub.r-epico    { color: #cf9bff; }
.stable-rar-tag.r-lendario, .mount-sub.r-lendario { color: #ffd24a; }
.stable-lvl { font-size: .68rem; color: var(--muted); }
.stable-lvl b { color: var(--gold); }
.stable-lvl em { color: #ffd24a; font-style: normal; }
.stable-xpbar {
  position: relative; height: 12px; border-radius: 6px; overflow: hidden;
  background: #0a0d12; border: 1px solid rgba(255,255,255,.12);
}
.stable-xpbar i { position: absolute; inset: 0; background: linear-gradient(90deg, #6b4423, #d9a441); }
.stable-xpbar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .54rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000;
}
.stable-stats { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; }
.stable-stat { font-size: .6rem; font-weight: 700; color: #8ce0a0; }
.stable-desc { font-size: .58rem; color: var(--muted); }

/* grade de pets possuídos */
.stable-grid { display: grid; grid-template-columns: repeat(auto-fill, 60px); gap: 8px; margin: 4px 0 8px; }
.stable-slot {
  position: relative; width: 60px; height: 60px; display: grid; place-items: center;
  background: #11151f; border: 2px solid rgba(255,255,255,.14); border-radius: 10px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.stable-slot.r-raro     { border-color: rgba(77,159,255,.6); }
.stable-slot.r-epico    { border-color: rgba(176,92,230,.6); }
.stable-slot.r-lendario { border-color: rgba(240,180,0,.65); }
.stable-slot.active { outline: 2px solid #ffd600; outline-offset: 1px; box-shadow: 0 0 12px rgba(255,214,0,.5); }
.stable-slot img { position: relative; z-index: 1; width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.stable-slot-lv {
  position: absolute; left: 2px; bottom: 1px; z-index: 2;
  font-size: .5rem; font-weight: 800; color: #fff; background: rgba(10,13,18,.85);
  padding: 0 3px; border-radius: 4px;
}
.stable-slot-badge { position: absolute; right: -4px; top: -6px; z-index: 3; font-size: .8rem; filter: drop-shadow(0 1px 1px #000); }

/* adoção — 3 pets por linha */
.stable-shop { display: flex; flex-direction: column; gap: 10px; }
.stable-shop-rar { font-size: .62rem; font-weight: 800; margin-bottom: 4px; }
.stable-shop-rar small { color: var(--gold); font-weight: 700; }
.stable-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stable-buy {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #11151f; border: 2px solid rgba(255,255,255,.12); border-radius: 10px; padding: 5px 3px;
}
.stable-buy.r-raro     { border-color: rgba(77,159,255,.5); }
.stable-buy.r-epico    { border-color: rgba(176,92,230,.5); }
.stable-buy.r-lendario { border-color: rgba(240,180,0,.55); }
.stable-buy img { position: relative; z-index: 1; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.stable-buy-name { font-size: .5rem; font-weight: 700; color: var(--text); text-align: center; line-height: 1.05; min-height: 1.9em; }
.stable-buy-btns { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.stable-buy-btn { font-size: .52rem !important; padding: 3px 2px !important; width: 100%; letter-spacing: 0 !important; background: linear-gradient(135deg, #6b4423, #9c6b34); }
.stable-buy-btn.presa { background: linear-gradient(135deg, #2f5a3a, #4a8a5a); }

/* tooltip de prévia do pet (reusa #itemTooltip) */
.it-head.pet-tip .it-icon { width: 44px; height: 44px; display: grid; place-items: center; }
.it-head.pet-tip .it-icon img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }

/* popup de desbloqueio */
.stable-unlock { text-align: center; }
.stable-unlock-pet {
  position: relative; width: 110px; height: 110px; margin: 8px auto; display: grid; place-items: center;
  background: #11151f; border: 3px solid rgba(255,255,255,.16); border-radius: 12px;
}
.stable-unlock-pet.r-raro { border-color: #4d9fff; } .stable-unlock-pet.r-epico { border-color: #b05ce6; } .stable-unlock-pet.r-lendario { border-color: #f0b400; }
.stable-unlock-pet img { position: relative; z-index: 1; width: 92px; height: 92px; object-fit: contain; image-rendering: pixelated; }
.stable-unlock-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.stable-unlock-rar { font-size: .7rem; font-weight: 800; margin-bottom: 6px; }
.stable-unlock-rar.r-comum { color: #b9c0c9; } .stable-unlock-rar.r-raro { color: #7fbfff; } .stable-unlock-rar.r-epico { color: #cf9bff; } .stable-unlock-rar.r-lendario { color: #ffd24a; }

/* ===== POP-UP de LEVEL UP (centro da tela, durante a caçada) ===== */
.lvlup-pop {
  position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.7);
  z-index: 9998; pointer-events: none; text-align: center;
  min-width: 260px; padding: 18px 26px 16px;
  background: linear-gradient(160deg, #1c1330, #241a12);
  border: 2px solid #ffd24a; border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(255,210,74,.12), 0 20px 60px rgba(0,0,0,.55), inset 0 0 30px rgba(255,210,74,.08);
  opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.5,.4,1);
}
.lvlup-pop.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lvlup-pop-star { font-size: 2rem; line-height: 1; color: #ffd24a; text-shadow: 0 0 16px rgba(255,210,74,.8); animation: lvlPopStar 1s ease-in-out infinite alternate; }
@keyframes lvlPopStar { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
.lvlup-pop-title { font-family: 'Press Start 2P', monospace; font-size: .8rem; color: #ffe9a8; margin: 6px 0 2px; letter-spacing: 1px; }
.lvlup-pop-lv { font-size: 1.15rem; color: #fff; margin-bottom: 8px; }
.lvlup-pop-lv b { color: #ffd24a; font-size: 1.4rem; }

/* ===== aviso de patch (uma vez por versão — Painel Admin → Patch) ===== */
.patch-card {
  max-width: 440px; width: 100%; text-align: center; padding: 26px 28px 22px;
  background: linear-gradient(160deg, #1c1330, #241a12);
  border: 2px solid #ffd24a; border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(255,210,74,.12), 0 20px 60px rgba(0,0,0,.55), inset 0 0 30px rgba(255,210,74,.08);
}
.patch-badge { font-family: 'Press Start 2P', monospace; font-size: .68rem; color: #ffe9a8; letter-spacing: 2px; }
.patch-version { font-size: 1.5rem; font-weight: 900; color: #ffd24a; margin: 10px 0 4px; text-shadow: 0 0 16px rgba(255,210,74,.6); }
.patch-title { font-size: 1.05rem; color: #fff; font-weight: 800; margin-bottom: 12px; }
.patch-notes {
  color: #d8d0e6; font-size: .88rem; line-height: 1.6; text-align: left; white-space: pre-wrap;
  max-height: 40vh; overflow: auto; margin-bottom: 18px; padding: 0 4px;
}
.patch-ok {
  background: linear-gradient(135deg,#ffd24a,#ffb300); color: #241a12; border: none; border-radius: 10px;
  padding: 10px 26px; font-weight: 900; font-size: .9rem; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.patch-ok:hover { filter: brightness(1.08); }
.lvlup-pop-multi { font-size: .8rem; background: #ffd24a; color: #221; border-radius: 6px; padding: 1px 6px; font-weight: 900; vertical-align: middle; }
.lvlup-pop-rewards { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: #dfe6f0; margin-bottom: 6px; }
.lvlup-pop-hint { font-size: .64rem; color: #9aa5b1; }

/* ===== CLÃ dentro do jogo — selo acima do nick, etiqueta na caçada/boss e na
   Praça, e o pop-up de convite. Painel completo = página própria (cla.html). ===== */
/* bandeira: arte do PixelLab (img/clas/*.png); .clan-flag-fb é o pano colorido
   de reserva, que só aparece se a imagem faltar (ver clanFlagHtml em data_clans.js) */
.clan-flag { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; }
/* Bug reportado 2026-09-06: bandeira "gigante" na Praça — `.clan-flag` (flex) tinha o
   tamanho certo, mas a <img> dentro é item flex com min-width/min-height "auto" por
   padrão, que pro navegador vale o tamanho NATURAL da imagem (64×80) e vence o
   width:100%/height:100% quando o conteúdo intrínseco é maior que o container. */
.clan-flag img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; image-rendering: pixelated; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.clan-flag-fb {
  position: absolute; inset: 0; align-items: center; justify-content: center;
  border: 1px solid; border-radius: 3px; line-height: 1;
}

/* etiqueta do clã na ARENA (caçada e boss), logo ACIMA do nick.
   O .ar-nick fica em top:-16px (~14px de altura), então a etiqueta precisa
   terminar antes disso — daí o 18px, senão as duas se sobrepõem. */
.ar-clan {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 18px);
  display: flex; align-items: center; gap: 3px; white-space: nowrap; pointer-events: none;
  font-size: .58rem; font-weight: 800; color: #ffd24a; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  z-index: 6;
}

/* botões do pop-up de convite */
.cla-btn {
  border: none; border-radius: 8px; padding: 9px 16px; font-weight: 800; font-size: .82rem;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; color: var(--text); background: var(--panel2);
}
.cla-btn-gold { background: linear-gradient(135deg,#ffd24a,#ffb300); color: #241a12; }
.cla-btn-gold:hover { filter: brightness(1.08); }
.cla-danger { background: rgba(255,107,107,.16); color: #ff8a8a; }
.cla-danger:hover { background: rgba(255,107,107,.28); }
.cla-invite-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }

/* selo do clã acima do nick no hub (Personagem) */
.cla-hub-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800;
  color: var(--gold); margin-bottom: 3px; cursor: default;
}
.cla-hub-badge .clan-flag { border-radius: 2px; }

/* etiqueta de clã na Praça (acima do nick, abaixo da bolha de fala) */
.pz-clan-tag {
  position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800;
  color: #ffd24a; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none;
}

.lvlup-pop-hint b { color: #ffd24a; }
.attr-over { display: inline-block; font-size: .62rem; color: #ffb454; margin-left: 6px; }

/* aviso de PUNIÇÃO DE XP na caçada (nível acima do ideal do mapa) */
.ch-pen { margin: 4px 0 6px; padding: 6px 10px; border-radius: 8px; font-size: .74rem; line-height: 1.4; text-align: center; }
.ch-pen[hidden] { display: none; }
.ch-pen.warn { background: rgba(255,196,84,.12); border: 1px solid rgba(255,196,84,.4); color: #ffcf7a; }
.ch-pen.active { background: rgba(255,90,90,.14); border: 1px solid rgba(255,90,90,.5); color: #ff8f8f; animation: penPulse 1.6s ease-in-out infinite; }
.ch-pen b { color: #fff; }
@keyframes penPulse { 0%,100% { border-color: rgba(255,90,90,.5); } 50% { border-color: rgba(255,90,90,.95); box-shadow: 0 0 10px rgba(255,90,90,.3); } }

/* seção Montaria no painel do personagem */
.mount-row .mount-open { float: right; font-size: .55rem !important; padding: 2px 6px !important; background: linear-gradient(135deg, #6b4423, #9c6b34); }
.mount-card { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 6px; }
.mount-card.r-raro { border-color: rgba(77,159,255,.35); } .mount-card.r-epico { border-color: rgba(176,92,230,.4); } .mount-card.r-lendario { border-color: rgba(240,180,0,.45); }
.mount-ico { position: relative; flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; background: #11151f; border: 2px solid rgba(255,255,255,.14); border-radius: 8px; }
.mount-ico.r-raro { border-color: #4d9fff; } .mount-ico.r-epico { border-color: #b05ce6; } .mount-ico.r-lendario { border-color: #f0b400; }
.mount-ico img { position: relative; z-index: 1; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.mount-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mount-name { font-size: .7rem; font-weight: 800; color: var(--text); }
.mount-xp { height: 6px; border-radius: 3px; background: #0a0d12; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.mount-xp i { display: block; height: 100%; background: linear-gradient(90deg, #6b4423, #d9a441); }
.mount-stats { font-size: .55rem; color: #8ce0a0; font-weight: 700; }
.mount-empty { font-size: .66rem; color: var(--muted); }

/* montaria acompanhando o herói na arena */
.ar-mount { position: absolute; left: -22px; bottom: -6px; width: 30px; height: 30px; z-index: 4; pointer-events: none; overflow: visible; }
.ar-mount img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* aura da montaria REMOVIDA (pedido do usuário — "efeito quadrado do lado") */
.ar-mount-aura, .cs-pd-mount-aura, .stable-aura { display: none !important; }
.ar-mount-aura {
  position: absolute; left: 50%; top: 55%; width: 20px; height: 20px;
  transform: translate(-50%, -50%); border-radius: 50%; filter: blur(2px);
}
.ar-mount.r-comum .ar-mount-aura    { background: radial-gradient(circle, rgba(190,200,210,.12), transparent 60%); }
.ar-mount.r-raro .ar-mount-aura     { background: radial-gradient(circle, rgba(77,159,255,.28), transparent 62%); animation: arMountAura 2.6s ease-in-out infinite; }
.ar-mount.r-epico .ar-mount-aura    { background: radial-gradient(circle, rgba(176,92,230,.3), transparent 62%);  animation: arMountAura 2.3s ease-in-out infinite; }
.ar-mount.r-lendario .ar-mount-aura { background: radial-gradient(circle, rgba(240,180,0,.36), transparent 60%);  animation: arMountAura 1.9s ease-in-out infinite; }
@keyframes arMountAura {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.8); }
  50%      { opacity: .75; transform: translate(-50%, -50%) scale(1.05); }
}

/* ===== EFEITO DE LEVEL UP (arena + retrato) ===== */
.lvlup-fx { position: fixed; z-index: 400; pointer-events: none; transform: translate(-50%, -50%); }
.lvlup-ring {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; transform: translate(-50%, -50%);
  border: 3px solid #ffd54a; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 18px rgba(255,214,0,.9), inset 0 0 12px rgba(255,214,0,.6);
  animation: lvlupRing .9s ease-out forwards;
}
.lvlup-ring.d2 { animation-delay: .18s; border-color: #fff2b0; }
@keyframes lvlupRing {
  0%   { opacity: 1; width: 14px; height: 14px; }
  100% { opacity: 0; width: 120px; height: 120px; }
}
.lvlup-text {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace; font-size: .7rem; font-weight: 800;
  color: #fff3b0; text-shadow: 0 0 8px #ffb300, 2px 2px 0 #7a3b00; white-space: nowrap;
  animation: lvlupText 1.3s ease-out forwards;
}
@keyframes lvlupText {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, -18px) scale(1.1); }
  70%  { opacity: 1; transform: translate(-50%, -34px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
.lvlup-spark {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: #ffe36a; box-shadow: 0 0 6px #ffcf3a;
  animation: lvlupSpark .8s ease-out forwards;
}
@keyframes lvlupSpark {
  0%   { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
}
.char-portrait.lvlup-flash { animation: lvlupFlash .9s ease-out; }
@keyframes lvlupFlash {
  0%, 100% { box-shadow: 0 0 0 rgba(255,214,0,0); }
  30%      { box-shadow: 0 0 26px 6px rgba(255,214,0,.9); }
}

/* ===== GUIA (Amanda) ===== */
.guia-frame { display: flex; flex-direction: column; gap: 10px; }
.guia-head {
  display: flex; gap: 10px; align-items: center;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px;
}
.guia-face {
  width: 64px; height: 64px; flex: 0 0 auto; object-fit: cover; border-radius: 8px;
  border: 2px solid rgba(120,190,255,.4); image-rendering: pixelated;
}
.guia-hello { display: flex; flex-direction: column; gap: 3px; }
.guia-hello b { font-size: .85rem; color: #9cd0ff; }
.guia-hello span { font-size: .68rem; color: var(--muted); line-height: 1.3; }
.guia-links { display: flex; flex-wrap: wrap; gap: 5px; }
.guia-link {
  font-size: .62rem; font-weight: 700; padding: 5px 8px; border-radius: 7px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
}
.guia-link:hover { border-color: rgba(120,190,255,.5); }
.guia-link.active { background: rgba(120,190,255,.15); border-color: #4d9fff; color: #cfe6ff; }
.guia-body {
  background: #0c1017; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.guia-body-title { font-size: .9rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.guia-body-text p { font-size: .74rem; color: var(--text); line-height: 1.45; margin: 6px 0; }
.guia-body-text ul { margin: 6px 0 6px 4px; padding-left: 16px; }
.guia-body-text li { font-size: .72rem; color: var(--text); line-height: 1.5; margin: 3px 0; }
.guia-body-text b { color: #ffe9a8; }
.guia-body-text .g-hi { color: #8fd0ff; font-weight: 700; }
.guia-body-text .g-tag {
  font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 5px;
  border: 1px solid currentColor;
}
.guia-body-text .g-tag.r-comum { color: #b9c0c9; }
.guia-body-text .g-tag.r-raro { color: #7fbfff; }
.guia-body-text .g-tag.r-epico { color: #cf9bff; }
.guia-body-text .g-tag.r-lendario { color: #ffd24a; }

/* ===== MURAL DE MISSÕES (Roland) ===== */
.quest-frame {
  position: relative; border: 4px solid #4a3a24; border-radius: 6px; padding: 10px 10px 12px;
  background-image:
    radial-gradient(circle 2px at 8px 8px, #caa24a 45%, transparent 55%),
    radial-gradient(circle 2px at calc(100% - 8px) 8px, #caa24a 45%, transparent 55%),
    linear-gradient(180deg, #2a2114, #201a10);
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: inset 0 0 0 2px #6b5636, inset 0 0 22px rgba(0,0,0,.5);
}
.quest-frame .loja-face { border-color: #6b5636; }
.quest-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.quest-tab {
  font-size: .62rem; font-weight: 800; padding: 5px 9px; border-radius: 7px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
}
.quest-tab:hover { border-color: var(--qc); }
.quest-tab.active { background: rgba(255,255,255,.09); border-color: var(--qc); color: #fff; box-shadow: inset 0 -2px 0 var(--qc); }
.quest-list { display: flex; flex-direction: column; gap: 8px; }
.q-empty { font-size: .72rem; color: var(--muted); padding: 8px; text-align: center; }

.q-card {
  position: relative; display: flex; gap: 0; overflow: hidden;
  background: #12161f; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
}
.q-card.is-active { border-color: rgba(255,214,74,.4); }
.q-card.is-complete { border-color: rgba(120,220,120,.6); box-shadow: 0 0 10px rgba(120,220,120,.2); }
.q-stripe { flex: 0 0 5px; }
.q-main { flex: 1 1 auto; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.q-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.q-ico { font-size: 1rem; }
.q-title { font-size: .8rem; font-weight: 800; color: var(--text); }
.q-chip { font-size: .55rem; font-weight: 800; padding: 1px 5px; border: 1px solid; border-radius: 5px; }
.q-desc { font-size: .64rem; font-style: italic; color: var(--muted); line-height: 1.35; margin: 0; }
.q-line { font-size: .68rem; color: var(--text); line-height: 1.3; }
.q-line b { color: #ffe9a8; }
.q-rew b { color: #ffd24a; }
.q-prog {
  position: relative; height: 13px; border-radius: 7px; overflow: hidden;
  background: #0a0d12; border: 1px solid rgba(255,255,255,.1); margin-top: 2px;
}
.q-prog i { position: absolute; inset: 0; background: linear-gradient(90deg, #6b4423, #d9a441); transition: width .3s; }
.q-prog span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .54rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000;
}
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.q-foot-actions { display: flex; align-items: center; gap: 6px; }
.q-reset { color: var(--muted); font-size: .58rem; }
.q-reload {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  font-size: .82rem; line-height: 1; font-weight: 800;
  background: linear-gradient(135deg, #2f5a3a, #4a8a5a); color: #eafff0;
  border: 1px solid rgba(255,255,255,.15);
}
.q-reload:disabled { background: #2a3128; color: #5f6a5a; cursor: not-allowed; opacity: .7; }
.q-reload.ready { animation: qReload 1.4s ease-in-out infinite; }
@keyframes qReload { 0%,100% { box-shadow: 0 0 0 rgba(120,220,120,0); } 50% { box-shadow: 0 0 8px rgba(120,220,120,.75); } }
.q-reload:not(:disabled):hover { filter: brightness(1.15); }
.q-btn { font-size: .58rem !important; padding: 4px 8px !important; }
.q-btn.q-take { background: linear-gradient(135deg, #2f5a3a, #4a8a5a); }
.q-btn.q-claim { background: linear-gradient(135deg, #d89a00, #f0b400); }
.q-btn.q-abandon { background: linear-gradient(135deg, #7a2f2f, #a94444); }
.q-state { font-size: .58rem; font-weight: 800; padding: 3px 7px; border-radius: 5px; }
.q-state.active { color: #ffd24a; }
.q-state.done { color: #8ce0a0; }
.q-state.full { color: #ff9a5b; }

/* missões ativas dentro da Caçada — recolhível via 📖 no HUD */
.up-panel-hunt .char-hud { flex-wrap: wrap; align-items: center; }
/* botão MISSÕES — marrom com borda dourada de luxo */
.chq-toggle {
  margin-left: auto; padding: 5px 12px !important; font-size: .66rem !important;
  font-weight: 800; letter-spacing: .3px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; line-height: 1.3;
  color: #ffe9c4;
  background: linear-gradient(180deg, #5a3a1e, #3b2512);
  border: 2px solid #d9a441 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px #2a1a0c, inset 0 0 8px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4);
  text-shadow: 0 1px 2px #000;
}
.chq-toggle b { color: #ffd24a; margin-left: 2px; }
.chq-toggle:hover { filter: brightness(1.12); border-color: #ffe08a !important; }
.chq-toggle:active { transform: translateY(1px); }
.chq-toggle.hidden { display: none; }
.chq-toggle.has-done { animation: chqDone 1s ease-in-out infinite; }
@keyframes chqDone {
  0%,100% { box-shadow: 0 0 0 1px #2a1a0c, inset 0 0 8px rgba(0,0,0,.5); }
  50%     { box-shadow: 0 0 12px rgba(140,224,160,.85), inset 0 0 8px rgba(0,0,0,.5); border-color: #8ce0a0 !important; }
}
.chq-panel {
  background: #0c1017; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; margin: 4px 0 8px;
}
.chq-panel.collapsed { display: none; }
.chq-panel.idle { margin: 8px 0; }
/* missões ativas coladas ao mini mapa */
.chq-panel.idle.map {
  margin: 6px 0 0; border-radius: 0 0 8px 8px; border-top: none;
  background: linear-gradient(180deg, #171b12, #0c1017);
  border-color: #3a2613;
}
.chq-panel.idle.map .chq-title { color: #e7c48a; }
.chq-title { font-size: .6rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.chq-none { font-size: .64rem; color: var(--muted); }
.chq-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.chq-row.done { opacity: .75; }
.chq-ico { font-size: .85rem; flex: 0 0 auto; }
.chq-info { flex: 1 1 auto; min-width: 0; }
.chq-info b { font-size: .64rem; font-weight: 700; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chq-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 2px; }
.chq-bar i { display: block; height: 100%; transition: width .3s; }
.chq-num { font-size: .58rem; font-weight: 800; color: #ffe9a8; flex: 0 0 auto; }

/* ============================================================ */
/* ===== CHEFE DE CONTINENTE (Vorthak) + RELÍQUIAS ============== */
/* ============================================================ */

/* --- ícone do boss no canto da região --- */
.boss-node {
  position: absolute; right: 2.5%; bottom: 5%; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; padding: 0;
}
.boss-node .boss-fly {
  width: 70px; height: 70px; object-fit: contain; image-rendering: auto;
  filter: drop-shadow(0 0 10px rgba(255,90,30,.75)) drop-shadow(0 4px 6px rgba(0,0,0,.6));
  animation: bossFly 2.6s ease-in-out infinite;
}
@keyframes bossFly { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.04); } }
.boss-node-tag {
  font-size: .52rem; font-weight: 800; letter-spacing: .5px; color: #ffdca8;
  background: rgba(20,6,4,.85); border: 1px solid rgba(255,120,60,.55); border-radius: 5px;
  padding: 2px 6px; white-space: nowrap;
}
.boss-node:hover .boss-fly { filter: drop-shadow(0 0 16px rgba(255,120,50,1)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.boss-node.cleared .boss-fly { filter: grayscale(.4) drop-shadow(0 0 8px rgba(255,214,0,.6)); }
.boss-node.soon {
  right: 2.5%; bottom: 5%; opacity: .55; cursor: not-allowed;
}
.boss-node.soon .boss-node-ico { font-size: 2rem; filter: grayscale(1); }
/* nível insuficiente pra enfrentar o chefe (BOSS_DEFS[k].minLevel) — continua clicável
   (o toast explica o nível que falta), só avisa visualmente */
.boss-node.locked .boss-fly { filter: grayscale(.85) brightness(.6); }
.boss-node.locked .boss-node-tag { color: #b8afa0; border-color: rgba(180,170,150,.5); }
/* mesma ideia pras bandeiras de mapa (mini-node) — PC.get().level < m.min */
.mini-node.locked { opacity: .55; filter: grayscale(.7); }
.mini-node.locked .node-tag { color: #b8afa0; }

/* --- arena "cativeiro" --- */
/* Arena do boss Vorthak — coliseu em chamas gerado (PixelLab "high top-down", seed 44).
   Scrim quente leve (a arte já é escura). Correntes/algemas do cativeiro REMOVIDAS. */
.char-arena.clima-cativeiro {
  border-color: #5a3325;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(12,5,3,.12) 0%, rgba(10,4,2,.30) 60%, rgba(6,2,1,.58) 100%),
    url("../img/maps/arena_boss_furia.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.char-arena.clima-cativeiro .ar-cell { border-color: transparent; }
.char-arena.clima-cativeiro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 118%, rgba(255,90,20,.13), transparent 58%);
}
.char-arena.clima-cativeiro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, transparent 52%, rgba(0,0,0,.5) 100%);
}
/* Vorthak não fica mais acorrentada — some com as correntes e as algemas */
.boss-arena .boss-cage, .boss-arena .boss-cuff { display: none; }
/* Arena do boss por continente. c1 (Vorthak) usa a .clima-cativeiro base (coliseu em chamas).
   c2 (Sekhar / Deserto de Kazan) = coliseu de arenito em ruínas (PixelLab seed 27). */
.char-arena.clima-cativeiro.boss-c2 {
  border-color: #6a4a22;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(18,11,4,.16) 0%, rgba(16,9,4,.34) 60%, rgba(8,4,2,.62) 100%),
    url("../img/maps/arena_boss_deserto.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* c3 (Abismo Cinéreo) = coliseu de obsidiana no vazio roxo (PixelLab seed 11).
   Boss de continente 3 ainda não existe — arena já fica pronta. */
.char-arena.clima-cativeiro.boss-c3 {
  border-color: #3d2f5e;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(7,4,14,.16) 0%, rgba(6,3,12,.34) 60%, rgba(3,1,7,.62) 100%),
    url("../img/maps/arena_boss_abismo.png?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* brasa violeta no lugar do brilho laranja da base */
.char-arena.clima-cativeiro.boss-c3::before {
  background: radial-gradient(ellipse at 50% 115%, rgba(150,80,220,.14), transparent 60%);
}
/* glow violeta no sprite do boss deste continente */
.boss-arena.boss-c3 .ar-unit.boss img {
  filter: drop-shadow(0 0 10px rgba(170,90,235,.75)) drop-shadow(0 4px 5px rgba(0,0,0,.6));
}
/* arena do boss: responsiva (sem os 448px fixos), tudo por % */
.char-arena.boss-arena {
  width: 100%; max-width: 460px; height: auto; aspect-ratio: 1 / 1;
  overflow: visible;
}
.boss-arena .ar-unit {
  position: absolute; width: auto; height: auto; transition: left .5s ease, top .5s ease, transform .15s ease;
  transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
}
.boss-arena .ar-unit.boss { z-index: 3; }
.boss-arena .ar-unit.boss img {
  width: clamp(94px, 27%, 126px); height: clamp(94px, 27%, 126px); object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,80,20,.7)) drop-shadow(0 4px 5px rgba(0,0,0,.6));
}
.boss-arena .ar-unit.ally { z-index: 4; }
/* SÓ o sprite do herói (.ar-hero-sprite) — um `img` genérico aqui também pegava o
   ícone do elo (outro <img> dentro do mesmo .ar-unit.ally) e forçava ele pros
   mesmos 56px do personagem inteiro ("elo gigante" na luta de boss). */
.boss-arena .ar-unit.ally .ar-hero-sprite { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }

/* barras de HP/MP em cima do sprite — MESMO padrão da caçada (.ar-hp / .ar-mp do game.css),
   só levemente maiores nesta arena menor. HP/mana do herói ficam SÓ aqui (nada no HUD). O chefe não tem barra na arena. */
.boss-arena .ar-hp { top: 0; left: 2px; right: 2px; height: 6px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.55); }
.boss-arena .ar-mp { top: 8px; left: 2px; right: 2px; height: 3px; border-radius: 2px; }
.boss-arena .ar-boss-label { font-size: .5rem; font-weight: 800; color: #ffdca8; background: rgba(20,6,4,.8); border-radius: 4px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; }
.ar-unit.hit-flash { animation: bossHit .18s; }
@keyframes bossHit { 40% { filter: brightness(2.6) drop-shadow(0 0 10px #fff); } }
.ar-unit.dead { opacity: .3; filter: grayscale(1); }

/* --- correntes prendendo o boss (elos de aço reais, ATRÁS do boss) --- */
.boss-cage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.boss-chain {
  position: absolute; left: 50%; top: 35%; width: 40%; height: 16px; margin-top: -8px;
  transform-origin: 0 50%; transform: rotate(var(--rot)); opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cellipse cx='6' cy='8' rx='5.4' ry='3.1' stroke='%23303338' stroke-width='3.4'/%3E%3Cellipse cx='6' cy='8' rx='5.4' ry='3.1' stroke='%23a9aeb7' stroke-width='1.5'/%3E%3Cellipse cx='6' cy='7' rx='5' ry='2.4' stroke='%23e6e9ee' stroke-width='.7'/%3E%3Cellipse cx='16.5' cy='8' rx='3.1' ry='5.4' stroke='%23303338' stroke-width='3.4'/%3E%3Cellipse cx='16.5' cy='8' rx='3.1' ry='5.4' stroke='%23b7bcc4' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center / auto 100%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
/* argola de ancoragem na "parede" (ponta externa da corrente) */
.boss-chain::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border: 3px solid #6d7178; border-radius: 50%; background: rgba(0,0,0,.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25);
}
.boss-cuff {
  position: absolute; top: 44%; width: 20px; height: 13px; z-index: 4;
  border: 3px solid #9aa0a8; border-radius: 4px;
  background: linear-gradient(180deg, #4a4d54, #2a2c31);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.6);
}
.boss-cuff.cuff-l { left: -3px; } .boss-cuff.cuff-r { right: -3px; }
.ar-unit.boss.boss-struggle img { animation: bossStruggle 2.4s ease-in-out infinite; }
@keyframes bossStruggle { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-2deg); } 60% { transform: translateX(5px) rotate(2deg); } }
.ar-unit.boss.boss-immune img { filter: drop-shadow(0 0 14px rgba(120,180,255,.9)) saturate(.6); }
.ar-unit.boss.boss-immune::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; z-index: -1;
  border: 2px solid rgba(120,180,255,.6); box-shadow: 0 0 20px rgba(120,180,255,.55) inset, 0 0 14px rgba(120,180,255,.4);
  animation: bossShield 1.4s ease-in-out infinite;
}
@keyframes bossShield { 50% { transform: scale(1.09); opacity: .55; } }
.ar-unit.boss.boss-vanish { animation: bossVanish .6s ease-in forwards; }
@keyframes bossVanish { to { transform: translate(-50%,-50%) scale(.4); opacity: 0; filter: brightness(3) blur(4px); } }

/* --- lacaios (golems) --- */
.boss-minion { z-index: 3; transition: left 1.3s ease-in-out, top 1.3s ease-in-out, transform .15s ease; }
.boss-minion img { width: 54px; height: 54px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); animation: minionBob 1.1s ease-in-out infinite; }
@keyframes minionBob { 50% { transform: translateY(-3px); } }
.boss-minion.dead { animation: minionDie .3s ease-out forwards; }
@keyframes minionDie { to { transform: translate(-50%,-50%) scale(.2) rotate(40deg); opacity: 0; } }

/* --- números de dano na arena do boss (maiores) --- */
.boss-float {
  position: absolute; transform: translate(-50%,-50%); z-index: 9; pointer-events: none;
  font-weight: 800; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 4px #000, 0 0 6px rgba(0,0,0,.8);
  animation: bossFloatUp 1s ease-out forwards; white-space: nowrap;
}
.boss-float.crit { color: #ffd600; font-size: 1.5rem; }
.boss-float.kill { color: #ff6b6b; font-size: 1.3rem; }
@keyframes bossFloatUp { 0% { opacity: 0; transform: translate(-50%,-40%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-160%); } }

/* --- ataque do herói --- */
.boss-proj {
  position: absolute; width: 14px; height: 14px; transform: translate(-50%,-50%); z-index: 7; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, #bfe4ff, #4d9fff 60%, transparent);
  box-shadow: 0 0 10px #4d9fff; animation: bossProj .26s linear forwards;
}
@keyframes bossProj { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))); opacity: .3; } }
.melee-slash {
  position: absolute; width: 46px; height: 46px; transform: translate(-50%,-50%); z-index: 7; pointer-events: none;
  border: 3px solid #fff; border-color: #fff transparent transparent #fff; border-radius: 50%;
  animation: meleeSlash .24s ease-out forwards;
}
@keyframes meleeSlash { 0% { transform: translate(-50%,-50%) rotate(-40deg) scale(.5); opacity: 1; } 100% { transform: translate(-50%,-50%) rotate(80deg) scale(1.3); opacity: 0; } }

/* aviso de onda de lacaios no HUD */
.boss-wave-note {
  font-size: .6rem; font-weight: 800; color: #9fd0ff; background: rgba(10,20,40,.5);
  border: 1px solid rgba(120,180,255,.4); border-radius: 5px; padding: 4px 7px; text-align: center;
}

/* --- HUD da luta de boss --- */
.boss-hud { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.boss-hp-label { font-size: .64rem; font-weight: 800; color: #ffcbb0; display: flex; justify-content: space-between; }
.boss-hpbar {
  position: relative; height: 20px; padding: 2px;
  background: #0c0404; border: 2px solid #6a2018; border-radius: 5px; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.65);
}
.boss-hpbar i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, #ff8a52 0%, #f0330f 52%, #a8180b 100%);
  box-shadow: inset 0 1px 0 rgba(255,224,190,.55), inset 0 -3px 6px rgba(0,0,0,.4);
  transition: width .18s linear;
}
/* HP "bipartido" — divisórias por cima do preenchimento formando quadrinhos */
.boss-hpbar::after {
  content: ""; position: absolute; inset: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 12px,
    rgba(8,3,3,.9) 12px, rgba(8,3,3,.9) 14px);
}
/* brilho de vidro por cima de tudo */
.boss-hpbar::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 45%;
  pointer-events: none; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.boss-meta { display: flex; justify-content: space-between; align-items: center; }
.boss-lives { font-size: .9rem; letter-spacing: 1px; }
.boss-timer {
  font-size: .8rem; font-weight: 800; color: #ffe066; font-family: 'Press Start 2P', monospace;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,224,102,.4); border-radius: 5px; padding: 3px 7px;
}
.boss-timer.low { color: #ff7b7b; border-color: rgba(255,123,123,.6); animation: bossTimerLow 1s ease-in-out infinite; }
@keyframes bossTimerLow { 50% { background: rgba(255,60,60,.25); } }

/* --- FX das magias do boss --- */
/* Estrela de Fogo: pontas saem em volta do corpo (grande, atrás do boss) */
.fire-star {
  position: absolute; width: 142px; height: 142px; margin: -71px 0 0 -71px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,150,.85) 0%, rgba(255,140,40,.62) 32%, rgba(255,70,10,.32) 56%, transparent 76%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(255,120,40,.85));
  animation: fireStarSpin var(--dur,5s) linear, fireStarPulse .8s ease-in-out infinite;
}
@keyframes fireStarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fireStarPulse { 50% { filter: brightness(1.45) drop-shadow(0 0 20px #ff7a2a); } }
.fire-star-ring {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 2; pointer-events: none;
  border: 3px solid rgba(255,150,60,.85); border-radius: 50%; mix-blend-mode: screen;
  box-shadow: 0 0 22px rgba(255,120,40,.7), inset 0 0 16px rgba(255,120,40,.5);
  animation: fireRing var(--dur,5s) linear;
}
@keyframes fireRing { 0% { transform: scale(.35); opacity: 1; } 55% { opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
/* wind-up: boss brilha vermelho e cresce antes da estrela */
.ar-unit.boss.boss-windup img { animation: bossWindup .5s ease-out; }
@keyframes bossWindup { 40% { filter: brightness(1.8) drop-shadow(0 0 16px #ff3b1a); transform: scale(1.12); } }
/* mesmo wind-up, cor por tema (Sekhar/Nerûl não brilham mais vermelho-fogo do Vorthak) */
.ar-unit.boss.boss-windup.theme-sand img { animation: bossWindupSand .5s ease-out; }
@keyframes bossWindupSand { 40% { filter: brightness(1.8) drop-shadow(0 0 16px #e0b45a); transform: scale(1.12); } }
.ar-unit.boss.boss-windup.theme-ash img { animation: bossWindupAsh .5s ease-out; }
@keyframes bossWindupAsh { 40% { filter: brightness(1.8) drop-shadow(0 0 16px #a078be); transform: scale(1.12); } }

/* Chuva de Machados: sprite real caindo do céu no herói */
.axe-fall {
  position: absolute; width: 26px; height: 52px; z-index: 6; pointer-events: none;
  background: url("../img/loja/machado_furia.png") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,120,40,.85));
  animation: axeFall .5s cubic-bezier(.55,0,.9,1) forwards;
}
@keyframes axeFall { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(var(--fy,260px)) rotate(8deg); opacity: 1; } }
.axe-impact {
  position: absolute; width: 40px; height: 12px; margin: -6px 0 0 -20px; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,170,60,.9), transparent 70%);
  animation: axeImpact .35s ease-out forwards;
}
@keyframes axeImpact { 0% { transform: scaleX(.3); opacity: 1; } 100% { transform: scaleX(1.6); opacity: 0; } }

/* --- temas por boss (Sekhar/Nerûl não usavam mais a "Estrela de Fogo"/"Chuva de
   Machados" do Vorthak SÓ no nome — o visual inteiro (cor + machado caindo do céu)
   também era sempre o do Vorthak. Cada boss agora recolore via classe extra
   "theme-sand"/"theme-ash" (default sem classe = tema "fire" do Vorthak, intocado). --- */
.fire-star.theme-sand {
  background: radial-gradient(circle, rgba(255,240,190,.85) 0%, rgba(224,180,90,.62) 32%, rgba(180,130,40,.32) 56%, transparent 76%);
  filter: drop-shadow(0 0 12px rgba(224,180,90,.85));
}
.fire-star.theme-ash {
  background: radial-gradient(circle, rgba(220,200,235,.85) 0%, rgba(140,100,170,.62) 32%, rgba(60,40,80,.32) 56%, transparent 76%);
  filter: drop-shadow(0 0 12px rgba(140,100,170,.85));
}
.fire-star-ring.theme-sand {
  border-color: rgba(224,180,90,.85); box-shadow: 0 0 22px rgba(224,180,90,.7), inset 0 0 16px rgba(224,180,90,.5);
}
.fire-star-ring.theme-ash {
  border-color: rgba(160,120,190,.85); box-shadow: 0 0 22px rgba(160,120,190,.7), inset 0 0 16px rgba(160,120,190,.5);
}
/* sem arte própria de osso/lâmina ainda — reaproveita o machado, só recolore (hue-rotate)
   pra não ficar idêntico ao do Vorthak; troca por sprite dedicado é passo futuro */
.axe-fall.theme-sand { filter: hue-rotate(-25deg) saturate(.55) brightness(1.35) drop-shadow(0 0 6px rgba(224,180,90,.85)); }
.axe-fall.theme-ash { filter: hue-rotate(220deg) saturate(.7) brightness(.95) drop-shadow(0 0 6px rgba(160,120,190,.85)); }
.axe-impact.theme-sand { background: radial-gradient(ellipse, rgba(224,180,90,.9), transparent 70%); }
.axe-impact.theme-ash { background: radial-gradient(ellipse, rgba(160,120,190,.9), transparent 70%); }

/* --- pop de vitória --- */
.boss-vic-pop {
  position: fixed; inset: 0; margin: auto; width: max-content; height: max-content; z-index: 700;
  background: linear-gradient(180deg, #3a1c0a, #0a0d12); border: 3px solid var(--gold);
  border-radius: 14px; padding: 22px 40px; text-align: center; opacity: 0;
  box-shadow: 0 0 50px rgba(255,140,40,.6), 0 12px 40px rgba(0,0,0,.8);
  transition: opacity .25s ease, transform .25s ease; transform: scale(.9);
}
.boss-vic-pop.show { opacity: 1; transform: scale(1); }
.bvp-crown { font-size: 2.4rem; }
.bvp-title { font-size: .9rem; font-weight: 800; letter-spacing: 2px; color: var(--gold); margin: 4px 0; font-family: 'Press Start 2P', monospace; }
.bvp-name { font-size: 1.4rem; font-weight: 800; color: #ff9a4d; margin-bottom: 6px; }
.bvp-sub { font-size: .72rem; color: #ffe0b0; }
.bvp-confetti { position: absolute; top: -8px; width: 7px; height: 12px; border-radius: 1px; animation: bvpFall var(--d,1s) linear forwards; }
@keyframes bvpFall { to { transform: translateY(340px) translateX(var(--x,0)) rotate(540deg); opacity: 0; } }

/* --- caixa de boss no chão --- */
.cr-boss-box {
  position: absolute; transform: translate(-50%, -50%); z-index: 8; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  width: 66px; height: 66px; display: flex; align-items: center; justify-content: center;
}
.cr-boss-box img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; position: relative; z-index: 2; animation: bossBoxBob 1.4s ease-in-out infinite; }
.cr-boss-box .cbb-aura {
  position: absolute; inset: -10px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(255,214,0,.55), transparent 70%);
  animation: cbbAura 1.2s ease-in-out infinite;
}
@keyframes cbbAura { 50% { transform: scale(1.25); opacity: .6; } }
@keyframes bossBoxBob { 50% { transform: translateY(-5px); } }
.cr-boss-box .cbb-hint {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: .5rem; font-weight: 800; color: #ffe066; text-shadow: 0 1px 2px #000; white-space: nowrap; z-index: 3;
}
.cr-boss-box:hover img { filter: brightness(1.25); }
.cr-boss-box.cbb-got { animation: cbbGot .3s ease-out forwards; }
@keyframes cbbGot { to { transform: translate(-50%,-140%) scale(.3); opacity: 0; } }

/* ============================================================ */
/* ===== ILHA DA PESCARIA (pesca) ============================= */
/* ============================================================ */
/* ícone da ilha na visão de continente — à ESQUERDA do chefe, no MESMO horizonte
   (mesmo `bottom` do .boss-node — antes tava mais alto, o usuário pediu pra alinhar) */
.fish-node {
  position: absolute; right: 24%; bottom: 5%; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; padding: 0;
}
.fish-node .fish-isle {
  width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(80,200,255,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.55));
  animation: fishIsleBob 3.4s ease-in-out infinite;
}
.fish-node .fish-isle.emoji { font-size: 2.6rem; }
@keyframes fishIsleBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.fish-node:hover .fish-isle { filter: drop-shadow(0 0 16px rgba(120,220,255,1)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.fish-tag { border-color: rgba(90,190,255,.55) !important; color: #bfe9ff !important; background: rgba(6,20,32,.85) !important; }
.fish-tag em { font-style: normal; opacity: .85; }

/* arena de pesca — doca/mar (cena estilo porto) */
.char-arena.clima-mar { background: #0c3a58; border-color: #2a5a72; }
.char-arena.fish-arena {
  width: 100%; max-width: 480px; height: auto; aspect-ratio: 5 / 4;
  overflow: hidden; position: relative;
}
/* céu + horizonte */
.fish-sky { position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, #bfe3f0 0%, #9fd0e4 55%, #7fc0dc 100%); }
.fish-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); }
/* parede de pedra do cais (fundo, atrás da doca) */
.fish-pier { position: absolute; left: 0; top: 28%; width: 100%; height: 22%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #9c6b45, #7a4f31);
  border-bottom: 3px solid #3c2817; z-index: 1; }
.fish-shop { position: absolute; right: 6%; top: -18px; font-size: .6rem; font-weight: 800;
  letter-spacing: .5px; color: #f4e8cf; background: linear-gradient(180deg,#3f6f96,#2b5170);
  border: 2px solid #1e3a50; border-radius: 4px; padding: 2px 7px 3px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 8px rgba(0,0,0,.35); }
.fish-shop i { font-style: normal; }
.fish-shop::before, .fish-shop::after { content: ""; position: absolute; top: -8px; width: 2px; height: 8px; background: #1e3a50; }
.fish-shop::before { left: 8px; } .fish-shop::after { right: 8px; }
.fish-crab { position: absolute; left: 14%; bottom: 1px; width: 20px; height: 15px; z-index: 2;
  animation: fishCrab 6s ease-in-out infinite; }
.fish-crab img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.fish-crab b { font-size: .78rem; }
@keyframes fishCrab { 0%,100% { transform: translateX(0) scaleX(1); } 46% { transform: translateX(38px) scaleX(1); } 50% { transform: translateX(38px) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } }
/* mar */
.fish-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; overflow: hidden;
  background: linear-gradient(180deg, #2f86b6 0%, #1c6790 45%, #0c3a58 100%); z-index: 2; }
.fish-sea .fw { position: absolute; left: -20%; right: -20%; height: 12px; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 22px, transparent 22px 60px);
  border-radius: 50%; opacity: .5; }
.fish-sea .fw1 { top: 8%; animation: fishWave 6s linear infinite; }
.fish-sea .fw2 { top: 30%; animation: fishWave 8s linear infinite reverse; opacity: .35; }
.fish-sea .fw3 { top: 58%; animation: fishWave 11s linear infinite; opacity: .25; }
@keyframes fishWave { from { transform: translateX(0); } to { transform: translateX(60px); } }
/* barco ao fundo (pequeno, logo abaixo da linha do horizonte) */
.fish-boat { position: absolute; right: 4%; top: 45%; width: 30%; z-index: 3; opacity: .95;
  animation: fishBoatBob 5s ease-in-out infinite; }
.fish-boat img { width: 100%; height: auto; display: block; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
@keyframes fishBoatBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(3px) rotate(1deg); } }
/* postes de amarração + gaivota */
.fish-post { position: absolute; width: 20px; z-index: 3; }
.fish-post img { width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.fish-post.fp-a { left: 40%; top: 34%; }
.fish-post.fp-b { left: 66%; top: 40%; width: 16px; opacity: .9; }
.fish-gull { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); width: 20px; height: 18px;
  animation: fishGull 3s ease-in-out infinite; }
.fish-gull img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.fish-gull b { font-size: .8rem; }
@keyframes fishGull { 0%,92%,100% { transform: translateX(-50%) rotate(0); } 95% { transform: translateX(-50%) rotate(-12deg); } }
/* doca de madeira onde o herói fica */
.fish-dock { position: absolute; left: 0; bottom: 4%; width: 38%; height: 15%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 20px),
    linear-gradient(180deg, #7a5636, #4a3320);
  border: 2px solid #2a1a0e; border-left: none; border-radius: 0 4px 4px 0;
  box-shadow: 0 5px 10px rgba(0,0,0,.45); z-index: 4; }
.fish-dock::after { content: ""; position: absolute; left: 14px; bottom: -12px; width: 6px; height: 16px;
  background: #241407; box-shadow: 70px 0 #241407, 140px 0 #241407; }
.fish-bucket { position: absolute; left: 30%; bottom: 17%; font-size: .95rem; z-index: 5;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.fish-hero { position: absolute; left: 4%; bottom: 17%; width: 78px; height: 98px;
  display: flex; align-items: flex-end; justify-content: center; z-index: 6; }
.fish-hero img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.fish-hero span { font-size: 2.4rem; }
/* pescador dedicado (substitui o sprite de combate só na pescaria) — a vara faz parte do sprite */
.fish-hero.fish-angler { left: 1%; bottom: 30%; width: 108px; height: 108px; }
.fish-hero.fish-angler img { object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.fish-angler-fb { font-size: 2.2rem; }
/* linha viva: posição/ângulo/comprimento calculados em JS (ponta da vara → boia) */
.fish-line { position: absolute; height: 2px; z-index: 5; pointer-events: none;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.4)); }
/* respingo quando a linha bate na água / peixe pula */
.fish-splash { position: absolute; width: 4px; height: 4px; z-index: 5; pointer-events: none;
  transform: translate(-50%,-50%); border-radius: 50%; opacity: 0; }
.fish-splash.go { animation: fishSplash .55s ease-out; }
@keyframes fishSplash {
  0%   { opacity: .95; box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(190,235,255,.7); }
  100% { opacity: 0;   box-shadow: 0 0 0 13px rgba(255,255,255,0), 0 0 0 20px rgba(190,235,255,0); }
}
/* peixe pulando da água quando fisga */
.fish-jump { position: absolute; font-size: 1.35rem; z-index: 7; pointer-events: none;
  transform: translate(-50%,0); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.fish-jump.go { animation: fishJump .9s cubic-bezier(.35,-0.3,.7,1.25) forwards; }
@keyframes fishJump {
  0%   { transform: translate(-50%,14px) rotate(-25deg) scale(.55); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(-15%,-50px) rotate(20deg) scale(1.1); opacity: 1; }
  100% { transform: translate(35%,-4px) rotate(130deg) scale(.45); opacity: 0; }
}
/* ondulações na água na boia (posição sincronizada via JS) */
.fish-ripple { position: absolute; left: 63%; top: 55%; width: 8px; height: 8px; z-index: 4;
  transform: translate(-50%,-50%); pointer-events: none; opacity: .5; }
.fish-ripple::before, .fish-ripple::after { content: ""; position: absolute; inset: 0;
  border: 2px solid rgba(255,255,255,.5); border-radius: 50%;
  animation: fishRipple 2.4s ease-out infinite; }
.fish-ripple::after { animation-delay: 1.2s; }
.fish-ripple.on { opacity: 1; }
.fish-ripple.on::before, .fish-ripple.on::after { animation-duration: 1s; border-color: rgba(255,240,180,.85); }
@keyframes fishRipple { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(5); opacity: 0; } }

/* boia */
.fish-bob { position: absolute; left: 63%; top: 52%; width: 26px; height: 34px; z-index: 6;
  background: none; border: none; padding: 0; cursor: default; transition: top .5s cubic-bezier(.3,1.4,.6,1); }
.fish-bob.cast { top: 58%; }
.fish-bob.biting { animation: fishBob .28s ease-in-out infinite; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
@keyframes fishBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.fb-body { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 15px; height: 20px; border-radius: 48% 48% 45% 45%;
  background: linear-gradient(180deg, #ef4a34 0 52%, #f4f4f4 52% 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fb-body::after { content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  width: 3px; height: 6px; background: #d8d8d8; }
.fb-ring { position: absolute; left: 50%; top: 55%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid #ffe066; border-radius: 50%; opacity: 0; pointer-events: none; }
.fb-ring.run { animation: fbRing linear 1 forwards; }
@keyframes fbRing { 0% { transform: scale(2.7); opacity: .9; } 100% { transform: scale(.55); opacity: 0; } }
.fb-bang { position: absolute; left: 50%; top: -22px; transform: translateX(-50%) scale(0);
  font-size: 1.1rem; font-style: normal; filter: drop-shadow(0 0 4px #ff5); }
.fb-bang.show { animation: fbBang .3s ease-out forwards, fbBangShake .3s ease-in-out infinite .3s; }
@keyframes fbBang { to { transform: translateX(-50%) scale(1.2); } }
@keyframes fbBangShake { 0%,100% { transform: translateX(-50%) scale(1.2) rotate(-8deg); } 50% { transform: translateX(-50%) scale(1.2) rotate(8deg); } }

/* barra de tensão (menor + mais difícil: zona encolhe/deriva, agulha varia de velocidade) */
.fish-tension { position: absolute; left: 16%; right: 16%; bottom: 10%; z-index: 7; }
.ft-track { position: relative; height: 13px; border-radius: 7px;
  background: rgba(4,10,16,.8); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 0 6px rgba(0,0,0,.6); overflow: hidden; }
.ft-zone { position: absolute; top: 0; bottom: 0; left: 40%; width: 30%;
  background: linear-gradient(180deg, rgba(130,240,130,.95), rgba(50,175,60,.75));
  box-shadow: 0 0 8px rgba(120,240,120,.7); transition: box-shadow .12s; }
.ft-zone.tight { box-shadow: 0 0 12px rgba(255,210,90,.95); }
.ft-needle { position: absolute; top: -3px; bottom: -3px; left: 0; width: 3px;
  background: #fff; box-shadow: 0 0 8px #fff, 0 0 3px #9be2ff; border-radius: 2px; }

/* nota de estado */
.fish-note { position: absolute; left: 0; right: 0; top: 6px; text-align: center;
  font-size: .72rem; font-weight: 800; color: #eaf6ff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  padding: 0 8px; z-index: 6; }
.fish-note.wait { color: #bfe4ff; }
.fish-note.bite { color: #ffd24a; animation: fishNotePulse .5s ease-in-out infinite; }
.fish-note.reel { color: #9be27a; }
.fish-note.warn { color: #ffb26b; }
@keyframes fishNotePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* HUD */
.fish-hud { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px;
  font-size: .74rem; font-weight: 800; color: var(--text); }
.fish-worms b { color: #ffcf9a; } .fish-tally { color: #bfe9ff; }
.fish-bait-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fish-bait-label { font-size: .72rem; font-weight: 800; color: var(--muted); }
.fish-bait-btn {
  font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: var(--text);
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; transition: background .15s, border-color .15s, color .15s;
}
.fish-bait-btn:hover:not(:disabled) { border-color: rgba(255,214,0,.5); }
.fish-bait-btn.on { background: rgba(255,214,0,.18); border-color: var(--gold); color: var(--gold); }
.fish-bait-btn:disabled { opacity: .35; cursor: not-allowed; }
.fish-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.fish-actions .btn { flex: 1 1 auto; }
.fish-actions #btnFishLeave { flex: 0 0 auto; }

/* pop de resultado */
.fish-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) scale(.7);
  z-index: 9; opacity: 0; transition: opacity .16s, transform .16s;
  background: linear-gradient(180deg, rgba(10,30,45,.96), rgba(4,14,22,.96));
  border: 2px solid rgba(120,220,255,.5); border-radius: 12px; padding: 12px 18px; text-align: center;
  box-shadow: 0 0 30px rgba(60,180,255,.4); }
.fish-pop.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.fish-pop.miss { border-color: rgba(255,150,90,.5); box-shadow: 0 0 30px rgba(255,140,80,.35); }
.fish-pop .fp-ico { font-size: 2rem; }
.fish-pop .fp-t { font-size: .9rem; font-weight: 800; color: #fff; margin-top: 2px; }
.fish-pop .fp-s { font-size: .64rem; color: #a9cfe0; margin-top: 1px; }

/* ---- cena de pesca: fundo pixel-art pintado (mesmo esquema das arenas de caçada) ---- */
.char-arena.clima-mar {
  border-color: #3a6b58;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 44%,
      rgba(6,16,22,.08) 0%, rgba(5,13,20,.20) 62%, rgba(3,8,14,.46) 100%),
    url("../img/pesca/arena_pesca.png?v=3");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* camadas de degradê antigas: viram vazio; .fish-sea fica transparente só p/ o brilho .fw */
.fish-sky, .fish-pier, .fish-dock { display: none; }
.fish-sea { background: none; box-shadow: none; }
.fish-sea::before, .fish-sea::after { display: none; }
/* props decorativos: agora pintados na arte */
.fish-shop, .fish-crab, .fish-boat, .fish-post, .fish-gull, .fish-bucket { display: none; }
/* herói/pescador fica em cima da doca pintada */
.char-arena.fish-arena .fish-hero { bottom: 30%; left: 3%; }
.char-arena.fish-arena .fish-hero.fish-angler { bottom: 31%; left: -1%; }
.char-arena.fish-arena .fish-hero::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 1%; height: 15%;
  background: radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.45), transparent 72%);
  z-index: -1; pointer-events: none;
}
.char-arena.fish-arena .fish-hero.fish-angler::after { left: 20%; right: 24%; bottom: 3%; }

/* minhoca no chão da caçada */
.ar-worm { position: absolute; width: 26px; height: 26px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; z-index: 5;
  transform: translate(-50%,-50%); animation: wormWiggle 1.1s ease-in-out infinite; }
.ar-worm .worm-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(255,150,170,.7)); position: relative; z-index: 2; }
.ar-worm .worm-emoji { font-size: 1.1rem; font-style: normal; }
.ar-worm .worm-glow { position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,190,.5), transparent 70%); animation: wormGlow 1.2s ease-in-out infinite; }
@keyframes wormWiggle { 0%,100% { transform: translate(-50%,-50%) rotate(-8deg); } 50% { transform: translate(-50%,-50%) rotate(8deg); } }
@keyframes wormGlow { 0%,100% { opacity: .4; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.15); } }
.ar-worm.worm-got { animation: wormGot .28s ease-out forwards; }
@keyframes wormGot { to { transform: translate(-50%,-160%) scale(.3); opacity: 0; } }
.ar-worm.expiring { animation: wormFade .8s ease-in forwards; }
@keyframes wormFade { to { opacity: 0; transform: translate(-50%,-50%) scale(.5); } }

/* --- Forja: aba Relíquias --- */
.forge-tabs { margin-bottom: 8px; }
.forge-relic-empty { font-size: .7rem; color: var(--muted); padding: 12px 6px; text-align: center; }
.forge-relic-list { display: flex; flex-direction: column; gap: 8px; }
.forge-relic-card {
  border: 2px solid rgba(255,140,40,.35); box-shadow: inset 0 0 0 2px rgba(0,0,0,.3);
  background: linear-gradient(180deg, rgba(255,120,40,.08), rgba(0,0,0,.2)); padding: 9px; border-radius: 4px;
}
.forge-relic-card.owned { border-color: rgba(255,214,0,.5); }
.frc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.frc-ico { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; font-size: 1.8rem; text-align: center; }
.frc-head b { font-size: .82rem; color: var(--text); display: block; }
.frc-eff { font-size: .62rem; color: #8ce0a0; font-weight: 700; }
.frc-costs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.frc-cost { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700; background: var(--panel2); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 3px 7px; }
.frc-cost img { width: 16px; height: 16px; object-fit: contain; }
.frc-cost.ok { color: #8ce08c; border-color: rgba(140,224,140,.4); }
.frc-cost.no { color: #ff9a9a; }
.frc-owned { font-size: .66rem; font-weight: 800; color: #ffd24a; text-align: center; padding: 4px; }
.frc-chance { font-size: .62rem; color: #ffe0b0; margin-bottom: 6px; line-height: 1.35; }
.frc-chance b { color: #8ce0a0; font-size: .74rem; }
.frc-boost { color: #6ad0ff; font-weight: 700; }
.frc-maestria { margin: 4px 0 7px; }

/* dica de uso no tooltip do inventário */
.it-usehint {
  font-size: .6rem; line-height: 1.35; color: #cfe6ff; margin-top: 5px;
  background: rgba(60,120,200,.12); border-left: 2px solid rgba(90,160,255,.6);
  border-radius: 3px; padding: 4px 6px;
}
.it-usehint.muted { color: var(--muted); background: rgba(255,255,255,.04); border-left-color: rgba(255,255,255,.2); }

/* --- painel Personagem: seção Relíquias --- */
.cs-relics .relic-empty { font-size: .62rem; color: var(--muted); padding: 4px 2px; }
.relic-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.relic-cell { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.relic-orb {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255,150,50,.25), rgba(0,0,0,.2)); border: 2px solid rgba(255,140,40,.5);
  border-radius: 50%; animation: relicFloat 3s ease-in-out infinite;
}
.relic-orb img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(255,120,40,.8)); }
@keyframes relicFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.relic-name { font-size: .55rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.relic-eff { font-size: .5rem; color: #8ce0a0; font-weight: 700; }

/* ============================================================ */
/* ===== ANIMAÇÃO DOS HERÓIS — movimento por CSS (juice) ====== */
/* ============================================================ */
/* Respiração parada, pulinho ao andar, investida ao atacar, recuo ao apanhar.
   Grátis (sem assets). Heróis com sprite já animado (HERO_DATA[k].animated →
   classe .hero-animated no container) NÃO recebem o "heroIdle" — o APNG já respira;
   walk/attack/hurt continuam valendo (movimento rápido do corpo todo). */
@keyframes heroIdle { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3%) scale(1.03); } }
@keyframes heroWalk { 0%,100% { transform: translateY(0) scaleY(1) rotate(0); } 30% { transform: translateY(-16%) scaleY(1.06) rotate(-3deg); } 55% { transform: translateY(0) scaleY(.93) rotate(0); } 80% { transform: translateY(-6%) rotate(3deg); } }
@keyframes heroAtk  { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(22%) rotate(-8deg); } 100% { transform: translateX(0) rotate(0); } }
@keyframes heroHurt { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-12%) rotate(-4deg); filter: brightness(1.8); } 60% { transform: translateX(4%); } }

.ar-hero-sprite { transform-origin: bottom center; }

/* painel do Personagem + pescaria — só o respiro (parado).
   .fish-angler é GIF próprio (pescador dedicado) → nada de heroIdle por cima (shimmer). */
.cs-pd-hero:not(.hero-animated) img,
.fish-hero:not(.hero-animated):not(.fish-angler) img {
  animation: heroIdle 3.2s ease-in-out infinite;
  transform-origin: bottom center;
}

/* caçada — idle só quando NÃO está andando/atacando/ferido */
.ar-unit.ally:not(.walking):not(.attacking):not(.hurt) .ar-hero-sprite { animation: heroIdle 2.6s ease-in-out infinite; }
.ar-unit.ally.walking   .ar-hero-sprite { animation: heroWalk .34s ease-in-out infinite; }
.ar-unit.ally.attacking .ar-hero-sprite { animation: heroAtk .26s ease-out; }
.ar-unit.ally.hurt      .ar-hero-sprite { animation: heroHurt .3s ease-out; }
.ar-unit.ally.facing-left { transform: scaleX(-1); }
.ar-unit.dead .ar-hero-sprite { animation: none !important; }

/* luta de boss — herói fixo; respiro + espadada (o lunge do container continua no JS) */
.boss-arena .ar-unit.ally:not(.attacking):not(.hurt) .ar-hero-sprite { animation: heroIdle 2.8s ease-in-out infinite; }
.boss-arena .ar-unit.ally.attacking .ar-hero-sprite { animation: heroAtk .26s ease-out; }
.boss-arena .ar-unit.ally.hurt      .ar-hero-sprite { animation: heroHurt .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ar-hero-sprite,
  .cs-pd-hero img, .fish-hero img,
  .boss-arena .ar-unit.ally .ar-hero-sprite { animation: none !important; }
}

/* ===== FX de TRAJE — brilho/fogo nos tiers altos (outfits[].fx = "glow" | "fire") =====
   IMPORTANTE: NUNCA animar filter/transform no <img> do herói — isso faz a borda (braço,
   pernas) "tremer". O glow fica ESTÁTICO no sprite; o pulso vem de um ::before ATRÁS dele
   (elemento separado). Fagulhas do fogo num ::after. */
@keyframes heroFxAura {   /* pulso do halo — só no elemento de trás, nunca no sprite */
  0%,100% { transform: translate(-50%, 0) scale(1);    opacity: .55; }
  50%     { transform: translate(-50%, 0) scale(1.14); opacity: .95; }
}
@keyframes heroFxEmbers {
  from { background-position: 6px 0, -4px 0, 10px 0; opacity: .9; }
  to   { background-position: 0 -80px, -12px -130px, 5px -105px; opacity: .28; }
}

/* glow ESTÁTICO no sprite (painel + arena) — sem animação, sem tremido.
   IMPORTANTE: rim BEM CURTO (2px) + a MESMA sombra-base preta que TODO tier tem
   (`0 3px 5px #000`). Glow largo no `<img>` "come" a silhueta e faz o boneco PARECER
   menor — a aura larga fica só no `::before` (atrás, não toca a silhueta). Assim os 5
   tiers leem exatamente no mesmo tamanho. */
.cs-pd-hero.hero-fx-glow img, .ar-unit.ally.hero-fx-glow .ar-hero-sprite {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(255,220,130,.9)) !important;
}
.cs-pd-hero.hero-fx-fire img, .ar-unit.ally.hero-fx-fire .ar-hero-sprite {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(255,180,80,1)) !important;
}

/* halo pulsante ATRÁS do herói (elemento separado — o sprite não é tocado).
   Aqui mora toda a "aura": maior e mais forte pra compensar o rim curto no sprite. */
.cs-pd-hero.hero-fx-glow::before, .cs-pd-hero.hero-fx-fire::before,
.ar-unit.ally.hero-fx-glow::before, .ar-unit.ally.hero-fx-fire::before {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 78%; height: 62%; border-radius: 50%;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  animation: heroFxAura 2.4s ease-in-out infinite;
}
.cs-pd-hero.hero-fx-glow::before, .ar-unit.ally.hero-fx-glow::before {
  background: radial-gradient(ellipse at center, rgba(255,214,120,.72), rgba(255,175,55,.3) 52%, transparent 76%);
}
.cs-pd-hero.hero-fx-fire::before, .ar-unit.ally.hero-fx-fire::before {
  background: radial-gradient(ellipse at center, rgba(255,155,55,.8), rgba(255,70,15,.34) 50%, transparent 75%);
  animation-duration: 1.4s;
}
.cs-pd-hero.hero-fx-glow img, .cs-pd-hero.hero-fx-fire img,
.ar-unit.ally.hero-fx-glow .ar-hero-sprite, .ar-unit.ally.hero-fx-fire .ar-hero-sprite { position: relative; z-index: 1; }

/* fagulhas subindo sobre o machado — só no fogo */
.cs-pd-hero.hero-fx-fire::after {
  content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  right: 3%; top: 0; width: 48%; height: 64%;
  background:
    radial-gradient(circle at 24% 30%, rgba(255,195,80,1)  0 1.6px, transparent 2.6px),
    radial-gradient(circle at 62% 12%, rgba(255,130,40,.9) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 84% 55%, rgba(255,95,25,.8)  0 1.3px, transparent 2.1px);
  background-size: 44px 64px, 60px 96px, 34px 76px;
  animation: heroFxEmbers 1.1s linear infinite;
}
.ar-unit.ally.hero-fx-fire::after {
  content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen; z-index: 5;
  right: -4%; top: -12%; width: 58%; height: 64%;
  background:
    radial-gradient(circle at 24% 30%, rgba(255,195,80,1)  0 1px, transparent 1.9px),
    radial-gradient(circle at 62% 12%, rgba(255,130,40,.9) 0 1px, transparent 1.9px),
    radial-gradient(circle at 84% 55%, rgba(255,95,25,.8)  0 .8px, transparent 1.5px);
  background-size: 24px 38px, 32px 54px, 18px 44px;
  animation: heroFxEmbers .9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cs-pd-hero.hero-fx-glow::before, .cs-pd-hero.hero-fx-fire::before,
  .ar-unit.ally.hero-fx-glow::before, .ar-unit.ally.hero-fx-fire::before,
  .cs-pd-hero.hero-fx-fire::after, .ar-unit.ally.hero-fx-fire::after,
  .ar-unit.ally.hero-aura-fogo::before, .ar-unit.ally.hero-aura-fogo::after,
  .pz-unit.hero-aura-fogo::before, .pz-unit.hero-aura-fogo::after { animation: none !important; opacity: .5; }
}

/* ===== AURA cosmética "Aura de Fogo" (Morvo, comprada com denário) — classe
   PRÓPRIA (hero-aura-fogo), independente do traje.
   Só aparece em 2 lugares (pedido do usuário): CAÇADA (.ar-unit.ally, aqui embaixo)
   e a PRAÇA multijogador (.pz-unit, ver bloco perto do CSS do plaza.js). NÃO aparece
   mais no painel Personagem nem na luta de boss — nos dois casos o efeito acabava
   "vazando" visualmente pro pet/montaria que ficam ao lado do herói na mesma caixa.
   Rim light no `.ar-hero-sprite` (nunca no container, só na própria imagem — não
   tem como isso "pegar" em outro elemento) + brilho/fagulhas restritos aos PÉS do
   herói (baixo e estreito), longe da zona do pet (flutua no topo) e da montaria
   (gruda na lateral esquerda). */
.ar-unit.ally.hero-aura-fogo .ar-hero-sprite {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(255,180,80,1)) !important;
  position: relative; z-index: 1;
}
/* Caçada: SÓ na personagem — nunca no pet (flutua no topo) nem na montaria (gruda
   na esquerda). Por isso o brilho fica BAIXO e ESTREITO (pés do herói) em vez do
   tamanho do .cs-pd-hero (que não tem essa vizinhança pra evitar). */
.ar-unit.ally.hero-aura-fogo::before {
  content: ""; position: absolute; left: 50%; bottom: 2%;
  width: 46%; height: 34%; border-radius: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  animation: heroFxAura 1.4s ease-in-out infinite;
  background: radial-gradient(ellipse at center, rgba(255,155,55,.8), rgba(255,70,15,.34) 50%, transparent 75%);
}
/* fagulhas: coluna central BAIXA (mesma lógica do brilho acima) — o pet flutua em
   cima (top:-10px) e a montaria gruda na lateral esquerda (left:-22%): esta faixa
   (x 16.8%-39.2%, y de baixo pra 20%-54% da caixa) não alcança nenhum dos dois. */
.ar-unit.ally.hero-aura-fogo::after {
  content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  left: 50%; bottom: 4%; width: 40%; height: 60%; transform: translateX(-50%);
  background:
    radial-gradient(circle at 24% 30%, rgba(255,195,80,1)  0 1px, transparent 1.9px),
    radial-gradient(circle at 62% 12%, rgba(255,130,40,.9) 0 1px, transparent 1.9px),
    radial-gradient(circle at 84% 55%, rgba(255,95,25,.8)  0 .8px, transparent 1.5px);
  background-size: 24px 38px, 32px 54px, 18px 44px;
  animation: heroFxEmbers .9s linear infinite;
}
/* Praça multijogador (.pz-unit, ver plaza.js): sem pet/montaria por perto — pode
   usar um halo mais cheio, atrás do sprite (que é a própria <img class="sp">). */
.pz-unit.hero-aura-fogo img.sp {
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)) drop-shadow(0 0 3px rgba(255,190,110,1)) drop-shadow(0 0 8px rgba(255,110,30,.7)) !important;
}
.pz-unit.hero-aura-fogo::before {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 30px; height: 12px;
  margin-left: -15px; border-radius: 50%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
  animation: heroFxAura 1.4s ease-in-out infinite;
  background: radial-gradient(ellipse at center, rgba(255,155,55,.8), rgba(255,70,15,.34) 50%, transparent 75%);
}
.pz-unit.hero-aura-fogo::after {
  content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen; z-index: 1;
  left: 50%; bottom: 4px; width: 34px; height: 64px; margin-left: -17px;
  background:
    radial-gradient(circle at 30% 85%, rgba(255,205,100,1)  0 1.4px, transparent 2.3px),
    radial-gradient(circle at 62% 60%, rgba(255,140,45,.9)  0 1.4px, transparent 2.3px),
    radial-gradient(circle at 46% 30%, rgba(255,100,30,.8)  0 1.1px, transparent 1.9px);
  background-size: 18px 42px, 24px 54px, 14px 48px;
  animation: heroFxEmbers 1.1s linear infinite;
}
/* preview pequeno no card de compra (Morvo → Auras) */
.aura-thumb { position: relative; display: flex; align-items: center; justify-content: center; }
.aura-thumb-fx {
  font-size: 1.7rem; filter: drop-shadow(0 0 8px rgba(255,140,40,.9)) drop-shadow(0 0 16px rgba(255,90,20,.6));
  animation: heroFxAura 1.4s ease-in-out infinite;
}

/* ============================================================
   SISTEMA DE ELO (carreira do personagem)
   ============================================================ */
/* --- badge no topo da box do Personagem --- */
.cs-elo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(255,214,140,.12), rgba(0,0,0,.28));
  border: 1px solid rgba(255,205,120,.35); border-radius: 10px;
}
.cs-elo > img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); flex: 0 0 auto; }
.cs-elo-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cs-elo-info > b { font-size: .82rem; color: #ffe0b0; letter-spacing: .3px; }
.cs-elo-info > span { font-size: .62rem; color: #b9a98c; }
.cs-elo-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); overflow: hidden; }
.cs-elo-bar > i { display: block; height: 100%;
  background: linear-gradient(90deg, #ffb347, #ffd479); transition: width .4s ease; }

/* --- ícone do elo ao lado do HP na arena (caçada + boss) --- */
.ar-unit .ar-elo {
  position: absolute; top: -3px; left: -15px; width: 15px; height: 15px;
  object-fit: contain; image-rendering: pixelated; z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.boss-arena .ar-unit .ar-elo { width: 17px; height: 17px; left: -18px; top: -4px; }

/* --- efeito de tela ao ganhar um elo --- */
.elo-unlock {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(20,10,4,.55), rgba(0,0,0,.86));
  opacity: 0; transition: opacity .35s ease; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.elo-unlock.show { opacity: 1; }
.elo-unlock.closing { opacity: 0; }
.elo-unlock-rays {
  position: absolute; width: 130vmin; height: 130vmin; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,140,.16) 0deg 6deg, transparent 6deg 14deg);
  animation: eloRays 14s linear infinite; opacity: .85;
  -webkit-mask: radial-gradient(circle, #000 0%, #000 32%, transparent 62%);
          mask: radial-gradient(circle, #000 0%, #000 32%, transparent 62%);
}
@keyframes eloRays { to { transform: rotate(360deg); } }
.elo-unlock-card {
  position: relative; text-align: center; padding: 24px 34px;
  transform: scale(.7); opacity: 0; transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .4s;
}
.elo-unlock.show .elo-unlock-card { transform: scale(1); opacity: 1; }
.elo-unlock.closing .elo-unlock-card { transform: scale(.9); opacity: 0; }
.elo-unlock-kicker {
  font-family: 'Press Start 2P', monospace; font-size: .62rem; letter-spacing: 2px;
  color: #ffd479; text-shadow: 0 0 10px rgba(255,180,71,.8); margin-bottom: 16px;
}
.elo-unlock-icon-wrap { display: inline-block; animation: eloPop .7s cubic-bezier(.2,1.6,.4,1); }
.elo-unlock-icon {
  width: 168px; height: 168px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(255,190,90,.85)) drop-shadow(0 6px 10px rgba(0,0,0,.6));
  animation: eloFloat 3s ease-in-out infinite;
}
@keyframes eloPop { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes eloFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.elo-unlock-name {
  margin-top: 14px; font-size: 1.7rem; font-weight: 900; color: #fff5e6;
  text-shadow: 0 0 18px rgba(255,190,90,.9), 0 3px 4px rgba(0,0,0,.7); letter-spacing: 1px;
}
.elo-unlock-sub { margin-top: 4px; font-size: .8rem; color: #e8c9a0; }
.elo-unlock-hint { margin-top: 18px; font-size: .62rem; color: #9c8a6f; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) {
  .elo-unlock-rays, .elo-unlock-icon, .elo-unlock-icon-wrap { animation: none !important; }
}

/* ============================================================
   PET + MONTARIA visíveis no retrato do Personagem
   (mesma leitura da caçada — pet flutua no canto, montaria aos pés)
   ============================================================ */
/* scope forte (.cs-pd-hero .x) p/ vencer o `.cs-pd-hero img { width:100% }` */
.cs-pd-hero .cs-pd-pet {
  position: absolute; top: 6px; right: 6px; width: 34px !important; height: 34px !important;
  max-width: 34px; max-height: 34px; min-width: 0;
  object-fit: contain; object-position: center; image-rendering: pixelated; z-index: 4;
  align-self: flex-start;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: csPetBob 2.6s ease-in-out infinite;
}
@keyframes csPetBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.cs-pd-hero .cs-pd-mount {
  position: absolute; left: 5px; bottom: 4px; width: 46px; height: 46px;
  z-index: 3; pointer-events: none;
}
.cs-pd-hero .cs-pd-mount img {
  position: relative; z-index: 1; width: 100% !important; height: 100% !important;
  max-height: 46px; object-fit: contain; object-position: bottom; image-rendering: pixelated;
  align-self: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.65));
}
.cs-pd-mount-aura {
  position: absolute; left: 50%; top: 58%; width: 28px; height: 28px;
  transform: translate(-50%, -50%); border-radius: 50%; filter: blur(2px); z-index: 0;
}
.cs-pd-mount.r-comum    .cs-pd-mount-aura { background: radial-gradient(circle, rgba(190,200,210,.12), transparent 60%); }
.cs-pd-mount.r-raro     .cs-pd-mount-aura { background: radial-gradient(circle, rgba(77,159,255,.30), transparent 62%);  animation: csMountAura 2.6s ease-in-out infinite; }
.cs-pd-mount.r-epico    .cs-pd-mount-aura { background: radial-gradient(circle, rgba(176,92,230,.32), transparent 62%);  animation: csMountAura 2.3s ease-in-out infinite; }
.cs-pd-mount.r-lendario .cs-pd-mount-aura { background: radial-gradient(circle, rgba(240,180,0,.38), transparent 60%);  animation: csMountAura 1.9s ease-in-out infinite; }
@keyframes csMountAura {
  0%,100% { opacity: .35; transform: translate(-50%,-50%) scale(.8); }
  50%     { opacity: .8;  transform: translate(-50%,-50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-pd-pet, .cs-pd-mount-aura { animation: none !important; }
}

/* ============================================================
   NPC MORVO — painel de SKINS de monstro
   ============================================================ */
#panelSkins h3 { margin: 0 0 8px; }
.skin-header { display: flex; gap: 12px; align-items: flex-start; }
.skin-npc { width: 66px; height: 88px; object-fit: cover; object-position: top;
  border: 2px solid rgba(255,205,120,.35); border-radius: 8px; background: rgba(0,0,0,.3);
  image-rendering: pixelated; flex: 0 0 auto; }
.skin-head-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skin-head-info > b { font-size: .92rem; color: #ffe0b0; }
.skin-head-info > span { font-size: .7rem; color: #b9a98c; line-height: 1.35; }
.skin-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.skin-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.skin-search {
  flex: 1; min-width: 140px; padding: 6px 10px; border-radius: 7px;
  background: #0b0e14; border: 1px solid rgba(255,255,255,.14); color: #e8e8ea; font-size: .8rem;
}
.skin-search:focus { outline: none; border-color: rgba(255,205,120,.5); }

.skin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  max-height: 440px; overflow-y: auto; padding: 2px;
}
.skin-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 5px; border-radius: 9px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.10);
}
.skin-card.owned  { border-color: rgba(120,200,255,.35); }
.skin-card.active { border-color: rgba(96,240,150,.6); box-shadow: 0 0 0 1px rgba(96,240,150,.35) inset; }
.skin-thumb {
  position: relative; width: 74px; height: 84px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse 60% 22% at 50% 90%, rgba(240,180,0,.18), transparent 75%);
  border-radius: 6px; overflow: hidden;
}
.skin-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.skin-card.locked .skin-thumb img { filter: grayscale(1) brightness(.45); }
.skin-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; z-index: 2; text-shadow: 0 2px 4px #000; }
.skin-name { font-size: .64rem; font-weight: 700; color: #d8d8dc; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.skin-card.active .skin-name { color: #8effb0; }
.skin-btn { width: 100%; padding: 4px 2px; font-size: .62rem; }
.skin-btn.skin-off { background: rgba(96,240,150,.12); border: 1px solid rgba(96,240,150,.4); color: #b7f7cf; }
.skin-btn i { font-style: normal; }
/* nick da conta em cima do herói (caçada e boss) + no painel do personagem */
.ar-nick { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: .58rem; font-weight: 900;
  color: #fff0c8; background: rgba(8,10,14,.75); border: 1px solid rgba(246,183,60,.55); padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; letter-spacing: .02em; text-shadow: 0 1px 0 #000; pointer-events: none; z-index: 3; }
.cs-nick { color: #f6b73c; }
.skin-card.exclusive { border-color: rgba(246,183,60,.55); background: linear-gradient(180deg, rgba(246,183,60,.08), rgba(0,0,0,.3));
  box-shadow: 0 0 12px rgba(246,183,60,.12) inset; }
.skin-card.exclusive.active { border-color: rgba(96,240,150,.6); }
.skin-excl { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: .52rem; font-weight: 900;
  color: #1c1300; background: linear-gradient(180deg, #f6b73c, #d59b35); padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 1px 0 #7a5410; letter-spacing: .02em; }

/* ============================================================
   PET — só 1 slot, catálogo de bichos voadores (NPC picker)
   ============================================================ */
.pet-section .pet-slot.empty {
  width: auto; min-width: 130px; height: 40px; flex-direction: row; gap: 6px;
  padding: 0 12px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  border-color: rgba(120,180,255,.5);
}
.pet-section .pet-slot.empty:hover { border-color: #4d9fff; background: #0e1524; }
.pet-section .pet-slot.empty .pet-ico { font-size: 1rem; color: #7fb6ff; }
.pet-section .pet-slot.empty .pet-name { font-size: .62rem; color: #9cc2f0; max-width: none; }
.pet-section .pet-slot.filled { width: auto; min-width: 96px; height: 44px; flex-direction: row; gap: 7px; padding: 0 10px; }
.pet-section .pet-slot.filled .pet-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.pet-section .pet-slot.filled .pet-ico img {
  width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation: petFloat 1.8s ease-in-out infinite;
}
.pet-section .pet-slot.filled .pet-name { font-size: .62rem; max-width: none; }

.pet-pick-item .pick-pet-thumb {
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 30% at 50% 85%, rgba(120,180,255,.15), transparent 75%);
}
.pet-pick-item .pick-pet-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation: petFloat 1.8s ease-in-out infinite; }
.pet-pick-item.active { border-color: #60f096; box-shadow: 0 0 0 1px rgba(96,240,150,.35) inset; }
.pet-pick-item.r-raro     { border-color: rgba(96,165,250,.45); }
.pet-pick-item.r-epico    { border-color: rgba(168,85,247,.45); }
.pet-pick-item.r-lendario { border-color: rgba(251,191,36,.5); }

/* ============================================================
   Janela flutuante (Picture-in-Picture) da caçada / boss / pesca
   ============================================================ */
.pip-arena-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #0a0d12;
}
.pip-arena-wrap > .char-arena,
.pip-arena-wrap > #chArena,
.pip-arena-wrap > #fishArena {
  margin: 0; flex: 0 0 auto;
  /* a arena tem 448px fixos — encolhe pra caber na janelinha */
  transform: scale(min(1, calc((100vw - 12px) / 448), calc((100vh - 12px) / 448)));
  transform-origin: center center;
}
.btn-hunt-pip { background: #2a3550; color: #cfe0ff; }
.btn-hunt-pip:hover { background: #34426a; }

/* ============================================================
   Botão de mudo da música (cabeçalho)
   ============================================================ */
.music-btn { padding: 4px 9px; font-size: 1rem; line-height: 1; }
.music-btn.muted { opacity: .55; }
.music-btn.open { border-color: var(--gold, #d5a135); color: var(--gold, #d5a135); }

/* painel de volume (abre sob o alto-falante) */
.audio-pop {
  position: fixed; z-index: 9000; width: 300px; max-width: calc(100vw - 16px);
  background: #14161a; border: 2px solid #494d52; border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.6);
}
.audio-pop[hidden] { display: none; }
.audio-pop-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold, #d5a135); margin-bottom: 10px;
}
.audio-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid #24282f;
}
.audio-row:first-of-type { border-top: 0; padding-top: 2px; }
.audio-row.is-muted { opacity: .5; }
.audio-onoff {
  background: #0f1012; border: 1px solid #2e333e; border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  font-size: .78rem; line-height: 1; padding: 4px 6px; color: inherit;
}
.audio-onoff:hover { border-color: var(--gold, #d5a135); }
.audio-lbl { font-size: .8rem; color: #e8eaf1; font-weight: 600; }
.audio-lbl em { display: block; font-style: normal; font-size: .66rem; color: #8b93a7; font-weight: 400; }
.audio-val { font-size: .72rem; color: var(--gold, #d5a135); font-variant-numeric: tabular-nums; text-align: right; }
.audio-row input[type=range] {
  grid-column: 1 / -1; width: 100%; height: 4px; margin: 6px 0 0;
  -webkit-appearance: none; appearance: none;
  background: #0f1012; border: 1px solid #2e333e; border-radius: 99px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.audio-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, #f2c14e, #d9932b); border: none; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.audio-row input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, #f2c14e, #d9932b); border: none; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.audio-mute { width: 100%; margin-top: 2px; font-size: .78rem; padding: 6px 10px; }
.audio-sec { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b93a7; margin: 12px 0 2px; padding-top: 10px; border-top: 1px dashed #2e333e; }
.audio-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.audio-note { font-size: .68rem; color: #8b93a7; line-height: 1.4; margin-top: 4px; }
.cfg-btn { position: relative; font-size: 1.05rem; }
.cfg-btn .cfg-badge { position: absolute; right: -4px; top: -6px; font-style: normal; font-size: .62rem; line-height: 1; filter: drop-shadow(0 1px 0 #000); }

/* picker: caixa "Escolha o nick do herói" (1ª vez no herói) */
.nick-box { max-width: 460px; margin: 0 auto; text-align: left; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
.nick-box-hero { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.nick-box-hero img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.nick-box-hero b { display: block; font-size: 1rem; color: #fff0c8; }
.nick-box-hero small { color: #8d93a3; }
.nick-box-text { color: #c9b896; line-height: 1.5; margin: 0 0 10px; font-size: .92rem; }
.nick-box label { display: block; font-size: .8rem; color: #8d93a3; margin: 6px 0 4px; }
.nick-box-row { display: flex; gap: 6px; }
.nick-box-row input { flex: 1; background: #0f1012; border: 2px solid #2a2f38; color: #e8eaf1; padding: 10px 12px; font: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: .3px; }
.nick-box-row input:focus { outline: none; border-color: #f6b73c; }
.nick-box-row .btn { flex: none; font-size: 1.1rem; padding: 0 14px; }
.nick-box-hint { font-size: .78rem; color: #7c8394; margin-top: 6px; }
.nick-box-msg { min-height: 1.2em; font-size: .85rem; margin-top: 6px; }
.nick-box-msg.err { color: #ff8a7a; }
.nick-box .char-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: space-between; }

/* ===== PORTAL MULTIJOGADOR (meio do mapa-múndi) ===== */
.portal-node {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: none; padding: 0; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; transition: transform .12s;
}
.portal-node:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 7; }
.portal-node .portal-img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; position: relative; z-index: 2;
  filter: drop-shadow(0 0 10px rgba(180,140,255,.9)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); animation: portalBob 2.4s ease-in-out infinite; }
.portal-node .portal-emoji { font-size: 2.4rem; position: relative; z-index: 2; animation: portalSpin 3s linear infinite; }
.portal-node .portal-glow { position: absolute; left: 50%; top: 32px; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,140,255,.55) 0%, rgba(120,80,255,.25) 40%, transparent 70%); animation: portalPulse 1.6s ease-in-out infinite; z-index: 1; }
@keyframes portalPulse { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes portalBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes portalSpin { to { transform: rotate(360deg); } }
.portal-node .portal-tag { position: relative; z-index: 3; font-size: .56rem; font-weight: 900; letter-spacing: .6px; color: #f0e6ff;
  background: rgba(20,10,40,.88); border: 1px solid rgba(180,140,255,.7); border-radius: 5px; padding: 2px 7px; white-space: nowrap;
  text-shadow: 0 1px 0 #000; box-shadow: 0 0 10px rgba(150,110,255,.5); }
.portal-node .portal-tag em { font-style: normal; color: #b48cff; margin-left: 3px; }
.portal-node .portal-count { position: relative; z-index: 3; font-size: .5rem; color: #d8ccff; background: rgba(20,10,40,.7); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

/* ===== MODO LEVE (PC fraco) — ver js/lite.js ===== */
html.lite .up-backdrop { filter: brightness(.35) !important; transform: none !important; }
html.lite .up-header, html.lite .up-pick-overlay, html.lite .synth-progress { backdrop-filter: none !important; }
html.lite .portal-node .portal-glow, html.lite .portal-node .portal-img, html.lite .portal-node .portal-emoji,
html.lite .boss-node .boss-fly, html.lite .fish-node .fish-isle,
html.lite #donateOverlay .dn-chest, html.lite #donateOverlay .dn-spark,
html.lite .btn.donate-btn::after { animation: none !important; }
html.lite .portal-node .portal-glow, html.lite #donateOverlay .dn-spark { display: none !important; }
html.lite .boss-node .boss-fly, html.lite .fish-node .fish-isle, html.lite .portal-node .portal-img { filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)) !important; }
html.lite .ar-unit img, html.lite .cs-pd-hero img, html.lite .skin-thumb img { filter: none !important; }
html.lite * { transition-duration: 0s !important; }

/* ===== barras de rolagem finas e claras (página e painéis internos) ===== */
html, body, * { scrollbar-width: thin; scrollbar-color: rgba(200,206,222,.38) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(200,206,222,.38); border-radius: 99px; border: 1px solid rgba(0,0,0,.25); }
::-webkit-scrollbar-thumb:hover { background: rgba(220,226,240,.6); }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== ARENA COOPERATIVA (praça → luta com o MOTOR DA CAÇADA + aliado) ===== */
.char-arena.clima-arena {
  border-color: #7a1c14; image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(14,6,4,.30) 0%, rgba(12,6,4,.52) 58%, rgba(6,3,2,.80) 100%),
    url("../img/plaza/arena_mp.png?v=1");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.char-arena.clima-arena .ar-cell { border-color: transparent; }
.char-arena.clima-arena::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%); }
.char-arena.clima-arena .ar-unit::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 20%;
  background: radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.5), transparent 72%); z-index: -1; pointer-events: none; }
/* nick do ALIADO (azul, pra diferenciar do seu) */
.ar-nick.ally { color: #cfe6ff; border-color: rgba(126,184,255,.6); }
/* painel de caçada em modo arena: some XP/itens/baús/presa/missões/punição — só abates, onda e aliado */
#panelHunt.arena-mode .hud-xp, #panelHunt.arena-mode .hud-drops, #panelHunt.arena-mode .hud-boxes, #panelHunt.arena-mode .hud-presa,
#panelHunt.arena-mode .chq-toggle, #panelHunt.arena-mode #chQuestsPanel, #panelHunt.arena-mode .hunt-xpbar,
#panelHunt.arena-mode .ch-pen, #panelHunt.arena-mode .char-loot-bar { display: none !important; }
#panelHunt:not(.arena-mode) .hud-arena { display: none; }
.char-hud .hud-arena b { color: #9ecbff; }