/* Основной стиль для .online-count */
.online-count {
    position: fixed;
    bottom: 5%;       /* Расположение от нижней части экрана */
    left: 5%;         /* Центрируем элемент по горизонтали */
    transform: translate(-50%, -50%);
    display: flex;     /* Используем flexbox для центрирования */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    padding: 20px 20px;  /* Внутренние отступы для большего размера */
    background-color: rgba(255, 223, 0, 0.8);  /* Цвет фона с прозрачностью */
    border-radius: 50%;  /* Полностью круглая форма */
    font-family: Arial, sans-serif;
    font-size: 14px;     /* Размер шрифта */
    font-weight: bold;   /* Жирный шрифт */
    color: #333;         /* Цвет текста */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Легкая тень */
    transition: none;
    width: 40px;     /* Минимальная ширина */
    height: 40px;    /* Минимальная высота */
    line-height: 1.4;    /* Межстрочный интервал */
    text-align: center;  /* Выравнивание текста по центру */
    z-index: 2;
}

/* Прозрачность */
.online-count.transparent {
    opacity: 0.7;  /* Прозрачность */
}

/* Для мобильных устройств */
@media (max-width: 1200px),
       (max-width: 768px) {
.online-count {
    
    bottom: 15%;       /* Расположение от нижней части экрана */
    left: 15%;         /* Центрируем элемент по горизонтали */
    padding: 20px 20px;  /* Внутренние отступы для большего размера */
    font-size: 10px;     /* Размер шрифта */
    width: 20px;     /* Минимальная ширина */
    height: 20px;    /* Минимальная высота */
    line-height: 1;    /* Межстрочный интервал */
   }
}
/* Для мобильных устройств в горизонтальном режиме */
@media (max-width: 1200px) and (orientation: landscape),
       (max-width: 768px) and (orientation: landscape) {
    .online-count {
    
    bottom: 3%;       /* Расположение от нижней части экрана */
    left: 30%;         /* Центрируем элемент по горизонтали */
    padding: 20px 20px;  /* Внутренние отступы для большего размера */
    font-size: 10px;     /* Размер шрифта */
    width: 15px;     /* Минимальная ширина */
    height: 15px;    /* Минимальная высота */
    line-height: 1;    /* Межстрочный интервал */
   }
}

