/* CS2_LIVE_MONITOR_DESIGN_2026 */

:root{
    --live-bg:#020914;
    --live-panel:#06111f;
    --live-panel2:#081729;
    --live-line:rgba(93,151,208,.18);
    --live-line2:rgba(71,170,255,.34);
    --live-text:#edf6ff;
    --live-muted:#8198ad;
    --live-blue:#2196ff;
    --live-cyan:#2dc8ff;
    --live-orange:#ff8a23;
    --live-green:#34d37b;
}

.cs2-live-page{
    padding:28px 0 60px;
}

.cs2-live-wrap{
    width:min(1500px,calc(100% - 34px));
    margin:0 auto;
}

.cs2-live-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.cs2-live-eyebrow{
    color:#36bfff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.16em;
    margin-bottom:7px;
}

.cs2-live-head h1{
    margin:0;
    color:#fff;
    font-size:32px;
    line-height:1.1;
}

.cs2-live-head p{
    margin:8px 0 0;
    color:#8198ad;
    font-size:14px;
}

.cs2-live-updated{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid var(--live-line);
    border-radius:12px;
    background:rgba(6,18,31,.76);
    color:#91a6b8;
    font-size:12px;
}

.cs2-live-updated i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#31d978;
    box-shadow:0 0 12px rgba(49,217,120,.65);
}

.cs2-live-shell{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:14px;
}

.cs2-live-side{
    border:1px solid var(--live-line);
    border-radius:18px;
    padding:12px;
    background:
        linear-gradient(
            180deg,
            rgba(7,19,34,.95),
            rgba(3,11,20,.96)
        );
    height:max-content;
    position:sticky;
    top:105px;
}

.cs2-live-side-title{
    padding:8px 10px 10px;
    color:#687f94;
    font-size:10px;
    letter-spacing:.14em;
    font-weight:900;
    text-transform:uppercase;
}

.cs2-live-side a{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 11px;
    border-radius:10px;
    color:#9eb0c0;
    text-decoration:none;
    font-size:13px;
    font-weight:750;
}

.cs2-live-side a:hover{
    color:#fff;
    background:rgba(38,145,255,.10);
}

.cs2-live-side a.active{
    color:#eaf6ff;
    background:
        linear-gradient(
            90deg,
            rgba(27,119,255,.26),
            rgba(27,119,255,.07)
        );
    border-left:2px solid #2d9eff;
}

.cs2-live-main{
    min-width:0;
}

.cs2-live-topgrid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:14px;
}

.cs2-live-mapbox{
    position:relative;
    height:560px;
    overflow:hidden;
    border-radius:18px;
    border:1px solid var(--live-line2);
    background:#03101d;
}

#cs2LiveMap{
    width:100%;
    height:100%;
    background:#03101d;
}

.cs2-live-maplegend{
    position:absolute;
    z-index:600;
    right:15px;
    bottom:15px;
    width:230px;
    padding:12px;
    border:1px solid rgba(115,170,219,.20);
    border-radius:12px;
    background:rgba(3,12,22,.90);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 40px rgba(0,0,0,.38);
}

.cs2-live-maplegend b{
    display:block;
    font-size:11px;
    color:#e5f2ff;
    margin-bottom:8px;
}

.cs2-live-gradient{
    height:6px;
    border-radius:8px;
    background:
        linear-gradient(
            90deg,
            #176cff,
            #39c8ff,
            #ffc43d,
            #ff5226
        );
}

.cs2-live-legendlabels{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    color:#7690a6;
    font-size:10px;
}

.cs2-live-rail{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cs2-live-stat,
.cs2-live-regions{
    border:1px solid var(--live-line);
    border-radius:16px;
    background:
        linear-gradient(
            180deg,
            rgba(7,20,35,.95),
            rgba(4,13,23,.96)
        );
    padding:15px;
}

.cs2-live-stat small{
    display:block;
    color:#8197a9;
    font-size:11px;
    font-weight:800;
}

.cs2-live-stat strong{
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:30px;
    letter-spacing:-.03em;
}

.cs2-live-stat span{
    display:block;
    margin-top:3px;
    color:#71879b;
    font-size:11px;
}

.cs2-live-stat.blue strong{
    color:#55b9ff;
}

.cs2-live-stat.orange strong{
    color:#ffac42;
}

.cs2-live-regions h3{
    margin:0 0 11px;
    color:#dcecff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.cs2-region-row{
    display:grid;
    grid-template-columns:9px 1fr auto;
    gap:8px;
    align-items:center;
    min-height:30px;
    color:#a7b9c9;
    font-size:11px;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.cs2-region-row:last-child{
    border-bottom:0;
}

.cs2-region-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#319cff;
    box-shadow:0 0 9px #319cff;
}

.cs2-region-row:first-child .cs2-region-dot{
    background:#ff812e;
    box-shadow:0 0 10px #ff812e;
}

.cs2-live-under{
    margin-top:14px;
    display:grid;
    grid-template-columns:.85fr 1.45fr;
    gap:14px;
}

.cs2-live-box{
    border:1px solid var(--live-line);
    border-radius:16px;
    background:
        linear-gradient(
            180deg,
            rgba(7,20,35,.94),
            rgba(4,13,23,.96)
        );
    padding:16px;
}

.cs2-live-boxhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:13px;
}

.cs2-live-boxhead h2{
    margin:0;
    color:#eaf5ff;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.cs2-mode-row{
    display:grid;
    grid-template-columns:1fr 120px 50px;
    gap:10px;
    align-items:center;
    min-height:32px;
    color:#b6c7d7;
    font-size:12px;
}

.cs2-mode-track{
    height:5px;
    border-radius:10px;
    background:#0c1d2d;
    overflow:hidden;
}

.cs2-mode-fill{
    height:100%;
    border-radius:10px;
    background:
        linear-gradient(
            90deg,
            #176cff,
            #43bbff
        );
}

.cs2-mode-percent{
    color:#718a9f;
    text-align:right;
}

.cs2-live-serverrows{
    display:flex;
    flex-direction:column;
}

.cs2-live-serverrow{
    display:grid;
    grid-template-columns:28px 1fr auto auto;
    gap:9px;
    align-items:center;
    min-height:37px;
    border-bottom:1px solid rgba(255,255,255,.045);
    color:#a8bdce;
    text-decoration:none;
    font-size:11px;
}

.cs2-live-serverrow:last-child{
    border-bottom:0;
}

.cs2-live-serverrow .rank{
    all:unset;
    color:#667f94;
    font-weight:900;
}

.cs2-live-serverrow b{
    color:#dceeff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.cs2-live-serverrow em{
    font-style:normal;
    color:#4bd583;
    font-weight:850;
}

.cs2-live-serverrow small{
    color:#7f97ab;
}


/* server cards */

.cs2-live-recommend{
    margin-top:14px;
    border:1px solid var(--live-line);
    border-radius:17px;
    padding:15px;
    background:rgba(4,14,24,.78);
}

.cs2-live-recommend-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.cs2-live-recommend-head h2{
    margin:0;
    color:#e9f5ff;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.cs2-live-cardgrid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:11px;
}

.cs2-live-card{
    overflow:hidden;
    border:1px solid rgba(92,155,211,.20);
    border-radius:13px;
    background:
        linear-gradient(
            160deg,
            #0b1c2f,
            #05101d
        );
}

