/* ===== ПОЛНАЯ АДАПТАЦИЯ ДЛЯ ВСЕХ РАЗМЕРОВ ЭКРАНОВ ===== */

/* 4K и очень большие мониторы (2560px и выше) */
@media only screen and (min-width: 2560px) {
    .header {
        height: 80px !important;
        padding: 0 60px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 12px 35px !important;
        margin-right: 50px !important;
    }
    
    .logotype span {
        font-size: 20px !important;
    }
    
    .header .online {
        padding: 12px 35px !important;
        font-size: 16px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 12px 35px !important;
        font-size: 16px !important;
    }
    
    .title {
        padding: 25px 50px !important;
    }
    
    .title .rooms {
        margin-right: 25px !important;
    }
    
    .title .rooms ul {
        gap: 12px !important;
    }
    
    .title .rooms ul li a {
        height: 45px !important;
        padding: 10px 25px !important;
        font-size: 16px !important;
    }
}

/* Full HD+ мониторы (1920px - 2559px) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
    .header {
        height: 76px !important;
        padding: 0 50px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 11px 32px !important;
        margin-right: 45px !important;
    }
    
    .logotype span {
        font-size: 18px !important;
    }
    
    .header .online {
        padding: 11px 32px !important;
        font-size: 15px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 11px 32px !important;
        font-size: 15px !important;
    }
    
    .title {
        padding: 22px 45px !important;
    }
    
    .title .rooms {
        margin-right: 22px !important;
    }
    
    .title .rooms ul {
        gap: 10px !important;
    }
    
    .title .rooms ul li a {
        height: 45px !important;
        padding: 10px 25px !important;
        font-size: 16px !important;
    }
}

/* Большие мониторы (1440px - 1919px) */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
    .header {
        height: 74px !important;
        padding: 0 45px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 10px 30px !important;
        margin-right: 40px !important;
    }
    
    .logotype span {
        font-size: 17px !important;
    }
    
    .header .online {
        padding: 10px 30px !important;
        font-size: 14px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 10px 30px !important;
        font-size: 14px !important;
    }
    
    .title {
        padding: 20px 40px !important;
    }
    
    .title .rooms {
        margin-right: 20px !important;
    }
    
    .title .rooms ul {
        gap: 8px !important;
    }
    
    .title .rooms ul li a {
        height: 42px !important;
        padding: 8px 20px !important;
        font-size: 15px !important;
    }
}

/* Стандартные мониторы (1200px - 1439px) */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .header {
        height: 72px !important;
        padding: 0 40px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 10px 28px !important;
        margin-right: 35px !important;
    }
    
    .logotype span {
        font-size: 16px !important;
    }
    
    .header .online {
        padding: 10px 28px !important;
        font-size: 14px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 10px 28px !important;
        font-size: 14px !important;
    }
    
    .title {
        padding: 18px 35px !important;
    }
    
    .title .rooms {
        margin-right: 18px !important;
    }
    
    .title .rooms ul {
        gap: 6px !important;
    }
    
    .title .rooms ul li a {
        height: 40px !important;
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}

/* Средние мониторы и ноутбуки (992px - 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header {
        height: 70px !important;
        padding: 0 35px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 9px 25px !important;
        margin-right: 30px !important;
    }
    
    .logotype span {
        font-size: 15px !important;
    }
    
    .header .online {
        padding: 9px 25px !important;
        font-size: 13px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 9px 25px !important;
        font-size: 13px !important;
    }
    
    .title {
        padding: 16px 30px !important;
    }
    
    .title .rooms {
        margin-right: 16px !important;
    }
    
    .title .rooms ul {
        gap: 5px !important;
    }
    
    .title .rooms ul li a {
        height: 38px !important;
        padding: 6px 18px !important;
        font-size: 13px !important;
    }
}

/* Планшеты в альбомной ориентации (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header {
        height: 68px !important;
        padding: 0 30px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 8px 22px !important;
        margin-right: 25px !important;
    }
    
    .logotype span {
        font-size: 14px !important;
    }
    
    .header .online {
        padding: 8px 22px !important;
        font-size: 12px !important;
    }
    
    .header .online .t {
        display: none !important; /* Скрываем слово "Онлайн:" */
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 8px 22px !important;
        font-size: 12px !important;
    }
    
    .group a span {
        display: none !important; /* Скрываем текст, оставляем только иконку */
    }
    
    .title {
        padding: 14px 25px !important;
    }
    
    .title .rooms {
        margin-right: 14px !important;
    }
    
    .title .rooms ul {
        gap: 4px !important;
    }
    
    .title .rooms ul li a {
        height: 36px !important;
        padding: 6px 16px !important;
        font-size: 12px !important;
    }
}

