:root {
  --bg: #0e1117;
  --bg2: #161b24;
  --panel: #1c232f;
  --panel2: #232c3b;
  --border: #2d3748;
  --text: #e7ecf3;
  --muted: #8b95a5;
  --gold: #f0b400;
  --hp: #ef4444;
  --blue: #4d9fff;
  --green: #4da64d;
  --radius: 10px;
  --font: 'Segoe UI', system-ui, sans-serif;
  --glow-blue: rgba(77,159,255,.35);
  --glow-green: rgba(77,166,77,.35);
  --glow-red: rgba(239,68,68,.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(77,159,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 85% 10%, rgba(240,180,0,.08), transparent 55%),
    linear-gradient(160deg, #0b0f16 0%, #11151f 45%, #0d1119 100%);
  background-size: 100% 100%, 100% 100%, 250% 250%;
  animation: bgDrift 22s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0% { background-position: 0% 0%, 100% 0%, 0% 0%; }
  50% { background-position: 20% 10%, 80% 20%, 50% 50%; }
  100% { background-position: 0% 0%, 100% 0%, 100% 100%; }
}
.game-root { max-width: 1400px; margin: 0 auto; padding: 12px; position: relative; z-index: 1; }

/* HUD */
.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  flex-wrap: wrap;
  box-shadow: 0 0 0 1px rgba(240,180,0,.05), 0 0 24px rgba(77,159,255,.05) inset;
  position: relative;
}
.hud-top::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,180,0,.5), transparent);
  animation: hudShine 4s ease-in-out infinite;
}
@keyframes hudShine { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.hud-left { display: flex; align-items: center; gap: 16px; }
.logo { font-size: 1.3rem; font-weight: 800; letter-spacing: .5px; }
.logo span { color: var(--gold); text-shadow: 0 0 14px rgba(240,180,0,.5); }
.round-badge {
  background: var(--panel2); border: 1px solid var(--border); padding: 4px 12px;
  border-radius: 999px; font-size: .9rem;
}
.hud-resources { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.res { display: flex; align-items: center; gap: 6px; }
.res-icon { font-size: 1.1rem; }
.res b { font-size: 1.2rem; }
.res.gold b {
  color: var(--gold); text-shadow: 0 0 12px rgba(240,180,0,.6);
  transition: transform .18s ease;
  display: inline-block;
}
.res.gold.bump b, b#goldVal.bump { animation: goldBump .45s ease; }
@keyframes goldBump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.res.hp b { color: #f87171; }
.res.hp.low b { animation: hpPulse 1s ease-in-out infinite; }
@keyframes hpPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.res.level b { color: var(--blue); }
.lvl-line { display: flex; flex-direction: column; }
.xp-bar { width: 90px; height: 6px; background: #0a0d12; border-radius: 3px; overflow: hidden; margin-top: 2px; }
#xpFill {
  height: 100%; background: linear-gradient(90deg, var(--blue), #8fd0ff); width: 0%;
  transition: width .3s; box-shadow: 0 0 8px rgba(77,159,255,.6);
}
.hud-actions { display: flex; gap: 8px; }

.btn {
  border: none; border-radius: 8px; padding: 8px 14px; font-size: .9rem; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
  font-family: var(--font); font-weight: 700; color: #fff; transition: transform .1s, filter .1s;
  /* cinza escuro por padrão — sem isso um botão sem .btn-gold/.btn-primary/etc.
     caía no branco/cinza claro NATIVO do navegador (pedido do usuário: "todos os
     botões que tiverem esse tom de branco... mude pra um cinza mais escuro") */
  background: linear-gradient(135deg, #3a4150, #4d5566);
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-gold { background: linear-gradient(135deg, #d89a00, #f0b400); }
.btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); }
.btn-primary { background: linear-gradient(135deg, #2563eb, #4d9fff); width: 100%; padding: 12px; }
.btn-small { background: var(--panel2); border: 1px solid var(--border); width: 34px; height: 34px; }

/* Layout */
.main-layout { display: grid; grid-template-columns: 210px 1fr 260px; gap: 12px; margin-top: 12px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.panel h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.panel-hint { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }

/* Board */
.board-wrap { display: flex; flex-direction: column; }
.board-header { text-align: center; margin-bottom: 6px; font-weight: 700; }
.enemy-label { color: #f87171; }
.board-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  aspect-ratio: 8 / 8;
  width: 100%;
  max-height: 82vh;
  min-height: 520px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 40px rgba(0,0,0,.4);
  position: relative;
}
.board-stage { position: relative; }
.board-empty-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; pointer-events: none; z-index: 5;
  border: 2px dashed rgba(240,180,0,.45); border-radius: var(--radius);
}
.board-empty-hint .be-icon { font-size: 2.6rem; }
.board-empty-hint .be-title { font-size: 1.05rem; color: var(--gold); font-weight: 800; }
.board-empty-hint .be-sub { font-size: .85rem; color: var(--muted); max-width: 420px; line-height: 1.5; }
.cell {
  position: relative;
  background: #10151d;
  border: 1px solid #222c3a;
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.cell.empty-board:hover { background: #1a2330; box-shadow: inset 0 0 12px rgba(77,159,255,.15); }
.cell.enemy-zone {
  background: #141019;
  box-shadow: inset 0 0 20px rgba(239,68,68,.04);
}
.cell.ally-zone {
  background: #101a16; border-color: #1d3a2d;
  box-shadow: inset 0 0 20px rgba(77,166,77,.04);
}
.board-grid.combat .cell.enemy-zone { animation: zonePulseRed 4s ease-in-out infinite; }
.board-grid.combat .cell.ally-zone { animation: zonePulseGreen 4s ease-in-out infinite; }
@keyframes zonePulseRed { 0%,100% { box-shadow: inset 0 0 14px rgba(239,68,68,.10); } 50% { box-shadow: inset 0 0 26px rgba(239,68,68,.22); } }
@keyframes zonePulseGreen { 0%,100% { box-shadow: inset 0 0 14px rgba(77,166,77,.12); } 50% { box-shadow: inset 0 0 26px rgba(77,166,77,.24); } }
.cell.placeable { border-color: #2a6d4f; animation: placeableGlow 1.4s ease-in-out infinite; }
@keyframes placeableGlow { 0%,100% { box-shadow: inset 0 0 8px rgba(42,109,79,.5); } 50% { box-shadow: inset 0 0 18px rgba(42,109,79,.9); } }
.cell.drop-target { outline: 2px solid var(--gold); box-shadow: 0 0 14px rgba(240,180,0,.5); }

.board-stage { display: block; }

.champ {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: grab; user-select: none;
  transition: transform .12s, filter .12s;
}
.champ img.sprite {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform .18s, filter .18s;
  image-rendering: auto;
  transform: scale(var(--mscale, 1));
}
/* idle "respiro" sutil de todas as unidades (respeita a escala model_scale) */
.champ.has-idle img.sprite { animation: champIdle 2.4s ease-in-out infinite; }
@keyframes champIdle { 0%,100% { transform: scale(var(--mscale, 1)) translateY(0); } 50% { transform: scale(calc(var(--mscale, 1) * 1.05)) translateY(-3%); } }
/* zoom + glow ao passar o mouse */
.champ:hover { z-index: 8; }
.champ:hover img.sprite { transform: scale(calc(var(--mscale, 1) * 1.25)); filter: brightness(1.15) drop-shadow(0 0 8px var(--glow-blue)); }
/* células com monstro escalado não cortam o sprite */
.cell:has(img.sprite[style*="--mscale"]) { overflow: visible; z-index: 4; }
/* pop-in ao entrar no tabuleiro */
.champ.placing { animation: champPop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes champPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.champ .star-row { position: absolute; bottom: 1px; left: 0; right: 0; display: flex; justify-content: center; gap: 1px; z-index: 3; }
.champ .star { font-size: 8px; color: var(--gold); text-shadow: 0 0 3px #000, 0 0 6px rgba(240,180,0,.8); }
.champ .cost-badge {
  position: absolute; top: 1px; left: 1px; z-index: 3;
  width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; background: #000;
  border: 1px solid var(--gold); box-shadow: 0 0 6px rgba(240,180,0,.6);
}
.champ .cost-badge[data-cost="3"], .champ .cost-badge[data-cost="4"], .champ .cost-badge[data-cost="5"] { border-color: #ff7b7b; box-shadow: 0 0 6px rgba(255,123,123,.7); }
.champ .hp-bar {
  position: absolute; top: 0; left: 2px; right: 2px; height: 4px; background: rgba(0,0,0,.78); z-index: 3;
}
.champ .hp-bar-fill { display: block; height: 100%; background: var(--hp); }
.champ .mana-bar {
  position: absolute; top: 4px; left: 2px; right: 2px; height: 3px; background: rgba(0,0,0,.78); z-index: 3;
}
.champ .mana-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--blue); transform-origin: left; z-index: 3; }
.champ.itemized::after {
  content: '◆'; position: absolute; top: 14px; left: 1px; z-index: 3; font-size: 9px; color: var(--gold);
}
/* Ícones dos itens equipados na unidade */
.champ .item-row {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1px; z-index: 4; pointer-events: none;
}
.champ .it-icon-mini {
  width: 12px; height: 12px; object-fit: contain; image-rendering: auto;
  background: rgba(0,0,0,.55); border-radius: 3px; padding: 1px;
  border: 1px solid rgba(240,180,0,.7); box-sizing: content-box;
}
.champ .it-icon-fallback { font-size: 8px; line-height: 12px; text-align: center; color: #fff; font-weight: 700; }
/* Aura de efeito conforme o item */
.champ .item-aura {
  position: absolute; inset: -6%; pointer-events: none; z-index: 1; border-radius: 50%;
  filter: blur(2px); animation: auraPulse 2s ease-in-out infinite;
}
@keyframes auraPulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .6; transform: scale(1.06); } }
.champ .item-aura.fx-item-basic { background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); }
.champ .item-aura.fx-phys     { background: radial-gradient(circle, rgba(255,110,40,.5), transparent 70%); box-shadow: 0 0 12px rgba(255,110,40,.5); }
.champ .item-aura.fx-magic    { background: radial-gradient(circle, rgba(100,90,255,.55), transparent 70%); box-shadow: 0 0 12px rgba(100,90,255,.55); }
.champ .item-aura.fx-speed    { background: radial-gradient(circle, rgba(255,220,60,.5), transparent 70%); box-shadow: 0 0 12px rgba(255,220,60,.5); }
.champ .item-aura.fx-def      { background: radial-gradient(circle, rgba(60,210,120,.5), transparent 70%); box-shadow: 0 0 12px rgba(60,210,120,.5); }
.champ .item-aura.fx-mana     { background: radial-gradient(circle, rgba(60,200,230,.5), transparent 70%); box-shadow: 0 0 12px rgba(60,200,230,.5); }
.champ .item-aura.fx-hp       { background: radial-gradient(circle, rgba(255,80,120,.5), transparent 70%); box-shadow: 0 0 12px rgba(255,80,120,.5); }
.champ .item-aura.fx-ult      {
  background: conic-gradient(from 0deg, red, orange, yellow, green, cyan, blue, magenta, red);
  animation: auraSpinner 1.6s linear infinite;
}
@keyframes auraSpinner { to { transform: rotate(360deg); } }
.champ .item-aura.fx-ult { opacity: .5; }
/* intensidade do efeito escala com a quantidade de itens equipados */
.champ .item-aura.fx-n1 { inset: -6%; filter: blur(2px); }
.champ .item-aura.fx-n2 { inset: -14%; filter: blur(3px); opacity: .8; box-shadow: 0 0 18px 4px rgba(255,220,120,.45); }
.champ .item-aura.fx-n3 {
  inset: -24%; filter: blur(4px); opacity: 1;
  box-shadow: 0 0 26px 8px rgba(255,220,120,.6), inset 0 0 14px rgba(255,255,255,.35);
  animation: auraPulse 1.2s ease-in-out infinite, auraSpinner 4s linear infinite;
  border: 2px dashed rgba(240,180,0,.55);
}
.champ .item-aura.fx-n3.fx-ult { animation: auraSpinner 1s linear infinite; }
/* partículas flutuantes no monstro com 3 itens */
.champ .item-particles { position: absolute; inset: -20%; pointer-events: none; z-index: 5; }
.champ .ip-dot {
  position: absolute; bottom: 22%; width: var(--size); height: var(--size); border-radius: 50%;
  background: hsl(var(--hue), 95%, 65%);
  box-shadow: 0 0 6px 1px hsl(var(--hue), 95%, 60%);
  opacity: 0; animation: ipFloat var(--dur) linear var(--delay) infinite;
}
@keyframes ipFloat {
  0%   { transform: translateY(0) translateX(0) scale(.5); opacity: 0; }
  15%  { opacity: .95; }
  55%  { opacity: .8; transform: translateY(-26px) translateX(-3px) scale(1); }
  100% { transform: translateY(-48px) translateX(4px) scale(.4); opacity: 0; }
}
/* ícones também crescem conforme a quantidade */
.champ .fx-n2 ~ .item-row .it-icon-mini { width: 13px; height: 13px; }
.champ .fx-n3 ~ .item-row .it-icon-mini { width: 14px; height: 14px; border-color: gold; box-shadow: 0 0 6px rgba(240,180,0,.8); }
.champ.dragging { opacity: .5; }
.champ.dead { filter: grayscale(1) brightness(.4); opacity: .35; animation: none; }
.champ.attack { transform: scale(1.18); z-index: 6; }
.champ .hp-bar-fill, .champ .mana-bar-fill { transition: width .28s ease; }

/* flash de dano recebido */
.champ.hit { animation: hitFlash .28s ease; }
@keyframes hitFlash {
  0% { filter: brightness(2.2) hue-rotate(-20deg); }
  100% { filter: brightness(1); }
}
.champ.crit-hit { animation: critHitFlash .32s ease; }
@keyframes critHitFlash {
  0% { filter: brightness(2.6) sepia(1) saturate(4); }
  100% { filter: brightness(1); }
}

/* projétil disparado pelo atacante */
.proj {
  position: fixed; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--blue) 60%, #1b3a66);
  box-shadow: 0 0 12px 2px var(--glow-blue);
  z-index: 999; pointer-events: none; transform: translate(-50%,-50%);
}
.proj.crit-proj {
  width: 20px; height: 20px;
  background: radial-gradient(circle at 35% 35%, #fff, #ffd600 60%, #b8860b);
  box-shadow: 0 0 16px 3px rgba(255,214,0,.7);
}
.proj.dead-proj {
  background: radial-gradient(circle at 35% 35%, #fff, #ff6b6b 60%, #7f1d1d);
  box-shadow: 0 0 14px 3px rgba(255,107,107,.7);
}

/* anel de impacto no alvo */
.hit-ring {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  border: 2px solid rgba(240,180,0,.8); border-radius: 50%;
  transform: translate(-50%,-50%) scale(0); z-index: 8; pointer-events: none;
  animation: hitRing .4s ease-out forwards;
}
@keyframes hitRing { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; } }

/* projétil de ataque à distância (unidades com range > 1) */
.projectile {
  position: fixed; width: 16px; height: 3px; z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,216,112,.15), #ffd870);
  box-shadow: 0 0 6px rgba(255,216,112,.8);
  animation: projFly .26s linear forwards;
}
@keyframes projFly {
  from { transform: translate(0, 0) rotate(var(--ang)); opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) rotate(var(--ang)); opacity: .5; }
}

/* ===== MODO UPAR (personagem persistente) ===== */
.char-modal {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5,8,12,.86); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  overflow: auto;
}
.char-modal[hidden] { display: none; }
.char-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; width: 420px; max-width: 94vw; box-shadow: 0 0 60px rgba(0,0,0,.7);
}
.char-card.wide { width: 800px; max-width: 96vw; }
.char-card h3 { margin-bottom: 10px; color: var(--gold); }
.char-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.char-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px; max-height: 52vh; overflow: auto; padding: 2px;
}
.char-pick-item {
  position: relative; aspect-ratio: 1/1; background: #0a0d12; border: 1px solid var(--border);
  border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, transform .12s;
}
.char-pick-item:hover { border-color: var(--gold); transform: scale(1.06); }
.char-pick-item.owned { border-color: rgba(240,180,0,.65); }
.char-pick-item .pick-lvl {
  position: absolute; top: 2px; left: 2px; font-size: .5rem; font-style: normal; font-weight: 800;
  background: rgba(124,58,237,.9); color: #fff; border-radius: 4px; padding: 1px 4px;
}
.char-pick-item img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.char-pick-item b {
  position: absolute; bottom: 2px; right: 2px; font-size: .55rem;
  background: rgba(0,0,0,.75); border-radius: 4px; padding: 1px 4px; color: var(--gold);
}
/* abas do seletor (Monstros / Herois) */
.pick-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.pick-tab {
  flex: 1; padding: 6px 8px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted); cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; font-weight: 800; font-size: .82rem;
}
.pick-tab.active { background: var(--gold); color: #1a1205; border-color: var(--gold); }
.pick-tab small { font-weight: 400; opacity: .85; }
.char-home { display: flex; gap: 12px; align-items: flex-start; }
.char-portrait {
  width: 110px; height: 130px; flex: 0 0 auto; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: flex-end; justify-content: center;
}
.char-portrait img { width: 100%; height: 100%; object-fit: contain; }
.char-info { flex: 1; min-width: 0; }
.char-name { font-weight: 800; font-size: 1.05rem; }
.char-lvl { color: var(--gold); font-size: .8rem; margin-left: 6px; }
.char-xpbar {
  position: relative; height: 14px; background: #0a0d12; border: 1px solid var(--border);
  border-radius: 7px; margin: 8px 0; overflow: hidden;
}
.char-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #4d9fff); }
.char-xpbar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000;
  /* mesma fonte da Perfeição/Pontos de Poder (.cs-power-pct): a fonte retrô do
     jogo fica ilegível nesse tamanho — pedido do usuário */
  font-family: 'Segoe UI', system-ui, Arial, sans-serif; letter-spacing: normal;
}
.char-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.char-stats div { background: var(--panel2); border-radius: 6px; padding: 4px 6px; font-size: .7rem; display: flex; justify-content: space-between; gap: 4px; }
.char-stats span { color: var(--muted); }
.char-eq-row { margin-top: 10px; }
.char-eq-row label, .char-inv-wrap label { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.char-eq-grid { display: flex; gap: 6px; }
.char-eq-slot {
  width: 44px; height: 44px; background: #0a0d12; border: 2px dashed rgba(240,180,0,.4);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.char-eq-slot:not(.empty):hover { border-color: #ff7b7b; }
.char-eq-slot.empty { cursor: default; color: var(--muted); font-size: 1rem; }
.char-eq-slot img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.char-inv-wrap { margin-top: 10px; }
.char-inv {
  display: flex; flex-wrap: wrap; gap: 5px; max-height: 108px; overflow: auto;
  background: #0a0d12; border: 1px solid var(--border); border-radius: 6px; padding: 6px; min-height: 44px;
}
.char-inv-item {
  width: 40px; height: 40px; background: var(--panel2); border: 1px solid rgba(240,180,0,.55);
  border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: flex; align-items: center; justify-content: center;
}
.char-inv-item:hover { border-color: var(--gold); transform: scale(1.08); }
.char-inv-item img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.char-inv-item span { font-size: .55rem; text-align: center; padding: 2px; }
/* arena de caça */
.char-hud { display: flex; gap: 14px; font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.char-hud b { color: var(--gold); }
.char-arena {
  position: relative; width: 448px; height: 448px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; margin: 0 auto; overflow: hidden;
}
.ar-cell { position: absolute; width: 56px; height: 56px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.04); }
.ar-unit {
  position: absolute; width: 56px; height: 56px; z-index: 2;
  transition: left .15s linear, top .15s linear;
  display: flex; align-items: flex-end; justify-content: center;
}
.ar-unit img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ar-unit.ally img { filter: drop-shadow(0 0 5px rgba(77,159,255,.7)); }
.ar-unit.enemy img { filter: drop-shadow(0 0 5px rgba(239,68,68,.7)); }
.ar-hp { position: absolute; top: 0; left: 3px; right: 3px; height: 5px; padding: 1px; background: rgba(0,0,0,.8); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.ar-hp i { display: block; height: 100%; background: var(--hp); border-radius: 1px; }
.ar-unit.enemy .ar-hp i { background: #f87171; }
/* HP "bipartido" em quadrinhos — divisórias por cima do preenchimento */
.ar-hp::after { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 7px, rgba(0,0,0,.8) 7px, rgba(0,0,0,.8) 8px); }
.ar-mp { position: absolute; top: 7px; left: 3px; right: 3px; height: 3px; background: rgba(0,0,0,.75); }
.ar-mp i { display: block; height: 100%; background: #4aa8ff; }
.ar-unit.dead { opacity: .25; filter: grayscale(1); }
/* efeito do BOSS da rodada */
.ar-unit.boss { width: 72px; height: 72px; z-index: 6; }
.ar-unit.boss img {
  animation: bossPulse .9s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #f0b400) drop-shadow(0 0 16px #ff4d4d);
}
@keyframes bossPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
.ar-boss-label {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; font-weight: 800; color: #1a1205; white-space: nowrap;
  background: linear-gradient(90deg, #f0b400, #ffd966);
  border: 1px solid #ff4d4d; border-radius: 4px; padding: 1px 5px;
  box-shadow: 0 0 8px rgba(240,180,0,.85); text-shadow: 0 1px 0 #ffe9a8;
}
.ar-float {
  position: absolute; top: 18%; transform: translateX(-50%);
  font-weight: 800; font-size: 1.05rem; color: #fff; text-shadow: 0 1px 3px #000;
  pointer-events: none; animation: floatUp .7s ease-out forwards; z-index: 5;
}
.ar-float.crit { color: #ffd600; font-size: 1.3rem; }
.ar-float.kill { color: #ff6b6b; }
.ar-float.heal { color: #4ade80; }
.ar-float.drop { color: #ffd600; font-size: .78rem; }
.ar-float.skill { font-size: 1.3rem; }
/* clarão de magia no herói/dono quando lança skill (mana cheia) */
.skill-burst { position: fixed; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 50; animation: skillBurst .65s ease-out forwards; }
.skill-burst.poison { background: radial-gradient(circle, rgba(90,220,90,.9), transparent 70%); box-shadow: 0 0 20px 10px rgba(90,220,90,.5); }
.skill-burst.fire { background: radial-gradient(circle, rgba(255,140,40,.95), transparent 70%); box-shadow: 0 0 24px 12px rgba(255,120,30,.6); }
.skill-burst.pierce { background: radial-gradient(circle, rgba(200,230,255,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(120,180,255,.55); }
.skill-burst.bleed { background: radial-gradient(circle, rgba(235,70,70,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(200,30,30,.6); }
.skill-burst.stun { background: radial-gradient(circle, rgba(255,232,120,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(240,200,60,.6); }
.skill-burst.drain { background: radial-gradient(circle, rgba(120,240,170,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(40,190,110,.6); }
.skill-burst.holy { background: radial-gradient(circle, rgba(255,250,220,.98), rgba(255,224,140,.5) 55%, transparent 74%); box-shadow: 0 0 26px 13px rgba(255,220,120,.65); }
@keyframes skillBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }

/* ===== Magias do herói: animação dedicada por skill (caçada) ===== */
/* projétil da Flecha Venenosa — flecha verde voando até o alvo */
.skill-proj {
  position: fixed; z-index: 320; pointer-events: none;
  width: 44px; height: 20px; transform-origin: center;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated;
  animation: skillProjFly .34s linear forwards;
}
.skill-proj.poison { filter: drop-shadow(0 0 7px rgba(95,235,95,1)) drop-shadow(0 0 16px rgba(55,190,55,.75)); }
@keyframes skillProjFly {
  from { transform: translate(0,0) rotate(var(--ang)); opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) rotate(var(--ang)); opacity: .85; }
}
/* Tiro da Fênix — pássaro flamejante descrevendo um arco até o alvo */
.skill-phoenix {
  position: fixed; z-index: 320; pointer-events: none;
  width: 60px; height: 46px; transform-origin: center;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255,160,50,1)) drop-shadow(0 0 22px rgba(255,90,20,.75)) drop-shadow(0 3px 6px rgba(255,60,0,.5));
  animation: skillPhoenixFly .52s cubic-bezier(.35,0,.7,1) forwards, phoenixFlap .16s steps(2) infinite;
}
@keyframes phoenixFlap { from { filter: drop-shadow(0 0 10px rgba(255,160,50,1)) drop-shadow(0 0 22px rgba(255,90,20,.75)); } to { filter: drop-shadow(0 0 16px rgba(255,190,80,1)) drop-shadow(0 0 30px rgba(255,110,30,.85)); } }
@keyframes skillPhoenixFly {
  0%   { transform: translate(0,0) scale(.65); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(calc(var(--tx) / 2), calc(var(--ty) / 2 - 30px)) scale(1.18); }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
}
/* impacto: nuvem de veneno persistente */
.poison-cloud {
  position: fixed; z-index: 60; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(125,235,110,.85), rgba(60,150,50,.28) 60%, transparent 78%);
  animation: poisonCloud 1.15s ease-out forwards;
}
@keyframes poisonCloud {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25%  { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}
/* impacto: explosão da fênix */
.fire-explode {
  position: fixed; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,242,185,.98), rgba(255,140,40,.9) 34%, rgba(200,40,20,.35) 66%, transparent 80%);
  box-shadow: 0 0 32px 15px rgba(255,120,30,.55);
  animation: fireExplode .8s ease-out forwards;
}
@keyframes fireExplode {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.32); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

/* ===== Perfuração (Lanceira) — estocada prateada numa reta ===== */
.skill-lance {
  position: fixed; z-index: 320; pointer-events: none;
  height: 9px; width: 44px; transform-origin: left center; border-radius: 5px;
  background: linear-gradient(90deg, transparent, #cfe6ff 18%, #ffffff 52%, #9ec8ff 82%, transparent);
  filter: drop-shadow(0 0 8px rgba(150,200,255,1)) drop-shadow(0 0 18px rgba(90,150,255,.7));
  animation: lanceThrust .24s ease-out forwards;
}
@keyframes lanceThrust {
  from { transform: rotate(var(--ang)) scaleX(.18); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: rotate(var(--ang)) scaleX(var(--len, 3)); opacity: .92; }
}
.pierce-hit {
  position: fixed; z-index: 60; width: 40px; height: 40px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(225,242,255,.95), rgba(120,175,255,.35) 55%, transparent 76%);
  animation: pierceHit .55s ease-out forwards;
}
@keyframes pierceHit {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.28); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

/* ===== Rodopio Cortante (Lanceira) — anel girando ao redor da heroína + sangramento ===== */
.spear-whirl {
  position: fixed; z-index: 320; width: 92px; height: 92px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,90,90,.92) 40deg, transparent 90deg, transparent 220deg, rgba(255,130,130,.8) 260deg, transparent 300deg);
  filter: drop-shadow(0 0 10px rgba(255,60,60,.8));
  animation: spearWhirl .52s linear forwards;
}
@keyframes spearWhirl {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(410deg) scale(1.5); }
}
.bleed-cloud {
  position: fixed; z-index: 60; width: 40px; height: 40px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(235,80,80,.85), rgba(150,30,30,.3) 60%, transparent 78%);
  animation: poisonCloud 1.05s ease-out forwards;
}

/* ===== Gancho da Morte (Herói da Foice) — corrente puxando o alvo + atordoamento ===== */
.skill-chain {
  position: fixed; z-index: 320; pointer-events: none;
  height: 7px; width: 44px; transform-origin: left center; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #6b6f7a 0 5px, #2b2e36 5px 9px);
  filter: drop-shadow(0 0 5px rgba(30,30,36,.9)) drop-shadow(0 0 10px rgba(120,90,60,.5));
  animation: chainYank .22s ease-in forwards;
}
@keyframes chainYank {
  from { transform: rotate(var(--ang)) scaleX(.15); opacity: 0; }
  35%  { opacity: 1; transform: rotate(var(--ang)) scaleX(var(--len, 3)); }
  to   { opacity: .9; transform: rotate(var(--ang)) scaleX(var(--len, 3)); }
}
.hook-hit {
  position: fixed; z-index: 60; width: 38px; height: 38px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,236,150,.95), rgba(210,170,60,.35) 55%, transparent 78%);
  animation: pierceHit .5s ease-out forwards;
}

/* ===== Dança da Foice (Herói da Foice) — foice girando ao redor + dreno de vida ===== */
.scythe-reap {
  position: fixed; z-index: 320; width: 104px; height: 104px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120,240,170,.9) 34deg, transparent 84deg, transparent 200deg, rgba(90,220,150,.75) 250deg, transparent 300deg);
  filter: drop-shadow(0 0 12px rgba(60,220,130,.75));
  animation: scytheReap .5s linear forwards;
}
@keyframes scytheReap {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-430deg) scale(1.55); }
}
.reap-cloud {
  position: fixed; z-index: 60; width: 42px; height: 42px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(130,245,180,.85), rgba(40,170,100,.3) 60%, transparent 80%);
  animation: poisonCloud 1s ease-out forwards;
}

/* ===== Julgamento (Cavaleiro/Cruzado) — raio de luz sagrada + pilar no alvo ===== */
.holy-bolt {
  position: fixed; z-index: 320; pointer-events: none;
  width: 10px; height: 30px; border-radius: 6px; transform-origin: center;
  background: linear-gradient(180deg, rgba(255,255,240,0), #fffbe0 40%, #ffe58a 100%);
  filter: drop-shadow(0 0 8px rgba(255,240,170,1)) drop-shadow(0 0 18px rgba(255,210,90,.8));
  animation: holyBoltFly .26s linear forwards;
}
@keyframes holyBoltFly {
  from { transform: translate(0, -20px); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)); opacity: 1; }
}
.smite-pillar {
  position: fixed; z-index: 60; width: 46px; height: 150px; pointer-events: none;
  transform: translate(-50%, -86%);
  background: linear-gradient(180deg, rgba(255,252,235,0) 0%, rgba(255,250,220,.95) 45%, rgba(255,224,130,.9) 78%, rgba(255,200,80,.15) 100%);
  border-radius: 50% 50% 12px 12px;
  filter: drop-shadow(0 0 16px rgba(255,235,150,.9));
  animation: smitePillar .78s ease-out forwards;
}
@keyframes smitePillar {
  0%   { opacity: 0; transform: translate(-50%, -86%) scaleY(.2) scaleX(.6); }
  20%  { opacity: 1; transform: translate(-50%, -86%) scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -86%) scaleY(1) scaleX(1.3); }
}

/* ===== Aura de Fé (Cavaleiro/Cruzado) — halo dourado + cura ao longo do tempo ===== */
.faith-aura {
  position: fixed; z-index: 320; width: 110px; height: 110px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, transparent 44%, rgba(255,238,160,.75) 52%, rgba(255,250,225,.35) 62%, transparent 72%);
  filter: drop-shadow(0 0 14px rgba(255,230,140,.8));
  animation: faithAura .95s ease-out forwards;
}
@keyframes faithAura {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
.faith-cloud {
  position: fixed; z-index: 60; width: 40px; height: 40px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,225,.9), rgba(255,224,140,.35) 58%, transparent 80%);
  animation: poisonCloud 1.15s ease-out forwards;
}

