/* БАЗОВІ НАЛАШТУВАННЯ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
    width: 100%; height: 100%; overflow: hidden;
    background-color: #0a0a0a; color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- ЕКРАН 1: ТЕРМІНАЛ (Тепер червоний) --- */
#terminal-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #050505;
    background-image: 
        linear-gradient(rgba(255, 45, 85, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 45, 85, 0.05) 1px, transparent 1px);
    background-size: 25px 25px;
    background-position: center center;
    color: #ff2d55; padding: 20px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 20;
    transition: opacity 1.5s ease;
}

#terminal-screen::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
    box-shadow: inset 0 0 80px rgba(255, 45, 85, 0.12);
    pointer-events: none; z-index: 1;
}

.scanner-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background-color: rgba(255, 45, 85, 0.4);
    box-shadow: 0 0 15px rgba(255, 45, 85, 0.8), 0 0 50px rgba(255, 45, 85, 0.5);
    animation: scan 4s linear infinite;
    opacity: 0.8; pointer-events: none; z-index: 0;
}

@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }

/* СТИЛІ ДЛЯ ТЕКСТУ ТА ПАНЕЛІ ВВОДУ */
#typing-text, .auth-box {
    z-index: 10; position: relative; text-shadow: 0 0 5px rgba(255, 45, 85, 0.5);
}
#typing-text {
    font-size: clamp(0.8rem, 3vw, 1rem); line-height: 1.5; margin-bottom: 30px;
    width: 90%; max-width: 400px; min-height: 80px;
    background: rgba(0, 0, 0, 0.7); padding: 15px; border-radius: 8px;
}
.auth-box {
    display: flex; flex-direction: column; width: 90%; max-width: 320px;
    opacity: 0; transition: opacity 1s ease;
    background: rgba(0, 0, 0, 0.7);
    padding: 25px; border-radius: 12px; border: 1px solid rgba(255, 45, 85, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* СТИЛІ ВВОДУ ТА КНОПКИ */
input {
    background: rgba(255, 45, 85, 0.05); border: 1px solid #ff2d55; color: #ff2d55;
    padding: 12px; font-family: inherit; font-size: 1rem; margin-bottom: 15px;
    outline: none; text-align: center; letter-spacing: 2px;
}
input::placeholder { color: rgba(255, 45, 85, 0.4); }

button {
    background: rgba(255, 45, 85, 0.15); border: 1px solid #ff2d55; color: #ff2d55;
    padding: 12px; font-family: inherit; font-size: 1rem; font-weight: bold;
    cursor: pointer; transition: all 0.3s ease;
}
button:active, button:hover {
    background: #ff2d55; color: #0a0a0a; box-shadow: 0 0 15px rgba(255, 45, 85, 0.5);
}
#error-msg { color: white; font-size: 0.8rem; margin-top: 10px; text-align: center; min-height: 20px; }

/* ДЕКОРАТИВНІ ЕЛЕМЕНТИ (ФОН) */
.hud-element {
    position: absolute; color: #ff2d55; font-size: 0.7rem; opacity: 0.7; 
    pointer-events: none; letter-spacing: 1px; line-height: 1.4; z-index: 5;
}
.top-right { top: 15px; right: 15px; text-align: right; }
.bottom-left { bottom: 15px; left: 15px; text-align: left; }
.hud-element::after { content: " _"; animation: blink-cursor 1.5s infinite; }

@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

#matrix-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 1; pointer-events: none; opacity: 0.25;
}
.matrix-column {
    position: absolute; top: -100%; color: #ff2d55; font-size: 0.85rem;
    line-height: 1.2; text-align: center; width: 20px; animation: fall linear infinite;
    text-shadow: 0 0 5px #ff2d55;
}

/* Анімація для падаючих сердечок на фоні */
.heart-drop {
    position: absolute; top: -10%; color: #ff2d55;
    opacity: 0.6; text-shadow: 0 0 10px rgba(255, 45, 85, 0.8);
    pointer-events: none; animation: fall-heart linear infinite;
}
@keyframes fall { 0% { transform: translateY(-10%); } 100% { transform: translateY(110vh); } }
@keyframes fall-heart { 
    0% { transform: translateY(-10%) rotate(0deg); } 
    100% { transform: translateY(110vh) rotate(360deg); } 
}

/* --- ЕКРАН 2: СЕРЦЕ ТА СЛАЙДШОУ --- */
#heart-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; opacity: 0; display: none; cursor: pointer;
}
#particle-container {
    position: absolute; width: 100%; height: 100%; pointer-events: none;
    animation: pulse 2s infinite ease-in-out;
}
.particle {
    position: absolute; white-space: nowrap; color: #ff2d55; opacity: 0.45;
    transition: all 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 4px rgba(255, 45, 85, 0.6); pointer-events: none;
}
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

