:root {
    --bg-dark: #121212;
    --bg-panel: #1e1e1e;
    --bg-input: #0a0a0a;
    --border-color: #383838;
    --accent-red: #b71c1c;
    --text-main: #e0e0e0;
    --text-muted: #888888;
}

/* ==========================================================================
   BLINDAGEM CONTRA SELEÇÃO DE TEXTO ACIDENTAL (DRAG & DROP)
========================================================================== */
body {
    -webkit-user-select: none;
    /* Chrome, Safari, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Edge, IE */
    user-select: none;
    /* Padrão moderno */
}

/* EXCEÇÕES:
   Permite selecionar texto apenas onde é realmente necessário (Inputs, áreas de texto, chat e editor de missões)
*/
input,
textarea,
select,
[contenteditable="true"],
#chat-box,
.q-conteudo {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ==========================================================================
   CONFIGURAÇÃO BASE (CORRIGIDO PARA TALESPIRE)
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #050505;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    /* O SEGREDO: Permite que a ficha role para baixo livremente! */
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background-color: var(--bg-dark);
    color: var(--text-main);
    margin: 0;
    height: 100vh;
    overflow-x: hidden;
    font-size: 13px;
}

.coluna {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.secao {
    background: var(--bg-panel);
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}

h2,
h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
    width: 100%;
    margin: 0 0 10px 0;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 4px;
    border-bottom: 1px solid #333;
    font-size: 11px;
}

input[type="number"],
input[type="text"],
input[type="password"],
select,
textarea {
    background: var(--bg-input);
    color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px;
    font-size: 12px;
    font-family: inherit;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    text-align: center;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    text-align: left;
}

button {
    padding: 8px 15px;
    cursor: pointer;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    transition: 0.2s;
}

button:hover:not(:disabled) {
    background: #45a049;
}

.btn-pequeno {
    padding: 4px 8px;
    font-size: 10px;
    background: #555;
}

.btn-pequeno.del {
    background: var(--accent-red);
}

.btn-pequeno.del:hover {
    background: #d32f2f;
}

.macro {
    cursor: pointer;
    color: #4caf50;
    font-weight: bold;
    transition: 0.2s;
    user-select: none;
}

.macro:hover {
    color: #81c784;
    text-shadow: 0 0 5px #4caf50;
}

/* ==========================================================================
   TELA DE LOGIN CINEMÁTICA E DASHBOARD
   ========================================================================== */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Acima do audio-gate: o utilizador TEM de ver o login primeiro */
    z-index: 10000000;
    background: #000;
    overflow: hidden;
}

#login-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    filter: blur(6px) brightness(0.8);
    /* O Desfoque Mágico */
    object-fit: cover;
}

.login-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(10, 5, 5, 0.2) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 2;
}

.login-box {
    background: rgba(15, 10, 10, 0.6);
    padding: 40px 30px;
    border-radius: 12px;
    border: 2px solid #5a3c22;
    width: 340px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(255, 202, 40, 0.1);
    z-index: 3;
    backdrop-filter: blur(15px);
    /* O efeito de vidro fosco */
    font-family: 'Georgia', serif;
    transition: all 0.5s ease;
}

.login-box:hover {
    border-color: #ffca28;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(255, 202, 40, 0.2);
}

.login-box h2 {
    color: #ffca28 !important;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    border: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255, 202, 40, 0.6);
}

.login-box input,
.login-box select {
    margin-bottom: 15px;
    padding: 12px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.8);
    border-color: #333;
}

.login-box input:focus,
.login-box select:focus {
    border-color: #ffca28;
    box-shadow: inset 0 0 10px rgba(255, 202, 40, 0.3);
}

.login-box button {
    font-family: 'Georgia', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px;
}

/* ============================================================================
   MENU SUPERIOR ÉPICO (AGORA RETRÁTIL E ANIMADO)
============================================================================ */

