/* ===== VARIÁVEIS DE COR (mude aqui pra afetar o jogo inteiro) =====
           --Common, --Uncommon, --Rare... são as cores de cada raridade de item.
           --human-color, --elf-color... são as cores de cada raça. */
        :root {
            --bg: #050505;
            --panel: rgba(10, 10, 15, 0.95);
            --gold: #ffd700;
            --slot-bg: rgba(0, 0, 0, 0.6);
            --slot-border: #333;
            --human-color: #00f3ff; --elf-color: #00ff88; --darkelf-color: #bf00ff;
            --orc-color: #ff8000; --dwarf-color: #a52a2a;
            --Common: #b0b0b0; --Uncommon: #5cff5c; --Rare: #00bfff;
            --Epic: #bf00ff; --Legendary: #ff8000;
            --Legacy: #ff2a2a; --Shiny: #ffffff; --Ancestral: #ffffff;
        }
        body { margin: 0; background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%); color: #fff; font-family: 'Segoe UI', sans-serif; height: 100vh; overflow: hidden; }

        /* ===== TELA DE CRIAÇÃO DE PERSONAGEM (raça + classe) ===== */
        #creation-screen { position: fixed; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(0,243,255,0.12), transparent 45%), radial-gradient(circle at 75% 80%, rgba(191,0,255,0.12), transparent 45%), radial-gradient(circle at 50% 100%, rgba(255,128,0,0.08), transparent 50%), #05050a; z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-y: auto; padding: 30px 15px; box-sizing: border-box; }
        h1 { font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; color: #fff; }
        .race-container { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: nowrap; }
        .race-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s; }
        .race-label { color: var(--gold); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
        .race-card { width: 140px; height: 140px; border: 2px solid #333; border-radius: 8px; overflow: hidden; transition: all 0.2s; background: #000; }
        .race-card img { width: 100%; height: 100%; object-fit: cover; }
        .race-wrapper:hover .race-card { border-color: #fff; transform: translateY(-3px); }
        .race-wrapper.selected .race-label { color: currentColor; text-shadow: 0 0 10px currentColor; }
        .race-wrapper.selected .race-card { transform: scale(1.05); border-width: 3px; box-shadow: 0 0 20px currentColor; }
        .race-wrapper[data-race="human"].selected { color: var(--human-color); }
        .race-wrapper[data-race="human"].selected .race-card { border-color: var(--human-color); }
        .race-wrapper[data-race="elf"].selected { color: var(--elf-color); }
        .race-wrapper[data-race="elf"].selected .race-card { border-color: var(--elf-color); }
        .race-wrapper[data-race="darkelf"].selected { color: var(--darkelf-color); }
        .race-wrapper[data-race="darkelf"].selected .race-card { border-color: var(--darkelf-color); }
        .race-wrapper[data-race="orc"].selected { color: var(--orc-color); }
        .race-wrapper[data-race="orc"].selected .race-card { border-color: var(--orc-color); }
        .race-wrapper[data-race="dwarf"].selected { color: var(--dwarf-color); }
        .race-wrapper[data-race="dwarf"].selected .race-card { border-color: var(--dwarf-color); }
        .btn-start { margin-top: 40px; padding: 12px 50px; background: var(--gold); border: none; color: #000; font-weight: 900; font-size: 1rem; border-radius: 25px; cursor: pointer; text-transform: uppercase; }
        .btn-start:disabled { filter: grayscale(1); cursor: not-allowed; }

        /* ===== SELEÇÃO DE CLASSE (Fighter/Mystic, na tela de criação) ===== */
        .class-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin: 30px 0 14px 0; color: var(--gold); }
        .class-columns { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; max-width: 640px; }
        .class-group { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
        .class-group-title { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 2px; }
        .class-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 20px; padding: 7px 14px; cursor: pointer; font-size: 0.8rem; color: #ccc; transition: all .15s; }
        .class-chip-icon { font-size: 1rem; }
        .class-chip:hover { border-color: #fff; color: #fff; transform: translateY(-1px); }
        .class-chip.selected { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.1); box-shadow: 0 0 10px rgba(255,215,0,0.25); }

        /* ===== TELA PRINCIPAL DO JOGO (grid de 3 colunas: status | arena | inventário) ===== */
        #game-app { display: none; grid-template-columns: 260px 1fr 320px; grid-template-rows: auto 1fr; gap: 10px; padding: 10px; height: 100vh; box-sizing: border-box; }
        /* Arredondamento dos painéis principais: mantido baixo (6px) de propósito, pra dar
           aquela cara de "janela de jogo" mais reta (estilo AFK Heroes/Bomb Idle) em vez de
           card arredondado de site comum. O inventário (.inventory-box) fica de fora dessa
           regra - continua com o próprio border-radius, mais abaixo. */
        .panel { background: var(--panel); border: 1px solid #333; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; overflow-y: auto; border-top: 3px solid #444; box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04); }

        /* -- Coluna esquerda: Status do personagem + Chat -- */
        .panel-status { border-top-color: var(--human-color); }
        .left-column, .middle-column, .right-column { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-y: auto; }
        .chat-panel { flex: 0 0 auto; padding: 10px 12px; }
        .chat-header { margin: 0 0 8px 0; font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
        .chat-feed { height: 100px; overflow-y: auto; font-size: 0.62rem; color: #ccc; display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
        .chat-msg-name { font-weight: 700; }
        .chat-input-row { display: flex; gap: 6px; margin-top: 8px; }
        .chat-input { flex: 1; min-width: 0; background: rgba(0,0,0,0.4); border: 1px solid #333; border-radius: 5px; color: #fff; font-size: 0.65rem; padding: 5px 8px; }
        .chat-input:focus { outline: none; border-color: var(--gold); }
        .chat-send-btn { background: var(--gold); color: #000; border: none; border-radius: 5px; padding: 5px 10px; font-weight: 700; cursor: pointer; font-size: 0.7rem; }
        .chat-send-btn:hover { filter: brightness(1.1); }

        /* -- Coluna do meio: Mapa de fases (caminho de círculos numerados) -- */
        .arena-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; border-top: 3px solid var(--darkelf-color); background: radial-gradient(ellipse at center top, rgba(191,0,255,0.06), transparent 65%), url('assets/backgrounds/dungeon-arena.jpg') center/cover no-repeat, var(--panel); }

        /* -- Slots de equipamento (Armas, Armaduras, Joias, Acessórios) - agora na coluna direita --
           Tamanho de cada quadrado: 52x52px. Se aumentar aqui, ajuste também .inv-item
           (grade do inventário) pra ficarem do mesmo tamanho visualmente. */
        .equip-row { display: flex; gap: 6px; justify-content: center; align-items: flex-start; }
        .slot { width: 44px; height: 44px; background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: 5px; display: flex; justify-content: center; align-items: center; position: relative; }
        .slot.equipped { border-color: var(--gold); box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); outline: 1px solid rgba(255, 215, 0, 0.35); outline-offset: 1px; cursor: pointer; }
        .slot-jewel { border-radius: 5px; }
        .slot-wrapper { display: flex; flex-direction: column; align-items: center; gap: 3px; }
        .slot-label { font-size: 0.5rem; color: #888; text-align: center; line-height: 1.2; max-width: 60px; text-transform: uppercase; letter-spacing: 0.2px; }
        .section-title { font-size: 0.65rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-top: 8px; }
        .slot-content { width: 82%; height: 82%; display: flex; justify-content: center; align-items: center; }

        /* -- Coluna direita: Inventário + Logs de Erros/Drops -- */
        /* -- Coluna direita: Inventário + Equipped Items -- */
        /* Grade do inventário - itens de 52x52px, quantas colunas couberem na largura do painel. */
        .inventory-box {
            width: 100%;
            box-sizing: border-box;
            background: linear-gradient(145deg, rgba(0,243,255,0.04), rgba(191,0,255,0.04)), rgba(0,0,0,0.3);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 8px;
            display: grid;
            grid-template-columns: repeat(auto-fill, 40px);
            grid-auto-rows: 40px;
            gap: 6px;
            align-content: start;
            overflow-y: auto;
            height: 200px;
        }
        .inventory-box::-webkit-scrollbar, .log-box::-webkit-scrollbar { width: 8px; }
        .inventory-box::-webkit-scrollbar-track, .log-box::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; }
        .inventory-box::-webkit-scrollbar-thumb, .log-box::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
        .inventory-box::-webkit-scrollbar-thumb:hover, .log-box::-webkit-scrollbar-thumb:hover { background: #777; }
        /* -- Cor da borda de cada item conforme a raridade (usada no inventário e nos slots) --
           Ancestral usa um degradê RGB animado em vez de cor sólida, por isso é diferente. */
        .inv-item { width: 100%; height: 40px; aspect-ratio: 1 / 1; background: #111; border: 1px solid #333; border-radius: 5px; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
        .inv-item:hover { border-color: #fff; }
        .inv-item.Common { border-color: var(--Common); }
        .inv-item.Uncommon { border-color: var(--Uncommon); }
        .inv-item.Rare { border-color: var(--Rare); }
        .inv-item.Epic { border-color: var(--Epic); }
        .inv-item.Legendary { border-color: var(--Legendary); box-shadow: 0 0 8px var(--Legendary); }
        .inv-item.Legacy { border-color: var(--Legacy); box-shadow: 0 0 8px var(--Legacy); }
        .inv-item.Shiny { border-color: var(--Shiny); box-shadow: 0 0 8px #fff, 0 0 16px #fff; }
        .inv-item.Ancestral {
            border: 2px solid;
            border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
            animation: ancestral-spin 3s linear infinite;
        }
        .slot.Legacy { border-color: var(--Legacy); box-shadow: 0 0 6px var(--Legacy); }
        .slot.Shiny { border-color: var(--Shiny); box-shadow: 0 0 8px #fff, 0 0 16px #fff; }
        .slot.Ancestral {
            border: 2px solid;
            border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
            animation: ancestral-spin 3s linear infinite;
        }
        @keyframes ancestral-spin {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
        .chest-item { border-color: #ffbb33 !important; background: rgba(255,187,51,0.1) !important; }
        .chest-icon { font-size: 1.6rem; }

        /* -- Logs de Erros e Drops (caixinhas pequenas, com scroll interno) -- */
        .logs-container { display: flex; flex-direction: column; gap: 15px; }
        .log-box { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.5); border: 1px solid #222; border-radius: 6px; padding: 8px; overflow-y: auto; font-family: 'Consolas', monospace; font-size: 0.68rem; display: flex; flex-direction: column-reverse; }
        .log-box.log-avisos-box { height: 110px; }
        .log-title { font-size: 0.65rem; color: #666; text-transform: uppercase; margin-bottom: 4px; }
        .log-msg { margin-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 3px; line-height: 1.3; }
        .log-time { color: #666; margin-right: 4px; }
        .log-error { color: #ff4444; }
        .log-loot { color: #aaa; }
        .log-legendary { color: var(--Legendary); font-weight: bold; }
        .stats-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.8rem; border-bottom: 1px solid #222; padding-bottom: 2px; }
        .val { color: #fff; font-weight: bold; }

        /* ===== MENU SUPERIOR (Poções, Ferreiro, PvP, Wiki, Codex) ===== */
        .top-menu { grid-column: 1 / -1; display: flex; gap: 6px; background: var(--panel); border: 1px solid #333; border-radius: 6px; padding: 5px 10px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04); }
        .menu-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 6px; padding: 4px 10px; cursor: pointer; color: #ccc; font-size: 0.55rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; transition: all .15s; user-select: none; }
        .menu-icon-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); transform: translateY(-1px); }
        .menu-icon-btn .icon { font-size: 1rem; }

        /* ===== MODAIS (janelas pop-up: loja, wiki, codex, detalhe do item) ===== */
        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; align-items: center; justify-content: center; }
        .modal-overlay.open { display: flex; }
        .modal-box { background: var(--panel); border: 1px solid var(--gold); border-radius: 6px; width: 400px; max-width: 90vw; max-height: 80vh; overflow-y: auto; padding: 18px; box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.15); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 10px; }
        .modal-header h2 { margin: 0; font-size: 0.82rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
        .modal-close { background: #ff2a2a; color: #fff; font-weight: 700; border: none; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; font-size: 0.9rem; }
        .modal-close:hover { background: #ff5555; }
        .modal-body { font-size: 0.8rem; line-height: 1.5; color: #ddd; }
        .shop-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
        .shop-item-name { font-weight: 700; color: #fff; font-size: 0.8rem; }
        .shop-item-desc { font-size: 0.7rem; color: #999; margin-top: 2px; }
        .shop-buy-btn { background: var(--gold); color: #000; border: none; border-radius: 5px; padding: 6px 14px; font-weight: 700; font-size: 0.75rem; cursor: pointer; text-transform: uppercase; white-space: nowrap; }
        .shop-buy-btn:hover { filter: brightness(1.1); }
        .codex-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
        .codex-table th, .codex-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #222; }
        .codex-table th { color: var(--gold); text-transform: uppercase; font-size: 0.65rem; }
        .soon-msg { text-align: center; padding: 30px 10px; color: #888; font-size: 0.85rem; }

        /* ===== NÚMEROS DE DANO FLUTUANTES (aparecem sobre o herói/monstro a cada golpe) ===== */
        @keyframes float-dmg {
            0% { transform: translate(-50%, 0); opacity: 1; }
            100% { transform: translate(-50%, -30px); opacity: 0; }
        }
        .dmg-popup {
            position: absolute;
            top: 10px; left: 50%;
            transform: translate(-50%, 0);
            font-weight: 800;
            font-size: 0.85rem;
            color: #fff;
            pointer-events: none;
            animation: float-dmg 0.65s ease-out forwards;
            text-shadow: 0 0 4px #000;
            white-space: nowrap;
        }
        .dmg-popup.crit { color: var(--gold); font-size: 1.05rem; } /* dourado = crítico */
        .dmg-popup.hero-dmg { color: #ff6666; } /* vermelho = dano recebido pelo herói */

        /* ===== VISUAL DO ITEM (ícone real + selo de bloqueado + fallback colorido) =====
           Se assets/items/<icone>.png não existir, cai pro quadrado colorido (.item-fallback-box). */
        .inv-lock-badge {
            position: absolute;
            bottom: -4px; left: -4px;
            width: 15px; height: 15px;
            font-size: 9px;
            background: #222;
            border: 1px solid #555;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 4;
            pointer-events: none;
        }
        .item-icon-img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; pointer-events: none; }
        .item-fallback-box { width: 60%; height: 60%; border: 1px solid; border-width: 1px; border-radius: 2px; margin: auto; pointer-events: none; }

        /* -- Modal de detalhe do item (abre ao clicar num item do inventário) --
           Botões no fim: Equip / Sell / Lock / Unlock. */
        .item-detail-name { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
        .item-detail-row { font-size: 0.75rem; color: #bbb; margin-bottom: 4px; }
        .item-locked-tag { font-size: 0.7rem; color: #ffbb33; margin: 8px 0 2px; font-weight: 700; }
        .item-detail-actions { display: flex; gap: 8px; margin-top: 14px; }
        .item-action-btn { flex: 1; border: none; border-radius: 6px; padding: 8px 0; font-weight: 700; font-size: 0.72rem; cursor: pointer; text-transform: uppercase; }
        .item-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .equip-action { background: var(--gold); color: #000; }
        .sell-action { background: #3a3a3a; color: var(--gold); }
        .lock-action { background: #444; color: #fff; }
        .unlock-action { background: #2f6f4f; color: #fff; }

        /* -- Tooltip de hover (mostra só o nome do item ao passar o mouse) -- */
        .item-tooltip {
            position: fixed;
            display: none;
            z-index: 300;
            background: var(--panel);
            border: 1px solid var(--gold);
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 0.7rem;
            max-width: 220px;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }
        .item-tooltip .tt-name { font-weight: 700; font-size: 0.8rem; margin-bottom: 4px; }
        .item-tooltip .tt-row { color: #bbb; margin-bottom: 2px; }
        .item-tooltip .tt-stars { letter-spacing: 1px; }

        /* ============================================================
           NOVOS PAINÉIS DO HUD (redesign baseado no wireframe do usuário)
           ============================================================ */

        /* -- HERO: retrato do personagem (imagem 1:1 pronta pra receber arte) -- */
        .hero-portrait-panel { align-items: center; text-align: center; }
        .panel-title-label { color: var(--gold); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px 0; text-align: center; }
        .portrait-slot { width: 100px; height: 100px; background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .portrait-slot img { width: 100%; height: 100%; object-fit: cover; }
        .portrait-label { font-size: 0.7rem; color: #aaa; text-transform: uppercase; margin-top: 6px; border-top: 1px solid #333; padding-top: 6px; width: 100%; }

        /* -- PETS: 3 slots quadrados 1:1. Vazio = botão de adotar; ocupado = ícone + bônus -- */
        .pets-panel { align-items: center; }
        .pets-row { display: flex; gap: 6px; justify-content: center; }
        .pet-slot { width: 40px; height: 40px; background: var(--slot-bg); border: 1px dashed var(--slot-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; color: #555; position: relative; }
        .pet-slot.filled { border-style: solid; border-color: var(--gold); }
        .pet-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
        .pet-bonus-tag { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 0.5rem; color: #90ee90; white-space: nowrap; }

        /* -- CHARACTER STATUS: mesma lista de sempre, só que em grade 2 colunas -- */
        .status-grid-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

        /* -- Modos de batalha: lista de botões vertical, o ativo fica destacado em dourado -- */
        .battle-modes-panel { gap: 6px; }
        .battle-mode-btn { background: rgba(255,255,255,0.04); border: 1px solid #333; color: #ccc; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 8px 6px; border-radius: 5px; cursor: pointer; text-align: center; }
        .battle-mode-btn:hover { border-color: #777; color: #fff; }
        .battle-mode-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.1); }
        .battle-mode-btn.boss { border-color: #7a2020; color: #ff9090; }
        .battle-mode-btn.boss.active { border-color: var(--gold); color: var(--gold); }

        /* -- Seletor de dificuldade, no canto do mapa -- */
        .difficulty-selector { align-self: flex-start; margin-bottom: 10px; }
        .difficulty-selector select { background: rgba(0,0,0,0.6); border: 1px solid var(--gold); color: var(--gold); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; cursor: pointer; }

        /* -- Mapa de fases: círculos numerados conectados por um traço, um por monstro/fase --
           Cada círculo é 1:1 e pronto pra virar imagem de ícone se quiser (ver progression.js). */
        .stage-path { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; padding: 10px; }
        .stage-node-wrap { display: flex; align-items: center; position: relative; }
        .stage-hero-avatar {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 26px; height: 26px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            object-fit: cover;
            margin-bottom: 4px;
            box-shadow: 0 0 6px rgba(255,215,0,0.6);
        }
        .stage-node {
            width: 36px; height: 36px;
            border-radius: 50%;
            border: 3px solid #666;
            background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 800; color: #ccc;
            flex-shrink: 0;
        }
        .stage-node.done { border-color: #4caf50; color: #4caf50; opacity: 0.7; }
        .stage-node.active { border-color: #ff2a2a; color: #fff; background: rgba(255,42,42,0.25); box-shadow: 0 0 10px rgba(255,42,42,0.7); }
        .stage-connector { width: 20px; height: 3px; background: #665; opacity: 0.5; flex-shrink: 0; }

        /* -- Party Buff: lista simples com os bônus ativos calculados de verdade -- */
        .party-buff-list { font-size: 0.72rem; color: #bbb; display: flex; flex-direction: column; gap: 4px; }
        .party-buff-list .buff-row { display: flex; justify-content: space-between; border-bottom: 1px solid #222; padding-bottom: 3px; }

        /* -- Party Members: até 5 heróis. O 1º é o herói principal (sempre ativo); os
           outros são recrutados escolhendo uma classe, e passam a dar um bônus fixo. */
        .party-members-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
        .party-member-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; }
        .party-member-portrait { width: 52px; height: 52px; background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; }
        .party-member-portrait.main { border-color: var(--human-color); }
        .party-member-portrait.filled { border-color: var(--gold); }
        .party-member-label { font-size: 0.62rem; color: #aaa; text-transform: uppercase; text-align: center; }

        /* -- Equipped Items (coluna direita, agora com Belt/Cloak/Bracelet) -- */
        .equipped-items-panel { align-items: center; }
        .equipped-columns { display: flex; gap: 22px; justify-content: center; margin-top: 6px; }
        .equipped-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
        .equip-row-pair { display: flex; gap: 6px; }
        .equip-divider { width: 90%; border: none; border-top: 1px solid #333; margin: 12px 0; }

        /* ===== NOMES DE ITEM LUMINOSOS (cor + brilho por raridade, estilo AFK Heroes) =====
           Quanto mais rara, mais forte o brilho. Ancestral usa texto em degradê RGB animado
           em vez de cor sólida - por isso NUNCA definir "color" inline junto com essa classe. */
        .glow-common { font-weight: 700; }
        .glow-uncommon { font-weight: 700; text-shadow: 0 0 3px currentColor; }
        .glow-rare { font-weight: 700; text-shadow: 0 0 5px currentColor; }
        .glow-epic { font-weight: 800; text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
        .glow-legendary { font-weight: 800; text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
        .glow-legacy { font-weight: 800; text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
        .glow-shiny { font-weight: 900; text-shadow: 0 0 8px #fff, 0 0 18px #fff, 0 0 28px #fff; }
        .glow-ancestral {
            font-weight: 900;
            background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: ancestral-text-spin 3s linear infinite;
        }
        @keyframes ancestral-text-spin {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        /* ===== PAINEL DE DETALHE DO ITEM (encaixado dentro do próprio inventário) =====
           Cobre exatamente a área da grade de itens (.inventory-wrap), em vez de abrir
           um modal no meio da tela. Some/aparece via a classe .open. */
        .inventory-wrap { position: relative; }
        .item-detail-panel {
            display: none;
            position: absolute;
            inset: 0;
            background: var(--panel);
            border: 1px solid var(--gold);
            border-radius: 8px;
            padding: 12px;
            overflow-y: auto;
            z-index: 10;
            text-align: left;
        }
        .item-detail-panel.open { display: block; }
        .detail-back-btn {
            background: rgba(255,255,255,0.06);
            border: 1px solid #444;
            color: #ccc;
            font-size: 0.68rem;
            font-weight: 700;
            border-radius: 5px;
            padding: 4px 10px;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .detail-back-btn:hover { border-color: var(--gold); color: var(--gold); }