/* ═══════════════════════════════════════════════════════════
   TAPLISIEUX.CSS — Design profissional, estilo jogo mobile
   Inspiração: TT2, AFK Arena, Arknights
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@400;600;800;900&family=Rajdhani:wght@500;700&display=swap');

/* ══════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════ */
:root {
    --bg:          #04030e;
    --bg2:         #0e0c24;
    --bg3:         #16133a;
    --border:      #2a2758;
    --border2:     #3d3a80;

    --gold:        #f5a623;
    --gold2:       #ffd87a;
    --gold-glow:   rgba(245,166,35,0.5);

    --rose:        #e8416f;
    --rose-glow:   rgba(232,65,111,0.45);

    --purple:      #c052ff;
    --blue:        #4a8fff;
    --green:       #44d988;

    --text:        #ede9f8;
    --text2:       #8c88a8;
    --text3:       #5c5880;

    --f-title:     'Cinzel', serif;
    --f-body:      'Nunito', sans-serif;
    --f-mono:      'Rajdhani', sans-serif;

    --r:           12px;
    --r2:          18px;
    --r3:          24px;

    --shadow-pop:  0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 24px var(--gold-glow);
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; padding: 0;
}

body {
    background: var(--bg);
    font-family: var(--f-body);
    color: var(--text);
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

canvas {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 0;
}

/* ══════════════════════════════════════
   LOBBY HUD — TOPO
══════════════════════════════════════ */
#lobbyHUD {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(180deg,
        rgba(4,3,14,0.97) 0%,
        rgba(4,3,14,0.55) 100%
    );
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 80;
}

#lobbyHUDEsq { display: flex; gap: 8px; }
#lobbyMoedas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.moedaHUD {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--f-mono);
    letter-spacing: 0.5px;
    cursor: default;
    transition: background 0.2s, transform 0.15s;
}
.moedaHUD:hover {
    background: rgba(255,255,255,0.09);
    transform: translateY(-1px);
}

.btnTop {
    background: rgba(255,255,255,0.06);
    color: var(--text2);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r);
    padding: 7px 13px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
    line-height: 1;
}
.btnTop:hover  { background: rgba(255,255,255,0.12); color: var(--text); transform: translateY(-1px); }
.btnTop:active { transform: translateY(0) scale(0.96); }

/* ══════════════════════════════════════
   LOBBY BOTÕES — RODAPÉ
══════════════════════════════════════ */
#lobbybotoes {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    padding: 12px 20px 24px;
    background: linear-gradient(0deg,
        rgba(4,3,14,0.98) 0%,
        rgba(4,3,14,0.60) 100%
    );
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    z-index: 80;
}

