/* custom.css */

:root {
    --button-img-url: url(../images/button/button.png?v=1);
    --font-0: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --font-1: "KleeOne", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --font-2: "Book Antiqua", "Celtes SP", Arial, sans-serif;
    --font-3: "riverhack", "Celtes SP", Arial, sans-serif;
    --font-4: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --button-w: 36.6875rem;
    --button-h: 10.625rem;
    --button-fs: 1.8rem;
}

.instruction-overlay {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
}
.instruction-overlay--visible {
    display: block;
}
.instruction-overlay__background {
    background-color: #0008;
    width: 100%;
    height: 100%;
}
.instruction-overlay-content {
    position: absolute;
    z-index: 101;
    overflow-y: auto;
    background: linear-gradient(#5e1c0f, #952f1a);
    color: #efe3d7;
    font-size: 1.5rem;
    padding-left: 1.7rem;
    padding-right: 1.7rem;
    padding-top: 1rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25rem;
    min-height: 20rem;
    max-height: 80vh;
    border-radius: 5%;
}
.instruction-overlay-content__note {
    font-family: cursive;
    background-color: #732618;
    padding: 5px;
    font-size: 0.8em;
    box-shadow: 2px 2px 15px #ca5b47;
    border-radius: 0.3em;
}
.instruction-overlay-content__close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    overflow: hidden;
    background-color: #d09444;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.instruction-overlay-content__close-btn::before,
.instruction-overlay-content__close-btn::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #333;
    border-radius: 1px;
}
.instruction-overlay-content__close-btn::before {
    transform: rotate(45deg) translateY(50%);
}
.instruction-overlay-content__close-btn::after {
    transform: rotate(-45deg) translateY(50%);
}

.feature__content_back {
    justify-content: center;
}

.generous__container {
    display: block;
    margin-top: 1rem;
}

.generous__tabs {
    text-align: center;
}

.generous__media {
    aspect-ratio: 16 / 9;
    height: auto;
    width: auto;
    max-height: 56vh;
    margin: auto;
}

.generous__items {
    align-items: flex-start;
}

.feature__content_front {
    justify-content: center;
    padding-top: 10.375rem;
}

.prize__heading {
    font-size: calc(0.9rem * var(--prize-scale));
}

.prize__heading:after {
    background-size: 100% 150%;
}

.raffle__fond  {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-weight: bold;
}


.shine-text {
  background: linear-gradient(
    90deg,
    #ffd092 0%,
    #eba242 50%,
    #fff 100%
  );
  background-size: 200% 100%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: none;
}

.shine-text.active {
  animation: shine 3s ease forwards;
}

.button_txt {
    font-weight: normal;
    color: #000;
}

[data-section=aboutclass] {
    background-image:url(../images/aboutclass/bg.jpg?v=3);
}

[data-section=invitation] {
    background-image:url(../images/invitation/bg.jpg?v=1);
}

[data-section=hero] {
    background-image: url(../images/hero/bg.jpg?v=3);
}

[data-section=updates], [data-section=generous], [data-section=theses], [data-section=game], [data-section=start], [data-section=steps] {
    background-image:url(../images/bg-def.jpg?v=2);
}

[data-section=features], [data-section=community] {
    background-image:url(../images/bg-def-2.jpg?v=2);
}

.feature__text {
    max-width: 30rem;
    font-size: 1rem;
    overflow: visible;
}

.raffle__title {
    font-size: 3.15rem;
}

@keyframes shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ========================================
   FIX: Горизонтальная прокрутка кнопок-селекторов на мобильных
   Проблема: 6 кнопок не влезают на узких экранах
   Решение: Горизонтальный скролл
   ======================================== */

@media (max-width: 1199.9px) {
    .generous__items {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
        scroll-behavior: smooth;
    }

    .generous__items::-webkit-scrollbar {
        height: 6px;
    }

    .generous__items::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .generous__items::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, 0.5);
        border-radius: 3px;
    }

    .generous__items::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 215, 0, 0.8);
    }

    .generous__thumb {
        flex-shrink: 0 !important; /* Не сжимаем кнопки */
        min-width: auto !important;
    }

    .instruction-overlay-content {
        font-size: 1.2rem;
    }

    .generous__media {
        transform: scale(1);
    }

    [data-section=hero] {
        background-image: url(../images/hero/bg-tablet.jpg?v=2);
    }
}

/* Для очень маленьких экранов - уменьшаем кнопки */
@media (max-width: 539.9px) {
    .generous__thumb {
        transform: scale(0.9) !important;
    }

    .instruction-overlay-content {
        font-size: 1rem;
        width: 17rem;
    }

    [data-section=hero] {
        background-image: url(../images/hero/bg-mobile.jpg?v=3);
    }
}

