/* ═══════════════════════════════════════════════════════════════════════════
   💎 TEMA PREMIUM DO JOGO INTEIRO (22/09/2026)

   Ordem do dono: "Quero que você deixe tudo mais vivo e premium. Não quero mais nenhum menu, caixa,
   janela, card, no modelo antigo." Plano: docs/PLANO-MENUS-PREMIUM-2026-09-22.md.

   Mesma linguagem das telas de profissão (public/prof-ui.js): Nunito no texto, Silkscreen nos títulos,
   janelas com gradiente e moldura dourada, botões com cor e relevo, abas em pílula, chips coloridos.
   Carregado DEPOIS do style.css e dos <style> dos módulos (que são injetados no boot), por isso as
   regras usam !important só nas propriedades de APARÊNCIA — nunca em tamanho, posição ou display.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ut-bg: #0e1420;
    --ut-bg2: #151d2c;
    --ut-bg3: #1c2638;
    --ut-borda: #2b3a55;
    --ut-ouro-borda: #8a6d25;
    --ut-txt: #eef2f8;
    --ut-sub: #a9b6c9;
    --ut-ouro: #f5c451;
    --ut-ouro2: #d9982b;
    --ut-azul: #4fa3ff;
    --ut-azul2: #2a6fd6;
    --ut-verde: #4fd08a;
    --ut-verde2: #249a5c;
    --ut-roxo: #8b6bff;
    --ut-roxo2: #5a3fd6;
    --ut-verm: #ff6b6b;
    --ut-verm2: #c73b3b;
}

/* ── texto ─────────────────────────────────────────────────────────────── */

body {
    font-family: 'Nunito', 'Segoe UI', Verdana, sans-serif
}

.modal-head,
#modal-title,
.hd-box h2,
.nat-box h2,
.hb-box h2,
.est-box h2,
.mg-box h2,
.pgi-head,
.bs-head,
.bcat-head,
.mb-head,
.bst-head,
.ahp-head,
.shop-h {
    font-family: 'Silkscreen', 'Nunito', sans-serif !important;
    letter-spacing: .06em !important
}

/* ── janelas e painéis ─────────────────────────────────────────────────── */

.panel,
#modal,
.hd-box,
.nat-box,
.hb-box,
.est-box,
.mg-box,
.pgi-box,
.wm-box,
.rk-box,
.bcat-box,
.fq-box,
.fr-box,
#qst-win,
#bst-win,
#lib-win,
#mg-root,
#mb-root,
#mp-root,
#ds-modal,
#sellrar,
#voto-modal,
#ref-modal,
.gu-card,
.login-card,
#npc-box,
#faint-box .fb-panel {
    background: linear-gradient(180deg, rgba(28, 38, 56, .97), rgba(14, 20, 32, .97)) !important;
    border: 1px solid var(--ut-ouro-borda) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 0 1px rgba(245, 196, 81, .10), 0 18px 50px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    color: var(--ut-txt)
}

.panel.hud {
    border-radius: 14px !important
}

#modal-bg,
.nat-bg,
.hb-bg,
.est-bg,
.pgi-bg,
.rk-bg,
.bcat-back,
.hd-ov,
.mg-ov,
.wm-ov,
.gu-ov {
    background: radial-gradient(120% 90% at 50% 0%, rgba(40, 60, 110, .50), rgba(4, 7, 12, .88)) !important
}

.modal-head {
    background: linear-gradient(90deg, #1a2540, #1b1f3a 55%, #2a1f36) !important;
    border-bottom: 1px solid var(--ut-borda) !important;
    color: #fff !important;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5)
}

#modal-body {
    font-size: 14.5px
}

.shop-h {
    color: var(--ut-ouro) !important;
    border-bottom: 1px solid rgba(245, 196, 81, .25) !important
}

/* ── botão fechar ──────────────────────────────────────────────────────── */

#modal-close,
.hd-x,
.nat-x,
.hb-x,
.est-x,
.mg-x,
.pgi-x,
.wm-x,
.gu-x,
.rk-x,
.bs-x,
.bcat-x,
.mb-x,
.ds-x {
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #dbe4f0 !important;
    border: 1px solid var(--ut-borda) !important;
    transition: background .15s, color .15s
}

#modal-close:hover,
.hd-x:hover,
.nat-x:hover,
.hb-x:hover,
.est-x:hover,
.mg-x:hover,
.pgi-x:hover,
.wm-x:hover,
.gu-x:hover,
.rk-x:hover,
.bs-x:hover,
.bcat-x:hover,
.mb-x:hover,
.ds-x:hover {
    background: rgba(255, 107, 107, .28) !important;
    color: #fff !important
}

/* ── botões ────────────────────────────────────────────────────────────── */

/* secundário (padrão): azul */