.btnLobby {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(160deg, #252345 0%, #181632 100%);
    color: var(--text);
    border: 1px solid var(--border2);
    border-radius: var(--r2);
    padding: 13px 22px 11px;
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    min-width: 92px;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 14px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.btnLobby::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

.btnLobby:hover  { transform: translateY(-4px) scale(1.03); filter: brightness(1.18); }
.btnLobby:active { transform: translateY(0) scale(0.97); filter: brightness(0.9); }
.btnLobby .btnIcon  { font-size: 24px; line-height: 1; }
.btnLobby .btnLabel { font-size: 10px; }

.btnLobby.gacha {
    background: linear-gradient(160deg, #3e2d00 0%, #261b00 100%);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 2px 18px rgba(245,166,35,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
}
.btnLobby.gacha:hover {
    box-shadow: 0 4px 28px rgba(245,166,35,0.45), 0 0 0 1px var(--gold);
}

.btnLobby.batalha {
    background: linear-gradient(160deg, #3d0b1a 0%, #250710 100%);
    border-color: var(--rose);
    color: var(--rose);
    box-shadow: 0 2px 18px var(--rose-glow), inset 0 1px 0 rgba(255,255,255,0.07);
}
.btnLobby.batalha:hover {
    box-shadow: 0 4px 28px rgba(232,65,111,0.50), 0 0 0 1px var(--rose);
}

/* ══════════════════════════════════════
   MODAIS
══════════════════════════════════════ */
.modalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeOverlay 0.22s ease;
}
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.modalBox {
    background: linear-gradient(160deg, #13112c 0%, #0b0922 100%);
    border: 1px solid var(--border2);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r2);
    padding: 22px;
    width: 92%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-pop), 0 0 40px rgba(74,143,255,0.10);
    animation: slideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.modalBox.grande { max-width: 560px; }
.modalBox.small  { max-width: 360px; }
.modalBox::-webkit-scrollbar { width: 4px; }
.modalBox::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.modalTopo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.modalTopo h2 {
    font-family: var(--f-title);
    font-size: 17px;
    color: var(--gold);
    letter-spacing: 1.5px;
    text-shadow: 0 0 20px var(--gold-glow);
}

.btnFecharModal {
    background: rgba(232,65,111,0.12);
    color: var(--rose);
    border: 1px solid rgba(232,65,111,0.32);
    border-radius: var(--r);
    padding: 5px 13px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s;
}
.btnFecharModal:hover { background: rgba(232,65,111,0.24); transform: scale(1.05); }

.secaoTitulo {
    font-family: var(--f-title);
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 16px 0 8px;
    opacity: 0.85;
}

.dica {
    color: var(--text3);
    font-size: 12px;
    margin-top: 10px;
    font-style: italic;
}

.configLabel {
    display: block;
    color: var(--text2);
    font-size: 12px;
    margin: 10px 0 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

input[type=range].slider {
    width: 100%;
    accent-color: var(--gold);
    height: 4px;
    border-radius: 2px;
}

/* ══════════════════════════════════════
   GACHA / INVOCAR
══════════════════════════════════════ */
.taxasRaridade {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.taxa {
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid;
    letter-spacing: 0.3px;
    font-family: var(--f-mono);
}
.taxa.comum    { background: rgba(136,152,170,0.10); border-color: #8898aa; color: #aab8ca; }
.taxa.raro     { background: rgba(74,143,255,0.10);  border-color: #4a8fff; color: #7ab2ff; }
.taxa.epico    { background: rgba(192,82,255,0.10);  border-color: #c052ff; color: #d47aff; }
.taxa.lendario { background: rgba(245,166,35,0.10);  border-color: var(--gold); color: var(--gold); }

.pityInfo {
    font-size: 11px;
    color: var(--text2);
    margin-bottom: 14px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 2px solid var(--border2);
    font-family: var(--f-mono);
}

.resultadoInvocar {
    min-height: 32px;
    font-size: 15px;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.025);
    border-radius: var(--r);
    border-left: 3px solid var(--gold);
    color: var(--gold);
    transition: all 0.3s;
    font-family: var(--f-body);
}
.resultadoInvocar.small { font-size: 12px; min-height: 22px; padding: 6px 10px; }

.invocarBotoes { display: flex; gap: 10px; margin-bottom: 18px; }

.btnInvocar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: linear-gradient(160deg, #252345 0%, #181632 100%);
    border: 1px solid var(--border2);
    border-radius: var(--r);
    padding: 13px 10px;
    color: var(--text);
    font-family: var(--f-body);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.btnInvocar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}
.btnInvocar .custo { font-size: 12px; color: #88eeff; }
.btnInvocar:hover  { filter: brightness(1.2); transform: translateY(-3px) scale(1.02); }
.btnInvocar:active { transform: scale(0.97); }
.btnInvocar.destaque {
    background: linear-gradient(160deg, #3e2d00 0%, #261b00 100%);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 2px 16px rgba(245,166,35,0.25);
}
.btnInvocar.destaque:hover { box-shadow: 0 4px 28px rgba(245,166,35,0.45); }
.btnInvocar.small  { font-size: 12px; padding: 9px 6px; border-radius: 8px; }

.inventarioGrid  { display: flex; flex-direction: column; gap: 14px; }
.inventarioSecao h4 {
    color: var(--text2);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gridItens { display: flex; flex-wrap: wrap; gap: 6px; }

.itemTag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    background: rgba(0,0,0,0.3);
    transition: transform 0.12s, box-shadow 0.12s;
    cursor: default;
    font-family: var(--f-mono);
}
.itemTag:hover { transform: scale(1.06); }

/* ══════════════════════════════════════
   PERSONAGEM / EQUIPAR
══════════════════════════════════════ */
.personagemCard {
    display: flex;
    align-items: center;
    gap: 13px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--r);
    padding: 13px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.personagemCard.ativo {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(245,166,35,0.15);
}
.personagemIcone { font-size: 38px; width: 54px; text-align: center; line-height: 1; }
.personagemInfo  { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.personagemInfo b { font-size: 15px; color: var(--text); }
.personagemInfo small { color: var(--text2); font-size: 12px; }
.badge {
    background: var(--gold);
    color: #000;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 900;
    font-family: var(--f-mono);
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════
   UI DE BATALHA
══════════════════════════════════════ */
#uiBatalha {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
#uiBatalha button,
#batalhaNavTopo,
#painelInferior,
#statsRapidos,
#btnSairBatalha,
#moedaCentro { pointer-events: auto; }

/* ── Nav Topo ── */
#batalhaNavTopo {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    background: linear-gradient(180deg,
        rgba(4,3,14,0.97) 0%,
        rgba(4,3,14,0) 100%
    );
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.navBtn {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 7px 16px;
    font-size: 16px;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--f-body);
    font-weight: 700;
}
.navBtn:hover  { background: rgba(255,255,255,0.13); color: var(--text); transform: scale(1.05); }
.navBtn:active { transform: scale(0.94); }

#estagioInfo { flex: 1; text-align: center; line-height: 1; }
#estagioNum {
    font-family: var(--f-title);
    font-size: 26px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
    line-height: 1;
}
#estagioNome {
    font-size: 10px;
    color: var(--text2);
    letter-spacing: 1px;
    font-family: var(--f-mono);
    margin-top: 2px;
    text-transform: uppercase;
}

#btnEnfrentarChefe {
    background: linear-gradient(135deg, #b03020, #7a1508);
    color: white;
    border: none;
    border-radius: var(--r);
    padding: 8px 15px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(180,50,30,0.55);
    transition: all 0.18s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
#btnEnfrentarChefe:hover { filter: brightness(1.2); transform: scale(1.04); }
#btnEnfrentarChefe:active { transform: scale(0.97); }

/* ── HP Bar ── */
#hpAreaBatalha {
    position: absolute;
    top: 58px; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    min-width: 280px;
    max-width: 500px;
    pointer-events: none;
}

#hpNomeRow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
#nomeInimigo {
    font-weight: 900;
    font-size: 13px;
    color: #ffcccc;
    text-shadow: 0 0 14px rgba(255,100,100,0.7);
    font-family: var(--f-mono);
    letter-spacing: 0.5px;
}
#hpNumero {
    font-size: 11px;
    color: var(--text2);
    font-weight: 700;
    font-family: var(--f-mono);
}

#hpBarraContainer {
    position: relative;
    width: 100%;
    height: 18px;
    background: rgba(0,0,0,0.6);
    border-radius: 20px;
    border: 1px solid rgba(255,100,100,0.25);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(0,0,0,0.5);
}
#hpInimigo {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #a02020 0%, #d43535 45%, #ff5858 100%);
    border-radius: 20px;
    transition: width 0.20s ease-out, background 0.5s;
}
#hpBrilho {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44%;
    background: rgba(255,255,255,0.16);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}
/* Stripe de animação na HP bar */
#hpInimigo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0) 0,
        rgba(255,255,255,0) 4px,
        rgba(255,255,255,0.06) 4px,
        rgba(255,255,255,0.06) 8px
    );
}

