/* ==========================================================================
   TEMA GLOBAL E VARIÁVEIS (Importado do dashboard.css para consistência)
   ========================================================================== */
:root {
  /* Se você usar um pré-processador, importaria as variáveis aqui.
     Como estamos usando CSS puro, estamos RE-DEFININDO as variáveis
     para que este arquivo funcione de forma autônoma na página do jogo. */
  --primary: #0000FF; /* Azul Vivo Original */
  --neon-bright: #3333FF; /* Azul Neon Brilho Intenso */
  --dark-bg: rgba(2, 2, 10, 0.98);
  --light-text: #ffffff;
  --card-bg: rgba(5, 5, 20, 0.9); 
  --success-color: #28a745;
  --danger-color: #ff2222;

  --box-neon-glow: 0 0 10px var(--primary), inset 0 0 10px rgba(51, 51, 255, 0.3);
  --text-neon-glow: 0 0 10px var(--primary);
}

/* === BASE E FUNDO === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #02020a;
    color: var(--light-text);
    min-height: 100vh;
    overflow-x: hidden;
    /* Fundo do login com filtro */
    background: linear-gradient(rgba(2, 2, 10, 0.9), rgba(2, 2, 10, 0.9)), url('../rpg-login-background.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.light-rays {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle at 30% 30%, rgba(0, 0, 255, 0.1), transparent 40%),
                radial-gradient(circle at 70% 70%, rgba(0, 0, 255, 0.1), transparent 40%);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* === HEADER E NAVEGAÇÃO SUPERIOR === */
.header-game {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
}
.header-game h1 {
    color: var(--primary);
    font-family: 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: var(--text-neon-glow);
    font-size: 2rem;
    margin-bottom: 10px;
}
/* Estilo dos botões de navegação - Reaproveitando o padrão Neon */
.navigation button {
    background-color: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}
.navigation button:hover {
    background-color: #000;
    box-shadow: 0 0 15px var(--neon-bright);
    color: var(--primary);
}
.notification-badge {
    position: absolute; top: -8px; right: -8px; background: var(--danger-color); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold;
}
.navigation {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}

/* === CONTEÚDO PRINCIPAL (GRID DO JOGO) === */
.game-grid {
    display: grid;
    /* Ajuste para telas grandes: Personagem (280px) | MAPA (Fluido) | Ações (300px) */
    grid-template-columns: 280px 1fr 300px; 
    gap: 20px;
    min-height: 80vh;
}

/* --- ESTILO GERAL DOS PAINÉIS (VIDRO NEON) --- */
.game-panel, .map-panel, .actions-panel, .action-section {
    background: var(--card-bg);
    border: 2px solid var(--primary);
    box-shadow: var(--box-neon-glow);
    border-radius: 15px;
    padding: 15px;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
}
.actions-panel { gap: 15px; } /* Adiciona espaçamento vertical entre as seções de ação */

.panel-title {
    color: white;
    text-shadow: var(--text-neon-glow);
    font-size: 1.4rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--primary);
    text-align: center;
}

/* --- PAINEL DE PERSONAGEM (COLUNA 1) --- */
.character-info { gap: 12px; }

/* Estilo do Card de Info */
.info-card {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}
.info-card h3 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.resource-list { list-style: none; padding: 0; margin: 5px 0; }
.resource-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.resource-value { color: var(--neon-bright); font-weight: bold; }
.status-free { color: var(--success-color); }
.status-busy { color: var(--danger-color); }

/* BARRA DE VIDA (HP) */
.health-bar-container {
    width: 100%; height: 20px; background: rgba(0, 0, 0, 0.5); border-radius: 10px; overflow: hidden;
    border: 1px solid var(--danger-color); margin-bottom: 15px; position: relative;
}
.health-bar-fill {
    height: 100%; background: linear-gradient(to right, var(--success-color), #00ff44); transition: width 0.5s; position: relative;
}
.health-bar-text {
    position: absolute; width: 100%; text-align: center; top: 0; color: white; font-size: 0.9rem; line-height: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000;
}
.actions-list {
    max-height: 200px; overflow-y: auto;
}
.action-item {
    padding: 8px; margin-bottom: 5px; background: rgba(0, 0, 0, 0.2); border-radius: 4px;
    border-left: 3px solid rgba(255,255,255,0.1); /* Padrão lido/antigo */
}
/* Mensagem Não Visualizada (vz=0) */
.action-item[style*="border-left: 3px solid var(--azul-vivo)"] {
    border-left-color: var(--neon-bright) !important; /* Destaque para não lida */
    background: rgba(0, 0, 255, 0.1);
}
.action-time { font-size: 0.75rem; color: #aaa; text-align: right; }


/* --- MAPA (COLUNA 2) --- */
/* === CORREÇÃO DO MAPA (IMAGENS E GRID 6x6) === */
/* === CORREÇÃO DO MAPA (IMAGENS E GRID 6x6) === */

.map-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Força 6 colunas sempre */
    grid-template-rows: repeat(6, 1fr);
    gap: 0; /* Remove espaço entre quadrados para mapa contínuo */
    background: #000;
    padding: 2px; /* Borda fina externa apenas */
    border: 2px solid var(--primary);
    width: 100%;
    aspect-ratio: 1 / 1; /* Mantém o mapa quadrado */
}

.map-square {
    position: relative;
    width: 100%;
    height: 100%;
    border: none; /* Remove borda interna para continuidade */
    cursor: pointer;
    overflow: hidden;
}

/* Imagem do Terreno */
.map-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre todo o quadrado sem distorcer */
    display: block;
    transition: filter 0.2s;
}