@media (min-width: 680px) {
    .raffle__title {
        font-size: 5.9rem;
    }
}

/* S4 2026-09-17: фоны на 15 % мельче (масштаб, файлы не меняли) */
[data-section=hero],
[data-section=aboutclass],
[data-section=updates], [data-section=generous], [data-section=theses],
[data-section=game], [data-section=start], [data-section=steps],
[data-section=features], [data-section=community] {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* S4 2026-09-17: низ фонов растворяем в фон страницы, чтобы уменьшение на 15 % не давало чёрной полосы */
[data-section=hero] {
    background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/hero/bg.jpg?v=3);
    background-size: 100% 100%, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}
[data-section=aboutclass] {
    background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/aboutclass/bg.jpg?v=3);
    background-size: 100% 100%, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}
[data-section=updates], [data-section=generous], [data-section=theses],
[data-section=game], [data-section=start], [data-section=steps] {
    background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/bg-def.jpg?v=2);
    background-size: 100% 100%, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}
[data-section=features], [data-section=community] {
    background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/bg-def-2.jpg?v=2);
    background-size: 100% 100%, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}

/* S4 2026-09-17: текстовый блок первого экрана — справа (персонажи новой картинки слева) */
@media (min-width: 1200px) {
    [data-section=hero] .hero { align-items: flex-end; }
    [data-section=hero] .hero__box { margin-left: auto; margin-right: 0; }
}

/* S4 2026-09-17: новая кнопка первого экрана («Присоединяйся») + состояние наведения */
[data-section=hero] .raffle__button {
    --button-img-url: url(../images/button/button-hero.png?v=1);
}
[data-section=hero] .raffle__button:hover:before {
    background-image: url(../images/button/button-hero-nav.png?v=1);
    filter: none;
}

/* S4 2026-09-17: первый экран — кадры под каждую ширину, каскад как в оригинале (база=планшет, десктоп≥1200, телефон≤539.9) */
[data-section=hero] {
    background-image: url(../images/hero/bg-tablet.jpg?v=5);
    background-size: 75rem auto;
    background-position: center top;
    background-repeat: no-repeat;
}
@media (min-width: 1200px) {
    [data-section=hero] {
        background-image: url(../images/hero/bg.jpg?v=5);
        background-size: cover;
        background-position: center top;
    }
}
@media (max-width: 539.9px) {
    [data-section=hero] {
        background-image: url(../images/hero/bg-mobile.jpg?v=5);
    }
}
/* текст кнопки первого экрана — белый */
[data-section=hero] .raffle__button,
[data-section=hero] .raffle__button .button_txt {
    color: #fff;
}

/* S4 2026-09-17: шрифт первого экрана — Cormorant Bold (Google Fonts), по просьбе дизайнера */
[data-section=hero] .raffle__title,
[data-section=hero] .raffle__subtitle-text,
[data-section=hero] .raffle__fond-title,
[data-section=hero] .raffle__fond-sum {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
}

/* S4 2026-09-17: читаемость текста первого экрана поверх светлой части арта (временно, до кадра от дизайнера) */
@media (min-width: 1200px) {
    [data-section=hero] .hero__box {
        position: relative;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    [data-section=hero] .hero__box:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -2rem;
        right: -3rem;
        bottom: -2rem;
        left: -3rem;
        background: radial-gradient(ellipse at 50% 50%, rgba(8,3,4,.78) 0%, rgba(8,3,4,.6) 45%, rgba(8,3,4,.28) 70%, rgba(8,3,4,0) 88%);
        pointer-events: none;
    }
    [data-section=hero] .raffle__title,
    [data-section=hero] .raffle__subtitle-text,
    [data-section=hero] .raffle__fond-title,
    [data-section=hero] .raffle__fond-sum {
        text-shadow: 0 .125rem .25rem rgba(0,0,0,.85), 0 0 1.5rem rgba(0,0,0,.6);
    }
}

/* S4 2026-09-17: Cormorant Bold на навигацию, заголовки и кнопки + кегли кнопок (дизайнер) */
.menu__item,
.title, .subtitle,
.hero__content-text,
.button, .button .button_txt,
.btn {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
}
/* «Присоединяйся» — 30px, остальные кнопки (.btn: «Навыки и классы», «Ворваться», «Намочить пятачок») — 21px */
[data-section=hero] .raffle__button,
[data-section=hero] .raffle__button .button_txt {
    font-size: 30px;
}
.btn {
    font-size: 21px;
}

