.alert-modal__info>div::-webkit-scrollbar-track,
.alert-modal2__info>div::-webkit-scrollbar-track,
.more-feature__list::-webkit-scrollbar-track,
.inside-game__list::-webkit-scrollbar-track,
.new-games__list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0px 8px 24px -2px rgba(92, 92, 92, 0.24);
    border-radius: 10px;
    background-color: #212020;
}

.alert-modal__info>div::-webkit-scrollbar,
.alert-modal2__info>div::-webkit-scrollbar,
.more-feature__list::-webkit-scrollbar,
.inside-game__list::-webkit-scrollbar,
.new-games__list::-webkit-scrollbar {
    height: 10px;
    background-color: #212020;
}

.alert-modal__info>div::-webkit-scrollbar-thumb,
.alert-modal2__info>div::-webkit-scrollbar-thumb,
.more-feature__list::-webkit-scrollbar-thumb,
.inside-game__list::-webkit-scrollbar-thumb,
.new-games__list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 8px 24px -2px rgba(92, 92, 92, 0.24);
    background-color: #F5F7FA;
}

.hero {
    position: relative;
    z-index: 1;
}

.hero-left {
    background-color: #212020;
    padding: 32px 10px 54px 76px;
    border-radius: 24px;
    height: 600px;
}

.hero-left__btn,
.hero-left__info {
    padding: 0 45px 32px 45px;
}

.hero-left__info {
    border-bottom: 1px solid #3E3E3E;
}

.hero-left__img {
    position: relative;
    top: -44px;
}

.hero-right {
    border-radius: 24px;
    background-color: #212020;
    padding: 32px 16px 32px 36px;
    height: 600px;
    overflow: hidden;
}

.hero-right.empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-right.empty h4 {
    position: relative;
    z-index: 5; 
    line-height: 35px;
}

.hero-right.empty .home-hero__right-circle {
    width: 220px;
    height: 360px;
    bottom: -100px;
    left: 20px;
}

.hero-right__content {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding-right: 6px;
}

.hero-right__item h5,
.hero-right__item p {
    color: #F5F7FA;
}

.hero-right__item-img {
    height: 384px;
    overflow: hidden;
    border-radius: 12px;
}

.hero-right__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-right__overly {
    position: absolute;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(33, 32, 32, 0) 36.6%, #212020 93.98%);
}

.tooltip-label {
    position: absolute;
    top: -40px;
    left: 0;
    background: #395BE9;
    color: #F5F7FA;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    transform: translateX(calc(-50% - 15px));
    pointer-events: none;
    transition: left 0.1s;
    z-index: 3;
}

.tooltip-label::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background-color: #395BE9;
    bottom: -7px;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    z-index: -1;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    margin: 72px auto 67px auto;
}

.slider-wrapper {
    position: relative;
    height: 50px;
    padding: 15px 0;
}

.slider-wrapper input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    background: transparent;
    margin: 0;
    position: relative;
    z-index: 3;
}

.slider-wrapper input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 6px;
}

.slider-wrapper input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}

.slider-wrapper input[type="range"]::-ms-track {
    background: transparent;
    border: none;
    color: transparent;
    height: 6px;
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    background: #F5F7FA;
    border: 2px solid #E6E9ED;
    border-radius: 50%;
    box-shadow: 0px 16px 24px -8px rgba(40, 195, 244, 0.24);
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin-top: -18px;
}

.slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 32px;
    height: 32px;
    background: #F5F7FA;
    border: 2px solid #E6E9ED;
    border-radius: 50%;
    box-shadow: 0px 16px 24px -8px rgba(40, 195, 244, 0.24);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.slider-background {
    position: absolute;
    width: 100%;
    height: 14px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
}

.slider-range-numbers,
.slider-range-shapes {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 0;
}

.slider-range-shapes {
    top: 30px;
    padding: 0 5px;
}

.slider-range-shapes span {
    background-color: #3E3E3E;
    width: 1.6px;
    height: 12px;
}

.slider-range-shapes span:nth-of-type(1),
.slider-range-shapes span:nth-of-type(6),
.slider-range-shapes span:nth-of-type(11),
.slider-range-shapes span:nth-of-type(16),
.slider-range-shapes span:nth-of-type(21) {
    height: 24px;
}

.slider-range-numbers {
    top: 58px;
}

.slider-range-numbers span {
    font-size: 12px;
    color: #AAB2BD;
}

.slider-range-numbers span:nth-of-type(1) {
    margin-left: 3px;
}

.slider-range-numbers span:nth-of-type(3),
.slider-range-numbers span:nth-of-type(2) {
    margin-left: 6px;
}

.home-hero {
    height: 620px;
}

.home-hero__left-top,
.home-hero__left-bottom,
.home-hero__right {
    border-radius: 24px;
}

.home-hero__left-top,
.home-hero__left-bottom {
    background-color: #212020;
}

.home-hero__left-top,
.home-hero__left-top > div {
    height: 472px;
}

.home-hero__left-bottom {
    height: 144px;
    position: relative;
    z-index: 1;
}

.home-hero__left-bottom button {
    max-width: 256px;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
}

/* Специально для кнопки renewal-sub, чтобы текст не выходил за границы */
#renewal-sub {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.home-hero__left-img {
    top: -12px;
}

.home-hero__left-top > .row {z-index: 1;}

.home-hero__left-line {
    position: absolute;
    top: 212px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #161616;
}

.home-hero__right {
  background-image: url(../assets/images/spiderman.webp);

    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
    height: 100%;
    overflow: hidden;
}