.btn,
.hd-btn,
.hb-bt,
.est-bt,
.mg-bt,
.pgi-bt,
.wm-bt,
.wm-bt2,
.gu-b,
.bs-btn,
.bcat-bt,
.bst-btn,
.lib-bt,
.mb-b,
.mh-btn,
.hnt-btn-ir,
.lg-b,
.exmb-b {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    color: #f2f6ff !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #3a5a8c, #243a5e) !important;
    box-shadow: 0 3px 0 #13213a, 0 8px 16px -8px rgba(79, 163, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    transition: transform .08s, filter .15s, box-shadow .08s;
    cursor: pointer
}

.btn:hover:not(:disabled),
.hd-btn:hover,
.hb-bt:hover,
.est-bt:hover,
.mg-bt:hover,
.pgi-bt:hover,
.wm-bt:hover,
.wm-bt2:hover,
.gu-b:hover,
.bs-btn:hover,
.bcat-bt:hover,
.bst-btn:hover,
.lib-bt:hover,
.mb-b:hover,
.mh-btn:hover,
.hnt-btn-ir:hover,
.lg-b:hover,
.exmb-b:hover {
    filter: brightness(1.12)
}

.btn:active:not(:disabled),
.hd-btn:active,
.hb-bt:active,
.est-bt:active,
.mg-bt:active,
.pgi-bt:active,
.wm-bt:active,
.gu-b:active,
.bs-btn:active,
.bcat-bt:active,
.bst-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #13213a !important
}

/* principal: dourado */

.btn.gold,
.pgi-bt-ok,
.nat-bt-ok,
.btn-epic,
.btn.sel {
    color: #2a1b02 !important;
    background: linear-gradient(180deg, #ffe08a, var(--ut-ouro) 45%, var(--ut-ouro2)) !important;
    box-shadow: 0 3px 0 #8a5f12, 0 8px 18px -6px rgba(245, 196, 81, .55), inset 0 1px 0 rgba(255, 255, 255, .55) !important
}

/* caçada / perigo: vermelho */

.btn.hunt,
.pgi-bt-no,
.nat-bt-no {
    color: #fff !important;
    background: linear-gradient(180deg, #ff7b7b, var(--ut-verm2)) !important;
    box-shadow: 0 3px 0 #6e1c1c, 0 8px 16px -8px rgba(255, 107, 107, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important
}

.btn.tiny {
    border-radius: 8px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    box-shadow: 0 2px 0 #13213a !important
}

.btn:disabled,
.hd-btn:disabled,
.hb-bt:disabled,
.est-bt:disabled,
.mg-bt:disabled,
.pgi-bt:disabled,
.wm-bt:disabled,
.bs-btn:disabled,
.bcat-bt:disabled,
.bst-btn:disabled {
    filter: grayscale(.85) brightness(.75) !important;
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important
}

/* ── abas ──────────────────────────────────────────────────────────────── */

.hd-aba,
.nat-tab,
.mg-tab,
.pgi-tab,
.gu-tab,
.bcat-aba,
.bst-tab,
.c2-tab,
.gcap-tab,
.mk2-tab,
.mg-tabs .mg-tab {
    border-radius: 999px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    border: 1px solid var(--ut-borda) !important;
    background: linear-gradient(180deg, #1d2840, #161e30) !important;
    color: var(--ut-sub) !important;
    transition: all .15s
}

.hd-aba:hover,
.nat-tab:hover,
.mg-tab:hover,
.pgi-tab:hover,
.gu-tab:hover,
.bcat-aba:hover,
.bst-tab:hover,
.c2-tab:hover,
.gcap-tab:hover,
.mk2-tab:hover {
    color: #fff !important;
    border-color: #4a6390 !important
}

.hd-aba.on,
.nat-tab.on,
.mg-tab.on,
.pgi-tab.on,
.gu-tab.on,
.bcat-aba.on,
.bst-tab.on,
.c2-tab.on,
.gcap-tab.on,
.mk2-tab.on,
.hd-aba.ativa,
.gu-tab.ativa,
.bst-tab.ativa,
.c2-tab.ativa {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, var(--ut-roxo), var(--ut-roxo2)) !important;
    box-shadow: 0 6px 14px -6px rgba(139, 107, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25) !important
}

/* ── chips / etiquetas ─────────────────────────────────────────────────── */

.tag,
.est-chip,
.mg-chip,
.wm-chip,
.bst-chip,
.mk2-chip,
.hnt-chip,
.gu-badge {
    border-radius: 999px !important;
    background: rgba(79, 163, 255, .13) !important;
    border: 1px solid rgba(79, 163, 255, .38) !important;
    color: #cfe5ff !important;
    font-weight: 700
}

/* 🎨 CHIP DE TIPAGEM (27/09/2026, ordem do dono: "as tipagens nos golpes têm que ter a cor da
   tipagem"). A regra de cima pintava TODO chip de azul, inclusive o do tipo do golpe. Quem marca
   `tipo-cor` e manda a cor em --tc sai com a cor do tipo, texto escuro legível. */

.tag.tipo-cor,
.est-chip.tipo-cor,
.mg-chip.tipo-cor,
.wm-chip.tipo-cor,
.bst-chip.tipo-cor,
.mk2-chip.tipo-cor,
.hnt-chip.tipo-cor,
.tipo-cor {
    background: var(--tc) !important;
    border-color: rgba(0, 0, 0, .28) !important;
    color: #10151d !important;
    text-shadow: none !important
}

/* 🧪 CHIP DE BUFF (#boost-bar) — ele flutua SOBRE O MAPA, não dentro de uma janela. Ao entrar na
   regra de chip acima (22/09) ganhou um fundo de 13% de opacidade: o chão do cenário aparecia
   atrás do relógio e não dava mais pra ler quanto tempo faltava. Aqui ele volta a ser OPACO, com a
   moldura dourada do HUD — a mesma leitura que ele tinha antes do tema. */

#boost-bar .bb-chip {
    border-radius: 999px !important;
    color: var(--ut-ouro) !important;
    background: linear-gradient(180deg, rgba(28, 38, 56, .97), rgba(10, 15, 24, .97)) !important;
    border: 1px solid var(--ut-ouro-borda) !important;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06) !important
}

