/*static/css/ui_game.css/*
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&display=swap');
/* O Mapa agora ocupa 100% da tela de novo! */
body { padding-bottom: 0 !important; margin: 0; background-color: #111; }
#aba-reino.active { 
    display: block !important; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    padding: 0 !important; 
    margin: 0 !important;
    overflow: hidden; 
    z-index: 1;
    background: transparent !important; /* 🔥 OBRIGATÓRIO: Impede que a div tape o mapa */
}

#game-container { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: -1; /* 🔥 Coloca o container no fundo do contexto da aba */
    background: #000; 
}

/* ========================================== */
/* 🔮 HUD CIRCULAR (TAMANHO E CORTE CORRIGIDOS) */
/* ========================================== */
#hud-moderno {
position: absolute; top: 20px; left: 15px;
    width: 160px; height: 160px;
    z-index: 9999; cursor: pointer;
    transform: scale(0.65); /* 🔥 REDUZ O TAMANHO AQUI (Ex: 0.5, 0.7) 🔥 */
    transform-origin: top left;
    }

/* --- FUNDOS DOS ANÉIS (Controle Individual) --- */
#fundo-hp {
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 10px; /* Mesma espessura da cor do HP */
}

#fundo-mp {
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 8px; /* Mesma espessura da cor do MP */
}

#fundo-xp {
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2px; /* Mesma espessura da cor do XP */
}
  
/* ========================================== */
/* ⭕ CORES DOS ANÉIS DO HUD ⭕ */
/* ========================================== */

/* 1. Anel de Vida (HP) */
#barra-hp-css {
    stroke: #55fa08;       /* Verde da Vida */
    stroke-width: 10px;     /* Grossura da linha */
    filter: drop-shadow(0 0 5px rgba(8, 250, 29, 0.6)); /* Brilho */
}

/* 2. Anel de Mana (MP) */
#barra-mp-css {
    stroke: #3498db;       /* Azul da Mana */
    stroke-width: 8px;     /* Grossura da linha */
    filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.6));
}

/* 3. Anel de Experiência (XP) */
#barra-xp-css {
    stroke: #fde405;       /* Amarelo do XP */
    stroke-width: 2px;     /* Mais fina para dar destaque ao HP/MP */
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.6));
}

.hud-svg-aneis {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    }

/* 🔥 A MÁSCARA QUE CORTA A IMAGEM EM CÍRCULO 🔥 */
/* 1. O "BURACO" ONDE A FOTO FICA (A Máscara) */
.hud-mascara-avatar {
    position: absolute;
    top: 0;   
    left: 0;  
    width: 160px; /* Mesmo tamanho exato da caixa do SVG */
    height: 160px; 
    z-index: 5; /* 👈 O SEGREDO: Coloca o Panda POR CIMA das barras! */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    pointer-events: none; /* Deixa o clique passar através da foto */
}

/* 2. A FOTO EM SI (O Zoom no rosto) */
#hud-img-avatar {
    width: 250px;  /* 👈 DIMINUA OU AUMENTE AQUI para encaixar a argola dourada no vão livre! */
    height: 100px;
    object-fit: contain; /* Garante que a imagem nunca estique ou corte as laterais */
    object-position: center;
    
    /* Removemos o corte redondo e o zoom para não decepar as orelhas do Panda */
    border-radius: 0; 
    transform: none; 
}

.anel-barra { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease-out; }
        
/* O estilo base (Fundo e Letra) */
.hud-info-box {
    position: absolute; 
    background: rgba(17, 24, 39, 0.664); /* Fundo um pouco mais escuro */
    padding: 4px 8px; 
    border-radius: 6px;
    font-size: 12px; 
    font-weight: bold; 
    font-family: 'Cinzel', serif;
    z-index: 3; 
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.6);
    }

/* 🟢 CAIXINHA DE HP (Contorno e Letra Verde) */
#label-hp {
    border: 3px solid #21c71bd5; 
    color: #08fa1d;
    top: -5px;     /* 🛠️ Aumente para descer a caixa */
    left: -15px;  /* 🛠️ Aumente para números negativos (ex: -40px) para afastar para a esquerda */
    }