/* Efeito Hover (Ilumina o quadrado) */
.map-square:hover .map-bg-img {
    filter: brightness(1.3);
}

/* Nome do Local (Pequeno e Transparente) */
.map-name {
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.6);
    color: white; 
    font-size: 0.6rem; /* Fonte bem pequena */
    text-align: center; 
    padding: 1px 0;
    pointer-events: none; /* Clique passa direto para o quadrado */
}

/* Marcador do Personagem (Círculo Vermelho ou Azul) */
/* === PERSONAGEM NO MAPA (IMAGEM COM EFEITO) === */

.map-personagem-marker {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    /* Centraliza perfeitamente */
    transform: translate(-50%, -50%);
    
    /* Tamanho: Ocupa 80% do quadrado (ajuste se quiser maior/menor) */
   width: auto; 
    height: auto;
    max-width: 100%; /* Ocupa no máximo metade da largura do quadrado */
    max-height: 100%; /* Ocupa no máximo metade da altura do quadrado *//* Mantém a proporção da imagem */
    
    z-index: 20; /* Garante que fique acima do terreno */
    
    /* Sombra Neon (Drop-shadow segue o contorno do desenho, não faz um quadrado em volta) */
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px var(--primary));
    
    /* Animação de Flutuar */
    animation: heroFloat 2s infinite ease-in-out;
    pointer-events: none; /* Permite clicar no quadrado embaixo dele */
}

/* Animação de "Respiração/Flutuação" */
@keyframes heroFloat {
    0% { 
        /* Posição normal */
        transform: translate(-50%, -50%) scale(1); 
        filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px var(--primary));
    }
    50% { 
        /* Sobe um pouquinho e aumenta o brilho (Efeito de poder) */
        transform: translate(-50%, -58%) scale(1.1); 
        filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 15px var(--neon-bright));
    }
    100% { 
        /* Volta ao normal */
        transform: translate(-50%, -50%) scale(1); 
        filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px var(--primary));
    }
}

@keyframes markerPulse {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 5px var(--danger-color); }
    50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 15px var(--danger-color); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 5px var(--danger-color); }
}

