/* Happy Birthday Card Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Отключаем все браузерные эффекты для изображений (кроме конвертов) */
img:not(.envelope) {
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: white;
    overflow: hidden;
    padding: 5vh 5vw;
    box-sizing: border-box;
}

/* Background */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('c9a9bdb348c0f7d5bd934287f6005963eebbb5f0.png');
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    z-index: 1; /* Задний план */
}

/* Flags - точные координаты из Figma */
.left-flags, .right-flags {
    position: absolute;
    width: 52.0%; /* 998/1920 */
    height: 39.7%; /* 429/1080 */
    object-fit: contain;
    z-index: 7; /* Самый передний план */
    animation: float 3s ease-in-out infinite;
}

.left-flags {
    left: -16.9%; /* -325/1920 */
    top: -17.7%;  /* -191/1080 */
    animation-delay: 0s;
}

.right-flags {
    left: 66.5%;  /* 1276/1920 */
    top: -17.7%;  /* -191/1080 */
    animation-delay: 1.5s;
}

/* Envelopes */
.envelopes-container {
    position: absolute;
    left: 0.9%;  /* 17/1920 */
    top: 24.7%;  /* 267/1080 */
    width: 97.2%;  /* 1867/1920 */
    height: 65.0%;  /* 702/1080 */
    /* Убираем z-index с контейнера - он блокирует другие элементы */
}