#top-nav {
    display: flex;
    flex-direction: column;
    /* Organiza o botão de toggle em cima e os itens embaixo */
    padding: 0;
    background: rgba(10, 5, 5, 0.85);
    /* Fundo de obsidiana translúcida */
    border-bottom: 2px solid #3a0000;
    /* Linha de sangue separando da mesa */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

/* BOTÃO CENTRAL DE EXPANDIR/RECOLHER MENU */
#btn-toggle-menu {
    background: linear-gradient(to bottom, #1a0a0a, #0a0505);
    color: #d4c5b0;
    border: none;
    padding: 8px 20px;
    font-family: 'Georgia', serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    outline: none;
    border-bottom: 1px solid #3a0000;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn-toggle-menu:hover {
    color: #ffca28;
    background: #2b0000;
}

/* Setas animadas baseadas no estado da sanfona */
#top-nav.nav-collapsed #btn-toggle-menu span::before {
    content: '▼ ';
    color: #ffca28;
}

#top-nav.nav-collapsed #btn-toggle-menu span::after {
    content: ' ▼';
    color: #ffca28;
}

#top-nav:not(.nav-collapsed) #btn-toggle-menu span::before {
    content: '▲ ';
    color: #ffca28;
}

#top-nav:not(.nav-collapsed) #btn-toggle-menu span::after {
    content: ' ▲';
    color: #ffca28;
}

/* CONTAINER GERAL DO MENU (A Magia da Animação Sanfona - Engloba Botões e Painéis) */
.nav-content-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 800px;
    /* Altura máxima com margem de segurança para caber os painéis */
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    opacity: 1;
}

/* O estado Oculto (quando a classe nav-collapsed está ativa) */
#top-nav.nav-collapsed .nav-content-wrapper {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Apenas a organização dos botões (a animação agora está no wrapper) */
.nav-items {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* O estado Oculto (quando a classe nav-collapsed está ativa) */
#top-nav.nav-collapsed .nav-items {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

/* 1. O Estado de Repouso (Todos os botões dentro do top-nav) */
#top-nav .nav-items button {
    position: relative;
    background: rgba(25, 15, 15, 0.6);
    /* Vidro escuro */
    color: #d4c5b0;
    /* Cor de pergaminho/osso */
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1;
}

/* 2. A Borda Fina e Moderna (Máscara de Gradiente) */
#top-nav .nav-items button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: all 0.4s ease;
}

/* 3. O Fundo de Sangue (Invisível no repouso, injetado no Hover) */
#top-nav .nav-items button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #2b0000, #800000, #cc0000, #ff1a1a, #800000, #2b0000);
    background-size: 400% 400%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 4. O EFEITO HOVER */
#top-nav .nav-items button:not(:disabled):hover {
    color: #ffffff;
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: glowPulse 1.5s infinite alternate;
}

#top-nav .nav-items button:not(:disabled):hover::after {
    opacity: 1;
    animation: redShift 3s linear infinite;
}

#top-nav .nav-items button:not(:disabled):hover::before {
    background: linear-gradient(135deg, #ff4d4d, #b30000, #3a0000);
}

/* 5. ESTADO ATIVO (A aba que está aberta no momento) */
#top-nav .nav-items button.active {
    color: #ffca28;
    /* Ouro Mágico */
    background: rgba(60, 10, 10, 0.8);
    /* Fundo avermelhado fixo */
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.8), inset 0 0 10px rgba(255, 0, 0, 0.3);
    text-shadow: 0 0 5px rgba(255, 202, 40, 0.5);
    transform: translateY(1px);
    /* Afunda levemente */
}

#top-nav .nav-items button.active::before {
    background: linear-gradient(135deg, #ffca28, #b30000, #ffca28);
    /* Borda dourada pulsante */
    background-size: 200% 200%;
    animation: goldBorder 3s infinite linear;
}

/* 6. ESTADO DESABILITADO */
#top-nav .nav-items button:disabled {
    color: #555;
    background: rgba(10, 10, 10, 0.4);
    cursor: not-allowed;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

