@font-face {
    font-family: Valera Round;
    font-style: bold;
    font-weight: 700;
    font-display: swap;
    src: url('/reelmaniaclub-fonts/reelmaniaclub-varelaround-regular.woff2') format("woff2")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/reelmaniaclub-fonts/reelmaniaclub-inter-regular.woff2') format("woff2")
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

html,
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #212121;
    color: #fff;
}

ul {
    list-style: none;
    padding: 0;
}

.hero-container {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-hero.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    max-width: 1340px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.about-container {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    padding: 111px 10px;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.reelmaniaclub-container-faq {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px 16px;
}

/* --- Общие стили для шапки --- */
.reelmaniaclub-navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    padding: 24px 17px;
    background: #33333380;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 100;
    /* Ставим шапку выше контента */
}

.reelmaniaclub-navbar .reelmaniaclub-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Valera Round, serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

/* --- Стили для ссылок в меню (общие) --- */
.reelmaniaclub-nav {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 32px;
}

.reelmaniaclub-burger {
    display: none;
    /* Скрываем бургер на десктопе */
}

.reelmaniaclub-overlay {
    display: none;
    /* Скрываем оверлей на десктопе */
}

.reelmaniaclub-nav a {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.reelmaniaclub-nav a:hover {
    opacity: 0.7;
}

/* --- Кнопки в меню --- */
.reelmaniaclub-btn-signup {
    font-family: Valera Round, serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    background: #6DEBE1;
    color: #000;
    padding: 8px 48px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.reelmaniaclub-btn-login {
    font-family: Valera Round, serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    background: transparent;
    color: #ffffff;
    padding: 7px 53px;
    border: 1px solid #6DEBE1;
    border-radius: 10px;
    cursor: pointer;
}

/* --- Кнопка Бургера (скрыта по умолчанию) --- */
.reelmaniaclub-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 130;
    /* Выше чем меню и оверлей */
}

/* --- Оверлей (скрыт по умолчанию) --- */
.reelmaniaclub-overlay {
    display: none;
}

/* Hero */
.reelmaniaclub-hero {
    background: #1F1F1F;
    background-size: cover;
    background-position: center;
    padding: 32px 16px 0px 16px;
}

.reelmaniaclub-infohero {
    display: flex;
    padding-left: 20px;
}

.reelmaniaclub-infohero-about {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 24px;
    padding-bottom: 149px;
}

.reelmaniaclub-hero h1 {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 70px;
    line-height: 100%;
    letter-spacing: -3%;
    text-transform: uppercase;
}

.reelmaniaclub-hero p {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -2%;
    max-width: 598px;
}

.reelmaniaclub-img-hero-container {
    display: flex;
}

.reelmaniaclub-img-hero {
    max-width: 100%;
    /* не шире контейнера */
    height: 593px;
    /* сохраняем пропорции */
    object-fit: contain;
    /* вписывается красиво */
    display: block;
    /* убираем возможные лишние отступы */
}

.reelmaniaclub-hero-about h1 {
    font-family: Playfair Display;
    font-size: 64px;
    margin-bottom: 24px;
    font-weight: 700;
    line-height: 120%;
}

.reelmaniaclub-hero-about p {
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    margin-bottom: 24px;
}

.reelmaniaclub-descr_block {
    max-width: 790px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    padding: 92px 0px;
}

.reelmaniaclub-btn {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FE10FA 0%, #0571FF 100%);
    color: #fff;
    padding: 8px 90px;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.reelmaniaclub-btn-signup {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FE10FA 0%, #0571FF 100%);
    color: #000;
    padding: 8px 24px;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-right: 24px;
}

.reelmaniaclub-btn-login {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    text-transform: uppercase;
    background: transparent;
    color: #ffffff;
    padding: 7px 24px;
    border-radius: 8px;
    border: 2px solid #FE10FA;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.reelmaniaclub-btn:hover {
    opacity: 0.7;
    /* эффект затемнения */
}

/* About */
.reelmaniaclub-about {
    padding: 0px 16px;
}

.reelmaniaclub-about .container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.reelmaniaclub-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.reelmaniaclub-p_container-list {
    display: flex;
    gap: 20px;
    margin: 0;
}

.reelmaniaclub-p_container-img1 {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-earth.png');
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.reelmaniaclub-p_container-img2 {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-telescope.png');
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.reelmaniaclub-p_container-img3 {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-rocket.png');
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.reelmaniaclub-p_container-img4 {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-stars.png');
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.reelmaniaclub-p_container-list h3 {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
}

.reelmaniaclub-p_container-list-item p {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
}

.reelmaniaclub-p_container-list-item {
    border-radius: 8px;
    border: 2px solid transparent;
    background:
        /* заливка внутри */
        linear-gradient(90deg, #2D2D2D 0%, #2D2D2D 100%) padding-box,
        /* градиентная рамка */
        linear-gradient(180deg, #16D4FF 0%, #C610FE 100%) border-box;
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.reelmaniaclub-about-us {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-about.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.reelmaniaclub-about-info {
    background: #18181833;
    backdrop-filter: blur(10px);
    border: 2px solid #FE10FA;
    border-radius: 16px;
    max-width: 846px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    gap: 16px;
}

.reelmaniaclub-about-info h2 {
    font-family: Valera Round;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 48px;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
}

.reelmaniaclub-about-list {
    list-style: disc;
    padding-left: 20px;
}

.reelmaniaclub-about-list2 {
    margin: 0;
}

.reelmaniaclub-about-info-descr-container {
    display: flex;
    flex-direction: column;
}

.reelmaniaclub-about-info-descr-container p {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
}

.reelmaniaclub-list_title {
    margin-bottom: 0px !important;
}

.reelmaniaclub-p_container_list {
    margin-top: 0px;
    padding-left: 1em;
    list-style: disc;
}

.reelmaniaclub-text h2 {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
}

/* Popular Games */

.reelmaniaclub-populargames {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-populargames.webp');
    background-size: cover;
    padding: 50px 16px 30px 16px;
}

.reelmaniaclub-text-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
}

.reelmaniaclub-populargames .reelmaniaclub-text-game h2 {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
}

.reelmaniaclub-p_container-list-game {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.reelmaniaclub-p_container-list-item-game {
    border-radius: 8px;
    border: 2px solid transparent;
    background:
        /* заливка внутри */
        linear-gradient(90deg, #212121 0%, #212121 100%) padding-box,
        /* градиентная рамка */
        linear-gradient(180deg, #16D4FF 0%, #C610FE 100%) border-box;
    backdrop-filter: blur(15px);
    padding: 16px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reelmaniaclub-star {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-icons/reelmaniaclub-star.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 4px;
}

.reelmaniaclub-list-item-game-descr {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reelmaniaclub-list-item-game-descr h3 {
    font-family: Inter;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 5%;
    text-align: center;
}

.reelmaniaclub-list-item-game-descr p {
    font-family: Inter;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 5%;
    text-align: center;
}

.reelmaniaclub-rating {
    display: flex;
    align-items: center;
    align-items: flex-end;
}

.reelmaniaclub-btn-games {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FE10FA 0%, #0571FF 100%);
    color: #fff;
    padding: 8px 10px;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    text-align: center;
}

.reelmaniaclub-btn-games:hover {
    opacity: 0.7;
    /* эффект затемнения */
}

.reelmaniaclub-btn-games a {
    color: #fff;
    text-decoration: none;
}

/* FAQ */

.reelmaniaclub-faq {
    padding-top: 50px;
    padding-bottom: 0px;
}

.reelmaniaclub-faq_title {
    font-family: Valera Round;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;
    text-transform: uppercase;
}

.faq-accordion {
    margin-bottom: 60px;
}

/* Элемент аккордеона */
.accordion-item {
    transition: all 0.3s ease-in-out;
}

/* Заголовок */
/* Заголовок-кнопка */
.accordion-header {
    /* Ваши существующие стили. */
    border: 1px solid #BB9346;
    border-radius: 8px;
    font-family: Inter;
    font-weight: 500;
    font-size: 20px;
    background-color: transparent;
    width: 100%;
    padding: 25px;
    color: #ffffff;
    cursor: pointer;
    text-align: start;
    margin-bottom: 8px;


    display: flex;
    align-items: center;
    gap: 15px;
}

/* Новый стиль для обертки текста */
.accordion-title {
    flex-grow: 1;
    text-align: left;

}


/* Серая циферка слева */
.accordion-number {
    font-family: Inter;
    font-weight: 400;
    font-size: 24px;
    line-height: 110.00000000000001%;
    letter-spacing: -2%;
    flex-shrink: 0;
    color: #FFFFFF66;
}

/* Стрелка */
.accordion-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
    margin-left: auto;
    /* всегда уходит вправо */
    flex-shrink: 0;
    /* не сжимается при адаптиве */
}

/* Контент */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* Текст */
.accordion-content p {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFFCC;
    line-height: 1.6;
    margin: 0;
    padding: 0 25px 20px 25px;
}

/* Активный блок */
.accordion-item.active {
    background: transparent;
}

.accordion-item {
    border: none;
    border-top: 1px solid #FFFFFF33;
    border-bottom: 1px solid #FFFFFF33;
    border-radius: 0px;
    overflow: hidden;
    /* чтобы текст аккуратно выезжал */
    transition: all 0.3s ease;
}



.accordion-header {
    font-family: Inter;
    font-weight: 500;
    font-size: 24px;
    line-height: 110.00000000000001%;
    letter-spacing: -2%;
    border: none;
    /* у кнопки убираем рамку */
    border-radius: 0;
    padding: 25px;
    background: transparent;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.accordion-header text {
    max-width: 850px;
}

.accordion-item.active .accordion-icon {
    transform: rotate(-135deg);
}

/* Плавное раскрытие — max-height большое */
.accordion-item.active .accordion-content {
    max-height: 500px;
    padding-top: 15px;
}

/* PlayerSay */
.reelmaniaclub-playerssay {
    padding: 0 16px;
}


.reelmaniaclub-player-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reelmaniaclub-player-avatar {
    background-image: url('/reelmaniaclub-img/reelmaniaclub-icons/reelmaniaclub-quote.png');
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
}

.reelmaniaclub-down {
    display: flex;
    justify-content: space-between;
}

.reelmaniaclub-player-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.stars {
    display: flex;
}

.reelmaniaclub-p_container-list-item-player-card {
    background: #33333380;
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reelmaniaclub-p_container-list-item-player-card p {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
}

/* Footer */
footer {
    background: #121212;
    padding: 50px 0;
}

.reelmaniaclub-footer-grid {
    padding: 0px 16px 0px 16px;
    max-width: 1240px;
    margin: 0 auto;
}

.reelmaniaclub-footer-grid h2 {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    margin-bottom: 16px;
}

.reelmaniaclub-footer-grid p {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    margin-bottom: 30px;
}

.reelmaniaclub-block_1 {
    display: flex;
    gap: 40px;
}

.reelmaniaclub-links-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0px 16px;
}

.reelmaniaclub-partners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    flex-wrap: wrap;
}

.reelmaniaclub-coopyright {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-right: 16px;
    padding-left: 16px;
}

.reelmaniaclub-coopyright a {
    font-family: Inter;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    text-transform: capitalize;
    text-decoration: underline;
    text-decoration-style: solid;
}

.reelmaniaclub-coopyright p {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 155%;
}

.reelmaniaclub-block_1 div {
    width: 50%;
}

.reelmaniaclub-policy {
    display: flex;
    gap: 56px;
    margin: 0;
}

.hover-opacity:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;

}

.reelmaniaclub-popupauth {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100vw;
    height: 600px;
    z-index: 8;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
    /*  Центрируем контент по вертикали и горизонтали */
}

.reelmaniaclub-popupauth.active {
    opacity: 1;
    visibility: visible;
}

.reelmaniaclub-popupauth__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.reelmaniaclub-popupauth__content {
    position: relative;
    z-index: 2;
    background: #303030;
    /*  Темный фон для контента */
    border-radius: 20px;
    padding: 30px;
    width: 600px;
    /*  Фиксированная ширина */
    box-sizing: border-box;
    /*  Чтобы padding не ломал ширину */
    margin: 15px;
    backdrop-filter: blur(10px)
}

.reelmaniaclub-popupauth__item {
    display: none;
}

.reelmaniaclub-popupauth__item.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.reelmaniaclub-popupauth_link-forgot {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-style: solid;
    color: #FFFFFFCC;
    margin-bottom: 20px;
}

.reelmaniaclub-popupauth_link-sign-log {
    font-family: Valera Round;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    color: #fff;
}

.button_sign {
    background: transparent;
    border: none;
    cursor: pointer;
}

.reelmaniaclub-popupauth-help {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.reelmaniaclub-popupauth__title {
    font-family: Valera Round;
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
    /*  Белый цвет для заголовков */
}

.reelmaniaclub-popupauth__form {
    display: flex;
    flex-direction: column;
    width: 72%;
}

.reelmaniaclub-popupauth__input {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    color: #02101B;
}

.reelmaniaclub-popupauth__button {
    font-family: Valera Round;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #008AC9 0%, #305A84 100%);
    color: #ffffff;
    padding: 8px 90px;
    border: 1px solid #065D5B;
    text-decoration: none;
    box-shadow: 0px 0px 4px 0px #27486A inset;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-bottom: 20px;
}

.reelmaniaclub-popupauth__button:hover {
    opacity: 0.8;
}

.tx-16 {
    font-size: 16px;
}

.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 20px;
}

.w100 {
    background: none;
    color: #fff;
    border: none;
    cursor: pointer;
}

.tx-main {
    font-size: 16px;
    color: #fff;
    margin-top: 20px;
}

.status {
    font-family: Playfair Display;
    border-radius: 30px;
    margin-top: 15px;
    padding: 10px;
    background-color: #FF7E5F;
    color: #fff;
    border: 2px solid greenyellow;
    display: none
}

.form.active .status {
    display: block
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media(max-width: 1170px) {
    .whychoose {
        font-size: 50px;
    }

    .reelmaniaclub-descr_block {
        padding-bottom: 0px;
    }

    .reelmaniaclub-p_container-list {
        flex-wrap: wrap;
    }

    .reelmaniaclub-infohero {
        flex-direction: column;
    }

    .reelmaniaclub-img-hero-container {
        justify-content: flex-end;
    }

    .reelmaniaclub-infohero {
        flex-direction: column;
        padding-right: 16px;
    }

    .reelmaniaclub-hero h1 {
        font-size: 60px;
    }

    .reelmaniaclub-img-hero-container {
        justify-content: flex-end;
    }

    /* 1. Показываем бургер */
    .reelmaniaclub-burger {
        display: flex;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 130;
        /* Выше чем меню и оверлей */
    }

    /* 2. Превращаем навигацию в скрытую боковую панель */
    .reelmaniaclub-nav {
        /* Эти стили отвечают за скрытие и позиционирование */
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 80%;
        height: 100vh;
        background: #1c1c1c;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        /* Прячем за правым краем экрана */
        visibility: hidden;
        /* Делаем невидимым, чтобы избежать багов */
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        z-index: 120;

        /* Эти стили отвечают за ВНУТРЕННЕЕ содержимое меню */
        display: flex;
        /* ВОЗВРАЩАЕМ FLEX, чтобы выровнять элементы */
        flex-direction: column;
        /* Элементы теперь в столбик */
        align-items: flex-end;


        /* Центрируем по горизонтали */
        gap: 25px;
        padding: 40px;

        padding-top: 100px;
    }

    /* 3. Когда меню открыто (JS добавит класс 'is-open') */
    .reelmaniaclub-nav.is-open {
        transform: translateX(0);
        /* Возвращаем на место */
        visibility: visible;
        /* Делаем видимым */
    }

    /* 4. Кнопки в мобильном меню тоже ставим в столбик */
    .reelmaniaclub-btn-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .reelmaniaclub-btn-signup {
        margin-right: 0;
    }

    /* 5. Настраиваем оверлей (затемняющий фон) */
    .reelmaniaclub-overlay {
        display: block;
        position: fixed;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        /* Нельзя кликнуть сквозь него, когда он невидим */
        transition: opacity 0.3s ease-in-out;
        z-index: 110;
    }

    /* 6. Когда оверлей активен */
    .reelmaniaclub-overlay.active {
        opacity: 1;
        pointer-events: auto;
        /* Теперь можно кликнуть для закрытия */
    }
}

@media(max-width: 665px) {

    .reelmaniaclub-descr_block {
        gap: 12px;
    }

    .reelmaniaclub-img-hero {
        max-width: 287px;
        height: 252px;
    }

    .reelmaniaclub-btn-signup {
        margin-right: 0px;
    }

    .reelmaniaclub-btn-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .reelmaniaclub-navbar .container {
        margin-bottom: 24px;
    }

    .reelmaniaclub-infohero {
        display: flex;
        padding-left: 10px;
        padding-bottom: 50px;
        padding-right: 10px;
    }

    .reelmaniaclub-hero h1 {
        font-size: 37px;
    }

    .reelmaniaclub-hero p {
        font-size: 15px;
        font-style: normal;
    }

    .reelmaniaclub-about {
        padding: 32px 16px;
    }

    .reelmaniaclub-populargames .reelmaniaclub-text-game h2 {
        font-size: 24px;
    }

    .reelmaniaclub-about-info h2 {
        font-size: 30px;
        text-align: center;
    }

    .reelmaniaclub-about-info-descr-container p {
        font-size: 14px;
    }

    .reelmaniaclub-block_1 {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .reelmaniaclub-block_1 div {
        width: 100%;
    }

    .reelmaniaclub-partners {
        flex-wrap: wrap;
        gap: 30px;
    }

    .reelmaniaclub-coopyright {
        flex-direction: column-reverse;
        gap: 30px;
        justify-content: space-between;
    }

    .reelmaniaclub-policy {
        display: flex;
        justify-content: space-between;
    }

    .reelmaniaclub-hero-about h1 {
        font-size: 37px;
    }

    .reelmaniaclub-text h2 {
        font-size: 24px;
    }

    .reelmaniaclub-p_container-list h3 {
        font-size: 18px;
    }

    .reelmaniaclub-p_container-list-item p {
        font-size: 14px;
    }

    .reelmaniaclub-hero-about p {
        font-size: 15px;
        font-style: normal;
        margin-bottom: 24px;
    }

    .reelmaniaclub-infohero-about {
        padding-bottom: 67px;
        padding-top: 43px;
    }

    .reelmaniaclub-p_container {
        font-size: 15px;
    }

    .reelmaniaclub-footer-grid {
        flex-wrap: wrap;
        gap: 20px;
    }

    .accordion-header {
        font-size: 15px;
    }


    .faq-accordion {
        margin-bottom: 40px;
    }

    .reelmaniaclub-popupauth__form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reelmaniaclub-p_container-list-game {
        display: flex;
        flex-wrap: wrap;
        /* Позволяет карточкам переноситься на новую строку */
        justify-content: center;
        /* Центрирует карточки */
        gap: 12px;
        /* Расстояние между карточками */
        width: 100%;
        /* Контейнер занимает всю доступную ширину */

        align-items: stretch;
    }

    /* === ОСНОВНЫЕ ИЗМЕНЕНИЯ ДЛЯ АДАПТИВНОСТИ КАРТОЧЕК === */
    .reelmaniaclub-p_container-list-item-game {
        padding: 12px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;

        /* 1. Устанавливаем базовую ширину для двух колонок. */
        /* calc(50% - 20px) = 50% ширины контейнера минус половина gap (40px / 2) */
        flex-basis: calc(50% - 20px);

        /* 2. Позволяем карточкам расти и сжиматься */
        flex-grow: 1;
        flex-shrink: 1;

        /* 3. Ограничиваем максимальную ширину, чтобы на больших экранах они не были слишком широкими */
        max-width: 320px;

        /* 4. Важно для правильного расчета ширины с учетом padding */
        box-sizing: border-box;

        justify-content: space-between;

    }

    /* === ДЕЛАЕМ ИЗОБРАЖЕНИЕ ВНУТРИ КАРТОЧКИ АДАПТИВНЫМ === */
    .reelmaniaclub-p_container-list-item-game img {
        width: 100%;
        height: auto;
        /* Сохраняет пропорции изображения */
        border-radius: 8px;
        /* Небольшое скругление для красоты */
    }

    .reelmaniaclub-star {
        background-image: url('/reelmaniaclub-img/reelmaniaclub-icons/reelmaniaclub-star.svg');
        background-repeat: no-repeat;
        background-size: contain;
        /* Чтобы звезда не обрезалась */
        width: 22px;
        height: 22px;
        margin-right: 4px;
    }

    .reelmaniaclub-list-item-game-descr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 8px;
    }

    .reelmaniaclub-list-item-game-descr h3 {
        font-family: Inter;
        font-weight: 500;
        font-size: 20px;
    }

    .reelmaniaclub-list-item-game-descr p {
        font-family: Inter;
        font-weight: 400;
        font-size: 18px;
    }

    .reelmaniaclub-rating {
        display: flex;
        align-items: center;
    }

    /* === ИЗМЕНЕНИЯ ДЛЯ КНОПКИ === */
    .reelmaniaclub-btn-games {
        font-family: Valera Round;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;

        /* 1. Делаем кнопку на всю ширину карточки */
        width: 100%;
        padding: 12px 20px;
        /* Более сбалансированные отступы */
        text-decoration: none;
        box-sizing: border-box;
        /* Чтобы padding не ломал ширину */
        border-radius: 10px;
        cursor: pointer;
        transition: opacity 0.3s ease;
        text-align: center;
    }

    .reelmaniaclub-about-info {

        padding-left: 16px;
        padding-top: 30px;
        padding-right: 16px;
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .reelmaniaclub-faq_title {
        font-size: 24px;
    }

    .whychoose {
        font-size: 27px;
    }

}

@media(max-width: 360px) {


    .hero-container {
        margin: 10px;
    }

    .reelmaniaclub-btn {
        width: 100%;
    }


    .reelmaniaclub-hero p {
        display: none;
    }

    .reelmaniaclub-hero {
        padding: 0px;
    }

    .reelmaniaclub-navbar .container {
        padding: 16px 10px;
    }

    .reelmaniaclub-logo img {
        width: 30px;
        height: 30px;
    }

    .reelmaniaclub-navbar .container {
        margin: 0px;
    }

    .reelmaniaclub-popupauth__content {
        padding: 20px;
    }

    .reelmaniaclub-about-info {
        padding: 60px 10px;
    }

    .reelmaniaclub-descr_block {
        padding: 34px 0px;
    }

    .reelmaniaclub-about-info h2 {
        line-height: 100%;
        margin-bottom: 20px;
    }

    .reelmaniaclub-navbar .reelmaniaclub-logo {
        font-size: 14px;
    }

    .reelmaniaclub-p_container-list-item {
        padding: 10px;
    }

    .reelmaniaclub-btn-games {
        padding: 12px 10px;
    }
}

@media(max-width: 345px) {
    .reelmaniaclub-hero h1 {
        font-size: 33px;
    }

    .reelmaniaclub-btn {
        padding: 8px 10px;
    }

    .whychoose {
        font-size: 27px;
    }
}


/* /* === Общие стили для страниц с текстом (Terms, Privacy) === */


.terms {
    background-color: #1a1a1a;
    /* Глубокий темный фон */
    color: #e0e0e0;
    /* Слегка приглушенный белый для текста, легче для глаз */
    font-family: 'Roboto', sans-serif;
    /* Отличный читабельный шрифт для основного текста */
    line-height: 1.7;
    /* Увеличиваем межстрочный интервал для комфортного чтения */
    padding: 60px 0;
    /* Вертикальные отступы для секции */
}

/* Контейнер, который центрирует контент и ограничивает его ширину */
.terms .container {
    max-width: 900px;
    /* Оптимальная ширина для текстового контента */
    margin: 0 auto;
    padding: 0 20px;
    /* Отступы по бокам для мобильных устройств */
}


/* === Стили для заголовков === */

.terms h1 {
    /* Яркий акцентный шрифт для главного заголовка */
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Легкая тень для объема */
}

.terms h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 50px;
    /* Большой отступ сверху для разделения секций */
    margin-bottom: 20px;
    padding-bottom: 10px;
    /* Красивая линия-разделитель в акцентном цвете */
    border-bottom: 2px solid #54A338;
}


/* === Стили для основного контента === */

.terms p {
    margin-bottom: 20px;
    /* Стандартный отступ между параграфами */
}

/* Стилизация списков для более опрятного вида */
.terms ul {
    list-style: none;
    /* Убираем стандартные маркеры */
    padding-left: 0;
    margin-bottom: 20px;
}

.terms li {
    position: relative;
    /* Необходимо для позиционирования псевдо-элемента */
    padding-left: 30px;
    /* Освобождаем место для кастомного маркера */
    margin-bottom: 12px;
}

/* Создаем кастомный, стильный маркер для списка */
.terms li::before {
    content: '✓';
    /* Используем галочку в качестве маркера */
    position: absolute;
    left: 0;
    top: 0;
    color: #51B2CD;
    /* Используем второй акцентный цвет */
    font-weight: bold;
    font-size: 1.2rem;
}

/* Стили для ссылок внутри текста */
.terms a {
    color: #51B2CD;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* === Адаптивность для мобильных устройств === */
@media (max-width: 768px) {
    .terms h1 {
        font-size: 1.5rem;
        /* Уменьшаем главный заголовок */
    }

    .terms h2 {
        font-size: 1.6rem;
        /* Уменьшаем подзаголовки */
    }

    .terms {
        padding: 40px 0;
        /* Уменьшаем вертикальные отступы */
    }
}