* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

html {
    background-color: rgba(26, 26, 26, 1);
    container-type: inline-size;
    container-name: page;
}

body {
    width: auto;
    max-width: 1440px;
    margin: 0 auto;
    background-color: rgba(26, 26, 26, 1);
}

.page-title {
    color: #BE956F;
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    width: 600px;
    margin: 16px 0 8px;
}

.flex-container {
    margin:   auto; /* Центрирование flex-container по горизонтали внутри body */
    display: flex;
    flex-direction: column; /* Изменяем направление на вертикальное */
    /* justify-content: space-around;
    align-items: center; */
    

}

.flex-header{
    width: 1214.08px;
    display: flex;
    z-index: 1;
    
    
}

.shadow {
    display: none;
}

.flex-header-left {
    width: 600px;
    display: flex;
    flex-direction: column;
    margin-left: 170px;
    z-index: 1;
    
}

.flex-header-right {
    position: relative;
    width: 405px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 119.43px;
    z-index: 1;
    
    
}

.image-header-right{
    width: 405px;
    height: 722.515px;
    flex-shrink: 0;
}

/* Lucide v0.544.0, ISC: menu, play, pause, volume, volume-1, volume-2, volume-x. */
.symbol {
    display: flex;
    width: 36px;
    height: 32.01px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 6px;
    cursor: pointer;
}


.symbol .your-svg path {
    transition: stroke 0.3s ease; 
}

.symbol:hover path {
    stroke: #BE956F; /* изменяем цвет обводки при наведении на каждый элемент SVG */
}

.title-header-left {
    width: 393.36px;
    height: 109px;
    margin-top: 58.7px;
    margin-bottom: 47.67px;
    background: url('image/title-kolobuk.svg') center center no-repeat;
    background-size: contain; /* Чтобы изображение полностью помещалось в блок */
}

.title-kolobuk-image img{
    width: 394.36px;
    height: 109px;


}

.text-header-left {
    width: 600px;
    height: 468px;
    display: flex;
    flex-direction: column;
    margin-bottom: 47.63px;
        
}

@media (min-width: 1164px) {
    .flex-header-left > .page-title {
        margin-bottom: 28px;
    }

    .flex-header-left > .text-header-left {
        height: auto;
        margin-bottom: 0;
    }

    .flex-header-left > .text-header-left p:last-child {
        margin-bottom: 0;
    }

    .flex-header-left > .button-start {
        margin-top: 48px;
    }
}


p {  
    margin-bottom: 25.6px; 
    color: var(--Kolobuk-White1, #F8F8F8);

    /* Kolobuk/Basic-16 */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */

     
}

button {
    background-color: rgba(26, 26, 26, 1);
    border: none;
}

.button-start {
    width: 600px;
    height: 71px;
    display: flex;

}

.button-image-container {
    position: relative;
    z-index: 0;
}

.button-image-container img {
    width: 600px;
    height: 71px;
    cursor: pointer;
    filter: brightness(1);
    transition: filter 0.3s;
}

.button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--Kolobuk-White1, #F8F8F8);
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s; /* Плавный переход */

}

.button-start:hover .button-text {
    color: #BE956F;
}

.button-start:hover .button-image-container img {
    filter: brightness(0) invert(1);
}

.menu-header-right{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    color: white;
    width: 36px;
    height: 32px;
    font-size: 24px;
    position: absolute;
    top: 58.7px;
    right: 24.43px;
    margin: 0;
    z-index: 3;
}

.image-header-right{
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    justify-content: flex-end;
}

.first-image-mobile {
    display: none;
}

.about-work{
    display: flex;
    
    margin-top: 58.62px;
    
}

.about-work-left{
    display: flex;
    width: 442px;
    height: 575.399px;
    flex-shrink: 0;
    margin-left: 80.35px;
    /* margin-right: 148.52px; */
}


.about-work-right{
    display: flex;
    flex-direction: column;
    width: 748.52px;
    margin-right: 169.12px;
    
    
    
}

.title-why-work {
    width: 512px;
    height: 77px;
    margin: 75.65px 88px 0px 148.52px;

}

h2 {
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 200;
    line-height: 160%; /* 76.8px */
}

.text-about-work {
    width: 600px;
    height: 370px;
    margin: 48px 0px 4.75px 148.52px ;
}

.text-about-work p {

    margin-bottom: 0px;
}

.flex-rules {
    display: flex;
    width: 1100;
    margin: 49.25px 170px 0 170px;
}

.title-rules {
    margin: 0px 304px 48px 0px;
}

.flex-rules-right {
    display: flex;
    margin: 159.24px 0px 29.5px 92px ;
}

.flex-rules-right img {
    width: 505px;
    height: 71px;
    flex-shrink: 0;
}

.text-rules p {
    margin-bottom: 0px;
}

.about-rules {
    display: flex;
    margin: 95.58px 170px 127.36px 170px;

}

.rules-left-book {
    display: flex;
    flex-direction: column;
    margin-right: 96px;

}

.book-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 502px;
    height: 274px;
    margin-bottom: 64px;
}

.book-link {
    position: relative;
}

.navy-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 112px;
    height: 45px;
    filter: brightness(1);
    transition: filter 0.3s;
}

.pravy-text:hover,
.yavy-text:hover,
.slavy-text:hover,
.navy-text:hover {
    filter: brightness(0) invert(1);
}

.slavy-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 129px;
    height: 54px;
    filter: brightness(1);
    transition: filter 0.3s;
}

.yavy-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 51px;
    filter: brightness(1);
    transition: filter 0.3s;
}

.pravy-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 135px;
    height: 45px;
    filter: brightness(1);
    transition: filter 0.3s;
}

.book-slav {
    display: flex;
    width: 502px;
    height: 274px;
}
.book-yav {
    display: flex;
    width: 502px;
    height: 274px;
    margin-bottom: 64px;
}

.book-prav {
    display: flex;
    width: 502px;
    height: 274px;
}

.book-nav p {
    width: 280px;
    height: 260px;
    margin: 0.33px 0px 14px 52.35px;
}

.book-slav p {
    width: 280px;
    height: 182px;
    margin: 0.33px 0px 87.67px 52.35px;
}

.book-yav p {
    width: 280px;
    height: 208px;
    margin: 0.33px 0px 61.67px 52.35px;
}

.book-prav p {
    width: 280px;
    height: 234px;
    margin: 0.33px 0px 35.67px 52.35px;
}

.footer {
    display: flex;
    flex-direction: column;
}

.footer-link {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 128px;
    margin: 0px 170.5px 21.84px 170.5px;
}



h4 {
   color: var(--Kolobuk-Main, #BE956F);
    /* Kolobuk/Basic-16 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */ 
}

@media (min-width: 1164px) {
    .footer-link h4 {
        line-height: 20px;
    }
}

.footer-line {
    display: flex;
    width: auto;
    height: auto;
    flex-shrink: 0;
    margin: 0 170px 20.89px;
}

.footer-line img {
    display: block;
    width: 100%;
    height: auto;
}

.copywriter {
    width: 840px;
    height: 26px;
    margin: 0px 300px 30px 300px;
}

.copywriter p {
    color: var(--Kolobuk-Grey2, #AFAFAF);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 25.6px */
}

.game-start-title {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 1100px;
    height: auto;
    flex-shrink: 0;
    margin: 28px 170px 0px 170px;
}

.game-start-title a img{
    width: 198.483px;
    height: 55px;
    max-width: none;
    flex-shrink: 0;
    margin: 0;
}

.game-start-title > a,
.game-start-title-congratulations > a {
    flex: 0 0 auto;
}

.game-start-title > audio,
.game-start-title-congratulations > audio {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.game-start-title > .hamburger-menu,
.game-start-title-congratulations > .hamburger-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 32px;
    margin: 0 0 0 auto;
    z-index: 3;
}

.game-start-title > .audio-controls + .hamburger-menu,
.game-start-title-congratulations > .audio-controls + .hamburger-menu {
    margin-left: 0;
}

.game-start-title #menu__toggle,
.game-start-title-congratulations #menu__toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 32px;
    margin: 0;
}

.audio-controls {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0 64px 0 auto;
}

.audio-controls > * {
    flex-shrink: 0; /* Запрет уменьшения размера элемента */
}


#volume-bar {
    display: none;
    width: 93.4px;
    height: 4px;
    background-color: #555;
    margin-left: 90px;
    position: absolute;
}
  
  #volume-fill {
    appearance: none;
    height: 4px;
    background: #AFAFAF;
  
  
  
  }
  
  #volume-control {
    appearance: none;
    position: absolute;
    width: 13px; /* Ширина ползунка (можете настроить по вашему желанию) */
    height: 13px; /* Высота ползунка (можете настроить по вашему желанию) */
    background-color: #AFAFAF; /* Цвет ползунка */
    border-radius: 50%; /* Круглый ползунок */
    margin-top: -9px; /* Положение ползунка по вертикали */
    cursor: pointer;
    z-index: 1; /* установка z-index поверх #volume-fill */
  }

.symbol-burger {
    width: 36px;
    height: 32px;
    margin: 11px 0px 12px 43.46px;
}

#playPauseBtn, #volumeModeBtn{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    box-shadow: none;
    appearance: none;
}

#playPauseBtn{
    margin-right: 24px;
}

#volumeModeBtn {
    margin-right: 0;
}

#lowVolumeIcon,
#mediumVolumeIcon {
    display: none !important;
}

/* Новый стиль для заднего фона трека (track-background) */
.track-background {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #AFAFAF, #555555);
    z-index: 1;
}

.conditions {
    width: 1142px;
    height: 798.57px;
    display: flex;
    margin: 42px 162.5px 68.42px 134px; 
    /* margin-top: 74px изначально*/
}