#top-nav .nav-items button:disabled::before {
    background: rgba(255, 255, 255, 0.02);
    /* Tira o brilho da borda */
}

/* ============================================================================
   MOTORES DE ANIMAÇÃO DO MENU
============================================================================ */
@keyframes redShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 5px 15px rgba(139, 0, 0, 0.7), 0 0 10px rgba(139, 0, 0, 0.5);
    }

    100% {
        box-shadow: 0 8px 25px rgba(255, 26, 26, 0.9), 0 0 25px rgba(255, 26, 26, 0.7);
    }
}

@keyframes goldBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

#mestre-painel {
    background: #311b92;
    padding: 10px 20px;
    border-radius: 6px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* ==========================================================================
   CHAT ROLL20 - OTIMIZADO E MINIMALISTA (GLASSMORPHISM)
========================================================================== */

#chat-box {
    flex-grow: 1;
    overflow-y: auto;
    background: var(--bg-input);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* A mágica da organização mantida */
}

#chat-box> :first-child {
    margin-top: auto;
}

/* Mensagens de Texto Comum */
.chat-msg {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    /* Fundo translúcido sutil em vez de cinza chapado */
    border-radius: 6px;
    word-break: break-word;
    color: #e5e7eb;
    transition: background 0.2s ease;
}

