/* Paleta de Colores inspirada en la segunda imagen */
:root {
    --verde-principal: #3D664E; /* Verde oscuro del header */
    --verde-claro: #A8E6A0;    /* Verde más suave */
    --beige-fondo: #F5F5DC;    /* Fondo claro */
    --blanco: #FFFFFF;
    --texto-oscuro: #3D405B;   /* Para párrafos y texto general */
    --gris-claro-borde: #E0E0E0; /* Para bordes o separadores */
}

body {
    font-family: 'Open Sans', sans-serif; 
    background-color: var(--beige-fondo);
    /* Fondo de Hojas */
    background-image: url('img/fondo-hojas-sutil.png'); /* Ruta a tu nueva imagen */
    background-size: cover; /* Esto hará que la imagen cubra todo el fondo sin repetirse */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Importante para que no se repita */
    background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */

    color: var(--texto-oscuro);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    text-align: center;
    line-height: 1.6;
    position: relative; /* Para posicionar el sidebar de redes */
}

/* Wrapper para el contenido principal (sin caja) */
.content-wrapper {
    max-width: 580px; /* Un poco más ancho para centrar el contenido */
    width: 90%;
    margin: 0 auto; /* Centrar */
    padding: 2rem 1rem; /* Espaciado interno */
    display: flex; /* Usamos flexbox para centrar verticalmente los elementos */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Para que ocupe suficiente espacio vertical */
}

/* Logo */
.logo-container {
    margin-bottom: 2.5rem; /* Más espacio debajo del logo */
}
.logo {
    max-width: 200px; /* Logo más grande */
    height: auto;
}

/* Contenido "Próximamente" */
.coming-soon-text {
    margin-bottom: 3rem; /* Más espacio debajo del texto principal */
}

h1 {
    color: var(--verde-principal);
    font-size: 4.5rem; /* ¡Aún más grande! */
    margin-bottom: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px; /* Más espaciado entre letras */
    text-transform: uppercase; /* Todo en mayúsculas */
}

.subtitle {
    font-size: 1.3rem;
    color: var(--texto-oscuro);
    margin-bottom: 0;
}

/* Mini-Juego (con estilo más integrado) */
.game-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.game-container h3 {
    color: var(--verde-principal);
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

#game-area {
    position: relative;
    width: 90%;
    max-width: 450px; /* Un poco más ancho */
    height: 250px; /* Un poco más alto */
    background-color: var(--blanco); /* Fondo blanco para el juego */
    border-radius: 12px; /* Bordes más suaves */
    margin: 1rem auto;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sutil sombra para destacarlo un poco */
}

#target {
    position: absolute;
    font-size: 3.5rem; /* Emoji aún más grande */
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease;
}

#score {
    font-weight: bold;
    color: var(--verde-principal);
    font-size: 1.1rem;
}

/* Redes Sociales en el Sidebar Lateral */
.social-links-sidebar {
    position: fixed; /* Fija la posición en la pantalla */
    right: 20px; /* 20px desde el borde derecho */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajuste para un centrado perfecto */
    display: flex;
    flex-direction: column; /* Íconos apilados verticalmente */
    gap: 1.2rem; /* Espacio entre íconos */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.social-links-sidebar a {
    color: var(--verde-principal); /* Color del ícono */
    font-size: 2rem; /* Íconos más grandes */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.social-links-sidebar a:hover {
    color: var(--verde-claro);
    transform: translateX(-5px); /* Efecto de moverse un poco hacia la izquierda */
}

/* Media Queries para pantallas más pequeñas (opcional pero recomendado) */
@media (max-width: 768px) {
    h1 {
        font-size: 3rem; /* Título más pequeño en móviles */
    }
    .subtitle {
        font-size: 1rem;
    }

    /* ***** CAMBIO AQUÍ ***** */
    /* Reglas para las redes sociales en móvil */
    .social-links-sidebar {
        /* Desactivamos el modo "sidebar" fijo */
        position: static;
        transform: none;
        top: auto;
        right: auto;
        
        /* Lo convertimos en una fila horizontal */
        flex-direction: row;
        justify-content: center;
        width: 100%;
        
        /* Le damos espaciado */
        margin-top: 2.5rem; /* Espacio para separarlo del juego */
        margin-bottom: 1rem; /* Espacio al final */
        gap: 2.5rem; /* Espacio entre íconos (más grande para tocar fácil) */

        /* Tamaño de íconos (un poco más grandes que antes) */
        font-size: 1.8rem;
    }
    
    .social-links-sidebar a:hover {
        transform: translateY(-3px); /* Cambiamos el efecto hover a vertical */
    }

    .logo {
        max-width: 150px;
    }
    #game-area {
        height: 180px;
    }
    #target {
        font-size: 2.5rem;
    }
}