/* ===== Rajada de Golpes (Lutador) — soco veloz + impacto ===== */
.fist-jab {
  position: fixed; z-index: 320; pointer-events: none;
  height: 8px; width: 40px; transform-origin: left center; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #ffe9a8 30%, #fff 60%, transparent);
  filter: drop-shadow(0 0 6px rgba(255,220,130,.9)) drop-shadow(0 0 12px rgba(255,180,60,.6));
  animation: fistJab .15s linear forwards;
}
@keyframes fistJab {
  from { transform: rotate(var(--ang)) scaleX(.2); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: rotate(var(--ang)) scaleX(var(--len, 3)); opacity: .9; }
}
.jab-hit {
  position: fixed; z-index: 60; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,244,200,.95), rgba(255,190,80,.35) 55%, transparent 78%);
  animation: pierceHit .42s ease-out forwards;
}
.skill-burst.flurry { background: radial-gradient(circle, rgba(255,240,190,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(255,210,110,.55); }

/* ===== Esquiva & Contra (Lutador) — borrão de movimento + esquiva ===== */
.evade-blur {
  position: fixed; z-index: 320; width: 84px; height: 84px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(220,235,255,.7) 60deg, transparent 140deg, transparent 240deg, rgba(190,215,255,.55) 300deg, transparent 340deg);
  filter: drop-shadow(0 0 8px rgba(190,220,255,.7));
  animation: evadeBlur .4s linear forwards;
}
@keyframes evadeBlur {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(320deg) scale(1.3); }
}
.evade-flash {
  position: fixed; z-index: 60; width: 36px; height: 36px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(225,240,255,.9), rgba(150,190,255,.3) 60%, transparent 80%);
  animation: pierceHit .6s ease-out forwards;
}
/* aplicado no NÓ da unidade quando ela esquiva de um golpe */
.dodge-blur { animation: dodgeSidestep .25s ease-out; }
@keyframes dodgeSidestep {
  0%   { transform: translateX(0); opacity: 1; }
  40%  { transform: translateX(-9px); opacity: .45; }
  70%  { transform: translateX(5px); opacity: .8; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ===== Meteoro (Mágico) — rocha flamejante despencando + explosão grande ===== */
.meteor-rock {
  position: fixed; z-index: 320; pointer-events: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2c0, #ff9a2e 45%, #b83010 80%);
  box-shadow: 0 0 10px 3px rgba(255,140,40,.8), -12px -15px 12px 3px rgba(255,120,30,.45);
  filter: drop-shadow(-10px -13px 6px rgba(255,90,20,.55));
  animation: meteorFall .2s cubic-bezier(.55,0,.9,.5) forwards;
}
@keyframes meteorFall {
  from { transform: translate(0, 0) scale(.5); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) scale(1.05); opacity: 1; }
}
.meteor-blast {
  position: fixed; z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,246,200,.98), rgba(255,140,40,.85) 36%, rgba(190,40,20,.35) 66%, transparent 82%);
  box-shadow: 0 0 18px 7px rgba(255,120,30,.45);
  animation: fireExplode .5s ease-out forwards;
}
/* onda de choque que mostra o RAIO de uma magia de área (--aoe = diâmetro em px) */
.aoe-ring {
  position: fixed; z-index: 59; width: var(--aoe, 200px); height: var(--aoe, 200px);
  border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border: 3px solid rgba(255,170,70,.85);
  box-shadow: 0 0 18px 4px rgba(255,130,40,.5), inset 0 0 24px 6px rgba(255,140,50,.35);
  animation: aoeRing .58s ease-out forwards;
}
@keyframes aoeRing {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* clarão de impacto de golpe de área em CADA alvo atingido */
.aoe-hit {
  position: fixed; z-index: 61; width: 38px; height: 38px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(224,245,255,.95), rgba(120,190,255,.6) 45%, transparent 78%);
  box-shadow: 0 0 14px 5px rgba(110,190,255,.45);
  animation: fireExplode .42s ease-out forwards;
}