.cs2-live-card-image{
    height:100px;
    background:
        linear-gradient(
            145deg,
            #0b2139,
            #07121f
        );
    overflow:hidden;
    position:relative;
}

.cs2-live-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.94) contrast(1.08);
}

.cs2-live-card-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(3,10,17,.72)
        );
}

.cs2-live-cardbody{
    padding:11px;
}

.cs2-live-cardbody b{
    display:block;
    color:#eff8ff;
    font-size:11px;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.cs2-live-cardmeta{
    display:flex;
    justify-content:space-between;
    gap:7px;
    margin-top:8px;
    color:#8096a8;
    font-size:10px;
}

.cs2-live-connect{
    display:block;
    margin-top:9px;
    height:34px;
    line-height:34px;
    text-align:center;
    border-radius:8px;
    background:
        linear-gradient(
            135deg,
            #106de3,
            #1a94ff
        );
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}


/* WHEEL */

.cs2-wheel-section{
    scroll-margin-top:110px;
    margin-top:18px;
    border:1px solid rgba(75,157,226,.24);
    border-radius:20px;
    padding:22px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(31,123,255,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #061628,
            #030b15
        );
}

.cs2-wheel-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    margin-bottom:18px;
}

.cs2-wheel-title h2{
    margin:0;
    font-size:24px;
    color:#fff;
}

.cs2-wheel-title p{
    margin:7px 0 0;
    color:#7e96aa;
    font-size:13px;
}

.cs2-wheel-layout{
    display:grid;
    grid-template-columns:430px minmax(0,1fr);
    gap:28px;
    align-items:center;
}

.cs2-wheel-wrap{
    position:relative;
    width:400px;
    height:400px;
    margin:auto;
}

#cs2ServerWheel{
    width:400px;
    height:400px;
    max-width:100%;
    border-radius:50%;
    filter:
        drop-shadow(
            0 20px 38px rgba(0,0,0,.42)
        );
}

.cs2-wheel-pointer{
    position:absolute;
    top:-12px;
    left:50%;
    z-index:4;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:14px solid transparent;
    border-right:14px solid transparent;
    border-top:30px solid #fff;
    filter:drop-shadow(0 0 9px rgba(64,187,255,.7));
}

.cs2-wheel-control{
    border:1px solid rgba(103,165,218,.17);
    border-radius:17px;
    padding:20px;
    background:rgba(5,15,26,.64);
}

.cs2-wheel-control label{
    display:block;
    margin-bottom:7px;
    color:#8199ad;
    font-size:11px;
    font-weight:800;
}

.cs2-wheel-control select{
    width:100%;
    height:46px;
    padding:0 13px;
    border:1px solid rgba(92,162,219,.28);
    border-radius:10px;
    background:#071522;
    color:#e9f5ff;
    outline:none;
}

.cs2-wheel-spin{
    width:100%;
    height:50px;
    margin-top:13px;
    border:0;
    border-radius:11px;
    cursor:pointer;
    color:#fff;
    font-weight:950;
    font-size:14px;
    background:
        linear-gradient(
            135deg,
            #0d72e7,
            #25b3ff
        );
    box-shadow:
        0 12px 32px rgba(20,132,239,.25);
}

.cs2-wheel-spin:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.cs2-wheel-result{
    display:none;
    margin-top:14px;
    padding:16px;
    border:1px solid rgba(55,183,255,.23);
    border-radius:13px;
    background:rgba(18,78,127,.12);
}

.cs2-wheel-result.show{
    display:block;
}

.cs2-wheel-result small{
    color:#6e91ab;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.cs2-wheel-result h3{
    margin:7px 0 5px;
    color:#fff;
    font-size:17px;
}

.cs2-wheel-result p{
    margin:0;
    color:#88a5b9;
    font-size:12px;
}

.cs2-wheel-result a{
    display:block;
    height:42px;
    margin-top:12px;
    line-height:42px;
    border-radius:9px;
    text-align:center;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    background:#1687ed;
}



/* ==========================================================
   CS2_LIVE_YANDEX_MAP_DESIGN_2026
   ========================================================== */

#cs2LiveMap{
    width:100%;
    height:100%;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 40%,
            #0b243a,
            #030b14 72%
        );
}


/*
 * Кастомный LIVE marker.
 * Никаких бесконечных CSS-анимаций.
 */

.cs2-ymap-marker{
    position:relative;
    transform:
        translate(-50%,-50%);
    width:0;
    height:0;
    z-index:1;
}


.cs2-ymap-dot-button{
    position:absolute;
    left:0;
    top:0;
    appearance:none;
    border:0;
    padding:0;
    margin:0;
    background:none;
    cursor:pointer;
    color:#fff;
    font:inherit;
}


.cs2-ymap-dot{
    position:absolute;
    left:50%;
    top:50%;

    width:
        var(
            --cs2-marker-size,
            16px
        );

    height:
        var(
            --cs2-marker-size,
            16px
        );

    transform:
        translate(-50%,-50%);

    border:
        2px solid rgba(
            255,
            255,
            255,
            .62
        );

    border-radius:50%;

    background:
        var(
            --cs2-marker-color,
            #188cff
        );

    box-shadow:
        0 0 0 5px
            color-mix(
                in srgb,
                var(
                    --cs2-marker-color,
                    #188cff
                ) 18%,
                transparent
            ),
        0 0 18px
            color-mix(
                in srgb,
                var(
                    --cs2-marker-color,
                    #188cff
                ) 74%,
                transparent
            ),
        0 6px 20px
            rgba(0,0,0,.44);
}


.cs2-ymap-dot-button:hover
.cs2-ymap-dot{

    border-color:#fff;

    box-shadow:
        0 0 0 7px
            color-mix(
                in srgb,
                var(
                    --cs2-marker-color,
                    #188cff
                ) 20%,
                transparent
            ),
        0 0 23px
            var(
                --cs2-marker-color,
                #188cff
            ),
        0 8px 25px
            rgba(0,0,0,.48);
}


/*
 * Верхние 8 горячих точек:
 * название + количество игроков.
 */

.cs2-ymap-hot-label{
    position:absolute;
    left:50%;
    bottom:18px;

    display:flex;
    align-items:center;
    gap:7px;

    min-width:max-content;

    transform:
        translateX(-50%);

    padding:6px 9px;

    border:
        1px solid rgba(
            78,
            170,
            244,
            .29
        );

    border-radius:8px;

    background:
        rgba(
            3,
            13,
            24,
            .91
        );

    box-shadow:
        0 8px 24px
            rgba(0,0,0,.36),
        0 0 18px
            rgba(28,135,255,.08);

    backdrop-filter:
        blur(9px);

    pointer-events:none;
}


.cs2-ymap-hot-label span{
    color:#c9ddec;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}


.cs2-ymap-hot-label strong{
    color:
        var(
            --cs2-marker-color,
            #42b4ff
        );

    font-size:13px;
    font-weight:950;
}


/*
 * Popup по нажатию.
 */

.cs2-ymap-popup{
    position:absolute;

    left:50%;
    bottom:28px;

    display:none;

    width:210px;

    transform:
        translateX(-50%);

    padding:13px;

    border:
        1px solid rgba(
            71,
            174,
            255,
            .32
        );

    border-radius:12px;

    background:
        linear-gradient(
            160deg,
            rgba(8,25,42,.98),
            rgba(3,11,20,.99)
        );

    box-shadow:
        0 18px 45px
            rgba(0,0,0,.55),
        0 0 25px
            rgba(23,134,255,.10);

    color:#eaf6ff;

    pointer-events:auto;
}


.cs2-ymap-marker.is-open
.cs2-ymap-popup{

    display:block;
}


.cs2-ymap-popup::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:-7px;

    width:12px;
    height:12px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-right:
        1px solid rgba(
            71,
            174,
            255,
            .25
        );

    border-bottom:
        1px solid rgba(
            71,
            174,
            255,
            .25
        );

    background:#061522;
}