.chat-msg:hover {
    background: rgba(255, 255, 255, 0.04);
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

/* Mensagens do Sistema (Exaustão/Descanso Invisível) */
.chat-system-ghost {
    background: rgba(103, 58, 183, 0.1);
    /* Roxo muito suave */
    border: 1px dashed rgba(103, 58, 183, 0.4);
    /* Borda orgânica */
    border-radius: 6px;
    padding: 12px;
    position: relative;
    color: #e2d4fd;
    backdrop-filter: blur(4px);
}

.ghost-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    background: rgba(15, 10, 25, 0.9);
    color: #d1c4e9;
    font-size: 9px;
    padding: 2px 8px;
    border: 1px solid rgba(103, 58, 183, 0.5);
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base da Caixa de Dados */
.roll-box {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #4fc3f7;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
}

/* Variações de Borda (Cores) */
.roll-box.crit {
    border-left-color: #4caf50;
}

.roll-box.fail {
    border-left-color: #f44336;
}

.roll-box.gm-roll {
    border-left-color: #ab47bc;
}

/* Roxo mais suave */

/* Variações Secretas */
.roll-box.secret-hidden {
    border-left-color: rgba(255, 255, 255, 0.2);
    opacity: 0.6;
    border-left-style: dashed;
    background: rgba(20, 20, 20, 0.4);
}

.roll-box.secret-visible {
    border-left-style: dashed;
    border-left-color: #ffb74d;
    /* Laranja suave em vez de laranja gritante */
    background: rgba(255, 152, 0, 0.05);
    /* Leve tingimento de fundo */
}

/* Cabeçalho e Badges da Rolagem */
.roll-header {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.roll-header strong {
    color: #f3f4f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.secret-badge {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(255, 152, 0, 0.3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* O Dado em si */
.roll-result-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.roll-result {
    font-size: 26px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 20px;
    border-radius: 6px;
    color: #f9fafb;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: help;
    transition: all 0.25s ease;
    letter-spacing: 1px;
}

.roll-result:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

/* Sucesso e Falha Crítica (Efeito Neon no texto) */
.roll-result.crit {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.05);
    border-color: rgba(76, 175, 80, 0.2);
    text-shadow: 0 0 12px rgba(76, 175, 80, 0.3);
}

.roll-result.fail {
    color: #f44336;
    background: rgba(244, 67, 54, 0.05);
    border-color: rgba(244, 67, 54, 0.2);
    text-shadow: 0 0 12px rgba(244, 67, 54, 0.3);
}

/* Conteúdo customizado que desce do VTT (Botões, etc) */
.roll-custom-content {
    width: 100%;
    margin-top: 8px;
}

/* POP-UP GM REQUEST */
#gm-requests-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 👇 Garante que os avisos saltam à frente da ficha */
    z-index: 99999999 !important;
}

.gm-request-card {
    background: #1e1e1e;
    border: 1px solid #ff9800;
    border-left: 5px solid #ff9800;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    width: 280px;
    animation: slideIn 0.3s;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* ESTRUTURA MODULAR E MOBILE */
.app-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    flex: 1;
    height: 100%;
    min-height: 0;
}

@media (max-width: 1280px) {
    body {
        height: auto;
        overflow-y: auto;
    }
}

/* ==========================================================================
   📱 MODO CELULAR DEFINITIVO E BLINDADO (VTT + TALESPIRE)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. RESET DE BODY (100dvh ignora as barras do Chrome/Safari no celular) */
    html,
    body {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        overflow: hidden !important;
        /* O body NÃO pode rolar em hipótese alguma */
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        /* Remove o flex global que amassava as divs na versão mobile */
    }

    /* 2. CONTAINER PRINCIPAL VIRA O NOVO BODY DA TELA */
    #main-container {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        width: 100vw !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. MENU SUPERIOR TRAVADO */
    #top-nav {
        flex-shrink: 0 !important;
        width: 100% !important;
    }

    /* 4. WORKSPACE: A ÚNICA ÁREA QUE ROLA (Ficha, Loja, Wiki) */
    #workspace {
        flex: 1 1 auto !important;
        /* Pega tudo que sobrou do menu e do chat */
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        /* CRÍTICO: Permite que o workspace encolha sem esticar o site */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 5px !important;
        -webkit-overflow-scrolling: touch !important;
        /* Scroll suave de dedo no iOS */
    }

    /* 5. O CHAT - CONGELADO E INAMOVÍVEL NO RODAPÉ */
    #global-chat {
        flex: 0 0 250px !important;
        /* Aumentado para exibir rolamentos com folga */
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        border-top: 2px solid #4a148c !important;
        background: #0a0a0a !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1000 !important;
        /* Fica acima de tudo, nada cobre o chat */
    }

    /* Permite ler as mensagens do chat sem arrastar a tela do celular */
    #chat-box {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        margin-bottom: 5px !important;
    }

    /* 6. CORREÇÃO DA FICHA FLUTUANTE NO CELULAR */
    .ficha-is-floating {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        /* A ficha flutuante engole a tela toda, mas PAUSA antes de invadir o chat (250px) */
        height: calc(100dvh - 250px) !important;
        min-height: calc(100dvh - 250px) !important;
        max-height: calc(100dvh - 250px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
        z-index: 999 !important;
        /* Por baixo do chat */
    }
}

/* ==========================================================================
   CUSTOMIZAÇÃO DA BARRA DE ROLAGEM GLOBAL (SCROLLBAR)
   ========================================================================== */

/* Largura da barra vertical e altura da horizontal */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* O fundo (trilho) da barra - Preto profundo */
::-webkit-scrollbar-track {
    background: #000000;
    border-left: 1px solid #1a1a1a;
    /* Linha sutil para separar do conteúdo */
}

/* O bloco de rolagem (thumb) - Vermelho agressivo */
::-webkit-scrollbar-thumb {
    background: #d32f2f;
    border-radius: 4px;
}

/* O bloco de rolagem quando o mouse passa por cima - Vermelho mais escuro */
::-webkit-scrollbar-thumb:hover {
    background: #b71c1c;
}

/* GARANTE QUE O CHAT NÃO SEJA BLOQUEADO */
.input-group,
#global-chat,
#mensagem {
    pointer-events: auto !important;
}

#custom-modal-overlay {
    pointer-events: auto !important;
    /* Modais DEVEM capturar cliques */
}

