/* ============================================================================
MONSTERIDLE — UI KIT (css/ui-kit.css)
----------------------------------------------------------------------------
A linguagem visual de TODA a interface daqui para a frente: painéis, janelas,
botões, abas, barras, slots, cards. Referência: "vidro azul" — navy profundo,
fio ciano que brilha, azulejos com bisel de luz, barras segmentadas, texto
azul-claro. Pixel-art dentro, interface lisa fora.
Regras de ouro
1. Superfície = navy translúcido (--mi-vidro) + fio ciano (--mi-fio) + luz no
topo (inset 0 1px 0 --mi-luz). Nunca fundo chapado preto/cinza.
2. Todo ícone mora num AZULEJO (.mi-azulejo): quadrado 30px, raio 9, bisel.
Ativo = preenchido de ciano, glifo escuro, brilho em volta.
3. Rótulos em CAIXA ALTA, 9.5–11px, letter-spacing 1–2px, cor --mi-rotulo.
Títulos de janela: 13.5px, spacing 2.2px. Valores grandes: 16–18px, bold.
4. Ação principal = .mi-bt.primario (ciano sólido, texto escuro). Só UM por
painel. Secundárias = .mi-bt (vidro). Destrutivas = .mi-bt.perigo.
5. Barras (HP/EXP/progresso) são SEGMENTADAS: trilho escuro, segmentos ciano
(ou verde/vermelho para HP), com brilho.
6. Raio: 14px janela · 12px card · 10px azulejo/botão · 99px pílula.
7. Cor de estado: ok #34d399 · aviso #fbbf24 · perigo #f87171 · shiny #f0abfc ·
vip/ouro #fcd34d · ciano #22d3ee (tudo o que é "ativo"/"seu").
Como usar: depois do style.css.
Todas as classes têm prefixo mi- para não brigar com o CSS antigo; migre as
telas aos poucos trocando as classes. O que já existe no style.css (janela,
.aba-bar.nav) pode receber as mesmas variáveis.
============================================================================ */
:root{
/* ---- superfícies ---- */
--mi-fundo:#061a30; /* fundo do jogo/cenário quando não há mapa */
--mi-navy:#0b2a4a; /* superfície principal (opaca) */
--mi-navy2:#0f3559; /* superfície elevada (cabeçalho, aba ativa) */
--mi-navy3:#0a2140; /* superfície afundada (trilho, slot vazio) */
--mi-vidro:rgba(11,42,74,.82); /* superfície translúcida por cima do mapa */
--mi-vidro2:rgba(15,53,89,.9);
--mi-fio:#1e4d7a; /* borda padrão */
--mi-fio-luz:#2f7fbf; /* borda em hover */
--mi-ciano:#22d3ee; /* ativo, seleção, ação principal */
--mi-ciano2:#67e8f9; /* hover do ciano */
--mi-ciano-escuro:#04222b; /* texto em cima do ciano */
--mi-luz:rgba(103,232,249,.28);/* fio de luz no topo das superfícies */
--mi-brilho:0 0 0 1px rgba(34,211,238,.35),0 0 18px rgba(34,211,238,.35);
--mi-sombra:0 14px 40px rgba(0,0,0,.55);
/* ---- texto ---- */
--mi-txt:#e6f4ff; --mi-txt2:#9fc3e0; --mi-rotulo:#7dd3fc; --mi-rotulo-on:#e0f2fe; --mi-mudo:#4a6f8f;
/* ---- estados ---- */
--mi-ok:#34d399; --mi-aviso:#fbbf24; --mi-perigo:#f87171; --mi-shiny:#f0abfc; --mi-ouro:#fcd34d; --mi-raro:#a855f7;
/* ---- forma ---- */
--mi-r-janela:14px; --mi-r-card:12px; --mi-r:10px; --mi-r-p:6px;
--mi-fonte:"Segoe UI",system-ui,-apple-system,sans-serif;
}
/* ============ base ============ */
.mi{color:var(--mi-txt);font-family:var(--mi-fonte);font-size:13.5px;line-height:1.45}
.mi *{box-sizing:border-box}
.mi img{image-rendering:pixelated}
.mi-rotulo{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mi-rotulo)}
.mi-titulo{font-size:13.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--mi-txt)}
.mi-sub{font-size:11.5px;color:var(--mi-txt2)}
.mi-valor{font-size:17px;font-weight:800;letter-spacing:.3px;color:var(--mi-txt)}
.mi-mudo{color:var(--mi-mudo)}
.mi-espaco{flex:1}
/* superfície genérica (qualquer caixa) */
.mi-caixa{background:var(--mi-vidro);backdrop-filter:blur(10px);border:1px solid var(--mi-fio);border-radius:var(--mi-r-card);
box-shadow:var(--mi-sombra),inset 0 1px 0 var(--mi-luz)}
.mi-caixa.afundada{background:var(--mi-navy3);box-shadow:inset 0 2px 8px rgba(0,0,0,.45);border-color:#163a5e}
/* ============ azulejo (átomo dos ícones) ============ */
.mi-azulejo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:9px;
background:linear-gradient(180deg,#154373,#0c2c4d);border:1px solid var(--mi-fio);color:#5fd0f5;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.35);transition:.12s}
.mi-azulejo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mi-azulejo img{width:22px;height:22px}
.mi-azulejo.on,.on>.mi-azulejo{background:linear-gradient(180deg,#67e8f9,#22d3ee);border-color:#67e8f9;color:var(--mi-ciano-escuro);box-shadow:var(--mi-brilho),inset 0 1px 0 rgba(255,255,255,.5)}
.mi-azulejo.g{width:44px;height:44px;border-radius:12px}.mi-azulejo.g svg{width:24px;height:24px}.mi-azulejo.g img{width:34px;height:34px}
.mi-azulejo.gg{width:64px;height:64px;border-radius:14px}.mi-azulejo.gg svg{width:34px;height:34px}.mi-azulejo.gg img{width:52px;height:52px}
.mi-azulejo.p{width:22px;height:22px;border-radius:6px}.mi-azulejo.p svg{width:12px;height:12px}
.mi-azulejo.ouro{color:var(--mi-ouro);border-color:#7c5e12;background:linear-gradient(180deg,#3a2a08,#2a1f05)}
.mi-azulejo.perigo{color:var(--mi-perigo);border-color:#7f1d1d}
/* ícone ilustrado do menu (assets/ui/menu/.png — arte redonda com anel ciano) */
.mi-ico{display:inline-block;width:34px;height:34px;flex-shrink:0;border-radius:99px;object-fit:contain;image-rendering:auto;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transition:.15s}
.mi-ico.p{width:24px;height:24px}.mi-ico.g{width:48px;height:48px}.mi-ico.gg{width:72px;height:72px}
.on>.mi-ico,.mi-ico.on{filter:drop-shadow(0 0 6px rgba(34,211,238,.9)) drop-shadow(0 0 14px rgba(34,211,238,.45));transform:scale(1.08)}
button:hover>.mi-ico{transform:scale(1.06)}
/* ============ botões ============ */
.mi-bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 14px;min-height:32px;cursor:pointer;
font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mi-rotulo);
background:linear-gradient(180deg,#154373,#0c2c4d);border:1px solid var(--mi-fio);border-radius:var(--mi-r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.35);transition:.12s;white-space:nowrap}
.mi-bt:hover{border-color:var(--mi-fio-luz);color:var(--mi-rotulo-on);background:linear-gradient(180deg,#1a5189,#0f3559)}
.mi-bt:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.mi-bt:disabled{opacity:.4;cursor:not-allowed;transform:none}
.mi-bt.primario{background:linear-gradient(180deg,#67e8f9,#22d3ee);border-color:#67e8f9;color:var(--mi-ciano-escuro);box-shadow:var(--mi-brilho),inset 0 1px 0 rgba(255,255,255,.55)}
.mi-bt.primario:hover{background:linear-gradient(180deg,#a5f3fc,#67e8f9)}
.mi-bt.perigo{color:#fca5a5;border-color:#7f1d1d;background:linear-gradient(180deg,#4a1d24,#2e1116)}
.mi-bt.perigo:hover{border-color:#b91c1c;color:#fecaca}
.mi-bt.ouro{color:var(--mi-ouro);border-color:#7c5e12;background:linear-gradient(180deg,#3a2a08,#2a1f05)}
.mi-bt.p{padding:4px 10px;min-height:26px;font-size:9.5px;border-radius:8px}
.mi-bt.g{padding:10px 20px;min-height:40px;font-size:12px}
.mi-bt.bloco{width:100%}
.mi-bt.icone{padding:0;width:32px;min-width:32px} /* só o glifo */
.mi-bt .mi-azulejo{width:22px;height:22px;border-radius:6px;margin-left:-6px}.mi-bt .mi-azulejo svg{width:12px;height:12px}
.mi-bt svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mi-bt kbd{font-family:inherit;font-size:8.5px;color:var(--mi-mudo);border:1px solid var(--mi-fio);border-radius:4px;padding:0 4px;margin-left:2px}
/* ============ janela (painel flutuante) ============ */
.mi-janela{display:flex;flex-direction:column;background:var(--mi-vidro);backdrop-filter:blur(12px);
border:1px solid var(--mi-fio);border-radius:var(--mi-r-janela);box-shadow:var(--mi-sombra),inset 0 1px 0 var(--mi-luz);overflow:hidden}
.mi-janela-cab{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:grab;user-select:none;
background:linear-gradient(180deg,rgba(21,67,115,.8),rgba(15,53,89,.6));border-bottom:1px solid var(--mi-fio)}
.mi-janela-cab.puxando{cursor:grabbing}
.mi-janela-cab .mi-titulo{font-size:13.5px}
.mi-janela-cab .mi-sub{font-size:11.5px}
.mi-janela-cab .mi-atalho{font-size:9px;color:var(--mi-mudo);border:1px solid var(--mi-fio);border-radius:5px;padding:1px 5px;letter-spacing:1px}
.mi-janela-x{width:28px;height:28px;padding:0;border-radius:7px;cursor:pointer;font-size:13px;color:var(--mi-rotulo);
background:linear-gradient(180deg,#154373,#0c2c4d);border:1px solid var(--mi-fio)}
.mi-janela-x:hover{background:#3a1d22;color:#fca5a5;border-color:#7f1d1d}
.mi-janela-corpo{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px}
.mi-janela-corpo::-webkit-scrollbar{width:8px}.mi-janela-corpo::-webkit-scrollbar-thumb{background:#1e4d7a;border-radius:99px}
.mi-janela-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--mi-fio);background:rgba(10,33,64,.6)}
/* linha decorativa "ligada" (fio ciano) — use em cabeçalhos de seção */
.mi-secao{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.mi-secao::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--mi-ciano),transparent);opacity:.5}
/* ============ abas ============ */
.mi-abas{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mi-abas button{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;cursor:pointer;font-family:inherit;
border-radius:var(--mi-r);background:transparent;border:1px solid transparent;color:var(--mi-rotulo);
font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;transition:.12s}
.mi-abas button:hover{background:rgba(21,67,115,.5)}
.mi-abas button.on{background:linear-gradient(180deg,rgba(21,67,115,.9),rgba(15,53,89,.9));border-color:var(--mi-ciano);color:var(--mi-rotulo-on);box-shadow:var(--mi-brilho)}
.mi-abas .mi-cont{padding:1px 6px;border-radius:99px;background:var(--mi-navy3);border:1px solid var(--mi-fio);color:var(--mi-txt2);font-size:9.5px;letter-spacing:0}
/* abas "de gaveta" (linha embaixo em vez de caixa) */
.mi-abas.linha{gap:0;border-bottom:1px solid var(--mi-fio)}
.mi-abas.linha button{border-radius:0;border:none;border-bottom:2px solid transparent;padding:8px 14px}
.mi-abas.linha button.on{background:none;box-shadow:none;border-bottom-color:var(--mi-ciano)}
/* ============ barra de navegação (menu principal) ============ */
.mi-nav{display:flex;gap:4px;align-items:center;justify-content:center;padding:6px 8px;
background:rgba(11,42,74,.92);backdrop-filter:blur(12px);border-top:1px solid var(--mi-fio);box-shadow:inset 0 1px 0 var(--mi-luz);overflow-x:auto;scrollbar-width:none}
.mi-nav::-webkit-scrollbar{display:none}
.mi-nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:8px 10px 6px;cursor:pointer;font-family:inherit;
font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mi-rotulo);white-space:nowrap;
background:transparent;border:1px solid transparent;border-radius:var(--mi-r);transition:.12s}
.mi-nav button kbd{position:absolute;top:3px;right:6px;font-size:8px;color:var(--mi-mudo);font-family:inherit}
.mi-nav button:hover{background:rgba(21,67,115,.5)}
.mi-nav button.on{background:linear-gradient(180deg,rgba(21,67,115,.9),rgba(15,53,89,.9));border-color:var(--mi-ciano);color:var(--mi-rotulo-on);box-shadow:var(--mi-brilho)}
.mi-nav button .mi-ico{width:38px;height:38px}
.mi-nav .mi-sep{width:1px;height:34px;background:var(--mi-fio);margin:0 4px;flex-shrink:0}
.mi-nav .vip{color:var(--mi-ouro)}
/* ============ barras segmentadas (HP / EXP / progresso) ============ */
.mi-barra{position:relative;height:12px;border-radius:99px;background:var(--mi-navy3);border:1px solid #163a5e;overflow:hidden;
box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.mi-barra>i{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,var(--mi-ciano2),var(--mi-ciano));
box-shadow:0 0 10px rgba(34,211,238,.6);transition:width .3s}
.mi-barra::after{ /* os "segmentos": traços escuros por cima */
content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(6,26,48,.75) 9px 11px);pointer-events:none}
.mi-barra.hp>i{background:linear-gradient(180deg,#6ee7b7,#34d399);box-shadow:0 0 10px rgba(52,211,153,.6)}
.mi-barra.hp.baixa>i{background:linear-gradient(180deg,#fcd34d,#f59e0b);box-shadow:0 0 10px rgba(245,158,11,.6)}
.mi-barra.hp.critica>i{background:linear-gradient(180deg,#fca5a5,#f87171);box-shadow:0 0 10px rgba(248,113,113,.6)}
.mi-barra.exp>i{background:linear-gradient(180deg,#c4b5fd,#a855f7);box-shadow:0 0 10px rgba(168,85,247,.6)}
.mi-barra.fina{height:7px}.mi-barra.fina::after{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(6,26,48,.75) 6px 7px)}
.mi-barra.grossa{height:18px}
.mi-stat{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;font-size:11.5px}
.mi-stat b{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mi-rotulo)}
.mi-stat span{font-weight:700;font-variant-numeric:tabular-nums}
/* ============ slots (inventário, time, depósito) ============ */
.mi-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.mi-slot{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
background:linear-gradient(180deg,#0f3559,#0a2140);border:1px solid var(--mi-fio);border-radius:var(--mi-r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.35);transition:.12s}
.mi-slot img{width:80%;height:80%;object-fit:contain}
.mi-slot:hover{border-color:var(--mi-fio-luz);transform:translateY(-1px)}
.mi-slot.on,.mi-slot.sel{border-color:var(--mi-ciano);box-shadow:var(--mi-brilho)}
.mi-slot.vazio{background:var(--mi-navy3);border-style:dashed;cursor:default;box-shadow:none}
.mi-slot .qtd{position:absolute;right:3px;bottom:2px;font-size:9.5px;font-weight:800;color:var(--mi-rotulo-on);text-shadow:0 1px 2px #000}
.mi-slot .nv{position:absolute;left:3px;top:2px;font-size:8.5px;font-weight:800;color:var(--mi-rotulo);letter-spacing:.5px}
.mi-slot .marca{position:absolute;right:-1px;top:-1px;width:14px;height:14px;border-radius:0 8px 0 6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;background:var(--mi-ciano);color:var(--mi-ciano-escuro)}
.mi-slot.shiny{border-color:var(--mi-shiny)}.mi-slot.raro{border-color:var(--mi-raro)}.mi-slot.lendario{border-color:var(--mi-ouro)}
/* ============ card (monstro, habilidade, oferta) ============ */
.mi-card{position:relative;padding:10px 11px;background:var(--mi-vidro2);border:1px solid var(--mi-fio);border-radius:var(--mi-r-card);
box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 var(--mi-luz);transition:.15s}
.mi-card:hover{border-color:var(--mi-fio-luz);transform:translateY(-2px)}
.mi-card.on{border-color:var(--mi-ciano);box-shadow:var(--mi-brilho)}
.mi-card-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mi-card-cab b{font-size:14px;letter-spacing:.3px}
.mi-card-cab small{display:block;font-size:11px;color:var(--mi-txt2)}
/* card de habilidade: azulejo grande + nome + barrinha, como na referência */
.mi-hab{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 10px;text-align:center}
.mi-hab .nome{font-size:11px;font-weight:800;letter-spacing:.5px}
.mi-hab .mi-barra{width:70%}
/* ============ pílulas, selos, chips ============ */
.mi-pilula{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 5px;border-radius:99px;font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
background:rgba(10,33,64,.8);border:1px solid var(--mi-fio);color:var(--mi-rotulo-on);backdrop-filter:blur(6px)}
.mi-pilula img{width:16px;height:16px;image-rendering:auto}
.mi-pilula.ok{color:var(--mi-ok);border-color:rgba(52,211,153,.45)}
.mi-pilula.aviso{color:var(--mi-aviso);border-color:rgba(251,191,36,.45)}
.mi-pilula.perigo{color:#fca5a5;border-color:rgba(248,113,113,.45)}
.mi-pilula.ouro{color:var(--mi-ouro);border-color:rgba(252,211,77,.45)}
.mi-pilula.ciano{color:var(--mi-ciano2);border-color:rgba(34,211,238,.5)}
.mi-pilula.pisca{animation:mi-pisca 1.2s infinite}
@keyframes mi-pisca{50%{opacity:.55}}
/* HUD: pílula de recurso (moeda, diamante, nível) */
.mi-hud{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:99px;background:var(--mi-vidro);border:1px solid var(--mi-fio);box-shadow:inset 0 1px 0 var(--mi-luz)}
.mi-hud b{font-size:12.5px;font-variant-numeric:tabular-nums}
/* ============ campos ============ */
.mi-campo,.mi select,.mi input[type=text],.mi input[type=number],.mi input[type=password],.mi textarea{
font-family:inherit;font-size:13px;color:var(--mi-txt);padding:7px 10px;border-radius:var(--mi-r);
background:var(--mi-navy3);border:1px solid var(--mi-fio);box-shadow:inset 0 2px 6px rgba(0,0,0,.4);outline:none;transition:.12s}
.mi-campo:focus,.mi select:focus,.mi input:focus,.mi textarea:focus{border-color:var(--mi-ciano);box-shadow:var(--mi-brilho),inset 0 2px 6px rgba(0,0,0,.4)}
.mi-sw{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--mi-txt2);cursor:pointer}
.mi-sw input{appearance:none;width:34px;height:18px;border-radius:99px;background:var(--mi-navy3);border:1px solid var(--mi-fio);position:relative;cursor:pointer;transition:.15s}
.mi-sw input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:99px;background:var(--mi-txt2);transition:.15s}
.mi-sw input:checked{background:var(--mi-ciano);border-color:var(--mi-ciano2)}
.mi-sw input:checked::after{left:18px;background:var(--mi-ciano-escuro)}
/* ============ tooltip / detalhe ============ */
.mi-dica{position:relative}
.mi-dica[data-dica]:hover::after{content:attr(data-dica);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:50;
width:max-content;max-width:240px;padding:7px 10px;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mi-txt);white-space:pre-line;
background:var(--mi-navy2);border:1px solid var(--mi-ciano);border-radius:8px;box-shadow:var(--mi-brilho),var(--mi-sombra)}
/* ============ tabela ============ */
.mi-tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.mi-tabela th{text-align:left;padding:6px 8px;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mi-rotulo);border-bottom:1px solid var(--mi-fio)}
.mi-tabela td{padding:7px 8px;border-bottom:1px solid rgba(30,77,122,.5)}
.mi-tabela tr:hover td{background:rgba(21,67,115,.35)}
.mi-tabela tr.eu td{color:var(--mi-ciano2);font-weight:700}
/* ============ conector decorativo (as "linhas de circuito" da referência) ============ */
.mi-fio-dec{height:1px;background:linear-gradient(90deg,transparent,var(--mi-ciano),transparent);opacity:.5}
.mi-ponto{width:8px;height:8px;border-radius:99px;background:var(--mi-ciano);box-shadow:0 0 10px var(--mi-ciano)}
/* ============ animações de entrada ============ */
@keyframes mi-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mi-entra{animation:mi-sobe .18s ease-out}
@media(max-width:640px){.mi-janela-corpo{padding:10px 12px 14px}.mi-nav button{min-width:60px;padding:6px 6px 5px}.mi-grade{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}}
/* ============================================================================
HUD — componentes da tela de jogo (topo, painéis laterais, hotbar, chat, avisos)
Referência: mockups/hud/index.html
============================================================================ */
/* barra do topo */
.mi-topo{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(11,42,74,.9);backdrop-filter:blur(12px);
border-bottom:1px solid var(--mi-fio);box-shadow:inset 0 -1px 0 var(--mi-luz),0 6px 20px rgba(0,0,0,.35)}
.mi-topo .grupo{display:flex;align-items:center;gap:6px}
.mi-marca{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;border-radius:99px;background:var(--mi-navy3);border:1px solid var(--mi-fio)}
.mi-marca b{font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mi-txt)}
.mi-marca b em{font-style:normal;color:var(--mi-ciano2)}
.mi-marca small{font-size:9.5px;color:var(--mi-txt2);border:1px solid var(--mi-fio);border-radius:5px;padding:1px 5px}
.mi-hud.jogador b{font-size:12.5px}.mi-hud.jogador .nv{color:var(--mi-ciano2);font-size:11px;font-weight:800}
.mi-hud.online::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--mi-ok);box-shadow:0 0 8px var(--mi-ok)}
/* título de painel (a etiqueta pequena em cima de cada bloco) */
.mi-painel{position:relative;padding:12px}
.mi-painel>.mi-rotulo:first-child{display:block;margin-bottom:8px}
.mi-etiqueta{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mi-rotulo)}
/* lista de estatísticas (ícone · rótulo · valor) */
.mi-lista{display:flex;flex-direction:column;gap:6px}
.mi-lista>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mi-txt2)}
.mi-lista>div b{margin-left:auto;color:var(--mi-txt);font-variant-numeric:tabular-nums;font-weight:700}
.mi-lista>div .mi-azulejo{width:22px;height:22px;border-radius:6px}.mi-lista>div .mi-azulejo svg{width:12px;height:12px}
.mi-kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--mi-txt2);padding:4px 0;border-bottom:1px solid rgba(30,77,122,.45)}
.mi-kv b{color:var(--mi-txt);font-variant-numeric:tabular-nums}
/* cena de batalha (o mapa/hunt dentro do painel) */
.mi-cena{position:relative;border-radius:var(--mi-r-card);overflow:hidden;border:1px solid var(--mi-fio);min-height:220px;
background:#0a2140 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(103,232,249,.12),inset 0 -60px 80px rgba(6,26,48,.7)}
.mi-cena .lutador{position:absolute;top:12px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--mi-r-card);
background:rgba(11,42,74,.86);border:1px solid var(--mi-fio);backdrop-filter:blur(8px);min-width:260px}
.mi-cena .lutador.eu{left:12px}.mi-cena .lutador.ele{right:12px}
.mi-cena .lutador .mi-azulejo{width:56px;height:56px;border-radius:12px}.mi-cena .lutador .mi-azulejo img{width:48px;height:48px}
.mi-cena .lutador .info{flex:1;display:flex;flex-direction:column;gap:3px}
.mi-cena .lutador .info b{font-size:13.5px}.mi-cena .lutador .info small{font-size:10.5px;color:var(--mi-txt2)}
.mi-cena .vs{position:absolute;left:50%;top:44px;transform:translateX(-50%);font-size:18px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 0 12px var(--mi-ciano),0 2px 4px #000}
.mi-cena .acoes{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;align-items:stretch}
/* golpe: azulejo grande com cooldown */
.mi-golpe{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:84px;padding:8px 4px;border-radius:12px;cursor:pointer;
background:linear-gradient(180deg,rgba(21,67,115,.95),rgba(10,33,64,.95));border:1px solid var(--mi-fio);text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.mi-golpe .mi-azulejo{width:34px;height:34px}
.mi-golpe .nome{font-size:9.5px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.mi-golpe .cd{font-size:9.5px;color:var(--mi-ciano2);font-weight:800}
.mi-golpe.vazio{border-style:dashed;opacity:.5;cursor:default}
.mi-golpe.fogo{border-color:#b45309}.mi-golpe.fogo .mi-azulejo{color:#fb923c;border-color:#b45309;background:linear-gradient(180deg,#5a2408,#3a1505)}
.mi-golpe.eletrico{border-color:#4f46e5}.mi-golpe.eletrico .mi-azulejo{color:#a5b4fc;border-color:#4f46e5;background:linear-gradient(180deg,#2e2a8a,#1e1b4b)}
.mi-golpe.dragao{border-color:#2563eb}.mi-golpe.dragao .mi-azulejo{color:#93c5fd;border-color:#2563eb;background:linear-gradient(180deg,#1e3a8a,#172554)}
.mi-golpe.aco{border-color:#475569}.mi-golpe.aco .mi-azulejo{color:#cbd5e1;border-color:#475569;background:linear-gradient(180deg,#334155,#1e293b)}
/* balls e comandos ao lado dos golpes */
.mi-balls{display:flex;gap:6px;align-items:stretch}
.mi-balls .mi-slot{width:56px;aspect-ratio:auto;flex-direction:column;gap:2px;font-size:9px;font-weight:800;padding:4px}
.mi-balls .mi-slot img{width:26px;height:26px}
.mi-comandos{display:flex;flex-direction:column;gap:6px}
.mi-comandos .mi-bt{padding:4px 10px;min-height:0;font-size:9.5px;justify-content:flex-start}
/* time rápido */
.mi-time{display:flex;gap:8px}
.mi-time .mi-slot{flex:1;aspect-ratio:auto;flex-direction:column;gap:3px;padding:6px 4px 5px;font-size:9.5px;font-weight:800;color:var(--mi-rotulo)}
.mi-time .mi-slot img{width:44px;height:44px}
.mi-time .mi-slot .mi-barra{width:80%;height:5px}.mi-time .mi-slot .mi-barra::after{display:none}
/* hotbar (itens rápidos 1-0) */
.mi-hotbar{display:flex;gap:6px;align-items:flex-end}
.mi-hotbar .item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.mi-hotbar .item .tecla{font-size:9px;font-weight:800;color:var(--mi-mudo);border:1px solid var(--mi-fio);border-radius:4px;padding:0 5px;background:var(--mi-navy3)}
.mi-hotbar .item.on .tecla{color:var(--mi-ciano-escuro);background:var(--mi-ciano);border-color:var(--mi-ciano)}
.mi-hotbar .mi-slot{width:46px}
/* atalhos (lista de toggles) */
.mi-toggles{display:flex;flex-direction:column;gap:5px}
.mi-toggles>label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mi-txt2);padding:4px 6px;border-radius:8px;cursor:pointer}
.mi-toggles>label:hover{background:rgba(21,67,115,.4)}
.mi-toggles>label .mi-sw{margin-left:auto}
/* chat */
.mi-chat{display:flex;flex-direction:column;gap:8px;min-height:0}
.mi-chat .canais{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.mi-chat .canais .mi-bt{padding:4px 10px;min-height:26px;font-size:9.5px}
.mi-chat .linhas{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:12px;padding:6px 8px;border-radius:10px;background:var(--mi-navy3);border:1px solid #163a5e}
.mi-chat .linhas>div{display:flex;gap:6px;align-items:baseline}
.mi-chat .linhas time{color:var(--mi-mudo);font-size:10.5px;font-variant-numeric:tabular-nums}
.mi-chat .linhas .canal{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:#1e3a5f;color:var(--mi-rotulo-on)}
.mi-chat .linhas .canal.sistema{background:#0e4a5c;color:#a5f3fc}.mi-chat .linhas .canal.global{background:#1d4ed8;color:#dbeafe}
.mi-chat .linhas .canal.trade{background:#065f46;color:#a7f3d0}.mi-chat .linhas .canal.guild{background:#5b21b6;color:#e9d5ff}.mi-chat .linhas .canal.evento{background:#9a3412;color:#fed7aa}
.mi-chat .linhas .texto{color:var(--mi-txt)}
.mi-chat .entrada{display:flex;gap:6px;align-items:center}
.mi-chat .entrada input{flex:1}
/* avisos (toast) */
.mi-aviso{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--mi-r-card);background:var(--mi-vidro2);border:1px solid var(--mi-fio);border-left-width:3px;box-shadow:var(--mi-sombra)}
.mi-aviso .txt{flex:1;font-size:12px;color:var(--mi-txt2)}.mi-aviso .txt b{display:block;font-size:12.5px;color:var(--mi-txt)}
.mi-aviso.ok{border-left-color:var(--mi-ok)}.mi-aviso.ok .mi-azulejo{color:var(--mi-ok)}
.mi-aviso.alerta{border-left-color:var(--mi-aviso)}.mi-aviso.alerta .mi-azulejo{color:var(--mi-aviso)}
.mi-aviso.erro{border-left-color:var(--mi-perigo)}.mi-aviso.erro .mi-azulejo{color:var(--mi-perigo)}
.mi-aviso .fechar{background:none;border:none;color:var(--mi-mudo);cursor:pointer;font-size:14px}
.mi-aviso .fechar:hover{color:var(--mi-txt)}
/* botões extras da referência */
.mi-bt.sucesso{background:linear-gradient(180deg,#34d399,#059669);border-color:#6ee7b7;color:#022c22;box-shadow:0 0 0 1px rgba(52,211,153,.35),0 0 14px rgba(52,211,153,.3)}
.mi-bt.sucesso:hover{background:linear-gradient(180deg,#6ee7b7,#10b981)}
.mi-bt.ouro.solido{background:linear-gradient(180deg,#fde68a,#f59e0b);border-color:#fde68a;color:#3a2a08}
.mi-pilula.novo{background:#b91c1c;border-color:#f87171;color:#fff}.mi-pilula.evento{background:#c2410c;border-color:#fb923c;color:#fff}
.mi-pilula.shiny{color:var(--mi-shiny);border-color:rgba(240,171,252,.5)}.mi-pilula.raro{background:#2563eb;border-color:#60a5fa;color:#fff}
.mi-pilula.epico{background:#7e22ce;border-color:#c084fc;color:#fff}.mi-pilula.lendario{background:#be185d;border-color:#f472b6;color:#fff}
.mi-pilula.trancado{color:var(--mi-mudo);border-style:dashed}
/* barra de progresso com cor por recurso (fome/energia, como na referência) */
.mi-barra.fome>i{background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 0 10px rgba(245,158,11,.5)}
.mi-barra.energia>i{background:linear-gradient(180deg,#86efac,#22c55e);box-shadow:0 0 10px rgba(34,197,94,.5)}
.mi-barra.hp.vermelha>i{background:linear-gradient(180deg,#fca5a5,#ef4444);box-shadow:0 0 10px rgba(239,68,68,.5)}
/* ============================================================================
BARRA DO TREINADOR (.mi-char) — a "barra de informações do char" do topo
avatar redondo com selo VIP e a bola · nome + lápis · Lv. · HP · EXP ·
moedas e diamantes com "+" · azulejos de boost (EXP / LOOT / SHINY / VIP)
============================================================================ */
.mi-char{display:flex;align-items:stretch;gap:0;padding:12px 18px;border-radius:28px;
background:linear-gradient(180deg,rgba(11,42,74,.92),rgba(6,26,48,.92));backdrop-filter:blur(12px);
border:2px solid rgba(34,211,238,.75);box-shadow:0 0 0 1px rgba(6,26,48,.9),0 0 22px rgba(34,211,238,.35),0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 var(--mi-luz)}
.mi-char .avatar{position:relative;width:100px;height:100px;flex-shrink:0;margin-right:18px;align-self:center}
.mi-char .avatar .anel{width:100px;height:100px;border-radius:99px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#1e5a8a,#0a2140);
border:3px solid var(--mi-ciano);box-shadow:0 0 16px rgba(34,211,238,.6),inset 0 0 12px rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.mi-char .avatar .anel img{width:84px;height:84px;image-rendering:pixelated;object-fit:contain}
.mi-char .avatar .vip{position:absolute;left:50%;top:-8px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;
background:linear-gradient(180deg,#5a3d0a,#3a2a08);border:2px solid #fcd34d;color:#fde68a;font-size:11px;font-weight:900;letter-spacing:1px;box-shadow:0 0 10px rgba(252,211,77,.5);white-space:nowrap}
.mi-char .avatar .vip svg{width:13px;height:13px;fill:#fcd34d;stroke:none}
.mi-char .avatar .vip.off{display:none}
.mi-char .avatar .bola{position:absolute;right:-4px;bottom:-2px;width:36px;height:36px;border-radius:99px;background:#fff;border:3px solid #061a30;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.mi-char .avatar .bola::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:#e5484d}
.mi-char .avatar .bola::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:99px;background:#fff;border:3px solid #061a30;transform:translate(-50%,-50%);box-shadow:0 0 0 20px transparent}
.mi-char .avatar .bola i{position:absolute;left:0;right:0;top:50%;height:3px;background:#061a30;transform:translateY(-50%)}
.mi-char .quem{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding-right:18px}
.mi-char .nome{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:.3px;color:#fff;line-height:1.1}
.mi-char .nome .mi-bt{padding:0;width:28px;min-height:28px;border-radius:8px}
.mi-char .nome .mi-bt svg{width:13px;height:13px}
.mi-char .nivel{font-size:18px;font-weight:800;color:var(--mi-ciano2);letter-spacing:.3px}
.mi-char .linha{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;margin-top:2px}
.mi-char .linha .ico{display:flex;align-items:center;justify-content:center;width:40px;height:30px}
.mi-char .linha .ico svg{width:24px;height:24px;fill:#ff4d6d;stroke:none;filter:drop-shadow(0 0 6px rgba(255,77,109,.6))}
.mi-char .linha .ico.exp{border:2px solid var(--mi-ciano);border-radius:8px;color:var(--mi-ciano2);font-size:11px;font-weight:900;letter-spacing:1px;height:28px;box-shadow:0 0 8px rgba(34,211,238,.4)}
.mi-char .linha .val{font-size:16px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;min-width:88px;text-align:right}
.mi-char .mi-barra{height:16px;border-width:2px;border-color:#0a2140;background:#0a1a30}
.mi-char .mi-barra::after{display:none}
.mi-char .mi-barra.hp>i{background:linear-gradient(180deg,#ff7a8a,#ff3355);box-shadow:0 0 14px rgba(255,51,85,.6)}
.mi-char .mi-barra.exp>i{background:linear-gradient(180deg,#a5f3fc,#22d3ee);box-shadow:0 0 14px rgba(34,211,238,.6)}
.mi-char .falta{font-size:12px;color:var(--mi-rotulo);padding-left:56px}
.mi-char .divisor{width:1px;background:linear-gradient(180deg,transparent,var(--mi-ciano),transparent);opacity:.6;margin:0 18px 0 0;align-self:stretch}
.mi-char .lado{display:flex;flex-direction:column;justify-content:center;gap:10px}
.mi-char .recursos{display:flex;gap:10px}
.mi-char .recurso{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;border-radius:14px;min-width:150px;
background:rgba(6,26,48,.8);border:1px solid var(--mi-fio);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mi-char .recurso .moeda{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
background:radial-gradient(circle at 40% 35%,#fde68a,#d97706);color:#3a2a08;border:2px solid #b45309;box-shadow:0 0 8px rgba(252,211,77,.5)}
.mi-char .recurso .dia{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.mi-char .recurso .dia svg{width:24px;height:24px;fill:#38bdf8;stroke:#0369a1;stroke-width:1;filter:drop-shadow(0 0 6px rgba(56,189,248,.6))}
.mi-char .recurso b{flex:1;font-size:17px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-align:left;padding-left:2px}
.mi-char .recurso .mais{width:30px;height:30px;padding:0;min-height:0;border-radius:8px;font-size:18px;font-weight:900;line-height:1}
.mi-char .boosts{display:flex;gap:8px}
.mi-char .boost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:78px;padding:8px 4px;border-radius:12px;
background:rgba(6,26,48,.85);border:2px solid var(--b,#1e4d7a);box-shadow:0 0 12px color-mix(in srgb,var(--b,#1e4d7a) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--b,#1e4d7a) 22%,transparent)}
.mi-char .boost svg{width:26px;height:26px;fill:var(--b);stroke:none;filter:drop-shadow(0 0 6px var(--b))}
.mi-char .boost .rot{font-size:13px;font-weight:900;letter-spacing:1px;color:var(--b);text-transform:uppercase}
.mi-char .boost .tempo{font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;background:rgba(6,26,48,.9);border-radius:6px;padding:1px 6px}
.mi-char .boost.off{opacity:.45;filter:saturate(.3)}
.mi-char .boost.exp{--b:#4ade80}.mi-char .boost.loot{--b:#fcd34d}.mi-char .boost.shiny{--b:#e879f9}.mi-char .boost.vip{--b:#fcd34d}
.mi-char .boost.vip .tempo{color:#4ade80;font-weight:900;letter-spacing:1px}
@media(max-width:1100px){.mi-char{flex-wrap:wrap;gap:12px;padding:10px 12px;border-radius:18px}.mi-char .divisor{display:none}.mi-char .avatar{width:72px;height:72px;margin-right:8px}.mi-char .avatar .anel{width:72px;height:72px}.mi-char .avatar .anel img{width:60px;height:60px}
.mi-char .nome{font-size:18px}.mi-char .lado{width:100%}.mi-char .recursos,.mi-char .boosts{flex-wrap:wrap}.mi-char .boost{width:calc(25% - 6px)}}