/* ============================================================
   ОБЩИЕ СТИЛИ И ШРИФТЫ
   ============================================================ */
@font-face {
    font-family: "Machina";
    src: url("2F_MachinaOrto-Medium.ttf") format("truetype");
}

body {
    margin: 0;
    padding-top: 70px;
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #fff;
    /* Фон неба: Синий -> Темно-синий */
    background: linear-gradient(to bottom, #09143f 0%, #050a1f 100%) no-repeat fixed;
    background-color: #000; /* Запасной цвет */
    overflow-x: hidden;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px;
}

/* ============================================================
   ФОН (ЗДАНИЯ И АНИМАЦИЯ)
   ============================================================ */
.bg {
    position: fixed;
    top: 30vh; 
    left: 0;
    width: 100vw;
    height: 120vh; 
    background: url("city_vertical.gif") repeat-x;
    background-size: auto 100%; 
    animation: scrollBg 600s linear infinite;
    pointer-events: none;
    z-index: -1;
    will-change: background-position;
}

.bg::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(100% - 5px); 
    left: 0;
    width: 100vw;
    height: 200vh; 
    background: #000;
}

@keyframes scrollBg {
    from { background-position: 0 0; }
    to { background-position: -10000px 0; } 
}

/* ============================================================
   КНОПКИ И ССЫЛКИ
   ============================================================ */
button { 
    cursor: pointer; 
    padding: 6px 14px; 
    border-radius: 6px; 
    border: none; 
    background: #fff; 
    color: #000; 
    font-weight: bold; 
    transition: background 0.2s, transform 0.1s; 
    font-family: Arial, sans-serif;
    font-size: 16px; 
}

button:hover { background: #e0e0e0; }
button:active { transform: scale(0.98); }

a { color: #2ecc71; text-decoration: none; transition: 0.3s; }
a:hover { filter: brightness(1.2); }

.num-fix {
    font-family: inherit !important;
    font-size: 1.14em !important;
    line-height: 0;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ФОНА
   ============================================================ */
#nav-inner.mobile-mode ~ .bg, 
body:has(#nav-inner.mobile-mode) .bg {
    background-size: auto 80%; 
    top: 40vh; 
    height: 70vh;
    background-position: 0 bottom;
    animation: scrollBgMobile 600s linear infinite;
}

@keyframes scrollBgMobile {
    from { background-position: 0 bottom; }
    to { background-position: -10000px bottom; }
}

#nav-inner.mobile-mode ~ .bg::after,
body:has(#nav-inner.mobile-mode) .bg::after {
    top: calc(100% - 2px);
}