.home-hero__right-gradinet {
    width: 100%;
    height: 300px;
    z-index: 1;
    left: 0;
    bottom: 0;
    background: linear-gradient(358.73deg, #212020 25.66%, rgba(33, 32, 32, 0) 98.94%);
    opacity: 0.62;
}

.home-hero__right-circle {
    opacity: 0.32;
    left: 35px;
    bottom: -107px;
    width: 380px;
    height: 380px;
    background-color: rgba(38, 203, 245, 1);
    filter: blur(180px);
    z-index: 2;
}

.home-hero__right-content {
    left: 50px;
    bottom: 35px;
    z-index: 3;
    max-width: 60%;
}

.home-hero__right-content button {width: 256px;}

.home-hero__console-status {
    background-color: #6DCD650F;
    padding: 8px 12px 8px 28px;
    position: relative;
    border-radius: 120px;
    color: #6DCD65;
    font-size: 12px;
}


.home-hero__left-top-text > div p {
    font-size: 12px;
    color: #5C5C5C;
}

.categories {
    background-color: #1B1A1A;
    border-radius: 24px;
    padding: 44px 88px 88px 88px;
    position: relative;
    z-index: 10;
}

.streems {
    position: relative;
    color: #DD6258;
    padding-left: 10px;
}

.streems::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background-color: #DD6258;
    box-shadow: 0px 2px 4px 0px rgba(182, 83, 75, 0.24);
    position: absolute;
    left: -4px;
    top: 9px;
}

.categories-control-wrapper {
    display: flex;
    align-items: center;
    gap: 38px;
}

/* Стили для основного контейнера колеса фортуны */
.wheel-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.categories-control {
    cursor: pointer;
    width: fit-content;
    position: relative;
}

.categories-control::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 100px;
    background-color: #28C3F4;
    bottom: -8px;
    transition: width var(--transition);
}

.categories-control.active:after,
.categories-control:hover::after {
    width: 64px;
}

.categories-item__img {
    border-radius: 12px;
    overflow: hidden;
    height: 256px;
}

.categories-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-ip-modal .modal-dialog {
    width: fit-content;
    max-width: 410px !important;
}

.new-ip-video {
    width: 100%;
    height: 178px;
    border-radius: 12px;
    overflow: hidden;
}

.new-ip-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-input button {
    position: absolute;
    font-size: 14px;
    color: #AAB2BD;
    padding: 10px 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 110px;
    min-width: auto;
}

.renewal-modal-content .horizontal-line {
    width: calc(100% + 96px);
    margin-left: -48px;
}

.promo-label {
    cursor: pointer;
}

