/* Стили для системы безопасности */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
    font-weight: 400;
}

/* Удалил геометрические формы, они сдвигали контент */

/* Анимация фона */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Защита от копирования */
body::selection {
    background: transparent;
}

body::-moz-selection {
    background: transparent;
}

.container {
    text-align: center;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    position: relative;
    z-index: 10;
}

.main-screen {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 50px 40px;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 25px 45px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: fadeInUp 1s ease-out;
    position: relative;
    overflow: hidden;
}

.main-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 90deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.05) 270deg,
        transparent 360deg
    );
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.main-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    pointer-events: none;
}

/* Логотип AntiCheat с улучшенными эффектами */
.anticheat-logo {
    position: relative;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
}

#logoImage {
    width: 120px;
    height: auto;
    filter: 
        drop-shadow(0 0 30px rgba(0, 150, 255, 0.4))
        drop-shadow(0 0 60px rgba(255, 255, 255, 0.2))
        drop-shadow(0 0 10px rgba(100, 200, 255, 0.6));
    animation: logoCloudflare 4s ease-in-out infinite;
    position: relative;
    z-index: 12;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(0, 150, 255, 0.05) 50%, 
        transparent 100%);
}

/* Множественные пульсирующие кольца */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border: 3px solid rgba(0, 150, 255, 0.4);
    border-radius: 50%;
    animation: pulseRingCloudflare 3s ease-out infinite;
    z-index: 11;
}

/* Дополнительные кольца для объемного эффекта */
.pulse-ring::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 2px solid rgba(255, 100, 255, 0.3);
    border-radius: 50%;
    animation: pulseRingCloudflare 3s ease-out infinite 0.5s;
}

.pulse-ring::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 1px solid rgba(100, 255, 100, 0.2);
    border-radius: 50%;
    animation: pulseRingCloudflare 3s ease-out infinite 1s;
}

/* Световые лучи */
.logo-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 150, 255, 0.3) 45deg,
        transparent 90deg,
        rgba(255, 100, 255, 0.3) 135deg,
        transparent 180deg,
        rgba(100, 255, 100, 0.3) 225deg,
        transparent 270deg,
        rgba(255, 255, 0, 0.3) 315deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: rotateRays 8s linear infinite;
    opacity: 0.6;
    z-index: 9;
}

@keyframes rotateRays {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Плавающие частицы */
.logo-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 8;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatParticle 6s ease-in-out infinite;
}

.particle:nth-child(1) {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.8) 0%, transparent 70%);
}

.particle:nth-child(2) {
    top: 70%;
    left: 80%;
    animation-delay: 1s;
    background: radial-gradient(circle, rgba(255, 100, 255, 0.8) 0%, transparent 70%);
}

.particle:nth-child(3) {
    top: 10%;
    left: 70%;
    animation-delay: 2s;
    background: radial-gradient(circle, rgba(100, 255, 100, 0.8) 0%, transparent 70%);
}

.particle:nth-child(4) {
    top: 80%;
    left: 20%;
    animation-delay: 3s;
    background: radial-gradient(circle, rgba(255, 255, 0, 0.8) 0%, transparent 70%);
}

.particle:nth-child(5) {
    top: 40%;
    left: 10%;
    animation-delay: 4s;
    background: radial-gradient(circle, rgba(255, 0, 150, 0.8) 0%, transparent 70%);
}

.particle:nth-child(6) {
    top: 60%;
    left: 90%;
    animation-delay: 5s;
    background: radial-gradient(circle, rgba(150, 255, 0, 0.8) 0%, transparent 70%);
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(-20px, -30px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(30px, -20px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translate(-15px, 25px) scale(1.1);
        opacity: 0.9;
    }
}

/* Основное свечение логотипа */
.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(0, 150, 255, 0.08) 30%,
        rgba(255, 100, 255, 0.06) 60%,
        transparent 100%
    );
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 10;
}

@keyframes glowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
}

.icon {
    font-size: 72px;
    margin-bottom: 25px;
    animation: iconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4));
    position: relative;
    z-index: 10;
}

