/* ================================================================
   HUD INFERIOR — MOLDURA DRAGÃO (mu-bottom-hud-dragon-frame-v1)
   ----------------------------------------------------------------
   Toda a barra é desenhada A PARTIR da arte: a moldura é a única
   fonte de verdade do layout. Cada elemento vivo (orbes, células,
   barra de EXP) é posicionado nas coordenadas exatas medidas no PNG
   (2155x313), usando a unidade --u = 1px da arte. Assim o HUD
   escala em qualquer resolução sem nunca sair do lugar.

   Coordenadas medidas na arte:
     · anel esquerdo  : centro (289,172) raio 100
     · anel direito   : centro (1866,172) raio 100
     · 12 células     : x 443 + i*106, largura 90 · y 171, altura 100
     · trilho superior: y 135..170  (barra de EXP)
   ================================================================ */

.mu-bottom-bar {
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
    --hud-w: min(1180px, 100vw);
}
/* A arte do HUD tem uma faixa alfa no rodapé. Sem esta máscara, o canvas
   claro pode vazar como uma linha branca abaixo da moldura. */
.mu-bottom-bar::before {
    content: '';
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #050607;
    pointer-events: none;
}

.mu-hud-frame {
    /* 1 unidade = 1 pixel da arte original. Tudo abaixo é medido nela. */
    --u: calc(var(--hud-w) / 2155);
    position: relative;
    width: var(--hud-w);
    aspect-ratio: 2155 / 313;
    /* A arte tem uma faixa transparente embaixo: descer essa mesma faixa faz
       a moldura encostar na borda inferior da tela. */
    margin-bottom: calc(-14 * var(--u));
    font-family: Georgia, serif;
    pointer-events: none;
}
/* A moldura fica POR CIMA dos elementos vivos: os orbes preenchem os
   anéis e os ícones ficam encaixados nas células, recortados pela arte. */
