/* ===================== ESTILOS BASE COMPARTIDOS - YO NUNCA ===================== */
/* Este archivo contiene todos los estilos comunes compartidos entre todas las vistas */

/* ===================== FONTS ===================== */
@font-face {
    font-family: 'ChauPhilomeneOne-Regular';
    src: url('/01_Yo_nunca/src/fuentes/ChauPhilomeneOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChauPhilomeneOne-Italic';
    src: url('/01_Yo_nunca/src/fuentes/ChauPhilomeneOne-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ===================== RESET Y BASE ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(90deg, #014AAD, #C96CE6, #A8E6CF);
    background-size: 300% 300%;
    animation: gradientMove 10s ease infinite;
    min-height: 100vh;
}

/* ===================== ANIMACIONES COMUNES ===================== */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes moveUpDown {
    0% {
        transform: translateY(20px); /* Posición inicial */
    }
    50% {
        transform: translateY(-10px); /* Se mueve hacia arriba */
    }
    100% {
        transform: translateY(20px); /* Vuelve a la posición inicial */
    }
}

@keyframes floatUpDown {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-15px); 
    }
}

@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* NOTA: Los logo-containers ahora usan clases únicas por vista:
   - .logo-container_intro (view-intro)
   - .logo-container_frase (view-frase)
   - .logo-container_game (view-game)
   - .logo-container_stats (view-stats)
   - .logo-container_stats_likes (view-stats-likes)
   - .logo-container_frase_jugador (view-frase-jugador)
   - .logo-container_espera_frases_jugador (view-espera-frases-jugador)
   - .logo-container_yonunca_jugador (view-yonunca-jugador)
   - .logo-container_yonunca_like_jugador (view-yonunca-like-jugador)
   - .logo-container_yonunca_final_jugador (view-yonunca-final-jugador)
   
   Cada clase es única y no hereda de ninguna otra.
*/

/* NOTA: Los logos específicos de cada vista usan clases únicas:
   - .logo_intro (view-intro)
   - .logo_frase (view-frase)
   - .logo_game (view-game)
   - .logo_stats (view-stats)
   - .logo_stats_likes (view-stats-likes)
   - .logo_frase_jugador (view-frase-jugador)
   - .logo_espera_frases_jugador (view-espera-frases-jugador)
   - .logo_yonunca_jugador (view-yonunca-jugador)
   - .logo_yonunca_like_jugador (view-yonunca-like-jugador)
   - .logo_yonunca_final_jugador (view-yonunca-final-jugador)
   
   Cada clase es única y no hereda de ninguna otra.
*/

/* ===================== ESTILOS BASE DEL CONTENEDOR ===================== */
.container {
    text-align: center;
    color: white;
    padding: 1vw;
    border-radius: 2vh;
    position: relative;
    z-index: 1;
}

/* ===================== ESTILOS BASE DE ICONOS ===================== */
.icon {
    width: 5vw;
    height: auto;
}

.icon img {
    width: 5vw;
    height: auto;
}

/* ===================== BANNER APODO JUGADOR  ===================== */
.banner-apodo-jugador {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 0.8em 2em 0.8em 4vw !important; /* Padding izquierdo aumentado para margen desde el borde */
    font-size: 1.2em !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    z-index: 1500 !important;
    border-top-left-radius: 1.5em !important;
    border-top-right-radius: 1.5em !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18) !important;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif !important;
    /* IMPORTANTE: display se controla desde JavaScript, NO forzar flex aquí */
    /* display: flex se aplica solo cuando el banner está visible */
    justify-content: flex-start !important;
    align-items: center !important;
    /* Prevenir que se oculte con transformaciones del contenedor */
    transform: translateZ(0) !important;
    will-change: transform;
    /* Safe area para dispositivos con notch */
    padding-bottom: max(0.8em, env(safe-area-inset-bottom)) !important;
    /* Por defecto oculto - se muestra con JavaScript */
    display: none !important;
}

/* Contenedor del apodo siempre a la izquierda */
.banner-apodo-jugador > span:first-child {
    flex: 0 0 auto !important; /* No crece, no se encoge, tamaño automático */
    text-align: left !important;
}

.banner-apodo-jugador strong {
    margin-left: 1vw !important; /* Espacio entre "Tu apodo:" y el apodo */
    color: #ffe066 !important; /* Amarillo dorado como en yonunca_jugador */
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif !important;
}

/* Contador de frases en el banner (a la derecha, un poco más a la izquierda) */
.banner-apodo-jugador .contador-frases {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.05em;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif;
    display: none !important; /* Oculto por defecto, se mostrará cuando haya datos con JavaScript */
    margin-left: auto !important; /* Empuja el contador a la derecha */
    margin-right: 1vw !important; /* Un poco más a la izquierda desde el borde derecho */
}

/* Mostrar contador cuando tenga contenido (se sobrescribe con JavaScript) */
.banner-apodo-jugador .contador-frases[style*="display: block"] {
    display: block !important;
}





/* ===================== CORE CONTAINER (común en varias vistas) ===================== */
.core-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    margin-bottom: 2vh;
}

/* ===================== UTILIDADES ===================== */
.text-center {
    text-align: center;
}

.white-text {
    color: white;
}