#custom-modal-overlay[style*="display: none"] {
    pointer-events: none !important;
}

/* Estilo do Sussurro no Chat */
.chat-whisper {
    background: #311b92;
    border-left: 4px solid #b39ddb;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0 4px 4px 0;
    color: #e1bee7;
}

/* Alteração Visual quando a Rolagem for secreta */
.roll-box.secret {
    border-color: #9c27b0;
    background: #22143a;
    box-shadow: inset 0 0 15px rgba(156, 39, 176, 0.3);
}

.roll-box.secret .roll-header {
    background: #311b92;
    color: #e1bee7;
}

/* ==========================================================================
   VISUAL DO MESTRE (DASHBOARD FLUTUANTE, DADOS E STATUS)
   ========================================================================== */

/* Caixa de Dados Dourada Exclusiva do Mestre */
.roll-box.gm-roll {
    border-color: #ffd700;
    background: #1a1500;
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.1);
}

.roll-box.gm-roll .roll-header {
    background: #332b00;
    color: #ffd700;
    border-bottom: 1px solid #ffd700;
}

.roll-box.gm-roll .roll-result {
    background: #2a2400;
    color: #fff;
    border-color: #ffd700;
}

/* Dashboard Flutuante */
#gm-dashboard {
    position: fixed;
    right: 20px;
    top: 60px;
    width: 300px;
    background: #111;
    border: 2px solid #5e35b1;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    z-index: 9999;
    font-family: sans-serif;
    overflow: hidden;
}

#gm-dashboard.minimized .gm-dash-body {
    display: none;
}

.gm-dash-header {
    background: #4a148c;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #7b1fa2;
    user-select: none;
    cursor: grab;
    /* Indica que pode ser arrastado */
}

.gm-dash-header:active {
    cursor: grabbing;
}

