/* ==========================================================================
   1. RESET E ESTILO GERAL
   ========================================================================== */
* {
    padding-left: 4px;
}
body {
    font-family: 'Courier New', Courier, monospace;
    background: #111 url('./background_home.jpg') no-repeat center center fixed;
    background-size: cover;
    color: white;
    margin: 0;
    padding: 16px 0;        /* zero nas laterais — evita overflow horizontal */
    text-align: center;
    min-height: 100vh;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;       /* nunca passa da viewport */
}
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: -1;
}

/* ==========================================================================
   2. FUNDO DINÂMICO POR VOCAÇÃO - FIXADO NO TOPO
   ========================================================================== */
.voc-bg-panel {
    position: fixed;        /* fixo na viewport — não afeta o layout */
    top: var(--voc-bg-top, clamp(72px, 10vh, 130px));
    width: var(--voc-bg-w, clamp(120px, 18vw, 280px));
    height: var(--voc-bg-h, clamp(180px, 42vh, 480px));
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.voc-bg-panel.visible {
    opacity: 0.92;
}


.voc-bg-panel.visible {
    opacity: 0.92;
}
.voc-bg-left  {
    left: clamp(0px, 1vw, 18px);
    background-position: left top;
    transform-origin: left top;
}
.voc-bg-right {
    right: clamp(0px, 1vw, 18px);
    background-position: right top;
    transform-origin: right top;
    transform: scale(1.12);
}

body.voc-knight {
    --voc-bg-w: clamp(150px, 22vw, 330px);
    --voc-bg-h: clamp(210px, 46vh, 520px);
    --voc-bg-top: clamp(78px, 12vh, 150px);
}

body.voc-paladin {
    --voc-bg-w: clamp(130px, 18vw, 280px);
    --voc-bg-h: clamp(200px, 43vh, 480px);
    --voc-bg-top: clamp(74px, 11vh, 135px);
}

body.voc-sorcerer,
body.voc-druid {
    --voc-bg-w: clamp(135px, 19vw, 290px);
    --voc-bg-h: clamp(205px, 44vh, 490px);
    --voc-bg-top: clamp(74px, 11vh, 135px);
}

/* ── Ajuste específico por vocação ──────────────────────────
   Se uma imagem ficar desproporcional, ajuste só a vocação aqui.
   background-size: auto 100%  → escala pela altura (mantém proporção)
   width / height              → tamanho do painel que contém a imagem
   top                         → posição vertical
   ────────────────────────────────────────────────────────── */
body.voc-knight #voc-bg-left,
body.voc-knight #voc-bg-right {
    position: fixed;
    background-size: contain;
}

body.voc-sorcerer #voc-bg-left,
body.voc-sorcerer #voc-bg-right {
    background-size: contain;
}

/* Para ajustar só um lado (ex: só a imagem da esquerda):
body.voc-sorcerer #voc-bg-left  { width: 200px; }
body.voc-sorcerer #voc-bg-right { width: 240px; } */

/* ==========================================================================
   3. LOGO
   ========================================================================== */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    position: relative; /* Mantém como referência para o subtítulo */
    z-index: 2;
}

.game-logo {
    max-width: 680px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(174,134,37,0.3));
    display: block;
}

.subtitle {
    position: absolute;
    top: 335px;                   /* mais abaixo — era 206px */
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 8px #ae8625;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);

    

    font-size: 20px;
    color: #f7d08a;
    background-color: rgba(17,17,17,0.85); /* fundo levemente transparente */
    padding: 2px 12px;            /* menor — borda mais fina visualmente */
    border: 2px solid rgba(174,134,37,0.5); /* borda mais sutil */
    border-radius: 3px;

    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    pointer-events: none;
}  
    /* --- AJUSTE 2: Efeito Pisca-Pisca (Blink) --- */
.pisca-pisca {
    position: absolute;/* Flutua no vão da logo */
    gap: 10px;
    top: 60px;             /* Ajuste esse valor para subir/descer no vão da sua logo específica */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;

    /* Estilo do Texto */
    color: #ae8625;        /* Dourado Tibia */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(174,134,37,0.8), 2px 2px 2px #000;
    white-space: nowrap;

    /* A Animação Mágica */
    animation: blinkEffect 2.5s infinite ease-in-out; /* Velocidade do pisca-pisca */
}

