@font-face{font-family:"Montserrat-Bold";src:url("../fonts/Montserrat-Bold.ttf")}
@font-face{font-family:"Montserrat-Regular";src:url("../fonts/Montserrat-Regular.ttf")}
@font-face{font-family:"Montserrat-Medium";src:url("../fonts/Montserrat-Medium.ttf")}
@font-face{font-family:"robotomono-bold";src:url("../fonts/robotomono-bold.ttf")}
@font-face{font-family:"robotomono-regular";src:url("../fonts/robotomono-regular.ttf")}
body, html{padding:0;margin:0;font-family:'Montserrat-Regular'}
.small-refresh{font-size:70%}
#start_title{white-space: nowrap}
.environment_previous,.environment_result,.environment_current,.social_previous,.social_result,.social_current,.economy_previous,.economy_result,.economy_current,
.institutional_previous,.institutional_result,.institutional_current{font-family: 'robotomono-regular'}
.hide,#mobile_rotate,#prize_gold,#prize_silver,#prize_bronze,br.mobile,.mobile .hide-mobile{display:none}
.refresh{right:inherit !important;margin-left:1%}
#info_panel span{font-family:'Montserrat-Bold'}
.dark{border-bottom: 2px solid #333333 !important}
body{overflow-y:hidden;overflow-x:hidden;background:#ffffff;color:#333333}
ul{padding-left:35px}
.active td{background:#F23652;color:#ffffff}
#mobile_page{z-index:777;width:100%;height:100%;display:none;background:#ffffff}
.button .title_button{border:solid 2px #ffffff}
.button .title_button:hover{outline: 2px solid #ffffff}
.button .title_button{font-family:'Montserrat-Medium';position:relative}
.button .next_bg_button,.button .bg_button{width:0;height:0}
.next .title_button{border-color:#333333}
.button.next .title_button:hover{outline: 2px solid #333333}
.button{color:#333333;text-align:center;z-index:1;position:fixed;bottom:4%;border:solid 2px transparent;cursor:pointer}
.gradient{bottom:0;height:80%;width:50%;z-index:1;background:linear-gradient(180deg,rgba(23,23,23,0) 0%,rgba(209,209,209,0) 0.01%,rgba(23,23,23,0.8) 100%)}
.gradient.mobile{top:10%;height:30%;width:100%}
.gradient.mobile.mobile-short{top:10%;height:16%;width:100%}
#logo_gradient,#logo_final_gradient{width:100%;height:100%;z-index:1;position:absolute;background:linear-gradient(90deg,rgb(255 255 255/0%)0%,rgb(255 255 255/0%)10%,rgb(255 255 255)35%)}
#mobile_rotate{width:100%;height:100%;background:url("../images/game/rotate.jpg") center center no-repeat #fff;background-size:contain;position:fixed;z-index:3}
#logo,#logo_final{background:url("../images/game/logo.jpg") no-repeat;background-size:contain;position:absolute;z-index:2}
#logo_panel{position:absolute;right:0;top:12.7%}
#logo_final_panel{position:absolute;right:0;top:12.7%}
#info_panel{position:absolute;bottom:7%;color:#ffffff;z-index:2;width:44%}
#info_panel.mobile{width:85%}
.hr{width:100%;border-bottom:2px solid #FFFFFF}
.sub_title{color:#ffffff;text-align:left;font-weight:700;line-height:1.1}
.right_title{color:#333333;text-align:left;font-family:'Montserrat-Medium'}
.left_title{color:#ffffff;text-align:left;font-weight:700;line-height:100%}
.left_panel{top:34%;z-index:2}
.red{color:#F23652;line-height:250%}
.redonly{color:#F23652;font-family:'Montserrat-Medium'}
.blue{color:#B792EA}
.score_icons{float:left}
.team-name{border-top:none;border-left:none;border-right:none;outline:none;border-bottom:solid 2px #333333;color:#333333}
#mobile_page,.left_panel,.right_panel,.li-icons,.left_image,.gradient,.button .next_bg_button,#start_page .button,#final_page .button,.title,.button .bg_button{position:absolute}
.top_panel{width:100%;position:absolute;background:#F23652;z-index:2}
.dashboard{height:50%;margin:0 auto}
.metric{float:left;color:#ffffff;display:flex}
.metric.first{margin-left:0 !important}
.metric_icon,.pos,.team_name,.score{float:left}
.prize{float:right}
.team_name{padding-left:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.decision{position:absolute;top:12.7%;color:#ffffff;background:#B792EA;font-weight:700}
.decision.mobile{top:22%}
.question{border:none;background:none;cursor:pointer;text-align:left}
.question:hover{background:#F7F1F0}
.question_title{color:#333333;font-family:'Montserrat-Medium'}
.question_descr{color:#333333}
.question_arrow{background:url("../images/game/arrow.png") center right no-repeat;background-size:contain}
table{width:100%;padding:0;margin:0;border-spacing:0}
td,th{font-weight:400}
.text-right{text-align:right}
.text-left{text-align:left}
.bottom-border{border-bottom:1px solid #333333}
.inherit{position:inherit}
.score_item{width:100%}
.score{font-weight:bold}
.mobile .hide-color{color:#ffffff}
.rotate{animation:rotation 2s infinite linear}
@keyframes rotation{from{transform: rotate(0deg)}to{transform:rotate(359deg)}}
.photo_autor{color:#9B9B9B;z-index:2;position:absolute}
#slide_17 .photo_autor.mobile{display:none}
.readonly_text{position:relative;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff}
.wrapper{position:relative;width:97%;margin:0 auto}
#container{overflow:auto;width:200% !important}
.ssb_sb{background-color:#333333;cursor:pointer;position:absolute;right:0;}
.ssb_sb_over{background-color:#B792EA}
.ssb_st{background-color:#D9D9D9;cursor:pointer;height:100%;position:absolute;right:0;top:0}
.parent{font-family:verdana;height:100%;position:relative}
.score{text-align:right}

#start_page{background:url("../images/game/s1_image.webp") top left no-repeat;background-size:cover}
#start_page .title{color:#ffffff;text-align:center;z-index:1;font-weight:700}
#start_page .gradient{width:100%}
#start_page .button{bottom:initial;color:#ffffff;border:solid 2px transparent}
#start_page .photo_autor{position:fixed}
#start_page .readonly_text{position:inherit;text-shadow:inherit;color:#ffffff;background:#F23652;padding:0 2% 0 2%}

#slide_1 .left_image{background:url("../images/game/s3_image.webp") top center no-repeat;background-size:cover}
#slide_1 .right_panel{top:30%}
#slide_1 .right_panel.mobile{top:42%}
#slide_1 .left_panel.mobile{top:15%}
/* Надежное центрирование главного заголовка */
#start_page #start_title {
    margin-left: 0 !important; /* Убиваем пиксельный расчет из JS */
    left: 50% !important;      /* Смещаем левый край блока ровно на центр экрана */
    transform: translateX(-50%) !important; /* Сдвигаем блок обратно на половину его собственной ширины */
    width: max-content !important; /* Блок обтягивает текст */
    max-width: 90vw !important;    /* Защита, чтобы текст переносился, если экран слишком узкий */
}

#slide_2 .left_image{background:url("../images/game/s2_image.webp") top center no-repeat;background-size:cover}
#slide_2 .right_panel{top:14%}
#slide_2 .right_panel.mobile{top:42%}
#slide_2 .readonly_text{position:inherit;text-shadow:inherit;color:#ffffff;background:#F23652;padding:0 2% 0 2%;white-space: nowrap}
#slide_2 .left_panel{top:15%}
#slide_2 .left_panel.mobile{top:10%}

#slide_3 .left_image{background:url("../images/game/s4_image.webp") top center no-repeat;background-size:cover}
#slide_3 .right_panel{top:15%}
#slide_3 li{margin-bottom:0 !important}
#slide_3 .right_panel.mobile{top:42%}
#slide_3 .left_panel.mobile{top:20%}

#slide_4 .left_image{background:url("../images/game/s5_image.webp") top center no-repeat;background-size:cover}
#slide_4 .right_panel{top:20%}
#slide_4 ul {list-style:none;padding-left:0px !important}
#slide_4 .right_panel.mobile{top:42%}
#slide_4 .left_panel{top:34%}
#slide_4 .left_panel.mobile{top:20%}

#slide_5 .left_image{background:url("../images/game/s6_image.webp") top center no-repeat;background-size:cover}
#slide_5 .right_panel{top:42%}
#slide_5 .right_panel.mobile{top:42%}

#slide_6 .left_image{background:url("../images/game/s7_image.webp") top center no-repeat;background-size:cover}
#slide_6 .right_panel, #slide_8 .right_panel, #slide_10 .right_panel, #slide_12 .right_panel, #slide_14 .right_panel{top:20%;width:50% !important;right:0 !important;}
#slide_6 .right_panel.mobile, #slide_8 .right_panel.mobile, #slide_10 .right_panel.mobile, #slide_12 .right_panel.mobile, #slide_14 .right_panel.mobile{width:100% !important;}
#slide_6 .right_panel.mobile{top:42%}
#slide_6 .left_panel{top:30%}
#slide_6 .left_panel.mobile{top:34%}
#slide_6 .sub_title li,
#slide_6 .sub_title p {
    font-size: inherit !important; /* Наследование размеров от родительского div */
}

#slide_7 .left_panel, #slide_9 .left_panel, #slide_11 .left_panel, #slide_13 .left_panel, #slide_15 .left_panel{top:26%;width:90% !important;right:0 !important;}
#slide_7 .left_panel.mobile, #slide_9 .left_panel.mobile, #slide_11 .left_panel.mobile, #slide_13 .left_panel.mobile, #slide_15 .left_panel.mobile{top:15%}
#slide_7 .decision.mobile,#slide_9 .decision.mobile,#slide_11 .decision.mobile,#slide_13 .decision.mobile,#slide_15 .decision.mobile{top:9%}
#slide_7 .right_panel.mobile{top:42%}

#slide_8 .left_image{background:url("../images/game/s8_image.webp") top center no-repeat;background-size:cover}
#slide_8 .right_panel.mobile{top:42%}
#slide_8 .left_panel{top:30%}
#slide_8 .left_panel.mobile{top:34%}

#slide_10 .left_image{background:url("../images/game/s9_image.webp") top center no-repeat;background-size:cover}
#slide_10 .right_panel.mobile{top:42%}
#slide_10 .left_panel{top:25%}
#slide_10 .left_panel.mobile{top:34%}

#slide_12 .left_image{background:url("../images/game/s10_image.webp") 15% top no-repeat;background-size:cover}
#slide_12 .right_panel.mobile{top:42%}
#slide_14 .left_image{background:url("../images/game/s11_image.webp") top center no-repeat;background-size:cover}
#slide_14 .right_panel.mobile{top:42%}

#slide_16 .left_image{background:url("../images/game/s12_image.webp") top center no-repeat;background-size:cover}
#slide_16 .right_panel{top:5%}
#slide_16 ul {list-style:none;padding-left:0 !important}
#slide_16 .right_panel.mobile{top:28%}

#slide_16_2 .left_image{background:url("../images/game/s12_image.webp") top center no-repeat;background-size:cover}
#slide_16_2 .right_panel{top:5%}
#slide_16_2 li{margin-bottom:0 !important}
#slide_16_2 .right_panel.mobile{top:32%}

#slide_17 .left_image{background:url("../images/game/s13_image.webp") top center no-repeat;background-size:cover}
#slide_17 .right_panel{top:12%}
#slide_17 .left_panel.mobile{top:12%}
#slide_17 .right_panel.mobile{top:32%}

#final_page{background:url("../images/game/s14_image.webp") top center no-repeat;background-size:cover}
#final_page .title{color:#ffffff;text-align:left;z-index:1;font-weight:700}
#final_page .gradient{width:100%;height:50%}
#final_page .gradient.mobile{height:80%;bottom:0;top:inherit}
#final_page .button{bottom:initial;color:#ffffff;border:solid 2px transparent;bottom:7%}
#final_page .button.mobile{bottom:25%}
#final_page .button.ranking.mobile{bottom:37%}
.button.next.mobile{bottom:2%}
.button.next{bottom:3%}

/* Пространство вокруг списка */
.sub_title ul {
    margin-top: 5px !important;    /* Отступ ПЕРЕД списком */
    margin-bottom: 5px !important; /* Отступ ПОСЛЕ списка */
}

/* Расстояние между самими пунктами  */
.sub_title li {
    margin-bottom: 5px !important; /* Расстояние между пунктами 1 и 2 */
}

/* Текст под списком */
.sub_title p {
    margin-top: 5px !important;    /* Отступ перед финальной фразой */
    margin-bottom: 0 !important;   /* Убираем отступ снизу, если он не нужен */
}


/* Отступы для пунктов списка правил */
#slide_3 .rules_list li {
    margin-bottom: 2vh !important;
}

/* Убираем отступ у последнего пункта списка для пунктов списка правил */
#slide_3 .rules_list li:last-child {
    margin-bottom: 0 !important;
}


.ssb_st, .ssb_sb, .ssb_sb_over {
    right: -7px !important;
}


@media (max-width: 431px) {
    /* Адаптивный размер шрифта на последней странице (например, "WELL-BALANCED BONUS  10.7", чтобы числа не съезжали) */
    .final_score_big_text {
        width: 100% !important;
        max-width: 100% !important;    /* Защита, чтобы не вылезло за экран */
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Настройка строк */
    .final_score_big_text li {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        white-space: nowrap !important;
        width: 100%;
        gap: 15px !important;
        margin-bottom: 0.8vh !important;
    }

    .final_score_big_text li > span[style*="float:right"],
    .final_score_big_text li > strong[style*="float:right"],
    .final_score_big_text .big-font,
    .final_score_big_text .final_result {
        float: none !important;
        font-size: 5.0vw !important; /* Размер, при котором текст занимает ровно строку */
    }

    /* Прячем пустые иконки-распорки */
    .final_score_big_text .icon-wrap {
        display: none !important;
    }


    /* --- Настройка кнопок с ответами --- */

    /* Отступ между вариантом ответа (A/B) и его описанием */
    .question_title {
        margin-bottom: 5px !important;
    }

    /* Отступ между описанием и красной стрелочкой */
    .question_descr {
        margin-bottom: 5px !important;
    }

    /* Текст финальной страницы */
    #final_page #final_title {
        white-space: normal !important; /* Разрешаем тексту переноситься на новые строки */
        width: max-content !important;  /* Блок облегает текст... */
        max-width: 90vw !important;     /* ...но никогда не превышает 90% ширины экрана (оставляет поля по бокам) */

        /* Идеальное центрирование (убиваем кривые расчеты из JS) */
        margin-left: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        text-align: center !important;  /* Центрируем сам текст (с длинным текстом так смотрится лучше всего) */
        line-height: 1.3 !important;    /* Добавляем воздух между строками */

        /* Шрифт подстраивается сам, но не меньше 0px и не больше 25px */
        font-size: clamp(0px, 6.5vw, 25px) !important;
    }

    #slide_8 .left_title {
        line-height: 0.9 !important;
    }

    #slide_17 .gradient {
        height: 26% !important;
        top: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }

}


/* Для планшетов - почти квадратных экранов */
@media (max-width: 1250px) and (min-width: 431px) {
    .left_panel .left_title {
        font-size: min(4.5vw, 7vh) !important; /* Размер зависит от ширины или высоты экрана, смотря во что упрётся первым, текст будет плавно сжиматься */
    }
    .decision {
        font-size: min(4.5vw, 7vh) !important;
    }
}



@media (min-width: 431px) {
    /* Адаптивный размер шрифта на последней странице (например, "WELL-BALANCED BONUS  10.7", чтобы числа не съезжали) */
    .final_score_big_text {
        width: 100% !important;
        max-width: 100% !important;    /* Защита, чтобы не вылезло за экран */
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Настройка строк */
    .final_score_big_text li {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        white-space: nowrap !important;
        width: 100%;
        gap: 15px !important;
        margin-bottom: 0.8vh !important;
    }

    .final_score_big_text li > span[style*="float:right"],
    .final_score_big_text li > strong[style*="float:right"],
    .final_score_big_text .big-font,
    .final_score_big_text .final_result {
        float: none !important;
        font-size: 2.2vw !important; /* Размер, при котором текст занимает ровно строку */
    }

    /* Прячем пустые иконки-распорки */
    .final_score_big_text .icon-wrap {
        display: none !important;
    }

    #slide_8 .left_title {
        font-size: 3.5vw !important;
    }


    /* Текст финальной страницы */
    #final_page #final_title {
        white-space: normal !important; /* Разрешаем тексту переноситься на новые строки */
        width: max-content !important;  /* Блок облегает текст... */
        max-width: 90vw !important;     /* ...но никогда не превышает 90% ширины экрана (оставляет поля по бокам) */

        /* Идеальное центрирование (убиваем кривые расчеты из JS) */
        margin-left: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        text-align: center !important;  /* Центрируем сам текст (с длинным текстом так смотрится лучше всего) */
        line-height: 1.3 !important;    /* Добавляем воздух между строками */

        /* Шрифт подстраивается сам, но не меньше 20px и не больше 50px */
        font-size: clamp(20px, 3.5vw, 50px) !important;
    }

    #slide_17 .gradient {
        height: 100% !important;
        top: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }
}