/* Обнуление и база */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0; 
    padding: 0;
    background-color: #f4ede1;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    scroll-behavior: smooth;
}

#app { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

/* Секции-страницы */
.page {
    position: relative; 
    width: 100%;
    max-width: 1000px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Базовое состояние элементов до анимации */
.page img, 
.fill-button, 
#timer-display {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0; 
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

/* Типы анимаций */
.page.slide-up img, 
.page.slide-up .fill-button, 
.page.slide-up #timer-display { 
    transform: translateY(60px); 
}

.page.slide-left img { 
    transform: translateX(-80px); 
}

.page.slide-right img { 
    transform: translateX(80px); 
}

/* Появление при скролле (в обе стороны) */
.page.is-visible img, 
.page.is-visible .fill-button, 
.page.is-visible #timer-display {
    opacity: 1;
    transform: translate(0, 0);
}

/* ТАЙМЕР */
.countdown-page {
    padding: 50px 0;
}

#timer-display {
    display: flex; 
    gap: 10px; 
    align-items: center;
    justify-content: center;
    width: 100%;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-val { 
    font-size: clamp(2rem, 10vw, 4.5rem); 
    font-weight: 100; 
    color: #4b6030; 
    line-height: 1;
}

.label {
    font-size: clamp(0.6rem, 2vw, 0.8rem);
    color: #4b6030;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1px;
}

.colon { 
    font-size: clamp(1.5rem, 8vw, 3rem); 
    color: #4b6030; 
    padding-bottom: 20px;
}

/* КНОПКИ */
.fill-button {
    display: inline-flex;
    justify-content: center;
    padding: 18px 0;
    width: 85%;
    max-width: 350px;
    border-radius: 100px;
    border: 1px solid #a7d498;
    background-color: #f4ede1;
    color: #d383a9;
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 300;
    cursor: pointer;
    margin: 40px 0;
    text-decoration: none;
    z-index: 10;
}

.fill-button:active {
    background-color: #e9e0d1;
}

/* ЗМЕЙКА (НАЛОЖЕНИЕ) */
#snake-overlay {
    position: fixed; /* Теперь фиксировано относительно окна браузера */
    z-index: 999;
    pointer-events: none; 
    opacity: 0;           
    transition: opacity 0.5s ease; 
    
    top: 0; /* Будет установлено JS */
    left: 0; /* Будет установлено JS */
    width: auto; /* Будет установлено JS */
    height: auto; /* Будет установлено JS */
}

#snake-overlay.visible {
    opacity: 1;
}

#snake-overlay img {
    display: block; 
    width: 100%;    
    height: auto;   
}

/* Адаптив под очень маленькие экраны */
@media (max-width: 480px) {
    .time-block { min-width: 50px; }
    .colon { gap: 5px; }
}