/* Cloudflare-стиль анимация логотипа */
@keyframes logoCloudflare {
    0%, 100% { 
        transform: translateY(0) scale(1) rotateZ(0deg);
        filter: 
            drop-shadow(0 0 30px rgba(0, 150, 255, 0.4))
            drop-shadow(0 0 60px rgba(255, 255, 255, 0.2))
            drop-shadow(0 0 10px rgba(100, 200, 255, 0.6));
        opacity: 1;
    }
    25% {
        transform: translateY(-8px) scale(1.05) rotateZ(2deg);
        filter: 
            drop-shadow(0 0 40px rgba(255, 100, 0, 0.5))
            drop-shadow(0 0 80px rgba(255, 200, 0, 0.3))
            drop-shadow(0 0 15px rgba(255, 150, 50, 0.7));
        opacity: 0.95;
    }
    50% { 
        transform: translateY(-15px) scale(1.1) rotateZ(0deg);
        filter: 
            drop-shadow(0 0 50px rgba(255, 0, 150, 0.6))
            drop-shadow(0 0 100px rgba(255, 100, 255, 0.4))
            drop-shadow(0 0 20px rgba(200, 50, 255, 0.8));
        opacity: 0.9;
    }
    75% {
        transform: translateY(-8px) scale(1.05) rotateZ(-2deg);
        filter: 
            drop-shadow(0 0 40px rgba(0, 255, 100, 0.5))
            drop-shadow(0 0 80px rgba(100, 255, 200, 0.3))
            drop-shadow(0 0 15px rgba(50, 255, 150, 0.7));
        opacity: 0.95;
    }
}

/* Улучшенная анимация пульсирующих колец */
@keyframes pulseRingCloudflare {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.9;
        border-width: 4px;
        filter: blur(0px);
    }
    30% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0.6;
        border-width: 3px;
        filter: blur(0.5px);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
        border-width: 2px;
        filter: blur(1px);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        border-width: 0px;
        filter: blur(2px);
    }
}

/* Анимация интенсивного сканирования во время проверки */
@keyframes logoScan {
    0% {
        filter: 
            drop-shadow(0 0 25px rgba(255, 255, 255, 0.4))
            drop-shadow(0 0 50px rgba(0, 150, 255, 0.3));
        transform: scale(1) rotateY(0deg) rotateX(0deg);
        opacity: 1;
    }
    12.5% {
        filter: 
            drop-shadow(0 0 40px rgba(255, 50, 0, 0.7))
            drop-shadow(0 0 80px rgba(255, 100, 0, 0.5))
            drop-shadow(0 0 120px rgba(255, 200, 0, 0.3));
        transform: scale(1.08) rotateY(8deg) rotateX(3deg);
        opacity: 0.9;
    }
    25% {
        filter: 
            drop-shadow(0 0 60px rgba(0, 255, 255, 0.8))
            drop-shadow(0 0 120px rgba(100, 255, 255, 0.6))
            drop-shadow(0 0 180px rgba(200, 255, 255, 0.4));
        transform: scale(1.15) rotateY(0deg) rotateX(6deg);
        opacity: 0.85;
    }
    37.5% {
        filter: 
            drop-shadow(0 0 50px rgba(255, 0, 150, 0.7))
            drop-shadow(0 0 100px rgba(255, 100, 200, 0.5))
            drop-shadow(0 0 150px rgba(255, 200, 255, 0.3));
        transform: scale(1.08) rotateY(-8deg) rotateX(3deg);
        opacity: 0.9;
    }
    50% {
        filter: 
            drop-shadow(0 0 70px rgba(255, 0, 255, 0.9))
            drop-shadow(0 0 140px rgba(255, 100, 255, 0.7))
            drop-shadow(0 0 210px rgba(255, 200, 255, 0.5));
        transform: scale(1.2) rotateY(0deg) rotateX(-6deg);
        opacity: 0.8;
    }
    62.5% {
        filter: 
            drop-shadow(0 0 50px rgba(150, 255, 0, 0.7))
            drop-shadow(0 0 100px rgba(200, 255, 100, 0.5))
            drop-shadow(0 0 150px rgba(255, 255, 200, 0.3));
        transform: scale(1.08) rotateY(8deg) rotateX(-3deg);
        opacity: 0.9;
    }
    75% {
        filter: 
            drop-shadow(0 0 60px rgba(255, 255, 0, 0.8))
            drop-shadow(0 0 120px rgba(255, 255, 100, 0.6))
            drop-shadow(0 0 180px rgba(255, 255, 200, 0.4));
        transform: scale(1.15) rotateY(0deg) rotateX(6deg);
        opacity: 0.85;
    }
    87.5% {
        filter: 
            drop-shadow(0 0 40px rgba(0, 255, 150, 0.7))
            drop-shadow(0 0 80px rgba(100, 255, 200, 0.5))
            drop-shadow(0 0 120px rgba(200, 255, 255, 0.3));
        transform: scale(1.08) rotateY(-8deg) rotateX(-3deg);
        opacity: 0.9;
    }
    100% {
        filter: 
            drop-shadow(0 0 25px rgba(255, 255, 255, 0.4))
            drop-shadow(0 0 50px rgba(0, 150, 255, 0.3));
        transform: scale(1) rotateY(0deg) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes iconFloat {
    0%, 100% { 
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4));
    }
    50% { 
        transform: translateY(-8px) scale(1.05);
        filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.6));
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(40px) scale(0.95);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