/* Animação ao segurar o rato */
.gm-dash-body {
    padding: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.gm-section {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.gm-section h4 {
    margin: 0 0 8px 0;
    color: #b39ddb;
    font-size: 13px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

.gm-input {
    width: 100%;
    background: #000;
    color: #fff;
    border: 1px solid #444;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.gm-btn {
    background: #4caf50;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    font-size: 12px;
}

.gm-btn:hover {
    filter: brightness(1.2);
}

.gm-btn-gold {
    background: #ffb300;
    color: #000;
}

.gm-btn-red {
    background: #d32f2f;
}

.gm-btn-purple {
    background: #7b1fa2;
}

.gm-btn-blue {
    background: #1976d2;
}

/* Caixa do Pedido de Teste no Chat */
.gm-request-box {
    background: #0d1b2a;
    border-left: 4px solid #00b0ff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 0 6px 6px 0;
    color: #e0f7fa;
    font-size: 13px;
}

/* Plaquinhas de Status na Ficha */
.badge-status {
    display: inline-block;
    background: #b71c1c;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #ff5252;
    margin-right: 5px;
    margin-top: 5px;
}

/* ==========================================================================
   EXPANSÃO DINÂMICA DOS INPUTS DO MESTRE (EFEITO SANFONA CORRIGIDO)
   ========================================================================== */

/* Suavidade na animação de todos os inputs */
.gm-input {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Força os inputs a crescerem absurdamente quando clicados (Focados) */
#gm-item:focus,
#gm-xp:focus,
#gm-status-turns:focus,
#gm-status-dmg:focus,
#gm-test-skill:focus,
#gm-test-dc:focus {
    flex: 10 !important;
    /* Fica 10 vezes maior que os vizinhos */
    min-width: 65% !important;
    /* Garante que ocupe a maior parte da tela */
    border-color: #00e5ff !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
    outline: none !important;
}

/* Protege os botões para não serem esmagados e permite que o input os empurre */
.gm-dash-body div[style*="flex"]>.gm-btn,
.gm-dash-body div>.gm-btn {
    flex-shrink: 0 !important;
    /* Proíbe o botão de encolher */
    width: auto !important;
    /* Cancela o 100% de largura antigo */
    white-space: nowrap !important;
    /* Proíbe o texto de quebrar linha */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ==========================================================================
   TALESPIRE SYMBIOTE UI V8 - SINCRONIA TOTAL (FICHA vs LOJA)
   ========================================================================== */
@media (max-width: 900px) {

    * {
        box-sizing: border-box !important;
    }

    #main-container {
        flex-direction: column !important;
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden !important;
    }

    #workspace {
        flex: 1 !important;
        width: 100% !important;
        padding: 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #global-chat {
        flex: 0 0 130px !important;
        width: 100% !important;
        border-top: 2px solid #4a148c !important;
        overflow-x: hidden !important;
    }

    /* 1. CORREÇÃO DE VISIBILIDADE DOS MÓDULOS (Ficha e Loja) */
    /* Só aplicamos o layout se o sistema NÃO tiver escondido o elemento */
    #app-ficha:not([style*="display: none"]),
    #app-loja:not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 2. CORREÇÃO DE ABAS INTERNAS */
    .tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .tab-content:not(.active) {
        display: none !important;
    }

    /* 3. LAYOUT TÁTICO MOBILE */
    .coluna {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .coluna:nth-child(2) {
        order: -1 !important;
    }

    /* Sobe o combate */

    #container-atributos {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    #container-pericias,
    #container-resistencias {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .pericia-item,
    .resistencia-item {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 6px !important;
    }

    .inventario-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    #char-nome {
        width: 100% !important;
        text-align: center !important;
    }

    .portrait-container {
        display: none !important;
    }

    /* Ajuste específico para a Loja no TaleSpire */
    .loja-container {
        flex-direction: column !important;
        width: 100% !important;
    }

    .loja-itens {
        grid-template-columns: 1fr !important;
        /* Itens da loja em lista única */
    }
}

/* ==========================================================================
   SISTEMA DE MODAIS CUSTOMIZADOS (SUBSTITUTO PARA ALERT/PROMPT)
   ========================================================================== */
#custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    /* 👇 A MÁGICA: Oito noves e !important para furar a ficha flutuante */
    z-index: 99999999 !important;
}

.custom-modal {
    background: #111;
    border: 2px solid #4a148c;
    border-radius: 8px;
    width: 90%;
    max-width: 350px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(74, 20, 140, 0.5);
    animation: modalSpawn 0.2s ease-out;
}

@keyframes modalSpawn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.custom-modal h2 {
    color: #e1bee7;
    font-size: 16px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.custom-modal p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.custom-modal input {
    width: 100%;
    background: #000;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.modal-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

.btn-confirm {
    background: #4a148c;
    color: #fff;
}

.btn-cancel {
    background: #333;
    color: #bbb;
}

/* ==========================================================================
   CORREÇÃO DE LEITURA: MISSÕES, BIBLIOTECA E TEXTOS LONGOS
   ========================================================================== */

/* 1. Força a letra branca em TODOS os campos onde o jogador/mestre digita */
textarea,
input[type="text"] {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* 2. Força a cor branca/cinza claro quando o texto já está salvo e sendo exibido */
.missao-desc,
.missao-descricao,
.wiki-desc,
.wiki-conteudo,
.conteudo-wiki,
.texto-leitura {
    color: #e0e0e0 !important;
    /* Cinza bem claro, não cansa a vista */
    line-height: 1.6 !important;
    /* Melhora o espaçamento entre as linhas */
}

/* ==========================================================================
   LUPA EXPANSIVA DO CHAT (MESA) - VERSÃO BLINDADA CONTRA CONFLITOS
   ========================================================================== */
.chat-search-lupa {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    /* Força sumir o fundo do input nativo */

    /* Ícone de Lupa Dourado */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffca28'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;

    color: transparent !important;
    /* Esconde o texto/cursor */
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Esconde o placeholder enquanto é bolinha */
.chat-search-lupa::placeholder {
    color: transparent !important;
}

/* A MÁGICA DE EXPANDIR (Quando clica ou quando tem texto) */
.chat-search-lupa:focus,
.chat-search-lupa:not(:placeholder-shown) {
    width: 170px !important;
    border-radius: 6px !important;
    border: 1px solid #ffca28 !important;
    background-color: rgba(10, 5, 5, 0.9) !important;
    /* Fundo escuro ao expandir */
    background-position: 8px center !important;
    color: #fff !important;
    /* Revela o texto digitado */
    padding: 4px 10px 4px 34px !important;
    cursor: text !important;
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.2) !important;
}

/* Revela o placeholder "Buscar..." ao abrir */
.chat-search-lupa:focus::placeholder {
    color: #888 !important;
    font-style: italic !important;
}

/* ==========================================================================
   📱 TRAVA DEFINITIVA DO CHAT E TELA NO MOBILE
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Trava o fundo da página para não rolar de jeito nenhum */
    html,
    body {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #main-container {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden !important;
    }

    /* 2. Área da Ficha/Loja ganha barra de rolagem própria */
    #workspace {
        flex: 1 !important;
        /* Preenche todo o espaço que sobrar */
        overflow-y: auto !important;
        /* Só a ficha rola */
        padding-bottom: 10px !important;
    }

    /* 3. O CHAT É ESMAGADO E TRAVADO (Mata o min-height: 400px antigo) */
    #global-chat {
        flex: 0 0 250px !important;
        /* Trava exatamente em 250 pixels */
        height: 250px !important;
        min-height: 250px !important;
        /* <-- Isso anula a regra que estava quebrando seu site */
        max-height: 250px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        border-top: 2px solid #4a148c !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0a0a0a !important;
        /* Garante fundo sólido */
        z-index: 100 !important;
    }

    /* 4. Apenas o espaço interno das mensagens rola */
    #chat-box {
        flex: 1 !important;
        overflow-y: auto !important;
        margin-bottom: 5px !important;
    }
}