/* RESPONSIVIDADE FORÇADA (Celular) */
@media (max-width: 768px) {
    /* Sobrescreve regra anterior que mudava para 4 colunas */
    .map-container {
        grid-template-columns: repeat(6, 1fr) !important; 
    }
    .map-name {
        font-size: 0.5rem; /* Nome menor ainda no celular */
        opacity: 0.8; /* Meio transparente para ver o mapa */
    }
}
/* --- PAINEL DE AÇÕES E CHAT (COLUNA 3) --- */
.actions-panel {
    overflow-y: auto;
}
.action-section h3 {
    color: var(--primary); /* Títulos das seções de ação */
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.action-form { gap: 8px; }
.action-form button {
    width: 100%;
    margin-top: 5px;
    /* Usa o estilo de botão neon padrão (do dashboard.css) */
}
.action-section h4 {
    color: #ccc;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Iframe (Chat) */
.combat-iframe {
    background: #000;
    border: 2px solid var(--primary);
    border-radius: 8px;
    flex-grow: 1; /* Permite que o chat preencha o espaço */
    min-height: 200px;
}
.combat-iframe iframe {
    /* Estilo do conteúdo do iframe, se puder ser estilizado */
    scrollbar-color: var(--primary) var(--card-bg);
}


/* --- MODAIS (APLICAÇÃO DO TEMA NEON) --- */
.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px);
}
.modal-content {
    background: var(--card-bg); margin: 5% auto; padding: 30px;
    border: 2px solid var(--primary); border-radius: 15px; width: 90%; max-width: 600px;
    color: var(--light-text); position: relative; box-shadow: var(--box-neon-glow);
}
.close-modal { color: var(--neon-bright); float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s; }
.close-modal:hover { color: #fff; }
#modalLocationName { color: var(--neon-bright); text-shadow: var(--text-neon-glow); }


/* === RESPONSIVIDADE DO JOGO === */
@media (max-width: 1100px) {
    .game-grid {
        /* Transforma em duas colunas: Personagem/Ações | Mapa */
        grid-template-columns: 1fr 1fr;
        height: auto;
        min-height: auto;
    }
    .actions-panel {
        /* Coluna de ações se move para baixo */
        grid-column: span 2; 
        order: 3;
    }
    .map-panel {
        order: 2; /* Mapa se torna a coluna da direita no topo */
        min-height: 400px;
    }
    .game-panel {
        order: 1; /* Personagem se torna a coluna da esquerda no topo */
    }
}
@media (max-width: 768px) {
    .container { padding: 5px; }
    .game-grid {
        grid-template-columns: 1fr; /* Stacked columns */
    }
    .actions-panel, .map-panel, .game-panel {
        grid-column: 1;
        min-height: auto;
    }
    .map-container {
        grid-template-columns: repeat(4, 1fr); /* Mapa 4x9 ou similar */
    }
    .navigation { flex-direction: column; gap: 10px; }
    .navigation button { width: 100%; }
}


/* === CORREÇÃO: HISTÓRICO DE AÇÕES === */
.actions-list {
    max-height: 200px;
    overflow-y: auto;
    /* Garante fundo semitransparente para ler o texto */
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #333;
}

.action-item {
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05); /* Fundo leve para cada item */
    border-radius: 4px;
    border-left: 3px solid rgba(255,255,255,0.1);
}

.action-description {
    /* CORREÇÃO CRÍTICA: Força a cor branca e tamanho legível */
    color: #ffffff !important; 
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 5px;
    display: block; /* Garante que ocupe espaço */
}

.action-time {
    font-size: 0.75rem;
    color: var(--neon-bright); /* Azul neon para a hora */
    text-align: right;
    font-style: italic;
}

/* Ajuste para o Iframe do Chat não ficar com scroll duplo se possível */
.combat-iframe {
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: 8px;
    flex-grow: 1;
    min-height: 200px;
}



/* === CAIXA DE MENSAGEM DESTAQUE (SESSÃO) === */
.game-msg-box {
    background-color: rgba(0, 0, 20, 0.9); /* Fundo bem escuro */
    border: 2px solid var(--primary); /* Borda Azul Neon Padrão */
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px; /* Espaço antes do mapa */
    text-align: center;
    
    /* Texto Amarelo Ouro Brilhante */
    color: #ffd700; 
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 0 8px #ffd700; 
    
    /* Efeito de Pulsação na Borda */
    box-shadow: 0 0 15px var(--primary);
    animation: msgPulse 2s infinite;
}

@keyframes msgPulse {
    0% { box-shadow: 0 0 10px var(--primary); border-color: var(--primary); }
    50% { box-shadow: 0 0 25px var(--neon-bright); border-color: var(--neon-bright); }
    100% { box-shadow: 0 0 10px var(--primary); border-color: var(--primary); }
}


/* === BOTÕES DE NAVEGAÇÃO (SETAS NEON) === */

/* Estilização específica para os botões dentro do grid de movimentação */
/* Container que alinha os botões lado a lado e centraliza */
.movimentacao-form-grid {
    display: flex;
    justify-content: center; /* Centraliza no meio da tela */
    align-items: center;
    gap: 10px; /* Espaço entre os botões */
    margin-bottom: 15px;
    flex-wrap: wrap; /* Garante que não quebre se a tela for muito pequena */
}