.conditions-block {
    width: 505px;
    height: 576;
    display: flex;
    flex-direction: column;
    margin: 2px 0px 136.58px 86.9px;
}

.conditions-text {
    width: 502px;
    height: 380px;
    margin: 40px 1.5px 64px 7px;
}

.conditions-block h2 {
    width: 500px;
    height: auto;
    margin: 0px 10.5px 0px 0px;
    line-height: 100%;
}

.button-start-contineus img{
    width: 505px;
    height: 71px;
}

.button-start-contineus:hover .button-text {
    color: #BE956F;
}

.button-start-contineus:hover .button-image-container img {
    filter: brightness(0) invert(1);
}

.mode-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 1100px;
    margin: 72px 170px 48px;
    gap: 48px;
}

.mode-actions {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 505px;
    flex: 0 0 505px;
}

.mode-actions .button-start-contineus,
.mode-actions .button-image-container,
.mode-actions .button-start-contineus img {
    width: 505px;
    height: 71px;
}

.mode-book {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.mode-book img {
    display: block;
    width: 460px;
    max-width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: contain;
    object-position: center top;
}

.day-lead-phone,
.day-finish-phone {
    display: none;
}

.day-book .day-card {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 366.77px;
    height: 555.33px;
    margin: 109.71px 125.99px 261.7px 143.74px;
    flex-shrink: 0;
}

.day-book .day-card img {
    display: block;
    width: 220px;
    height: auto;
}

.day-book .worlds-text {
    height: auto;
    margin-top: 140px;
}

.day-book .day-lead {
    margin-top: 0;
    margin-bottom: 16px;
}

.day-book .day-card-name {
    margin: 8px 0;
}

.day-book .day-card-wish {
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 12px;
}

.day-question,
.day-question .conditions-block,
.day-question .conditions-text {
    height: auto;
}


/* Скрытие чекбокса */
#menu__toggle {
    opacity: 0;
}

/* Контейнер меню */
.menu__box {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    right: -300px; /* изменено на right */
    width: 332px;
    height: 100%;
    margin: 0;
    /* padding: 69px 91px 742px 47px; */
    list-style: none;
    text-align: left;
    background: rgba(190, 149, 111, 0.70);
    backdrop-filter: blur(8px);
    box-shadow: -1px 0px 6px rgba(0, 0, 0, .2); /* изменено на -1px */
    transition-duration: .25s;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;
    
}

  
  /* Элементы меню */
.menu__item {
    color: var(--Kolobuk-White1, #F8F8F8);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 32px */
    text-transform: uppercase;
    margin: 32px 0;
    z-index: 2;
    
}
  

  /* Анимация бургера */
#menu__toggle:checked ~ .menu__btn > span {
    transform: rotate(45deg);
}
  
#menu__toggle:checked ~ .menu__btn > span::before {
    top: 0;
    transform: rotate(0);
}
  
#menu__toggle:checked ~ .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
  
  /* Показ меню при активации */
#menu__toggle:checked ~ .menu__box {
    visibility: visible;
    right: 0; /* изменено на right */
}
  

  
  /* Стили для closeArrow */
#closeArrow {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 74px 250px 32px 58px;
    z-index: 1000;
}
  
#closeArrow:hover {
    opacity: 0.8;
}
  
#closeArrow svg {
    fill: #f8f8f8;
}
  
  /* Закрытие меню при клике на closeArrow */
#closeArrow {
    display: none;
}
  
  #menu__toggle:checked ~ .menu__box #closeArrow {
    display: block;
}

#menu-home p,
#bukvica-list p,
#start-game p,
#contacts-call p,
#menu-help p{
    color: var(--Kolobuk-White1, #F8F8F8);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 32px */
    text-align: left;
    text-transform: uppercase;
    margin: 0 16px 32px 58px;
    white-space: nowrap;
}

#menu-help p{
    margin-bottom: 0;
}

.congratulations {
    display: flex;
    width: 1358.34px;
    height: 836.67px;
    margin-top: 37.66px;

}



.congratulations-block {
    width: 519.34px;
    height: 836.67px;
    display: flex;
    flex-direction: column;
    margin-left: 73px;

}

.congratulations-text {
    width: 505px;
    height: 318px;
    margin: 0px 0px 64px 0px;
}

.congratulations-block h2 {
    width: 462px;
    height: 77;
    display: flex;
    flex-direction: column;
    margin: 0px 43px 48px 0px;
}

.congratulations-block-inner {
    width: 505px;
    height: 578px;
    margin: 102.34px 0px 156.34px 14.36px;
}

.s4-thanks,
.s4-thanks .congratulations-block,
.s4-thanks .congratulations-block-inner,
.s4-thanks .congratulations-text {
    height: auto;
}

.game-start-title-congratulations {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 1100px;
    height: auto;
    flex-shrink: 0;
    margin: 28px 170px 0px 260px;
}

.game-start-title-congratulations a img{
    width: 198.483px;
    height: 55px;
    max-width: none;
    flex-shrink: 0;
    margin: 0;
}

.rotate {
    /* Добавляем начальный угол вращения и указываем, что элемент может быть анимирован */
    transform: rotate(0deg);
    transition: transform 90s linear;
    margin-left: -54px;
  }
  
  /* Применяем стили к изображению */
  #KOLO-RING {
    width: 839; /* Ширина изображения 100% от родительского контейнера */
    height: 837; /* Автоматическая высота для сохранения пропорций */
    
  }
  
  /* Добавляем стиль анимации для медленного вращения */
  @keyframes rotateAnimation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Применяем анимацию к элементу с классом "rotate" */
  .rotate {
    animation: rotateAnimation 130s infinite linear; /* 30s - длительность анимации, infinite - бесконечное вращение */
  }


.board-fit {
    display: contents;
}

  #game-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 колонок */
    gap: 10px; /* Расстояние между картами */
    max-width: 560px; /* Ширина игрового поля */
    height: 771px;
    margin: 25.78px 170px 25.78px 170px;
    perspective: 900px;
}

  .card {
    position: relative;

    width: 107px;
    height: 166px;
    margin: 14px;
    cursor: pointer;
    background-image: url('../image/mini-card/card_00.png');
    background-size: cover;
    transform-style: preserve-3d;
    transition: transform 0.1s;
    
}

@keyframes card-spin-shirt {
    from { transform: rotateY(0deg) translateZ(1px); }
    to { transform: rotateY(calc(3turn + 180deg)) translateZ(1px); }
}

@keyframes card-spin-face {
    from { transform: rotateY(180deg) translateZ(1px); }
    to { transform: rotateY(calc(3turn + 360deg)) translateZ(1px); }
}

.card.front {
    z-index: 30;
    background-image: none;
    perspective: 900px;
    -webkit-perspective: 900px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.card.front::before,
.card.front::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    animation-duration: 1.7s;
    animation-timing-function: cubic-bezier(0.08, 0.72, 0.16, 1);
    animation-fill-mode: forwards;
}

.card.front::before {
    background-image: url('../image/mini-card/card_00.png');
    animation-name: card-spin-shirt;
}

.card.front::after {
    animation-name: card-spin-face;
}


.card.front[data-id="1"]::after { background-image: url('../image/mini-card/card_01.png'); }
.card.front[data-id="2"]::after { background-image: url('../image/mini-card/card_02.png'); }
.card.front[data-id="3"]::after { background-image: url('../image/mini-card/card_03.png'); }
.card.front[data-id="4"]::after { background-image: url('../image/mini-card/card_04.png'); }
.card.front[data-id="5"]::after { background-image: url('../image/mini-card/card_05.png'); }
.card.front[data-id="6"]::after { background-image: url('../image/mini-card/card_06.png'); }
.card.front[data-id="7"]::after { background-image: url('../image/mini-card/card_07.png'); }
.card.front[data-id="8"]::after { background-image: url('../image/mini-card/card_08.png'); }
.card.front[data-id="9"]::after { background-image: url('../image/mini-card/card_09.png'); }
.card.front[data-id="10"]::after { background-image: url('../image/mini-card/card_10.png'); }
.card.front[data-id="11"]::after { background-image: url('../image/mini-card/card_11.png'); }
.card.front[data-id="12"]::after { background-image: url('../image/mini-card/card_12.png'); }
.card.front[data-id="13"]::after { background-image: url('../image/mini-card/card_13.png'); }
.card.front[data-id="14"]::after { background-image: url('../image/mini-card/card_14.png'); }
.card.front[data-id="15"]::after { background-image: url('../image/mini-card/card_15.png'); }
.card.front[data-id="16"]::after { background-image: url('../image/mini-card/card_16.png'); }
.card.front[data-id="17"]::after { background-image: url('../image/mini-card/card_17.png'); }
.card.front[data-id="18"]::after { background-image: url('../image/mini-card/card_18.png'); }
.card.front[data-id="19"]::after { background-image: url('../image/mini-card/card_19.png'); }
.card.front[data-id="20"]::after { background-image: url('../image/mini-card/card_20.png'); }
.card.front[data-id="21"]::after { background-image: url('../image/mini-card/card_21.png'); }
.card.front[data-id="22"]::after { background-image: url('../image/mini-card/card_22.png'); }
.card.front[data-id="23"]::after { background-image: url('../image/mini-card/card_23.png'); }
.card.front[data-id="24"]::after { background-image: url('../image/mini-card/card_24.png'); }
.card.front[data-id="25"]::after { background-image: url('../image/mini-card/card_25.png'); }
.card.front[data-id="26"]::after { background-image: url('../image/mini-card/card_26.png'); }
.card.front[data-id="27"]::after { background-image: url('../image/mini-card/card_27.png'); }
.card.front[data-id="28"]::after { background-image: url('../image/mini-card/card_28.png'); }
.card.front[data-id="29"]::after { background-image: url('../image/mini-card/card_29.png'); }
.card.front[data-id="30"]::after { background-image: url('../image/mini-card/card_30.png'); }
.card.front[data-id="31"]::after { background-image: url('../image/mini-card/card_31.png'); }
.card.front[data-id="32"]::after { background-image: url('../image/mini-card/card_32.png'); }
.card.front[data-id="33"]::after { background-image: url('../image/mini-card/card_33.png'); }
.card.front[data-id="34"]::after { background-image: url('../image/mini-card/card_34.png'); }
.card.front[data-id="35"]::after { background-image: url('../image/mini-card/card_35.png'); }
.card.front[data-id="36"]::after { background-image: url('../image/mini-card/card_36.png'); }
.card.front[data-id="37"]::after { background-image: url('../image/mini-card/card_37.png'); }
.card.front[data-id="38"]::after { background-image: url('../image/mini-card/card_38.png'); }
.card.front[data-id="39"]::after { background-image: url('../image/mini-card/card_39.png'); }
.card.front[data-id="40"]::after { background-image: url('../image/mini-card/card_40.png'); }
.card.front[data-id="41"]::after { background-image: url('../image/mini-card/card_41.png'); }
.card.front[data-id="42"]::after { background-image: url('../image/mini-card/card_42.png'); }
.card.front[data-id="43"]::after { background-image: url('../image/mini-card/card_43.png'); }
.card.front[data-id="44"]::after { background-image: url('../image/mini-card/card_44.png'); }
.card.front[data-id="45"]::after { background-image: url('../image/mini-card/card_45.png'); }
.card.front[data-id="46"]::after { background-image: url('../image/mini-card/card_46.png'); }
.card.front[data-id="47"]::after { background-image: url('../image/mini-card/card_47.png'); }
.card.front[data-id="48"]::after { background-image: url('../image/mini-card/card_48.png'); }
.card.front[data-id="49"]::after { background-image: url('../image/mini-card/card_49.png'); }