/* S4 2026-09-17 ФИКС: у градиентных надписей буквы прозрачные (background-clip:text) — тень проступала сквозь них */
[data-section=hero] .raffle__subtitle-text,
[data-section=hero] .raffle__fond-sum,
[data-section=hero] .shine-text {
    text-shadow: none;
}
/* «Premium low rate» возвращаем кистевой riverhack — его в списке шрифтов не было */
[data-section=hero] .raffle__subtitle-text {
    font-family: riverhack, "Celtes SP", Arial, sans-serif;
    font-family: var(--font-3);
    font-weight: 400;
}
/* мои боковые отступы сужали блок и ломали «Летний фреш» на две строки */
@media (min-width: 1200px) {
    [data-section=hero] .hero__box {
        padding-left: 0;
        padding-right: 0;
    }
}

/* S4 2026-09-17: снимаю свою тень со ВСЕХ надписей первого экрана — её не заказывали */
[data-section=hero] .raffle__title,
[data-section=hero] .raffle__subtitle-text,
[data-section=hero] .raffle__fond-title,
[data-section=hero] .raffle__fond-sum,
[data-section=hero] .shine-text {
    text-shadow: none;
}

/* S4 2026-09-17: по просьбе верстальщика — картинка дизайнера без кропа, cover на каждой секции */
[data-section=hero] {
    background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/hero/bg-full.jpg?v=8);
    background-size: 100% 100%, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}