/* ── Moeda Centro ── */
#moedaCentro {
    position: absolute;
    top: 108px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 28px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 2px 14px var(--gold-glow);
    font-family: var(--f-title);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ── Fala do Monstro ── */
#falaInimigo {
    position: absolute;
    top: 158px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 10;
}
#falaInimigo.visivel { opacity: 1; }
#falaTexto {
    background: rgba(16,4,4,0.95);
    border: 1px solid rgba(255,70,70,0.40);
    border-radius: var(--r2);
    padding: 9px 20px;
    font-size: 13px;
    color: #ffbbbb;
    font-style: italic;
    max-width: 72vw;
    text-align: center;
    box-shadow: 0 4px 22px rgba(255,50,50,0.18);
    animation: wobble 0.4s ease;
}
@keyframes wobble {
    0%   { transform: scale(0.88); opacity: 0; }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1);    opacity: 1; }
}

/* ══════════════════════════════════════
   PAINEL INFERIOR — Tap Titans 2 style
══════════════════════════════════════ */
#painelInferior {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
}

/* Stats rápidos */
#statsRapidos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 16px;
    background: rgba(4,3,14,0.96);
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    font-family: var(--f-mono);
    letter-spacing: 0.5px;
}
#danoTaqueUI   { color: var(--gold); }
#moedaUIBatalha{ color: #ffd87a; }
#gemaUIBatalha { color: #88eeff; }