.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(3),
.card:nth-child(4),
.card:nth-child(5),
.card:nth-child(6),
.card:nth-child(7) {

    transform:   rotate( 16deg); 
}

.card:nth-child(8),
.card:nth-child(9),
.card:nth-child(10),
.card:nth-child(11),
.card:nth-child(12),
.card:nth-child(13),
.card:nth-child(14) {

    transform: translate( 65%, -65%)  rotate( 16deg); 
}

.card:nth-child(15),
.card:nth-child(16),
.card:nth-child(17),
.card:nth-child(18),
.card:nth-child(19),
.card:nth-child(20),
.card:nth-child(21) {

    transform: translate( 0%, -130%)  rotate( 16deg); 
}

.card:nth-child(22),
.card:nth-child(23),
.card:nth-child(24),
.card:nth-child(25),
.card:nth-child(26),
.card:nth-child(27),
.card:nth-child(28) {

    transform: translate(65%, -195%)  rotate( 16deg); 
} 

.card:nth-child(29),
.card:nth-child(30),
.card:nth-child(31),
.card:nth-child(32),
.card:nth-child(33),
.card:nth-child(34),
.card:nth-child(35) {

    transform: translate( 0%, -260%)  rotate( 16deg); 
}

.card:nth-child(36),
.card:nth-child(37),
.card:nth-child(38),
.card:nth-child(39),
.card:nth-child(40),
.card:nth-child(41),
.card:nth-child(42) {

    transform: translate(65%, -325%)  rotate( 16deg); 
} 

.card:nth-child(43),
.card:nth-child(44),
.card:nth-child(45),
.card:nth-child(46),
.card:nth-child(47),
.card:nth-child(48),
.card:nth-child(49)  {

    transform: translate( 0%, -388%)  rotate( 16deg); 
}

.text-action  {
    width: 1100px;
    height: auto;
    margin: 0px 170px 32px 170px;
    padding-top: 32px;
}

#mainContent:has(.text-action) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
}

#mainContent:has(.text-action) > .text-action {
    margin-top: auto;
    margin-bottom: 32px;
}

.text-action p {
    margin-top: 0;
    margin-bottom: 0;
}

#mainContent:has(.text-action) #game-board {
    margin-top: 0;
    margin-bottom: 0;
}

.big-book {
    display: flex;
    position: relative;
    width: 1174.859px;
    height: 926.344px;
    background-image: url('../image/BG-book 3.png');
    flex-shrink: 0;
    margin: 9.36px 134.73px 0px 130.41px;
}

.big-book-2 {
    display: flex;
    position: relative;
    width: 1174.859px;
    height: 926.344px;
    background-image: url('../image/BG-book 3.png');
    flex-shrink: 0;
    margin: 9.36px 134.73px 0px 130.41px;
}

.four-cards,
.four-cards-2 {
    display: flex;
    gap: 32px;
    width: 402px;
    height: auto;
    margin: 109.71px 90.76px 261.7px 143.74px;
}

.first-block,
.second-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 0 0 auto;
}

.first-card,
.second-card,
.third-card,
.fourth-card {
    display: block;
    width: 185px;
    height: 281px;
    margin: 0;
    overflow: hidden;
    flex: 0 0 auto;
    cursor: pointer;
}

.four-cards img,
.four-cards-2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-text {
    width: 455px;
    height: 714px;
    background-image: url('../image/border-book.png');
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 46.14px 83.37px 166.2px 0px;

}

.card.big[data-id="big29"] { background-image: url('big29.svg'); }

.worlds img{
    width: 92.361px;
    height: 38.84px;
    flex-shrink: 0;
    margin: 101.27px 181.22px 21.44px 181.42px;
}

.worlds-text {
    width: 328.73px;
    height: 489px;
    margin: 0px 63.06px 0px  63.23px;

}

.worlds-text-yav p{
margin-top: -5px;
line-height: 140%;

}

.worlds-text p{
    line-height: 140%;
    
    }

.page-result2{
    width: 179px;
    height: 33px;
    margin: 412.5px 20px 490px  -65px;
}


.page-text-yav {
    width: 455px;
    height: 735px;
    background-image: url('../image/border-yav.png');
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 46.14px 83.37px 166.2px 0px;

}

.worlds-yav img{
    width: 86.85px;
    height: 50.37px;
    flex-shrink: 0;
    margin: 90.18px 259.24px 38.09px 192.18px;
}

.worlds-text-yav {
    width: 328.73px;
    height: 489px;
    margin: 0px 63.06px 0px  63.23px;

}

.page-result2{
    width: 176px;
    height: 31px;
    flex-shrink: 0;
    stroke-width: 2px;
    stroke: #FEFEFE;
    margin: 420px 20px 490px  -65px;

}

.worlds-text-title-yav {
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 51.2px */ 
    margin: -16px 350.14px 8px 0px;
}

.worlds-text-title {
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 51.2px */ 
    margin: -16px 350.14px 8px 0px;
}

.worlds-text-title-slav {
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 51.2px */ 
    margin: -16px 350.14px 8px 0px;
}

.worlds-text-title-prav {
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 51.2px */ 
    margin: -16px 350.14px 8px 0px;
}

.worlds-text-wish,
.worlds-text-wish-yav,
.worlds-text-wish-slav,
.worlds-text-wish-prav {
    font-weight: 300;
}

.worlds-text-about-yav {
    margin-top: -10px;
}

