/* ======================================================= */
/* 1. ESTILOS GERAIS E LAYOUT PRINCIPAL (index.html) */
/* ======================================================= */

body {
    margin: 0;
    padding: 0;
    background-color: #000; 
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Container Principal com a Arte de Fundo */
.rpg-container {
    width: 100vw; 
    height: 100vh; 
    /* Imagem principal como fundo */
    background-image: url('./assets/fundo.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* Centraliza o botão verticalmente */
    text-align: center;
    box-sizing: border-box;
}

/* Container do Botão Principal (JOGAR) */
.button-main-container {
    /* Ajuste de margem para posicionar o botão sob o logo na arte de fundo */
    margin-top: 250px; 
    margin-bottom: 0; 
}

/* Estilos do Botão Principal (JOGAR) */
.rpg-button {
    width: 100%;
    max-width: 350px; 
    cursor: pointer;
    transition: transform 0.1s ease; 
}

/* Classe CSS para simular o estado "clicado" */
.is-clicked {
    transform: scale(0.95); 
}

/* ======================================================= */
/* 2. TELA DE CARREGAMENTO (LOADER) */
/* (Inclusão de funcionalidade de transição) */
/* ======================================================= */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; 
    background-color: #000; 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s; 
    visibility: visible;
}

#loader-wrapper.loaded {
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

.rpg-loader {
    font-size: 2em;
    color: #f0e6d2; 
    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ff9900; 
    font-weight: bold;
    letter-spacing: 5px;
    animation: pulse 1.5s infinite alternate; 
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

/* ======================================================= */
/* 3. MEDIA QUERIES (Responsividade para index.html) */
/* ======================================================= */

/* Ajustes para Tablets */
@media (max-width: 768px) {
    .button-main-container {
        margin-top: 150px; 
    }
    .rpg-button {
        max-width: 280px; 
    }
}

/* Ajustes para Celulares */
@media (max-width: 480px) {
    .button-main-container {
        margin-top: 100px; 
    }
    .rpg-button {
        max-width: 200px; 
    }
    .rpg-loader {
        font-size: 1.5em; 
        letter-spacing: 3px;
    }
}