/* Definição da Animação (Keyframes) */
@keyframes blinkEffect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.1; } /* Pisca até quase desaparecer */
}


/* ==========================================================================
   4. LAYOUT PRINCIPAL — 2 colunas
   ========================================================================== */
.main-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    align-items: start;
    position: relative;
    z-index: 4;
    box-sizing: border-box;
}

/* ==========================================================================
   5. COLUNA ESQUERDA
   ========================================================================== */
.sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

/* Dragão chamas decorativo acima do status */
.dragon-status-deco {
    z-index: -1;
    width:104%;
    margin-left: -9px;
    margin-bottom: -45px; /* cola na borda do status */
    line-height: 0;
    pointer-events: none; /* Garante que não bloqueie cliques */
}
.dragon-status-deco img {
    width: 105%;
    margin-left: -15.6px;
    height: auto;
    display: flex;
    image-rendering: pixelated;
}

.status-container.status-bordered {
    border: 1px solid #ae8625;
    background: rgba(15,15,15,0.92);
    padding: 10px;
    border-radius: 0 0 2px 2px;
     /* o dragão já faz a "tampa" */
}
.status-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    margin: 2px 0;
    background: rgba(30,30,30,0.5);
    border-bottom: 1px solid rgba(174,134,37,0.1);
    font-size: 15px;
}
.separator {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #ae8625, transparent);
    margin: 6px 0;
    opacity: 0.5;
}
.label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f7d08a;
}

/* Inventário */
.inventario-container {
    background-color: rgba(0,0,0,0.92);
    padding: 12px;
    border-radius: 0 0 4px 4px;
    border: 1px solid #ae8625;
    box-sizing: border-box;
    margin-top: 25px; /* Espaço entre status e mochila */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Impede que a borda "vaze" para fora */
}
.inventario-header {
    color: #ae8625;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-top: 1px solid #ae8625;
    padding-top: 8px;
    text-align: -webkit-center;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    justify-content: center;
}
.inventario-container .slot {
    width: 70%;
    margin: auto;
    aspect-ratio: 1;
    background-color: #1a1a1a;
    border: 3px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}
.inventario-container .slot:hover {
    border-color: #f7d08a;
    background-color: #252525;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(174,134,37,0.3);
}
.inventario-container .slot img {
    width: 60px;
    height: 60px;
    image-rendering: pixelated;
}

/* ==========================================================================
   6. COLUNA CENTRAL
   ========================================================================== */
.character-center {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 55px;
}

/* Banner + avatar */
.banner-mannequin {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -2px;
}
.banner-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    image-rendering: pixelated;
}
.player-avatar-floating {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.player-avatar-floating img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(174,134,37,0.7));
}

/* Box manequim */
.mannequin-box {
    width: 100%;
    max-width: 470px;
    background: rgba(15,15,15,0.92);
    border: 1px solid #ae8625;
    border-radius: 0 0 2px 2px;
    padding: 18px 12px 14px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.eq-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.mannequin-box .slot {
    width: 80px;
    height: 80px;
    background: #1a1a1a;
    border: 3px solid #797564;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.mannequin-box .slot:hover {
    border-color: #f7d08a;
    background-color: #252525;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(174,134,37,0.3);
}
.slot-spacer {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.mannequin-box .slot::after {
    content: attr(data-label);
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #777;
    white-space: nowrap;
    pointer-events: none;
}

.bslot {
    background-size: 60px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid #333;
    overflow: hidden;
}
.bslot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}


/* Quantidade em item equipado no manequim: arrows, bolts, throwables etc. */
.bslot { position: relative; }
.equip-qty {
    position: absolute;
    right: 2px;
    bottom: 1px;
    min-width: 16px;
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,215,80,0.55);
    color: #55ff66;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
    z-index: 20;
}


#slot-helmet    { background-image: url('./img/items/slots/helmet_placeholder.gif'); }
#slot-armor     { background-image: url('./img/items/slots/armor_placeholder.gif'); }
#slot-legs      { background-image: url('./img/items/slots/legs_placeholder.gif'); }
#slot-boots     { background-image: url('./img/items/slots/boots_placeholder.gif'); }
#slot-weapon    { background-image: url('./img/items/slots/weapon_placeholder.gif'); }
#slot-shield    { background-image: url('./img/items/slots/shield_placeholder.gif'); }
#slot-backpack  { background-image: url('./img/items/slots/backpack_placeholder.gif'); }
#slot-amulet    { background-image: url('./img/items/slots/amulet_placeholder.gif'); }
#slot-ring-left { background-image: url('./img/items/slots/ring_placeholder.gif'); }

