/* --- 🎮 ESTILOS GENERALES --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 15px solid #333;
    border-image: repeating-linear-gradient(
        135deg,
        #333 0px,
        #333 5px,
        #555 5px,
        #555 10px
    ) 15;
    pointer-events: none;
    z-index: 99;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    font-family: "Silkscreen", monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* --- 🖥️ ESTRUCTURA LATERAL --- */
#title-screen {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.content-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    z-index: 15;
}

.face-right {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.face-image {
    max-width: 100%;
    max-height: 80vh;
    animation: float 3s ease-in-out infinite;
}

/* --- 🖥️ PANTALLAS --- */
.screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0.9);
    transition: 
        opacity 0.5s ease-out,
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.screen.active {
    display: flex;
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* Ajusta la pantalla del tutorial */
#tutorial-screen {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Espacio superior al título */
#tutorial-screen h2 {
    margin-top: 70px; /* Baja el título */
    font-size: 24px;
}

/* Ajustar la imagen del tutorial */
#tutorial-screen img {
    max-height: 70vh; /* Ajusta la imagen sin que ocupe todo */
}

/* Grupo de botones bien centrado */
.button-group {
    display: flex;
    gap: 20px;
    justify-content: center; /* Asegura que los botones queden centrados */
    margin-bottom: 40px; /* Separación del borde inferior */
}


/* --- 🎮 BOTONES MEJORADOS --- */
#start-btn, .menu-btn, .action-btn {
    position: relative;
    overflow: hidden;
    font-family: "Silkscreen", monospace;
    font-size: 20px;
    min-width: 240px; /* Ancho mínimo unificado */
    width: 240px; /* Ancho fijo para todos */
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 4px solid;
    margin: 15px;
    will-change: transform;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    text-align: center; /* Texto centrado */
}

#start-btn:hover, .menu-btn:hover, .action-btn:hover {
    animation: pixelate 0.3s steps(2) forwards;
}

#start-btn:active, .menu-btn:active, .action-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

@keyframes pixelate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05) translate(1px, 1px); }
    100% { transform: scale(1.05); }
}

/* Botón START */
/* Botón START */
#start-btn {
    background-color: #ff0000;
    color: #fff;
    font-size: 28px;
    border-color: #fff;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
    margin: 0 0 20px 0;
    box-shadow: 
        0 0 10px #ff0000,
        0 0 20px #ff0000,
        4px 4px 0px rgba(0, 0, 0, 0.3);
}

/* Botones del menú */
.menu-btn {
    background: linear-gradient(145deg, #ff3333, #cc0000);
    color: #fff;
    border-color: #fff;
    /* Estilo especial para cuando cambia a "Sobrevivir otra vez" */
    &.has-won {
        background: linear-gradient(145deg, #aa0000, #880000);
        border-color: #ffcc00;
        color: #ffcc00;
    }
}

/* Botones de acción (verdes) */
.action-btn {
    background: linear-gradient(145deg, #55ff55, #00aa00);
    color: #000;
    border-color: #000;
}

.action-btn:hover {
    background: #000;
    color: #00ff00;
    border-color: #00ff00;
}

.action-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 2px,
            transparent 2px,
            transparent 4px
        );
    pointer-events: none;
}

/* --- 🎮 TRANSICIONES PARA BOTONES --- */
.menu-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.action-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    transform: scale(1.5);
}

.menu-message {
    font-size: 16px;
    font-family: 'Press Start 2P', cursive;
    color: white;
    text-shadow: 2px 2px 8px rgba(255, 255, 0, 0.6);
    text-align: center; /* Centrar el texto */
    
    max-width: 75%; /* Evitar que toque los bordes */
    margin: 10px auto 20px auto; /* Centrado y con margen inferior */
    padding: 10px; /* Espacio interno */
    
    display: block; /* Asegurar que se comporte como bloque */
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2); /* Efecto de brillo suave */
    
    transition: color 0.5s ease-in-out, transform 0.3s ease-in-out;
}


/* Estilo para el corazón interactivo */
#secret-reset {
    cursor: pointer;
    margin: 15px auto;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 15;
}

/* Crear el corazón con CSS puro */
#secret-reset::before {
    content: "🎭";
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

#secret-reset:hover::before {
    transform: scale(1.3);
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));
    color: #ff0000;
}

/* Animación para el feedback */
@keyframes heart-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.secret-activated {
    animation: heart-pulse 0.5s 3;
}

/* Tooltip para el corazón */
#secret-reset::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Press Start 2P', cursive;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#secret-reset:hover::after {
    opacity: 1;
}


/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    #title-screen {
        flex-direction: column;
        padding-top: 20%;
    }
    .content-left, .face-right {
        width: 100%;
    }
    .face-image {
        max-height: 50vh;
        margin-top: 30px;
    }
}