:root { --pink: #ff1493; --text: #ffb3d9; --glow: 0 0 15px #ff1493; }
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    background: #050508; color: var(--text); 
    font-family: 'Courier New', monospace; overflow: hidden; touch-action: manipulation;
}

.screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; }
.active { display: flex; flex-direction: column; }

/* Кнопка старта */
#start-gate { position: fixed; z-index: 1000; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; }
#start-gate button { padding: 20px; background: none; border: 1px solid var(--pink); color: var(--pink); cursor: pointer; font-size: 16px; box-shadow: var(--glow); }

/* Терминал */
#terminal-screen { padding: 20px; background: #000; justify-content: flex-start; overflow-y: auto; }
#terminal-output { line-height: 1.5; font-size: 14px; white-space: pre-wrap; text-shadow: 0 0 5px var(--text); }
#cursor { animation: blink 1s infinite; color: var(--pink); }

/* Игра и Финал */
#game-ui { position: absolute; top: 20px; width: 100%; text-align: center; pointer-events: none; font-size: 18px; text-shadow: var(--glow); z-index: 10; }
#star-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Контейнер финала */
#final-animation-container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; height: 300px; 
    display: none; 
}

/* Текстовое сердце */
.heart-particle {
    position: absolute; font-size: 12px; font-weight: bold; color: var(--pink);
    text-shadow: var(--glow); white-space: nowrap; pointer-events: none;
    animation: heartPulse 2s infinite alternate;
}

/* Символьная стрела (динамические элементы) */
.arrow-segment {
    position: absolute; color: var(--pink); text-shadow: var(--glow);
    font-size: 20px; font-weight: bold; pointer-events: none;
    z-index: 5; transform: translate(-50%, -50%);
    opacity: 0; animation: fadeInArrow 0.2s forwards;
}

#rocket { 
    position: absolute; font-size: 10px; line-height: 1; color: var(--pink);
    text-shadow: var(--glow); z-index: 10; margin: 0; pointer-events: none;
    transform-origin: center; left: -100px; bottom: -100px;
}

/* --- ТУМАННОСТЬ: АДАПТИВНЫЕ ФОТО ИСХОДНОГО РАЗМЕРА --- */
.photo-item {
    position: absolute;
    /* Убираем фиксированный размер, рамка будет облегать IMG */
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.3);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.photo-item img {
    /* Настройки миниатюры */
    display: block;
    max-width: 100px; /* Ограничиваем размер миниатюры по ширине */
    height: auto;    /* Сохраняем пропорции исходного фото */
    border: 2px solid var(--pink);
    border-radius: 5px;
}

@media (min-width: 768px) {
    .photo-item img { max-width: 150px; } /* На ПК миниатюры побольше */
}

.photo-item:hover {
    box-shadow: var(--glow);
    transform: scale(1.1) rotate(0deg) !important; /* Убираем наклон при наведении */
    z-index: 100;
}

/* Модальное окно */
#photo-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 1000;
    justify-content: center; align-items: center; flex-direction: column;
    padding: 20px; box-sizing: border-box; cursor: pointer;
}

#modal-img {
    max-width: 95%; max-height: 80vh;
    object-fit: contain;
    border: 2px solid var(--pink); box-shadow: var(--glow);
    border-radius: 5px;
    background: #000;
    animation: modalZoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#modal-caption { margin-top: 20px; color: var(--text); font-size: 16px; text-align: center; max-width: 80%; text-shadow: 0 0 5px var(--text); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes heartPulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.05); opacity: 1; } }
@keyframes modalZoom { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInArrow { from { opacity: 0; transform: translate(-50%, -50%) scale(2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }