/* ==========================================================================
   1. Базовые стили и Магический Анимированный Фон
   ========================================================================== */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    overflow: hidden; /* Строгий запрет прокрутки экрана */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #311042, #111827);
    background-size: 400% 400%;
    animation: gradient-bg 15s ease infinite;
    position: relative;
}

/* Эффект мерцающих звезд */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    animation: stars-twinkle 6s ease-in-out infinite alternate;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   2. Стили для СМАРТФОНОВ (Умное сжатие элементов)
   ========================================================================== */
.card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.4);
    text-align: center;
    width: 90%; 
    max-width: 360px;
    max-height: 94vh; /* Карточка строго держится в рамках экрана */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    z-index: 10;
}

.card h1 {
    color: #1e1b4b;
    font-size: 1.25rem; /* Оптимальный размер для длинного текста */
    line-height: 1.3;
    margin: 0 0 8px 0;
    flex-shrink: 0; /* Заголовок не сжимается */
}

.card p {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 12px 0;
    flex-shrink: 0; /* Текст не сжимается */
}

/* Сказочный блок IP */
.ip-box {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 50%, #ff007f 100%);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0 0 14px 0;
    box-shadow: 0 8px 20px rgba(106, 17, 203, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.25);
    animation: magic-pulse 3s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0; /* Блок IP не сжимается */
}

.ip-box strong {
    color: #ffe600;
    text-shadow: 0 0 8px rgba(255, 230, 0, 0.6);
    font-size: 1.05rem;
}

/* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ДЛЯ КАРТИНКИ: */
.card img {
    width: 100%;
    max-height: 220px; /* Предел высоты для мобильных */
    height: auto;
    object-fit: contain; /* Пропорциональное вписывание */
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    
    flex-shrink: 1; /* Картинка уменьшится, если заголовку не хватит места! */
}

/* ==========================================================================
   3. Оптимизация для ПЛАНШЕТОВ (от 600px)
   ========================================================================== */
@media (min-width: 600px) {
    .card {
        padding: 28px;
        max-width: 440px;
        max-height: 88vh;
    }

    .card h1 {
        font-size: 1.5rem;
    }

    .card img {
        max-height: 280px;
    }
}

/* ==========================================================================
   4. Оптимизация для ДЕСКТОПОВ (от 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    .card {
        padding: 35px;
        max-width: 550px;
        border-radius: 30px;
    }

    .card h1 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .card p {
        font-size: 1.05rem;
        margin-bottom: 18px;
    }

    .ip-box {
        padding: 12px 28px;
        font-size: 1.05rem;
        margin-bottom: 20px;
    }

    .card img {
        max-height: 340px; /* На ПК места много, картинка будет крупной */
    }
}

/* ==========================================================================
   5. Анимации
   ========================================================================== */
@keyframes gradient-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes stars-twinkle {
    0% { opacity: 0.2; transform: scale(0.98); }
    50% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0.3; transform: scale(0.98); }
}

@keyframes magic-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   Бегающая мышка с хвостиком на заднем фоне (Носом вперёд)
   ========================================================================== */
.background-mouse {
    position: absolute;
    font-size: 2.8rem; /* Оптимальный размер мышки с хвостиком */
    user-select: none;
    pointer-events: none; /* Мышка полностью прозрачна для кликов и тапов */
    z-index: 2; /* Выше звёзд (z-index: 1), но строго под карточкой (z-index: 10) */
    
    /* Начальная точка — спрятана глубоко за левым краем экрана */
    left: -100px;
    top: 30%;
    
    /* Длина полного цикла приключений мышки — 24 секунды */
    animation: mouse-adventure 24s linear infinite;
}

/* 
   Анатомия бега: мышь '🐁' изначально смотрит ВЛЕВО. 
   Бежит ВПРАВО -> применяем scaleX(-1) 
   Бежит ВЛЕВО  -> возвращаем scaleX(1) 
*/
/* 
   ПОЛНОСТЬЮ ИСПРАВЛЕННАЯ АНИМАЦИЯ: 
   Мышь '🐁' изначально смотрит ВЛЕВО. 
   Движение ВПРАВО -> scaleX(-1) | Движение ВЛЕВО -> scaleX(1) 
*/
@keyframes mouse-adventure {
    /* ----------------------------------------------------------------------
       ПЕРВЫЙ ЗАБЕГ: Слева -> Направо -> Слева
       ---------------------------------------------------------------------- */
    /* 0% - 10%: Сидит в норке СЛЕВА, развёрнута ВПРАВО, готовая к старту */
    0% { left: -100px; top: 35%; transform: scaleX(-1) rotate(0deg); }
    10% { left: -100px; top: 35%; transform: scaleX(-1) rotate(0deg); }
    
    /* 14% - 22%: Выбегает СЛЕВА, бежит ВПРАВО (scaleX(-1)), нос по ветру */
    14% { left: 15%; top: 40%; transform: scaleX(-1) rotate(10deg); }
    17% { left: 45%; top: 52%; transform: scaleX(-1) rotate(-5deg); } /* Зашла под карточку */
    22% { left: 45%; top: 52%; transform: scaleX(-1) rotate(0deg); } /* Замерла, принюхивается */
    
    /* 26%: Испугалась! Мгновенно развернулась ВЛЕВО (scaleX(1)) и убегает назад */
    26% { left: 45%; top: 52%; transform: scaleX(1) rotate(0deg); } 
    30% { left: -100px; top: 30%; transform: scaleX(1) rotate(-15deg); } /* Убежала в левую норку */
    
    /* ----------------------------------------------------------------------
       МАГИЧЕСКИЙ ПЕРЕНОС: Мгновенное перемещение в правую норку (Скрыто)
       ---------------------------------------------------------------------- */
    30.01% { left: 110%; top: 70%; transform: scaleX(1) rotate(0deg); }
    50% { left: 110%; top: 70%; transform: scaleX(1) rotate(0deg); } /* Сидит в правой норке */
    
    /* ----------------------------------------------------------------------
       ВТОРОЙ ЗАБЕГ: Справа -> Налево -> Справа
       ---------------------------------------------------------------------- */
    /* 54% - 62%: Выбегает СПРАВА, бежит ВЛЕВО (scaleX(1)), носом вперёд */
    54% { left: 80%; top: 75%; transform: scaleX(1) rotate(10deg); }
    57% { left: 50%; top: 62%; transform: scaleX(1) rotate(-5deg); } /* Подкралась снизу */
    62% { left: 35%; top: 78%; transform: scaleX(1) rotate(0deg); } /* Замерла */
    
    /* 66%: Снова шумно! Мгновенно развернулась ВПРАВО (scaleX(-1)) и дала дёру */
    66% { left: 35%; top: 78%; transform: scaleX(-1) rotate(0deg); }
    70% { left: 110%; top: 85%; transform: scaleX(-1) rotate(15deg); } /* Скрылась в правой норке */
    
    /* 70.01% - 100%: Мгновенно возвращается на исходную позицию слева для нового круга */
    70.01% { left: -100px; top: 35%; transform: scaleX(-1) rotate(0deg); }
    100% { left: -100px; top: 35%; transform: scaleX(-1) rotate(0deg); }
}