/* ========================================================================== */
/* ESTILOS DO PAINEL DO MESTRE (SUPORTE AO DROPDOWN SOFISTICADO DE PASTAS)    */
/* ========================================================================== */

.mestre-painel-container {
    background: linear-gradient(135deg, #1e0b3b 0%, #120524 100%);
    border: 1px solid #4527a0;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 0 20px 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: inset 0 0 20px rgba(49, 27, 146, 0.5), 0 5px 15px rgba(0, 0, 0, 0.6);
}

.mestre-painel-header {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 320px;
}

.mestre-label {
    color: #b39ddb;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(179, 157, 219, 0.6);
    white-space: nowrap;
}

/* Ocultador de segurança do elemento nativo (O JS constrói a UI real) */
.mestre-select-hidden {
    display: none !important;
}

.mestre-painel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Botões do Mestre */
.mestre-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mestre-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    filter: brightness(1.2);
}

.mestre-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Cores Específicas dos Botões */
.mestre-btn.btn-nova {
    background: linear-gradient(to bottom, #4caf50, #1b5e20);
    border: 1px solid #81c784;
}

.mestre-btn.btn-monstro {
    background: linear-gradient(to bottom, #f44336, #8b0000);
    border: 1px solid #ef5350;
}

.mestre-btn.btn-deletar {
    background: linear-gradient(to bottom, #d32f2f, #b71c1c);
    border: 1px solid #e57373;
}

/* ========================================================================== */
/* RESPONSIVIDADE (Telas menores e Celulares)                                 */
/* ========================================================================== */
@media (max-width: 768px) {
    .mestre-painel-container {
        flex-direction: column;
        align-items: stretch;
    }

    .mestre-painel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mestre-label {
        text-align: center;
    }

    .mestre-painel-actions {
        justify-content: center;
    }

    /* Faz o Dropdown Injetado pelo JS ocupar 100% da largura na tela do celular */
    .custom-ficha-ui {
        width: 100% !important;
    }
}

/* ==========================================================================
   MARCADOR DE VERSÃO (BUILD TAG)
   ========================================================================== */
.vtt-version-display {
    position: absolute;
    top: 6px;
    left: 15px;
    /* Lado esquerdo */
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: rgba(255, 202, 40, 0.4);
    /* Amarelo ouro bem discreto */
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    /* Não atrapalha cliques nos botões */
    z-index: 9999;
}

/* Brilho ao passar o rato (opcional, para dar um charme) */
#top-nav:hover .vtt-version-display {
    color: rgba(255, 202, 40, 0.9);
    text-shadow: 0 0 5px rgba(255, 202, 40, 0.4);
}

/* ==========================================================================
   VISUAL EXCLUSIVO DO MESTRE (ÁREA DE ESCRITA DO CHAT)
   ========================================================================== */

/* Pinta o fundo da área do input (se houver um container em volta) */
body.is-mestre .chat-input-area,
body.is-mestre #chat-input-container {
    background: linear-gradient(to right, #050505 60%, #151000 100%) !important;
    border-top: 1px solid #4a3c15 !important;
}

/* O estilo requintado da barra de digitação */
body.is-mestre #mensagem {
    background: linear-gradient(135deg, #0a0a0a 75%, #2a200a 100%) !important;
    border: 1px solid #6b531a !important;
    color: #ffca28 !important;
    /* O texto que o mestre digita fica levemente dourado */
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.05) !important;
    transition: all 0.3s ease;
}

/* O brilho majestoso ao clicar para escrever */
body.is-mestre #mensagem:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.1) !important;
    outline: none;
}

/* A cor do texto de "Digite uma mensagem..." */
body.is-mestre #mensagem::placeholder {
    color: #8a7a4a !important;
    font-style: italic;
}

/* ==========================================================================
   BALÃO DE MENSAGEM EXCLUSIVO DO MESTRE NO CHAT
   ========================================================================== */
.chat-msg-mestre {
    background: linear-gradient(135deg, #0a0a0a 60%, #1f1805 100%) !important;
    border: 1px solid #5a4411 !important;
    border-left: 4px solid #d4af37 !important;
    /* Destaque lateral elegante */
    color: #e0e0e0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
    font-family: 'Georgia', serif;
    /* Dá um leve toque de livro de RPG */
}

/* Opcional: Faz com que palavras em negrito nas mensagens do mestre brilhem em ouro */
.chat-msg-mestre b {
    color: #ffca28 !important;
    text-shadow: 0 0 5px rgba(255, 202, 40, 0.3);
}

/* ==========================================================================
   MENU DE CONTEXTO DO CHAT E MENSAGEM FIXADA
   ========================================================================== */
#chat-context-menu {
    position: fixed;
    background: rgba(15, 10, 20, 0.95);
    border: 1px solid #673ab7;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.9);
    z-index: 1000000;
    display: none;
    flex-direction: column;
    min-width: 160px;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.chat-ctx-btn {
    background: transparent;
    color: #e0e0e0;
    border: none;
    padding: 12px 15px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-ctx-btn:hover {
    background: rgba(103, 58, 183, 0.4);
    color: #ffca28;
}

.chat-ctx-btn.delete:hover {
    background: rgba(244, 67, 54, 0.3);
    color: #ff5252;
}

#pinned-messages-container {
    width: 100%;
    z-index: 100;
}

.pinned-msg {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border-bottom: 2px solid #ffca28;
    padding: 10px 15px;
    font-size: 11px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.pinned-msg-close {
    cursor: pointer;
    color: #f44336;
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px;
    transition: 0.2s;
}

.pinned-msg-close:hover {
    color: #ff8a80;
    transform: scale(1.2);
}

#btn-enter-lobby:hover {
    background: #d4af37;
    color: #000;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}