/* Abas rodapé */
#abaRodape {
    display: flex;
    background: rgba(4,3,14,0.98);
    border-top: 1px solid var(--border);
}
.abaRodapeBtn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 7px;
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
    color: var(--text3);
    font-family: var(--f-body);
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.abaRodapeBtn .abaIcon { font-size: 18px; margin-bottom: 1px; }
.abaRodapeBtn:hover { color: var(--text); background: rgba(255,255,255,0.025); }
.abaRodapeBtn.ativa {
    color: var(--gold);
    border-top-color: var(--gold);
    background: rgba(245,166,35,0.06);
}

/* Conteúdo da aba */
#abaConteudo {
    background: rgba(4,3,14,0.99);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    max-height: 250px;
    transition: max-height 0.3s ease, opacity 0.25s;
}
#abaConteudo.minimizado { max-height: 0; overflow: hidden; opacity: 0; }
#abaConteudo::-webkit-scrollbar { width: 3px; }
#abaConteudo::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.abaPanel { padding: 10px 14px 14px; }
.upgradeScroll { display: flex; flex-direction: column; gap: 6px; }

/* Item de upgrade */
.upgradeItem {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.022);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--r);
    padding: 8px 12px;
    transition: background 0.15s, border-color 0.15s;
}
.upgradeItem:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.09); }
.upIcone { font-size: 22px; width: 30px; text-align: center; line-height: 1; }
.upInfo  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.upNome  { font-size: 13px; font-weight: 800; color: var(--text); }
.upDesc  {
    font-size: 11px;
    color: var(--text2);
    font-family: var(--f-mono);
    letter-spacing: 0.3px;
}

.btnUp {
    background: linear-gradient(135deg, #1c5a1c, #0e3a0e);
    color: #70e870;
    border: 1px solid #2e7a2e;
    border-radius: var(--r);
    padding: 7px 14px;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-width: 86px;
    text-align: center;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    letter-spacing: 0.3px;
}
.btnUp:hover    { filter: brightness(1.28); transform: scale(1.05); }
.btnUp:active   { transform: scale(0.97); }
.btnUp:disabled { background: #1a1a28; color: #464455; border-color: #2a2838; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btnUp.equipado { background: linear-gradient(135deg, #1a4a1a, #103010); color: #44ff88; border-color: #44ff88; }

/* Prestigiar */
.prestigiarBox {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(36,26,4,0.90), rgba(22,15,2,0.90));
    border: 1px solid rgba(245,166,35,0.25);
    border-radius: var(--r);
    padding: 12px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}
.prestigiarBox::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(245,166,35,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.prestigiarInfo { flex: 1; }
.prestigiarInfo b { font-size: 14px; color: var(--gold); }
.prestigiarInfo small { display: block; font-size: 11px; color: var(--text2); margin-top: 4px; line-height: 1.4; }
.btnPrestigiar {
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: var(--r);
    padding: 9px 16px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
    letter-spacing: 0.3px;
}
.btnPrestigiar:hover:not(:disabled) { filter: brightness(1.18); transform: scale(1.04); box-shadow: 0 4px 16px var(--gold-glow); }
.btnPrestigiar:disabled { background: #333; color: #777; cursor: not-allowed; }

/* Botão minimizar */
#btnMinimizar {
    position: absolute;
    top: -32px; right: 14px;
    background: rgba(4,3,14,0.97);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--text2);
    padding: 5px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--f-mono);
}
#btnMinimizar:hover { color: var(--text); }

/* Sair */
#btnSairBatalha {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(180,45,35,0.14);
    color: #ff7070;
    border: 1px solid rgba(180,45,35,0.38);
    border-radius: var(--r);
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s;
    pointer-events: auto;
    font-family: var(--f-mono);
    letter-spacing: 0.5px;
}
#btnSairBatalha:hover { background: rgba(180,45,35,0.28); color: #fff; transform: scale(1.04); }

/* ══════════════════════════════════════
   BAR DE EXPERIÊNCIA (mini)
══════════════════════════════════════ */
#expBar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,0.6);
    overflow: hidden;
    z-index: 210;
}
#expFill {
    height: 100%;
    background: linear-gradient(90deg, #4a8fff, #88eeff);
    transition: width 0.5s ease;
    box-shadow: 0 0 8px #4a8fff88;
}

/* ══════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════ */
@media (max-width: 400px) {
    .btnLobby { min-width: 76px; padding: 11px 14px 9px; }
    #lobbybotoes { gap: 7px; padding: 10px 10px 20px; }
    .modalBox { padding: 16px; }
    #abaConteudo { max-height: 210px; }
}

@media (min-height: 800px) {
    #abaConteudo { max-height: 300px; }
}