/* Dragão barra acima dos botões */
.dragon-nav-deco {
    width: 100%;
    max-width: 260px;
    margin-left: 47px;
    margin-top: 16px;
    margin-bottom: -2px;
    line-height: 0;
    z-index: 5;
}
.dragon-nav-deco img {
    width: 355px;
    height: auto;
    display: block;
    image-rendering: pixelated;
    margin-left: -77px;
    z-index: 5;
}
.dragon-nav-deco h3 {
    /* Estilo do Texto */
    position: relative;
    display: flex;
    color: #ae8625;        /* Dourado Tibia */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(174,134,37,0.8), 2px 2px 2px #000;
    white-space: nowrap;
    margin: 0;
    top: -32px;
    left: 30px;
}

/* ==========================================================================
   7. BOTÕES DE NAVEGAÇÃO
   ========================================================================== */
.nav-links-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -1px;
    gap: 15px;
    width: 100%;
    height: 100%;
    max-width: 470px;
    max-height: 560px;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid #ae8625;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 1;
}

.link-button, .btn-hunt-home {
    padding: 10px 6px;
    background: #252525;
    color: #ae8625;
    border: 1px solid #444;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    font-size: 15px;
    text-align: center;
}
/*.btn-hunt-home {
    background: #1b5e20;
    color: white;
    border-color: #2e7d32;
}*/
.link-button:hover { background: #ae8625; color: #000; }
.btn-sair {
    background: #600 !important;
    color: white !important;
    border-color: #900 !important;
    grid-column: 1 / -1;
}

/* Botão Store — destaque premium */
.btn-store {
    background: linear-gradient(135deg, #1a1200, #2a1e00) !important;
    color: #ffd700 !important;
    border-color: #d4a017 !important;
    text-shadow: 0 0 6px #ffd70066;
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
}
.btn-store:hover {
    background: linear-gradient(135deg, #2a1e00, #3a2a00) !important;
    color: #ffe066 !important;
    box-shadow: 0 0 8px #ffd70044;
}

/* ==========================================================================
   8. STACKABLE ITEMS
   ========================================================================== */
.inventario-container .slot,
.mannequin-box .slot { position: relative; }

.item-count {
    position: absolute;
    bottom: 2px; right: 3px;
    color: #00ff00;
    font-family: 'Tahoma', Geneva, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    pointer-events: none;
    z-index: 10;
}
.item-icon {
    width: 100%; height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
}

/* ==========================================================================
   9. LOGIN
   ========================================================================== */
#auth-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none; /* JS controla: mostra só se não há sessão ativa */
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    z-index: 9999;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Centraliza a caixa em qualquer resolução */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
}

.auth-container {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    background: #1a1a1a;
    border: 3px solid #ae8625;
    box-shadow: 0 0 30px rgba(0,0,0,0.9);
    text-align: center;
}
.auth-logo { width: 200px; margin-bottom: 20px; image-rendering: pixelated; }
.auth-container input {
    width: 100%; padding: 12px; margin-bottom: 15px;
    background: #000; border: 1px solid #444; color: #fff; box-sizing: border-box;
}
.btn-auth { width: 100%; padding: 15px; font-weight: bold; cursor: pointer; border: none; text-transform: uppercase; }
.btn-gold { background: linear-gradient(to bottom, #ae8625, #f7d08a, #ae8625); color: #000; }
.vocation-selector { display: flex; gap: 10px; margin: 15px 0; }
.btn-voc { flex: 1; padding: 10px 5px; background: #252525; border: 1px solid #444; color: white; cursor: pointer; font-size: 11px; }
.btn-voc.selected { border-color: #f7d08a; background: #333; box-shadow: inset 0 0 10px #ae8625; }
.auth-switch { margin-top: 15px; font-size: 13px; color: #888; }
.auth-switch span { color: #f7d08a; cursor: pointer; text-decoration: underline; }

/* ==========================================================================
   10. TELAS SECUNDÁRIAS
   ========================================================================== */
.sub-screen { max-width: 800px; margin: 40px auto; padding: 20px; background: rgba(0,0,0,0.85); border: 2px solid #ae8625; border-radius: 4px; }
.container-generic { background: #1a1a1a; padding: 20px; margin: 90px 0; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.grid-deposito { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.slot-deposito { width: 60px; height: 60px; background: #000; border: 1px solid #444; image-rendering: pixelated; }
.gold-text { color: #f7d08a; text-transform: uppercase; letter-spacing: 2px; }

/* ==========================================================================
   11. RESPONSIVO — MOBILE (max-width: 768px)
   PC: tudo acima funciona como está, sem alteração.
   Mobile: layout empilhado, tamanhos reduzidos, legível.
   ========================================================================== */
@media (max-width: 768px) {

    body {
        padding: 8px 4px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Imagens de vocação: fixas no topo, menores */
    #voc-bg-left, #voc-bg-right {
        position: fixed !important;
        width: clamp(74px, 22vw, 120px) !important;
        height: clamp(120px, 30vh, 210px) !important;
        top: clamp(54px, 8vh, 82px) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        z-index: 3 !important;
        opacity: 0.72;
    }
    #voc-bg-left  { left: 0 !important; background-position: left top !important; }
    #voc-bg-right {
        right: 0 !important;
        width: clamp(96px, 27vw, 150px) !important;
        height: clamp(150px, 34vh, 240px) !important;
        background-position: right top !important;
        transform: scale(1.18);
    }

    /* Logo */
    .logo-container { margin-bottom: 8px; }
    .game-logo      { max-width: 220px; width: 75vw; }
    .subtitle       { font-size: 10px; letter-spacing: 2px; top: 100px; padding: 1px 6px; }
    .pisca-pisca    { font-size: 10px; top: 66px; letter-spacing: 2px; }

    /* Layout principal: flex coluna, 100% wide */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 100%;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    /* Dissolve containers para ordenação por CSS order */
    .sidebar        { width: 100%; display: contents; }
    .character-center { width: 100%; display: contents; }

    /* Ordem: Status > Skills > Manequim > Inventário > Navegação */
    .dragon-status-deco              { order: 0; width: 100%; }
    .pisca-pisca                     { order: 0; }
    .status-container.status-bordered{ order: 1; width: 100%; box-sizing: border-box; }
    #skills-sidebar                  { order: 2; width: 100%; margin-top: 6px; }
    .banner-mannequin                { order: 3; width: 100%; }
    .mannequin-box                   { order: 3; width: 100%; }
    #home-regen-area                 { order: 4; width: 100%; }
    .inventario-container            { order: 4; width: 100%; margin-top: 6px; box-sizing: border-box; }
    .dragon-nav-deco                 { order: 5; width: 100%; }
    .nav-links-bottom                { order: 5; width: 100%; }

    /* Status boxes */
    .dragon-status-deco { width: 102%; margin-left: -4px; margin-bottom: -28px; }
    .status-box { font-size: 13px; padding: 4px 9px; }
    .status-container.status-bordered { max-width: 100%; }

    /* Inventário */
    .inventario-container { margin-top: 12px; max-width: 100%; }
    .grid-container { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .inventario-container .slot { width: 100%; margin: 0; }

    /* Manequim */
    .character-center { margin-top: 0; align-items: center; }
    .banner-mannequin { width: 100%; max-width: 100%; }
    .banner-img       { max-width: 100%; height: auto; }
    .mannequin-box    { max-width: 100%; padding: 8px; }
    .eq-row           { justify-content: center; gap: 4px; }
    .slot.bslot       { width: 52px; height: 52px; }

    /* Navegação */
    .dragon-nav-deco { width: 100%; }
    .dragon-nav-deco img { width: 100%; height: auto; margin-left: 0px; margin-top: 0px;}
    .dragon-nav-deco h3 { top: -20px; gap: 1;}
    .nav-links-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    .link-button { font-size: 12px; padding: 10px 6px; width: 100%; box-sizing: border-box; }
    .btn-store   { grid-column: 1 / -1; }
    .btn-sair    { grid-column: 1 / -1; background: #1a0000 !important; }
}
/* ============================================================
   SIDEBAR DE SKILLS — Swir World
   Cole este bloco no FINAL do seu style.css
   ============================================================ */

#skills-sidebar {
    width: 100%;
    background: linear-gradient(180deg, #0e0b04 0%, #130f05 100%);
    border: 1px solid #3a2c0a;
    border-radius: 4px;
    padding: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
    box-shadow: inset 0 1px 0 rgba(255,210,80,0.06);
}

.skills-title {
    background: linear-gradient(90deg, #1a1200, #2a1e00, #1a1200);
    border-bottom: 1px solid #3a2c0a;
    color: #c9921a;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    padding: 6px 0 5px;
    text-shadow: 0 0 8px rgba(200,140,20,0.4);
}

/* Barra de progresso de ML */
.ml-progress-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px 4px;
    border-bottom: 1px solid #1e1600;
}
.ml-progress-label {
    font-size: 15px;
    color: #8a6a1a;
    white-space: nowrap;
    min-width: 24px;
    text-align: right;
}
.ml-progress-bar {
    flex: 1;
    height: 8px;
    background: #0d0900;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #2a1e00;
}
.ml-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6a3fc8, #a06aff);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ml-progress-pct {
    font-size: 15px;
    color: #9a70d0;
    min-width: 26px;
    text-align: left;
}

.skill-choice-label {
    font-size: 12px;
    color: #7a5e10;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 6px 6px 2px;
    padding: 2px 0;
    border-top: 1px solid #1e1600;
    text-transform: uppercase;
}

.skill-row {
    display: flex;
    flex-direction: column;
    padding: 5px 5px;
}
.skill-choice-row {
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    padding: 2px 4px;
}

.skill-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding: 5px 7px 5px 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    user-select: none;
    border: 1px solid transparent;
    margin-bottom: 2px;
    min-height: 44px;
    height: 100px;
}
.skill-choice-row .skill-card {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px 5px;
    flex: 1;
    max-width: 155px;
    min-height: 100px;
    text-align: center;
    justify-content: flex-start;
}

.skill-card.skill-unlocked {
    background: rgba(174,134,37,0.07);
    border-color: #2e2208;
}
.skill-card.skill-unlocked:hover {
    background: rgba(174,134,37,0.16);
    border-color: #7a5e10;
    box-shadow: inset 0 0 12px rgba(174,134,37,0.06);
}
.skill-card.skill-locked {
    background: rgba(0,0,0,0.18);
    border-color: #161106;
    cursor: not-allowed;
}
.skill-card.skill-chosen {
    background: rgba(174,134,37,0.12) !important;
    border-color: #6a5010 !important;
    box-shadow: inset 0 0 10px rgba(174,134,37,0.08) !important;
}
.skill-card.skill-chosen:hover {
    background: rgba(174,134,37,0.20) !important;
    border-color: #ae8625 !important;
}

.skill-icon-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #080600;
    border: 1px solid #2a1e00;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.skill-card.skill-unlocked .skill-icon-wrap { border-color: #3a2c08; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 6px rgba(174,134,37,0.08); }
.skill-card.skill-chosen   .skill-icon-wrap { border-color: #6a5010; box-shadow: 0 0 8px rgba(174,134,37,0.2); }

.skill-icon {     width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; padding: 2px 5px 2px 2px; }
.skill-icon-off { filter: grayscale(1) brightness(0.25); }
.skill-card.skill-unlocked .skill-icon-off { filter: grayscale(0.3) brightness(0.7) sepia(0.3); }
.skill-icon-placeholder::after { content: '?'; color: #2e2208; font-size: 16px; font-weight: bold; }

.skill-level-badge {
    position: absolute;
    bottom: 1px; right: 1px;
    background: rgba(0,0,0,0.82);
    color: #6a5010;
    font-size: 7px;
    padding: 0 2px;
    border-radius: 1px;
    font-weight: bold;
    pointer-events: none;
    line-height: 1.3;
}
.skill-card.skill-unlocked .skill-level-badge { color: #ae8625; }
.skill-card.skill-chosen   .skill-level-badge { color: #ffd700; }

.skill-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.skill-choice-row .skill-info { align-items: center; }

.skill-name { font-size: 14px; color: #9a7820; font-weight: bold; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-card.skill-unlocked .skill-name { color: #c9921a; }
.skill-card.skill-chosen   .skill-name { color: #ffd060; }
.skill-card.skill-locked   .skill-name { color: #3a2e10; }

.skill-type-tag { font-size: 13px; padding: 1px 4px; border-radius: 2px; display: inline-block; font-weight: bold; letter-spacing: 0.3px; }
.tag-damage  { background: rgba(180,40,20,0.25);  color: #c05030; border: 1px solid rgba(180,40,20,0.3); }
.tag-heal    { background: rgba(20,140,60,0.2);   color: #30a050; border: 1px solid rgba(20,140,60,0.3); }
.tag-buff    { background: rgba(180,140,20,0.2);  color: #b08820; border: 1px solid rgba(180,140,20,0.3); }
.tag-passive { background: rgba(80,80,180,0.2);   color: #6060c0; border: 1px solid rgba(80,80,180,0.3); }

.skill-cost { font-size: 15px; color: #364870; display: flex; align-items: center; gap: 3px; }
.skill-card.skill-unlocked .skill-cost { color: #4a66a8; }
.skill-cost-zero { color: #303020 !important; }

.skill-desc { 
    font-size: 13px; 
    color: #3a3220; 
    line-height: 1.3; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; /* The original prefixed version */
    line-clamp: 2;         /* The standard version to clear the warning */
}
.skill-card.skill-unlocked .skill-desc { color: #6a5a30; }
.skill-choice-row .skill-desc { display: none; }

.skill-cd-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #0a0800; border-radius: 0 0 3px 3px; overflow: hidden; }
.skill-cd-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ae8625, #ffd700); border-radius: 0 0 3px 3px; transition: width 0s; }

.skill-group-sep { height: 1px; background: #1a1200; margin: 3px 6px; }

/* ==========================================================================
   SQM-CLIP — confina GIFs de efeito dentro da célula sem cortar floats
   ========================================================================== */
.sqm-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   MAGIC IMPACT GIF — efeitos mágicos/elementais (tamanho ajustável)
   Para aumentar: mude 1.0 → 1.3 (30% maior que o sprite), etc.
   ========================================================================== */
.magic-impact-gif {
    position: absolute;
    width:  calc(var(--sprite) * 1.0);
    height: calc(var(--sprite) * 1.0);
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 55;
    pointer-events: none;
    animation: hitImpactAnim 0.75s ease-out forwards;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================================================
   FLOATS — mana regen azul na hunt
   ========================================================================== */
.mana-flutuante {
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: clamp(11px, 2.8vw, 15px);
    color: #3399ff;
    pointer-events: none;
    z-index: 40;
    animation: sobeDano 1s ease-out forwards;
    white-space: nowrap;
    text-shadow: 1px 1px 3px #000;
}

/* ==========================================================================
   FLOATS NA HOME — regen fora de combate
   ========================================================================== */
#home-regen-area {
    position: absolute;
    height: 30px;
    pointer-events: none;
    overflow: visible;
    width: 100%;
    top: 50px;
}


.home-regen-float {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 1px 1px 2px #000;
    animation: homeRegenFloat 1.2s ease-out forwards;
    z-index: 50;
}
.home-regen-life { color: #22dd22; left: 35%; }
.home-regen-mana { color: #3399ff; left: 65%; }
@keyframes homeRegenFloat {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

/* ==========================================================================
   SKILL CARD — cooldown overlay por card independente
   ========================================================================== */
.skill-card .skill-cd-bar       { opacity: 0; transition: opacity 0.2s; }
.skill-card.in-cd .skill-cd-bar { opacity: 1; }
.skill-card.in-cd .skill-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    border-radius: 3px;
    pointer-events: none;
    z-index: 5;
}
.skill-card.in-cd .skill-icon {
    filter: brightness(0.4) grayscale(0.6);
}

/* ==========================================================================
   CONSUME FLOATS — cura manual (poções/food) em cima do sprite
   ========================================================================== */
.consume-float {
    font-size: 15px;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 0 4px #000, 1px 1px 2px #000;
    animation: consumeFloatUp 1.4s ease-out forwards;
    z-index: 9999;
}
.consume-float--life { color: #33ff66; }
.consume-float--mana { color: #44aaff; }
.consume-float--full {
    color: #ffdd44;
    font-size: 13px;
    letter-spacing: 1px;
}
@keyframes consumeFloatUp {
    0%   { opacity: 1;  transform: translateX(-50%) translateY(0px);   }
    70%  { opacity: 1;  transform: translateX(-50%) translateY(-40px);  }
    100% { opacity: 0;  transform: translateX(-50%) translateY(-60px);  }
}


.hold-ring {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    pointer-events: none;
    z-index: 20;
    background: conic-gradient(
        #ae8625 calc(var(--p, 0) * 360deg),
        transparent calc(var(--p, 0) * 360deg)
    );
    -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
            mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
    opacity: 0;
    transition: opacity 0.1s;
}
.hold-ring[style*="--p: 0."] { opacity: 1; }
.slot:active .hold-ring       { opacity: 1; }
.slot:has(.hold-ring)::after {
    content: "Segure 2s para usar";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.88);
    color: #f7d08a;
    font-size: 9px;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid #3a2c0a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 99;
}
.slot:has(.hold-ring):hover::after { opacity: 1; }

/* ==========================================================================
   ELEMENT BADGES — badge elemental nos slots de equip
   ========================================================================== */
.elem-badge {
    position: absolute;
    bottom: 2px; left: 2px;
    font-size: 7px;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}
.elem-fire   { background:#5a1800; color:#ff8822; }
.elem-ice    { background:#001a3a; color:#66ccff; }
.elem-poison { background:#0a2a0a; color:#44ff44; }
.elem-death  { background:#1a0a2a; color:#cc66ff; }
.elem-energy { background:#2a2a00; color:#ffff44; }
.elem-holy   { background:#2a2a10; color:#ffffcc; }

/* Row 4 manequim — slot-fake e slot-extra */
#slot-fake  { visibility:hidden; pointer-events:none; }
#slot-extra { visibility:hidden; pointer-events:none; position:relative;
              background-image:url('./img/items/slots/extra_placeholder.gif'); }
.voc-paladin #slot-extra { border-color:#b8860b !important; box-shadow:0 0 8px rgba(184,134,11,0.5) !important; }

/* ════════════════════════════════════════════════════════════
   PAINEL — ESTILO DE JOGO (todas as vocações)
   ════════════════════════════════════════════════════════════ */

/* ── Botão toggle colapsável ── */
.playstyle-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: linear-gradient(90deg, #0e0900, #1c1400, #0e0900);
    border: 1px solid #5a3e08;
    border-radius: 4px;
    cursor: pointer;
    color: #ae8625;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 4px 0 0;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}
.playstyle-toggle:hover,
.playstyle-toggle.open {
    border-color: #ae8625;
    background: linear-gradient(90deg, #140f00, #241a00, #140f00);
    color: #F0D952;
}
.playstyle-toggle-icon  { font-size: 14px; flex-shrink: 0; }
.playstyle-toggle-label { flex: 1; text-align: left; }
.playstyle-arrow        { font-size: 9px; flex-shrink: 0; }

/* Cores por vocação */
.playstyle-toggle-paladin { border-color: #5a3e08; background: linear-gradient(90deg,#0e0900,#1c1400,#0e0900); color: #ae8625; }
.playstyle-toggle-paladin:hover, .playstyle-toggle-paladin.open { border-color: #ae8625; color: #F0D952; }

.playstyle-toggle-knight { border-color: #6b1a1a; background: linear-gradient(90deg,#0e0000,#1c0808,#0e0000); color: #cc4444; }
.playstyle-toggle-knight:hover, .playstyle-toggle-knight.open { border-color: #cc4444; color: #ff6666; background: linear-gradient(90deg,#180000,#2a0808,#180000); }

.playstyle-toggle-sorcerer { border-color: #2a1a5a; background: linear-gradient(90deg,#06000e,#0e0820,#06000e); color: #8855cc; }
.playstyle-toggle-sorcerer:hover, .playstyle-toggle-sorcerer.open { border-color: #8855cc; color: #aa77ff; }

/* ── Grid de cards ── */
.playstyle-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #2a1e00;
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    background: #090600;
}

/* ── Card individual ── */
.pstyle-card {
    padding: 8px 9px 7px;
    border-bottom: 1px solid #1a1100;
    background: #0b0800;
}
.pstyle-card:last-child { border-bottom: none; }

/* Header: imagem + nome */
.pstyle-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.pstyle-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    opacity: 0.9;
}
.pstyle-name {
    font-size: 11px;
    font-weight: bold;
    color: #c9921a;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── Tags de stat (2 por linha) ── */
.pstags-row {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
}
.pstag {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}
.pstag-icon { font-size: 10px; flex-shrink: 0; }

.pstag-vhigh { background: rgba(180,30,10,0.30);  color: #ff4422; border: 1px solid rgba(220,40,10,0.45); }
.pstag-high  { background: rgba(160,100,10,0.28); color: #ffaa22; border: 1px solid rgba(200,130,10,0.42); }
.pstag-med   { background: rgba(60,120,20,0.25);  color: #88cc33; border: 1px solid rgba(80,150,20,0.38); }
.pstag-low   { background: rgba(20,60,150,0.25);  color: #4488ee; border: 1px solid rgba(30,80,200,0.38); }
.pstag-vlow  { background: rgba(80,10,120,0.25);  color: #aa55ee; border: 1px solid rgba(100,20,160,0.38); }

/* ── Barras de stat ── */
.psbar-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 5px 0 4px;
    padding: 4px 0 2px;
    border-top: 1px solid #1a1200;
    border-bottom: 1px solid #1a1200;
}
.psbar-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.psbar-label {
    font-size: 10px;
    color: #6a5010;
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
}
.psbar-track {
    flex: 1;
    height: 5px;
    background: #0d0900;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #1a1200;
}
.psbar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.psfill-vhigh { background: linear-gradient(90deg,#991500,#ff3311); }
.psfill-high  { background: linear-gradient(90deg,#aa5500,#ff9900); }
.psfill-med   { background: linear-gradient(90deg,#226600,#55dd22); }
.psfill-low   { background: linear-gradient(90deg,#0a2d88,#2277ff); }
.psfill-vlow  { background: linear-gradient(90deg,#3a0a88,#9944ff); }

/* ── Seção "Melhor Para" ── */
.psbest-block {
    margin: 5px 0 4px;
    padding: 4px 0 3px;
    border-top: 1px solid #1a1200;
}
.psbest-title {
    font-size: 8px;
    color: #7a6020;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}
.psbest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.psbest-tag {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.4;
}
.psbest-pvp   { background: rgba(180,20,20,0.30);  color: #ff5555; border: 1px solid rgba(200,30,30,0.45); }
.psbest-boss  { background: rgba(120,20,180,0.28); color: #cc77ff; border: 1px solid rgba(140,30,200,0.42); }
.psbest-farm  { background: rgba(160,130,0,0.28);  color: #ffcc22; border: 1px solid rgba(180,150,0,0.42); }
.psbest-pvpeq { background: rgba(60,60,60,0.30);   color: #aaaaaa; border: 1px solid rgba(100,100,100,0.4); }
.psbest-quest { background: rgba(10,60,160,0.28);  color: #4488ff; border: 1px solid rgba(20,80,200,0.42); }
.psbest-fuga  { background: rgba(10,120,30,0.28);  color: #44cc66; border: 1px solid rgba(20,150,40,0.42); }

/* ── Descrição ── */
.pstyle-desc {
    font-size: 13px;
    color: #5a4e28;
    line-height: 1.5;
    text-align: center;
    font-style: italic;
    margin-top: 4px;
}

/* ── Auth — centralização mobile ───────────────────────────── */
@media (max-width: 768px) {
    #auth-screen  { padding: 12px; }
    .auth-wrapper { min-height: 100%; align-items: center; justify-content: center; }
    .auth-container { width: 95%; max-width: 420px; margin: 0 auto; padding: 24px 18px; }
}
@media (max-width: 480px) {
    #auth-screen  { padding: 8px; }
    .auth-container { width: 98%; padding: 20px 14px; }
    .auth-logo    { width: 160px; }
}
@media (max-width: 360px) {
    .auth-container { padding: 16px 10px; }
    .auth-logo    { width: 130px; }
}


/* Fase 9 — aura oficial para mobs corrompidos em Tasks/Quests de História. */
.mob-corrompido {
  filter: drop-shadow(0 0 4px rgba(45,0,70,.95)) drop-shadow(0 0 9px rgba(90,0,140,.85)) drop-shadow(0 0 15px rgba(125,0,190,.75));
  animation: swirCorruptedPulse 1.35s infinite ease-in-out;
}
@keyframes swirCorruptedPulse {
  0%,100% { filter: drop-shadow(0 0 3px rgba(40,0,65,.85)) drop-shadow(0 0 7px rgba(75,0,120,.75)); }
  50% { filter: drop-shadow(0 0 7px rgba(75,0,120,1)) drop-shadow(0 0 12px rgba(110,0,170,.95)) drop-shadow(0 0 18px rgba(150,0,220,.85)); }
}