h1 {
    font-size: 36px;
    margin-bottom: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 255, 255, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    position: relative;
    z-index: 10;
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv02';
}

.subtitle {
    font-size: 17px;
    opacity: 0.9;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10;
    color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2) inset,
        0 1px 2px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        #00d4ff 0%, 
        #0099cc 25%, 
        #0066ff 50%, 
        #0033cc 75%, 
        #001199 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: progressShimmer 2.5s infinite;
    box-shadow: 
        0 0 15px rgba(0, 212, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes progressShimmer {
    0% { 
        background-position: -200% 0;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
    }
    100% { 
        background-position: 200% 0;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    }
}

.continue-btn {
    background: linear-gradient(45deg, #2563EB 0%, #06D6A0 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding: 20px 48px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 15px rgba(37, 99, 235, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    z-index: 10;
    animation: buttonGlow 3s ease-in-out infinite;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.continue-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: left 0.6s ease;
}

.continue-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 0 25px rgba(37, 99, 235, 0.7),
        0 0 15px rgba(6, 214, 160, 0.4),
        0 6px 25px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    background: linear-gradient(45deg, #3B82F6 0%, #06D6A0 100%);
}

.continue-btn:hover::before {
    left: 100%;
}

.continue-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

.continue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    animation: none;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(37, 99, 235, 0.5),
            0 4px 20px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    50% {
        box-shadow: 
            0 0 20px rgba(37, 99, 235, 0.6),
            0 0 10px rgba(6, 214, 160, 0.3),
            0 5px 25px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }
}

.security-badge {
    margin-top: 40px;
    font-size: 14px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 10;
    animation: badgeGlow 4s ease-in-out infinite;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #ffffff;
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.25);
    }
}

.status-icon {
    display: inline-block;
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hidden-elements {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
}

/* Защита от инспектора */
.devtools-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff0000;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 9999;
    animation: flash 0.5s infinite;
}

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

/* Улучшенная мобильная адаптация */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .main-screen {
        padding: 35px 25px;
        border-radius: 20px;
    }
    
    .icon {
        font-size: 60px;
        margin-bottom: 20px;
    }
    
    h1 {
        font-size: 28px;
        margin-bottom: 12px;
    }
    
    .subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .continue-btn {
        padding: 16px 35px;
        font-size: 17px;
        min-width: 160px;
    }
    
    .security-badge {
        font-size: 13px;
        padding: 10px 16px;
        margin-top: 30px;
    }
    
    .progress-bar {
        margin: 20px 0;
    }
}

/* Дополнительная защита */
::selection {
    background: transparent;
}

::-moz-selection {
    background: transparent;
}

/* Скрытие скроллбаров */
::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Дополнительные эффекты для красоты */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

/* Улучшенные тени для глубины */
.container {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* Дополнительные состояния кнопки */
.continue-btn.success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 50%, #3d8b40 100%);
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
    }
}

/* Стили для блокировок */
.blocked-screen {
    animation: blockShake 0.5s ease-in-out infinite;
}

@keyframes blockShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}