.promo-label::after {
    content: url(../assets/icons/arrow-white.svg);
    left: calc(100% + 10px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.promo-label:hover {
    color: #5C5C5C;
}

.promo-label:hover::after {
    content: url(../assets/icons/arrow.svg);
}

.pay-ways__list-item {
    padding: 20px 0;
    border-bottom: 1px solid #3E3E3E;
    position: relative;
}

.pay-ways__list-item::after {
    content: url(../assets/icons/arrow-down-white.svg);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.pay-ways__list-item:last-child {border: none;}

.pay-ways-modal .modal-dialog {
    width: 575px;
    max-width: 100%;
}

.change-game-modal .search {
    margin-left: 150px;
    background-color: #161616;
    width: 50%;
}

.change-game-modal .modal-dialog {
    width: calc(100% - 64px);
    max-width: 1440px !important;
}

.change-game-modal .modal-content {
    padding: 32px 30px 32px 48px;
}

.game-catalogs {
    position: relative;
 z-index: 10;
}

.game-catalogs__content {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
     padding-right: 6px;
    background-color: #212020E0; 
}

.game-catalogs__overly {
    position: absolute;
    left: 0;
    bottom: -25px;
    height: 210px;
    background: linear-gradient(360deg, #212020 0%, rgba(33, 32, 32, 0) 100%);
    z-index: 1;
    width: 100%;
max-height: 400px;
}

.catalog-hero__wrapper {
    padding: 0 48px;
}

.catalog-hero {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.catalog-hero__slide_1,
.catalog-hero__slide_2,
.catalog-hero__slide_3,
.catalog-hero__slide_4,
.catalog-hero__slide_5,
.catalog-hero__slide_6 {
    height: 472px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.catalog-hero__slide_1 {background-image: url(../assets/images/catalog-bg_1.webp);}
.catalog-hero__slide_2 {background-image: url(../assets/images/catalog-bg_2.webp);}
.catalog-hero__slide_3 {background-image: url(../assets/images/catalog-bg_3.webp);}
.catalog-hero__slide_4 {background-image: url(../assets/images/catalog-bg_4.webp);}
.catalog-hero__slide_5 {background-image: url(../assets/images/catalog-bg_5.webp);}
.catalog-hero__slide_6 {background-image: url(../assets/images/catalog-bg_6.webp);}


.catalog-hero__text {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 488px;
}

.catalog-hero__text h1,
.catalog-hero__text p {
    color: #F5F7FA;
}

.catalog-hero__text button {
    margin-top: 39px;
    width: 256px;
}

.catalog-hero-pagination {
    position: absolute;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    z-index: 10;
}

.catalog-hero-pagination .swiper-pagination-bullet {
    background-color: white;
    opacity: 1;
}

.catalog-hero-pagination .swiper-pagination-bullet-active {
    background-color: #27C5F4;
}

.catalog-games__title {
    margin-left: 88px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.catalog-games__title h1 {
    font-size: 48px;
}

.catalog-games__title h1:first-of-type h1 {
    font-weight: 600;
}

.new-games__title h1,
.catalog-games__title h1:last-of-type {
    opacity: 0.3;
    font-weight: 300;
}

.catalog-games__list-tabs {
    background-color: #212020;
    border-radius: 24px;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 12px 48px 0 48px;
    position: relative;
    z-index: 1;
    overflow-x: auto; /* �������� ��������� */
    scrollbar-width: none; /* ��� Firefox */
}
.catalog-games__list-item {
    position: relative;
    color: #5C5C5C;
    font-size: 16px;
    transition: color var(--transition);
    cursor: pointer;
}

.catalog-games__list-item.active,
.catalog-games__list-item:hover {
    color: #F5F7FA;
}

.catalog-games__list-item::after {
    position: absolute;
    content: '';
    width: 0;
    height: 4px;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28C3F4;
    border-radius: 10px;
    transition: width var(--transition);
}

.catalog-games__list-item.active::after,
.catalog-games__list-item:hover::after {
    width: 80%;
}

.new-games__title {
    margin-left: 88px;
    margin-top: 42px;
flex-wrap: wrap;
}

.new-games__title h4 {
    font-size: 36px;
    font-weight: 600;
}

.new-games__list {
    width: 100%;
    padding-bottom: 32px;
    overflow-x: auto;
}

.new-games__list .catalog-item {
    min-width: 384px;
}

.new-games__list .catalog-item__img {
    height: 384px;
}

.new-games__list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0px 8px 24px -2px rgba(92, 92, 92, 0.24);
    border-radius: 10px;
    background-color: #212020;
}

.new-games__list::-webkit-scrollbar {
    height: 10px;
    background-color: #212020;
}

.new-games__list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 8px 24px -2px rgba(92, 92, 92, 0.24);
    background-color: #F5F7FA;
}

.all-games {
    background-color: rgba(33, 32, 32, 0.48);
    border-radius: 24px;
    padding: 42px 88px;
    margin-top: 56px;
}

.all-games .new-games__title {margin-left: 0;}

.account {
    padding: 0 48px;
    margin-top: 74px;
    position: relative;
    z-index: 1;
}

.account > h1 {
    font-size: 48px;
}

.account_tabs {
    display: flex;
    gap: 32px;
    padding: 28px 40px;
    border-radius: 24px;
    background-color: rgba(33, 32, 32, 0.48);
}

.account_tab {
    cursor: pointer;
    width: fit-content;
    position: relative;
    color: #5C5C5C;
    transition: color var(--transition);
}

.account_tab::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 100px;
    background-color: #28C3F4;
    bottom: -28px;
    transition: width var(--transition);
}

.account_tab.active,
.account_tab:hover {
    color: white;
}

.account_tab.active:after,
.account_tab:hover::after {
    width: 64px;
}

.my-requests {
    background-color: rgba(33, 32, 32, 0.48);
    border-radius: 24px;
    padding: 8px 40px;
    min-height: 695px;
}

.my-request__item {
    border-bottom: 1px solid #3E3E3E;
}

.my-request__item span {
    color: #5C5C5C;
    font-size: 12px;
}

.account-content {display: none;}
.account-content.active {display: flex;}

.my-orders__item {
    padding: 32px 40px;
    background-color: rgba(33, 32, 32, 0.48);
    border-radius: 24px;
}

.my-orders__item > div:first-of-type {
    border-bottom: 1px solid #3E3E3E;
}

.my-orders__item span {
    color: #5C5C5C;
    font-size: 12px;
}

.my-orders__item-promo-line {
    width: calc(100% + 80px);
    margin-left: -40px;
    height: 1px;
    border-bottom: 1px dashed #3E3E3E;
    position: relative;
}

.my-orders__item-promo-line::after,
.my-orders__item-promo-line::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: #161616;
    top: 50%;
    transform: translateY(-50%);
}

.my-orders__item-promo-line::after {left: -5px;}
.my-orders__item-promo-line::before {right: -5px;}

.my-orders__item .discounted,
.my-orders__item .promo-value {
    text-decoration: line-through;
}

.empty-account {
    display: none;
    background-color: rgba(33, 32, 32, 0.48);
    border-radius: 24px;
    height: 695px;
}

.empty-account__block {
    max-width: 338px;
}

.empty-account__block button {
    width: 256px;
}

.connection {
    position: relative;
    z-index: 10;
}

.connection__title {
    margin-left: 86px;
}

 .game-catalogs__overly {height: 100px;}

.control-settings__controls,
.connection__control-row {
    padding: 28px 40px;
    background-color: rgba(33, 32, 32, 0.48);
    border-radius: 24px;
}

.connection__controls {
    display: flex;
    align-items: center;
    gap: 32px;
}
.control-settings__control {width: fit-content;}

.connection__content {display: none;}
.connection__content.active {display: block;}

.connection__sub-controls {display: none;}
.connection__sub-controls.active {display: flex;}

.control-settings__control,
.connection__content-control,
.connection__system-control {
    color: #5C5C5C;
    font-size: 16px;
    position: relative;
    transition: color var(--transition);
    cursor: pointer;
}

.connection__system-control {width: fit-content;}

.control-settings__control::after,
.connection__content-control::after,
.connection__system-control::after {
    position: absolute;
    content: '';
    width: 0;
    height: 4px;
    background-color: #28C3F4;
    border-radius: 10px;
    transition: width var(--transition);
    left: 50%;
    transform: translateX(-50%);
}

.control-settings__control::after,
.connection__system-control::after {
    bottom: -28px;
}

.connection__content-control::after {
    bottom: -15px;
}

.control-settings__control:hover,
.control-settings__control.active,
.connection__content-control:hover,
.connection__content-control.active,
.connection__system-control:hover,
.connection__system-control.active {
    color: white;
}

.control-settings__control:hover::after,
.control-settings__control.active::after,
.connection__content-control:hover::after,
.connection__content-control.active::after,
.connection__system-control:hover::after,
.connection__system-control.active::after {
    width: 64px;
}

.connection__content-controls {gap: 36px;}

.connection__content-item {
    border-radius: 24px;
    background-color: #212020;
    padding: 40px 84px;
}

.connection__content-item input {padding-right: 40px;}

.connection__content-item button,
.connection__content-item a {
    width: fit-content;
    padding: 20px 62px;
}

.connection__content-item a:hover {color: white;}

.connection__content-video {
    position: fixed;
    right: 88px;
    top: 50%;
    border-radius: 12px;
    width: 320px;
    height: 178px;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0px 32px 56px 0px rgba(22, 22, 22, 0.56);
}

.connection__content-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.connection__content-item-circle {
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    font-size: 16px;
    color: #F5F7FA;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(90deg, #431BE3 0%, #26CBF5 100%);
    border-radius: 100px;
}

.connection__content-item-right {
    max-width: 480px;
    width: 100%;
}

.connection-input .copy-block {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.connection__content-item-line {
    width: 580px;
    height: 1px;
    background-color: #3E3E3E;
    margin: 24px 0 16px 0;
}

.control-settings {
    padding: 0 48px;
    margin-top: 38px;
}

.control-settings > h1 {
    margin-left: 40px;
}

.control-settings__controls-content {
    max-width: 720px;
    width: 100%;
}

.control-settings__controls-content img {
    max-width: 100%;
}

.control-settings__controls-content {display: none;}
.control-settings__controls-content.active {display: flex;}

.categories-content {display: none;}
.categories-content.active {display: block;}


#pay-via-robokassa,
#pay-via-cryptocloud,
#pay-via-bonus-balance,
#srp-small-guide,
#pay-via-cryptocloud-srp,
#pay-via-robokassa-srp {
    cursor: pointer;
}

.inside-hero {
   
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 640px;
    width: 100%;
    position: relative;
    border-radius: 32px;
    margin-bottom: 2px;
}

.inside-overly-top,
.inside-overly-center,
.inside-overly-bottom {
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
}

.inside-overly-center {
    background: #212020;
    opacity: 0.48;
    height: 100%;
}

.inside-overly-top {
    background: linear-gradient(0deg, rgba(22, 22, 22, 0) 0%, #161616 100%);
    height: 146px;
    top: 0;
    opacity: 0.32;
}

.inside-overly-bottom {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, #161616 100%);
    height: 177px;
    bottom: 0;
    opacity: 0.56;
}

.inside-block {
    background-color: #212020;
    border-radius: 24px;
    padding: 48px 86px;
    max-width: 1440px;
    margin: 0 auto;
}

.game-play-block {
    padding: 0 86px;
}

.inside-bage {
    padding: 10px 16px;
    border-radius: 8px;
    background-color: #1B1B1B;
    font-size: 14px;
    font-weight: 500;
}

.inside-info {
    color: #595A5A;
    font-size: 12px;
}

.ps-plus {
    padding: 12px 10px;
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    white-space: nowrap;
}

.ps-plus img {
    width: 16px;
    height: auto;
}

.inside-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #3E3E3E;
    margin-top: 32px;
    margin-bottom: 13px;
}

.more-feature__list,
.inside-game__list {
    width: calc(100% + 86px);
    overflow-x: auto;
    padding-bottom: 32px;
}

.inside-game__list {
    height: 360px;
}

.more-feature__list {
    height: 472px;
}

.inside-game-block {
    min-width: 640px;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.inside-game__list>div:last-of-type {
    min-width: 200px;
}

.inside-game-block {
    min-width: 640px;
}

.more-feature-block {
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    position: relative;
    overflow: visible;
    border-radius: 16px;
}

.more-feature__list>div:last-of-type {
    min-width: 200px;
}

.more-feature-block.blue {
    background: linear-gradient(180deg, #00ABFF 0%, #00ABFF 100%);
    box-shadow: 0px 32px 56px 0px rgba(253, 217, 37, 0.04);
}

.more-feature-block.yellow {
    background: linear-gradient(180deg, #F4D901 0%, #E9AD23 100%);
    box-shadow: 0px 32px 56px 0px rgba(253, 217, 37, 0.04);
}

.more-feature-block.blue .text {
    position: absolute;
    z-index: 10;
    bottom: 24px;
    left: 24px;
    max-width: calc(100% - 48px);
}

.more-feature-block.blue .text p {
    font-size: 12px;
    font-weight: 500;
}

.more-feature-block.blue>img {
    position: absolute;
}

.more-feature-block.blue .img-1 {
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: calc(100% + 16px);
    height: auto;
}

.more-feature-block.blue .textura {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.more-feature-block.blue .textura img {
    width: 100%;
    height: 100%;
}

.more-feature-block.blue .img-3 {
    z-index: 1;
    left: -10px;
    bottom: 98px;
    width: 190px;
    height: auto;
}

.more-feature-block.blue .img-2 {
    z-index: 1;
    top: 76px;
    width: 160px;
    height: auto;
    right: -10px;
}

.more-feature-block.yellow .bg-img {
    max-width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
}

.more-feature-block.yellow .playStation-img {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    top: 88px;
    width: 205px;
    height: auto;
}

.more-feature-block.yellow .more-feature__blue-bage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 128px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    background-color: white;
    padding: 2px 13px;
    height: 24px;
    border-radius: 6px;
}

.more-feature-block.yellow .more-feature__blue-bage img {
    width: 100%;
    height: auto;
}

.more-feature-block.yellow .more-feature__bage {
    position: absolute;
    top: 22px;
    right: 20px;
    background-color: #0A3680;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: white;
    padding: 5px 12px;
    border-radius: 100px;
}

.more-feature-block.yellow>p {
    font-size: 12px;
    color: #131313;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    width: 100%;
    max-width: 178px;
    text-align: center;
    font-weight: 500;
    z-index: 3;
}

.slot {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 120px;
    height: 20px;
    border-radius: 12px;
    background: #23221E;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5) inset;
    z-index: 3;
}

.slot::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #23221E;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6) inset;
}

.inside-game-block video,
.inside-game-block img,
.more-feature-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.same-games {
    width: calc(100% + 12px);
    padding-left: 86px;
}

.same-games>div:last-of-type>div:last-of-type {
    /* width: 80px; */
    min-width: 160px !important;
}

.same-games__title h4 {
    font-size: 36px;
    font-weight: 600;
}

.same-games__title h1 {
    color: #F5F7FA;
}

.inside-hero-content {
    position: absolute;
    bottom: 70px;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 48px 86px;
    max-width: 1440px;
}

.inside-hero-content__star.mobile,
.inside-hero-content__star {
    background: rgba(214, 214, 214, 0.12);
    backdrop-filter: blur(48px);
    border-radius: 100px;
}

.inside-hero-content__star {
    padding: 19px 23px 21px 23px;
}

.inside-hero-content__star.mobile {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
    padding: 7px 10px;
}

.inside-hero-content__star.mobile p {
    font-size: 16px;
}

.inside-hero-content__star.mobile img {
    width: 19px;
}

.inside-hero-circle {
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(90deg, #431BE3 0%, #26CBF5 100%);
    border-radius: 100px;
    padding: 19px 22px 23px 22px;
    cursor: auto;
    cursor: pointer;
}


.desc-card {
    color: #fff;
    border-radius: 6px;
    position: relative;
    max-width: 740px;
}

.desc-collapse {
    overflow: hidden;
    max-height: none;
    transition: max-height 0.45s cubic-bezier(.2, .8, .2, 1);
}

.alert-modal__http {
    gap: 94px;
    position: relative;
}
.alert-modal2__http {
    gap: 94px;
    position: relative;
}

.alert-modal__bage-border {
    border-radius: 16px;
    position: relative;
    background: linear-gradient(180deg, #431BE3 0%, #26CBF5 100%);
    width: 124px;
    height: 70px;
}
.alert-modal2__bage-border {
    border-radius: 16px;
    position: relative;
    background: linear-gradient(180deg, #431BE3 0%, #26CBF5 100%);
    width: 124px;
    height: 70px;
}

.alert-modal__bage-border span:first-of-type,
.alert-modal2__bage-border span:first-of-type,
.alert-modal__bage,
.alert-modal2__bage {
    padding: 16px;
    background-color: #2E2E2E;
    border-radius: 16px;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.alert-modal__bag,
.alert-modal__bag
 {
    width: 118px;
    height: 64px;
}

.alert-modal__bage-border span:first-of-type,
.alert-modal2__bage-border span:first-of-type {
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.alert-modal__http img,
.alert-modal2__http img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 104px;
    transform: translateY(-50%);
}

#alert .modal-dialog {
    max-width: 595px;
}

#alert .modal-content {
    padding: 32px 44px;
}

.alert-modal__info {
    background-color: #2E2E2E;
    border-radius: 16px;
    padding: 24px;
    width: 505px;
    width: 100%;
}
.alert-modal2__info {
    background-color: #2E2E2E;
    border-radius: 16px;
    padding: 24px;
    width: 505px;
    width: 100%;
}

.alert-modal__info>div {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px;
}

.alert-modal2__info>div {
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 20px;
}

.alert-modal__info>div .alert-modal__info-circle,
.alert-modal__info-bage,
.alert-modal2__info>div .alert-modal__info-circle,
.alert-modal2__info-bage {
    background-color: #161616B8;
}

.alert-modal__info-bage {
    border-radius: 100px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.alert-modal2__info-bage {
    border-radius: 100px;
    padding: 6px 12px;
    display: inline;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.alert-modal__info-circle {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 16px;
}

.alert-modal2__info-circle {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    display: inline;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 16px;
}

.conect__content-item {
    padding: 32px 47px;
    border-radius: 24px;
    background-color: #212020;
    position: relative;
    z-index: 5;
}

.gamepad-select-input::placeholder {
    color: #595A5A !important;
}

.connect-wrapper {
    max-width: 595px;
    padding: 0 10px;
    width: 100%;
    margin: 50px auto;
}

.dropdown-container {
    position: relative;
    width: 100%;
    margin-top: 2px;
    z-index: 6;
}

.dropdown-header {
    background: #212020;
    border-radius: 24px;
    padding: 26px;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-header.open {
    border-radius: 24px 24px 0 0;
}

.dropdown-title-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-title {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

.dropdown-content__status-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-loading-spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.dropdown-arrow {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    background-color: #2E2E2E;
    position: relative;
}

.dropdown-arrow::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid #F5F7FA;
    border-left: none;
    border-bottom: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dropdown-arrow.open {
    transform: rotate(-45deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #212020;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.dropdown-content.open {
    opacity: 1;
    max-height: 400px;
    box-shadow: 0px 32px 56px 0px rgba(22, 22, 22, 0.56);
    backdrop-filter: blur(32px);
}

.dropdown-content-check {
    width: 21px;
    height: 21px;
    background-color: #395BE9;
    border-radius: 100px;
}

.dropdown-content-check::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../assets/icons/Check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 1px;
    left: 4px;
}

.dropdown-item {
    padding: 11px 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #191818e0;
}

.dropdown-item.loading {
    cursor: default;
}

.dropdown-text {
    font-size: 15px;
    color: #ffffff;
    flex: 1;
}

.dropdown-text.secondary {
    color: #888;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

.pending-step {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background-color: #2E2E2E;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.status-indicator {
    width: 14px;
    height: 14px;
    background: #6DCD65;
    border-radius: 50%;
    flex-shrink: 0;
}

.dropdown-content__timer {
    width: 100%;
    height: 200px;
    z-index: 1;
}

.dropdown-content__timer-items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aurora {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.band {
    position: absolute;
    left: -30%;
    width: 160%;
    height: 65%;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: 0.95;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

.b1 {
    top: 2%;
    background: radial-gradient(ellipse at 15% 50%, #7FFD72 0%, rgba(127, 255, 145, 0.45) 35%, transparent 60%);
    animation: drift1 8s ease-in-out infinite, hue1 3.8s linear infinite, pulse1 3s ease-in-out infinite;
    filter: blur(60px);
}

.b2 {
    top: 22%;
    height: 52%;
    filter: blur(110px);
    background: radial-gradient(ellipse at 85% 30%, #00F0C0 0%, rgba(0, 209, 255, 0.28) 45%, transparent 70%);
    animation: drift2 9.2s ease-in-out infinite, hue2 4.2s linear infinite, pulse2 2.2s ease-in-out infinite;
    opacity: 0.95;
}

.b3 {
    top: 36%;
    height: 60%;
    left: -40%;
    filter: blur(130px);
    background: radial-gradient(ellipse at 40% 65%, #7FFD72 0%, #00D1FF 35%, transparent 72%);
    animation: drift3 11.6s ease-in-out infinite, hue3 5.4s linear infinite, pulse3 4s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes drift1 {
    0% {
        transform: translateX(-18%) rotate(-14deg) scaleX(1.06);
    }

    25% {
        transform: translateX(14%) rotate(8deg) scaleX(1.02);
    }

    50% {
        transform: translateX(-6%) rotate(2deg) scaleX(1.03);
    }

    75% {
        transform: translateX(18%) rotate(-6deg) scaleX(1.01);
    }

    100% {
        transform: translateX(-18%) rotate(-14deg) scaleX(1.06);
    }
}

@keyframes drift2 {
    0% {
        transform: translateX(16%) rotate(10deg) scaleX(1.09);
    }

    50% {
        transform: translateX(-22%) rotate(-12deg) scaleX(0.98);
    }

    100% {
        transform: translateX(16%) rotate(10deg) scaleX(1.09);
    }
}

@keyframes drift3 {
    0% {
        transform: translateX(-14%) rotate(6deg) scaleX(1.12);
    }

    50% {
        transform: translateX(20%) rotate(-8deg) scaleX(1.00);
    }

    100% {
        transform: translateX(-14%) rotate(6deg) scaleX(1.12);
    }
}

@keyframes hue1 {
    0% {
        filter: blur(60px) hue-rotate(0deg) saturate(1.1) contrast(1);
    }

    25% {
        filter: blur(64px) hue-rotate(45deg) saturate(1.6) contrast(1.08);
    }

    50% {
        filter: blur(66px) hue-rotate(-40deg) saturate(1.5) contrast(1.08);
    }

    75% {
        filter: blur(62px) hue-rotate(30deg) saturate(1.7) contrast(1.1);
    }

    100% {
        filter: blur(60px) hue-rotate(0deg) saturate(1.15) contrast(1);
    }
}

@keyframes hue2 {
    0% {
        filter: blur(110px) hue-rotate(0deg)
    }

    50% {
        filter: blur(120px) hue-rotate(-60deg)
    }

    100% {
        filter: blur(110px) hue-rotate(0deg)
    }
}

@keyframes hue3 {
    0% {
        filter: blur(130px) hue-rotate(0deg)
    }

    50% {
        filter: blur(140px) hue-rotate(60deg)
    }

    100% {
        filter: blur(130px) hue-rotate(0deg)
    }
}

@keyframes pulse1 {
    0% {
        opacity: 0.85;
        transform: scale(1) translateX(-18%) rotate(-14deg);
    }

    40% {
        opacity: 1.0;
        transform: scale(1.06) translateX(-8%) rotate(-8deg);
    }

    60% {
        opacity: 1.0;
        transform: scale(1.08) translateX(6%) rotate(6deg);
    }

    100% {
        opacity: 0.85;
        transform: scale(1) translateX(-18%) rotate(-14deg);
    }
}

@keyframes pulse2 {
    0% {
        opacity: 0.85;
    }

    50% {
        opacity: 1.0;
        transform: scale(1.03);
    }

    100% {
        opacity: 0.85;
    }
}

@keyframes pulse3 {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 1.0;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.7;
    }
}





@media (max-width: 1200px) {
.new-games__title {
   flex-wrap: wrap;
}

    .hero-right,
    .hero-left {
        height: 650px;
    }

    .home-hero {
        height: 970px;
    }

    .home-hero__right {
        height: 350px;
    }
}

@media (max-width: 998px) {
.new-games__title {
   flex-wrap: wrap;
}

    .hero-left,
    .hero-right {
        height: 600px;
    }

    .all-games {
        padding: 32px 40px;
        ;
    }

    .catalog-hero__wrapper {
        padding: 0;
    }

    .catalog-games__list-tabs {
        margin: 12px 0 0 0;
        ;
    }

    .catalog-games__title {
        margin-left: 40px;
    }
}
@media (max-width: 576px) {
  .new-games__title {
   flex-wrap: wrap;
}

.alert-modal2__info>div {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px;
}

    /* Адаптация для wheel, voting и freeze на маленьких экранах */
    .categories-controls {
        padding: 0 16px;
    }

    .categories-control {
        font-size: 12px;
        padding: 10px 12px;
    }

    #voting-container {
        padding: 16px 12px;
    }

    #wheel-container {
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #freezeModal .modal-content,
    #freezeNotificationModal .modal-content {
        padding: 20px 12px;
    }

    #freeze-accounts-list {
        max-height: 300px;
        gap: 8px;
    }

    #freeze-accounts-list > div {
        padding: 10px;
        font-size: 14px;
    }

    #confirm-freeze-btn {
        width: 100%;
        margin-top: 16px;
    }

    /* Адаптация блоков заданий для колеса фортуны на мобильных - размещаем в 2 строки */
    #tasks-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Увеличиваем ширину блоков заданий на мобильных */
    #tasks-container > div {
        padding: 16px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Применяем тот же подход, что и для модального окна смены игры */
    .wheel-main-container {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* Убираем padding у родительского контейнера (переопределяем inline стиль) */
    #wheel-container {
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Убираем ограничения у родительского контейнера категорий */
    #wheel.categories-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Убираем ограничения у контейнера на мобильных */
    .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Исправляем переполнение текста PSN логина в заморозках */
    #freeze-accounts-list > div {
        min-width: 0 !important;
    }

    #freeze-accounts-list label {
        min-width: 0 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

 .ps-plus {
        top: calc(100% + 8px);
        left: 0;
        transform: none;
    }

    .alert-modal__info,
	.alert-modal2__info,
    #alert .modal-content {
        padding: 20px;
        ;
    }

    .alert-modal__bage-border span:first-of-type,
	.alert-modal2__bage-border span:first-of-type,
    .alert-modal__bage,
.alert-modal2__bage	{
        font-size: 16px;
    }

    .alert-modal__http,
.alert-modal2__http	{
        gap: 120px;
    }

  .dropdown-text {
        font-size: 14px;
    white-space: normal;
  
    }

    .conect__content-item {
        padding: 32px 24px;
    }

    .desc-collapse {
        max-height: 180px;
        position: relative;
    }

    .desc-collapse::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 72px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--desc-bg) 100%);
    }

    .desc-toggle {
        position: absolute;
        right: 12px;
        bottom: 0;
        z-index: 3;
        background: linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, #161616 60%);
        border: none;
        color: #fff;
        font-weight: 400;
        padding: 2px 2px 2px 30px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        font-size: 16px;
        text-transform: capitalize;
    }

    .desc-collapse.expanded {
        max-height: 2000px;
    }

    .desc-collapse.expanded::after {
        display: none;
    }


  .categories-control-wrapper {
        gap: 0 !important;
    }

    .categories {
        padding: 40px 0;
    }

    .hero-left__btn, .hero-left__info {
        padding: 0;
        padding-bottom: 32px;
    }

    #pay-ways .modal-content,
    #renewal .modal-content {
        padding: 40px 20px;
    }

    .new-ip-modal .modal-content {
        padding: 32px 16px 18px 16px;
    }

    #pay-ways .modal-dialog,
    #renewal .modal-dialog,
    .new-ip-modal .modal-dialog {
        width: 100%;
        margin: 0;
    }

    #renewal .modal-content,
    #pay-ways .modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .renewal 

    .change-game-modal .modal-content {
        padding: 48px 36px;
    }

    .catalog-hero__text {
        left: 30px;
        bottom: 40px;
        transform: none;
    }

    .catalog-hero-pagination {display: none;}

    .catalog-hero__text button {margin-top: 24px;}

    .catalog-games__list-tabs {
        padding: 28px 30px;
        width: 100%; /* ������������� ������ */
        margin-left: 0; /* ������� �������� */
        overflow-x: auto; /* �������� ��������� */
        scrollbar-width: none; /* ��� Firefox */
    }
    .new-games__title,
    .catalog-games__title {
        margin-left: 30px;
    }
    .catalog-games__title h1 {font-size: 32px !important;}

    .new-games__title h4 {font-size: 24px !important;}

    .connection__content-item a {
        padding: 20px;
        text-align: center;
    }
    
    .mac-os-btn {
        font-size: 14px;
    }
    
    .connection__content-item a,
    .update-ip {
        width: 100% !important;        
    }

    .mac-os-btn img {
        position: absolute;
        top: 20px;
    }

    .mac-os-btn {
        padding: 40px 20px 20px 20px !important;
    }

    .change-game-modal .modal-content {
        padding: 48px 36px;
    }
}


@media (max-width: 768px) {
.new-games__title {
   flex-wrap: wrap;
}

    .catalog-hero__slide_1,
    .catalog-hero__slide_2,
    .catalog-hero__slide_3,
    .catalog-hero__slide_4,
    .catalog-hero__slide_5,
    .catalog-hero__slide_6 {
        height: auto;
        min-height: 420px;
        padding: 32px 24px 56px;
        display: flex;
        align-items: flex-end;
    }

    .catalog-hero__text {
        position: static;
        left: 0;
        bottom: 0;
        transform: none;
        max-width: 100%;
        width: 100%;
    }

    .more-feature__list,
    .inside-game__list {
        width: calc(100% + 32px);
    }

    .inside-block,
    .inside-hero-content {
        padding: 32px;
    }

    .more-feature__list {
        padding-left: 0px;
        width: calc(100% + 32px);
    }

    .game-play-block {
        padding: 20px;
    }

    .inside-game__list {
        height: 180px;
    }

    .inside-game-block {
        min-width: 240px;
    }

    .same-games {
        padding-left: 32px;
    }

    .inside-block-title {
        font-size: 24px;
    }
   

 .hero-left {
        height: 100%;
        padding: 50px 20px;
    }

    .hero-left__img {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -65px;
    }

    .hero-left-bg {
        background: linear-gradient(180deg, rgba(33, 32, 32, 0) 31.45%, #212020 86.89%);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .hero-left__content {
        position: relative;
        top: -170px;
        z-index: 2;
    }

    .new-games__list .catalog-item {
        min-width: 256px;
    }
.new-games__list .catalog-item__img {
    height: 256px;

}

    .categories {
        padding: 32px 24px;
    }

    .home-hero__left-bottom {
        height: auto;
        padding: 32px;
    }

    .home-hero {
        height: auto;
    }

    .home-hero__left-img {
        position: relative !important;
        display: flex;
        justify-content: center;
    }

    .home-hero__left-top {
        height: 680px;
    }

    .home-hero__left-top > div > div:last-of-type {
        margin-top: 0 !important;
        position: absolute;
        bottom: -255px;
    }

    .home-hero__left-top-text {
        gap: 4px;
    }

    .home-hero__left-top-text > div {
        border-radius: 24px;
        background-color: #212020;
        padding: 32px;
    }

    .home-hero__left-bottom button {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        box-sizing: border-box;
    }
    
    /* Специально для кнопки renewal-sub на мобильных */
    #renewal-sub {
        min-width: 0 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .change-game-modal .modal-dialog {
        width: 100%;
        margin: 0;
    }

    .change-game-modal .search {
        margin-left: 0;
        width: 100%;
    }

    .account {
        padding: 0;
    }
    
    .my-requests,
    .account_tabs,
    .my-orders__item {
        padding: 32px;
    }

    .all-games {
        padding: 32px 0;
    }

    .connection__content-item {
        padding: 40px 20px;
    }

    .connection__content-video {
        width: 210px;
        height: 115px;
        right: 20px;
    }

    .control-settings__controls, .connection__control-row {
        padding: 28px 32px;
    }

    .control-settings {
        padding: 0;
        margin-top: 32px;
    }

    .connection__title {margin-left: 32px;}

    /* Адаптация для wheel, voting и freeze */
    .categories-controls {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        padding-right: 30px; /* Место для индикатора свайпа */
    }

    /* Визуальная индикация возможности свайпа влево */
    .categories-controls::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to left, var(--black) 0%, rgba(33, 32, 32, 0.8) 50%, transparent 100%);
        pointer-events: none;
        z-index: 10;
        opacity: 0.6;
    }

    /* Стрелка-индикатор свайпа */
    .categories-controls::before {
        content: '→';
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        color: #AAB2BD;
        font-size: 18px;
        pointer-events: none;
        z-index: 11;
        opacity: 0.7;
        animation: swipeHint 2s ease-in-out infinite;
    }

    @keyframes swipeHint {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
            opacity: 0.7;
        }
        50% {
            transform: translateY(-50%) translateX(-5px);
            opacity: 0.4;
        }
    }

    /* Скрываем индикатор, если прокрутка достигла конца */
    .categories-controls.scrolled-end::after,
    .categories-controls.scrolled-end::before {
        opacity: 0;
    }

    /* Адаптация блоков заданий для колеса фортуны на мобильных - размещаем в 2 строки */
    #tasks-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Увеличиваем ширину блоков заданий на мобильных */
    #tasks-container > div {
        padding: 16px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Применяем тот же подход, что и для модального окна смены игры */
    .wheel-main-container {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* Убираем padding у родительского контейнера (переопределяем inline стиль) */
    #wheel-container {
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Убираем ограничения у родительского контейнера категорий */
    #wheel.categories-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Исправляем переполнение текста PSN логина в заморозках */
    #freeze-accounts-list > div {
        min-width: 0 !important;
    }

    #freeze-accounts-list label {
        min-width: 0 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    .categories-controls::-webkit-scrollbar {
        display: none;
    }

    .categories-control {
        white-space: nowrap;
        font-size: 14px;
        padding: 12px 16px;
    }

    #voting-container {
        padding: 20px 16px;
    }

    #wheel-container {
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Убираем ограничения у родительского контейнера категорий */
    #wheel.categories-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Убираем ограничения у контейнера на мобильных */
    .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #freezeModal .modal-dialog,
    #freezeNotificationModal .modal-dialog {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    #freezeModal .modal-content,
    #freezeNotificationModal .modal-content {
        border-radius: 0;
        padding: 24px 16px;
    }

    #freeze-accounts-list {
        max-height: 400px;
        overflow-y: auto;
    }
}
@media (min-width: 577px) {
.new-games__title {
   flex-wrap: wrap;
}

    .desc-toggle {
        display: none;
    }

    .desc-collapse::after {
        display: none;
    }
}