/* Планшеты в портретной ориентации (576px - 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header {
        height: 64px !important;
        padding: 0 25px !important;
        flex-wrap: nowrap !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 7px 18px !important;
        margin-right: 20px !important;
    }
    
    .logotype span {
        font-size: 13px !important;
    }
    
    .header .online {
        padding: 7px 18px !important;
        font-size: 11px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 7px 18px !important;
        font-size: 11px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .title {
        padding: 12px 20px !important;
    }
    
    .title .rooms {
        margin-right: 12px !important;
    }
    
    .title .rooms ul {
        gap: 3px !important;
    }
    
    .title .rooms ul li a {
        height: 34px !important;
        padding: 5px 14px !important;
        font-size: 11px !important;
    }
}

/* Большие смартфоны (414px - 575px) */
@media only screen and (min-width: 414px) and (max-width: 575px) {
    .header {
        height: 60px !important;
        padding: 0 20px !important;
        flex-wrap: nowrap !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 6px 15px !important;
        margin-right: 15px !important;
    }
    
    .logotype span {
        font-size: 12px !important;
    }
    
    .header .online {
        padding: 6px 15px !important;
        font-size: 10px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .header .online i {
        padding-right: 5px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 6px 15px !important;
        font-size: 10px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .group a i {
        padding-right: 0 !important;
    }
    
    .title {
        padding: 10px 15px !important;
    }
    
    .title .rooms {
        margin-right: 10px !important;
    }
    
    .title .rooms ul {
        gap: 2px !important;
    }
    
    .title .rooms ul li a {
        height: 32px !important;
        padding: 4px 12px !important;
        font-size: 10px !important;
    }
}

/* Маленькие смартфоны (360px - 413px) */
@media only screen and (min-width: 360px) and (max-width: 413px) {
    .header {
        height: 56px !important;
        padding: 0 15px !important;
        flex-wrap: nowrap !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 5px 12px !important;
        margin-right: 10px !important;
    }
    
    .logotype span {
        font-size: 11px !important;
    }
    
    .header .online {
        padding: 5px 12px !important;
        font-size: 9px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .header .online i {
        padding-right: 3px !important;
        font-size: 8px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 5px 12px !important;
        font-size: 9px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .group a i {
        padding-right: 0 !important;
        font-size: 8px !important;
    }
    
    .title {
        padding: 8px 12px !important;
    }
    
    .title .rooms {
        margin-right: 8px !important;
    }
    
    .title .rooms ul {
        gap: 1px !important;
    }
    
    .title .rooms ul li a {
        height: 30px !important;
        padding: 3px 10px !important;
        font-size: 9px !important;
    }
}

/* Очень маленькие смартфоны (до 359px) */
@media only screen and (max-width: 359px) {
    .header {
        height: 52px !important;
        padding: 0 10px !important;
        flex-wrap: nowrap !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 4px 8px !important;
        margin-right: 8px !important;
    }
    
    .logotype span {
        font-size: 10px !important;
    }
    
    .header .online {
        padding: 4px 8px !important;
        font-size: 8px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .header .online i {
        padding-right: 2px !important;
        font-size: 7px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 4px 8px !important;
        font-size: 8px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .group a i {
        padding-right: 0 !important;
        font-size: 7px !important;
    }
    
    .title {
        padding: 6px 8px !important;
    }
    
    .title .rooms {
        margin-right: 6px !important;
    }
    
    .title .rooms ul {
        gap: 0px !important;
    }
    
    .title .rooms ul li a {
        height: 28px !important;
        padding: 2px 8px !important;
        font-size: 8px !important;
    }
}

/* Горизонтальная ориентация мобильных устройств */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .header {
        height: 48px !important;
        padding: 0 15px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 3px 8px !important;
        margin-right: 8px !important;
    }
    
    .logotype span {
        font-size: 9px !important;
    }
    
    .header .online {
        padding: 3px 8px !important;
        font-size: 7px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .header .online i {
        padding-right: 2px !important;
        font-size: 6px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 3px 8px !important;
        font-size: 7px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .group a i {
        padding-right: 0 !important;
        font-size: 6px !important;
    }
    
    .title {
        padding: 4px 10px !important;
    }
    
    .title .rooms {
        margin-right: 4px !important;
    }
    
    .title .rooms ul {
        gap: 1px !important;
    }
    
    .title .rooms ul li a {
        height: 26px !important;
        padding: 2px 6px !important;
        font-size: 7px !important;
    }
}

/* Специальные правила для мобильных устройств ≤430px */
@media only screen and (max-width: 430px) {
    .header {
        height: 50px !important;
        padding: 0 12px !important;
    }
    
    .logotype {
        display: block !important;
        visibility: visible !important;
        padding: 3px 6px !important;
        margin-right: 6px !important;
    }
    
    .logotype span {
        font-size: 9px !important;
    }
    
    .header .online {
        padding: 3px 6px !important;
        font-size: 7px !important;
    }
    
    .header .online .t {
        display: none !important;
    }
    
    .header .online i {
        padding-right: 1px !important;
        font-size: 6px !important;
    }
    
    .group {
        display: block !important;
        visibility: visible !important;
    }
    
    .group a {
        padding: 3px 6px !important;
        font-size: 7px !important;
    }
    
    .group a span {
        display: none !important;
    }
    
    .group a i {
        padding-right: 0 !important;
        font-size: 6px !important;
    }
    
    .title {
        padding: 5px 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .title .flex {
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        order: 1 !important;
    }
    
    .title .rooms {
        width: 100% !important;
        margin-right: 0 !important;
        order: 2 !important;
    }
    
    .title .rooms ul {
        justify-content: space-between !important;
        gap: 1px !important;
    }
    
    .title .rooms ul li {
        width: 33.3% !important;
    }
    
    .title .rooms ul li a {
        height: 26px !important;
        padding: 2px 4px !important;
        font-size: 7px !important;
        flex-direction: column !important;
        line-height: 1.1 !important;
    }
    
    .title .rooms .name {
        font-size: 6px !important;
        margin-bottom: 1px !important;
    }
    
    .title .rooms b {
        font-size: 5px !important;
    }
}

/* ===== СУЩЕСТВУЮЩИЕ МЕДИА-ЗАПРОСЫ ИЗ ОРИГИНАЛЬНОГО ФАЙЛА ===== */

@media only screen and (max-width: 1675px) {
    main {width: 100%;}
    .chat {height: 375px;right: 45px;border-radius: 7px 7px 0px 0px;}
    .chat .open {display: block;visibility: visible;top: -38px;transform: rotate(90deg);left: calc(50% - 25px);}
    .chat-closed .chat {transform: translateY(375px);}
    .chat.fixed {height: 375px;}
    .game-coin .top .left {flex-wrap: wrap;justify-content: center;}
    .game-coin .top .left .players {width: 100%;justify-content: center;margin-bottom: 15px;flex-wrap: wrap;height: auto;}
    .game-coin .top {padding-bottom: 15px;}
    .game-coin .top .avatars {margin-right: 25px;}
}

@media only screen and (max-width: 1375px) {
    .logotype {display: none;visibility: hidden;}
    .game-content .top-battle {flex-wrap: wrap;}
    .game-content .battle-slider.info {width: 100%;}
    .game-content .bg-2 {margin: 10px 0px;}
    .game-content .battle-slider.battle {width: 90%;}
}

@media only screen and (max-width: 1225px) {
    .game-content .bets .bet {flex-wrap: wrap;}
    .game-content .bets .left {width: 100%;}
    .game-content .bets .bet .date {padding: 2px 10px;background: #3c4358;border-radius: 50px;font-size: 13px;position: absolute;top: -10px;right: 10px;}
}

@media only screen and (max-width: 1185px) {
    .game-content .game-progress .progress {transform: scale(0.85);}
    .game-content .game-progress {margin-right: 20px;}
}

@media only screen and (max-width: 1125px) {
    .leftside {transform: translateX(-300px);background-color: #3a4154;}
    .container {width: 100%;}
    .header {padding-left: 0;}
    .leftside .open {display: block;visibility: visible;}
}

@media only screen and (max-width: 925px) {
    .rooms ul li a .name {display: none;visibility: hidden;}
    .rooms ul li {margin: 0;}
    .rooms {margin-right: 0;}
    .game-content.pvp .create-game {flex-wrap: wrap;}
    .game-content.pvp .create-game input {margin-bottom: 15px;width: 100%;}
    .game-content.pvp .create-game ul {margin-bottom: 15px;}
    .game-content.pvp .create-game a.create {width: 100%;}
    .game-content.pvp .create-game {padding: 20px 30px;}
    .refferal_content .block {width: 100%;}
    .refferal_content .block .input input[type='text'] {width: 70%;}
}

@media only screen and (max-width: 825px) {
    .game-content .game-progress {width: 100%;margin-right: 0;flex-wrap: nowrap;justify-content: space-between;align-items: center;margin-bottom: 30px;}
    .game-content .game-progress .progress {margin-bottom: 0;}
    .game-content {flex-wrap: wrap;}
    .content .slider {margin-bottom: 15px;}
    .alert {margin-bottom: 20px!important;}
    .game-content .users-in-game:after {background: linear-gradient(to left, #753d3d00,#353a4c);}
    .game-content .users-in-game:before {background: linear-gradient(to right, #753d3d00,#353a4c);}
    .game-content .battle-slider.battle {width: 100%;}
    .game-content .battle-slider.hist {width: 100%;}
    .game-content .bg-2 {height: auto;}
    .game-content .battle-slider .history {width: 100%;height: 20px;}
    .game-content .battle-slider .history .hist {width: 45px;height: 17px;margin: 3px 3.6px;}
    .game-content .battle-slider .history:before {content: none;}
    .game-content .bets {flex-wrap: wrap;}
    .game-content.battle .bets .team {width: 100%;}
    .game-coin .top .left .players {width: 100%;}
    .game-coin .top .left .status {width: 100%;}
    .game-coin .top .left .block {padding: 10px 20px; min-height: 55px;}
    .game-coin .top .left .players .vs {margin-right: 20px;}

    .games-active .game-coin .top .left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .games-active .game-coin .top .left > div {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 675px) {
    .game-content .game-progress {flex-wrap: wrap; justify-content: center;}
    .game-content .game-progress .block {width: 100%;}
    .game-content .game-progress {margin-bottom: 50px;}
    .game-coin .top .left .user, .game-coin .top .left .vs {width: 100%;margin: 10px 0px;}
    .group {display: none;visibility: hidden;}
    .dice .dice-loop .left {margin-right: 0;width: 100%;}
    .dice .dice-loop .right {width: 100%;}
    .game-coin .top .left .user {margin-right: 0;}
    .game-coin .top .left .user .info span {max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .game-coin .top .left .block {padding: 10px 15px;}
    .game-coin .top .view {width: 100%;margin-top: 10px;}
    .game-coin .top .view a {width: 100%;}
    .game-coin .top .left .players .vs {margin-right: 15px;}

    .games-active .game-coin .top .left > div:first-child {
        min-width: 250px !important;
    }
}

@media only screen and (max-width: 610px) {
    .header .left {display: flex;justify-content: space-between;}
    .header {padding-right: 20px;}
    .alert {line-height: 25px;padding: 10px 25px;}
    .content {padding: 20px;}
    .refferal_content .block .input input[type='text'] {width: 100%;margin-bottom: 10px;}
}

@media only screen and (max-width: 510px) {
    .game-content .bets .left {flex-wrap: wrap;justify-content: center;line-height: 30px;}
    .game-content .bets .left div {width: 100%;text-align: center;}
    .game-content .bets .left .ava {margin-bottom: 5px;}
    .game-content .bets .bet {padding: 15px 0px;}
    .game-content .bets .fair-game {line-height: 25px;}
    .chat {width: 100%;right: 0;border-radius: 0;}
    .chat .open {right: 25px;left: inherit;}
    .chat-mobile .chat {height: calc(100% - 72px);position: fixed;z-index: 9999;}
    .chat-mobile .chat .open {top: -10px;border-radius: 0px 5px 5px 0px;}
    .chat-mobile .chat.fixed {height: 100%;}
    
    .chat-input:focus {
        position: relative !important;
        z-index: 10000 !important;
    }
    
    .chat-mobile .chat {
        height: calc(100vh - 72px) !important;
        min-height: 300px !important;
        max-height: calc(100vh - 72px) !important;
    }
    
    body.chat-input-focused .chat {
        position: fixed !important;
        height: calc(100vh - 72px) !important;
        transform: none !important;
    }
    .refferal_content .block .info {flex-wrap: wrap;}
    .refferal_content .block .info span {width: 100%;margin-bottom: 15px;}
    .game-coin .top .left .block {padding: 10px; height: auto; min-height: 40px;}
    .game-coin .top .left .block .game-id {padding-right: 10px;}
    .game-coin .top .left .user .ava {width: 35px; height: 35px; margin-right: 8px;}
    .game-coin .top .left .user .ava img {width: 35px; height: 35px;}
    .game-coin .check {padding: 5px 15px; min-width: 60px; font-size: 12px;}
    .game-coin .go a {padding: 5px 15px; font-size: 12px;}
    .game-coin .win-ticket span {padding: 5px 15px; font-size: 12px;}
    .game-coin .top .left .players .vs {margin-right: 10px;}

    .games-active .game-coin .top .left > div:first-child {
        min-width: 200px !important;
    }
}

@media only screen and (max-width: 320px) {
    .game-coin .top .left .block {padding: 5px; min-height: 30px;}
    .game-coin .top .left .block h4 {font-size: 10px;}
    .game-coin .top .left .block span {font-size: 11px;}
    .game-coin .top .left .user .info span {font-size: 11px; max-width: 80px;}
    .game-coin .top .left .user .info p {font-size: 10px;}
    .game-coin .top .left .user .ava {width: 25px; height: 25px; margin-right: 3px;}
    .game-coin .top .left .user .ava img {width: 25px; height: 25px;}
    .game-coin .check {padding: 4px 10px; min-width: 50px; font-size: 11px;}
    .game-coin .go a {padding: 4px 10px; font-size: 11px;}
    .game-coin .win-ticket span {padding: 4px 10px; font-size: 11px;}
    .game-content.pvp .create-game {padding: 10px 15px; gap: 8px;}
    .game-content.pvp .create-game input {min-width: 120px; padding: 8px 12px; font-size: 12px;}
    .game-content.pvp .create-game a.create {min-width: 80px; padding: 6px 12px; font-size: 12px;}
    .game-content.pvp .create-game ul {padding-left: 10px; margin-right: 5px;}
    .game-content.pvp .create-game ul li a {padding: 6px 10px; font-size: 11px;}
    .game-coin .top .left .players .vs {margin-right: 5px;}

    .games-active .game-coin .top .left > div:first-child {
        min-width: 150px !important;
    }
}