#slideshow-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; max-width: 260px; text-align: center; font-family: 'Helvetica Neue', sans-serif; pointer-events: none; 
}
.slide-content {
    opacity: 0; transform: scale(0.9); transition: all 0.6s ease;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 100%;
}
.slide-content.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.slide-img {
    width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px;
    box-shadow: 0 5px 20px rgba(255, 45, 85, 0.3); margin-bottom: 12px;
    border: 2px solid rgba(255, 45, 85, 0.4);
}
.slide-text { color: #fff; font-size: clamp(0.85rem, 3.5vw, 1.1rem); line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.9); }
.final-text { color: #fff; font-size: clamp(0.9rem, 4.5vw, 1.2rem); line-height: 1.5; text-shadow: 0 0 10px rgba(255, 45, 85, 0.8); font-weight: bold; }

#tap-hint {
    position: absolute; bottom: 8%; width: 100%; text-align: center;
    color: rgba(255,255,255,0.4); font-size: 0.75rem; letter-spacing: 1px;
    animation: blink 2s infinite; pointer-events: none;
}
@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } }
.hidden { display: none !important; }

/* Робимо текст серця м'яким і ніжним, без сильного неону */
.particle {
    color: #ff2d55 !important; /* Повертаємо твій фірмовий приємний червоний колір */
    text-shadow: 0 0 6px rgba(255, 45, 85, 0.6) !important; /* Залишаємо лише одне легке світіння */
    font-weight: normal !important; /* Прибираємо "жирність" літер */
    opacity: 0.75 !important; /* Робимо текст трошки прозорим, щоб він не "кричав" */
}


/* --- АДАПТИВНІ РОЗМІРИ ФОТО ТА ТЕКСТУ --- */

/* 1. Для комп'ютерів (великі екрани) */
@media (min-width: 768px) {
    #slideshow-container {
        max-width: 430px !important; /* Блок значно ширший */
    }
    .slide-img {
        max-height: 300px !important; /* Фотографії вищі та більші */
    }
    .slide-text { 
    color: #fff; 
    font-size: clamp(0.85rem, 3.5vw, 1.1rem); 
    line-height: 1.3; 
    /* Додаємо тонку кольорову обводку: 1 піксель товщини */
    -webkit-text-stroke: 0.5px #ff2d55; 
    text-shadow: 0 3px 6px rgba(0,0,0,0.9); 
}

.final-text { 
    color: #fff; 
    font-size: clamp(0.9rem, 4.5vw, 1.2rem); 
    line-height: 1.5; 
    font-weight: bold; 
    /* Для фінального тексту робимо обводку трохи товщою */
    -webkit-text-stroke: 0.8px #ff2d55; 
    text-shadow: 0 0 15px rgba(255, 45, 85, 0.9); 
}
}

/* 2. Для телефонів (малі екрани) */
@media (max-width: 767px) {
    #slideshow-container {
        max-width: 240px !important; /* Робимо блок трохи меншим, ніж був */
    }
    .slide-img {
        max-height: 160px !important; /* Фото трохи менші, щоб точно влізли в серце */
    }
}