/* 1. Fondo y Contenedor Principal */
.main-container {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    align-items: center; 
    justify-content: center; 
    background-color: #2b0057; 
}

/* 2. Título "Loco" */
.game-title {
    font-size: 120px;
    color: #ffffff;
    -unity-font-style: bold;
    text-shadow: 5px 5px 0px #000000; 
    margin-bottom: 50px;
    rotate: -5deg; 
}

/* 3. Botones Base */
.menu-button {
    width: 300px;
    height: 80px;
    margin: 15px;
    background-color: #ffffff;
    border-radius: 40px; 
    border-width: 6px;
    border-color: #000000;
    font-size: 40px;
    -unity-font-style: bold;
    color: #000000;
    transition-property: scale, rotate, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out-back; 
}

/* 4. Estado Hover */
.menu-button:hover {
    scale: 1.1 1.1; 
    rotate: 3deg;   
    background-color: #ffec00; 
    color: #2b0057;
}

/* 5. Estado Pressed */
.menu-button:active {
    scale: 0.95 0.95; 
    background-color: #ff8800; 
}

/* Estilo botón Salir */
.button-exit { border-color: #ff0044; }
.button-exit:hover { background-color: #ffcccc; }