/* 🔵 CAIXINHA DE MP (Contorno e Letra Azul) */
#label-mp {
    border: 2px solid #3498db;
    color: #3498db;
    bottom: 0px;  /* 🛠️ Aumente para subir a caixa */
    left: -15px;  /* 🛠️ Aumente para números negativos para afastar para a esquerda */
    }

/* 🟡 CAIXINHA DE XP (Contorno e Letra Amarela) */
#label-xp {
    border: 2px solid #f1c40f;
    color: #f1c40f;
    top: 50%; 
    transform: translateY(-50%); /* Trava a caixa exatamente no meio do círculo */
    right: -70px; /* 🛠️ Aumente para números negativos (ex: -55px) para afastar para a direita */
    }

.thumb-cosmetico { background: #020617; border: 2px solid #334155; border-radius: 8px; padding: 8px; cursor: pointer; transition: all 0.2s; opacity: 0.5; display: flex; flex-direction: column; align-items: center; }
.thumb-cosmetico:hover { opacity: 0.8; border-color: #64748b; transform: translateY(-2px); }
.thumb-cosmetico.selecionado { border-color: #f39c12; opacity: 1; box-shadow: 0 0 12px rgba(243, 156, 18, 0.4); background: rgba(243, 156, 18, 0.1); transform: scale(1.05); }

/* Botão do Passe no Mapa */
.btn-passe-mapa {
    position: fixed; /* Troquei de absolute para fixed */
    top: 80px; 
    right: 8px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0); /* Um pouco mais escuro para destacar */
    border: 2px solid #f39d1200;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* O SEGREDO ESTÁ AQUI: */
    z-index: 10; 
    box-shadow: 0 0 15px rgba(243, 157, 18, 0);
    transition: transform 0.2s, background 0.3s;
}

.btn-passe-mapa:hover {
    background: rgba(50, 50, 50, 0);
    transform: scale(1.1);
}

.btn-passe-mapa img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    pointer-events: none; /* Garante que o clique passe para a div pai */
}

/* ==========================================
   TELA DE COMBATE - ESTILOS GERAIS
========================================== */
.modern-hud {
    position: absolute;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.9) 100%);
    border: 1px solid #334155;
    border-radius: 8px; 
    padding: 6px 10px; 
    color: #f8fafc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 10;
    backdrop-filter: blur(2px);
}

#hud-monstro { top: 10px; left: 10px; width: 150px; border-top: 2px solid #e74c3c; }
#hud-jogador { bottom: 10px; right: 10px; width: 150px; border-top: 2px solid #3b82f6; }

.hud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; border-bottom: 1px solid #1e293b; padding-bottom: 4px; }
.hud-name { font-size: 0.8em; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }
.hud-level { font-size: 0.6em; color: #cbd5e1; font-weight: 800; background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 4px; }

.hud-bar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hud-bar-label { font-size: 0.65em; font-weight: 800; letter-spacing: 0.5px; }
.label-hp { color: #ef4444; }
.label-mp { color: #3b82f6; }

.hud-bar-bg { width: 78%; height: 6px; background-color: #0f172a; border-radius: 2px; border: 1px solid #1e293b; overflow: hidden; }
.hud-hp-fill { height: 100%; background: linear-gradient(90deg, #ef4444, #b91c1c); transition: width 0.3s ease; }
.hud-mp-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #1d4ed8); transition: width 0.3s ease; }

.modern-btn {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 5px; 
    font-size: 0.85em; 
    color: #f8fafc;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.modern-btn:active:not(:disabled) { transform: translateY(2px); border-color: #64748b; }

/* Botões de Poção no Mapa (Baseado na sua Imagem) */
#botoes-pocao-mapa {
    position: absolute;
    top: 25px;
    left: 170px; /* Ajuste para ficar ao lado do seu HUD circular */
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.btn-pocao-circular {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #f1c40f; /* Borda dourada grossa */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.8), inset 0 0 8px rgba(0,0,0,0.6);
    transition: transform 0.1s;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.btn-pocao-circular:active { transform: scale(0.9); }

.btn-pocao-verde { background: radial-gradient(circle, #27ae60, #145a32); color: #e8f8f5; }
.btn-pocao-azul { background: radial-gradient(circle, #2980b9, #154360); color: #ebf5fb; }