.cs2-ymap-popup-kicker{
    margin-bottom:6px;

    color:#36bfff;

    font-size:8px;
    font-weight:950;
    letter-spacing:.12em;
}


.cs2-ymap-popup b{
    display:block;

    color:#fff;

    font-size:14px;
    line-height:1.25;
}


.cs2-ymap-popup-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;

    margin-top:10px;
}


.cs2-ymap-popup-stats span{
    display:block;

    padding:7px;

    border-radius:8px;

    background:
        rgba(
            47,
            143,
            221,
            .08
        );

    color:#7f9aae;

    font-size:9px;
}


.cs2-ymap-popup-stats strong{
    display:block;

    margin-bottom:2px;

    color:#eaf6ff;

    font-size:13px;
}


/*
 * Лёгкая интеграция UI Яндекса
 * с дизайном CS2 Monitor.
 */

#cs2LiveMap button{
    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;
}


/*
 * Брендинг / copyright Яндекса
 * НЕ скрываем.
 *
 * Это обязательная часть карты.
 */


/* CS2_LIVE_YANDEX_MAP_DESIGN_2026_END */


/* responsive */

@media(max-width:1250px){

    .cs2-live-cardgrid{
        grid-template-columns:repeat(3,1fr);
    }

    .cs2-live-shell{
        grid-template-columns:160px minmax(0,1fr);
    }
}

@media(max-width:980px){

    .cs2-live-shell{
        display:block;
    }

    .cs2-live-side{
        position:static;
        display:flex;
        gap:5px;
        overflow:auto;
        margin-bottom:12px;
    }

    .cs2-live-side-title{
        display:none;
    }

    .cs2-live-side a{
        white-space:nowrap;
    }

    .cs2-live-topgrid,
    .cs2-live-under,
    .cs2-wheel-layout{
        grid-template-columns:1fr;
    }

    .cs2-live-rail{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:700px){

    .cs2-live-wrap{
        width:min(100% - 20px,1500px);
    }

    .cs2-live-head{
        display:block;
    }

    .cs2-live-updated{
        margin-top:12px;
        width:max-content;
    }

    .cs2-live-mapbox{
        height:450px;
    }

    .cs2-live-rail{
        grid-template-columns:1fr;
    }

    .cs2-live-cardgrid{
        grid-template-columns:1fr;
    }

    .cs2-wheel-section{
        padding:14px;
    }

    .cs2-wheel-wrap{
        width:300px;
        height:300px;
    }

    #cs2ServerWheel{
        width:300px;
        height:300px;
    }
}





/* ==========================================================
   CS2_LIVE_YANDEX_21_DESIGN_2026
   ========================================================== */


/*
 * Тёмный визуальный стиль только для
 * базового слоя карты Яндекса.
 *
 * Наши маркеры, controls и copyright
 * фильтром не затрагиваются.
 */

#cs2LiveMap
[class*="ground-pane"] {

    filter:
        grayscale(.80)
        invert(.89)
        hue-rotate(180deg)
        brightness(.61)
        contrast(1.16)
        saturate(.80);
}


/*
 * LIVE markers.
 * Никакой бесконечной animation.
 */

.cs2-y21-marker{

    position:relative;

    width:0;
    height:0;

    transform:
        translate(-50%,-50%);
}


.cs2-y21-dot{

    position:absolute;

    left:0;
    top:0;

    width:
        var(
            --marker-size,
            16px
        );

    height:
        var(
            --marker-size,
            16px
        );

    transform:
        translate(-50%,-50%);

    border:
        2px solid
        rgba(255,255,255,.72);

    border-radius:999px;

    background:#1688ee;

    box-shadow:
        0 0 0 5px
            rgba(27,139,255,.16),
        0 0 18px
            rgba(27,139,255,.70),
        0 8px 22px
            rgba(0,0,0,.42);
}


.cs2-y21-marker.active
.cs2-y21-dot{

    background:#2cabff;

    box-shadow:
        0 0 0 6px
            rgba(44,171,255,.17),
        0 0 21px
            rgba(44,171,255,.78),
        0 8px 22px
            rgba(0,0,0,.44);
}


.cs2-y21-marker.warm
.cs2-y21-dot{

    background:#ff9b28;

    box-shadow:
        0 0 0 6px
            rgba(255,155,40,.18),
        0 0 24px
            rgba(255,155,40,.80),
        0 8px 22px
            rgba(0,0,0,.45);
}


.cs2-y21-marker.hot
.cs2-y21-dot{

    background:#ff5b30;

    box-shadow:
        0 0 0 7px
            rgba(255,91,48,.19),
        0 0 28px
            rgba(255,91,48,.88),
        0 8px 24px
            rgba(0,0,0,.48);
}


.cs2-y21-label{

    position:absolute;

    left:0;
    bottom:17px;

    display:flex;

    align-items:center;

    gap:7px;

    min-width:max-content;

    transform:
        translateX(-50%);

    padding:
        5px 8px;

    border:
        1px solid
        rgba(71,162,230,.26);

    border-radius:8px;

    background:
        rgba(3,13,23,.91);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.40);

    backdrop-filter:
        blur(8px);

    pointer-events:none;
}


.cs2-y21-label span{

    color:#c9dce9;

    font-size:10px;

    font-weight:800;

    white-space:nowrap;
}


.cs2-y21-label strong{

    color:#45baff;

    font-size:13px;

    font-weight:950;
}


.cs2-y21-marker.warm
.cs2-y21-label strong{

    color:#ffb349;
}


.cs2-y21-marker.hot
.cs2-y21-label strong{

    color:#ff7655;
}


/*
 * Balloon.
 */

.cs2-y21-balloon-kicker{

    margin-bottom:5px;

    color:#2faeff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;
}


.cs2-y21-balloon-stats{

    display:flex;

    gap:8px;

    margin-top:8px;
}


.cs2-y21-balloon-stats span{

    padding:
        6px 8px;

    border-radius:7px;

    background:
        rgba(
            21,
            117,
            190,
            .09
        );

    color:#5d7586;

    font-size:10px;
}


.cs2-y21-balloon-stats b{

    color:#158ee8;
}


/*
 * Чуть аккуратнее стандартные controls.
 */

#cs2LiveMap
[class*="zoom"] {

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;
}


/*
 * Логотип и copyright Яндекса
 * намеренно НЕ скрываются.
 */


/* CS2_LIVE_YANDEX_21_DESIGN_2026_END */


/* ==========================================================
   CS2_LIVE_MAP_DESIGN_V2_FIXED_2026
   ========================================================== */


/*
 * Главная область карты.
 */

#cs2LiveMap{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;

    background:
        radial-gradient(
            circle at 52% 32%,
            #0b2134 0%,
            #06111d 55%,
            #030912 100%
        ) !important;
}


/*
 * Карта Яндекса остаётся настоящей картой,
 * но делаем её немного чище и читабельнее.
 */