.mu-hud-frame::after {
    content: '';
    position: absolute;
    z-index: 5;
    inset: 0;
    background: url('../assets/img/ui/mu-bottom-hud-dragon-frame-v1-final.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.75));
    pointer-events: none;
}
/* Só a faixa realmente ocupada pela arte captura o mouse; acima dela o
   jogo continua clicável. */
.mu-hud-plate {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: calc(128 * var(--u));
    bottom: 0;
    pointer-events: auto;
}

/* ---- Orbes de HP e MP encaixados nos anéis dos dragões ---- */
.mu-orb-shell {
    position: absolute;
    z-index: 2;
    top: calc(70 * var(--u));
    width: calc(204 * var(--u));
    height: calc(204 * var(--u));
    pointer-events: auto;
}
.mu-orb-shell-hp { left: calc(187 * var(--u)); }
.mu-orb-shell-mp { left: calc(1764 * var(--u)); }

.mu-orb {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: inset 0 calc(-16 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.75), 0 0 calc(14 * var(--u)) #000;
}
.mu-gem-hp { background: radial-gradient(circle at 33% 22%, #fff2ac 0 3%, #ff9a43 9%, #d92515 30%, #790705 60%, #190000 100%); }
.mu-gem-mp { background: radial-gradient(circle at 33% 22%, #e3f8ff 0 3%, #74cbff 10%, #1968d8 34%, #042779 63%, #000817 100%); }
/* Camada escura que desce conforme o recurso cai. */
.mu-orb::before {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    height: var(--resource-empty, 0%);
    background: linear-gradient(to bottom, #05070a, #000 74%, #050708);
    border-bottom: 1px solid rgba(0,0,0,.95);
    transition: height .34s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.mu-orb::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 118%, rgba(255,255,255,.16), transparent 55%);
    pointer-events: none;
}
.mu-orb-glow {
    position: absolute;
    z-index: 2;
    top: 9%;
    left: 12%;
    width: 42%;
    height: 30%;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    filter: blur(calc(6 * var(--u)));
    transform: rotate(-22deg);
}
.mu-orb-readout {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: #fff6d5;
    text-shadow: 1px 1px 2px #000, 0 0 calc(8 * var(--u)) #000;
    pointer-events: none;
}
.mu-orb-readout small { display: none; }
.mu-orb-readout strong {
    color: #fff5cf;
    /* Meu escalonamento de 1.35x do HUD passou por aqui e levou o numero do
       orbe a 35px: com cinco digitos ele quase encostava na borda. 48u era o
       valor original e continua legivel. */
    font: 800 calc(38 * var(--u)) / 1 Georgia, serif;
    letter-spacing: -.5px;
}
.mu-orb-readout span {
    margin-top: calc(6 * var(--u));
    color: #ead68f;
    font: 700 calc(21 * var(--u)) / 1 Georgia, serif;
    letter-spacing: .8px;
}

/* ---- Linha de identidade, acima da moldura ---- */
.mu-hud-topline {
    position: absolute;
    z-index: 6;
    /* Mesmas pontas da barra de EXP. */
    left: calc(443 * var(--u));
    width: calc(1263 * var(--u));
    top: calc(98 * var(--u));
    height: calc(44 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #d8e8ff;
    text-shadow: 1px 1px 2px #000, 0 0 calc(6 * var(--u)) #000, 0 0 calc(12 * var(--u)) rgba(0,0,0,.95);
    pointer-events: none;
}
.mu-hud-topline > * { pointer-events: auto; }
.mu-player-coordinates {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    color: #a4c4ce;
    font: 800 calc(28 * var(--u)) / 1 Georgia, serif;
    white-space: nowrap;
}
.mu-player-coordinates b { color: #f0d785; font-style: normal; }
.mu-player-coordinates i { color: #78d7e7; font-style: normal; }

/* Placa do personagem: retrato circular da classe + guilda, nome e level.
   A posição mais baixa a aproxima das coordenadas sem cobrir a barra de EXP. */
.mu-hud-identity-plate {
    position: fixed;
    z-index: 10020;
    left: calc(18 * var(--u));
    /* O topo desce o bastante para nunca passar por baixo do botao "Eventos",
       que mora no mesmo canto e e medido em pixels fixos (top:14px, ~39px de
       altura). A placa e medida em --u, que encolhe com a largura da janela e
       com o zoom do navegador — entao em certas larguras ela subia ate o botao
       e o nome do personagem ficava coberto.

       O `max` mantem o posicionamento proporcional onde ha espaco e so entra
       como piso quando --u fica pequeno. 68px = 53 do botao + 15 de folga. */
    top: max(calc(116 * var(--u)), 68px);
    height: calc(144 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    pointer-events: auto;
}
.mu-player-portrait {
    /* O atlas original continua sendo usado: apenas ampliamos o rosto e o
       recortamos em medalhão, preservando exatamente a arte das classes. */
    width: calc(108 * var(--u));
    height: calc(108 * var(--u));
    flex: 0 0 auto;
    overflow: hidden;
    border: calc(3 * var(--u)) solid #8a7a4e;
    border-radius: 50%;
    background-color: #05080a;
    background-repeat: no-repeat;
    background-size: 300% auto;
    background-position: 0 28%;
    box-shadow: inset 0 0 0 calc(3 * var(--u)) #05080a, inset 0 0 calc(26 * var(--u)) rgba(0,0,0,.72), 0 0 0 calc(2 * var(--u)) #17140d, 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.7);
}
/* Dark Lord e Magic Gladiator têm arquivo próprio, fora do atlas de 3 colunas. */
.mu-player-portrait.is-single { background-size: cover; background-position: center 22%; }

/* As três linhas (guilda, nome, level) têm a mesma altura de caixa e o mesmo
   respiro entre elas. Antes o brasão esticava a primeira linha e os espaços
   saíam desiguais: 9px entre guilda e nome, 3px entre nome e level. */
.mu-player-identity {
    display: grid;
    gap: calc(7 * var(--u));
    justify-items: start;
    min-width: 0;
    color: #d8e8ff;
    text-shadow: 1px 1px 2px #000, 0 0 calc(6 * var(--u)) #000, 0 0 calc(12 * var(--u)) rgba(0,0,0,.95);
}
/* "LV" e o número na MESMA linha de base, e não centralizados um em relação ao
   outro: Georgia desenha algarismos de estilo antigo (o 3 e o 9 descem abaixo
   da linha), então centralizar deixava o número visivelmente mais baixo que as
   letras. A variante de algarismos alinhados os traz para a altura das
   maiúsculas, e a tabular mantém a largura fixa para o número não dançar ao
   subir de level. */
.mu-player-meta { display: inline-flex; align-items: baseline; min-height: calc(28 * var(--u)); gap: calc(8 * var(--u)); color: #cdbd85; font: 700 calc(27 * var(--u)) / 1 Georgia, serif; font-variant-numeric: lining-nums tabular-nums; }
/* Só a cor separa o número do rótulo. O peso 900 herdado fazia o level
   parecer de um corpo maior que o "LV" ao lado. */
.mu-player-meta b { color: #fff1ad; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.mu-player-identity strong {
    max-width: calc(430 * var(--u));
    overflow: hidden;
    text-overflow: ellipsis;
    color: #82c5ff;
    font: 700 calc(32 * var(--u)) / 1 "Segoe UI", sans-serif;
    font-variant-numeric: slashed-zero;
}
.mu-player-class { position:relative; margin-left:calc(13 * var(--u)); padding-left:calc(13 * var(--u)); color:#d9efff; font:800 calc(30 * var(--u)) / 1 "Segoe UI",sans-serif; white-space:nowrap; }
.mu-player-class::before { content:''; position:absolute; left:0; top:50%; width:1px; height:1.08em; transform:translateY(-50%); background:rgba(142,196,228,.85); box-shadow:0 0 calc(3 * var(--u)) rgba(142,196,228,.45); }
.mu-player-class[hidden] { display: none !important; }
/* Título do herói — o marco de Poder. Mesma métrica das outras linhas da
   placa, com o dourado reservado ao nome do título. */
.mu-player-title {
    display: inline-flex;
    align-items: center;
    min-height: calc(28 * var(--u));
    gap: calc(6 * var(--u));
    color: #f0d78d;
    font: 800 calc(26 * var(--u)) / 1 "Segoe UI", sans-serif;
    letter-spacing: calc(1 * var(--u));
}
.mu-player-title[hidden] { display: none !important; }
.mu-player-title i { color: #d9ac47; font-style: normal; font-size: calc(23 * var(--u)); }
.mu-player-title b { text-transform: uppercase; }

.mu-player-guild {
    display: inline-flex;
    align-items: center;
    min-height: calc(28 * var(--u));
    gap: calc(6 * var(--u));
    max-width: calc(260 * var(--u));
    color: #a8d8e9;
    font: 700 calc(24 * var(--u)) / 1 "Segoe UI", sans-serif;
}
.mu-player-guild[hidden] { display: none !important; }
.mu-player-guild-name { overflow: hidden; text-overflow: ellipsis; }
.mu-player-guild em { color:#f1d77f; font:800 calc(30 * var(--u)) / 1 "Segoe UI",sans-serif; font-style:normal; white-space:nowrap; text-shadow:1px 1px 2px #000,0 0 calc(5 * var(--u)) #000; }
.mu-player-guild em[hidden] { display:none!important; }
.mu-player-guild-crest {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    /* O brasão acompanha a altura da linha da guilda. Em 40u ele era mais
       alto que as três linhas de texto e puxava a placa inteira para baixo. */
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    flex: 0 0 calc(28 * var(--u));
    overflow: hidden;
    border: calc(2 * var(--u)) solid #c4a85b;
    background: #06080a;
    box-shadow:0 1px calc(4 * var(--u)) #000;
}
.mu-player-guild-crest i { display: block; width: 100%; height: 100%; }

.mu-currency-bar {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: calc(15 * var(--u));
    /* A linha de identidade tem 44u de altura: a barra de moedas nao pode
       passar disso, senao os icones descem por cima da barra de EXP. */
    min-height: calc(40 * var(--u));
    max-height: calc(44 * var(--u));
    padding: 0;
    white-space: nowrap;
}
.mu-currency { display:inline-flex; align-items:center; gap:calc(6 * var(--u)); font:800 calc(26 * var(--u)) / 1 Georgia,serif; }
.mu-currency i { display:block; width:calc(40 * var(--u)); height:calc(40 * var(--u)); flex:0 0 auto; background-image:url('../assets/img/ui/hud-currency-icons-tight-clean.png'); background-size:300% 100%; background-repeat:no-repeat; filter:drop-shadow(0 1px 3px #000); }
.mu-currency i::after { content:none; }
.mu-currency-zen { color:#ffdb60; }.mu-currency-vip { color:#8fd7ff; }.mu-currency-gp { color:#7ee3c3; }
.mu-currency-zen i { background-position:0 50%; }.mu-currency-vip i { background-position:50% 50%; }.mu-currency-gp i { background-position:100% 50%; }


/* ---- Buffs ativos, acima do trilho ---- */
.elf-buff-hud {
    position: static;
    z-index: auto;
    align-self:start;
    margin-top:calc(1 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    white-space: nowrap;
    pointer-events: none;
}
.elf-buff-hud[hidden] { display: none !important; }
.elf-buff-chip { position:relative; display:grid; place-items:center; width:calc(40 * var(--u)); height:calc(40 * var(--u)); padding:calc(4 * var(--u)); border-radius:50%; background:conic-gradient(var(--buff-color) var(--buff-progress),rgba(7,10,11,.92) 0); box-shadow:0 0 calc(8 * var(--u)) color-mix(in srgb,var(--buff-color),transparent 55%),0 1px 2px #000; }
.elf-buff-chip::before { content:''; position:absolute; inset:calc(4 * var(--u)); border-radius:50%; background:#06090a; box-shadow:inset 0 0 3px #000; }
.elf-buff-chip.defense { --buff-color:#43d879; }
.elf-buff-chip.damage { --buff-color:#ef625c; }
.elf-buff-chip.barrier { --buff-color:#31bdf5; }
.elf-buff-chip.fortitude { --buff-color:#f2b544; }
.elf-buff-icon { position:relative; z-index:1; width:calc(26 * var(--u)) !important; height:calc(26 * var(--u)) !important; flex:0 0 calc(26 * var(--u)); border-radius:50%; filter:drop-shadow(0 1px 1px #000); }

/* ---- Barra de EXP encaixada no trilho superior da moldura ---- */
.mu-xp-container {
    position: absolute;
    z-index: 6;
    /* Exatamente a faixa das 12 células (x 443..1699 na arte): a barra começa
       e termina onde os atalhos começam e terminam. */
    left: calc(443 * var(--u));
    width: calc(1263 * var(--u));
    top: calc(142 * var(--u));
    height: calc(24 * var(--u));
    display: flex;
    align-items: center;
    padding: 0;
    pointer-events: auto;
}
.mu-xp-cap {
    /* Fora da barra: dentro dela, o rótulo empurrava o início da EXP para
       depois da primeira célula. */
    position: absolute;
    right: calc(100% + 6 * var(--u));
    color: #cbbd89;
    /* Fica FORA da barra, a esquerda dela. Ampliado, o rotulo avancava sobre
       o orbe de vida — era o "EXP escapando pro lado". */
    font: 700 calc(17 * var(--u)) / 1 Georgia, serif;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
}
.mu-xp-segments {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    gap: calc(3 * var(--u));
    height: 100%;
    padding: calc(2 * var(--u));
    overflow: hidden;
    border: 1px solid #0b0a06;
    border-radius: 0;
    background: #201d13;
    box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(131,122,92,.55);
}
.mu-xp-seg { flex: 1; height: 100%; background: linear-gradient(#3f3925, #16140c); border-right: 1px solid #060604; }
.mu-xp-fill-bar {
    position: absolute;
    top: calc(2 * var(--u));
    left: calc(2 * var(--u));
    width: 0%;
    height: calc(100% - 4 * var(--u));
    background: linear-gradient(90deg, #864e02, #f7d654 48%, #c0760a);
    box-shadow: 0 0 calc(9 * var(--u)) #e4b536;
    transition: width .3s ease-in-out;
    pointer-events: none;
}
.mu-xp-container, .mu-xp-segments, .mu-xp-seg, .mu-xp-fill-bar { cursor: url('../assets/img/ui/mu-hand-cursor.png') 4 3, pointer; }

/* ---- As 12 células da moldura ---- */
.mu-slot-strip {
    position: absolute;
    z-index: 2;
    left: calc(443 * var(--u));
    top: calc(171 * var(--u));
    width: calc(1256 * var(--u));
    height: calc(100 * var(--u));
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(16 * var(--u));
    pointer-events: auto;
}

.mu-slot, .mu-active-skill-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #050607;
    color: #dce9ed;
    font-family: Georgia, serif;
    cursor: pointer;
    transition: filter .12s ease, background .12s ease;
}
.mu-slot:hover, .mu-active-skill-slot:hover {
    background: radial-gradient(circle at 50% 42%, rgba(126,183,196,.26), transparent 72%), #050607;
    filter: brightness(1.15) drop-shadow(0 0 calc(10 * var(--u)) rgba(120,189,199,.5));
}
.mu-slot:active, .mu-active-skill-slot:active { filter: brightness(.85); }
.mu-active-skill-slot { background: #050607; }

/* Ícones: todos no mesmo tamanho, encaixados dentro da célula. */
.mu-slot-strip .menu-action-icon,
.mu-slot-strip .city-portal-icon,
.mu-slot-strip .reset-command-icon,
.mu-slot-strip .premium-shop-icon,
.mu-slot-strip .menu-game-icon,
.mu-slot-strip .mu-potion-bottle,
.mu-slot-strip .mu-skill-icon {
    display: block;
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 3px #000);
    font-size: 0;
}
.mu-slot-strip .mu-potion-bottle { background-image: url('../assets/img/items/potion-icons.png'); background-size: 200% 100%; background-position: 0 0; }
.mu-slot-strip .potion-mp .mu-potion-bottle { background-position: 100% 0; }
.mu-slot-strip .mu-skill-icon { background-size: 600% 400%; }

.mu-keycap {
    position: absolute;
    z-index: 3;
    top: calc(2 * var(--u));
    left: calc(5 * var(--u));
    color: #d8c48d;
    font: 800 calc(26 * var(--u)) / 1 Georgia, serif;
    text-shadow: 1px 1px #000;
}
.mu-potion-slot b {
    position: absolute;
    z-index: 3;
    right: calc(3 * var(--u));
    bottom: calc(3 * var(--u));
    min-width: calc(24 * var(--u));
    padding: 0 calc(3 * var(--u));
    background: #100d08;
    border: 1px solid #8b7953;
    color: #fff3bb;
    font: 800 calc(24 * var(--u)) / calc(32 * var(--u)) Georgia, serif;
    text-align: center;
}
.mu-slot-strip .auto-farm-threshold,
.mu-slot-strip .move-command-label,
.mu-slot-strip .reset-command-label,
.mu-slot-strip .market-command-label {
    position: absolute;
    z-index: 3;
    right: calc(2 * var(--u));
    bottom: calc(1 * var(--u));
    padding: 0 calc(3 * var(--u));
    border-radius: calc(3 * var(--u));
    font: 800 calc(22 * var(--u)) / calc(27 * var(--u)) Georgia, serif;
    text-shadow: 1px 1px #000;
    pointer-events: none;
}
.mu-slot-strip .auto-farm-threshold { background: #0a1510; color: #8bf5a8; }
.auto-farm-slot.is-paused .auto-farm-threshold { background: #240b0b; color: #ff9a92; }
.auto-farm-slot.is-paused .menu-auto-icon { filter: grayscale(.75) drop-shadow(0 1px 3px #000); }
.mu-slot-strip .move-command-label { background: rgba(3,10,17,.86); color: #83dbff; }
.mu-slot-strip .reset-command-label { background: rgba(7,6,16,.88); color: #cbb6ff; }
.mu-slot-strip .market-command-label { background: rgba(3,14,13,.88); color: #8ff4d3; }
.mu-slot-strip .menu-slot-label {
    position:absolute;
    z-index:3;
    right:calc(2 * var(--u));
    bottom:calc(1 * var(--u));
    padding:0 calc(3 * var(--u));
    border-radius:calc(3 * var(--u));
    background:rgba(5,7,8,.86);
    color:#dce9ed;
    /* Era 14u (7,7 px na largura padrão) — ilegível. 22u põe o rótulo em
       ~12 px sem empurrar o ícone do slot. */
    font:800 calc(22 * var(--u)) / calc(29 * var(--u)) Georgia,serif;
    text-shadow:1px 1px #000;
    pointer-events:none;
    text-transform:lowercase;
}
.mu-slot-strip .auto-farm-slot .menu-slot-label { right:calc(3 * var(--u)); bottom:calc(21 * var(--u)); color:#bff7cb; }
/* O texto de comando continua visível. Os ícones gerados já têm fundo preto
   inteiro, então não recebem o brilho azul externo que desenhava uma moldura
   diferente das demais células da barra. */
.mu-slot-strip .city-portal-icon,
.mu-slot-strip .reset-command-icon { filter:none!important; }

/* Ícones específicos preservados do HUD anterior. */
.menu-auto-icon { background-image: url('../assets/img/ui/menu-icon-auto.png'); }
.menu-character-icon { background-image: url('../assets/img/ui/menu-icon-character.png'); }
.menu-inventory-icon { background-image: url('../assets/img/ui/menu-icon-inventory.png'); }
.menu-attributes-icon { background-image: url('../assets/img/ui/menu-icon-attributes.png'); }
.menu-friends-icon { background-image: url('../assets/img/ui/menu-icon-friends-v2.png') !important; }
.menu-guild-icon { background-image: url('../assets/img/ui/menu-icon-guild-v2.png') !important; }
.city-slot .city-portal-icon { background-image: url('../assets/img/ui/return-city-portal.png'); filter: drop-shadow(0 0 3px #239cff) drop-shadow(0 1px 2px #000); animation: city-portal-pulse 1.9s ease-in-out infinite; }
.reset-slot .reset-command-icon { background-image: url('../assets/img/ui/menu-icon-reset.png'); filter: drop-shadow(0 0 3px #598dff) drop-shadow(0 1px 2px #000); }
@keyframes city-portal-pulse { 50% { filter: drop-shadow(0 0 6px #35b9ff) drop-shadow(0 1px 2px #000); } }
.mu-slot-strip .menu-market-icon {
    position: relative;
    background: none !important;
    border-radius: 50%;
    background-color: #152326 !important;
    box-shadow: inset 0 0 0 2px #263e42, 0 0 calc(10 * var(--u)) rgba(82,208,188,.38);
}
.mu-slot-strip .menu-market-icon::before {
    content: '₿';
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #8ff4d3;
    font: 800 calc(65 * var(--u)) / 1 Georgia, serif;
    text-shadow: 0 0 6px #3ce5bb, 1px 1px 2px #000;
}
.mu-slot-strip .menu-game-icon { display: grid; place-items: center; color: #e4d184; font: 900 calc(70 * var(--u)) / 1 Georgia, serif; text-shadow: 0 0 6px rgba(227,192,91,.5), 1px 1px 2px #000; }

/* Coleção unificada e transparente da barra: os objetos têm arte própria;
   a célula continua sendo fornecida pela moldura, sem quadrado preto extra. */
.mu-slot-strip .potion-hp .mu-potion-bottle,.mu-slot-strip .potion-mp .mu-potion-bottle,.mu-slot-strip .menu-friends-icon,.mu-slot-strip .menu-guild-icon,.mu-slot-strip .menu-auto-icon,.mu-slot-strip .city-portal-icon,.mu-slot-strip .reset-command-icon,.mu-slot-strip .menu-market-icon,.mu-slot-strip .premium-shop-icon,.mu-slot-strip .menu-inventory-icon,.mu-slot-strip .menu-attributes-icon { width:calc(82 * var(--u));height:calc(82 * var(--u));background-image:url('../assets/img/ui/hud-menu-icons-tight.png')!important; background-size:400% 300%!important; background-repeat:no-repeat!important; background-color:#050607!important; border:0!important; box-shadow:none!important; animation:none!important; }
.mu-slot-strip .potion-hp .mu-potion-bottle{background-position:0 0!important}.mu-slot-strip .potion-mp .mu-potion-bottle{background-position:33.3333% 0!important}.mu-slot-strip .menu-friends-icon{background-position:66.6667% 0!important}.mu-slot-strip .menu-guild-icon{background-position:100% 0!important}.mu-slot-strip .menu-auto-icon{background-position:0 50%!important}.mu-slot-strip .city-portal-icon{background-position:33.3333% 50%!important}.mu-slot-strip .reset-command-icon{background-position:66.6667% 50%!important}.mu-slot-strip .menu-market-icon{background-position:100% 50%!important}.mu-slot-strip .premium-shop-icon{background-position:0 100%!important}.mu-slot-strip .menu-inventory-icon{background-position:33.3333% 100%!important}.mu-slot-strip .menu-attributes-icon{background-position:66.6667% 100%!important}.mu-slot-strip .menu-market-icon::before{content:none!important}

/* Inventário cheio: o alerta precisa aparecer dentro da célula. */
.inventory-full-badge {
    display: none;
    position: absolute;
    z-index: 4;
    top: calc(3 * var(--u));
    right: calc(3 * var(--u));
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border: 1px solid #ffd1c8;
    border-radius: 50%;
    background: linear-gradient(#e74b45, #781311);
    box-shadow: 0 0 calc(10 * var(--u)) rgba(255,64,56,.9);
    color: #fff;
    font: 900 calc(26 * var(--u)) / calc(35 * var(--u)) Georgia, serif;
    text-align: center;
    pointer-events: none;
}
.inventory-slot.inventory-is-full { animation: inventory-full-alert 1.1s ease-in-out infinite; }
.inventory-slot.inventory-is-full .inventory-full-badge { display: block; }
@keyframes inventory-full-alert { 50% { background: radial-gradient(circle at 50% 42%, rgba(255,110,100,.5), rgba(40,8,6,.9) 78%); } }

/* Atalho numérico gravado na skill ativa (teclas 1..5).
   Os TRÊS marcadores do slot de skill — rótulo, tecla e munição — estavam
   ancorados no mesmo canto inferior direito e caíam um por cima do outro
   quando a Elfa tinha skill de arco selecionada. Cada um tem seu canto:
   tecla em cima à esquerda, munição embaixo à direita, rótulo embaixo à
   esquerda. */
.skill-hotkey-badge {
    position: absolute;
    z-index: 4;
    left: calc(5 * var(--u));
    top: calc(3 * var(--u));
    padding: 0 calc(4 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgba(5, 7, 8, .8);
    color: #fff2bd;
    font: 800 calc(24 * var(--u)) / calc(30 * var(--u)) Georgia, serif;
    text-shadow: 1px 1px 2px #000;
}

/* O rótulo "skill" sai deste slot. São 49px de largura para três marcadores, e
   com a contagem de flechas em três dígitos o rótulo e a munição se sobrepõem
   de qualquer jeito. O rótulo era o menos informativo dos três: o ícone já
   mostra qual skill está ativa e o título do botão traz o nome por extenso. */
.mu-slot-strip .mu-active-skill-slot .menu-slot-label { display: none; }
.mu-skill-ammo-count {
    position: absolute;
    z-index: 4;
    right: calc(3 * var(--u));
    bottom: calc(3 * var(--u));
    min-width: calc(26 * var(--u));
    padding: 0 calc(3 * var(--u));
    border: 1px solid #9ec8d0;
    border-radius: calc(4 * var(--u));
    background: linear-gradient(#17282c, #071113);
    color: #e9feff;
    font: 800 calc(23 * var(--u)) / calc(30 * var(--u)) Arial, sans-serif;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
}
.mu-skill-ammo-count.is-empty { color: #fff; border-color: #ff6868; background: linear-gradient(#671515, #230606); box-shadow: 0 0 calc(10 * var(--u)) rgba(255,50,50,.78); }

/* ---- Telas estreitas: a moldura sai e sobra a grade de comandos ---- */
@media (max-width: 900px) {
    .mu-bottom-bar { --hud-w: 100vw; background: linear-gradient(to top, #05070a, #131820); border-top: 2px solid #2b3038; pointer-events: auto; }
    .mu-hud-frame { aspect-ratio: auto; height: auto; margin-bottom: 0; padding: 4px 6px 6px 6px; --u: 0.42px; }
    .mu-hud-frame::after { display: none; }
    .mu-hud-plate { display: none; }
    .mu-hud-identity-plate { position:fixed; z-index:10020; left:12px; top:88px; height:auto; margin:0; gap:6px; }
    .mu-player-portrait { width:46px; height:46px; border-width:1px; }
    .mu-player-guild { gap:5px; max-width:260px; font-size:12px; }
    .mu-player-title { gap:4px; font-size:11px; }
    .mu-player-title i { font-size:10px; }
    .mu-player-guild em { font-size:11px; }
    .mu-player-guild-crest { width:17px; height:17px; flex-basis:17px; border-width:1px; }
    .mu-player-class { margin-left:8px; padding-left:8px; font-size:11px; }
    .mu-currency-bar { gap:8px; min-height:36px; }
    .mu-currency { gap:4px; font-size:11px; }
    .mu-currency i { width:34px; height:34px; }
    .mu-hud-topline { position: relative; width: auto; height: auto; margin-bottom: 3px; padding: 0 58px; }
    .mu-hud-mail { left:58px; bottom:22px; }
    .mu-xp-container { position: static; width: auto; height: 12px; margin: 0 0 4px; padding: 0 58px; }
    .mu-orb-shell { top: 5px; width: 48px; height: 48px; }
    .mu-orb-shell-hp { left: 5px; }
    .mu-orb-shell-mp { left: auto; right: 5px; }
    .elf-buff-hud { margin-top:1px; }
    .mu-slot-strip { position: static; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 40px; gap: 4px; width: auto; height: auto; margin: 0 52px; }
    .mu-slot-strip .menu-action-icon, .mu-slot-strip .city-portal-icon, .mu-slot-strip .reset-command-icon,
    .mu-slot-strip .premium-shop-icon, .mu-slot-strip .menu-game-icon, .mu-slot-strip .mu-potion-bottle,
    .mu-slot-strip .mu-skill-icon { width: 25px; height: 25px; }
    .mu-slot, .mu-active-skill-slot { border: 1px solid #39424b; border-radius: 4px; }
}

/* ---- Ícones de skill usados também fora do HUD (modal de skills) ---- */
.mu-skill-icon { display:inline-block; width:28px; height:28px; background:#050607 url('../assets/img/effects/skill-icons-sheet.png') calc(var(--skill-x, 0) * 20%) calc(var(--skill-y, 0) * 33.333%) / 600% 400% no-repeat; filter:drop-shadow(0 1px 3px #000); }
.mu-slot-strip #mu-active-skill-icon { display:block; width:calc(82 * var(--u)); height:calc(82 * var(--u)); background-color:#050607; }
.skill-option-item .mu-skill-icon { flex:0 0 30px; width:30px; height:30px; border:1px solid #6d603c; background-color:#050607; box-shadow:inset 0 0 5px #000; }
.elf-arrow-skill-count { color:#bff4ff; font:800 12px Georgia,serif; }
.elf-arrow-skill-count.is-empty { color:#ff4a4a; text-shadow:0 0 7px rgba(255,38,38,.8); }
.generated-item-icon { display: block; width: 31px; height: 31px; margin: 0 auto 2px; background-image: var(--icon-sheet); background-size: 300% 300%; background-position: calc(var(--icon-x) * 50%) calc(var(--icon-y) * 50%); background-repeat: no-repeat; filter: drop-shadow(0 1px 2px #000); }
.mu-slot-strip .generated-item-icon { width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: 0; }

.move-portal-modal { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:18px; background:transparent; pointer-events:none; }
.move-portal-modal > * { pointer-events:auto; }
.move-portal-modal[hidden] { display:none; }
.move-portal-panel { position:relative; width:min(440px,100%); padding:23px; border:1px solid #566777; border-radius:5px; background:linear-gradient(145deg,#111a22,#080d12 67%); box-shadow:0 16px 50px #000,inset 0 0 36px rgba(23,114,172,.14); color:#d9e7ee; }
.move-portal-panel::before { content:''; position:absolute; inset:7px; border:1px solid rgba(77,175,232,.2); pointer-events:none; }
.move-portal-panel > * { position:relative; z-index:1; }.move-portal-panel > small { color:#66c9ff; letter-spacing:3px; font:800 11px Georgia,serif; }.move-portal-panel h3 { margin:5px 0 3px; color:#f3d67b; font:700 23px Georgia,serif; }.move-portal-panel > p { margin:0 0 17px; color:#aabac5; font-size:13px; }
.move-portal-close { position:absolute; z-index:2; top:11px; right:12px; width:27px; height:27px; padding:0; border:1px solid #52616a; background:#10171c; color:#b9e5f5; font:700 20px Georgia,serif; line-height:20px; }
.move-portal-destinations { display:grid; gap:8px; }.move-portal-destination { display:flex; align-items:center; gap:11px; width:100%; min-height:56px; padding:8px 11px; border:1px solid color-mix(in srgb,var(--portal-accent),#4e5c62 54%); background:linear-gradient(90deg,color-mix(in srgb,var(--portal-accent),#101719 16%),#101517); color:#e9f0f2; text-align:left; }.move-portal-destination:hover:not(:disabled) { filter:brightness(1.22); transform:translateX(2px); }.move-portal-destination i { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--portal-accent); color:var(--portal-accent); font-style:normal; box-shadow:0 0 12px color-mix(in srgb,var(--portal-accent),transparent 65%); }.move-portal-destination span { display:grid; gap:2px; flex:1; }.move-portal-destination strong { color:#f1d675; font:700 16px Georgia,serif; }.move-portal-destination small { color:#aebcc4; font-size:11px; }.move-portal-destination em { color:#8ee9b0; font:700 11px Georgia,serif; font-style:normal; }.move-portal-destination.current em { color:#81d9ff; }.move-portal-destination.locked { opacity:.48; filter:grayscale(.65); cursor:not-allowed; }
.shop-sale-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; }.shop-sale-row.excellent { border-color:#35c878; box-shadow:inset 0 0 20px rgba(53,200,120,.08); }.shop-sale-icon { display:block; width:38px; height:38px; background-repeat:no-repeat; background-size:contain; background-position:center; filter:drop-shadow(0 1px 3px #000); }.shop-sale-fallback { display:grid; place-items:center; border:1px solid #61542d; color:#e7cf7b; font:700 16px Georgia,serif; }.shop-sale-row .shop-item-controls { justify-self:end; }.shop-quality-tabs button.active { border-color:#42cf89; color:#bcffd8; box-shadow:0 0 8px rgba(66,207,137,.25); }

/* ---- Penalidade da invasão dourada ---- */
/* Fica colada acima da barra inferior, sem empurrar o HUD: quem morreu para um
   Golden precisa ver quanto falta para voltar a encontrá-los. */
.golden-penalty-banner {
    position: fixed; z-index: 1002;
    left: 50%; bottom: 96px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    max-width: min(430px, calc(100vw - 24px));
    padding: 7px 14px;
    border: 1px solid #9a7233; border-radius: 3px;
    background: linear-gradient(100deg, rgba(38, 26, 8, .96), rgba(12, 9, 5, .96));
    box-shadow: 0 0 0 1px #0a0806, 0 0 18px rgba(214, 160, 58, .28), 0 8px 20px rgba(0, 0, 0, .7);
    color: #f2ddaa; pointer-events: none;
}
.golden-penalty-banner[hidden] { display: none; }
.golden-penalty-icon { color: #f0c85e; font: 700 20px Georgia, serif; text-shadow: 0 0 8px rgba(240, 200, 94, .7); }
.golden-penalty-copy { display: grid; gap: 1px; }
.golden-penalty-copy small { color: #c9a95f; font: 700 9px Georgia, serif; letter-spacing: 1.6px; }
.golden-penalty-copy strong { color: #f4e6c2; font: 700 12px Georgia, serif; }
.golden-penalty-copy b { color: #ffd97a; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .golden-penalty-banner { bottom: 84px; padding: 6px 10px; } .golden-penalty-copy strong { font-size: 11px; } }