/* ── cards ─────────────────────────────────────────────────────────────── */

.mg-card,
.rk-card,
.bs-card,
.bcat-card,
.ahp-card,
.ds-card,
.gcap-card,
.mk2-card,
.mh-card,
.hnt-card,
.q-card,
.donate-card,
.eq-card,
.dc-card {
    border-radius: 14px !important;
    border: 1px solid var(--ut-borda) !important;
    background: linear-gradient(180deg, var(--ut-bg3), var(--ut-bg2)) !important;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transition: transform .12s, border-color .12s
}

.mg-card:hover,
.rk-card:hover,
.bcat-card:hover,
.ahp-card:hover,
.ds-card:hover,
.mk2-card:hover,
.hnt-card:hover,
.q-card:hover {
    transform: translateY(-2px);
    border-color: #4a6390 !important
}

/* ── campos ────────────────────────────────────────────────────────────── */

#modal input[type=text],
#modal input[type=number],
#modal input[type=search],
#modal select,
#modal textarea,
.hd-busca,
.nat-busca,
.hb-busca,
.pgi-busca,
.bst-busca,
.hnt-busca {
    background: #0b111c !important;
    border: 1px solid var(--ut-borda) !important;
    border-radius: 10px !important;
    color: var(--ut-txt) !important;
    font-family: 'Nunito', sans-serif !important
}

#modal input:focus,
#modal select:focus,
.hd-busca:focus,
.nat-busca:focus,
.hb-busca:focus,
.pgi-busca:focus,
.bst-busca:focus,
.hnt-busca:focus {
    outline: none;
    border-color: var(--ut-azul) !important;
    box-shadow: 0 0 0 3px rgba(79, 163, 255, .25) !important
}

/* ── barras de progresso ───────────────────────────────────────────────── */

.est-barra,
.mg-barra,
.gu-bar,
.rk-bar,
.bst-bar,
.gcap-bar,
.fq-bar,
.hnt-barra,
.bcat-barra,
.lg-bar {
    border-radius: 99px !important;
    background: #0a0f18 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6)
}

/* ── barra superior ────────────────────────────────────────────────────── */

.tb {
    border-radius: 12px !important;
    transition: transform .12s, background .15s
}

.tb:hover {
    transform: translateY(-2px)
}

.tbm-flyout {
    border-radius: 14px !important;
    border: 1px solid var(--ut-ouro-borda) !important;
    background: linear-gradient(180deg, rgba(28, 38, 56, .98), rgba(14, 20, 32, .98)) !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .85) !important
}

.tbm-item {
    border-radius: 10px !important
}

.tbm-item:hover {
    background: linear-gradient(90deg, rgba(139, 107, 255, .25), rgba(79, 163, 255, .12)) !important
}

/* ── coordenada do rodapé: o alfinete é ícone, não emoji ─────────────────── */

#coords::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    background: url('sprites/profissoes/ui/1f4cd.png') center/contain no-repeat;
    image-rendering: auto
}

/* ── rolagem ───────────────────────────────────────────────────────────── */

#modal-body::-webkit-scrollbar,
.hd-box ::-webkit-scrollbar,
.nat-box ::-webkit-scrollbar,
.hb-box ::-webkit-scrollbar,
.mg-box ::-webkit-scrollbar,
.wm-box ::-webkit-scrollbar,
#qst-win ::-webkit-scrollbar,
#bst-win ::-webkit-scrollbar {
    width: 10px
}

#modal-body::-webkit-scrollbar-thumb,
.hd-box ::-webkit-scrollbar-thumb,
.nat-box ::-webkit-scrollbar-thumb,
.hb-box ::-webkit-scrollbar-thumb,
.mg-box ::-webkit-scrollbar-thumb,
.wm-box ::-webkit-scrollbar-thumb,
#qst-win ::-webkit-scrollbar-thumb,
#bst-win ::-webkit-scrollbar-thumb {
    background: #2b3a55;
    border-radius: 99px;
    border: 2px solid #0e1420
}

/* botão Voltar das Hunts na mesma altura da busca */

.hnt-busca>.hnt-voltar {
    align-self: stretch
}