:root {
    --bg-color: #f4f7f9;
    --text-color: #2c3e50;
    --btn-bg: #ffffff;
    --btn-text: #2c3e50;
    --accent-color: #0070f3;
    --footer-bg: #ffffff;
    --matrix-opacity: 0;
    
    /* ИНЖЕНЕРНАЯ СЕТКА ДЛЯ ДНЕВНОГО РЕЖИМА */
    --day-bg-pattern: linear-gradient(rgba(0, 112, 243, 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 112, 243, 0.04) 1px, transparent 1px);
    --day-bg-size: 24px 24px;
}

[data-theme="dark"] {
    --bg-color: #0d1117;
    --text-color: #ffffff;
    --btn-bg: #161b22;
    --btn-text: #ffffff;
    --accent-color: #00a3ff;
    --footer-bg: #161b22;
    --matrix-opacity: 0.45;
    
    --day-bg-pattern: none;
    --day-bg-size: auto;
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body {
    background-color: var(--bg-color); 
    background-image: var(--day-bg-pattern);
    background-size: var(--day-bg-size);
    color: var(--text-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.4s, color 0.4s; 
    overflow-x: hidden; perspective: 1500px;
}

/* ЧЕТКАЯ МАТРИЦА НА ФОНЕ */
#matrix-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; opacity: var(--matrix-opacity); pointer-events: none; transition: opacity 0.5s; }

.container { max-width: 850px; margin: 0 auto; padding: 20px; }
.header-content { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }

.about-text { text-align: center; margin-top: 120px; margin-bottom: 40px; }
.about-text h2 { font-size: 36px; margin-bottom: 15px; }
.about-text p { font-size: 22px; opacity: 0.95; line-height: 1.6; }

/* ДНЕВНАЯ КНОПКА СКИП */
.single-button-container { display: flex; justify-content: center; margin-top: 80px; }
.skip-btn {
    width: 100%; max-width: 500px; height: 100px; background: var(--accent-color); color: white;
    border: none; border-radius: 20px; font-size: 18px; font-weight: bold; cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 112, 243, 0.3); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.skip-btn:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 15px 30px rgba(0, 112, 243, 0.4); }

.hidden-zone { display: none !important; }

/* ТРИ ОТДЕЛЬНЫЕ КНОПКИ В СТРОКУ */
.joke-buttons-row { display: flex; flex-direction: row; gap: 15px; margin-top: 80px; }
.big-btn {
    flex: 1; height: 140px; background: var(--btn-bg); color: var(--btn-text); 
    border: 2px solid transparent; border-radius: 18px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: all 0.2s;
}
.big-btn:hover { background: var(--accent-color); color: white; transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,0.25); }

/* КРУПНЫЕ ЭМОДЗИ И КУРСОРЫ */
.btn-emoji { font-size: 48px; line-height: 1; }
.dota-icon-img { width: 54px; height: 54px; object-fit: contain; }
.btn-title { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }

.back-btn { border-color: #27ae60 !important; transition: all 0.3s ease !important; }
.back-btn:hover { background: #27ae60 !important; color: white !important; }
#btn-turbo { border-color: #e74c3c; }

.corner-footer { position: fixed; right: 25px; bottom: 25px; z-index: 100; background: var(--footer-bg); padding: 10px 20px; border-radius: 30px; border: 1px solid var(--accent-color); }
.corner-footer a { color: var(--text-color); text-decoration: none; font-weight: bold; margin: 0 10px; cursor: pointer; }

/* Картинка Доты на стартовой позиции слева за экраном */
#bara-char { 
    position: fixed; 
    width: 260px; 
    height: 260px; 
    object-fit: contain; 
    z-index: 10005; 
    pointer-events: none; 
    transform: translate(-350px, 45vh) scale(0.5); 
}

/* Анимация пролёта логотипа Доты через весь экран */
.run-bara-animation { 
    animation: dotaCharge 0.9s cubic-bezier(0.42, 0, 0.58, 1) forwards; 
}
@keyframes dotaCharge {
    0% { transform: translate(-350px, 30vh) scale(0.6) rotate(-20deg); }
    50% { transform: translate(45vw, 40vh) scale(1.4) rotate(45deg); }
    100% { transform: translate(120vw, 55vh) scale(1.7) rotate(180deg); }
}

/* Плавный переход для всех элементов, которые будут улетать */
.turbo-item { 
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* Координаты разлёта элементов в 3D после удара */
.turbo-activated header.turbo-item { transform: translate(-18vw, -15vh) rotateX(360deg) rotateY(-40deg); }
.turbo-activated .about-text.turbo-item { transform: translate(25vw, -12vh) rotateZ(30deg); }
.turbo-activated #btn-dvfu { transform: translate(-28vw, 25vh) rotateZ(-80deg); }
.turbo-activated #btn-sys { transform: translate(22vw, 30vh) rotateX(180deg); }
.turbo-activated .corner-footer.turbo-item { transform: translate(-30vw, -45vh) rotate(180deg); }

/* Подсветка кнопки управления во время хаоса */
.turbo-activated #btn-turbo { 
    animation: neonGlow 0.4s ease-in-out infinite alternate; 
    background: #e74c3c !important; 
    color: white !important; 
}
.turbo-activated #btn-back { 
    box-shadow: 0 0 15px #27ae60; 
}
@keyframes neonGlow { 
    from { box-shadow: 0 0 20px #e74c3c; } 
    to { box-shadow: 0 0 40px #ff007f; } 
}

/* Окна ошибок проги */
.hidden-modal { display: none !important; }
#hacker-modal { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 20000; 
    display: flex; align-items: center; justify-content: center; 
}
.modal-content { 
    background: #111; 
    color: #ff3333; 
    font-family: monospace; 
    width: 90%; max-width: 580px; 
    border-radius: 8px; 
    border: 1px solid #555; 
}
.modal-header { 
    background: #222; 
    padding: 12px; 
    display: flex; justify-content: space-between; 
    border-bottom: 1px solid #555; 
    color: #ff5555; 
    font-weight: bold; 
}
#close-modal { 
    background: none; border: none; 
    color: #ff5555; font-size: 24px; 
    cursor: pointer; 
}
#log-text { 
    padding: 25px; margin: 0; 
    max-height: 300px; overflow-y: auto; 
    white-space: pre-wrap; font-size: 14px; 
    color: #ff4444; line-height: 1.7; 
}

/* Летящий матан ДВФУ */
#math-rain-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }
.math-item { position: absolute; color: #e74c3c; font-weight: bold; font-family: monospace; font-size: 24px; animation: fall linear forwards; }
@keyframes fall { 0% { transform: translateY(-50px); opacity: 1; } 100% { transform: translateY(105vh); opacity: 0; } }

/* Синий экран смерти */
#crash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0000aa; color: white; font-family: monospace; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }