body {
  background: url('backgound.jpg') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
}

.borde {
     overflow: hidden;
     justify-content: center;
	align-items: center;
	margin: auto;
	width: 100%;
	height: 95vh;
/*	border: 3px solid #000;
*/	position: relative;
        }



.borde-contenedor{
    background-color:rgba(250,250,250,0.5);
	margin: auto;
	margin-top: 35px;
	width: 70%;
	height: 85%;
	z-index: 89;
	border: 3px dotted #000;
	position: relative;

}
.sky{
    display: block;
    width: 89px;
    height: 100px;
    position: absolute;
    color: #000;
    bottom: 123px;
    left: 45%;
    margin: auto;
    transition: transform 0.2s ease;

}
/* Animación de esquí */
@keyframes ski {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.sky.skiing {
    animation: ski 0.5s infinite;
}

@keyframes fallLeft {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-50px, 100vh) rotate(360deg); }
}
@keyframes fallRight {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(50px, 100vh) rotate(360deg); }
}

.contador{
    position: absolute;
    padding: 5px;
    background-color: transparent;
    right: 20px;
    color: black;
}
.start{
    display: block;
    position: absolute;
    width: 100%;
    background-color: rgba(20,20,20,0.8);
    height: 100%;
    align-items: center;
    z-index: 99;
    text-align: center;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */


}
.start span{
}
.start span h2{
    color:white;
    letter-spacing: 3px;
    margin-top: 40px;
    position: relative;
    font-family: robot;

}
.start button{
    position: relative;
    width: 60%;
    height: 50px;
    background-color: #ece6e6;
    border-style: none;
    border:4px solid grey;
    font-size:20px;
    letter-spacing: 10px;
    font-family: serif;
    cursor: pointer;
    margin-top: 50px;
}
.start button:hover{
    background-color: black;
    border-color: white;
    color: white;
}


.limite_1 , .limite_2{
    width: 130px;
    height: auto;
    position: absolute;
   right: -65px;
  bottom: 150px
}
.limite_2{
   left:-65px;
}
.curva {

	position: relative;
	bottom: 0px;
    width: 100%;
    height: 27%;
    background-color:rgba(12, 12, 12, 0.6);
    /*clip-path: ellipse(80% 100% at 50% 100%);*/
}

/* Efecto de nieve acumulada */
.curva::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
    border-radius: 50%;
    filter: blur(5px);
}

.snowflake {
            position: absolute;
            top: -10px;
            color: black;
            font-size: 20px;
            user-select: none;
            animation: fall linear infinite;
        }

        @keyframes fall {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(100vh) rotate(360deg); }
        }

.cont_arbol{
    position: relative;
    width: 100%;
    height: 74%;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 90;
}
.arbol {
    display: block;
    position: absolute;
    width: 80px;
    justify-content: center;
    height: 90px;
    bottom: 0px;
    left: 10px;
    background-size: cover;
    pointer-events: none;

    animation: arbolito 4s  linear;
}


/* Habilitar interacción solo cuando la animación termine */
.arbol[data-animacion-completa="true"] {
    pointer-events: auto;
}

/* Efecto visual para árboles "activos" (debug) */
.arbol[data-animacion-completa="true"] {
    /* border: 2px solid red; */ /* Descomentar para debug */
}
@keyframes arbolito {
    0% { 
        bottom: -38px;
        opacity: 3%; 
        transform: scaleY(0.1);
    }
    10% { 
  
        transform: scaleY(0.2);
    }
    20% { 
        opacity: 40%;
        transform: scaleY(0.3);
    }
    30% { 
    
        transform: scaleY(0.4);
    }
    40% { 
   
        transform: scaleY(0.5);
    }
    50% { 
        opacity: 70%;
        transform: scaleY(0.6);
    }
    60% { 
    
        transform: scaleY(0.7);
    }
    70% { 

        transform: scaleY(0.8);
    }
    80% { 
       
        transform: scaleY(0.9);
    }
    90% { 
       
        transform: scaleY(0.95);
    }
    100% { 
        opacity: 100%;
        transform: scaleY(1);
    }
}

/*alerta perdiste*/
.alerta{
            background-color:rgba(30, 30, 0, 0.71); /* Rojo para alertas */
            color: white;
            margin-bottom: 15px;
            width: 100%;
            height: 100%;
            z-index: 100;
            border-radius: 4px;
            position: fixed;
            top: 0px;
            right: 0px;
}

.alerta div{
    width: 50%;
    margin: auto;
    text-align: center;
    align-items: center;
    align-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
    
}
.alerta button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: rgba(60,60,60,0.8);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
.alerta button:hover{
    color: black;
    background-color:rgb(200,200,200);
}
@media (max-width: 768px) {
    .borde-contenedor {
        width: 95%;
    }
    
    .start button {
        width: 80%;
        font-size: 16px;
    }
    
    .sky {
        width: 60px;
        height: 80px;
        left: 40%;
    }
}