/* ===== Cadeia de Raios (Mágico) — raio elétrico entre inimigos ===== */
.lightning-bolt {
  position: fixed; z-index: 320; pointer-events: none;
  height: 6px; width: 44px; transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #bff0ff 22%, #fff 50%, #8fd8ff 78%, transparent);
  filter: drop-shadow(0 0 6px rgba(150,230,255,1)) drop-shadow(0 0 14px rgba(80,180,255,.8));
  animation: lightningBolt .14s steps(2) forwards;
}
@keyframes lightningBolt {
  from { transform: rotate(var(--ang)) scaleX(.2); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: rotate(var(--ang)) scaleX(var(--len, 3)); opacity: .85; }
}
.shock-hit {
  position: fixed; z-index: 60; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(220,245,255,.95), rgba(110,190,255,.35) 55%, transparent 78%);
  animation: pierceHit .45s ease-out forwards;
}
.skill-burst.shock { background: radial-gradient(circle, rgba(190,240,255,.95), transparent 70%); box-shadow: 0 0 22px 11px rgba(90,190,255,.6); }

.ch-log-skill { color: #ff9a5b; font-weight: 700; }
.char-log {
  height: 92px; overflow: auto; background: #0a0d12; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px; font-size: .72rem; margin-top: 10px;
}
.char-log div { padding: 1px 0; color: var(--text); }
.ch-log-wave { color: var(--gold); font-weight: 700; }
.ch-log-drop { color: #4ade80; }
.char-result { display: flex; flex-direction: column; gap: 4px; }
.cr-row { display: flex; justify-content: space-between; background: var(--panel2); border-radius: 6px; padding: 5px 8px; font-size: .8rem; }
.cr-row.big b { color: var(--gold); font-size: 1rem; }
.cr-row span { color: var(--muted); }
.cr-drop { display: flex; align-items: center; gap: 6px; font-size: .72rem; background: rgba(240,180,0,.08); border: 1px solid rgba(240,180,0,.35); border-radius: 6px; padding: 3px 6px; }
.cr-drop img { width: 20px; height: 20px; object-fit: contain; }
.cr-drop i { color: var(--muted); }
/* calha de caixinhas de drop */
.char-hunt-row { display: flex; gap: 10px; align-items: stretch; }
.char-hunt-row > div:first-child { flex: 1; min-width: 0; }
.char-loot-rail {
  width: 86px; flex: 0 0 auto; display: flex; flex-direction: column;
}
.char-loot-rail label { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.char-loot-rail > div {
  display: flex; flex-direction: column; gap: 5px; overflow: auto; max-height: 470px;
  background: #0a0d12; border: 1px solid var(--border); border-radius: 6px; padding: 5px;
}
.loot-box {
  width: 44px; height: 44px; margin: 0 auto; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel2); border: 2px solid var(--border); border-radius: 6px;
  font-size: 1.15rem; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; user-select: none;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  animation: lootPop .25s cubic-bezier(.2,1.4,.4,1);
}
@keyframes lootPop { from { transform: scale(0); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
.loot-box:hover { transform: scale(1.12); }
.loot-box.r-comum { border-color: #6b7686; }
.loot-box.r-raro { border-color: #4d9fff; box-shadow: 0 0 6px rgba(77,159,255,.55); }
.loot-box.r-epico { border-color: #b06bff; box-shadow: 0 0 8px rgba(176,107,255,.7); }
.loot-box.r-lendario { border-color: #ffd000; box-shadow: 0 0 10px rgba(255,208,0,.8); }
.loot-box.opened {
  border-style: solid; cursor: default; background: rgba(240,180,0,.12);
  animation: lootOpen .3s ease;
}
.loot-box.opened img { width: 26px; height: 26px; object-fit: contain; }
.loot-box.opened b { font-size: .42rem; color: var(--gold); text-align: center; }
.loot-box .chest-ico { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.loot-box .chest-count { font-size: .5rem; color: #fff; text-shadow: 0 1px 2px #000; line-height: 1; }
.loot-box.r-comum .chest-ico { filter: drop-shadow(0 0 3px rgba(107,118,134,.8)); }
.loot-box.r-raro .chest-ico { filter: drop-shadow(0 0 4px rgba(77,159,255,.8)); }
.loot-box.r-epico .chest-ico { filter: drop-shadow(0 0 5px rgba(176,107,255,.9)); }
.loot-box.r-lendario .chest-ico { filter: drop-shadow(0 0 6px rgba(255,208,0,.9)); }
@keyframes lootOpen { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-8deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } }
.cr-row.warn b { color: #ff7b7b; }
/* forja do modo upar */
.char-forge-wrap { margin-top: 10px; }
.char-forge-wrap > label { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.char-forge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.char-fuse-slots { display: flex; gap: 6px; }
.char-fuse-slot {
  width: 44px; height: 44px; background: #0a0d12; border: 2px dashed rgba(77,159,255,.5);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer;
}
.char-fuse-slot:not(.empty):hover { border-color: #ff7b7b; }
.char-fuse-slot.empty { color: var(--muted); font-size: 1rem; cursor: default; }
.char-fuse-slot img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.char-fuse-arrow { color: var(--gold); font-size: 1.1rem; font-weight: 800; }
.char-fuse-result {
  width: 48px; height: 48px; background: rgba(240,180,0,.1); border: 2px solid var(--gold);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.char-fuse-result.empty { border-style: dashed; border-color: var(--border); color: var(--muted); }
.char-fuse-result.none { border-color: #ff7b7b; color: #ff7b7b; }
.char-fuse-result img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.char-fuse-result span { font-size: .5rem; text-align: center; padding: 2px; }
.char-inv.forge { min-height: 44px; }
.char-forge-item {
  width: 40px; height: 40px; background: var(--panel2); border: 1px solid rgba(77,159,255,.5);
  border-radius: 6px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s, border-color .1s;
}
.char-forge-item:hover { transform: scale(1.1); border-color: #4d9fff; }
.char-forge-item.selected { border-color: var(--gold); box-shadow: 0 0 8px rgba(240,180,0,.7); }
.char-forge-item img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.char-forge-item span { font-size: .5rem; text-align: center; padding: 2px; }

/* Números de dano flutuantes no combate */
.float-dmg {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  font-weight: 800; font-size: 1rem; z-index: 9; pointer-events: none;
  color: #fff; text-shadow: 0 1px 3px #000; opacity: 0;
}
.float-dmg.crit { color: #ffd600; font-size: 1.25rem; }
.float-dmg.kill { color: #ff6b6b; }
.float-dmg.up { animation: floatUp .7s ease-out forwards; }
/* número de cura (lifesteal) */
.float-heal {
  font-weight: 800; font-size: .95rem; z-index: 9; pointer-events: none;
  color: #4ade80; text-shadow: 0 1px 3px #000; opacity: 0;
}
.float-heal.up { animation: floatUp .7s ease-out forwards; }
@keyframes floatUp {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -34px); }
}

/* Bench */
.bench-section { margin-top: 10px; }
.bench-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.bench {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px;
  min-height: 64px;
}
.bench-cell { position: relative; aspect-ratio: 1/1; background: #10151d; border: 1px solid #222c3a; border-radius: 6px; overflow: hidden; }
.bench-cell.drop-target { outline: 2px solid var(--gold); }

/* Shop */
.shop-header { display: flex; align-items: center; justify-content: space-between; }
.shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.shop-card {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative;
  animation: cardIn .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes cardIn { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.shop-card:hover {
  transform: translateY(-4px) scale(1.04);
  outline: 2px solid var(--gold);
  box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px rgba(240,180,0,.25);
  z-index: 4;
}
.shop-card.bought { animation: cardBuy .5s ease forwards; }
@keyframes cardBuy { 0% { transform: scale(1); } 30% { transform: scale(1.15); box-shadow: 0 0 22px rgba(240,180,0,.7); } 100% { transform: scale(.6); opacity: 0; } }
.shop-card .thumb { position: relative; height: 64px; background: #0a0d12; }
.shop-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.shop-card:hover .thumb img { transform: scale(1.15); }
.shop-card .cost-ring { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; background: #000; z-index: 2; }
.shop-card .cname { font-size: .68rem; text-align: center; padding: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card .syn-tags { display: flex; justify-content: center; gap: 2px; padding-bottom: 3px; flex-wrap: wrap; }
.syn-tag { font-size: .55rem; background: var(--panel2); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; color: var(--muted); }

.shop-odds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 10px; font-size: .6rem; text-align: center; color: var(--muted); }
.shop-odds span { background: var(--bg2); border-radius: 3px; padding: 2px; }

/* Synergies list */
.synergy-list { display: flex; flex-direction: column; gap: 6px; }
.syn-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; border-radius: 6px; padding: 3px 4px; transition: background .2s; }
.syn-item .syn-count { font-weight: 800; color: var(--gold); min-width: 18px; }
.syn-item .syn-name { flex: 1; }
.syn-item .syn-tier { font-size: .68rem; background: var(--panel2); border-radius: 3px; padding: 1px 5px; color: var(--muted); }
.syn-item.inactive { opacity: .45; }
.syn-item.activating { animation: synPulse .8s ease; }
@keyframes synPulse {
  0%,100% { background: transparent; }
  50% { background: rgba(240,180,0,.15); box-shadow: inset 0 0 0 1px rgba(240,180,0,.3); }
}

/* Items / Forge */
.item-forge { display: flex; flex-direction: column; gap: 6px; }
.forge-components { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.item-thumb { position: relative; aspect-ratio: 1/1; background: #0a0d12; border: 1px solid var(--border); border-radius: 6px; cursor: grab; overflow: hidden; }
.item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.item-thumb.dragging { opacity: .5; }

/* Inventário (gragamentos) */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px; min-height: 36px; }
.inventory-grid .inv-thumb { border-color: var(--gold); box-shadow: 0 0 6px rgba(255, 215, 0, .25); }
.inventory-grid .muted { color: var(--muted); font-size: .72rem; }
.inventory-grid .small { font-size: .72rem; }
/* seções do inventário: fragmentos x itens completos */
.inv-section-title {
  grid-column: 1 / -1; font-size: .68rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.inv-section-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.inv-section-row .inv-thumb { width: 36px; height: 36px; flex: 0 0 auto; overflow: hidden; }
.inv-section-row .inv-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
/* aura pulsante em itens que podem ser fundidos agora */
.inv-thumb.fuseable {
  border-color: #ffe066 !important;
  animation: fuseablePulse 1.25s ease-in-out infinite;
}
@keyframes fuseablePulse {
  0%, 100% { box-shadow: 2px 2px 0 rgba(0,0,0,.6), 0 0 4px 1px rgba(240,180,0,.55) !important; }
  50%      { box-shadow: 2px 2px 0 rgba(0,0,0,.6), 0 0 12px 4px rgba(240,180,0,.95) !important; }
}

/* Animação de gragamento (drop) caindo da célula */
.drop-pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%) translateY(0); z-index: 60; pointer-events: none; animation: dropRise 1.05s ease-out forwards; }
.drop-pop img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,215,0,.8)); }
.drop-coin { font-size: 22px; filter: drop-shadow(0 0 6px rgba(255,215,0,.9)); }
.drop-item { background: rgba(10,13,18,.9); border: 1px solid var(--gold); border-radius: 6px; padding: 2px; box-shadow: 0 0 12px rgba(255,215,0,.7); }
.drop-item span { font-size: 9px; color: var(--muted); white-space: nowrap; }
@keyframes dropRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.6); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-38px) scale(.9); }
}


/* Combat controls & log */
.combat-controls { margin-bottom: 8px; }
.log { background: var(--bg2); border-radius: 8px; padding: 8px; height: 220px; overflow-y: auto; font-size: .75rem; line-height: 1.5; }
.log-entry { border-bottom: 1px solid #1a2230; padding: 3px 0; }
.log-win { color: var(--green); }
.log-loss { color: #f87171; }
.log-title { color: var(--muted); font-weight: 700; }
.combat-status { color: var(--muted); font-size: .85rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.modal-card, .gameover-card {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; max-width: 360px; width: 90%; z-index: 2;
}
.detail-header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.detail-thumb { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; background: #0a0d12; position: relative; }
.detail-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-name { font-size: 1.1rem; font-weight: 800; }
.detail-cost { color: var(--gold); }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .82rem; }
.detail-stats .ds { display: flex; justify-content: space-between; }
.detail-stats .ds b { color: var(--muted); font-weight: 600; }
.detail-syns { margin-top: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.detail-actions { display: flex; gap: 8px; margin-top: 14px; }
.detail-actions .btn { flex: 1; }

.gameover-card { text-align: center; }
.gameover-card h2 { margin-bottom: 8px; }
.gameover-card .btn { margin-top: 14px; }

/* Gragamentos (revelação de loot) */
.loot-card {
  position: relative; background: var(--panel); border: 1px solid var(--gold);
  border-radius: 16px; padding: 24px 26px; max-width: 360px; width: 92%; z-index: 2;
  text-align: center; box-shadow: 0 0 40px rgba(240,180,0,.25);
  animation: lootCardIn .4s ease-out;
}
@keyframes lootCardIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.loot-title { font-size: 1.6rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 18px rgba(240,180,0,.6); }
.loot-sub { color: var(--muted); font-size: .8rem; margin-bottom: 16px; }
.loot-stack { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.loot-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .35s ease, transform .35s ease;
}
.loot-item.in { opacity: 1; transform: translateY(0) scale(1); }
.loot-item img { width: 34px; height: 34px; object-fit: contain; border: 1px solid var(--gold); border-radius: 6px; background: #0a0d12; padding: 2px; box-shadow: 0 0 10px rgba(240,180,0,.5); }
.loot-fallback { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); border-radius: 6px; font-size: 9px; color: var(--muted); }
.loot-name { flex: 1; text-align: left; font-weight: 700; font-size: .85rem; }
.loot-arrow { color: var(--gold); font-size: .72rem; white-space: nowrap; }


/* Menu inicial */
.menu-card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 24px; max-width: 420px; width: 92%; z-index: 2;
  text-align: center;
}
.menu-hero { margin-bottom: 18px; }
.menu-logo { font-size: 1.9rem; font-weight: 900; letter-spacing: .5px; }
.menu-logo span { color: var(--gold); }
.menu-sub { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.menu-rank {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 16px;
}
.rank-title { font-size: 1.5rem; font-weight: 900; color: var(--gold); margin-bottom: 4px; }
.rank-score { font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.rank-progress { height: 8px; background: #0a0d12; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.rank-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #ffd966); }
.rank-next { font-size: .72rem; color: var(--muted); margin-bottom: 14px; }
.rank-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs { background: var(--panel2); border-radius: 8px; padding: 8px 4px; }
.rs span { display: block; font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rs b { font-size: 1.15rem; color: var(--text); }
.menu-last { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.menu-start { font-size: 1.05rem; padding: 14px; }
.menu-reset { margin-top: 10px; background: transparent; color: var(--muted); border-color: var(--border); }

/* Rank no game over */
.rank-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 10px; }
.rank-badge {
  background: linear-gradient(135deg, var(--gold), #d89a00); color: #1a1400;
  font-weight: 900; border-radius: 999px; padding: 5px 16px; font-size: .9rem;
}
.rank-score { color: var(--text); font-weight: 700; }
.rank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.rg { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 2px; }
.rg span { display: block; font-size: .6rem; color: var(--muted); text-transform: uppercase; }
.rg b { font-size: 1.2rem; color: var(--gold); }

/* Tooltip de item (atributos) */
.item-tooltip {
  position: fixed; z-index: 200; max-width: 240px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 20px rgba(240,180,0,.2);
  font-size: .78rem; line-height: 1.45;
  /* rede de segurança: item com MUITA informação não deve vazar pra fora da tela —
     o JS (positionItemTip) já reposiciona pelo tamanho real, isto só cobre o caso
     em que o conteúdo é mais alto que a própria janela */
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.item-tooltip[hidden] { display: none; }
.it-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.it-icon img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--gold); border-radius: 6px; background: #0a0d12; padding: 2px; }
.it-title { font-weight: 800; color: var(--gold); }
.it-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.it-stat { color: var(--text); }
.it-eff { color: #8fd0ff; margin-bottom: 4px; }
.it-desc { color: var(--muted); font-size: .72rem; margin-top: 4px; }
.it-rec { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
.it-rec b { color: var(--gold); }

/* comparação com o item equipado (hover no inventário) */
.it-cmp { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.18); }
.it-cmp-head { font-weight: 800; font-size: .82rem; }
.it-cmp-head.up { color: #4ade80; }
.it-cmp-head.down { color: #ff7a7a; }
.it-cmp-head.eq { color: #cdd5df; }
.it-cmp-sub { color: var(--muted); font-size: .68rem; margin-bottom: 3px; }
.it-cmp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: baseline; font-size: .78rem; }
.it-cmp-row span { color: var(--muted); }
.it-cmp-row b { font-weight: 800; }
.it-cmp-row i { color: #7c8794; font-size: .64rem; font-style: normal; }
.it-cmp-row.up b { color: #4ade80; }
.it-cmp-row.down b { color: #ff7a7a; }
.it-cmp-row.eq span { color: #7c8794; }

/* Partículas de fusão/coleta de item */
.fuse-particle {
  position: fixed; z-index: 300; width: 6px; height: 6px; border-radius: 50%;
  background: #f0b400; box-shadow: 0 0 8px #f0b400;
  pointer-events: none;
  animation: fuseFly .65s ease-out forwards;
}
@keyframes fuseFly {
  from { transform: translate(-50%, -50%) translate(0,0) scale(1); opacity: 1; }
  to { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
}

/* Estados de coleta (loot) */
.loot-item.clickable { cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; }
.loot-item.collected { opacity: .6; }
.loot-item.collected .collect { color: var(--green) !important; }

/* ===== BANCO DE FUSÃO ===== */
.fuse-bench {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px;
}
.fuse-slot {
  width: 52px; height: 52px; border-radius: 8px;
  border: 2px dashed var(--muted, #555);
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; position: relative; transition: border-color .15s, background .15s;
  overflow: hidden;
}
.fuse-slot.fuse-over { border-color: var(--gold, #f0b400); background: rgba(240,180,0,.12); }
.fuse-slot.filled { border-style: solid; border-color: var(--gold, #f0b400); }
.fuse-slot-hint { color: var(--muted, #777); font-size: 20px; font-weight: 700; }
.fuse-slot-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.fuse-slot-item img { width: 88%; height: 88%; object-fit: contain; }
.fuse-slot-name { font-size: 8px; color: #ddd; text-align: center; word-break: break-all; }
.fuse-arrow { color: var(--gold, #f0b400); font-size: 18px; font-weight: 800; }
.btn-fuse { width: 100%; margin-top: 8px; }
.btn-fuse:disabled { opacity: .45; cursor: not-allowed; }
@keyframes fuseBrewPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fuse-result {
  position: fixed; z-index: 1200; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: fuseBrewPop .45s cubic-bezier(.2,1.6,.4,1), fuseBrewRise 1.1s ease-out forwards;
}
.fuse-result img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 0 10px gold); }
@keyframes fuseBrewRise { 0% { transform: translateY(6px) scale(1); } 50% { transform: translateY(-14px) scale(1.25); opacity: 1; } 100% { transform: translateY(-30px) scale(.5); opacity: 0; } }

/* ===== Efeito impactante de fusão ===== */
.fuse-flash {
  position: fixed; inset: 0; z-index: 1300; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,220,120,.5) 40%, transparent 75%);
  animation: fuseFlashAnim .65s ease-out forwards;
}
@keyframes fuseFlashAnim { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.fuse-ring {
  position: fixed; z-index: 1290; pointer-events: none; width: 30px; height: 30px;
  border-radius: 50%; border: 4px solid gold; transform: translate(-50%,-50%);
  box-shadow: 0 0 30px 10px rgba(255,200,60,.7), inset 0 0 20px rgba(255,255,255,.6);
  animation: fuseRingAnim .85s ease-out forwards;
}
@keyframes fuseRingAnim { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 340px; height: 340px; opacity: 0; } }
.fuse-firework {
  position: fixed; z-index: 1280; pointer-events: none; width: 9px; height: 9px; border-radius: 50%;
  background: hsl(var(--hue), 95%, 62%);
  box-shadow: 0 0 10px 2px hsl(var(--hue), 95%, 60%);
  animation: fuseFireAnim .9s ease-out forwards;
}
@keyframes fuseFireAnim {
  0% { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
}
.fuse-ray {
  position: fixed; z-index: 1260; pointer-events: none; height: 3px; width: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,200,80,.6) 60%, transparent);
  box-shadow: 0 0 12px 2px rgba(255,220,120,.9);
  animation: fuseRayAnim .4s ease-out forwards;
}
@keyframes fuseRayAnim {
  0% { width: 20px; opacity: 1; }
  100% { width: var(--len); opacity: 0; }
}
.fuse-big-result {
  position: fixed; z-index: 1320; pointer-events: none; transform: translate(-50%,-50%);
  width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: 14px; text-align: center;
  background: rgba(12,10,4,.85); border: 2px solid gold;
  box-shadow: 0 0 25px 6px rgba(240,180,0,.65), inset 0 0 18px rgba(240,180,0,.25);
  opacity: 0; transform: translate(-50%,-50%) scale(.4);
}
.fuse-big-result.show { animation: fuseBigPop .5s cubic-bezier(.2,1.7,.4,1) forwards, fuseBigFloat 1.5s ease-out .2s forwards; }
.fbr-badge {
  font-size: 10px; font-weight: 800; color: #000; background: gold; border-radius: 999px; padding: 2px 10px;
  text-transform: uppercase; letter-spacing: 1px; animation: fuseGlowBg 1.3s ease-in-out infinite;
}
.fbr-icon { position: relative; width: 74px; height: 74px; filter: drop-shadow(0 0 10px gold); }
.fbr-icon img { width: 100%; height: 100%; object-fit: contain; }
.fbr-icon-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: .62rem; font-weight: 800; color: gold; text-align: center; }
.fbr-orbit { position: absolute; inset: -14px; pointer-events: none; }
.fbr-orbit .op-dot {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: hsl(var(--hue), 95%, 65%);
  box-shadow: 0 0 7px 2px hsl(var(--hue), 95%, 60%);
  animation: opOrbit var(--dur) linear var(--delay) infinite;
}
@keyframes opOrbit {
  from { transform: rotate(var(--a)) translateX(52px) scale(1); opacity: 1; }
  to   { transform: rotate(calc(var(--a) + 360deg)) translateX(52px) scale(.45); opacity: .35; }
}
.fbr-name { font-size: 11px; font-weight: 800; color: gold; }
@keyframes fuseBigPop { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 60% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes fuseBigFloat { 0% { transform: translate(-50%,-50%) translateY(0) scale(1); } 20% { transform: translate(-50%,-50%) translateY(-16px) scale(1.06); } 100% { transform: translate(-50%,-50%) translateY(-46px) scale(.85); opacity: 0; } }
@keyframes fuseGlowBg { 0%,100% { box-shadow: 0 0 6px gold; } 50% { box-shadow: 0 0 16px 4px gold; } }


/* ===== BAÚ DE ESCOLHA ===== */
.chest-card {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #1a1508, #0d0b06);
  border: 2px solid var(--gold, #f0b400); border-radius: 16px;
  padding: 22px 26px; max-width: 640px; width: 92%;
  text-align: center; box-shadow: 0 0 40px rgba(240,180,0,.35);
}
.chest-title { font-size: 1.4rem; font-weight: 800; color: var(--gold, #f0b400); margin-bottom: 4px; }
.chest-sub { color: #ccc; font-size: .85rem; margin-bottom: 14px; }
.chest-closed { cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; display: inline-block; padding: 10px 26px; border-radius: 12px; transition: transform .15s; }
.chest-closed:hover { transform: scale(1.06); }
.chest-ico { font-size: 72px; line-height: 1; filter: drop-shadow(0 0 14px rgba(240,180,0,.7)); }
.chest-ico-closed { animation: chestShake 1.6s ease-in-out infinite; }
@keyframes chestShake { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
.chest-open-hint { color: var(--gold, #f0b400); font-size: .8rem; margin-top: 8px; opacity: .85; }
.chest-options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.chest-opt {
  width: 150px; background: rgba(0,0,0,.45); border: 2px solid #6b5a20; border-radius: 12px;
  padding: 12px 10px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  animation: chestOptIn .35s cubic-bezier(.2,1.5,.4,1) backwards;
}
@keyframes chestOptIn { 0% { transform: translateY(18px) scale(.7); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.chest-opt:hover { transform: translateY(-4px) scale(1.04); border-color: var(--gold, #f0b400); box-shadow: 0 0 18px rgba(240,180,0,.45); }
.chest-opt.disabled { pointer-events: none; opacity: .35; }
.chest-opt .ch-icon { width: 52px; height: 52px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.chest-opt .ch-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(240,180,0,.6)); }
.chest-opt .ch-icon span { font-size: .72rem; color: #ddd; }
.chest-opt .ch-name { font-weight: 800; color: #ffe9a8; font-size: .8rem; margin-bottom: 6px; }
.chest-opt .ch-stats { font-size: .72rem; color: #9fd6ff; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; min-height: 18px; }
.chest-opt .ch-choose {
  font-size: .72rem; font-weight: 800; color: #000; background: var(--gold, #f0b400);
  border-radius: 999px; padding: 3px 10px; display: inline-block; text-transform: uppercase;
}

/* Responsive */
@media (max-width: 1100px) {
  .main-layout { grid-template-columns: 1fr; }
  .synergies-panel { order: 3; }
  .shop-panel { order: 2; }
}
@media (max-width: 700px) {
  .hud-actions { width: 100%; justify-content: center; }
  .board-grid { gap: 2px; padding: 4px; }
  .bench { grid-template-columns: repeat(5, 1fr); }
  .shop { grid-template-columns: repeat(3, 1fr); }
  .champ .star { font-size: 6px; }
  .champ .cost-badge { width: 11px; height: 11px; font-size: 7px; }
}

/* ============================================================ */
/* ================== PIXEL ART GAMER THEME =================== */
/* ============================================================ */

:root {
  --font: 'VT323', 'Courier New', monospace;
  --radius: 0px;
  --px: 'Press Start 2P', 'Courier New', monospace;
}

/* tudo pixelado de verdade */
img, .sprite, .it-icon-mini, .inv-thumb img, .item-thumb img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* corpo: fonte pixel + scanlines de CRT */
body {
  font-family: 'VT323', 'Courier New', monospace !important;
  font-size: 19px;
  letter-spacing: .3px;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  opacity: .5;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* títulos e elementos de destaque com fonte de arcade */
h1, h2, h3, .logo, .loot-title, .chest-title, .fbr-badge, .fbr-name,
.round-badge, .res b, .rank-badge, .be-title, .cost-badge, .cost-ring {
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
}
h3 { font-size: .72rem !important; letter-spacing: 1px; text-transform: uppercase; }
.logo { font-size: .85rem !important; text-shadow: 3px 3px 0 #000 !important; }
.logo span { text-shadow: 3px 3px 0 #000 !important; }

/* painéis: cantos retos, borda grossa preta, sombra dura */
.panel, .modal-card, .gameover-card, .menu-card, .loot-card, .chest-card, .item-tooltip {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.07), 5px 5px 0 rgba(0,0,0,.65) !important;
}
.panel { background: var(--panel) !important; }
/* box do item: sem sombra preta dura / inset frio, só um brilho dourado suave */
.item-tooltip { box-shadow: 0 3px 14px rgba(0,0,0,.3), 0 0 12px rgba(240,180,0,.2) !important; }

/* botões pixel: sombra dura que "afunda" ao clicar */
.btn, .btn-small, .btn-primary, .btn-gold, .btn-fuse {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: .58rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 9px 12px !important;
  transition: transform .04s, box-shadow .04s, filter .1s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active, .btn-small:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 #000 !important;
}
.btn-small { padding: 6px 8px !important; font-size: .6rem !important; }

/* HUD superior */
.hud-top { border-bottom: 3px solid #000 !important; }
.round-badge {
  border-radius: 0 !important;
  border: 2px solid #000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6) !important;
  font-size: .55rem !important;
  padding: 6px 9px !important;
}
.res {
  border-radius: 0 !important;
  border: 2px solid #000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6) !important;
  font-size: 1.15rem !important;
  padding: 3px 10px !important;
}
.res b { font-size: .68rem !important; }

/* tabuleiro, células e bancada: tudo reto */
.board-grid, .board-grid .cell, .bench, .bench-cell,
.shop, .shop-card, .inventory-grid, .fuse-slot, .fuse-bench {
  border-radius: 0 !important;
}
.board-grid .cell { border: 1px solid rgba(0,0,0,.55) !important; }
.shop-card {
  border: 2px solid #000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6) !important;
}
.cost-ring {
  border-radius: 0 !important;
  border: 2px solid #000 !important;
  font-size: .55rem !important;
}
.bench-cell { border: 2px dashed rgba(255,255,255,.16) !important; }

/* barras de vida/mana em estilo pixel */
.champ .hp-bar, .champ .mana-bar { outline: 1px solid rgba(0,0,0,.6); }
.champ .hp-bar-fill {
  background: repeating-linear-gradient(90deg, var(--hp) 0 4px, #b91c1c 4px 6px) !important;
}
.champ .cost-badge {
  border-radius: 0 !important;
  border: 2px solid #000 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.7) !important;
  font-size: .5rem !important;
}
.champ .it-icon-mini { border-radius: 0 !important; border: 1px solid var(--gold) !important; }

/* inventário e bigorna */
.item-thumb, .inv-thumb {
  border-radius: 0 !important;
  border: 2px solid rgba(240,180,0,.55) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important;
}
.fuse-slot { border-width: 3px !important; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.fuse-arrow { font-family: 'Press Start 2P', monospace !important; }

/* log de combate: terminal retrô */
.log, #combatLog {
  font-family: 'VT323', monospace !important;
  font-size: 1.02rem !important;
  background: #05070b !important;
  border: 3px solid #000 !important;
  box-shadow: inset 0 0 12px rgba(0,0,255,.12) !important;
}

/* tooltip pixel */
.item-tooltip { border-radius: 0 !important; }
.item-tooltip .it-head, .item-tooltip .it-stat { font-family: 'VT323', monospace !important; font-size: 1.05rem; }
.item-tooltip .it-title { font-family: 'Press Start 2P', monospace !important; font-size: .6rem !important; }

/* baú e loot pixel */
.chest-card, .loot-card { border-radius: 0 !important; }
.chest-opt {
  border-radius: 0 !important;
  border: 3px solid #6b5a20 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6) !important;
}
.chest-ico { image-rendering: pixelated; }
.loot-item { border-radius: 0 !important; }
.loot-item img { border-radius: 0 !important; }

/* card do item fundido: pixel */
.fuse-big-result { border-radius: 0 !important; }
.fbr-badge { border-radius: 0 !important; font-size: .5rem !important; }
.fbr-name { font-size: .58rem !important; }
.chest-title { font-size: .8rem !important; }
.loot-title { font-size: .9rem !important; }

/* ranks e modais */
.rank-badge { font-size: .55rem !important; border-radius: 0 !important; border: 2px solid #000 !important; padding: 5px 8px !important; }
.gameover-card h2 { font-family: 'Press Start 2P', monospace !important; font-size: 1rem !important; }
.menu-card h1, .menu-card h2 { font-family: 'Press Start 2P', monospace !important; }

/* scrollbars pixeladas */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #05070b; }
::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid #000; }

/* seleção de texto na cor do jogo */
::selection { background: var(--gold); color: #000; }



/* ============================================================ */
/* ============== BANCADA 3D (pedestais pixel) ================ */
/* ============================================================ */

/* cada celula da bancada = pedestal de exposicao com profundidade */
.bench-cell {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #26334a 0%, #18202f 45%, #0d1220 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.09),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 7px 0 #070a12,
    0 9px 0 rgba(240,180,0,.3),
    0 13px 10px rgba(0,0,0,.55);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.bench-cell:hover {
  transform: translateY(-4px);
  filter: brightness(1.12);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 11px 0 #070a12,
    0 13px 0 rgba(240,180,0,.5),
    0 17px 12px rgba(0,0,0,.6);
}
.bench-cell.drop-target {
  outline: 3px solid var(--gold) !important;
  box-shadow:
    inset 0 0 14px rgba(240,180,0,.4),
    0 7px 0 #070a12,
    0 9px 0 rgba(240,180,0,.55),
    0 13px 10px rgba(0,0,0,.55);
}

/* brilho de vitrine no piso do pedestal */
.bench-cell::before {
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: 6px; height: 5px;
  background: linear-gradient(90deg, transparent, rgba(240,180,0,.35), transparent);
  pointer-events: none; z-index: 1;
}

/* heroi em exposicao com sombra propria no pedestal */
.bench-cell .champ { z-index: 2; }
.bench-cell .champ img.sprite {
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.6));
}
.bench-cell .champ:hover img.sprite {
  filter: brightness(1.15) drop-shadow(0 0 8px var(--glow-blue)) drop-shadow(0 5px 3px rgba(0,0,0,.6));
}

/* ===== AUGMENTS ===== */
.augment-card-wrap {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #141022, #0a0812);
  border: 3px solid #000; border-radius: 0;
  padding: 24px 26px; max-width: 680px; width: 94%;
  text-align: center; box-shadow: 0 0 40px rgba(110,225,255,.25), 5px 5px 0 rgba(0,0,0,.65);
}
.aug-title { font-family: 'Press Start 2P', monospace; font-size: .8rem; color: #6ee1ff; margin-bottom: 6px; text-shadow: 3px 3px 0 #000; }
.aug-sub { color: #aab; font-size: .85rem; margin-bottom: 16px; }
.aug-options { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.aug-opt {
  width: 180px; padding: 16px 12px; cursor: url('../img/ui/cursor_ouro_aceso.png') 2 2, pointer; text-align: center;
  background: rgba(0,0,0,.5); border: 3px solid #556; border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  transition: transform .12s, box-shadow .12s, filter .12s;
  animation: chestOptIn .35s cubic-bezier(.2,1.5,.4,1) backwards;
}
.aug-opt:hover { transform: translateY(-5px); filter: brightness(1.2); }
.aug-opt.aug-silver:hover { border-color: #becdd7; box-shadow: 4px 4px 0 rgba(190,205,215,.5); }
.aug-opt.aug-gold:hover { border-color: #ffcd4b; box-shadow: 4px 4px 0 rgba(255,205,75,.5); }
.aug-opt.aug-diamond:hover { border-color: #6ee1ff; box-shadow: 4px 4px 0 rgba(110,225,255,.5); }
.aug-tier-badge {
  display: inline-block; font-family: 'Press Start 2P', monospace; font-size: .5rem;
  border: 2px solid; padding: 3px 8px; margin-bottom: 10px; letter-spacing: 1px;
}
.aug-name { font-weight: 800; font-size: 1.05rem; color: #fff; margin-bottom: 8px; }
.aug-desc { font-size: .9rem; color: #9fb2c8; line-height: 1.35; }
.augment-list { display: flex; flex-direction: column; gap: 4px; }
.aug-taken {
  border: 1px solid; border-left-width: 4px; padding: 3px 8px;
  background: rgba(0,0,0,.3); font-size: .85rem;
}