@media (max-width: 1199.9px) {
    [data-section=hero] {
        background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/hero/bg-tablet.jpg?v=8);
        background-size: 100% 100%, cover;
    }
}
@media (max-width: 539.9px) {
    [data-section=hero] {
        background-image: linear-gradient(to bottom, rgba(12,4,6,0) 58%, rgba(12,4,6,.6) 78%, #0c0406 93%), url(../images/hero/bg-mobile.jpg?v=8);
        background-size: 100% 100%, cover;
    }
}
/* подложку под текстом первого экрана убираю — её не заказывали */
[data-section=hero] .hero__box:before {
    display: none;
}
/* полосу прокрутки скрываем, перелистывание — по секциям */
html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
[data-section] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* S4 2026-09-17: у Cormorant по умолчанию старостильные цифры («3» свисает ниже строки) — включаем прописные */
.menu__item,
.title, .subtitle,
.hero__content-text,
.button, .button .button_txt,
.btn,
[data-section=hero] .raffle__title,
[data-section=hero] .raffle__fond-title,
[data-section=hero] .raffle__fond-sum {
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum" 1;
    font-feature-settings: "lnum" 1;
}

/* S4 2026-09-17: CSS-снап убран — перелистывание делает js/section-paging.js, они спорили друг с другом */
html {
    scroll-snap-type: none;
}
[data-section] {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* S4 2026-09-17: новые арты кнопок .btn от дизайнера (404×106, размеры прежние) + обход кэша */
.btn,
.btn[data-open-tab-active=true],
.btn[data-open-tab-active=true]:hover {
    --btn-img-url: url(../images/btn/btn.png?v=2);
}
.btn[data-open-tab-active=false],
.btn_type_2 {
    --btn-img-url: url(../images/btn/btn-2.png?v=2);
}

/* S4 2026-09-17: цвет текста кнопок .btn под новые арты (было #000 на активной и #bdbdbd на неактивной) */
.btn,
.btn[data-open-tab-active=true],
.btn[data-open-tab-active=true]:hover {
    color: #fff1de;
}
.btn[data-open-tab-active=false],
.btn_type_2 {
    color: #c9c2b6;
}

/* S4 2026-09-17: отдельные арты левой и правой табы «Навыки»/«Классы» в двух состояниях (дизайнер) */
.aboutclass__btns .btn[data-open-tab="skills"] {
    --btn-img-url: url(../images/btn/tab-left-off.png?v=1);
}
.aboutclass__btns .btn[data-open-tab="skills"][data-open-tab-active="true"],
.aboutclass__btns .btn[data-open-tab="skills"][data-open-tab-active="true"]:hover {
    --btn-img-url: url(../images/btn/tab-left.png?v=1);
}
.aboutclass__btns .btn[data-open-tab="about"] {
    --btn-img-url: url(../images/btn/tab-right-off.png?v=1);
}
.aboutclass__btns .btn[data-open-tab="about"][data-open-tab-active="true"],
.aboutclass__btns .btn[data-open-tab="about"][data-open-tab-active="true"]:hover {
    --btn-img-url: url(../images/btn/tab-right.png?v=1);
}

/* S4 2026-09-17: новая рамка миниатюр от дизайнера (116×129, размер прежний) + обход кэша */
.thumbitem__pic-box:after {
    background-image: url(../images/thumbitem/border.png?v=2);
}

/* S4 2026-09-17: круг миниатюры под новую рамку — окно венка 83×71 px из 116×129 (было 109×91),
   1 px рамки = 0.0625rem бокса, поэтому диаметр 5.15rem и сдвиг вниз 1.17rem до центра окна */
.thumbitem__pic {
    width: calc(5.15rem * var(--thumbitem-scale));
    height: calc(5.15rem * var(--thumbitem-scale));
    margin-top: calc(1.17rem * var(--thumbitem-scale));
}

/* S4 2026-09-17: новый разделитель секций от дизайнера (2560×88, размер прежний) + обход кэша */
.section-devider:after {
    background-image: url(../images/section-devider.png?v=2);
}

/* S4 2026-09-17 ФИКС: круг был уменьшен слишком сильно — тёмная кайма иконок вылезла из-под венка.
   Лапы венка плотные от края до 15 px и от 101 px (центр.строка), окно по вертикали 25..95, центр окна y=60.
   Берём круг 6rem (96 px) и опускаем на 0.75rem (12 px): края уходят под лапы, кайма не видна. */
.thumbitem__pic {
    width: calc(6rem * var(--thumbitem-scale));
    height: calc(6rem * var(--thumbitem-scale));
    margin-top: calc(0.75rem * var(--thumbitem-scale));
}

/* S4 2026-09-17: картинку миниатюры поднять — снизу торчала, сверху был зазор */
.thumbitem__pic {
    margin-top: calc(0.3rem * var(--thumbitem-scale));
}

/* S4 2026-09-17: дата над таймером кистевым шрифтом плохо читалась — ставим Cormorant, как у заголовка */
.countdown__heading,
.countdown__title {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* S4 2026-09-17: блок даты и таймера крупнее — дата главная информация, против заголовка была мелкой (×1,7) */
[data-section=hero] .countdown__heading,
[data-section=hero] .countdown__title {
    font-size: 2.125rem;
    margin-bottom: .75rem;
}
[data-section=hero] .countdown__amount {
    font-size: 3.25rem;
}
[data-section=hero] .countdown__desc {
    font-size: 1.0625rem;
    letter-spacing: .04em;
}
[data-section=hero] .countdown__counter {
    height: auto;
    gap: .875rem;
    grid-gap: .875rem;
}
[data-section=hero] .countdown__devider {
    font-size: 3.25rem;
}

/* S4 2026-09-18: градиентный слой снизу фонов убран по просьбе владельца — только картинка, cover */
[data-section=hero] {
    background-image: url(../images/hero/bg-full.jpg?v=8);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
@media (max-width: 1199.9px) {
    [data-section=hero] {
        background-image: url(../images/hero/bg-tablet.jpg?v=8);
        background-size: cover;
    }
}
@media (max-width: 539.9px) {
    [data-section=hero] {
        background-image: url(../images/hero/bg-mobile.jpg?v=8);
        background-size: cover;
    }
}
[data-section=aboutclass] {
    background-image: url(../images/aboutclass/bg.jpg?v=3);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
[data-section=updates], [data-section=generous], [data-section=theses],
[data-section=game], [data-section=start], [data-section=steps] {
    background-image: url(../images/bg-def.jpg?v=2);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
[data-section=features], [data-section=community] {
    background-image: url(../images/bg-def-2.jpg?v=2);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

/* S4 2026-09-18: новый декор от дизайнера (все размеры совпали с прежними) + обход кэша */
:root {
    --decor-center: url(../images/decor-center.png?v=2);
}
.form_style_1:after {
    background-image: url(../images/decor-center.png?v=2);
}
.headline__dec, .headline__dec_left,
.raffle__fond-arrow, .raffle__fond-arrow_left {
    background-image: url(../images/h-dec-left.png?v=2);
}
.headline__dec_right, .raffle__fond-arrow_right {
    background-image: url(../images/h-dec-right.png?v=2);
}
.scl__item:after {
    background-image: url(../images/scl/item-bg.png?v=2);
}
.playzone:after {
    background-image: url(../images/playzone/border.png?v=2);
}
.join:after {
    background-image: url(../images/join/border.png?v=2);
}
.list li:before {
    background-image: url(../images/list-marker.png?v=2);
}

/* S4 2026-09-18: блок игры — сцена новой игры во всю ширину контентной колонки (16:9),
   топы и награды вторым рядом. Разметка — src/components/game_block.php.
   main.css НЕ правим: .game__body.game__body_wide (два класса) перебивает
   .game__body{grid-template-columns:37.125rem 1fr} из @media (min-width:1200px). */
.game__body.game__body_wide {
    grid-template-columns: 1fr;
}
.game__scene {
    min-width: 0;
}
/* Контейнер кадра игры. JS кладёт внутрь iframe и ставит класс is-playing */
.dfstage {
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 1672 / 941;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #110508;
    border: 0.125rem solid #907048;
    border-radius: 1.25rem;
    box-shadow: 0 0 1.25rem rgba(255, 116, 36, 0.35);
}
@supports not (aspect-ratio: 16 / 9) {
    .dfstage {
        height: 48vw;
        max-height: 47rem;
    }
}
.dfstage > iframe {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2;
}
.dfstage:fullscreen {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
}
.dfstage:-webkit-full-screen {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
}
/* Карточка старта: видна, пока игра не запущена */
.dfstage__start {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    box-sizing: border-box;
    max-width: 32rem;
    padding: 1.25rem;
    text-align: center;
}
.dfstage.is-playing .dfstage__start,
.game__scene.is-playing .dfstage__start {
    display: none;
}
/* Плашка «поверните телефон» — только на узких экранах, где 16:9 играть невозможно */
.dfstage__rotate {
    display: none;
    font-family: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-4);
    font-size: 1rem;
    line-height: 1.35;
    color: #e8d1a6;
    color: rgba(var(--color-light), 1);
}
.dfstage__bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
@media (max-width: 899.9px) {
    /* вместо полоски 16:9 — плашка с текстом и кнопкой; на весь экран игру разворачивает сам старт */
    .dfstage {
        aspect-ratio: auto;
        height: auto;
        max-height: none;
        padding: 2.5rem 1.25rem;
    }
    .dfstage.is-playing {
        aspect-ratio: 1672 / 941;
        height: auto;
        padding: 0;
    }
    .dfstage__rotate {
        display: block;
    }
    .dfstage__bar {
        display: none;
    }
}

/* S4 2026-09-18: награда, на которую пока не хватает очков (класс ставит js/dwarf-glue.js).
   Готового «неактивного» состояния у .award__btn в main.css нет, есть только .award__btn_owned. */
.award__btn_locked {
    opacity: 0.55;
    filter: grayscale(0.6);
    cursor: default;
}

/* S4 2026-09-18: заставка сцены вместо чёрного прямоугольника — кадр кузницы из ассетов игры */
.dfstage {
    background-image: url(../game/assets/runtime/scene/background_room.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dfstage.is-playing {
    background-image: none;
}
.dfstage__start {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 50%, rgba(8,3,4,.82) 0%, rgba(8,3,4,.62) 45%, rgba(8,3,4,.35) 75%, rgba(8,3,4,.2) 100%);
}
.dfstage__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
    max-width: 46rem;
}
.dfstage__title {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 3.25rem;
    line-height: 1.05;
    color: #fff1de;
}
.dfstage__lead {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: .75rem;
    color: #e8d1a6;
    color: rgba(var(--color-light), 1);
}
.dfstage__start-btn {
    margin-top: 1.75rem;
}

/* S4 2026-09-18 ФИКС: от прежней вёрстки у .dfstage__start остался max-width 32rem — из-за него
   заставка прижималась к левому краю и обрезалась. Плюс кнопка старта на новом арте дизайнера. */
.dfstage__start {
    max-width: none;
    width: 100%;
    padding: 0;
    gap: 0;
    grid-gap: 0;
}
.dfstage__card {
    max-width: 40rem;
    align-items: center;
}
.dfstage__title {
    font-size: 2.75rem;
}
.dfstage__lead {
    font-size: 1.375rem;
    max-width: 30rem;
}
.dfstage__start-btn {
    --button-img-url: url(../images/button/button-hero.png?v=1);
    color: #fff;
}
.dfstage__start-btn:hover:before {
    background-image: url(../images/button/button-hero-nav.png?v=1);
    filter: none;
}

/* S4 2026-09-18: попап выбора по кнопке «Играть» + кнопка «наверх» */
.promo-modal {
    width: min(92vw, 34rem);
    padding: 2rem 2rem 2.25rem;
    background: #140a08;
    border: 1px solid #a96f31;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.75);
    text-align: center;
}
.promo-modal__title {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 2rem;
    line-height: 1.1;
    color: #ffe7ae;
    margin-bottom: 1.5rem;
}
.promo-modal__text {
    color: #e8d1a6;
    color: rgba(var(--color-light), 1);
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0 0 1.25rem;
}
.promo-modal__actions {
    display: flex;
    flex-direction: column;
    grid-gap: .9rem;
    gap: .9rem;
}
.promo-modal .promo-modal__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.promo-modal__qr {
    width: 12rem;
    height: 12rem;
    display: block;
    margin: 0 auto 1.25rem;
    border-radius: .5rem;
}
.promo-totop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: #8e4115;
    color: #fff0c2;
    font: 700 1.4rem/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, background .2s;
}
.promo-totop:hover { background: #a04d18; }
.promo-totop.is-visible { opacity: 1; visibility: visible; }

/* S4 2026-09-18: попап «Игровые файлы» — подпись бота и строка поддержки */
.promo-modal__handle { color: #dfac17; font-weight: 700; margin: .5rem 0 1rem; }
.promo-modal__support { color: #b9aa8b; font-size: .9rem; line-height: 1.4; margin: 1rem 0 .25rem; }

/* S4 2026-09-18: полировка UI попапов — акценты, чат, кнопка «наверх» */
.promo-modal__support-link { color: #dfac17; text-decoration: underline; }
.promo-modal__support-link:hover { color: #ffc61a; }
.promo-totop {
    width: 3.25rem;
    height: 3.25rem;
    background: linear-gradient(180deg, #f3cd00, #c8a400);
    color: #101010;
    border: 1px solid #a96f31;
    font-size: 1.5rem;
    box-shadow: 0 .4rem 1.1rem rgba(0,0,0,.5);
}
.promo-totop:hover { background: linear-gradient(180deg, #ffe23a, #d8b400); }

/* S5: кнопка «Забрать» переехала из шапки игрового блока под карусель наград —
   сверху она читалась как «забрать что-то из шапки», призы были ниже и связи не было.
   В шапке блок стоял в ряд с заголовком, здесь его надо просто отцентрировать
   (у .game__invitation ширина min-content, поэтому auto-поля работают). */
.game__invitation_bottom {
    margin: 1.75rem auto 0;
}
.game__invitation_bottom .btn2 {
    min-width: 15rem;
}

/* S5: кнопка «Играть» на заставке рисовалась «мелкой», пока не догрузился её арт
   (он приходит фоном через --button-img-url). Резервируем размер заранее — тогда
   кнопка с первого кадра такая же, какой станет с картинкой. */
.dfstage__start-btn {
    min-width: 36rem;
    min-height: 10.5rem;
}
/* Ранний клик, пойманный инлайн-обработчиком до загрузки основного скрипта. */
.dfstage__start-btn.is-waiting {
    opacity: .75;
    cursor: progress;
}
/* Пока грузится кадр игры — вместо чёрного прямоугольника видно, что клик принят. */
.dfstage__loading {
    display: none;
}
.dfstage.is-loading .dfstage__loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 3, 4, .65);
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: .03em;
    color: #e8d1a6;
    text-transform: uppercase;
}

/* ===== S6 2026-09-22: правки по замечаниям дизайнера (скриншоты в tg) ===== */

/* Д2: «Premium mid rate» — кистевой riverhack убран («напрягает шрифт»), Cormorant Bold как у остального
   первого экрана. Градиентная заливка и uppercase остаются из main.css. Отрицательный margin подзаголовка
   (-1.625rem) был под кисть — с прямым шрифтом надпись налезала на «СПРИНТ». */
[data-section=hero] .raffle__subtitle-text {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 2.125rem;
}
[data-section=hero] .raffle__subtitle {
    margin-top: -.375rem;
}

/* Д4: первый экран — «текст лезет на навигацию». В main.css на десктопе .hero{padding:0} +
   justify-content:center: когда контент выше экрана (ноутбук), переполнение делится поровну и дата уходит
   под фиксированную шапку (~5.7rem). Начинаем блок ниже шапки и не центрируем. */
@media (min-width: 1200px) {
    [data-section=hero] .hero {
        padding-top: 7rem;
        justify-content: flex-start;
    }
}
/* Д4: «подложка под таймером узкая» — картинка countdown/bg.png 407×55 по contain не покрывала цифры S4
   (3.25rem) и подписи. Тянем на ширину счётчика с запасом и на всю высоту. */
[data-section=hero] .countdown__counter:after {
    width: calc(100% + 9rem);
    height: auto;
    top: -.625rem;
    bottom: -.625rem;
    background-size: 100% 100%;
}

/* Д5: «Обновление классов» — кегль −8 % (5.625 → 5.2rem, дизайнер просил 5–10 %), выравнивание влево,
   отступ от края колонки (заголовок стоит абсолютно слева от .aboutclass__box, на 1.25rem левее контейнера). */
@media (min-width: 840px) {
    [data-section=aboutclass] .aboutclass__heading .title_size_large {
        font-size: 5.2rem;
    }
}
@media (min-width: 1200px) {
    [data-section=aboutclass] .aboutclass__heading {
        align-items: flex-start;
        text-align: left;
        padding-left: 1.25rem;
        box-sizing: border-box;
    }
}

/* Д5-2 (владелец, 2026-09-22): «текст не особо видно» — заголовок классов на широких экранах ложится на светлую
   броню гнома. Мягкая тёмная подложка за заголовком (как .hero__box:before в S4) + тень букв через drop-shadow:
   text-shadow у градиентного текста (background-clip:text) просвечивает сквозь буквы. Только ≥1200, где заголовок
   стоит абсолютно слева от .aboutclass__box. */
@media (min-width: 1200px) {
    [data-section=aboutclass] .aboutclass__heading:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -3.5rem;
        right: -3rem;
        bottom: -3rem;
        left: -5rem;
        background: radial-gradient(ellipse at 45% 55%, rgba(8,3,4,.82) 0%, rgba(8,3,4,.62) 38%, rgba(8,3,4,.3) 66%, rgba(8,3,4,0) 88%);
        pointer-events: none;
    }
    [data-section=aboutclass] .aboutclass__heading .title,
    [data-section=aboutclass] .aboutclass__heading .subtitle {
        filter: drop-shadow(0 .125rem .25rem rgba(0,0,0,.9)) drop-shadow(0 0 1rem rgba(0,0,0,.7));
    }
}

/* Д1 (владелец, 2026-09-22): кистевой riverhack «прогнать везде». Его берут через var(--font-3):
   .generous__marker («УЗОР» и др. вкладки), .updates__marker («УНИКАЛЬНО !» ×4), .countdown__heading и
   .raffle__subtitle-text (уже переведены), утилита .font-family-3 (на странице не используется).
   Переменная переопределяется здесь целиком; маркерам — жирность и трекинг, у кисти они были 400/0. */
:root {
    --font-3: "Cormorant", Georgia, "Times New Roman", serif;
}
.generous__marker,
.updates__marker,
.font-family-3 {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Д2-2 (владелец, 2026-09-22): «Premium mid rate» есть и во втором блоке .raffle (секция start, «Новый старт») —
   правило Д2 на все .raffle__subtitle-text, а не только на первый экран. */
.raffle__subtitle-text {
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 2.125rem;
}
.raffle__subtitle {
    margin-top: -.375rem;
}

/* Д7 (владелец, 2026-09-22): «при наведении на призы игры рамка» — main.css на .award:hover показывает .award:after:
   плоскую золотую рамку со скруглением 1.25rem (border #bd9742 + inset-тень). Рамку при наведении убираем,
   подсветка фона карточки (--award-bg-opacity: 1) остаётся. */
.award:hover {
    --adward-border-opacity: 0;
}

/* Д2-3 (владелец, 2026-09-23): «Premium mid rate — шрифт/цвет/тень не то». Причины: main.css держит на обёртке
   .raffle__subtitle filter: drop-shadow(.418px -.25rem …) — тень СВЕРХУ букв (была под кисть riverhack), грязная
   полоса над надписью; заливка тёмная сверху (#ca9145) и мутная на тонких засечках Cormorant. Из четырёх вариантов
   выбран рубленый шрифт сайта (--font-0, им же подписи таймера «ДНЕЙ/ЧАСОВ»): жирный, разрядка, золото ярче, тень вниз.
   [data-section] даёт ту же специфичность, что правила Д2 [data-section=hero], и стоит позже — перебивает оба блока. */
[data-section] .raffle__subtitle {
    filter: drop-shadow(0 .125rem .1875rem rgba(0,0,0,.85));
    margin-top: .25rem;
}
[data-section] .raffle__subtitle-text {
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-0);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .28em;
    background: linear-gradient(180deg, #ffe4ae 15%, #d99b4b 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Д8 (владелец, 2026-09-24): «Разрыв шаблонов» — описание пункта («Теперь доступна смена…») прижато к рамке видео:
   зазор 6 px, а декор рамки (.generous__media:after, top -1.3125rem × --decor-scale) выступает над ней на ~20 px
   и ложится на буквы. Отодвигаем рамку вниз: декор с запасом ниже текста. */
.generous__mediabox {
    margin-top: 1.25rem;
}
@media (min-width: 1200px) {
    .generous__mediabox {
        margin-top: 2.5rem;
    }
}

/* Д9 (владелец, 2026-09-24): вкладка «Классы» — текст шёл одним плотным блоком (line-height 1.1, без абзацев).
   Разметка: заголовок .spec-lead + абзацы .spec-p внутри .specification__title_about. */
.specification__title_about {
    line-height: 1.45;
}
.specification__title_about .spec-lead {
    display: block;
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.35em;
    line-height: 1.15;
    color: #e8d1a6;
    margin-bottom: .5em;
}
.specification__title_about .spec-p {
    display: block;
}
.specification__title_about .spec-p + .spec-p {
    margin-top: .7em;
}
.specification__title_about b {
    color: #ffd489;
}

/* Д10 (владелец, 2026-09-25): «Обновление классов» — на планшете и телефоне заголовок лежит прямо на светлом арте,
   серебристый и золотой градиенты букв (background-clip:text) не читаются. Градиенты убраны: сплошной цвет +
   тёмная тень (text-shadow работает только со сплошной заливкой). На ≥1200 прежний drop-shadow заменён этой же тенью. */
[data-section=aboutclass] .aboutclass__heading .title,
[data-section=aboutclass] .aboutclass__heading .subtitle {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: 0 .125rem .25rem rgba(0,0,0,.95), 0 0 1rem rgba(0,0,0,.85), 0 0 2rem rgba(0,0,0,.6);
}
[data-section=aboutclass] .aboutclass__heading .title {
    color: #f6ecd6;
}
[data-section=aboutclass] .aboutclass__heading .subtitle {
    color: #f2c877;
}

/* Д11 (владелец, 2026-09-25): заголовок «Обновление Iron Master» — межстрочный интервал был 1.2 (огромный на 5.2rem). */
[data-section=aboutclass] .aboutclass__heading .title {
    line-height: .95;
}
[data-section=aboutclass] .aboutclass__heading .subtitle {
    margin-top: .5rem;
}

/* Д12 (S6 2026-09-25): окно «Забрать призы» (#promo-claim) — вкладки, поля входа, результат. Основа — .promo-modal. */
.promo-claim { max-width: 34rem; }
.promo-claim__tabs { display: flex; gap: .5rem; margin: 0 0 1rem; }
.promo-claim__tab {
    flex: 1 1 0; padding: .7rem .5rem; border-radius: .75rem; border: 1px solid rgba(223,172,23,.35);
    background: rgba(255,255,255,.04); color: #cdbb96; font: inherit; font-weight: 700; cursor: pointer;
}
.promo-claim__tab.is-active { background: rgba(223,172,23,.18); color: #ffd98a; border-color: rgba(223,172,23,.8); }
.promo-claim__form { display: flex; flex-direction: column; gap: .6rem; }
.promo-claim__input {
    width: 100%; box-sizing: border-box; padding: .8rem 1rem; border-radius: .75rem;
    border: 1px solid rgba(223,172,23,.4); background: rgba(0,0,0,.35); color: #f3e6c8; font: inherit; font-size: 1rem;
}
.promo-claim__input:focus { outline: none; border-color: #dfac17; box-shadow: 0 0 0 2px rgba(223,172,23,.25); }
.promo-claim__error { min-height: 1.2em; margin: 0; color: #ff7a6b; font-size: .95rem; line-height: 1.35; }
.promo-claim__status { min-height: 1.2em; margin: 0; color: #b9aa8b; font-size: .9rem; }
.promo-modal__btn.is-busy { opacity: .6; pointer-events: none; }
.promo-claim__result-title { margin: 0 0 .75rem; color: #ffd98a; font-weight: 700; font-size: 1.35rem; }
.promo-claim__list { margin: 0 0 .75rem; padding: 0 0 0 1.2rem; color: #f3e6c8; text-align: left; line-height: 1.5; }

/* Д13 (S6 2026-09-25): две фразы владельца на первом экране — первая над «Freyr X7», вторая под. Белые, Cormorant 600
   (вес 600 добавлен в ссылку Google Fonts), без разрядки и теней, отступы маленькие (владелец: «белый, без огромных отступов,
   без эффектов»). Базовые отступы заголовка и .raffle__fond в hero обнулены, чтобы строки стояли плотно. */
[data-section=hero] .raffle__fond-title { margin-bottom: 0; }
[data-section=hero] .raffle__fond { margin: 0; }
[data-section=hero] .raffle__motto-line {
    margin: .4rem 0;
    text-align: center;
    font-family: "Cormorant", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: 0;
    color: #fff;
    text-shadow: none;
}
[data-section=hero] .raffle__motto-line_2 { margin-bottom: 0; }
@media (min-width: 1200px) {
    [data-section=hero] .raffle__motto-line { font-size: 1.375rem; }
}

/* Д14 (S6 2026-09-25): страница прячет полосу прокрутки (scrollbar-width: none выше), а fancybox при открытии любого
   окна всё равно «компенсирует» её: body и навигация (.compensate-for-scrollbar) получают margin-right на ширину полосы
   (10–17px) — вся картинка дёргается влево, справа остаётся полоса (владелец, скриншот). Компенсацию гасим. */
body.compensate-for-scrollbar,
.compensate-for-scrollbar {
    margin-right: 0 !important;
}

/* Д15 (S6 2026-09-26): тексты карточек «щедрых фишек» от Qwsda — ключевые слова золотом, абзацы через <br>;
   длинный текст «Алхимии» мельче и на 9 строк вместо 7 (иначе обрезался line-clamp из main.css). */
.feature__text b { color: #ffd489; font-weight: 700; }
.feature__text br { display: block; content: ""; margin-top: .35em; }
.feature__text_long { font-size: .875rem; -webkit-line-clamp: 9; }

/* Д16 (S6 2026-09-26): подпись под «Забрать», пока призы залочены до старта выдачи (data-awards-lock-note). */
.game__invitation-lock { width: 24rem; max-width: 90vw; margin: .5rem auto 0; font-size: .9rem; line-height: 1.3; color: #ffd489; text-align: center; }
.game__invitation-lock[hidden], .game__invitation-text[hidden] { display: none; }