.page-result2 p{
    color: var(--Kolobuk-White1, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    margin: -30px 39px 5px 39px;
}

.page-to-result {
    width: 176px;
    height: 31px;
    flex-shrink: 0;
    margin: 420px 0px 490px  -110px;
}

.page-to-result p{
    color: var(--Kolobuk-White1, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    margin-top: -30px;
}

.page-to-result,
.page-result2 {
    position: absolute;
    z-index: 2;
    width: 176px;
    height: auto;
    margin: 0;
    left: calc(143.74px + (366.77px - 176px) / 2);
}

.page-to-result img,
.page-result2 img {
    display: block;
    width: 100%;
    height: auto;
}

.page-to-result p,
.page-result2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.page-to-result {
    top: 37px;
}

.page-result2 {
    top: 670px;
}

.big-book:not(.day-book) > .page-to-result,
.big-book-2 > .page-to-result {
    top: 109.71px;
    left: calc(143.74px + (402px - 176px) / 2);
    transform: translateY(calc(-100% - 32px));
}

.big-book:not(.day-book) > .page-result2,
.big-book-2 > .page-result2 {
    top: calc(109.71px + 281px + 32px + 281px + 32px);
    left: calc(143.74px + (402px - 176px) / 2);
}

.day-book .page-result2 {
    top: 600px;
}

.page-text-slav {
    width: 455px;
    height: 714px;
    background-image: url('../image/border-slav.png');
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 42.06px 83.59px 170.29px 0px;

}

.worlds-slav img{
    width: 96.239px;
    height: 40.304px;
    flex-shrink: 0;
    margin: 98.57px 261.17px 25.71px 181.18px;
}

.page-text-prav {
    width: 455px;
    height: 714px;
    background-image: url('../image/border-prav.png');
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 43.34px 83.59px 169px 0px;

}

.worlds-prav img{
    width: 126.78px;
    height: 42.38px;
    flex-shrink: 0;
    margin: 90.06px 163.08px 31.85px 165.13px;
}
                                   
.button-image-container-off {
    position: relative;
    z-index: 0;
    color: #3C3C3C;
}

.button-image-container-off img {
    color: #3C3C3C;
    width: 505px;
    height: 71px;
    cursor: pointer;
    filter: brightness(1);
    transition: filter 0.3s;
}

.button-text-off {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3C3C3C;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s; /* Плавный переход */

}



.button-start:hover .button-image-container img {
    color: #3C3C3C;
}

#KOLO-RING-white img{
    width: 839px;
    height: 837px;
   
}

.rotate-white {
    width: 839px;
    height: 837px;
    margin-right: 110px;
}

.congratulations-text-zelo {
    width: 505px;
    height: 208px;
    margin: 44px 0px 64px 0px;
}

.congratulations-block-inner-zelo {
    width: 505px;
    height: 578px;
    margin: 105.3px 0px 156.34px 14.36px;
}

.rotate-white {
    /* Добавляем начальный угол вращения и указываем, что элемент может быть анимирован */
    transform: rotate(0deg);
    transition: transform 90s linear;
    margin-left: -54px;
  }
  
 
  /* Добавляем стиль анимации для медленного вращения */
  @keyframes rotateAnimation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Применяем анимацию к элементу с классом "rotate" */
  .rotate-white {
    animation: rotateAnimation 130s infinite linear; /* 30s - длительность анимации, infinite - бесконечное вращение */
  }

  .congratulations-block-zero {
    width: 519.34px;
    height: 836.67px;
    display: flex;
    flex-direction: column;
    margin-right: 90px;
    margin-left: -40px;
}

.title-policy {
    width: 1090px;
    height: 96px;
    margin: 64px 170px 48px 170px;
}


.title-policy h1 {
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 200;
    line-height: 100%; /* 48px */
}

.title-policy-text {
    width: 1100px;
    height: auto;
    margin: 0px 170px 64px 170px;
}

.title-policy-text h2 {
    color: var(--Kolobuk-Main, #BE956F);

    /* Kolkbuk/Title 40 */
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 200;
    line-height: 100%;
    margin-bottom: 25.6px; 
}

.title-user {
    width: 720px;
    height: 35px;
    margin: 70px 550px 55px 170px;
}

.title-user-text {
    width: 1100px;
    height: auto; 
    margin: 0px 170px 64px 170px;
}

.title-user h1{
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 200;
    line-height: 100%; /* 48px */
}

.title-user-text h2 {
    color: var(--Kolobuk-Main, #BE956F);
    /* Kolkbuk/Title 40 */
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 200;
    line-height: 100%;
    margin-bottom: 25.6px; 
}


.feedback {
    display: flex;
    width: 1097px;
    height: auto;
    margin: 70px 173px 107.7px 170px;
}

.left-feedback {
    display: flex;
    flex-direction: column;
}

.tittle-feedback {
    width: 365px;
    height: 35px;
    margin-bottom: 66px;
    margin-top: -15px;
}

.tittle-feedback p{
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 200;
    line-height: 160%; /* 76.8px */
}

.text-feedback {
    width: 500px;
    height: 104px;
    margin-bottom: 14px;
}

.text-feedback p{
    width: 500px;
    height: 104px;
    margin-bottom: 0px;
}

.img-feed img {
    width: 500px;
    height: 425px;
}

.right-feedback {
    display: flex;
    flex-direction: column;
    margin-left: 92px;
}

#contactForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-group {
    position: relative;
    
}


/* Общие стили для полей ввода */
input {
    color: var(--Kolobuk-White1, #FFF);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    box-sizing: border-box;
    margin-bottom: -10px;
    
    
    
}

/* Стили для поля ввода с id="name" */
#username {
    display: flex;
    width: 505px;
    height: 56px;
    padding: 20px 15px 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 6px;
    border: 2px solid var(--Kolobuk-Main, #BE956F);
    background: var(--Kolobuk-Grey1, #2E2E2E);
    margin-bottom: 24px;
    
}

#usernameLabel{
    color: var(--Kolobuk-White1, #FFF);

    /* Kolobuk/Basic-16 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}


/* Стили для поля ввода с id="email" */
#email {
    display: flex;
    width: 505px;
    height: 56px;
    padding: 20px 15px 10px 15px;
    align-items: center;
    border-radius: 6px;
    border: 2px solid var(--Kolobuk-Main, #BE956F);
    background: var(--Kolobuk-Grey1, #2E2E2E);
    margin-bottom: 24px;
    position: relative;
}

#emailLabel {
    color: var(--Kolobuk-White1, #FFF);
    /* Kolobuk/Basic-16 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}


/* Стили для поля ввода с id="message" */
#message {
    color: #FFF;
    display: inline-flex;
    width: 505px;
    height: 177px;
    padding: 17px 16px;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    border: 2px solid var(--Kolobuk-Main, #BE956F);
    background: var(--Kolobuk-Grey1, #2E2E2E);
    resize: none;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    
}

#messageLabel {
    color: var(--Kolobuk-White1, #FFF);
    /* Kolobuk/Basic-16 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    margin-left: -40px;
    padding-right: -5px;
    
}

textarea {
    color: var(--Kolobuk-White1, #FFF);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    
    box-sizing: border-box; /* Добавлено свойство для корректного учета отступов и границ внутри ширины элемента */
  }


.form-group label {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate( 20%,  50%);
    pointer-events: none;
    transition: 0.2s ease-out;
}

input:focus + label,
input:not(:placeholder-shown) + label {
top: 0;
left: 0;
font-size: 12px;
color: #555;
}

textarea:focus + label,
textarea:not(:placeholder-shown) + label {
top: 0;
left: 0;
font-size: 12px;
color: #555;
padding-left:   - 50%;
}
  

.hidden {
    display: none;
    color: red; /* Цвет текста для видимого сообщения об ошибке */
}


#captchaDigits {
    border-radius: 6px;
    border: 2px solid var(--Kolobuk-Main, #BE956F);
    background: #2E2E2E;
    display: flex;
    width: 299px;
    height: 56px;
    padding: 15px 235px 15px 16px;
    align-items: center;
    flex-shrink: 0;
    margin-top: -10px;
}

#captchaCanvas {
    width: 134px;
    height: 56px;
    flex-shrink: 0;
    background-color: #9a9595;
    border-radius: 5px;
}

.capt {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 33px;
}

.capt  svg {
    width: 20.11px;
    height: 20.1px;
    flex-shrink: 0;
    margin: 17.95px 25.94px 17.95px 25.95px;
}

.text-agree {
    width: 465px;
    color: var(--Kolobuk-White1, #FFF);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 19.2px */
}

.text-agree p{
    width: 465px;
    color: var(--Kolobuk-White1, #FFF);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 19.2px */
    margin-left: 16px;
}

.text-agree a {
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    text-decoration-line: underline;
}

.check {
    display: flex;
}

#agree {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="3" stroke="%23BE956F" stroke-width="2"/></svg>') no-repeat;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    outline: none; /* Убираем обводку при фокусировке */
}

#agree:checked {
    margin-bottom: 0px;
    width: 24px;
    height: 24px;
    background: #BE956F url('../image/icons.svg') no-repeat;
    border-radius: 6px;
}

.button-start-sent {
    width: 503px;
    height: 71px;
    display: flex;

}

.button-image-container-sent {
    position: relative;
    z-index: 0;
}

.button-image-container-sent img {
    width: 503px;
    height: 71px;
    cursor: pointer;
    filter: brightness(1);
    transition: filter 0.3s;
}

.button-text-sent {
    width: 260px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--Kolobuk-White1, #F8F8F8);
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s; /* Плавный переход */

}

.button-start-sent:hover .button-text {
    color: #BE956F;
}

.button-start-sent:hover .button-image-container-sent img {
    filter: brightness(0) invert(1);
}

#errorMessage {
    width: 500px;
    height: 52px;
    top: 798px;
    left: 762px;
    margin-top: 16px;

}

.sent-messege {
    color: var(--Kolobuk-Main, #BE956F);
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 200;
    line-height: 160%; /* 76.8px */
    width: 283px;
    height: 112px;
    margin: 136px 395px 466px 0px;
}

.feedback-sent {
    display: flex;
    width: 1097px;
    height: auto;
    margin: 161.3px 173px 0px 170px;
}

.change {
    width: 369px;
    height: 77px;
    margin: 8px 546px 16px 525px;
}

.change h1 {
    color: rgb(190, 149, 111);
    font-family: Inter;
    font-size: 48px;
    font-weight: 200;
    line-height: 160%;
    letter-spacing: 0%;
    text-align: left;
}

@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .flex-container,
    .flex-header,
    .flex-header-left,
    .flex-header-right,
    .about-work,
    .about-work-left,
    .about-work-right,
    .flex-rules,
    .about-rules,
    .rules-left-book,
    .rules-right-book,
    .footer,
    .footer-link,
    .title-header-left,
    .image-header-right {
        min-width: 0;
        max-width: 100%;
    }

    .flex-header {
        position: relative;
    }

    .menu-header-right {
        position: absolute;
        top: 32px;
        right: 0;
        margin: 0;
        z-index: 3;
    }

    .menu__box {
        width: min(332px, 88vw);
    }

    .flex-header,
    .about-work,
    .flex-rules,
    .about-rules,
    .rules-left-book,
    .rules-right-book,
    .book-nav,
    .book-slav,
    .book-yav,
    .book-prav,
    .footer-link {
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .title-header-left {
        width: auto;
        height: auto;
        margin-top: 28px;
    }

    .flex-header-left,
    .flex-header-right,
    .text-header-left,
    .about-work-left,
    .about-work-right,
    .text-about-work,
    .title-why-work,
    .button-start,
    .page-title,
    .game-start-title,
    .footer-line,
    .copywriter,
    .feedback-sent {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .button-image-container img,
    .flex-rules-right img {
        width: 100%;
        max-width: 600px;
        height: auto;
    }

    h2 {
        font-size: 32px;
    }

    .page-title {
        font-size: 24px;
        margin: 12px 0;
    }

    #mainContent:has(#game-board) {
        display: flex;
        flex-direction: column;
        align-content: start;
        position: relative;
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        min-height: 100vh;
        min-height: 100svh;
    }

    #mainContent:has(#game-board) > .change,
    #mainContent:has(#game-board) > .text-action {
        position: relative;
        z-index: 2;
    }

    #mainContent:has(#game-board) > .text-action {
        margin-top: auto;
    }

    #mainContent:has(#game-board) > * {
        min-width: 0;
        max-width: 100%;
    }

    #mainContent:has(#game-board) > .board-fit {
        display: block;
        container-type: inline-size;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(100cqw - 16px);
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0 -24px;
        transform: translateY(-50%);
        overflow: hidden;
    }

    #game-board {
        --card-w: min(calc(100cqw / 5.8), max(52px, calc((100svh - 380px) / 5.5 * 107 / 166)));
        --card-h: calc(var(--card-w) * 166 / 107);
        display: grid;
        grid-template-columns: var(--card-w) repeat(6, calc(var(--card-w) * 0.8));
        grid-template-rows: repeat(6, calc(var(--card-h) * 0.75)) var(--card-h);
        column-gap: 0;
        row-gap: 0;
        justify-content: center;
        align-content: start;
        align-items: start;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    .card {
        width: 100%;
        height: auto;
        aspect-ratio: 107 / 166;
        margin: 0;
    }

    #username,
    #email,
    #message,
    #captchaDigits {
        width: 100%;
        max-width: 505px;
    }

    .footer-link {
        align-items: flex-start;
        gap: 12px;
    }

    .conditions,
    .conditions-block,
    .conditions-text,
    .congratulations,
    .congratulations-block,
    .congratulations-text,
    .game-start-title-congratulations,
    .text-action,
    .big-book,
    .big-book-2,
    .page-text,
    .page-text-yav,
    .page-text-slav,
    .page-text-prav,
    .title-policy,
    .title-policy-text,
    .title-user,
    .title-user-text,
    .feedback {
        width: auto;
        max-width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .button-start-contineus img {
        width: 100%;
        max-width: 505px;
        height: auto;
    }

    #game-board .card {
        position: relative;
        width: var(--card-w);
        height: auto;
        min-height: 0;
        aspect-ratio: 107 / 166;
        margin: 0;
        justify-self: end;
        overflow: hidden;
        transform: none;
    }

    #game-board .card.front {
        transform: none;
        z-index: 30;
        overflow: visible;
    }

    .text-action {
        width: 100%;
        margin-top: auto;
        margin-bottom: 32px;
        padding-top: 32px;
    }

    .text-action p {
        margin-top: 0;
        margin-bottom: 0;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body {
        padding-left: 32px;
        padding-right: 32px;
    }

    .flex-container,
    .flex-header,
    .flex-header-left,
    .flex-header-right,
    .title-header-left,
    .text-header-left,
    .page-title,
    .button-start,
    .button-image-container,
    .about-work,
    .about-work-left,
    .about-work-right,
    .text-about-work,
    .title-why-work,
    .image-header-right,
    .flex-rules,
    .about-rules,
    .footer,
    .footer-link,
    img {
        max-width: 100% !important;
    }

    #title-kolobuk-image,
    .image-header-right img {
        width: 100% !important;
        height: auto !important;
    }

    .flex-header-right,
    .image-header-right {
        position: static;
        width: 100% !important;
        overflow: hidden;
    }

    .flex-header .image-header-right {
        display: none !important;
    }

    .first-image-mobile {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 8px 0 0;
        padding: 0;
    }

    .first-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
    }

    .flex-header-left {
        position: relative;
    }

    .title-header-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        height: 100svh;
        margin: 0;
        background: none;
    }

    #title-kolobuk-image {
        display: block;
        width: 320px !important;
        max-width: 100% !important;
        height: auto !important;
        flex-shrink: 0;
        transform: translateY(-32px);
    }

    .flex-header-left > .button-start {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100svh - 32px);
        z-index: 2;
        width: 100%;
        margin: 0;
        transform: translateY(-100%);
    }

    .flex-header-left > .page-title {
        margin-top: 0;
    }

    .about-work-left,
    .first-image-mobile,
    .footer-line {
        display: flex;
        justify-content: center;
    }

    .about-work-left img,
    .first-image-mobile img,
    .book-nav-1,
    .book-slav-3,
    .book-yav-2,
    .book-prav-4 {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .footer-line img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .book-link {
        align-self: center;
        width: fit-content;
        max-width: 100%;
    }

    .button-start {
        justify-content: center;
    }

    .button-start > a {
        display: block;
        width: 100%;
        max-width: 505px;
        margin-left: auto;
        margin-right: auto;
    }

    .button-image-container {
        width: 100%;
    }

    .flex-rules-right {
        width: 100%;
        height: auto;
        margin: 28px 0 60px;
        justify-content: center;
    }

    .about-rules {
        margin-top: 0;
        gap: 68px;
    }

    .title-why-work {
        margin-bottom: 0;
    }

    .text-about-work {
        margin-top: 30px;
    }

    .title-rules {
        margin: 0 0 30px;
    }

    .rules-left-book,
    .rules-right-book {
        display: contents;
    }

    .book-nav,
    .book-slav,
    .book-yav,
    .book-prav {
        margin-top: 0;
        margin-bottom: 0;
    }

    .rules-left-book,
    .rules-right-book,
    .book-nav,
    .book-slav,
    .book-yav,
    .book-prav {
        align-items: stretch;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
    }

    .book-nav p,
    .book-slav p,
    .book-yav p,
    .book-prav p {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 12px 0 0;
    }

    .game-start-title,
    .game-start-title-congratulations {
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 32px;
        margin: 32px 0 24px;
    }

    .game-start-title > a {
        display: none;
    }

    .game-start-title-congratulations > a {
        display: block;
        flex: 0 0 auto;
        line-height: 0;
    }

    .game-start-title-congratulations > a img {
        width: 164px;
        max-width: 164px;
        height: auto;
    }

    .game-start-title-congratulations:has(> .audio-controls) > a {
        display: none;
    }

    .game-start-title > .hamburger-menu,
    .game-start-title-congratulations > .hamburger-menu {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .game-start-title > .audio-controls,
    .game-start-title-congratulations > .audio-controls {
        display: flex;
        align-items: flex-start;
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        gap: 32px;
    }

    .game-start-title > .audio-controls #playPauseBtn,
    .game-start-title-congratulations > .audio-controls #playPauseBtn {
        margin-right: 0;
    }

    .conditions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 32px;
    }

    .conditions > img {
        display: none !important;
    }

    .conditions-block {
        position: static;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        transform: none;
    }

    .conditions-block h2,
    .conditions-text {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        overflow-wrap: break-word;
    }

    .conditions-block h2 {
        margin: 0;
    }

    .conditions-text {
        margin: 40px 0;
    }

    .conditions .button-start-contineus {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .conditions .button-start-contineus a,
    .conditions .button-image-container {
        display: block;
        width: 100%;
        max-width: 505px;
        margin-left: auto;
        margin-right: auto;
    }

    .conditions .button-start-contineus img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .change {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .change h1 {
        height: auto;
        font-size: 32px;
        line-height: 120%;
    }

    .big-book,
    .big-book-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 32px;
        background-image: none;
    }

    .four-cards,
    .four-cards-2 {
        display: flex;
        justify-content: center;
        gap: 12px;
        box-sizing: border-box;
        width: 100%;
        max-width: 366px;
        height: auto;
        margin: 8px auto 16px;
    }

    .first-block,
    .second-block {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1 1 0;
        min-width: 0;
    }

    .first-card,
    .second-card,
    .third-card,
    .fourth-card {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        aspect-ratio: 161.19 / 260.78;
        margin: 0;
        overflow: hidden;
    }

    .four-cards img,
    .four-cards-2 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page-text,
    .page-text-yav,
    .page-text-slav,
    .page-text-prav {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 8px auto 0;
        padding: 8px 0 0;
        background-image: none;
        overflow: visible;
    }

    .page-text p,
    .page-text-yav p,
    .page-text-slav p,
    .page-text-prav p,
    .worlds-text,
    .worlds-text-yav {
        overflow-wrap: break-word;
        text-align: left;
    }

    .worlds img,
    .worlds-yav img,
    .worlds-slav img,
    .worlds-prav img {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 16px;
    }

    .worlds-text,
    .worlds-text-yav {
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .worlds-text-title,
    .worlds-text-title-yav,
    .worlds-text-title-slav,
    .worlds-text-title-prav {
        margin: 0 0 8px;
    }

    .worlds-text-about,
    .worlds-text-about-yav,
    .worlds-text-about-slav,
    .worlds-text-about-prav {
        margin-bottom: 0;
    }

    .page-result2,
    .page-to-result,
    .big-book:not(.day-book) > .page-to-result,
    .big-book-2 > .page-to-result,
    .big-book:not(.day-book) > .page-result2,
    .big-book-2 > .page-result2 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        display: block;
        box-sizing: border-box;
        width: 176px;
        max-width: 100%;
        height: auto;
        margin: 20px auto;
    }

    .day-book .page-result2 {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .page-result2,
    .big-book:not(.day-book) > .page-result2,
    .big-book-2 > .page-result2 {
        margin-top: 32px;
    }

    .page-result2 img,
    .page-to-result img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .page-result2 p,
    .page-to-result p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        margin: 0;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    .congratulations {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 16px 0 32px;
        overflow: visible;
    }

    .rotate,
    .rotate-white,
    .congratulations-block,
    .congratulations-block-zero {
        position: static;
        min-width: 0;
        max-width: 100%;
    }

    .congratulations-block,
    .congratulations-block-zero {
        order: 1;
    }

    .rotate,
    .rotate-white {
        order: 2;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 8px auto 0;
        opacity: 1;
        z-index: 0;
        pointer-events: none;
    }

    .rotate {
        display: none;
    }

    .rotate-white {
        display: block;
        width: min(100%, calc(100svh - 600px));
        max-width: 100%;
        min-width: 0;
    }

    .rotate img,
    .rotate-white img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .congratulations-block,
    .congratulations-block-zero,
    .congratulations-block-inner,
    .congratulations-block-inner-zelo,
    .congratulations-text,
    .congratulations-text-zelo,
    .congratulations-block h2 {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .congratulations-block,
    .congratulations-block-zero {
        position: relative;
        z-index: 1;
        padding-top: 0;
    }

    .congratulations-block h2 {
        margin-bottom: 16px;
    }

    .congratulations-text,
    .congratulations-text-zelo {
        margin: 0 0 24px;
    }

    .congratulations .button-start-contineus,
    .congratulations .button-start-contineus a,
    .congratulations .button-image-container,
    .congratulations .button-image-container-off,
    .congratulations .button-start-contineus img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback,
    .feedback-sent {
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 24px 0 32px;
    }

    .left-feedback,
    .right-feedback,
    #contactForm,
    .form-group,
    .capt,
    .check,
    .button-start-sent {
        align-self: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    #contactForm {
        align-items: stretch;
    }

    .tittle-feedback,
    .text-feedback,
    .text-feedback p,
    .img-feed,
    .img-feed img,
    .sent-messege {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .tittle-feedback {
        margin: 0 0 16px;
    }

    .tittle-feedback p,
    .sent-messege {
        font-size: 32px;
        line-height: 120%;
        margin: 0 0 16px;
    }

    .text-feedback {
        margin: 0 0 16px;
    }

    #username,
    #email,
    #message,
    #captchaDigits,
    #errorMessage {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    #username,
    #email,
    #captchaDigits {
        height: 56px;
    }

    #message {
        height: 177px;
    }

    #errorMessage {
        height: auto;
    }

    #captchaDigits {
        padding: 15px 16px;
        margin-top: 0;
    }

    .capt {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
    }

    .check {
        align-items: flex-start;
        width: 100%;
    }

    .text-agree,
    .text-agree p {
        width: auto;
        max-width: calc(100% - 32px);
        height: auto;
        margin: 0 0 0 8px;
    }

    .button-start-sent,
    .button-image-container-sent,
    .button-image-container-sent img {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .title-policy,
    .title-user,
    .title-policy-text,
    .title-user-text {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 24px 0;
        overflow-wrap: anywhere;
    }

    .title-policy h1,
    .title-user h1,
    .title-policy-text h2,
    .title-user-text h2,
    .title-policy-text p,
    .title-user-text p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .title-policy h1,
    .title-user h1 {
        height: auto;
        font-size: 32px;
        line-height: 120%;
    }

    .title-policy-text h2,
    .title-user-text h2 {
        font-size: 22px;
        line-height: 130%;
    }

    .mode-screen > a {
        display: none;
    }

    .mode-screen {
        min-height: 32px;
    }

    .mode-pick {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: calc(100svh - 140px);
        margin: 0;
        gap: 0;
    }

    .mode-book {
        display: none;
    }

    .mode-actions {
        width: 100%;
        flex: none;
        gap: 20px;
    }

    .mode-actions .button-start-contineus,
    .mode-actions .button-image-container,
    .mode-actions .button-start-contineus a,
    .mode-actions .button-start-contineus img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .day-lead-phone {
        display: block;
        margin: 0 0 8px;
    }

    .day-book .day-lead {
        display: none;
    }

    .day-book .day-card {
        width: max-content;
        max-width: 100%;
        height: auto;
        margin: 16px auto 20px;
    }

    .day-book .day-card img {
        width: auto;
        height: auto;
    }

    .day-book .worlds-text {
        margin-top: 0;
    }

    .day-book .day-card-name {
        margin: 8px 0;
        text-align: center;
        color: #C4A46A;
        font-size: 36px;
        line-height: 120%;
    }

    .day-book .day-card-wish {
        text-align: center;
        font-weight: 300;
    }

    .day-book .page-result2 {
        display: none;
    }

    .day-finish-phone {
        display: block;
        width: 100%;
        margin: 8px 0 32px;
    }

    .day-finish-phone .button-image-container,
    .day-finish-phone a,
    .day-finish-phone img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

@media (min-width: 768px) {
    @container page (max-width: 1163.98px) {
    .flex-header,
    .about-work,
    .flex-rules,
    .about-rules {
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 48px;
    }

    .flex-header {
        position: relative;
    }

    .flex-header-left,
    .about-work-right,
    .flex-rules-left,
    .flex-rules-right {
        flex: none;
        width: 600px;
        margin: 0;
    }

    .flex-header-right {
        position: static;
        flex: none;
        width: 405px;
        margin: 0;
        justify-content: flex-start;
        align-items: center;
    }

    .title-header-left {
        margin-top: 32px;
        margin-left: calc(32px - (100cqw - 600px) / 2);
    }

    .menu-header-right {
        position: absolute;
        top: 32px;
        right: 32px;
        margin: 0;
        z-index: 3;
    }

    .image-header-right {
        width: 405px;
        height: auto;
        margin: 0;
    }

    .image-header-right img {
        display: block;
        width: 405px;
        height: auto;
    }

    .text-header-left,
    .title-why-work,
    .text-about-work {
        height: auto;
    }

    .about-work {
        margin-top: 48px;
    }

    .about-work-right {
        order: 1;
    }

    .about-work-left {
        order: 2;
        flex: none;
        width: 442px;
        height: auto;
        margin: 0;
    }

    .about-work-left img {
        display: block;
        width: 442px;
        height: auto;
    }

    .title-why-work {
        width: 512px;
        margin: 0 0 24px;
    }

    .text-about-work {
        width: 600px;
        margin: 0;
    }

    .flex-rules {
        margin-top: 0;
    }

    .title-rules {
        margin: 0 0 24px;
    }

    .flex-rules-right {
        justify-content: center;
        margin-bottom: 48px;
    }

    .about-rules {
        margin-top: 0;
        margin-bottom: 48px;
    }

    .rules-left-book,
    .rules-right-book {
        display: contents;
    }

    .book-nav { order: 1; }
    .book-yav { order: 2; }
    .book-slav { order: 3; }
    .book-prav { order: 4; }

    .book-nav,
    .book-slav,
    .book-yav,
    .book-prav {
        width: 502px;
        height: auto;
        margin-bottom: 40px;
    }

    .footer-link {
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 32px;
        width: 600px;
        max-width: calc(100% - 48px);
        margin: 0 auto 16px;
        padding: 0;
    }

    .footer-line {
        box-sizing: border-box;
        width: 600px;
        max-width: calc(100% - 48px);
        height: auto;
        margin: 0 auto 20.89px;
    }

    .footer-line img {
        display: block;
        width: 100%;
        height: auto;
    }

    .copywriter {
        box-sizing: border-box;
        width: 600px;
        max-width: calc(100% - 48px);
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
        text-align: center;
    }

    .game-start-title,
    .game-start-title-congratulations {
        align-items: flex-start;
        box-sizing: border-box;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 32px 32px 24px;
    }

    .game-start-title a img,
    .game-start-title-congratulations a img {
        width: 198.483px;
        max-width: none;
        height: 55px;
    }

    .conditions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 48px;
    }

    .conditions > img,
    .conditions-block {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .conditions > img {
        display: block;
        width: 600px;
        max-width: calc(100% - 48px);
        height: auto;
        opacity: 0.5;
        justify-self: center;
        align-self: center;
        z-index: 0;
        pointer-events: none;
    }

    .conditions-block {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 420px;
        max-width: 420px;
        height: auto;
        margin: 0;
        padding-top: 40px;
        transform: translateY(-20px);
    }

    .conditions-block h2,
    .conditions-text {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding-left: 40px;
        padding-right: 40px;
    }

    .conditions-block h2 {
        margin: 0;
    }

    .conditions-text {
        margin: 40px 0;
    }

    .conditions .button-start-contineus,
    .conditions .button-start-contineus a,
    .conditions .button-image-container,
    .conditions .button-start-contineus img {
        display: block;
        box-sizing: border-box;
        width: 420px;
        max-width: 420px;
        height: auto;
    }

    .change {
        box-sizing: border-box;
        width: max-content;
        max-width: calc(100% - 64px);
        height: auto;
        margin: 16px auto 0;
    }

    .change h1 {
        height: auto;
    }

    #mainContent:has(#game-board) {
        display: flex;
        flex-direction: column;
        align-content: start;
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
    }

    #mainContent:has(#game-board):has(.text-action) {
        min-height: 100vh;
        min-height: 100svh;
    }

    #mainContent:has(#game-board):has(.text-action) > .board-fit {
        margin-bottom: 0;
    }

    #mainContent:has(#game-board) > * {
        min-width: 0;
    }

    .board-fit {
        display: block;
        container-type: inline-size;
        box-sizing: border-box;
        align-self: start;
        width: calc(100cqw - 16px);
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 8px auto 40px;
        overflow: hidden;
    }

    #game-board {
        --card-w: min(calc(100cqw / 5.8), max(52px, calc((100svh - 380px) / 5.5 * 107 / 166)));
        --card-h: calc(var(--card-w) * 166 / 107);
        display: grid;
        grid-template-columns: var(--card-w) repeat(6, calc(var(--card-w) * 0.8));
        grid-template-rows: repeat(6, calc(var(--card-h) * 0.75)) var(--card-h);
        column-gap: 0;
        row-gap: 0;
        justify-content: center;
        align-content: start;
        align-items: start;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    #game-board .card {
        position: relative;
        width: var(--card-w);
        height: auto;
        min-height: 0;
        aspect-ratio: 107 / 166;
        margin: 0;
        justify-self: end;
        overflow: hidden;
        transform: none;
    }

    #game-board .card.front {
        transform: none;
        z-index: 30;
        overflow: visible;
    }

    .text-action {
        box-sizing: border-box;
        width: 600px;
        max-width: calc(100% - 64px);
        height: auto;
        margin: auto auto 32px;
        padding-top: 32px;
    }

    .text-action p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .big-book,
    .big-book-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 48px;
        background-image: none;
    }

    .four-cards,
    .four-cards-2 {
        display: flex;
        justify-content: center;
        gap: 16px;
        box-sizing: border-box;
        width: 366px;
        max-width: calc(100% - 64px);
        height: auto;
        margin: 8px auto 24px;
    }

    .first-block,
    .second-block {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1 1 0;
        min-width: 0;
    }

    .first-card,
    .second-card,
    .third-card,
    .fourth-card {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        aspect-ratio: 161.19 / 260.78;
        margin: 0;
        overflow: hidden;
    }

    .four-cards img,
    .four-cards-2 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page-text,
    .page-text-yav,
    .page-text-slav,
    .page-text-prav {
        box-sizing: border-box;
        width: 455px;
        max-width: calc(100% - 64px);
        height: auto;
        margin: 8px auto 0;
        padding: 8px 0 0;
        background-image: none;
        overflow: visible;
    }

    .worlds img,
    .worlds-yav img,
    .worlds-slav img,
    .worlds-prav img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto 16px;
    }

    .worlds-text,
    .worlds-text-yav {
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .worlds-text-title,
    .worlds-text-title-yav,
    .worlds-text-title-slav,
    .worlds-text-title-prav {
        margin: 0 0 8px;
    }

    .worlds-text-about,
    .worlds-text-about-yav,
    .worlds-text-about-slav,
    .worlds-text-about-prav {
        margin-bottom: 0;
    }

    .page-result2,
    .page-to-result,
    .big-book:not(.day-book) > .page-to-result,
    .big-book-2 > .page-to-result,
    .big-book:not(.day-book) > .page-result2,
    .big-book-2 > .page-result2 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        display: block;
        box-sizing: border-box;
        width: 176px;
        height: auto;
        margin: 24px auto;
    }

    .day-book .page-result2 {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .page-result2,
    .big-book:not(.day-book) > .page-result2,
    .big-book-2 > .page-result2 {
        margin-top: 32px;
    }

    .page-result2 img,
    .page-to-result img {
        display: block;
        width: 100%;
        height: auto;
    }

    .page-result2 p,
    .page-to-result p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        margin: 0;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    .congratulations {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 24px 0 48px;
    }

    .rotate,
    .rotate-white,
    .congratulations-block,
    .congratulations-block-zero {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .rotate,
    .rotate-white {
        width: min(560px, calc(100% - 64px));
        height: auto;
        margin: 0;
        opacity: 0.5;
        z-index: 0;
        pointer-events: none;
    }

    .rotate img,
    .rotate-white img {
        display: block;
        width: 100%;
        height: auto;
    }

    .congratulations-block,
    .congratulations-block-zero {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        width: 505px;
        max-width: calc(100% - 64px);
        height: auto;
        margin: 0;
        padding-top: 32px;
    }

    .congratulations-block-inner,
    .congratulations-block-inner-zelo,
    .congratulations-text,
    .congratulations-text-zelo,
    .congratulations-block h2 {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .congratulations-block h2 {
        margin-bottom: 24px;
    }

    .congratulations-text,
    .congratulations-text-zelo {
        margin: 0 0 32px;
    }

    .congratulations .button-start-contineus,
    .congratulations .button-start-contineus a,
    .congratulations .button-image-container,
    .congratulations .button-image-container-off,
    .congratulations .button-start-contineus img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 505px;
        height: auto;
    }

    .feedback,
    .feedback-sent {
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
        width: 505px;
        max-width: calc(100% - 64px);
        height: auto;
        margin: 32px auto 48px;
    }

    .left-feedback,
    .right-feedback,
    #contactForm,
    .form-group,
    .capt,
    .check,
    .button-start-sent {
        align-self: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    #contactForm {
        align-items: stretch;
    }

    .tittle-feedback,
    .text-feedback,
    .text-feedback p,
    .img-feed,
    .img-feed img,
    .sent-messege {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .tittle-feedback,
    .text-feedback,
    .sent-messege {
        margin: 0 0 16px;
    }

    #username,
    #email,
    #message,
    #captchaDigits,
    #errorMessage,
    .button-start-sent,
    .button-image-container-sent,
    .button-image-container-sent img {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #username,
    #email,
    #captchaDigits {
        height: 56px;
    }

    #message {
        height: 177px;
    }

    #captchaDigits {
        padding: 15px 16px;
        margin-top: 0;
    }

    .capt {
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        justify-content: flex-start;
    }

    .check {
        align-items: flex-start;
        width: 100%;
    }

    .text-agree,
    .text-agree p {
        width: auto;
        max-width: calc(100% - 32px);
        height: auto;
        margin: 0 0 0 8px;
    }

    .title-policy,
    .title-user,
    .title-policy-text,
    .title-user-text {
        box-sizing: border-box;
        width: calc(100% - 64px);
        max-width: 1100px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .title-policy,
    .title-user {
        margin-top: 32px;
        margin-bottom: 24px;
    }

    .title-policy-text,
    .title-user-text {
        margin-bottom: 32px;
    }

    .title-policy h1,
    .title-user h1 {
        height: auto;
    }

    .mode-pick {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 24px auto 48px;
        gap: 32px;
    }

    .mode-book {
        display: none;
    }

    .mode-actions {
        width: 100%;
        max-width: 505px;
        flex: none;
    }

    .mode-actions .button-start-contineus,
    .mode-actions .button-image-container,
    .mode-actions .button-start-contineus img {
        width: 100%;
        max-width: 505px;
        height: auto;
    }

    .day-book .day-card {
        width: min(240px, 100%);
        height: auto;
        margin: 8px auto 16px;
    }

    .day-book .day-card img {
        width: 100%;
        height: auto;
    }

    .day-book .worlds-text {
        margin-top: 0;
    }
    }
}