.envelope {
    position: absolute;
    width: 9.7%;
    height: 13.8%;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 6; /* Второй слой */
    /* Базовая подсветка для неоткрытых конвертов */
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Анимация покачивания и пульсации для неоткрытых конвертов */
.envelope:not(.opened) {
    /* Анимации задаются индивидуально для каждого конверта */
}

@keyframes envelopeRotate {
    0% { 
        transform: rotate(-2deg); 
    }
    100% { 
        transform: rotate(2deg); 
    }
}

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

/* Анимации покачивания с учетом базовых углов из Figma */
@keyframes envelopeWiggle1-1 {
    0% { transform: rotate(13.955deg) scale(1); }
    25% { transform: rotate(17.955deg) scale(1.02); }
    50% { transform: rotate(15.955deg) scale(1.05); }
    75% { transform: rotate(17.955deg) scale(1.02); }
    100% { transform: rotate(13.955deg) scale(1); }
}

@keyframes envelopeWiggle1-2 {
    0% { transform: rotate(18.834deg) scale(1); }
    25% { transform: rotate(22.834deg) scale(1.02); }
    50% { transform: rotate(20.834deg) scale(1.05); }
    75% { transform: rotate(22.834deg) scale(1.02); }
    100% { transform: rotate(18.834deg) scale(1); }
}

@keyframes envelopeWiggle1-3 {
    0% { transform: rotate(10.832deg) scale(1); }
    25% { transform: rotate(14.832deg) scale(1.02); }
    50% { transform: rotate(12.832deg) scale(1.05); }
    75% { transform: rotate(14.832deg) scale(1.02); }
    100% { transform: rotate(10.832deg) scale(1); }
}

@keyframes envelopeWiggle1-4 {
    0% { transform: rotate(7.234deg) scale(1); }
    25% { transform: rotate(11.234deg) scale(1.02); }
    50% { transform: rotate(9.234deg) scale(1.05); }
    75% { transform: rotate(11.234deg) scale(1.02); }
    100% { transform: rotate(7.234deg) scale(1); }
}

@keyframes envelopeWiggle1-5 {
    0% { transform: rotate(20.654deg) scale(1); }
    25% { transform: rotate(24.654deg) scale(1.02); }
    50% { transform: rotate(22.654deg) scale(1.05); }
    75% { transform: rotate(24.654deg) scale(1.02); }
    100% { transform: rotate(20.654deg) scale(1); }
}

@keyframes envelopeWiggle1-6 {
    0% { transform: rotate(10.274deg) scale(1); }
    25% { transform: rotate(14.274deg) scale(1.02); }
    50% { transform: rotate(12.274deg) scale(1.05); }
    75% { transform: rotate(14.274deg) scale(1.02); }
    100% { transform: rotate(10.274deg) scale(1); }
}

@keyframes envelopeWiggle2-1 {
    0% { transform: rotate(20.112deg) scale(1); }
    25% { transform: rotate(24.112deg) scale(1.02); }
    50% { transform: rotate(22.112deg) scale(1.05); }
    75% { transform: rotate(24.112deg) scale(1.02); }
    100% { transform: rotate(20.112deg) scale(1); }
}

@keyframes envelopeWiggle2-2 {
    0% { transform: rotate(8.491deg) scale(1); }
    25% { transform: rotate(12.491deg) scale(1.02); }
    50% { transform: rotate(10.491deg) scale(1.05); }
    75% { transform: rotate(12.491deg) scale(1.02); }
    100% { transform: rotate(8.491deg) scale(1); }
}

@keyframes envelopeWiggle2-3 {
    0% { transform: rotate(13.242deg) scale(1); }
    25% { transform: rotate(17.242deg) scale(1.02); }
    50% { transform: rotate(15.242deg) scale(1.05); }
    75% { transform: rotate(17.242deg) scale(1.02); }
    100% { transform: rotate(13.242deg) scale(1); }
}

@keyframes envelopeWiggle2-4 {
    0% { transform: rotate(13.169deg) scale(1); }
    25% { transform: rotate(17.169deg) scale(1.02); }
    50% { transform: rotate(15.169deg) scale(1.05); }
    75% { transform: rotate(17.169deg) scale(1.02); }
    100% { transform: rotate(13.169deg) scale(1); }
}

@keyframes envelopeWiggle2-5 {
    0% { transform: rotate(21.051deg) scale(1); }
    25% { transform: rotate(25.051deg) scale(1.02); }
    50% { transform: rotate(23.051deg) scale(1.05); }
    75% { transform: rotate(25.051deg) scale(1.02); }
    100% { transform: rotate(21.051deg) scale(1); }
}

@keyframes envelopeWiggle2-6 {
    0% { transform: rotate(-2deg) scale(1); }
    25% { transform: rotate(2deg) scale(1.02); }
    50% { transform: rotate(0deg) scale(1.05); }
    75% { transform: rotate(2deg) scale(1.02); }
    100% { transform: rotate(-2deg) scale(1); }
}

/* Специфичные анимации для каждого конверта с разными задержками */
.envelope-1-1:not(.opened) { animation: envelopeWiggle1-1 3s ease-in-out infinite; animation-delay: 0s; }
.envelope-1-2:not(.opened) { animation: envelopeWiggle1-2 3s ease-in-out infinite; animation-delay: 0.3s; }
.envelope-1-3:not(.opened) { animation: envelopeWiggle1-3 3s ease-in-out infinite; animation-delay: 0.6s; }
.envelope-1-4:not(.opened) { animation: envelopeWiggle1-4 3s ease-in-out infinite; animation-delay: 0.9s; }
.envelope-1-5:not(.opened) { animation: envelopeWiggle1-5 3s ease-in-out infinite; animation-delay: 1.2s; }
.envelope-1-6:not(.opened) { animation: envelopeWiggle1-6 3s ease-in-out infinite; animation-delay: 1.5s; }
.envelope-2-1:not(.opened) { animation: envelopeWiggle2-1 3s ease-in-out infinite; animation-delay: 0.2s; }
.envelope-2-2:not(.opened) { animation: envelopeWiggle2-2 3s ease-in-out infinite; animation-delay: 0.5s; }
.envelope-2-3:not(.opened) { animation: envelopeWiggle2-3 3s ease-in-out infinite; animation-delay: 0.8s; }
.envelope-2-4:not(.opened) { animation: envelopeWiggle2-4 3s ease-in-out infinite; animation-delay: 1.1s; }
.envelope-2-5:not(.opened) { animation: envelopeWiggle2-5 3s ease-in-out infinite; animation-delay: 1.4s; }
.envelope-2-6:not(.opened) { animation: envelopeWiggle2-6 3s ease-in-out infinite; animation-delay: 1.7s; }

/* Анимации с учетом базового поворота каждого конверта */
@keyframes envelopeRotate1-1 {
    0% { transform: rotate(11.955deg); }
    100% { transform: rotate(19.955deg); }
}

@keyframes envelopeRotate1-2 {
    0% { transform: rotate(16.834deg); }
    100% { transform: rotate(24.834deg); }
}

@keyframes envelopeRotate1-3 {
    0% { transform: rotate(8.832deg); }
    100% { transform: rotate(16.832deg); }
}

@keyframes envelopeRotate1-4 {
    0% { transform: rotate(5.234deg); }
    100% { transform: rotate(13.234deg); }
}

@keyframes envelopeRotate1-5 {
    0% { transform: rotate(18.654deg); }
    100% { transform: rotate(26.654deg); }
}

@keyframes envelopeRotate1-6 {
    0% { transform: rotate(8.274deg); }
    100% { transform: rotate(16.274deg); }
}

@keyframes envelopeRotate2-1 {
    0% { transform: rotate(18.112deg); }
    100% { transform: rotate(26.112deg); }
}

@keyframes envelopeRotate2-2 {
    0% { transform: rotate(6.491deg); }
    100% { transform: rotate(14.491deg); }
}

@keyframes envelopeRotate2-3 {
    0% { transform: rotate(11.242deg); }
    100% { transform: rotate(19.242deg); }
}

@keyframes envelopeRotate2-4 {
    0% { transform: rotate(11.169deg); }
    100% { transform: rotate(19.169deg); }
}

@keyframes envelopeRotate2-5 {
    0% { transform: rotate(19.051deg); }
    100% { transform: rotate(27.051deg); }
}

@keyframes envelopeRotate2-6 {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* Статичное состояние для открытых конвертов */
.envelope.opened {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

.envelope:hover {
    animation-play-state: paused !important;
    transform: rotate(0deg) scale(1.1) !important;
    z-index: 10;
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important;
    /* Оставляем браузерные эффекты для конвертов */
}

/* Left Envelopes - точные координаты из Figma */
.envelope-1-1 { left: 3.0%; top: 2.6%; }
.envelope-1-2 { left: 15.3%; top: 2.9%; }
.envelope-1-3 { left: 4.3%; top: 17.3%; }
.envelope-1-4 { left: 15.4%; top: 19.0%; }
.envelope-1-5 { left: 3.0%; top: 30.6%; }
.envelope-1-6 { left: 4.3%; top: 47.9%; }

/* Right Envelopes - точные координаты из Figma */
.envelope-2-1 { left: 66.1%; top: 0.0%; }
.envelope-2-2 { left: 76.1%; top: 3.3%; }
.envelope-2-3 { left: 87.9%; top: 2.9%; }
.envelope-2-4 { left: 76.0%; top: 19.0%; }
.envelope-2-5 { left: 88.3%; top: 18.6%; }
.envelope-2-6 { left: 86.4%; top: 39.4%; }

/* Специфичные hover эффекты для конвертов - все выпрямляются до 0 градусов */
.envelope-1-1:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-1-2:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-1-3:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-1-4:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-1-5:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-1-6:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }

.envelope-2-1:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-2-2:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-2-3:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-2-4:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-2-5:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }
.envelope-2-6:hover { animation-play-state: paused !important; transform: rotate(0deg) scale(1.1) !important; z-index: 10; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) !important; /* Оставляем браузерные эффекты */ }

