* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: #050505;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 2s ease-in-out;
    z-index: 1;
}

/* OVERLAY MEJORADO: Mucho más transparente arriba para que se vea el campo */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.05) 100%);
    z-index: 2;
}

#dialog-box {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 900px;
    margin-bottom: 5vh;
    background: rgba(15, 15, 20, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 35px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    color: white;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

#character-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #ffe066; 
    margin-bottom: 15px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#dialog-text {
    font-family: 'Lora', serif;
    font-size: 1.35rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

#choices-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.choice-btn {
    font-family: 'Lora', serif;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    transition: all 0.3s ease;
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.choice-btn:hover {
    background: rgba(255, 215, 0, 0.4);
    border-color: #ffe066;
    transform: translateX(10px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

#petals-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

/* La partícula base. El JS decidirá si es un emoji o un pétalo CSS */
.petal {
    position: absolute;
    top: -10%;
    opacity: 0;
    animation: fall linear infinite;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.5));
}

@keyframes fall {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(110vh) translateX(50px) rotate(360deg); opacity: 0; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: #050505;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Sistema de doble fondo para transiciones suaves y Ken Burns */
.bg-layer {
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    /* COVER llena la pantalla, pero le diremos dónde enfocar */
    background-size: cover;
    /* Enfoca el centro, pero un poco más arriba (25%) para no cortar cabezas */
    background-position: center 25%; 
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    z-index: 1;
}

/* Regla especial: Si es un celular, ajustamos la imagen para priorizar el contenido */
@media (max-width: 768px) {
    .bg-layer {
        background-attachment: scroll; /* Evita un bug visual muy común en iPhones */
        background-position: center 20%; 
    }
}

.active-bg {
    opacity: 1;
}

/* Efecto Ken Burns (Zoom lento constante) para el campo de flores */
.ken-burns {
    animation: kenBurnsZoom 30s infinite alternate ease-in-out;
}

@keyframes kenBurnsZoom {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* Overlay Dinámico: Cambiará según la escena */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.05) 100%);
    z-index: 2;
    transition: background 3s ease;
}

.overlay.warm {
    background: linear-gradient(to top, rgba(15, 10, 0, 0.95) 0%, rgba(40, 20, 0, 0.3) 30%, rgba(255, 200, 0, 0.05) 100%);
}

#dialog-box {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 900px;
    margin-bottom: 5vh;
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 35px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    color: white;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    transition: all 2s ease;
}

#dialog-box.warm-box {
    background: rgba(30, 20, 0, 0.5);
    border-top: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 10px 50px rgba(255, 200, 0, 0.3);
}

#character-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #ffd700; 
    margin-bottom: 15px;
    letter-spacing: 2px;
    transition: color 2s ease;
}

#dialog-text {
    font-family: 'Lora', serif;
    font-size: 1.35rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

#choices-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.choice-btn {
    font-family: 'Lora', serif;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ddd;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    transition: all 0.3s ease;
    text-align: left;
}

.choice-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #fff;
    transform: translateX(10px);
}

.warm-box .choice-btn {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff;
}

.warm-box .choice-btn:hover {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Contenedor de Partículas */
#particles-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    top: -10%;
    opacity: 0;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Animación compleja para hojas cayendo (balanceo) */
@keyframes fallAndSway {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    25% { transform: translateY(25vh) translateX(30px) rotate(90deg); }
    50% { transform: translateY(50vh) translateX(-20px) rotate(180deg); }
    75% { transform: translateY(75vh) translateX(40px) rotate(270deg); }
    95% { opacity: 1; }
    100% { transform: translateY(110vh) translateX(0px) rotate(360deg); opacity: 0; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Evitar que el usuario seleccione el texto por accidente al arrastrar el dedo */
    user-select: none; 
}

body, html {
    width: 100%;
    height: 100%;
    background-color: #050505;
    overflow: hidden;
    touch-action: none; /* Desactiva el scroll táctil para que limpie el cristal tranquilo */
}

#game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bg-layer {
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    z-index: 1;
}

.active-bg { opacity: 1; }
.ken-burns { animation: kenBurnsZoom 30s infinite alternate ease-in-out; }
@keyframes kenBurnsZoom {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* CANVAS DE NIEBLA */
#fog-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 4; /* Sobre el fondo, pero debajo de los textos */
    cursor: pointer;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.05) 100%);
    z-index: 5;
    transition: background 3s ease;
    pointer-events: none; /* Dejar pasar los toques al canvas */
}