#cs2LiveMap
[class*="ground-pane"]{

    filter:
        grayscale(.62)
        invert(.86)
        hue-rotate(180deg)
        brightness(.72)
        contrast(1.12)
        saturate(.78) !important;
}


/*
 * Лёгкое фирменное затемнение по краям.
 * На управление картой не влияет.
 */

#cs2LiveMap::after{

    content:"";

    position:absolute;
    inset:0;

    z-index:15;

    pointer-events:none;

    box-shadow:
        inset 0 0 80px
        rgba(0,8,18,.34);

    background:
        linear-gradient(
            180deg,
            rgba(8,25,42,.05) 0%,
            transparent 22%,
            transparent 78%,
            rgba(2,9,16,.10) 100%
        );
}


/*
 * Верхний интерфейс.
 */

.cs2-live-map-ui-v2{

    position:absolute;

    left:18px;
    right:18px;
    top:18px;

    z-index:2500;

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:16px;

    pointer-events:none;
}


/*
 * CS2 MONITOR / LIVE MAP
 */

.cs2-live-map-brand-v2{

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(64,164,242,.26);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(4,15,27,.91),
            rgba(7,22,37,.85)
        );

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.24);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    pointer-events:none;
}


.cs2-live-map-brand-dot{

    width:9px;
    height:9px;

    flex:0 0 auto;

    border-radius:50%;

    background:#27d979;

    box-shadow:
        0 0 0 4px
        rgba(39,217,121,.12),
        0 0 15px
        rgba(39,217,121,.28);
}


.cs2-live-map-brand-text{

    display:flex;
    flex-direction:column;

    line-height:1.05;
}


.cs2-live-map-brand-text b{

    color:#e8f6ff;

    font-size:10px;
    font-weight:950;

    letter-spacing:.10em;
}


.cs2-live-map-brand-text small{

    margin-top:3px;

    color:#38adf7;

    font-size:7px;
    font-weight:900;

    letter-spacing:.17em;
}


/*
 * Правая группа controls.
 */

.cs2-live-map-controls-v2{

    display:flex;

    align-items:center;

    gap:7px;

    pointer-events:auto;
}


.cs2-live-map-control-btn,
.cs2-live-map-reset-btn{

    appearance:none;

    border:
        1px solid
        rgba(66,158,230,.30);

    background:
        linear-gradient(
            180deg,
            rgba(10,29,48,.95),
            rgba(5,17,30,.96)
        );

    color:#e7f5ff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.045),
        0 8px 22px
        rgba(0,0,0,.26);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    cursor:pointer;

    transition:
        border-color .14s ease,
        background .14s ease,
        transform .14s ease;
}


.cs2-live-map-control-btn{

    display:flex;

    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    padding:0;

    border-radius:10px;

    font-size:20px;
    font-weight:800;

    line-height:1;
}


.cs2-live-map-reset-btn{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    height:38px;

    padding:
        0 12px;

    border-radius:10px;

    font-size:10px;
    font-weight:850;

    white-space:nowrap;
}


.cs2-live-map-reset-icon{

    color:#3bb7ff;

    font-size:14px;
}


.cs2-live-map-control-btn:hover,
.cs2-live-map-reset-btn:hover{

    border-color:
        rgba(67,185,255,.60);

    background:
        linear-gradient(
            180deg,
            rgba(15,43,68,.98),
            rgba(7,24,41,.98)
        );

    transform:
        translateY(-1px);
}


.cs2-live-map-control-btn:active,
.cs2-live-map-reset-btn:active{

    transform:
        translateY(0);
}


/*
 * LIVE точки немного компактнее.
 */

.cs2-y21-dot{

    border-width:1.5px !important;

    box-shadow:
        0 0 0 4px
        rgba(33,143,255,.13),
        0 0 14px
        rgba(33,143,255,.65),
        0 6px 18px
        rgba(0,0,0,.36) !important;
}


.cs2-y21-marker.warm
.cs2-y21-dot{

    box-shadow:
        0 0 0 5px
        rgba(255,154,39,.14),
        0 0 18px
        rgba(255,154,39,.72),
        0 6px 18px
        rgba(0,0,0,.38) !important;
}


.cs2-y21-marker.hot
.cs2-y21-dot{

    box-shadow:
        0 0 0 6px
        rgba(255,91,48,.15),
        0 0 22px
        rgba(255,91,48,.78),
        0 7px 20px
        rgba(0,0,0,.40) !important;
}


/*
 * Горячие подписи.
 */

.cs2-y21-label{

    bottom:16px !important;

    gap:6px !important;

    padding:
        5px 8px !important;

    border:
        1px solid
        rgba(70,164,233,.26) !important;

    border-radius:
        7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(4,15,27,.94),
            rgba(7,23,38,.91)
        ) !important;

    box-shadow:
        0 7px 21px
        rgba(0,0,0,.38) !important;

    backdrop-filter:
        blur(8px);
}


.cs2-y21-label span{

    color:#bed4e3 !important;

    font-size:9px !important;

    font-weight:800 !important;
}


.cs2-y21-label strong{

    font-size:12px !important;

    font-weight:950 !important;
}


/*
 * Балун Яндекса.
 */

#cs2LiveMap
.ymaps-2-1-79-balloon{

    filter:
        drop-shadow(
            0 18px 35px
            rgba(0,0,0,.45)
        );
}


#cs2LiveMap
.ymaps-2-1-79-balloon__layout,

#cs2LiveMap
.ymaps-2-1-79-balloon__content{

    background:
        linear-gradient(
            155deg,
            #071a2a,
            #04101d
        ) !important;

    color:#dceefa !important;
}


#cs2LiveMap
.ymaps-2-1-79-balloon__content{

    padding:
        13px 15px !important;
}


/*
 * Hint при наведении.
 */

#cs2LiveMap
.ymaps-2-1-79-hint__text{

    border:
        1px solid
        rgba(66,165,235,.26) !important;

    border-radius:
        7px !important;

    background:
        rgba(5,18,31,.96) !important;

    color:#dceefa !important;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.32) !important;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        10px !important;
}


/*
 * Copyright Яндекса НЕ скрываем.
 */

#cs2LiveMap
[class*="copyrights-pane"]{

    opacity:.82;
}


/*
 * Mobile.
 */

@media
(max-width:800px){

    .cs2-live-map-ui-v2{

        left:10px;
        right:10px;
        top:10px;
    }


    .cs2-live-map-brand-v2{

        padding:
            7px 9px;
    }


    .cs2-live-map-brand-text b{

        font-size:8px;
    }


    .cs2-live-map-reset-btn{

        width:38px;

        padding:0;

        font-size:0;
    }


    .cs2-live-map-reset-icon{

        font-size:15px;
    }


    .cs2-live-map-control-btn{

        width:36px;
        height:36px;
    }


    .cs2-live-map-reset-btn{

        height:36px;
    }
}


/* CS2_LIVE_MAP_DESIGN_V2_FIXED_2026_END */


/* ==========================================================
   CS2_LIVE_PAGE_PREMIUM_V2_2026

   PAGE ONLY.
   Yandex map internals are intentionally untouched.
   ========================================================== */


/* ----------------------------------------------------------
   PAGE BACKGROUND
   ---------------------------------------------------------- */

