:root {
    /* Paleta Dark Fantasy */
    --bg-color: #0b0c10;         /* Preto profundo quase azulado */
    --panel-bg: #1f1f23;         /* Pedra escura */
    --panel-border: #5d4037;     /* Marrom madeira/ferrugem */
    
    --text-primary: #c5c6c7;     /* Prata envelhecido */
    --text-highlight: #ffd700;   /* Ouro */
    
    --accent-color: #8b0000;     /* Vermelho Sangue (Diablo style) */
    --accent-hover: #b71c1c;
    
    --success: #388e3c;          /* Verde Floresta */
    --gold-coin: #ffecb3;
    
    /* Fontes */
    --font-header: 'Cinzel', serif;
    --font-body: 'MedievalSharp', cursive;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at center, #1a1a20 0%, #000000 100%);
    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.game-container {
    width: 100%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

/* --- Estilo dos Painéis (Pedra/Metal) --- */
.panel {
    background-color: var(--panel-bg);
    padding: 20px;
    border: 2px solid #3e2723;
    border-radius: 4px;
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.5),
        0 0 0 4px #1a1a1a; /* Borda dupla */
    position: relative;
}

/* Títulos com estilo Épico */
h2, h3, h4 {
    font-family: var(--font-header);
    color: var(--text-highlight);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #5d4037;
    margin-top: 0;
    padding-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* --- Status Row --- */
.status-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1.1rem;
    padding: 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
}

.val-gold { color: var(--gold-coin); text-shadow: 0 0 5px #ffb300; }
.val-day { color: #81d4fa; }

/* --- Lista da Party (Cards Medievais) --- */
.party-member {
    background: linear-gradient(to right, #2c2c2e, #1f1f23);
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #444;
    border-left: 4px solid var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}

.party-member:hover {
    transform: translateX(2px);
    border-color: #666;
}

.party-member.dead {
    filter: grayscale(100%);
    opacity: 0.6;
    border-left-color: #333;
}

.member-name {
    font-family: var(--font-header);
    font-weight: 700;
    color: #e0e0e0;
}

.member-details {
    font-size: 0.75rem;
    color: #888;
}

/* Barra de Vida "Líquida" */
.hp-bar-bg {
    width: 80px;
    height: 10px;
    background: #111;
    border: 1px solid #444;
    border-radius: 2px;
    box-shadow: inset 0 0 5px #000;
}

.hp-bar-fill {
    height: 100%;
    /* Gradiente vermelho sangue */
    background: linear-gradient(to bottom, #ef5350, #b71c1c); 
    box-shadow: 0 0 5px #ff0000;
}

/* --- Layout Aventura --- */
.adventure-row {
    display: flex;
    gap: 15px;
    height: 220px;
    margin-bottom: 15px;
}

/* --- Diário (Pergaminho Escuro) --- */
#event-log {
    flex: 1;
    height: 85%;
    overflow-y: auto;
    background: #121212;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Logs ficam melhor mono */
    font-size: 0.85rem;
    border: 1px solid #333;
    box-shadow: inset 0 0 15px #000;
    display: flex;
    flex-direction: column-reverse;
}

/* Cores do Log */
.log-entry { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dashed #333; }
.log-combat { color: #ff5252; text-shadow: 0 0 2px #500; }
.log-loot { color: #ffd700; }
.log-info { color: #9fa8da; }
.log-success { color: #69f0ae; }

/* --- Minimapa (Mesa de Estratégia) --- */
.map-wrapper {
    width: 150px;
    border-left: 2px solid #333;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.2);
}

#minimap {
    display: inline-grid;
    gap: 4px;
    background-color: #000;
    padding: 8px;
    border: 4px solid #3e2723; /* Moldura de madeira */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.map-cell {
    width: 28px;
    height: 28px;
    background-color: #1a1a1a; /* Fog of War */
    border: 1px solid #333;
    border-radius: 2px;
}

.map-cell.visited {
    background-color: #424242; /* Pedra explorada */
    border-color: #555;
}

.map-cell.current {
    background-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color), inset 0 0 5px #fff;
    border: 1px solid #ff5252;
    position: relative;
}
/* Efeito de brilho no player */
.map-cell.current::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid white;
    opacity: 0.5;
}

/* --- Controles (Botões estilo RPG) --- */
.controls {
    border-top: 1px solid #5d4037; /* Separador estilo madeira */
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Agrupamento dos Botões Direcionais (Estilo D-Pad) */
.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.horizontal-dirs {
    display: flex;
    gap: 2px;
}

/* Agrupamento das Ações */
.action-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 60%; /* Ocupa o resto do espaço */
}

button {
    /* Mantém o estilo visual medieval anterior */
    font-family: var(--font-header);
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #5d4037, #3e2723);
    color: #e0e0e0;
    border: 1px solid #1a1a1a;
    border-top: 1px solid #8d6e63;
    box-shadow: 0 3px 0 #1a1a1a, 0 4px 5px rgba(0,0,0,0.5);
    cursor: pointer;
    text-shadow: 0 1px 2px black;
    
    /* Novos tamanhos compactos */
    padding: 8px 10px; 
    font-size: 0.75rem; 
    border-radius: 3px;
}

button:hover {
    background: linear-gradient(to bottom, #6d4c41, #4e342e);
    color: #fff;
    transform: translateY(-1px);
}

button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1a1a1a;
}

button:disabled {
    background: #2c2c2c;
    color: #555;
    border-color: #222;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Estilo específico para botões de direção (Quadrados pequenos) */
.dir-btn {
    width: 64px;
    height: 64px;
    padding: 0; /* Remove padding para centralizar a letra */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo dos botões de ação (Largos) */
.action-btn {
    width: 100%; /* Preenche a largura do grupo */
    background: linear-gradient(to bottom, #37474f, #263238);
    border-top-color: #546e7a;
    text-align: center;
}
.action-btn:hover {
    background: linear-gradient(to bottom, #455a64, #37474f);
}

/* Responsividade */
@media (max-width: 650px) {
    .game-container { grid-template-columns: 1fr; }
    .adventure-row { flex-direction: column; height: auto; }
    #event-log { height: 200px; }
    .map-wrapper { 
        width: 100%; 
        border-left: none; 
        border-top: 1px solid #333; 
        padding: 15px 0; 
        flex-direction: row; 
        justify-content: center; 
        gap: 20px;
    }
    .controls {
        flex-direction: column; /* No celular, um grupo embaixo do outro */
        gap: 15px;
    }
    .action-group { width: 100%; }
}