@container page (min-width: 1164px) and (max-width: 1440px) {
    body {
        --edge-cut: clamp(0px, calc((1440px - 100cqw) / 2), 138px);
        width: 100%;
        max-width: 1440px;
        min-width: calc(1440px - 2 * var(--edge-cut));
        margin: 0 auto;
        overflow-x: clip;
    }

    .flex-header-left {
        margin-left: calc(170px - var(--edge-cut));
    }

    .about-work-left {
        margin-left: calc(80.35px - var(--edge-cut));
    }

    .about-work-right {
        margin-right: calc(169.12px - var(--edge-cut));
    }

    .flex-rules {
        margin-left: calc(170px - var(--edge-cut));
        margin-right: calc(170px - var(--edge-cut));
    }

    .about-rules {
        margin-left: calc(170px - var(--edge-cut));
        margin-right: calc(170px - var(--edge-cut));
    }

    .footer-link {
        margin-left: calc(170.5px - var(--edge-cut));
        margin-right: calc(170.5px - var(--edge-cut));
    }

    .footer-line {
        width: auto;
        margin-left: calc(170px - var(--edge-cut));
        margin-right: calc(170px - var(--edge-cut));
    }

    .copywriter {
        margin-left: calc(300px - var(--edge-cut));
        margin-right: calc(300px - var(--edge-cut));
    }
}