body.cs2-live-page-premium-v2{

    background:
        radial-gradient(
            900px 500px
            at 66% 12%,
            rgba(20,104,191,.105),
            transparent 65%
        ),

        radial-gradient(
            680px 450px
            at 91% 68%,
            rgba(255,110,38,.045),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            #020a12 0%,
            #020910 50%,
            #030910 100%
        ) !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.cs2-live-hero-v2{

    position:relative;

    padding-bottom:
        4px;
}


.cs2-live-kicker-v2{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:
        8px !important;

    color:
        #37b8ff !important;

    font-size:
        11px !important;

    font-weight:
        950 !important;

    letter-spacing:
        .16em !important;

    text-shadow:
        0 0 18px
        rgba(50,178,255,.16);
}


.cs2-live-kicker-v2::before{

    content:"";

    width:18px;
    height:2px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            #1a91ff,
            #40d1ff
        );

    box-shadow:
        0 0 12px
        rgba(45,182,255,.38);
}


.cs2-live-title-v2{

    margin:
        0 0 8px !important;

    color:
        #f4f9ff !important;

    font-size:
        clamp(
            30px,
            2.25vw,
            42px
        ) !important;

    line-height:
        1.03 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.025em !important;

    text-shadow:
        0 10px 35px
        rgba(0,0,0,.20);
}


.cs2-live-title-v2::after{

    content:"LIVE";

    display:inline-flex;

    margin-left:
        12px;

    transform:
        translateY(-5px);

    padding:
        4px 7px;

    border:
        1px solid
        rgba(255,115,53,.30);

    border-radius:
        6px;

    color:
        #ff8a4c;

    background:
        rgba(255,106,38,.065);

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}


.cs2-live-subtitle-v2{

    color:
        #75a2c1 !important;

    font-size:
        13px !important;

    line-height:
        1.5 !important;
}


/* ----------------------------------------------------------
   UPDATED STATUS
   ---------------------------------------------------------- */

.cs2-live-updated-v2{

    border:
        1px solid
        rgba(56,146,211,.22) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(6,21,36,.94),
            rgba(4,14,26,.94)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 9px 25px
        rgba(0,0,0,.18) !important;

    backdrop-filter:
        blur(10px);
}


/* ----------------------------------------------------------
   LEFT SIDEBAR
   ---------------------------------------------------------- */

.cs2-live-sidebar-v2{

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(50,137,201,.24) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            165deg,
            rgba(8,25,41,.97),
            rgba(3,13,24,.98)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 18px 45px
        rgba(0,0,0,.20) !important;
}


.cs2-live-sidebar-v2::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(46,170,255,.55),
            transparent
        );
}


.cs2-live-sidebar-link-v2{

    position:relative;

    border:
        1px solid
        transparent !important;

    border-radius:
        10px !important;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease !important;
}


.cs2-live-sidebar-link-v2:hover{

    transform:
        translateX(2px);

    border-color:
        rgba(50,159,236,.15) !important;

    background:
        rgba(29,115,184,.09) !important;
}


.cs2-live-sidebar-link-v2.is-current-v2{

    border-color:
        rgba(49,164,244,.25) !important;

    background:
        linear-gradient(
            90deg,
            rgba(18,100,172,.34),
            rgba(10,64,119,.20)
        ) !important;

    box-shadow:
        inset 3px 0 0
        #27aaff;
}


/* ----------------------------------------------------------
   MAP FRAME
   ---------------------------------------------------------- */

/*
 * ВАЖНО:
 * не меняем #cs2LiveMap и ничего внутри Yandex.
 * Только внешний контейнер.
 */

.cs2-live-map-frame-v2{

    position:relative;

    border-radius:
        18px !important;

    box-shadow:
        0 22px 60px
        rgba(0,0,0,.22);
}


/* ----------------------------------------------------------
   STAT CARDS
   ---------------------------------------------------------- */

.cs2-live-stat-card-v2{

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(53,144,210,.23) !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            155deg,
            rgba(8,27,46,.98),
            rgba(3,14,26,.99)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 15px 35px
        rgba(0,0,0,.16) !important;

    transition:
        transform .16s ease,
        border-color .16s ease !important;
}


.cs2-live-stat-card-v2:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(61,166,238,.38) !important;
}


.cs2-live-stat-card-v2::after{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    border-radius:
        0 3px 3px 0;

    background:
        #269fff;
}


.cs2-live-stat-orange-v2::after{

    background:
        #ff9d2e;
}


.cs2-live-stat-cyan-v2::after{

    background:
        #50c9ff;
}


.cs2-live-stat-label-v2{

    color:
        #7da4c0 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .035em;
}


.cs2-live-stat-number-v2{

    color:
        #43b6ff !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.025em !important;

    text-shadow:
        0 0 20px
        rgba(43,166,255,.10);
}


.cs2-live-stat-orange-v2
.cs2-live-stat-number-v2{

    color:
        #ffad42 !important;
}


.cs2-live-stat-cyan-v2
.cs2-live-stat-number-v2{

    color:
        #f0f8ff !important;
}


/* ----------------------------------------------------------
   LARGE PANELS
   ---------------------------------------------------------- */

.cs2-live-panel-v2{

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(53,142,207,.22) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            160deg,
            rgba(7,24,41,.98),
            rgba(3,13,24,.99)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.022),
        0 16px 42px
        rgba(0,0,0,.17) !important;
}


.cs2-live-panel-v2::before{

    content:"";

    position:absolute;

    left:18px;
    right:18px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(58,169,244,.42),
            transparent
        );
}


.cs2-live-panel-title-v2{

    position:relative;

    padding-left:
        11px;

    color:
        #f0f7ff !important;

    font-size:
        12px !important;

    font-weight:
        950 !important;

    letter-spacing:
        .04em !important;
}


.cs2-live-panel-title-v2::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:3px;
    height:14px;

    transform:
        translateY(-50%);

    border-radius:
        99px;

    background:
        #2caaff;

    box-shadow:
        0 0 12px
        rgba(44,170,255,.35);
}


/* ----------------------------------------------------------
   HOTSPOTS
   ---------------------------------------------------------- */

.cs2-live-hotspots-v2{

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,116,43,.055),
            transparent 34%
        ),

        linear-gradient(
            160deg,
            rgba(7,24,41,.98),
            rgba(3,13,24,.99)
        ) !important;
}


.cs2-live-hotspots-v2
.cs2-live-panel-title-v2::before{

    background:
        #ff8c32;

    box-shadow:
        0 0 12px
        rgba(255,140,50,.32);
}


/* ----------------------------------------------------------
   POPULAR MODES
   ---------------------------------------------------------- */

.cs2-live-modes-v2{

    min-height:
        190px;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(41,156,255,.055),
            transparent 42%
        ),

        linear-gradient(
            160deg,
            rgba(7,24,41,.98),
            rgba(3,13,24,.99)
        ) !important;
}


/* ----------------------------------------------------------
   ACTIVE SERVERS
   ---------------------------------------------------------- */

.cs2-live-servers-v2{

    min-height:
        190px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(38,218,119,.040),
            transparent 38%
        ),

        linear-gradient(
            160deg,
            rgba(7,24,41,.98),
            rgba(3,13,24,.99)
        ) !important;
}


/* ----------------------------------------------------------
   GENERIC ROW POLISH INSIDE OUR PAGE PANELS
   ---------------------------------------------------------- */

