не наследует flex-gap
родителя, сам становится лишь одним flex-item). :not([hidden]) — чтобы
это правило не спорило по specificity с УА-стилем "[hidden]{display:none}" */
.recover__code-step:not([hidden]) {
display: flex;
flex-direction: column;
gap: 14px;
}
.recover__timer { color: var(--accent); font-weight: 700; }
.recover__resend-link {
color: var(--accent);
font-weight: 700;
transition: color .2s var(--ease);
}
.recover__resend-link:hover { color: var(--white); }
/* Правила пароля на странице установки нового пароля + сворачиваемое
"Подробнее" (нативные
/ — раскрытие/закрытие уже
встроено в браузер, лишний JS не нужен) */
.password-rules {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.password-rules__text {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0 0 14px;
}
.password-rules__details summary {
list-style: none;
cursor: pointer;
display: inline-block;
color: var(--accent);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s var(--ease);
}
.password-rules__details summary::-webkit-details-marker { display: none; }
.password-rules__details summary:hover { color: var(--white); }
.password-rules__more {
margin-top: 14px;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.password-rules__more p { margin: 0 0 14px; }
.password-rules__more p:last-child { margin-bottom: 0; }
.password-rules__more b { color: var(--white); }
/* stretch — во всю ширину полей формы, а не по размеру текста кнопки */
.balance__submit { margin-top: 6px; align-self: stretch; }
/* Явно усиленное свечение именно в активном состоянии (когда обе галочки
отмечены) — раньше разница между "выключена" и "включена" была только в
opacity, и на ярком фоне формы кнопка едва отличалась глазами. Работает
одинаково на всех разрешениях, т.к. .balance__submit не переопределяется
по брейкпоинтам */
.balance__submit:not(:disabled) {
box-shadow: 0 14px 36px -8px rgba(159, 199, 255, .95);
}
.balance__submit:disabled {
opacity: .35;
filter: grayscale(.5) brightness(.85);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ======================= АВТОРИЗАЦИЯ: свои поправки поверх общего .balance ======================= */
/* Заголовок "Пополнение баланса" в шаблоне сделан двухстрочным намеренно
(графити наезжает на строку снизу), но "АВТОРИЗАЦИЯ АККАУНТА" в такой же
раскладке съезжает вбок и наслаивается на "АВТОРИЗАЦИЯ" — слово значительно
длиннее "ПОПОЛНЕНИЕ". Здесь графити возвращается в обычный инлайн-поток
рядом с основным словом — заголовок становится одной строкой — а сам
заголовок выравнивается по левому краю формы (как и было у форм на
остальных страницах), а не центрируется над фигурой. */
.auth .balance__title { margin-left: 0; text-align: left; }
.auth .balance__title-graf {
position: static;
display: inline-block;
margin-left: .25em;
transform: rotate(-2deg);
}
/* Свечение (.balance__media::before) по умолчанию центровано по всей
непрозрачной области фигуры — для woman.png (магазин) это совпадает с
торсом, но у police.png в руке планшет, вытянутый далеко вправо, и он же
раздвигает эту область, утягивая геометрический центр вправо от
реального корпуса/спины. Поэтому здесь свечение возвращаем ближе к его
плечам и спине, а не к общему "bounding box" вместе с планшетом */
.auth .balance__media::before { left: 39%; }
/* Из-за длинной однострочной надписи фигуре нужно быть компактнее и левее,
чем в шаблоне — иначе строка при обычном размере просто не помещается,
упираясь в фуражку. Правило вне медиа-запросов, но с min-width — не
должно перекрывать мобильную раскладку (там своя, position:relative) */
@media (min-width: 901px) {
.auth .balance__media { width: 34%; right: 12%; }
/* На авторизации формы всего два коротких поля — при полных 100vh под
фигурой/формой остаётся много пустого места до футера. Немного
уменьшаем высоту секции, чтобы футер стоял повыше, ближе к фото */
.auth { min-height: 82vh; }
}
/* Шире 1900px позицией фигуры на .balance уже не управляет JS
(initBalanceMediaAlign сознательно не трогает эту зону — там у страницы
магазина "как есть"-режим). Фигура там просто сидела по базовому
top:1% (у самого верха секции), и с длинным заголовком
"ВОССТАНОВЛЕНИЕ ПАРОЛЯ" текст залезал на неё. Отдельный узкий диапазон —
специально НЕ внутри min-width:901px блока выше, чтобы никак не
пересекаться с диапазоном 901–1900px, которым управляет скрипт (там
любое значение width/top всё равно перебивается инлайн-стилем, но так
правки гарантированно изолированы и предсказуемы) */
@media (min-width: 1901px) {
.auth .balance__media { width: 32%; top: 12.3%; }
}
/* ======================= "ВЫ УЖЕ АДМИНИСТРАТОР" (admin-login.html) ======================= */
.admin-already { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.admin-already__icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(159, 199, 255, .12);
border: 1px solid rgba(159, 199, 255, .35);
color: var(--accent);
}
.admin-already__icon svg { width: 24px; height: 24px; }
.admin-already__text { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 420px; margin: 0; }
.admin-already__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* ======================= АВТОРИЗАЦИЯ АДМИНИСТРАТОРА (man.png) ======================= */
/* Полностью своя раскладка — JS-центрирование (initBalanceMediaAlign)
намеренно исключает эту страницу (см. main.js), т.к. здесь нужна
фиксированная позиция "голова упирается в надпись", а не центрирование
между заголовком и низом секции.
aspect-ratio под реальные пропорции man.png (1280×714 — кадр шире, чем
высокий, в отличие от остальных портретных фигур сайта). Квадратный
aspect-ratio:1/1 из общего .balance__media в этом случае оставлял пустые
прозрачные поля сверху/снизу картинки (object-fit:contain никогда не
обрезает, а вписывает по меньшей стороне) — маска затухания ниже
приходилась на эту пустоту, а не на реальные пиксели ног, поэтому низ
фигуры обрывался жёстко, без всякого плавного перехода. */
.admin-auth .balance__media {
aspect-ratio: 1280 / 714;
height: auto;
}
@media (min-width: 901px) {
.admin-auth .balance__media {
width: 66%;
right: 0%;
/* Голова почти вплотную под словом "АДМИНИСТРАТОРА" (у неё
собственный отступ внутри кадра до макушки — см. firstOpaqueRow
в анализе прозрачности, ~5.6% высоты кадра, учтено в формуле).
Фиксированный top в px не годится: заголовок сдвигается и от
ширины (font-size: clamp(...,5.2vw,...)), и от высоты экрана
(.auth{min-height:82vh} двигает вертикальный центр секции) —
калибровано по двум контрольным точкам (950×900 и 1050×768). */
top: calc(38.9vh - 1.9vw - 97px);
transform: none;
}
}
@media (min-width: 1360px) {
/* Тот же приём, что и в диапазоне 901–1360 (см. выше) — top как функция
от vh, откалибровано отдельно под width:68% (влияние ширины здесь
практически не заметно, в отличие от высоты, поэтому без vw-члена) */
.admin-auth .balance__media { width: 68%; right: 0; top: calc(40.5vh - 114px); }
}
@media (min-width: 1901px) {
.admin-auth .balance__media { width: 58%; right: 2%; top: 135px; }
}
/* Свечение по центру фигуры (за спиной/торсом), а не смещено к плечу, как
у police.png с планшетом в отставленной руке — у man.png руки сведены
ближе к центру корпуса. top ниже прежних 62% — при новых пропорциях
кадра (широкий, а не квадратный) торс расположен ощутимо выше по высоте
блока, чем у портретных фигур */
/* width:95% из базового правила рассчитан на квадратный блок (aspect-ratio:1/1).
Здесь блок под реальные пропорции картинки — широкий и невысокий
(1280×714), и тот же расчёт "95% ширины" при aspect-ratio:1/1 у самого
свечения давал круг куда больше высоты блока — он вылезал вверх/вниз и
упирался в соседние блоки (шапку сайта, форму) плоским обрезанным краем
вместо мягкого растворения. Считаем размер от высоты (меньшей стороны)
— круг гарантированно помещается внутри блока по обеим осям. */
.admin-auth .balance__media::before { left: 50%; top: 54%; width: auto; height: 92%; }
/* Плавное затухание внизу — теперь, когда aspect-ratio блока совпадает с
реальными пропорциями картинки (без пустых полей), маска действительно
ложится на пиксели ног/обуви, а не в пустоту. Кадр обрезан почти впритык
по подошве (~99.7% высоты кадра) — фигуру приходится "дотирать" затуханием
реальных пикселей, естественного прозрачного запаса внизу в файле нет */
.admin-auth .balance__char {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 99%);
mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 99%);
}
/* .balance__submit несёт margin-top:6px, рассчитанный на форму магазина
(визуальный отступ от чекбоксов) — здесь перед кнопкой стоит "Забыли
пароль?", и этот лишний отступ делал зазор до кнопки заметно больше
зазора до поля пароля над ссылкой, хотя должны быть одинаковыми */
.auth .balance__submit { margin-top: 0; }
/* На ноутбучных экранах (901–1360px) заголовок в одну строку почти упирается
в персонажа (там он уже крупный и стоит близко). Возвращаем сюда тот же
двухстрочный "нахлёст" заголовка, что и на "Пополнении баланса"
(.balance__title-graf без переопределения от .auth) — второе слово
съезжает под первое внахлёст, освобождая по горизонтали ту же ширину,
что и одна строка "АВТОРИЗАЦИЯ". Форму опускаем ниже — заголовок стал
заметно выше (две строки вместо одной). */
@media (min-width: 901px) {
.admin-auth .balance__title-graf {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -64%) rotate(-2deg);
white-space: nowrap;
margin-left: 0;
display: block;
}
}
/* Форма опущена чуть ниже под увеличившийся (двухстрочный) заголовок — на
ноутбучной ширине заметнее (там же корректировали позицию персонажа под
тот же заголовок), на широком десктопе сдвиг небольшой, т.к. там и без
того много вертикального пространства (.auth{min-height:82vh}) */
@media (min-width: 901px) and (max-width: 1360px) {
.admin-auth .balance__content { margin-top: 130px; }
}
@media (min-width: 1360px) {
.admin-auth .balance__content { margin-top: 110px; }
}
/* Ноутбуки и небольшой десктоп (901–1900px): раньше здесь (кроме 901–1360)
работала "широкая" раскладка по умолчанию — заголовок+форма прижаты к
верху (flex-start), а фото стояло с фиксированным top в процентах. На
этом диапазоне высот/ширин это давало ровно две проблемы разом: фигура
зависала где-то в верхней трети секции с большим пустым полем под ней
(не по центру), и блок "Пополнение баланса" с полями формы — тоже не
по центру секции. Начиная с этой точки и до 1900px обе вещи явно
центрируем по вертикали, а фигуру дополнительно увеличиваем — на таких
ширинах места достаточно, и она смотрится гармоничнее крупнее. */
@media (max-width: 1900px) {
.balance { justify-content: center; padding-top: 0; padding-bottom: 0; }
.balance__media {
width: 52%;
right: 3%;
/* top:50%+translateY вместо top в процентах секции — фигура всегда
точно по центру высоты .balance, независимо от того, сколько
места сверху/снизу оставляет justify-content:center у формы */
top: 50%;
transform: translateY(-50%);
}
}
/* Ноутбуки/небольшой десктоп (901–1360px): % отступ заголовка был подобран
под широкий экран (1440px+) и на более узких вьюпортах утягивал заголовок
слишком далеко вправо. Форма (.balance__content) больше не сдвигается
отрицательным margin-left — она выровнена по общему левому краю сайта
(как логотип и весь остальной контент), поэтому здесь её трогать не нужно. */
@media (max-width: 1360px) {
.balance__title { margin-left: 4%; }
/* На узких десктопах/ноутбуках (901–1360px) слишком крупный блок фото
физически перекрывается с заголовком по горизонтали — заголовок
рисуется поверх лица/головы девушки. Возвращаем фото к более
компактному размеру именно в этом диапазоне. */
.balance__media { width: 48%; right: 4%; }
}
/* Отдельный, ещё более узкий диапазон (901–1080px, вплотную к границе с
мобильной раскладкой): раньше здесь заголовок выравнивался по левому
краю, потому что фото стояло высоко и текст при центрировании дотягивался
до её лица. Теперь фото в этом диапазоне позиционируется скриптом
(initBalanceMediaAlign, main.js) по центру всей секции, ниже заголовка с
гарантированным отступом — горизонтального наложения с центрированным
текстом здесь уже не будет, т.к. они не делят одну и ту же полосу по
вертикали. Возвращаем обычное центрирование заголовка. */
@media (max-width: 1080px) {
.balance__title { text-align: center; margin-left: 0; }
/* Стартовый (до подгонки скриптом initBalanceMediaAlign) размер — он
всё равно сам ужмёт фигуру, если места по вертикали не хватит, так
что тут можно смело просить размер побольше, а не занижать заранее */
.balance__media { width: 50%; right: 3%; }
}
/* ======================= КАТАЛОГ МАГАЗИНА ======================= */
/* Тоже снап-точка (как .balance) — пользователь должен долистать ровно до
каталога тем же "постраничным" скроллом, а не проскакивать сразу к футеру.
scroll-snap-type:none на мобильном (см. html.snap-page ниже) делает эти
свойства там не действующими, так что мобильную раскладку они не трогают. */
.catalog { position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.catalog__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.shop-card {
background: linear-gradient(225deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 32%, rgba(6, 7, 10, .55) 100%);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.shop-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.shop-card__thumb {
aspect-ratio: 16 / 11;
background:
radial-gradient(120% 100% at 20% 0%, rgba(159, 199, 255, .1) 0%, rgba(159, 199, 255, 0) 55%),
linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
}
.shop-card__body { padding: 18px 20px 22px; }
.shop-card__body h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.shop-card__price {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--white);
background: rgba(255, 255, 255, .04);
border: 1px solid var(--border);
/* Овальная (пилюля), а не прямоугольная — и почти без отступа справа от
кружка, чтобы тёмный фон визуально "начинался" от самого кружка, а не
выступал за его пределы */
border-radius: 999px;
padding: 6px 3px 6px 14px;
}
.shop-card__coin {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--coin);
display: grid;
place-items: center;
overflow: hidden;
}
.shop-card__coin .coin-icon { width: 60%; height: 60%; }
/* ======================= МАГАЗИН: VIP-ПРИВИЛЕГИИ ======================= */
/* Между "Пополнением баланса" и каталогом — тоже отдельная снап-страница
(см. html.snap-page выше), тот же язык карточек, что и .shop-card
("эффект магнита" — лёгкий подъём и тень при наведении), только крупнее
и с двумя явно различающимися уровнями: золото для VIP, фиолетово-
розовый градиент для VIP Premium (та же пара цветов, что и у бейджей
привилегий в профиле — .profile__badge--vip в этом же файле). */
.vip-plans {
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(180deg, #08090c 0%, #0a0c11 100%);
}
.vip-plans .container { width: 100%; }
.vip-plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.vip-plan {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(225deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 32%, rgba(6, 7, 10, .55) 100%);
border: 1px solid var(--border);
border-radius: 22px;
padding: 34px 32px 32px;
transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.vip-plan:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .75); }
.vip-plan--vip { border-color: rgba(255, 184, 77, .3); }
.vip-plan--vip:hover { border-color: rgba(255, 184, 77, .55); }
.vip-plan--premium {
border-color: rgba(192, 132, 252, .35);
background: linear-gradient(225deg, rgba(192, 132, 252, .14) 0%, rgba(255, 255, 255, .015) 32%, rgba(6, 7, 10, .6) 100%);
}
.vip-plan--premium:hover { border-color: rgba(192, 132, 252, .65); box-shadow: 0 34px 70px -26px rgba(129, 66, 189, .5); }
.vip-plan__ribbon {
position: absolute;
top: -14px;
right: 28px;
background: linear-gradient(135deg, #f0abfc, #c084fc 55%, #818cf8);
color: #1a0b2e;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 999px;
box-shadow: 0 10px 24px -8px rgba(129, 66, 189, .7);
}
.vip-plan__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vip-plan__icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vip-plan__icon svg { width: 27px; height: 27px; }
.vip-plan--vip .vip-plan__icon { background: linear-gradient(135deg, #ffe29a, #ffb84d); color: #3a2a06; }
.vip-plan--premium .vip-plan__icon { background: linear-gradient(135deg, #f0abfc, #c084fc 55%, #818cf8); color: #2a0f3a; }
.vip-plan__title { font-size: 23px; font-weight: 800; }
.vip-plan__tagline { font-size: 13px; color: var(--muted); margin-top: 2px; }
.vip-plan__desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.vip-plan__perks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1 1 auto; }
.vip-plan__perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--white); line-height: 1.4; }
.vip-plan__perks li::before {
content: '✓';
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 11px;
font-weight: 900;
margin-top: 1px;
}
.vip-plan--vip .vip-plan__perks li::before { background: rgba(255, 184, 77, .18); color: #ffb84d; }
.vip-plan--premium .vip-plan__perks li::before { background: rgba(192, 132, 252, .2); color: #c084fc; }
.vip-plan__periods { display: flex; gap: 8px; margin-bottom: 20px; }
.vip-plan__period {
flex: 1 1 0;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 8px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .2s var(--ease), border-color .2s, color .2s;
}
.vip-plan--vip .vip-plan__period.is-active { background: rgba(255, 184, 77, .16); border-color: rgba(255, 184, 77, .5); color: #ffb84d; }
.vip-plan--premium .vip-plan__period.is-active { background: rgba(192, 132, 252, .18); border-color: rgba(192, 132, 252, .55); color: #c084fc; }
.vip-plan__buy { width: 100%; margin-top: auto; border: none; }
.vip-plan--vip .vip-plan__buy { background: linear-gradient(135deg, #ffe29a, #ffb84d); color: #3a2a06; box-shadow: 0 14px 34px -14px rgba(255, 184, 77, .55); }
.vip-plan--vip .vip-plan__buy:hover { box-shadow: 0 18px 42px -14px rgba(255, 184, 77, .75); }
.vip-plan--premium .vip-plan__buy { background: linear-gradient(135deg, #f0abfc, #c084fc 55%, #818cf8); color: #1a0b2e; box-shadow: 0 14px 34px -14px rgba(192, 132, 252, .55); }
.vip-plan--premium .vip-plan__buy:hover { box-shadow: 0 18px 42px -14px rgba(192, 132, 252, .75); }
.vip-plan__coin { width: 20px; height: 20px; border-radius: 50%; background: var(--coin); display: inline-grid; place-items: center; overflow: hidden; }
.vip-plan__coin .coin-icon { width: 60%; height: 60%; }
@media (max-width: 1080px) {
.vip-plan { padding: 28px 24px 26px; }
}
@media (max-width: 900px) {
.vip-plans { min-height: auto; }
.vip-plans__grid { grid-template-columns: 1fr; }
}
/* ======================= FOOTER ======================= */
/* Финальная снап-точка (только на главной) — иначе mandatory-скролл не пускал бы дальше "Соц.сетей" */
.footer { position: relative; background: var(--bg); border-top: 1px solid var(--border); padding: 80px 0 0; }
html.snap-page .footer { scroll-snap-align: end; }
/* Ширина как у .container — совпадает с шапкой: начало слева под логотипом, конец справа под кнопкой «Авторизация» */
.footer__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1.1fr; gap: 30px; padding-bottom: 56px; }
.footer__brand p { color: #8b8d92; font-size: 15px; line-height: 1.5; }
.footer__col h4 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.footer__col a { display: block; color: #8b8d92; font-size: 15px; margin-bottom: 6px; transition: color .2s; }
.footer__col a:hover { color: var(--white); }
.footer__watermark-wrap {
position: relative;
height: clamp(100px, 15vw, 210px);
overflow: hidden;
pointer-events: none;
}
.footer__watermark {
position: absolute;
left: 0; right: 0; top: 0;
z-index: 2;
text-align: center;
font-size: clamp(90px, 20vw, 300px);
font-weight: 900;
letter-spacing: 8px;
line-height: 1;
color: rgba(255, 255, 255, 0.07);
user-select: none;
}
.footer__watermark-wrap::after {
content: '';
position: absolute;
z-index: 1;
left: 50%;
bottom: -38%;
transform: translateX(-50%);
width: 85%;
height: 90%;
background: radial-gradient(ellipse closest-side, rgba(159, 199, 255, .5), rgba(159, 199, 255, 0) 72%);
filter: blur(24px);
}
/* ======================= REVEAL ANIMATION ======================= */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
/* ======================= RESPONSIVE ======================= */
@media (max-width: 1080px) {
.container { padding: 0 28px; }
.launcher { padding: 40px; }
.footer__inner { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
.catalog__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
/* На мобильных секции складываются в одну колонку и часто становятся выше экрана
(особенно "Соц.сети" и "Игровые кадры" с их сеткой скриншотов). Обязательный
постраничный снап в этом случае перепрыгивает через секции, у которых нет своей
снап-точки — свайп с "Соц.сетей" улетает сразу к футеру, минуя "Игровые кадры".
На мобильном снап поэтому отключаем — обычный свободный скролл. */
html.snap-page { scroll-snap-type: none; }
section { padding: 56px 0; }
.social::before, .media::before { background-attachment: scroll; }
.nav, .header__auth { display: none; }
.burger { display: flex; }
/* mobile dropdown nav */
.nav.is-open {
display: flex;
flex-direction: column;
gap: 4px;
position: absolute;
top: 82px; left: 0; right: 0;
background: rgba(10, 12, 16, .98);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
padding: 16px 28px 24px;
}
.nav.is-open .nav__link { padding: 12px 0; font-size: 16px; }
.nav.is-open .nav__admin-mobile,
.nav.is-open .nav__auth-mobile {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
margin-top: 10px;
text-align: center;
}
/* Обе кнопки идут подряд (админ-панель над "Мой персонаж") — не нужно
двойного отступа между ними, второй хватает gap контейнера. Селектор
обязательно с :not([hidden]) — иначе сработал бы и для скрытой
(неавторизованный посетитель) админ-ссылки, просто по факту её
соседства в DOM, а не видимости */
.nav.is-open .nav__admin-mobile:not([hidden]) + .nav__auth-mobile { margin-top: 0; }
.hero__inner { flex-direction: column; text-align: center; min-height: auto; padding-top: 30px; }
.hero__content { max-width: 100%; margin: 0 auto; }
.hero__line:first-child { margin-bottom: .55em; }
.hero__graffiti { position: static; display: inline-block; margin-left: 12px; font-size: 40px; transform: rotate(-6deg); vertical-align: middle; }
.hero__desc, .hero__join { margin-left: auto; margin-right: auto; }
.hero__stats { justify-content: center; }
.hero__media {
position: relative;
/* Сбрасываем и left, и right — иначе десктопное right:11% всё равно сдвигает
блок (position:relative считает смещение от right), и врач съезжает влево */
left: auto; right: auto; top: auto; width: 100%; height: 44vh; min-height: 320px;
margin-bottom: 6px;
}
.hero__char { object-fit: cover; object-position: center 12%; }
.launcher { grid-template-columns: 1fr; text-align: left; }
.launcher__visual { order: -1; }
.social__grid { grid-template-columns: 1fr; }
.soc-card { min-height: auto; }
/* Раньше кнопка растягивалась на всю ширину карточки на мобильном —
теперь остаётся такой же маленькой "таблеткой" в нижней ямке, как и
на десктопе, просто прижатой к правому краю. Правый внутренний
отступ карточки на мобильном уже чуть меньше (24px вместо 34px) —
кнопка сама сдвигается ближе к правому краю. */
.soc-card { padding-right: 24px; }
.soc-card .btn { align-self: flex-end; padding-right: 30px; }
.media__grid { grid-template-columns: 1fr; }
.feature { min-height: 300px; }
/* Мобильная раскладка не трогается: возвращаем прежнее поведение
(картинка+форма по центру экрана), чтобы изменения в .balance
для десктопа сюда не протекали */
.balance { justify-content: center; padding-top: 0; padding-bottom: 56px; min-height: 100vh; }
/* На мобильном фото стоит сверху стека, а не внизу секции — градиент-переход
(рассчитан на десктопную раскладку) на такой высокой секции перекрывал
чекбоксы и кнопку "Пополнить", делая их тусклыми, будто под затемнением */
.balance__fade { height: 140px; }
/* text-align:center возвращаем явно — иначе на мобильном наследуется
text-align:left из брейкпоинта ≤1080px (он рассчитан на узкий десктоп,
где заголовок не центрируют над фото) и заголовок съезжает влево */
.balance__title { margin-left: 0; text-align: center; }
.balance__content { max-width: 100%; text-align: center; margin-top: 0; margin-left: 0; }
.balance__submit { align-self: center; }
.checkbox { text-align: left; }
/* Плавающая .roulette-fab привязана к абсолютной позиции фигуры на
десктопе — на мобильном фигура уже не absolute (см. ниже), поэтому
вместо неё показываем отдельную кнопку в потоке страницы */
.roulette-fab { display: none; }
.roulette-btn-mobile { display: flex; }
.balance__media {
position: relative;
left: auto; right: auto; top: auto; width: 100%; height: 44vh; min-height: 300px;
aspect-ratio: auto;
/* Сброс transform: translateY(-50%) из брейкпоинта ≤1900px (там им
центрируют фото по вертикали в секции) — на мобильном фото не
абсолютное и не должно центрироваться, а без сброса этот transform
продолжал действовать и здесь, поднимая картинку почти на половину
её собственной высоты вверх, "срезая" верх фигуры за пределы экрана */
transform: none;
margin-bottom: 24px;
}
/* object-fit:cover на разных мобильных ширинах при неизменной высоте
блока (44vh) даёт разный масштаб увеличения картинки — в зависимости
от ширины экрана либо срезало макушку/подбородок, либо, наоборот,
обрезало кадр так, что фигура частично уходила за левый/правый край
(например, бокал в руке). contain никогда не обрезает — фигура
всегда видна целиком, просто чуть меньше на непропорциональных
по ширине экранах. object-position не нужен — contain сам центрирует. */
.balance__char {
object-fit: contain;
object-position: center center;
/* Полноразмерное затухание из базового правила (55–96% высоты) сюда
не подходит — на мобильном фото не занимает низ секции, а стоит
отдельным блоком, и такой длинный градиент "съедал" половину
фигуры. Но и совсем без затухания низ картинки обрывается резко —
в самом файле фигура обрезана почти впритык по ступням/подолу.
Короткое затухание только по последним ~10% высоты кадра смягчает
именно этот жёсткий край, не трогая руки/бокал/платье выше. При
object-fit:contain высота блока почти всегда и есть ограничивающая
сторона (высота 44vh обычно меньше ширины экрана), поэтому кадр
картинки совпадает с высотой блока и градиент ложится точно по
реальным пикселям, а не в пустоту. */
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}
.catalog__grid { grid-template-columns: repeat(2, 1fr); }
/* Персонаж администратора крупнее и на планшете/телефоне — тот же
принцип, что и на десктопе (см. .admin-auth выше). Раньше здесь была
фиксированная height:62vh при aspect-ratio:auto (унаследовано от
базового мобильного правила) — на невысоких экранах (мобильный
landscape, ~375–450px высоты) это давало короткий, но ШИРОКИЙ блок,
чьи пропорции не совпадали с реальной картинкой (1280×714). Circle
glow (::before) считает себя от ширины родителя (width:95% +
aspect-ratio:1/1) — в широком-и-низком блоке это давало гигантский
круг, который вылезал далеко за верх/низ блока разлитым пятном
(никакой не круг, а как будто грубый прямоугольный "вырез"). Тот же
фикс, что и на десктопе — aspect-ratio по реальной картинке, размер
по ширине — гарантирует, что блок ВСЕГДА пропорционален контенту,
на любой высоте экрана. */
.admin-auth .balance__media {
width: 84%;
max-width: 360px;
height: auto;
/* min-height:300px из базового мобильного правила выше иначе
продолжает "подпирать" блок снизу и здесь, при узком width
заставляя его снова быть шире, чем высоким — та же поломка
aspect-ratio, которую этот блок должен был устранить */
min-height: 0;
aspect-ratio: 1280 / 714;
margin: 0 auto 24px;
}
.admin-auth .balance__char {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 99%);
mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 99%);
}
}
@media (max-width: 560px) {
.container { padding: 0 18px; }
.header__inner { height: 68px; }
.logo { gap: 10px; }
.logo__img { height: 49px; }
.logo__text b { font-size: 22px; }
.logo__text small { font-size: 11px; letter-spacing: 4px; }
.hero__title { font-size: 40px; }
.hero__line { white-space: normal; }
.hero__graffiti { font-size: 30px; }
.avatars__item, .avatars__plus { width: 50px; height: 50px; margin-left: -14px; }
.online__count { font-size: 24px; }
.hero__stats { flex-direction: column; align-items: stretch; }
.online { justify-content: center; }
.promo { justify-content: center; }
.launcher { padding: 26px 22px; }
.tag { font-size: 13px; padding: 9px 14px; }
.reqs li { font-size: 15px; }
.gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.footer__inner { grid-template-columns: 1fr; gap: 34px; }
.footer__watermark-wrap { height: 70px; }
}
/* ======================= ТОСТ «В РАЗРАБОТКЕ» ======================= */
.soon-toast {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 2000;
display: flex;
align-items: flex-start;
gap: 16px;
width: 360px;
max-width: calc(100vw - 40px);
padding: 20px 20px 20px 18px;
background: linear-gradient(160deg, rgba(30, 33, 44, .92), rgba(12, 13, 18, .92));
border: 1px solid rgba(88, 101, 242, .4);
border-radius: 18px;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04) inset;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
overflow: hidden;
opacity: 0;
transform: translateY(24px) scale(.96);
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.soon-toast.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.soon-toast__icon {
flex: none;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(160deg, rgba(88, 101, 242, .35), rgba(88, 101, 242, .12));
color: #aab2f8;
box-shadow: 0 0 0 1px rgba(88, 101, 242, .3) inset;
}
/* "Успешный" вариант тоста (например, код подтверждения отправлен) —
зелёный акцент вместо фиолетового предупреждающего, чтобы явно читался
как хорошая новость, а не как "заглушка в разработке" */
.soon-toast--success { border-color: rgba(74, 222, 128, .4); }
.soon-toast--success .soon-toast__icon {
background: linear-gradient(160deg, rgba(74, 222, 128, .35), rgba(74, 222, 128, .12));
color: #6ee7a0;
box-shadow: 0 0 0 1px rgba(74, 222, 128, .35) inset;
}
.soon-toast--success .soon-toast__progress { background: #4ade80; }
.soon-toast__body { flex: 1; min-width: 0; }
.soon-toast__title { font-size: 15px; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.soon-toast__text { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.soon-toast__close {
flex: none;
width: 26px;
height: 26px;
display: grid;
place-items: center;
margin: -4px -4px 0 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .2s, color .2s;
}
.soon-toast__close:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.soon-toast__progress {
position: absolute;
left: 0; bottom: 0;
height: 3px;
width: 100%;
background: var(--discord);
transform-origin: left;
animation: soon-toast-progress 4.2s linear forwards;
}
@keyframes soon-toast-progress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (max-width: 560px) {
.soon-toast { right: 16px; left: 16px; bottom: 16px; width: auto; }
}
/* ======================= Тост "вы уже администратор" ======================= */
/* Та же карточка, что и .soon-toast (тот же fixed-угол, blur, тени), но
красный акцент (тема "режим администратора" — см. .profile.is-admin) и
кнопка действия вместо авто-исчезающего прогресс-бара */
.admin-toast {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 2000;
display: flex;
align-items: flex-start;
gap: 16px;
width: 360px;
max-width: calc(100vw - 40px);
padding: 20px 20px 20px 18px;
background: linear-gradient(160deg, rgba(30, 33, 44, .92), rgba(12, 13, 18, .92));
border: 1px solid rgba(255, 92, 108, .4);
border-radius: 18px;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04) inset;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
opacity: 0;
transform: translateY(24px) scale(.96);
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.admin-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.admin-toast__icon {
flex: none;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(160deg, rgba(255, 92, 108, .35), rgba(255, 92, 108, .12));
color: #ff8792;
box-shadow: 0 0 0 1px rgba(255, 92, 108, .3) inset;
}
.admin-toast__body { flex: 1; min-width: 0; }
.admin-toast__title { font-size: 15px; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.admin-toast__text { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-bottom: 14px; }
.admin-toast__action {
padding: 9px 16px;
border-radius: 9px;
border: 1px solid rgba(255, 92, 108, .4);
background: rgba(255, 92, 108, .12);
color: #ff8792;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.admin-toast__action:hover { background: rgba(255, 92, 108, .22); color: var(--white); border-color: rgba(255, 92, 108, .6); }
.admin-toast__close {
flex: none;
width: 26px;
height: 26px;
display: grid;
place-items: center;
margin: -4px -4px 0 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .2s, color .2s;
}
.admin-toast__close:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
@media (max-width: 560px) {
.admin-toast { right: 16px; left: 16px; bottom: 16px; width: auto; }
}
/* ======================= КНОПКА "НАВЕРХ" ======================= */
.to-top {
position: fixed;
left: 28px;
bottom: 28px;
z-index: 900;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: linear-gradient(160deg, rgba(159, 199, 255, .16), rgba(12, 14, 19, .85));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--accent);
cursor: pointer;
box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6);
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(.85);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s,
background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s,
background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.to-top svg { width: 22px; height: 22px; }
.to-top:hover {
background: linear-gradient(160deg, var(--accent-soft), var(--accent));
color: #0a1224;
border-color: transparent;
box-shadow: 0 20px 40px -14px rgba(159, 199, 255, .55);
transform: translateY(-4px) scale(1);
}
.to-top:active { transform: translateY(-1px) scale(.96); }
@media (max-width: 560px) {
.to-top { left: 16px; bottom: 16px; width: 46px; height: 46px; }
.to-top svg { width: 19px; height: 19px; }
}
/* ======================= ЛАЙТБОКС (ПРОСМОТР ФОТО) ======================= */
body.lightbox-lock { overflow: hidden; }
html.modal-scroll-lock { overflow: hidden; }
.lightbox {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(5, 6, 9, .9);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
opacity: 0;
visibility: hidden;
transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
transition: opacity .3s var(--ease), visibility 0s;
}
.lightbox__stage {
position: relative;
max-width: min(1100px, 86vw);
max-height: 84vh;
display: flex;
}
.lightbox__img {
max-width: 100%;
max-height: 84vh;
width: auto;
height: auto;
border-radius: 18px;
box-shadow: 0 40px 100px -28px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
transform: scale(.92);
opacity: 0;
transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
/* Переход между фото: текущее "уезжает" в сторону навигации, следующее "въезжает" с обратной */
.lightbox.is-open .lightbox__img.is-switching {
transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.lightbox.is-open .lightbox__img.is-switching.dir-next { transform: scale(.97) translateX(-34px); opacity: 0; }
.lightbox.is-open .lightbox__img.is-switching.dir-prev { transform: scale(.97) translateX(34px); opacity: 0; }
.lightbox__close,
.lightbox__arrow {
position: absolute;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, .06);
color: var(--white);
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.lightbox__close {
top: 26px;
right: 30px;
width: 46px;
height: 46px;
font-size: 26px;
line-height: 1;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.lightbox__arrow {
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
z-index: 2;
}
.lightbox__arrow svg { width: 24px; height: 24px; }
.lightbox__arrow:hover { background: var(--accent); border-color: var(--accent); color: #0a1224; }
.lightbox__arrow:hover svg { transform: none; }
.lightbox__arrow--prev { left: 24px; }
.lightbox__arrow--next { right: 24px; }
.lightbox__arrow.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-50%) scale(.8);
}
.gallery__item { cursor: pointer; }
@media (max-width: 900px) {
.lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 22px; }
.lightbox__arrow { width: 46px; height: 46px; }
.lightbox__arrow--prev { left: 10px; }
.lightbox__arrow--next { right: 10px; }
.lightbox__stage { max-width: 92vw; max-height: 78vh; }
.lightbox__img { max-height: 78vh; }
}
/* ======================= ПРАВОВЫЕ СТРАНИЦЫ (соглашение, политика и т.д.) ======================= */
.legal { padding: 64px 0 100px; }
.legal__title {
text-align: center;
font-style: italic;
font-weight: 800;
color: var(--accent);
font-size: clamp(24px, 3vw, 36px);
letter-spacing: -.2px;
margin-bottom: 44px;
}
.legal__body { max-width: 980px; margin: 0 auto; color: #c7cad3; font-size: 15.5px; line-height: 1.65; }
.legal__body p { margin-bottom: 20px; }
.legal__h { color: var(--white); margin-top: 8px; }
.legal__items { margin: -10px 0 20px 22px; }
.legal__items p { margin-bottom: 6px; }
.legal__meta { color: var(--white); }
.legal__meta:last-child { margin-bottom: 0; }
.legal__date { margin-top: 24px; }
/* ======================= ЛЕНТА ВЫПАДЕНИЙ (roulette.html) ======================= */
/* Заменяет обычный .header только на этой странице (см. комментарий в
roulette.html) — витрина последних выигрышей вместо навигации, в духе
ленты открытия кейсов CS:GO/CS2. Новые карточки добавляются в JS слева
(см. pushDropFeedItem в main.js) через transition на width/margin — сама
лента при этом просто одна длинная flex-строка без ограничения по ширине,
а .drop-feed вокруг неё — overflow:hidden, поэтому старые карточки не
анимированно "уезжают", а естественным образом уходят за правый край и
там же обрезаются, как только их вытесняют новые слева. DOM не растёт
бесконечно — pushDropFeedItem удаляет самые старые узлы справа пачками,
когда их накапливается больше разумного (они там всё равно уже не видны).
*/
.drop-feed {
position: relative;
width: 100%;
height: 128px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(19, 21, 24, .55);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 30px rgba(0, 0, 0, .25);
}
.drop-feed__track {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
padding-left: 24px;
}
/* Плавное затемнение по краям — без него у левой карточки (которая ещё
растёт при появлении) и у обрезанных справа был бы резкий обрубленный край */
.drop-feed__fade {
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.drop-feed__fade--left { left: 0; background: linear-gradient(90deg, #0a0c11, rgba(10, 12, 17, 0)); }
.drop-feed__fade--right { right: 0; background: linear-gradient(270deg, #0a0c11, rgba(10, 12, 17, 0)); }
/* Карточка предмета — цвет редкости передаётся через --rarity инлайном (см.
ROULETTE_FEED_META в main.js), единая переменная и на рамку, и на подсветку,
чтобы не заводить по классу на каждый из 7 уровней редкости */
.drop-feed__item {
--rarity: #7f8b9c;
position: relative;
flex: 0 0 auto;
width: 0;
height: 92px;
margin-right: 0;
opacity: 0;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
border: 1px solid rgba(255, 255, 255, .08);
border-top: 3px solid var(--rarity);
box-shadow: inset 0 0 22px -6px var(--rarity);
/* width/margin-right анимируются, а не transform — так соседние карточки
реально отталкиваются вправо самим потоком (reflow), а не одна эта
карточка визуально наезжает поверх них */
transition: width .5s cubic-bezier(.22, .8, .22, 1), margin-right .5s cubic-bezier(.22, .8, .22, 1), opacity .4s ease;
}
.drop-feed__item.is-in { width: 88px; margin-right: 12px; opacity: 1; }
/* mask-image смягчает края у настоящих фото-иконок (выигрыши «Крути-гуляй»,
см. resolveFeedEntryMeta в main.js — у них реальная картинка приза, а не
общий логотип) — у самого логотипа эффект тоже есть, но там он попросту
не заметен, лого и так на прозрачном фоне без острых краёв */
.drop-feed__item__icon {
width: 32px;
height: 32px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 92%);
mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 92%);
}
.drop-feed__item__label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .2px;
color: var(--white);
white-space: normal;
text-align: center;
line-height: 1.2;
max-width: 78px;
padding: 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Джекпот — то же золото, что и на самом колесе, плюс более заметное сияние */
.drop-feed__item--jackpot { box-shadow: inset 0 0 28px -4px var(--rarity), 0 0 18px rgba(255, 215, 0, .35); }
.drop-feed__item--jackpot .drop-feed__item__label { color: #ffe9a8; }
@media (max-width: 560px) {
.drop-feed { height: 96px; }
.drop-feed__item { height: 74px; }
.drop-feed__item.is-in { width: 70px; margin-right: 9px; }
.drop-feed__item__icon { width: 24px; height: 24px; }
.drop-feed__item__label { font-size: 9px; max-width: 62px; }
}
/* ======================= РУЛЕТКА (roulette.html) ======================= */
.roulette-page {
min-height: 100vh;
display: flex;
/* flex-start вместо center — сверху уже своя лента выпадений (.drop-feed,
в потоке страницы, не наложением), так что колесо незачем ещё и
центровать по всей высоте экрана под ней: смотрится так, будто оно
"висит" далеко от неё. */
align-items: flex-start;
padding: 40px 0 80px;
position: relative;
overflow: hidden;
background:
radial-gradient(80% 60% at 50% 15%, rgba(70, 147, 255, .12) 0%, rgba(8, 9, 12, 0) 60%),
linear-gradient(180deg, #0a0c11 0%, #08090c 100%);
}
/* Фоновая текстура (photos/roulette/fon.jpg, граффити-стена) — на этой
странице и на case.html (см. .case-page::before ниже), тот же самый общий
фон "рулетки" в целом. Едва заметная (2% непрозрачности, как и просили) —
отдельным слоем через ::before, а не прямо в background секции, потому что
opacity затронул бы и сам градиент/цвет фона, а не только картинку. */
.roulette-page::before, .case-page::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: url('../photos/roulette/fon.jpg');
background-size: cover;
background-position: center;
opacity: .02;
pointer-events: none;
}
.roulette-page__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.roulette-page__title { margin-bottom: 10px; }
.roulette-page__sub { color: var(--muted); font-size: 15px; margin-bottom: 26px; }
/* Переиспользует .currency-rate__balance/-badge/-label/-value из shop.html —
та же плашка RC, тот же визуальный язык (см. комментарий в разметке) */
.roulette-page__balance { margin-bottom: 44px; }
/* ======================= МИНИ-ПРОФИЛЬ (roulette.html) ======================= */
/* Узкая полоска под лентой выпадений, замещающая ту часть обычной .header,
где на других страницах виден баланс/аватар/ссылка назад — видна всегда,
в том числе гостю (в "гостевом" виде: баланс 0, аватар-заглушка), см.
initPlayerHud в main.js — он только донастраивает её под реального игрока,
если сессия есть, а не показывает/прячет целиком. */
.player-hud-bar {
width: 100%;
padding: 14px 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.player-hud-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Слева — просто ссылка назад, не тяжёлая кнопка: второстепенное действие
рядом с явной CTA "Пополнить" справа, не должна с ней конкурировать */
.player-hud-bar__back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
transition: color .2s var(--ease);
}
.player-hud-bar__back svg { width: 16px; height: 16px; }
.player-hud-bar__back:hover { color: var(--white); }
.player-hud { display: flex; align-items: center; gap: 12px; }
.player-hud__topup { padding: 9px 20px; font-size: 13px; }
/* Сердечко-переключатель "Мои избранные" — тот же принцип, что и у
.case-page__favorite: контур красным по умолчанию, заливка красным в
активном состоянии. Правило на самом , а не только на