@media (max-width: 1163.98px) {
    #contactForm {
        gap: 24px;
    }

    #contactForm > .form-group,
    #contactForm > .capt,
    #contactForm > .check,
    #contactForm > .button-start-sent {
        margin-top: 0;
        margin-bottom: 0;
    }

    #contactForm > .form-group {
        display: flex;
        flex-direction: column;
    }

    #username,
    #email,
    #message,
    #captchaDigits,
    #agree {
        margin-top: 0;
        margin-bottom: 0;
    }

    .capt {
        row-gap: 24px;
    }

    .capt button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 56px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        line-height: 0;
    }

    .text-agree p {
        margin-bottom: 0;
    }
}

#mainContent:has(.feedback) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100svh;
}

#mainContent:has(.feedback) > .footer {
    margin-top: auto;
    margin-bottom: 32px;
}

#mainContent:has(.feedback) > .footer .copywriter {
    height: auto;
    margin-bottom: 0;
}

#mainContent:has(.feedback) > .footer .copywriter p {
    margin-bottom: 0;
}

@media (max-width: 1163.98px) {
    #mainContent:has(.feedback) {
        position: relative;
    }

    #mainContent:has(.feedback) > .game-start-title {
        position: absolute;
        top: 32px;
        left: 32px;
        right: 32px;
        width: auto;
        max-width: none;
        height: calc(48px * 1.6);
        min-height: 0;
        margin: 0;
        align-items: center;
        z-index: 4;
        pointer-events: none;
    }

    #mainContent:has(.feedback) > .game-start-title > a {
        display: none;
    }

    #mainContent:has(.feedback) > .game-start-title > .hamburger-menu {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 0 0 auto;
        pointer-events: auto;
    }

    #mainContent:has(.feedback) > .feedback {
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    #mainContent:has(.feedback) > .game-start-title {
        left: 0;
        right: 0;
        height: calc(32px * 1.2);
    }

    #mainContent:has(.feedback) .tittle-feedback {
        padding-right: 48px;
    }

    .capt {
        flex-wrap: nowrap;
        align-items: center;
    }

    .capt > label {
        display: none;
    }

    .capt svg {
        margin: 0;
    }

    #captchaDigits {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    #mainContent:has(.feedback) > .feedback {
        margin-bottom: 0;
    }

    #mainContent:has(.feedback) > .footer {
        padding-top: 80px;
    }
}