/* Central Block - точные координаты из Figma */
.central-block {
    position: absolute;
    left: 29.9%; /* 574.21/1920 */
    top: 8.9%;   /* 96/1080 */
    width: 42.9%; /* 824.22/1920 */
    height: 65.0%; /* 702.44/1080 */
    z-index: 4; /* Четвертый слой (пирожное и звездочки) */
}

.central-photo {
    position: absolute;
    left: 13.3%; /* 109.7/824.22 */
    top: 9.5%;   /* 67/702.44 */
    width: 63.9%; /* 526.43/824.22 */
    height: 90.5%; /* 635.44/702.44 */
    object-fit: contain;
    z-index: 2; /* Шестой слой */
    outline: none; /* Убираем обводку при наведении */
    box-shadow: none; /* Убираем тень */
    filter: none; /* Убираем фильтры */
    opacity: 1; /* Фиксируем прозрачность */
    pointer-events: none; /* Отключаем все взаимодействия */
}


.star-1, .star-2 {
    position: absolute;
    object-fit: contain;
    animation: twinkle 2s ease-in-out infinite;
    transition: transform 0.3s ease;
    cursor: pointer;
    z-index: 3; /* Звезды поверх центральной фотографии */
}

.star-1:hover, .star-2:hover {
    transform: scale(1.2) !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.star-1 {
    left: 63.2%; /* 520.79/824.22 */
    top: 41.1%;  /* 289/702.44 */
    width: 12.7%; /* 104.41/824.22 */
    height: 15.2%; /* 106.46/702.44 */
    animation-delay: 0s;
}

.star-2 {
    left: 0.9%;  /* 7.79/824.22 */
    top: 78.2%;  /* 549.36/702.44 */
    width: 25.2%; /* 207.69/824.22 */
    height: 29.7%; /* 208.58/702.44 */
    transform: rotate(327.42deg);
    animation-delay: 1s;
}

.cake {
    position: absolute;
    left: 53.6%; /* 441.87/824.22 */
    top: 0.0%;   /* 0/702.44 */
    width: 20.8%; /* 171.35/824.22 */
    height: 28.8%; /* 202.48/702.44 */
    object-fit: contain;
    transform: rotate(17.91deg);
    animation: bounce 2s ease-in-out infinite;
    transition: transform 0.3s ease;
    cursor: pointer;
    z-index: 3; /* Пирожное поверх центральной фотографии */
}

.cake:hover {
    transform: rotate(17.91deg) scale(1.15) !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Letters */
.letter {
    position: absolute;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.letter:hover {
    transform: scale(1.1) !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Letters - точные координаты из Figma */
.letter-e { left: 0.0%; top: 32.4%; width: 14.3%; height: 15.2%; object-fit: contain; z-index: 3; /* Пятый слой */ }
.letter-n { left: 15.1%; top: 32.4%; width: 14.6%; height: 15.5%; object-fit: contain; z-index: 3; /* Пятый слой */ }
.letter-m { left: 68.0%; top: 82.2%; width: 15.6%; height: 16.6%; object-fit: contain; z-index: 3; /* Пятый слой */ }
.letter-i { left: 84.5%; top: 82.2%; width: 15.5%; height: 16.5%; object-fit: contain; z-index: 3; /* Пятый слой */ }

/* Happy Birthday Text - точные координаты из Figma */
.happy-birthday {
    position: absolute;
    left: 17.0%; /* 326/1920 */
    top: 70.8%;  /* 765/1080 */
    width: 67.6%; /* 1297.61/1920 */
    height: 23.3%; /* 252/1080 */
    z-index: 5; /* Третий слой */
}

.happy {
    position: absolute;
    left: 0.0%;  /* 0/1297.61 */
    top: 0.0%;   /* 0/252 */
    width: 41.2%; /* 535.28/1297.61 */
    height: 100%; /* 252/252 */
}

.birthday {
    position: absolute;
    left: 41.3%; /* 535.28/1297.61 */
    top: 11.8%;  /* 29.82/252 */
    width: 58.7%; /* 761.90/1297.61 */
    height: 84.1%; /* 212.02/252 */
}

.text-letter {
    position: absolute;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.text-letter:hover {
    transform: scale(1.1) !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Специфичные hover эффекты для букв с поворотами */
.a:hover { transform: rotate(341.977deg) scale(1.1) !important; outline: none !important; box-shadow: none !important; filter: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
.b:hover { transform: rotate(346.664deg) scale(1.1) !important; outline: none !important; box-shadow: none !important; filter: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
.i:hover { transform: rotate(356.177deg) scale(1.1) !important; outline: none !important; box-shadow: none !important; filter: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
.r:hover { transform: rotate(350.418deg) scale(1.1) !important; outline: none !important; box-shadow: none !important; filter: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
.d:hover { transform: rotate(352.156deg) scale(1.1) !important; outline: none !important; box-shadow: none !important; filter: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }

/* Happy letters - точные координаты из Figma */
.h { left: 0.0%; top: 11.1%; width: 32.1%; height: 72.2%; object-fit: contain; }
.a { left: 19.2%; top: 25.5%; width: 35.6%; height: 91.2%; object-fit: contain; transform: rotate(341.977deg); }
.p1 { left: 48.0%; top: 20.9%; width: 17.7%; height: 52.7%; object-fit: contain; }
.p2 { left: 61.2%; top: 20.9%; width: 22.4%; height: 70.9%; object-fit: contain; }
.y { left: 79.6%; top: 0.0%; width: 20.4%; height: 94.4%; object-fit: contain; }

/* Birthday letters - точные координаты из Figma */
.b { left: 0.0%; top: 0.0%; width: 21.7%; height: 90.0%; object-fit: contain; transform: rotate(346.664deg); }
.i { left: 17.0%; top: 5.2%; width: 13.1%; height: 89.2%; object-fit: contain; transform: rotate(356.177deg); }
.r { left: 23.0%; top: 1.9%; width: 21.4%; height: 86.8%; object-fit: contain; transform: rotate(350.418deg); }
.t { left: 41.1%; top: 17.9%; width: 16.9%; height: 63.8%; object-fit: contain; }
.h-birthday { left: 51.7%; top: 39.6%; width: 14.8%; height: 48.9%; object-fit: contain; }
.d { left: 64.5%; top: 20.8%; width: 13.6%; height: 60.9%; object-fit: contain; transform: rotate(352.156deg); }
.a-birthday { left: 73.9%; top: 6.1%; width: 12.6%; height: 93.6%; object-fit: contain; }
.y-birthday { left: 82.6%; top: 1.4%; width: 17.4%; height: 90.7%; object-fit: contain; }

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

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

@keyframes bounce {
    0%, 100% { transform: rotate(17.91deg) translateY(0px); }
    50% { transform: rotate(17.91deg) translateY(-5px); }
}

/* Letter Animation */
@keyframes letterSlideIn {
    0% {
        transform: translateY(50px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.letter-content {
    position: absolute;
    top: 60px;
    left: 83px;
    width: 505px;
    height: 571px;
    background: #ff4444;
    border-radius: 8px;
    padding: 40px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.8);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .container {
        height: 100vh;
        padding: 3vh 3vw;
    }
    
    .envelope {
        width: 8%;
        height: 12%;
    }
    
    .text-letter {
        font-size: 0.8em;
    }
    
    .left-flags, .right-flags {
        width: 40%;
        height: 30%;
    }
}

@media (max-width: 768px) {
    .container {
        height: 100vh;
        padding: 2vh 2vw;
    }
    
    .envelope {
        width: 7%;
        height: 10%;
    }
    
    .central-photo {
        border-radius: 10px;
    }
    
    .left-flags, .right-flags {
        width: 35%;
        height: 25%;
    }
    
    .left-flags {
        left: -5%;
    }
    
    .right-flags {
        left: 70%;
    }
    
    .central-block {
        left: 25%;
        width: 50%;
    }
    
    .happy-birthday {
        left: 10%;
        width: 80%;
    }
}

@media (max-width: 480px) {
    .container {
        height: 100vh;
        padding: 1vh 1vw;
    }
    
    .envelope {
        width: 6%;
        height: 8%;
    }
    
    .star-1, .star-2 {
        width: 8%;
        height: 6%;
    }
    
    .cake {
        width: 10%;
        height: 12%;
    }
    
    .letter {
        width: 10%;
        height: 8%;
    }
    
    .text-letter {
        width: 15% !important;
        height: 60% !important;
    }
    
    .left-flags, .right-flags {
        width: 30%;
        height: 20%;
    }
    
    .central-block {
        left: 20%;
        width: 60%;
    }
    
    .happy-birthday {
        left: 5%;
        width: 90%;
    }
}

/* Loading animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-text {
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Simple Modal Styles */
.open-letter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.open-letter-modal.show {
    opacity: 1;
}

.open-letter-modal.show {
    display: flex;
}

.envelope-system {
    width: 80vw;
    max-width: 600px;
    height: 80vh;
    max-height: 800px;
    background: transparent;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}


.envelope-open {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    background-image: url('c07e70faac624045c5e6be02d281e5e79b02ad22.png');
    background-size: cover;
    background-position: center;
}

.message-mask {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 75%;
}

.message-mask img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.text-placeholder {
    position: absolute;
    top: calc(15% - 80px);
    left: 15%;
    width: 65%;
    height: 85%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    color: black;
    text-align: left;
    overflow-y: scroll !important;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    max-height: 85%;
    background: transparent;
    cursor: text;
    user-select: text;
}

.text-content {
    width: 100%;
    line-height: 1.4;
    padding-bottom: 25vh; /* Добавляем четверть высоты экрана внизу для дополнительной прокрутки */
}

/* Стили для встроенных фотографий */
.inline-photo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* Стилизация скроллбара */
.text-placeholder::-webkit-scrollbar {
    width: 6px;
}

.text-placeholder::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.text-placeholder::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.text-placeholder::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.text-placeholder p {
    margin: 5px 0;
}

.envelope-open-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('144c2ec42d38de552a30aaf66a5bb8ef7336ae8b.png');
    background-size: cover;
    background-position: center;
    z-index: 10;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10000;
}

.close-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}