/*Обнуление*/
 * {
     padding: 0;
     margin: 0;
     border: 0;
}
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 :focus, :active {
     outline: none;
}
 a:focus, a:active {
     outline: none;
}
 nav, footer, header, aside {
     display: block;
}
 html, body {
     height: 100%;
     width: 100%;
     font-size: 100%;
     line-height: 1;
     font-size: 14px;
     -ms-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
}
 input, button, textarea {
     font-family: inherit;
}
 input::-ms-clear {
     display: none;
}
 button {
     cursor: pointer;
}
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
}
 a, a:visited {
     text-decoration: none;
}
 a:hover {
     text-decoration: none;
}
 ul li {
     list-style: none;
}
 img {
     vertical-align: top;
}
 h1, h2, h3, h4, h5, h6 {
     font-size: inherit;
     font-weight: 400;
}
/*--------------------*/


body {
    background-color: #0D0D36;
}
.wrapper {
    position: relative;
    width: 100%;
    min-width: 100dvw;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

img,
picture {
    display: block;
    width: 100%;
    height: auto;
    z-index: 2;
}

.content_wrapper{
    position: relative;
    width: 100dvw;
    height: 177.78dvw;
}

.main{
    position: relative;
    height: 69.95%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fone {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/fone.jpg?v=2026.09.000') center / cover no-repeat;
    border-bottom: 0.2dvh solid #343444;
}

.main-content{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.top-menu{
    position: relative;
    padding-top: 7.4%;
    margin-top: 0.93%;
    height: 0;
}

.logo,
.tel,
.slack-chat,
.page-title,
.date-and-time,
.two-lucky-ones,
.party{
    position: absolute;
    height: auto;
}

.logo{
    left:2.31%;
    top: 11.54%;
    width: 12.13%;
}

.tel{
    right: 8.24%;
    top: 24.36%;
    width: 19.35%;
}


.slack-chat{
    right:2.23%;
    top: 20.51%;
    width: 4.07%;
}

.page-title{
    left: 2.87%;
    top: 8.94%;
    width: 83.43%;
}

.date-and-time{
    left: 2.31%;
    top: 24.94%;
    width: 35.46%;
}

.two-lucky-ones{
    left: 2.31%;
    top: 30.32%;
    width: 46.30%;
}

.party{
    left:51.39%;
    top: 30.32%;
    width: 46.30%;
}

.two-lucky-ones-img,
.party-img,
.tel-button a{
    position: relative;
    z-index: 2;
}

.two-lucky-ones .blur,
.party .blur,
.tel-button .blur{
    z-index: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    backdrop-filter: blur(min(0.4dvw, 0.4dvh));
    -webkit-backdrop-filter: blur(min(0.4dvw, 0.4dvh));
    background: rgba(0,0,0,.2);
    clip-path: inset(0.266% 0.1% 0.266% 0.1% round 10.372%);
}

.main-player{
    position: absolute;
    left:26.25%;
    top: 46%;
    width: 47.50%;
    height: auto;
}

.broadcast_wrapper{
    position: absolute;
    left:12.87%;
    top: 54.7%;
    width: 74.07%;
    height: 35.65%;
    background: url('../img/video.svg?v=2026.09.000') center / 100% 100% no-repeat;
}

.broadcast_wrapper.no-bg {
    background-image: none !important;
}

.broadcast{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.broadcast iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    /* Сжимаем iframe ровно в 2 раза */
    transform: scale(0.25); 
    /* Точка масштабирования — левый верхний угол */
    transform-origin: top left; 
}

.slack-chat-button{
    position: absolute;
    left:2.31%;
    top: 92.63%;
    width: 46.20%;
    height: auto;
}

.tel-button{
    position: absolute;
    left:51.3%;
    top: 92.63%;
    width: 46.39%;
    height: auto;
}

.footer{
    position: relative;
    height: 30.05%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-footer{
    position: relative;
    padding-top: 17.31%;
    height: 0;
    width: 100%;
}
.logo-footer img{
    position: absolute;
    width: 12.04%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

.copyright{
    position: relative;
    width: 100%;
}
.copyright img{
    width: 59.26%;
    height: auto;
    margin: 0 auto;
}

.planets-wrapper{
    position: relative;
    padding-top: 26.20%;
    height: 0;
    width: 100%;
}

.planets {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    row-gap: 3.5%;
    column-gap: 0.93%;
}

.planet {
    flex: 0 0 10.76%;
    width: 10.76%;
    height: 0;
    padding-top: 10.76%;

    background-image: url("../img/planets.png");
    background-repeat: no-repeat;
    background-size: 400% 300%;
}

/* Первый ряд */
.planet:nth-child(1) {
    background-position: 0% 0%;
}

.planet:nth-child(2) {
    background-position: 33.333% 0%;
}

.planet:nth-child(3) {
    background-position: 66.666% 0%;
}

.planet:nth-child(4) {
    background-position: 100% 0%;
}

/* Второй ряд */
.planet:nth-child(5) {
    background-position: 0% 50%;
}

.planet:nth-child(6) {
    background-position: 33.333% 50%;
}

.planet:nth-child(7) {
    background-position: 66.666% 50%;
}

.planet:nth-child(8) {
    background-position: 100% 50%;
}

/* Третий ряд */
.planet:nth-child(9) {
    background-position: 0% 100%;
}

.planet:nth-child(10) {
    background-position: 33.333% 100%;
}

.planet:nth-child(11) {
    background-position: 66.666% 100%;
}

.planet:nth-child(12) {
    background-position: 100% 100%;
}


@media (min-aspect-ratio: 1/1) {
    .content_wrapper{
        margin: 0 auto;
        width: 112.42dvh;
        height: 100dvh;
    }

    .main{
        height: 68.77%;
        overflow: visible;
    }

    .fone {
        left: calc(40.74% - 50dvw);
        top: -15.14%;
        width: calc(100dvw + 18.52%);
        height: 130.07%;
        clip-path: inset(0px 0px 11.275% 0px);
    }

    .top-menu{
        position: relative;
        padding-top: 6.6%;
        margin-top: 0;
    }

    .page-title{
        left: 0;
        top: 18.16%;
        width: 35.56%;
    }

    .date-and-time{
        left: 0;
        top: 49.75%;
        width: 34.26%;
    }

    .two-lucky-ones{
        left: 0;
        top: 59.64%;
        width: 49.63%;
    }

    .party{
        left:0;
        top: 78.71%;
        width: 49.63%;
    }

    .two-lucky-ones .blur,
    .party .blur,
    .tel-button .blur{
        clip-path: inset(0.266% 0.1% 0.266% 0.1% round 7.9%);
    }

    .main-player{
        left:50.62%;
        top: 16.65%;
        width: 31.67%;
    }

    .broadcast_wrapper{
        left:50.62%;
        top: 29.06%;
        width: 49.38%;
        height: 45.61%;
    }

    .slack-chat-button{
        left:50.62%;
        top: 77.6%;
        width: 23.7%;
    }

    .tel-button{
        left: 76.17%;
        top: 77.6%;
        width: 23.83%;
    }

    .footer{
        height: 31.23%;
    }

    .logo-footer{
        padding-top: 11.36%;
    }

    .logo-footer img{
        width: 8.02%;
    }

    .copyright {
        padding-top: 3.4%;
    }

    .copyright img{
        width: 39.51%;
    }

    .planets-wrapper{
        padding-top: 6.6%;
    }

    .planets {
        column-gap: 1.23%;
    }

    .planet {
        flex: 0 0 6.42%;
        width: 6.42%;
        padding-top: 6.42%;
    }
}

@media (max-aspect-ratio: 1280/1080) and (min-aspect-ratio: 1.001/1){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 95.29dvw;
        height: 80.76dvw;
    }
    .fone {
        top: -17.14%;
        clip-path: inset(0px 0px 9.9% 0px);
    }
}

@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1/1){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 95.29dvw;
        height: 80.76dvw;
    }
    .fone {
        top: -17.14%;
        clip-path: inset(0px 0px 9.9% 0px);
    }
}

@media (max-aspect-ratio: 999/1000) and (min-aspect-ratio: 1080/1920){
    .content_wrapper{
        margin: 0 auto;
        width: 56.25dvh;
        height: 100dvh;
    }
    .main{
        overflow: visible;
    }
    .fone {
        left: calc(50% - 50dvw);
        top: 0%;
        width: 100dvw;
        height: 100%;
    }
}

@media (max-aspect-ratio: 922/1920){

    .wrapper {
        position: relative;
        width: 100%;
        min-width: 100dvw;
        height: 100%;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .content_wrapper{
        height: 551.03dvw;
    }

    .main{
        height: 60.26%;
    }

    .fone {
        left: -298.97%;
        top: 0;
        width: 607.44%;
        height: 122.78%;
    }

    .top-menu{
        padding-top: 17.69%;
        margin-top: 0;
    }

    .logo{
        left:4.1%;
        top: 6.9%;
        width: 33.33%;
    }

    .tel{
        right: 20.51%;
        top: 28.99%;
        width: 9.74%;
    }


    .slack-chat{
        right:4.1%;
        top: 23.19%;
        width: 11.28%;
    }

    .page-title{
        left: 4.62%;
        top: 8.03%;
        width: 87.18%;
    }


    .date-and-time,
    .two-lucky-ones,
    .party,
    .main-player,
    .broadcast_wrapper,
    .slack-chat-button,
    .tel-button{
        left: 4.1%;
        width: 91.79%;
    }

    .date-and-time{
        top: 16.68%;
    }

    .two-lucky-ones{
        top: 67.03%;
    }

    .party{
        top: 86.18%;
    }

    .main-player{
        top: 21.7%;
    }

    .broadcast_wrapper{
        top: 31.12%;
        height: 15.89%;
    }

    .slack-chat-button{
        top: 49.27%;
    }

    .tel-button{
        top: 58.69%;
    }

    .footer{
        height: 39.74%;
    }

    .logo-footer{
        padding-top: 47.44%;
    }

    .logo-footer img{
        width: 33.33%;
    }

    .copyright img{
        width: 89.74%;
    }

    .planets-wrapper{
        padding-top: 137.44%;
    }

    .planets {
        column-gap:4.5%;
    }

    .planet {
        flex: 0 0 26.92%;
        width: 26.92%;
        padding-top: 26.92%;
    }

}