.cs2-live-hotspots-v2 li,
.cs2-live-modes-v2 li,
.cs2-live-servers-v2 li{

    border-bottom:
        1px solid
        rgba(87,143,181,.09);
}


.cs2-live-hotspots-v2 li:last-child,
.cs2-live-modes-v2 li:last-child,
.cs2-live-servers-v2 li:last-child{

    border-bottom:
        none;
}


/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

body.cs2-live-page-premium-v2
::-webkit-scrollbar{

    width:9px;
    height:9px;
}


body.cs2-live-page-premium-v2
::-webkit-scrollbar-track{

    background:
        #030b13;
}


body.cs2-live-page-premium-v2
::-webkit-scrollbar-thumb{

    border:
        2px solid #030b13;

    border-radius:
        99px;

    background:
        #143c5c;
}


body.cs2-live-page-premium-v2
::-webkit-scrollbar-thumb:hover{

    background:
        #1c5985;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media
(max-width:1200px){

    .cs2-live-title-v2{

        font-size:
            31px !important;
    }
}


@media
(max-width:760px){

    .cs2-live-title-v2{

        font-size:
            27px !important;
    }


    .cs2-live-title-v2::after{

        display:none;
    }


    .cs2-live-stat-card-v2{

        border-radius:
            14px !important;
    }


    .cs2-live-sidebar-v2,
    .cs2-live-panel-v2{

        border-radius:
            14px !important;
    }
}


/* CS2_LIVE_PAGE_PREMIUM_V2_2026_END */


/* ==========================================================
   CS2_LIVE_LAYOUT_WHEEL_PREMIUM_V3_2026
   ========================================================== */


/* ----------------------------------------------------------
   MAP SIZE

   Меняем только размер контейнера.
   Yandex map engine / markers / zoom не трогаем.
   ---------------------------------------------------------- */

body.cs2-live-page-premium-v2
#cs2LiveMap{

    height:
        clamp(
            610px,
            65vh,
            690px
        ) !important;

    min-height:
        610px !important;
}


/*
 * Центральная карточка карты должна повторять
 * новую высоту карты.
 */

body.cs2-live-page-premium-v2
.cs2-live-map-frame-v2{

    min-height:
        610px;

    margin-bottom:
        0 !important;
}


/* ----------------------------------------------------------
   УБИРАЕМ БОЛЬШУЮ ПУСТОТУ ПЕРЕД НИЖНИМИ БЛОКАМИ
   ---------------------------------------------------------- */

body.cs2-live-page-premium-v2
.cs2-live-modes-v2,

body.cs2-live-page-premium-v2
.cs2-live-servers-v2{

    margin-top:
        16px !important;
}


/*
 * Если оба блока находятся в общем grid/flex-wrapper,
 * уменьшаем row-gap.
 */

body.cs2-live-page-premium-v2
*:has(> .cs2-live-modes-v2)
{

    row-gap:
        16px !important;
}


body.cs2-live-page-premium-v2
*:has(> .cs2-live-servers-v2)
{

    row-gap:
        16px !important;
}


/* ----------------------------------------------------------
   PREMIUM SERVER WHEEL
   ---------------------------------------------------------- */

.cs2-live-wheel-premium-v3{

    position:relative !important;

    overflow:hidden !important;

    isolation:isolate;

    padding:
        24px !important;

    border:
        1px solid
        rgba(53,151,220,.27) !important;

    border-radius:
        20px !important;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(31,143,255,.11),
            transparent 34%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(255,123,47,.055),
            transparent 28%
        ),

        linear-gradient(
            155deg,
            rgba(8,27,46,.98),
            rgba(3,13,24,.995)
        ) !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.03),

        0 24px 65px
        rgba(0,0,0,.25) !important;
}


/*
 * Верхняя световая линия.
 */

.cs2-live-wheel-premium-v3::before{

    content:"";

    position:absolute;

    left:12%;
    right:12%;
    top:0;

    height:1px;

    z-index:3;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(48,177,255,.72),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(48,177,255,.25);
}


/*
 * Декоративное свечение вокруг колеса.
 */

.cs2-live-wheel-halo-v3{

    position:absolute;

    left:50%;
    top:52%;

    width:
        min(
            480px,
            72vw
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(-50%,-50%);

    border-radius:
        50%;

    pointer-events:none;

    z-index:0;

    background:
        radial-gradient(
            circle,
            rgba(39,155,255,.09),
            rgba(39,155,255,.025) 44%,
            transparent 68%
        );

    box-shadow:
        0 0 100px
        rgba(27,135,255,.08);
}


/* ----------------------------------------------------------
   WHEEL TITLE
   ---------------------------------------------------------- */

.cs2-live-wheel-title-v3{

    position:relative;

    z-index:4;

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:
        18px !important;

    padding-left:
        13px;

    color:
        #f1f8ff !important;

    font-size:
        15px !important;

    font-weight:
        950 !important;

    letter-spacing:
        .04em !important;
}


.cs2-live-wheel-title-v3::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:3px;
    height:17px;

    transform:
        translateY(-50%);

    border-radius:
        99px;

    background:
        linear-gradient(
            180deg,
            #3cc6ff,
            #177dff
        );

    box-shadow:
        0 0 15px
        rgba(52,179,255,.42);
}


/* ----------------------------------------------------------
   CANVAS / SVG WHEEL
   ---------------------------------------------------------- */

.cs2-live-wheel-premium-v3
canvas,

.cs2-live-wheel-premium-v3
svg{

    position:relative;

    z-index:2;

    display:block;

    margin-left:auto;
    margin-right:auto;

    max-width:
        100%;

    filter:

        drop-shadow(
            0 20px 45px
            rgba(0,0,0,.38)
        )

        drop-shadow(
            0 0 22px
            rgba(31,146,255,.12)
        );
}


.cs2-live-wheel-canvas-v3,
.cs2-live-wheel-svg-v3{

    border-radius:
        50%;
}


/*
 * Если колесо SVG, делаем линии немного выразительнее,
 * не меняя заливки сегментов.
 */

.cs2-live-wheel-svg-v3
path{

    stroke:
        rgba(193,229,255,.18);

    stroke-width:
        1;
}


/* ----------------------------------------------------------
   WHEEL CENTER EFFECT
   ---------------------------------------------------------- */

.cs2-live-wheel-premium-v3
canvas::after{

    content:"";

    position:absolute;

    inset:42%;

    border-radius:50%;

    background:
        #07192a;
}


/* ----------------------------------------------------------
   SPIN BUTTON
   ---------------------------------------------------------- */

.cs2-live-wheel-spin-v3{

    position:relative;

    z-index:5;

    min-width:
        190px;

    min-height:
        48px;

    padding:
        0 24px !important;

    border:
        1px solid
        rgba(65,190,255,.52) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #127fe9,
            #22aaf5
        ) !important;

    color:
        #fff !important;

    font-weight:
        950 !important;

    letter-spacing:
        .035em;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.18),

        0 12px 30px
        rgba(13,129,230,.24),

        0 0 26px
        rgba(41,164,255,.11) !important;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}


.cs2-live-wheel-spin-v3:hover{

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.20),

        0 17px 38px
        rgba(13,129,230,.30),

        0 0 32px
        rgba(41,164,255,.16) !important;
}


.cs2-live-wheel-spin-v3:active{

    transform:
        translateY(0);
}


/* ----------------------------------------------------------
   GENERIC TEXT INSIDE WHEEL
   ---------------------------------------------------------- */