.s4-intro,
.s4-intro .conditions-block,
.s4-intro .conditions-text {
    height: auto;
}

.s4-intro .conditions-text p + p {
    margin-top: 16px;
}

.s4-intro-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s4-start-short {
    display: none;
}

.s4-text-btn {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: #BE956F;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 1164px) {
    .s4-intro {
        align-items: flex-start;
    }

    .s4-intro > img {
        align-self: flex-start;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        max-width: none;
        object-fit: contain;
    }

    .s4-intro .conditions-text {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .s4-intro .conditions-text p:last-child {
        margin-bottom: 0;
    }

    .s4-intro .s4-intro-actions {
        margin-top: 40px;
    }

    .s4-intro .s4-text-btn {
        text-decoration: none;
    }
}

.s4-stage {
    box-sizing: border-box;
    width: 1176px;
    max-width: calc(100% - 48px);
    margin: 12px auto 48px;
}

.s4-stage.is-hidden,
.s4-pick.is-hidden {
    display: none !important;
}

.s4-pick {
    position: fixed;
    inset: 0;
    z-index: 40;
    box-sizing: border-box;
    margin: 0;
    padding: 96px 0 24px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.75);
}

.s4-pick .change {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
    padding: 0 32px;
}

.s4-pick .change h1 {
    height: auto;
    text-align: center;
}