.overlay.warm {
    background: linear-gradient(to top, rgba(15, 10, 0, 0.95) 0%, rgba(40, 20, 0, 0.3) 30%, rgba(255, 200, 0, 0.05) 100%);
}

#dialog-box {
    position: relative;
    z-index: 10; /* Siempre encima de todo para poder hacer clic */
    width: 90%;
    max-width: 900px;
    margin-bottom: 5vh;
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 35px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    color: white;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    transition: all 2s ease;
}

#dialog-box.warm-box {
    background: rgba(30, 20, 0, 0.5);
    border-top: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 10px 50px rgba(255, 200, 0, 0.3);
}

#character-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #ffd700; 
    margin-bottom: 15px;
    letter-spacing: 2px;
}

#dialog-text {
    font-family: 'Lora', serif;
    font-size: 1.35rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

#choices-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.choice-btn {
    font-family: 'Lora', serif;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ddd;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    transition: all 0.3s ease;
    text-align: left;
}

.choice-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #fff;
    transform: translateX(10px);
}

.warm-box .choice-btn {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff;
}

.warm-box .choice-btn:hover { background: rgba(255, 215, 0, 0.4); box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }

#particles-container, #interactive-sunflowers {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

/* Partículas cayendo */
.particle { position: absolute; opacity: 0; user-select: none; display: flex; justify-content: center; align-items: center; }
@keyframes fallAndSway {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    25% { transform: translateY(25vh) translateX(30px) rotate(90deg); }
    50% { transform: translateY(50vh) translateX(-20px) rotate(180deg); }
    75% { transform: translateY(75vh) translateX(40px) rotate(270deg); }
    95% { opacity: 1; }
    100% { transform: translateY(110vh) translateX(0px) rotate(360deg); opacity: 0; }
}

/* GIRASOLES TÁCTILES QUE NACEN */
.touch-sunflower {
    position: absolute;
    font-size: 3rem; /* Tamaño del girasol */
    filter: drop-shadow(0px 0px 10px rgba(255, 215, 0, 0.8));
    transform: translate(-50%, -50%) scale(0);
    animation: popBloom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}
@keyframes popBloom {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-45deg); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* ======== ESTILOS DEL COLLAGE (RESPONSIVE Y ADAPTADO A FOTOS VERTICALES) ======== */
#collage-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000;
    z-index: 100;
    display: none; 
    opacity: 0;
    transition: opacity 0.8s ease;
}

#collage-container.show {
    display: block;
    opacity: 1;
}

/* 1. Diseño base para PC (Pantallas horizontales) */
#collage-grid {
    display: grid;
    /* Divide la pantalla en 4 franjas verticales idénticas */
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: 100vh;
    width: 100vw;
    height: 100vh;
    gap: 0; /* Sin espacios, inmersión total */
}

#collage-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* TRUCO: Enfoca siempre la cámara virtual en la parte superior central (Rostros) */
    object-position: center 25%; 
    transition: transform 0.5s ease;
}

#collage-grid img:hover {
    transform: scale(1.02);
    z-index: 2;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.9);
}

/* 2. Diseño para Celulares (Pantallas verticales) */
/* Si la pantalla es más alta que ancha, aplica esto automáticamente */
@media (max-aspect-ratio: 1/1) {
    #collage-grid {
        /* En celular volvemos al 2x2, porque los cuadrantes serán verticales */
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 1fr 1fr;    
    }
}

/* Botón flotante para cerrar el collage */
#close-collage {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    padding: 12px 30px;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid #ffd700;
    color: #ffd700;
    border-radius: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    font-family: 'Lora', serif;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

#close-collage:hover {
    background: #ffd700;
    color: #000;
    transform: translateX(-50%) scale(1.05);
}