.cs2-live-wheel-premium-v3 p{

    position:relative;

    z-index:3;

    color:
        #7fa4bf !important;
}


.cs2-live-wheel-premium-v3 strong{

    color:
        #e9f6ff;
}


/* ----------------------------------------------------------
   RESULT / SELECTED SERVER
   ---------------------------------------------------------- */

.cs2-live-wheel-premium-v3
[class*="result"],

.cs2-live-wheel-premium-v3
[class*="winner"],

.cs2-live-wheel-premium-v3
[class*="selected"]{

    position:relative;

    z-index:4;

    border:
        1px solid
        rgba(57,172,246,.24) !important;

    border-radius:
        12px !important;

    background:
        rgba(5,20,34,.88) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(10px);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media
(max-width:1450px){

    body.cs2-live-page-premium-v2
    #cs2LiveMap{

        height:
            590px !important;

        min-height:
            590px !important;
    }


    body.cs2-live-page-premium-v2
    .cs2-live-map-frame-v2{

        min-height:
            590px;
    }
}


@media
(max-width:900px){

    body.cs2-live-page-premium-v2
    #cs2LiveMap{

        height:
            520px !important;

        min-height:
            520px !important;
    }


    body.cs2-live-page-premium-v2
    .cs2-live-map-frame-v2{

        min-height:
            520px;
    }


    .cs2-live-wheel-premium-v3{

        padding:
            18px !important;
    }
}


/* CS2_LIVE_LAYOUT_WHEEL_PREMIUM_V3_2026_END */


/* ==========================================================
   CS2_LIVE_PAGE_V4_2026
   ========================================================== */


/* ----------------------------------------------------------
   1. MAP ALIGNMENT
   ---------------------------------------------------------- */

/*
 * По текущему скрину карта чуть ниже по высоте,
 * чем правая колонка.
 *
 * Добавляем совсем немного.
 * Внутренний Yandex engine не меняется.
 */

@media
(min-width:1201px){

    body.cs2-live-page-premium-v2
    #cs2LiveMap{

        height:
            625px !important;

        min-height:
            625px !important;
    }


    body.cs2-live-page-premium-v2
    .cs2-live-map-frame-v2{

        min-height:
            625px !important;
    }
}


/*
 * Нижние панели ближе к карте.
 */

body.cs2-live-page-premium-v2
.cs2-live-modes-v2,

body.cs2-live-page-premium-v2
.cs2-live-servers-v2{

    margin-top:
        9px !important;
}


/* ----------------------------------------------------------
   2. RECOMMENDED SERVERS
   ---------------------------------------------------------- */

.cs2-recommended-host-v4{

    border-color:
        rgba(53,147,215,.23) !important;

    background:
        linear-gradient(
            160deg,
            rgba(6,21,36,.98),
            rgba(3,12,22,.99)
        ) !important;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.18);
}


.cs2-recommended-card-v4{

    overflow:hidden;

    border-color:
        rgba(53,148,217,.23) !important;

    background:
        linear-gradient(
            160deg,
            rgba(8,25,42,.98),
            rgba(4,14,25,.99)
        ) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}


.cs2-recommended-card-v4:hover{

    transform:
        translateY(-3px);

    border-color:
        rgba(62,176,251,.45) !important;

    box-shadow:
        0 17px 36px
        rgba(0,0,0,.25);
}


.cs2-recommended-image-v4{

    transition:
        transform .30s ease,
        filter .30s ease;

    filter:
        brightness(.78)
        contrast(1.07)
        saturate(.92);
}


.cs2-recommended-card-v4:hover
.cs2-recommended-image-v4{

    transform:
        scale(1.045);

    filter:
        brightness(.88)
        contrast(1.08)
        saturate(1);
}


/* ----------------------------------------------------------
   3. OLD WHEEL -> PREMIUM V4
   ---------------------------------------------------------- */

/*
 * Старое canvas-колесо и его элементы
 * остаются в DOM как fallback,
 * но визуально заменяются новым V4.
 */

.cs2-wheel-host-v4{

    position:relative !important;

    min-height:
        600px;

    overflow:hidden !important;

    padding:
        0 !important;

    border:
        1px solid
        rgba(52,151,220,.26) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            150deg,
            #071a2c,
            #030d18
        ) !important;

    box-shadow:
        0 25px 75px
        rgba(0,0,0,.26) !important;
}


.cs2-wheel-host-v4
> :not(.cs2-wheel-v4){

    display:none !important;
}


.cs2-wheel-v4{

    position:relative;

    min-height:
        600px;

    padding:
        30px 32px 34px;

    isolation:isolate;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 31% 58%,
            rgba(26,142,255,.105),
            transparent 31%
        ),

        radial-gradient(
            circle at 88% 12%,
            rgba(255,118,39,.045),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            rgba(7,26,44,.98),
            rgba(3,13,24,.99)
        );
}


.cs2-wheel-v4::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(58,146,208,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(58,146,208,.025) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.75),
            transparent 75%
        );
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.cs2-wheel-v4-head{

    position:relative;

    z-index:10;

    display:flex;

    align-items:flex-start;

    justify-content:
        space-between;

    gap:20px;

    margin-bottom:
        20px;
}


.cs2-wheel-v4-kicker{

    display:block;

    margin-bottom:
        5px;

    color:
        #36baff;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        .19em;
}


.cs2-wheel-v4-head h2{

    position:relative;

    margin:
        0 0 8px;

    padding-left:
        14px;

    color:
        #f4f9ff;

    font-size:
        23px;

    line-height:
        1.1;

    font-weight:
        950;

    letter-spacing:
        -.02em;
}


.cs2-wheel-v4-head h2::before{

    content:"";

    position:absolute;

    left:0;
    top:2px;

    bottom:2px;

    width:3px;

    border-radius:
        99px;

    background:
        linear-gradient(
            #42c7ff,
            #167dff
        );

    box-shadow:
        0 0 16px
        rgba(54,181,255,.43);
}


.cs2-wheel-v4-head p{

    margin:0;

    color:
        #7298b4;

    font-size:
        12px;

    line-height:
        1.5;
}


.cs2-wheel-v4-live{

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(51,187,124,.22);

    border-radius:
        9px;

    background:
        rgba(11,50,38,.32);

    color:
        #65e5a2;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .12em;
}


.cs2-wheel-v4-live i{

    width:7px;
    height:7px;

    border-radius:
        50%;

    background:
        #2ce27d;

    box-shadow:
        0 0 12px
        rgba(44,226,125,.50);
}


/* ----------------------------------------------------------
   GRID
   ---------------------------------------------------------- */

.cs2-wheel-v4-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:
        minmax(420px, .9fr)
        minmax(420px, 1.1fr);

    align-items:center;

    gap:
        55px;

    min-height:
        475px;
}


/* ----------------------------------------------------------
   WHEEL STAGE
   ---------------------------------------------------------- */

.cs2-wheel-v4-stage{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    min-height:
        440px;
}


.cs2-wheel-v4-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:
        410px;

    height:
        410px;

    transform:
        translate(-50%,-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(34,143,255,.13),
            rgba(34,143,255,.035) 52%,
            transparent 72%
        );

    box-shadow:
        0 0 100px
        rgba(31,131,255,.08);
}


/* ----------------------------------------------------------
   POINTER
   ---------------------------------------------------------- */