.s4-pick .board-fit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
}

.s4-pick #game-board {
    margin-left: auto;
    margin-right: auto;
}

html.s4-modal-open,
body.s4-modal-open {
    overflow: hidden;
}

@media (min-width: 1164px) {
    .s4-pick #game-board {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 8px;
        justify-content: center;
        width: min(900px, calc(100% - 64px));
        max-width: none;
        height: auto;
        margin: 0 auto;
    }

    .s4-pick #game-board .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 107 / 166;
        margin: 0;
        justify-self: stretch;
    }
}

.s4-book {
    position: relative;
    width: 100%;
    aspect-ratio: 1176 / 927;
    background: url('../image/BG-book 3.png') center / 100% 100% no-repeat;
}

.s4-left,
.s4-right {
    position: absolute;
    box-sizing: border-box;
    min-width: 0;
}

.s4-left {
    left: 9.2%;
    top: 10%;
    width: 36.4%;
    height: 68%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s4-right {
    left: 56%;
    top: 10%;
    width: 35%;
    height: 68%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #F8F8F8;
}

.s4-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 432 / 668;
    gap: 6px;
}

.s4-slot {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.s4-slot:focus,
.s4-slot:focus-visible {
    outline: none;
}

.s4-slot:hover .s4-knot,
.s4-slot:focus-visible .s4-knot {
    border-color: #F8F8F8;
}

.s4-slot.is-selected {
    position: relative;
    z-index: 1;
    overflow: visible;
    background-color: transparent;
}

.s4-slot.is-selected .s4-face {
    filter: drop-shadow(0 0 8px rgba(248, 248, 248, 0.95)) brightness(1.08);
}

.s4-knot {
    display: block;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    background: transparent;
    transform: rotate(45deg);
}

.s4-knot.is-current {
    width: 14px;
    height: 14px;
    background: #F8F8F8;
    border-color: #F8F8F8;
    box-shadow: 0 0 8px rgba(248, 248, 248, 0.7);
}

.s4-face {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.s4-copy {
    flex: 0 1 auto;
    width: 100%;
    min-height: 0;
    max-height: calc(100% - 32px - 34px);
    overflow: auto;
    padding-right: 6px;
}

.s4-copy::-webkit-scrollbar {
    width: 4px;
}

.s4-copy::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
}

.s4-copy .s4-q,
.s4-copy .s4-name,
.s4-copy .s4-wish,
.s4-copy .s4-about {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.45;
}

.s4-copy .s4-q + .s4-q {
    margin-top: 12px;
}

.s4-copy .s4-qname,
.s4-copy .s4-name {
    margin-bottom: 6px;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.s4-copy .s4-qname {
    margin-top: 0;
}

.s4-copy .s4-name {
    margin-top: 18px;
}

.s4-copy .s4-wish {
    margin-bottom: 12px;
    font-size: 16px;
}

.s4-copy .s4-about {
    font-size: 15px;
}

.s4-action {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    width: max-content;
    min-width: 176px;
    max-width: 100%;
    margin-top: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.s4-action img {
    display: block;
    width: 100%;
    height: 34px;
    object-fit: fill;
}

.s4-action span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    color: #F8F8F8;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.s4-action:hover span {
    color: #BE956F;
}

@media (max-width: 1163.98px) {
    #mainContent:has(.s4-intro),
    #mainContent:has(#s4Root) {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .s4-intro {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 32px 32px;
    }

    .s4-intro > img {
        display: none !important;
    }

    .s4-intro .conditions-block,
    .s4-intro .conditions-text,
    .s4-intro-actions,
    .s4-intro .button-start-contineus,
    .s4-intro .button-start-contineus a,
    .s4-intro .button-image-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .s4-intro .button-start-contineus img {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .s4-stage {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 32px 32px;
    }

    .s4-book {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        background: none;
    }

    .s4-left,
    .s4-right {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-width: 0;
    }

    .s4-left {
        padding: 0;
        background: none;
    }

    .s4-grid {
        width: 100%;
        height: auto;
        max-width: 100%;
        aspect-ratio: auto;
        grid-template-rows: repeat(4, auto);
        gap: 6px;
    }

    .s4-slot {
        aspect-ratio: 108 / 167;
    }

    .s4-right {
        display: flex;
    }

    .s4-copy {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .s4-copy .s4-qname,
    .s4-copy .s4-name {
        font-size: 26px;
    }

    .s4-action {
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    .s4-intro .s4-start-full {
        display: none;
    }

    .s4-intro .s4-start-short {
        display: inline;
    }

    .s4-intro,
    .s4-stage {
        padding-left: 0;
        padding-right: 0;
    }

    .s4-pick {
        display: flex;
        flex-direction: column;
        padding-top: 72px;
    }

    .s4-pick .change {
        position: relative;
        z-index: 2;
    }

    .s4-pick .board-fit {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        margin: 0;
        transform: translateY(-50%);
    }
}

body.glow-on {
    isolation: isolate;
}

.glow-spots {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glow-spot {
    position: absolute;
    top: 46%;
    left: 0;
    width: calc(150% * var(--size));
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.32;
    background: linear-gradient(259.53deg, #0A3FFF 6.53%, #F55F0A 95.34%);
    filter: blur(10vw);
    transform-origin: 50% 50%;
    animation: glow-drift var(--speed) infinite linear;
    animation-delay: var(--delay);
}

.glow-spots.glow-game .glow-spot {
    opacity: 0.09;
    background: linear-gradient(259.53deg, #ffffff 6.53%, #BE956F 95.34%);
}

@keyframes glow-drift {
    0% { transform: translate3d(0%, 6%, 0) rotate(0deg); }
    15% { transform: translate3d(16%, -2%, 0) rotate(54deg); }
    30% { transform: translate3d(38%, 8%, 0) rotate(108deg); }
    45% { transform: translate3d(58%, 14%, 0) rotate(162deg); }
    60% { transform: translate3d(76%, 4%, 0) rotate(216deg); }
    75% { transform: translate3d(46%, 0%, 0) rotate(270deg); }
    90% { transform: translate3d(14%, 10%, 0) rotate(324deg); }
    100% { transform: translate3d(0%, 6%, 0) rotate(360deg); }
}

@media (max-width: 767px) {
    .glow-spot {
        top: 64%;
        width: calc(340% * var(--size));
        filter: blur(22vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glow-spots {
        display: none;
    }
}

.mirror-left {
    position: absolute;
    left: 9.2%;
    top: 10%;
    width: 36.4%;
    height: 68%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    box-sizing: border-box;
    min-width: 0;
}

.mirror-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.mirror-card {
    display: block;
    width: calc(50% - 8px);
    max-width: 185px;
    height: auto;
}

.mirror-book .mirror-finish {
    position: relative;
    flex: 0 0 auto;
    margin-top: 0;
}

.mirror-copy {
    position: absolute;
    left: 56%;
    top: 10%;
    width: 35%;
    height: 68%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: auto;
    padding-right: 6px;
    color: #F8F8F8;
}

.mirror-copy-inner {
    margin-top: auto;
    margin-bottom: auto;
    flex: 0 0 auto;
}

.mirror-copy::-webkit-scrollbar {
    width: 4px;
}

.mirror-copy::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
}

.mirror-copy .mirror-lead,
.mirror-copy .s4-name,
.mirror-copy .s4-wish,
.mirror-copy .s4-about {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.45;
}

.mirror-copy .mirror-lead {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
}

.mirror-copy .mirror-lead-2 {
    margin-top: 28px;
}

.mirror-copy .mirror-lead.is-jitter {
    animation: chromatic-jitter 0.16s steps(2) 4;
}

.mirror-copy .mirror-lead-2.is-jitter {
    animation-duration: 0.2s;
}

@keyframes chromatic-jitter {
    0%,
    100% {
        text-shadow:
            5px 0 0 rgba(255, 71, 87, 0.65),
            -5px 0 0 rgba(0, 217, 255, 0.65);
        transform: translate(2px, -1px);
    }
    50% {
        text-shadow:
            7px 1px 0 rgba(255, 71, 87, 0.8),
            -7px -1px 0 rgba(0, 217, 255, 0.8);
        transform: translate(-2px, 1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mirror-copy .mirror-lead,
    .mirror-copy .mirror-lead.is-jitter {
        animation: none;
        text-shadow: none;
        transform: none;
    }
}

.mirror-copy .s4-name {
    margin-bottom: 6px;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.mirror-copy .s4-wish {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 300;
}

.mirror-copy .s4-about {
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 1163.98px) {
    .mirror-left,
    .mirror-copy {
        position: static;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
    }

    .mirror-left {
        gap: 24px;
    }

    .mirror-cards {
        width: min(420px, 100%);
    }

    .mirror-copy {
        overflow: visible;
        padding-right: 0;
    }

    .mirror-copy-inner {
        margin-top: 0;
        margin-bottom: 0;
    }

    .mirror-book .mirror-finish {
        margin-top: 0;
    }
}