/* Estilo dos botões de movimentação (Quadrados e menores) */
.movimentacao-form-grid button {
    background-color: #000000;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    
    /* Tamanho fixo para ficarem quadrados */
    width: 50px;
    height: 50px;
    
    /* Tamanho da seta */
    font-size: 1.2rem; 
    
    padding: 0; /* Remove padding interno */
    margin: 0;
    
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
    
    /* Centraliza a seta dentro do quadrado */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* EFEITO HOVER */
.movimentacao-form-grid button:hover {
    background-color: rgba(0, 0, 255, 0.1);
    color: #fff;
    border-color: var(--neon-bright);
    box-shadow: 0 0 15px var(--primary);
    transform: scale(1.1); /* Aumenta um pouquinho */
}

/* EFEITO ACTIVE (Clique) */
.movimentacao-form-grid button:active {
    background-color: var(--primary);
    color: #000;
    box-shadow: 0 0 20px var(--neon-bright);
    transform: scale(0.95);
}






/* === NOVOS ESTILOS PARA BOTÕES E INPUTS DE AÇÃO === */

/* Estilo do Formulário em Linha (Input ao lado do Botão) */
.action-form {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    align-items: stretch; /* Mesma altura para ambos */
}

/* Inputs (Caixas de Quantidade) */
.action-input-neon {
    background-color: #000 !important;
    border: 2px solid var(--primary) !important;
    color: #fff !important;
    border-radius: 6px;
    width: 70px; /* Tamanho fixo proporcional */
    text-align: center;
    font-weight: bold;
    outline: none;
    padding: 0 5px;
}
.action-input-neon:focus {
    box-shadow: 0 0 10px var(--primary);
}

/* Botão Padrão de Ação (Azul) */
.action-btn-neon {
    background-color: #000 !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    flex-grow: 1; /* Ocupa o resto do espaço */
    padding: 10px;
    transition: all 0.2s;
}
.action-btn-neon:hover {
    background-color: var(--primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--neon-bright);
    border-color: #fff !important;
}

/* Botão Largo (Quem está no local) */
.btn-full-width-neon {
    width: 100%;
    background-color: #000;
    color: #fff;
    border: 1px solid var(--primary);
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
}
.btn-full-width-neon:hover {
    background-color: var(--primary);
    color: #000;
    box-shadow: 0 0 15px var(--neon-bright);
}

/* Variações de Cor (Amarelo/Vermelho) mantendo fundo preto */
.btn-warning-neon { border-color: #ffd700 !important; color: #ffd700 !important; }
.btn-warning-neon:hover { background-color: #ffd700 !important; color: #000 !important; }

.btn-danger-neon { border-color: #ff2222 !important; color: #ff2222 !important; }
.btn-danger-neon:hover { background-color: #ff2222 !important; color: #fff !important; }



/* --- RELÓGIO NEON --- */
.timer-neon-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 255, 0.2);
}

.timer-digits {
    font-family: 'Courier New', monospace; /* Fonte digital */
    font-size: 2.2rem;
    font-weight: bold;
    color: #00f3ff; /* Azul Ciano Neon */
    text-shadow: 0 0 10px #00f3ff, 0 0 20px var(--primary);
    letter-spacing: 2px;
}

/* --- BOTÃO DE FINALIZAR (SUCESSO NEON) --- */
.btn-finish-neon {
    background-color: #000 !important; /* Fundo Preto */
    color: #00ff44 !important; /* Verde Neon Texto */
    border: 2px solid #00ff44 !important; /* Borda Verde Neon */
    border-radius: 8px; /* Arredondado igual aos outros */
    
    width: 100%;
    padding: 15px;
    
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    
    /* Brilho inicial suave */
    box-shadow: 0 0 5px rgba(0, 255, 68, 0.3);
    
    /* Animação para chamar atenção */
    animation: pulseSuccess 2s infinite;
}

.btn-finish-neon:hover {
    background-color: #00ff44 !important; /* Fundo fica Verde */
    color: #000 !important; /* Texto fica Preto */
    box-shadow: 0 0 20px #00ff44; /* Brilho intenso */
    transform: scale(1.02);
}

@keyframes pulseSuccess {
    0% { box-shadow: 0 0 5px #00ff44; }
    50% { box-shadow: 0 0 15px #00ff44; }
    100% { box-shadow: 0 0 5px #00ff44; }
}


/* ==========================================================================
   SISTEMA DE CLÃS (NEON MILITAR)
   ========================================================================== */

.cla-info-box {
    padding: 10px;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.cla-info-box p {
    margin-bottom: 3px;
}

.cla-info-box strong {
    color: var(--light-text);
    font-weight: 600;
}

/* Estilo para as Ordens/Avisos */
.cla-order-box {
    background: rgba(0, 0, 255, 0.1); /* Fundo sutilmente azul */
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 0 5px rgba(51, 51, 255, 0.3);
}

.order-type-title {
    font-size: 0.8rem;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
    text-shadow: 0 0 5px var(--primary);
}

.order-content {
    border-left: 3px solid #ccc;
    padding-left: 8px;
}

.order-text {
    font-style: italic;
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.order-date {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #888;
}

/* Botões de Comando (para que fiquem menores e lado a lado) */
.cla-commands {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    gap: 8px;
}

.cla-commands .btn-command {
    /* Ajusta para caberem em duas colunas */
    flex: 1 1 calc(50% - 4px); 
    padding: 8px 10px;
    font-size: 0.8rem;
    text-align: center;
}