.cs2-wheel-v4-pointer{

    position:absolute;

    left:50%;
    top:15px;

    z-index:30;

    transform:
        translateX(-50%);

    width:40px;
    height:48px;

    filter:
        drop-shadow(
            0 7px 10px
            rgba(0,0,0,.40)
        );
}


.cs2-wheel-v4-pointer::before{

    content:"";

    position:absolute;

    left:5px;
    top:0;

    width:30px;
    height:30px;

    border-radius:
        9px 9px 4px 4px;

    background:
        linear-gradient(
            145deg,
            #f3fbff,
            #7bcaff
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );
}


.cs2-wheel-v4-pointer span{

    position:absolute;

    left:17px;
    top:3px;

    width:6px;
    height:6px;

    border-radius:
        50%;

    background:
        #168eff;
}


/* ----------------------------------------------------------
   WHEEL
   ---------------------------------------------------------- */

.cs2-wheel-v4-disc{

    position:relative;

    z-index:10;

    width:
        370px;

    height:
        370px;

    border-radius:
        50%;

    padding:
        9px;

    background:
        linear-gradient(
            145deg,
            rgba(89,185,255,.50),
            rgba(8,48,82,.82)
        );

    box-shadow:

        0 0 0 1px
        rgba(96,188,255,.24),

        0 0 0 8px
        rgba(7,31,52,.72),

        0 22px 55px
        rgba(0,0,0,.38),

        0 0 45px
        rgba(34,145,255,.11);
}


.cs2-wheel-v4-wheel{

    position:relative;

    width:100%;
    height:100%;

    border-radius:
        50%;

    overflow:hidden;

    border:
        1px solid
        rgba(214,241,255,.24);

    box-shadow:
        inset 0 0 45px
        rgba(0,0,0,.20);

    transition:
        transform 4.1s
        cubic-bezier(
            .11,
            .68,
            .12,
            1
        );
}


.cs2-wheel-v4-wheel::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            transparent 0 46%,
            rgba(255,255,255,.025) 47%,
            transparent 61%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   SEGMENT LABELS
   ---------------------------------------------------------- */

.cs2-wheel-v4-segment-label{

    position:absolute;

    left:50%;
    top:50%;

    width:135px;

    margin-left:
        -67px;

    margin-top:
        -11px;

    transform-origin:
        67px 11px;

    color:#fff;

    font-size:
        9px;

    font-weight:
        850;

    line-height:
        1.15;

    text-align:center;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.50);

    pointer-events:none;
}


.cs2-wheel-v4-segment-label span{

    display:block;

    max-width:
        125px;

    overflow:hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ----------------------------------------------------------
   CENTER
   ---------------------------------------------------------- */

.cs2-wheel-v4-center{

    position:absolute;

    left:50%;
    top:50%;

    z-index:20;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    width:82px;
    height:82px;

    transform:
        translate(-50%,-50%);

    border:
        2px solid
        rgba(73,178,248,.48);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 40% 32%,
            #123f63,
            #061624 70%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 0 0 7px
        rgba(3,19,32,.88),

        0 0 28px
        rgba(33,151,255,.22);
}


.cs2-wheel-v4-center span{

    color:
        #fff;

    font-size:
        16px;

    font-weight:
        950;
}


.cs2-wheel-v4-center small{

    margin-top:
        2px;

    color:
        #32b8ff;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}


/* ----------------------------------------------------------
   RIGHT SIDE
   ---------------------------------------------------------- */

.cs2-wheel-v4-side{

    display:flex;

    flex-direction:column;

    gap:
        14px;
}


.cs2-wheel-v4-info,

.cs2-wheel-v4-result{

    border:
        1px solid
        rgba(53,151,220,.22);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(7,28,48,.88),
            rgba(4,17,30,.91)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.cs2-wheel-v4-info{

    padding:
        20px;
}


.cs2-wheel-v4-info-label{

    display:block;

    margin-bottom:
        8px;

    color:
        #39b9ff;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}


.cs2-wheel-v4-info strong{

    display:block;

    margin-bottom:
        7px;

    color:
        #f1f8ff;

    font-size:
        17px;

    font-weight:
        900;
}


.cs2-wheel-v4-info p{

    margin:0;

    color:
        #7397b1;

    font-size:
        11px;

    line-height:
        1.55;
}


/* ----------------------------------------------------------
   RESULT
   ---------------------------------------------------------- */

.cs2-wheel-v4-result{

    min-height:
        112px;

    padding:
        17px 19px;
}


.cs2-wheel-v4-result > span{

    display:block;

    margin-bottom:
        7px;

    color:
        #668ca7;

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .15em;
}


.cs2-wheel-v4-result strong{

    display:block;

    color:
        #a9c5d8;

    font-size:
        14px;

    line-height:
        1.3;
}


.cs2-wheel-v4-result small{

    display:block;

    margin-top:
        6px;

    color:
        #6889a1;

    font-size:
        10px;
}


.cs2-wheel-v4-result.has-result{

    border-color:
        rgba(46,201,122,.29);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(45,211,125,.07),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(7,29,47,.92),
            rgba(4,18,29,.94)
        );
}


.cs2-wheel-v4-result.has-result
strong{

    color:
        #ecf9ff;
}


.cs2-wheel-v4-result a{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-top:
        12px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(49,210,127,.34);

    border-radius:
        8px;

    color:
        #5aeca1 !important;

    background:
        rgba(40,177,105,.08);

    font-size:
        9px;

    font-weight:
        900;

    text-decoration:
        none !important;
}


/* ----------------------------------------------------------
   NEW SPIN BUTTON
   ---------------------------------------------------------- */

.cs2-wheel-v4-spin{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:
        10px;

    width:100%;

    min-height:
        54px;

    padding:
        0 25px;

    border:
        1px solid
        rgba(79,195,255,.56);

    border-radius:
        12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #107eea 0%,
            #1da3f4 55%,
            #28b9f8 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.18),

        0 12px 32px
        rgba(9,127,230,.22);

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        950;

    letter-spacing:
        .05em;

    cursor:pointer;

    overflow:hidden;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}


.cs2-wheel-v4-spin::before{

    content:"";

    position:absolute;

    left:-50%;
    top:0;

    width:35%;
    height:100%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.17),
            transparent
        );

    transition:
        left .35s ease;
}


.cs2-wheel-v4-spin:hover{

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.20),

        0 17px 38px
        rgba(9,127,230,.29);
}


.cs2-wheel-v4-spin:hover::before{

    left:
        120%;
}


.cs2-wheel-v4-spin:disabled{

    cursor:
        wait;

    opacity:
        .82;
}


.cs2-wheel-v4-spin.is-spinning
.cs2-wheel-v4-dice{

    transform:
        rotate(360deg);
}


.cs2-wheel-v4-dice{

    display:inline-block;

    color:
        #fff;

    font-size:
        14px;

    transition:
        transform .7s ease;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media
(max-width:1100px){

    .cs2-wheel-v4-grid{

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .cs2-wheel-v4{

        padding:
            23px;
    }
}


@media
(max-width:650px){

    .cs2-wheel-v4-disc{

        width:
            310px;

        height:
            310px;
    }


    .cs2-wheel-v4-grid{

        min-height:
            auto;
    }


    .cs2-wheel-v4-stage{

        min-height:
            370px;
    }
}


/* CS2_LIVE_PAGE_V4_2026_END */