/* ==========================================================================
   KingUI — общий слой интерфейсов + экран «Наборы»
   Метрики взяты из макета king_design/nabor (холст 1552×964).
   ========================================================================== */

:root {
    --kui-bg: #212228;
    --kui-line: #41434C;
    --kui-gold-a: #FFD55C;
    --kui-gold-b: #F29C14;
    --kui-red: #FF3232;
    --kui-dark: #111215;

    /* Шрифт макета — настоящий Halvar Engschrift (Md=500, Bd=700).
       «KR Cond» (Oswald) остаётся в стеке запасным. */
    --kui-font: "Halvar Engschrift", "KR Cond", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
}

@font-face {
    font-family: "Halvar Engschrift";
    src: url("assets/HalvarEng-Md.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Halvar Engschrift";
    src: url("assets/HalvarEng-Bd.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Halvar Engschrift";
    src: url("assets/HalvarEng-Blk.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "KR Cond";
    src: url("assets/oswald-500-cyrillic.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "KR Cond";
    src: url("assets/oswald-500-latin.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "KR Cond";
    src: url("assets/oswald-700-cyrillic.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "KR Cond";
    src: url("assets/oswald-700-latin.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.kui-root {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    overflow: hidden;
    /* вырез камеры и скругления экрана: холст в них не заезжает */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.kui-hidden {
    display: none !important;
}

/* Холст в координатах макета, целиком масштабируется под экран. */
.kui-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    font-family: var(--kui-font);
    color: #fff;
}

.kui-snap-fail {
    opacity: 0.25;
}

/* Живой снапшот (512x512 PNG) - модель занимает лишь часть кадра, остальное
   прозрачные поля. Иконки дизайнера нарисованы впритык, поэтому снапшот в том
   же боксе выглядит вдвое мельче. Готовую картинку растягиваем внутри бокса:
   поля уходят за бокс, сама модель становится читаемой. Только для .kui-snap-ready,
   иконок не касается. Бокс уже центрирован transform-ом - добавляем scale к нему. */
/* ---------------------------------------------------------------------------
   Боксы под снапшоты. Замерено на клиенте (snaptest.html): кадр всегда
   квадрат 1024x1024, а модель внутри занимает его лишь частично и не по
   центру:
     авто (zoom 0.75)  ~90% x 47% кадра, центр модели 48% / 45.4%;
     скин (zoom 0.9)   ~30% x 67% кадра, центр 51.6% / 50%.
   Арт-зона карточки шире, чем выше, поэтому object-fit:contain вписывал
   квадрат кадра ПО ВЫСОТЕ - и машина выходила вдвое мельче плоской иконки.
   Решение: под снапшот бокс делаем квадратным и задаём его одной стороной -
   авто/объекту по ширине арт-зоны, скину по высоте. Пустые поля кадра
   вылезают за бокс, но они прозрачные. top подправлен на смещение модели.
   --------------------------------------------------------------------------- */
/* Ширину/высоту в каждом правиле задаём обе: у базовых классов арт-зоны
   заданы оба размера, и одиночного height:auto они бы не отдали. */

/* кейсы: карточка приза */
.kc-card-art.kui-snap-v { width: 92%; height: auto; aspect-ratio: 1 / 1; top: 39%; }
.kc-card-art.kui-snap-s { height: 84%; width: auto; aspect-ratio: 1 / 1; top: 38%; }
.kc-card-art.kui-snap-o { width: 76%; height: auto; aspect-ratio: 1 / 1; top: 37%; }

/* основной календарь: день */
.dc-day-art.kui-snap-v { width: 76%; height: auto; aspect-ratio: 1 / 1; top: 46%; }
.dc-day-art.kui-snap-s { height: 86%; width: auto; aspect-ratio: 1 / 1; top: 44%; }
.dc-day-art.kui-snap-o { width: 62%; height: auto; aspect-ratio: 1 / 1; top: 44%; }

/* календарь новичка: день */
.cl-day-art.kui-snap-v { width: 88%; height: auto; aspect-ratio: 1 / 1; top: 52%; }
.cl-day-art.kui-snap-s { height: 88%; width: auto; aspect-ratio: 1 / 1; top: 50%; }
.cl-day-art.kui-snap-o { width: 76%; height: auto; aspect-ratio: 1 / 1; top: 50%; }

/* попап «ежедневные награды»: плитка */
.dr-tile-art.kui-snap-v { width: 92%; height: auto; aspect-ratio: 1 / 1; top: 46%; }
.dr-tile-art.kui-snap-s { height: 86%; width: auto; aspect-ratio: 1 / 1; top: 42%; }
.dr-tile-art.kui-snap-o { width: 78%; height: auto; aspect-ratio: 1 / 1; top: 44%; }

/* наборы: плитка предмета (арт лежит во flex-боксе, поэтому размер в px) */
.nb-tile-img.kui-snap-v { width: 104px; height: 104px; max-width: none; max-height: none; }
.nb-tile-img.kui-snap-s { width: 84px; height: 84px; max-width: none; max-height: none; }
.nb-tile-img.kui-snap-o { width: 88px; height: 88px; max-width: none; max-height: none; }

/* спецпредложение: плитка награды */
.sp-tile-img.kui-snap-v { width: 96%; height: auto; aspect-ratio: 1 / 1; max-width: none; max-height: none; top: 40%; }
.sp-tile-img.kui-snap-s { height: 88%; width: auto; aspect-ratio: 1 / 1; max-width: none; max-height: none; top: 42%; }
.sp-tile-img.kui-snap-o { width: 80%; height: auto; aspect-ratio: 1 / 1; max-width: none; max-height: none; top: 42%; }

/* Тач-зона. Холст масштабируется целиком, поэтому на телефоне кнопка 49px
   макета превращается в ~18 CSS px — мимо пальца. Невидимая зона под палец
   считается обратно от масштаба, чтобы всегда быть не меньше 44 CSS px. */
.kui-tap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, calc(44px / var(--kui-scale, 1)));
    height: max(100%, calc(44px / var(--kui-scale, 1)));
}

/* Щадящий режим при масштабе < 0.55 (маленький/портретный экран телефона):
   палец промахивается мимо кнопки чаще, чем на десктопе или большом
   ландшафтном экране, - поднимаем минимальную тач-зону с 44 до 56px. */
.kui-small .kui-tap::before {
    width: max(100%, calc(56px / var(--kui-scale, 1)));
    height: max(100%, calc(56px / var(--kui-scale, 1)));
}

/* Подсказка «поверни экран» - живёт вне .kui-canvas (не масштабируется вместе
   с макетом, иначе на мелком масштабе была бы такой же нечитаемой). Скрыта по
   умолчанию, включается из fit() только для полноэкранных экранов на портрете. */
.kui-rotate-hint-box {
    position: absolute;
    left: 50%;
    top: max(14px, env(safe-area-inset-top));
    transform: translate(-50%, 0) scale(0.9);
    transform-origin: top center;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(17, 18, 21, 0.92);
    border: 1px solid #41434C;
    border-radius: 40px;
    color: #fff;
    font: 600 14px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    animation: kuiRotateHintIn 0.25s ease-out;
}

.kui-rotate-hint-box svg { flex: 0 0 auto; }

.kui-rotate-hint-on {
    display: flex;
}

@keyframes kuiRotateHintIn {
    from { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
}

/* ---------------- панель ---------------- */
/* Рамки заданы через inset box-shadow, а не border: border сдвигает начало
   координат для absolute-детей, и вся вёрстка уезжала бы на 3-4px от макета. */
.nb-panel {
    position: absolute;
    inset: 0;
    background: var(--kui-bg);
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 17px;
    overflow: hidden;
}

.nb-head {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 152px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 17px 17px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nb-head-title {
    font-size: 73.81px;
    line-height: 85px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--kui-bg);
    text-align: center;
    padding: 0 120px;
}

.nb-close {
    position: absolute;
    right: 62px;
    top: 52px;
    width: 49px;
    height: 49px;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.nb-close:active {
    transform: scale(0.92);
}

/* ---------------- ряд карточек ---------------- */
.nb-row {
    position: absolute;
    left: 0;
    top: 179px;
    width: 100%;
    height: 750px;
    display: flex;
    justify-content: center;
    gap: 56px;
    /* правый отступ 24, а не 25: иначе 25+621+56+826+25 = 1553 при холсте 1552
       и ряд получает лишний пиксель прокрутки с видимой полосой */
    padding: 0 24px 0 25px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nb-row::-webkit-scrollbar {
    display: none;
}

.nb-card {
    position: relative;
    flex: 0 0 auto;
    background: var(--kui-bg);
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    overflow: hidden;
}

/* фон карточки: рендеры моделей */
.nb-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Точечный узор — настоящий вектор из Figma (node 5903:39/5903:71),
   экспортирован в PNG вместе с радиальным градиентом (центр прозрачный,
   край #747999 у обычной карточки и #FFBC37 у акцентной).
   В обеих карточках макета он лежит с одним и тем же смещением
   относительно угла карточки: x=-173, y=-202. Карточка его обрезает. */
.nb-dots {
    position: absolute;
    left: -173px;
    top: -202px;
    width: 1171px;
    height: 1154px;
    background: url("assets/dots-blue.png") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

.nb-card-accent .nb-dots {
    background-image: url("assets/dots-gold.png");
}

/* Готовая композиция из макета (группа «награды», экспорт из Figma):
   машина + персонаж + деньги + документы одним PNG. Позиция и размер
   приходят из данных набора — у новичка (28,15,821×951), у олигарха
   (131,-27,889×1023); карточка обрезает выступающее. */
.nb-art-img {
    position: absolute;
    pointer-events: none;
}

/* Три плана-снапшота — запасной вариант, когда у набора нет готовой композиции:
   машина слева по центру высоты, персонаж справа во весь рост, мелочь сверху. */
.nb-hero {
    position: absolute;
    left: -4%;
    top: 12%;
    width: 94%;
    height: 44%;
    object-fit: contain;
    object-position: center bottom;
}

.nb-hero2 {
    position: absolute;
    right: -4%;
    top: 3%;
    width: 54%;
    height: 90%;
    object-fit: contain;
    object-position: bottom right;
    /* без z-index: иначе персонаж встаёт поверх .nb-fade и его ноги
       торчат по кнопке покупки, а в макете низ уходит в затемнение */
}

.nb-hero3 {
    position: absolute;
    left: 26%;
    top: 0;
    width: 52%;
    height: 28%;
    object-fit: contain;
    object-position: center top;
}

/* заглушка предмета: приглушённая, чтобы не спорила с реальными рендерами */
.nb-art-ph {
    opacity: 0.45;
}

/* затемнение снизу, чтобы текст читался поверх рендеров */
.nb-fade {
    position: absolute;
    left: -7px;
    right: -7px;
    top: 250px;
    height: 510px;
    background: linear-gradient(180.07deg, rgba(33, 34, 40, 0) 0.06%, var(--kui-dark) 77.37%);
    pointer-events: none;
}

.nb-badge {
    position: absolute;
    left: 30px;
    top: 40px;
    padding: 14.6px 17.5px;
    background: var(--kui-red);
    border-radius: 8.95px;
    font-size: 23.38px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.nb-title {
    position: absolute;
    left: 30px;
    top: 313px;
    right: 24px;
}

.nb-title-line {
    font-size: 97.13px;
    /* В макете строки идут через 83px (313 -> 396), а не через line-height 112:
       текстовые боксы Figma перекрываются. С шагом 112 вторая строка
       наезжала на плитки предметов. */
    line-height: 83px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.nb-accent {
    color: var(--kui-gold-a);
}

/* ---------------- предметы ---------------- */
.nb-items {
    position: absolute;
    left: 34px;
    top: 499px;
    display: flex;
    align-items: flex-start;
}

/* Плитка макетная, 108.26 (Figma): с 120px шесть плиток олигарха (34 + 6*120 +
   5*16 = 834) вылезали за карточку 826 и шестую резало краем. Шаг между
   плитками задаёт ui-nabor.js (TILE_GAP = 16, как в макете). */
.nb-tile {
    position: relative;
    box-sizing: border-box;
    width: 108.26px;
    height: 108.26px;
    flex: 0 0 auto;
    background: rgba(33, 34, 40, 0.5);
    border: 4px solid var(--kui-line);
    border-radius: 17px;
}

.nb-tile-art {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nb-tile-img {
    /* в макете арт почти во всю плитку: стример 104×59, деньги 88×49, билет 64×64 */
    max-width: 96px;
    max-height: 60px;
    object-fit: contain;
}

/* авто в макете шире и посажено ниже */
.nb-art-wide {
    max-width: 84px;
    max-height: 47px;
    margin-top: 8px;
}

/* Подпись как в макете (12px), но в две строки: "ИЗВЕСТНЫЙ СТРИМЕР" и в
   Figma переносится, а "СКИН ДИНОЗАВРИК" в одну строку не влезал никогда. */
.nb-tile-cap {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 7px;
    font-size: 12.07px;
    line-height: 13px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* ---------------- кнопка ---------------- */
.nb-buy {
    position: absolute;
    left: 33px;
    bottom: 26px;
    height: 86px;
    padding: 0 24px;
    border: none;
    border-radius: 17px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    cursor: pointer;
}

.nb-buy:active {
    transform: scale(0.99);
}

.nb-buy-off {
    filter: grayscale(1);
    opacity: 0.5;
}

.nb-price {
    font-size: 52.79px;
    line-height: 61px;
    font-weight: 700;
}

/* старая цена: перечёркнута красным, как в макете */
.nb-old {
    position: relative;
    font-size: 30.29px;
    line-height: 35px;
    font-weight: 700;
    color: rgba(33, 34, 40, 0.8);
    white-space: nowrap;
}

.nb-old::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 0;
    border-top: 3.44px solid var(--kui-red);
    border-radius: 21.8px;
}


/* ==========================================================================
   Экран «Специальное предложение» (Figma 5903:117, холст 1660×1191)
   ========================================================================== */

.sp-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 1659px;
    height: 1140px;
    background: var(--kui-bg);
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 17px;
    overflow: hidden;
}

.sp-photo {
    position: absolute;
    left: 0;
    top: 212px;
    width: 1659px;
    height: 448px;
}

.sp-head {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 152px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 17px 17px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-head-title {
    font-size: 73.8px;
    line-height: 85px;
    font-weight: 700;
    color: var(--kui-bg);
}

.sp-close {
    position: absolute;
    right: 62px;
    top: 52px;
    width: 49px;
    height: 49px;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.sp-close:active { transform: scale(0.92); }

/* красный бейдж поверх фото */
.sp-sale {
    position: absolute;
    left: 649px;
    top: 165px;
    width: 363px;
    height: 94px;
    background: var(--kui-red);
    border-radius: 15px;
    text-align: center;
    z-index: 2;
}

.sp-sale-top {
    margin-top: 8px;
    font-size: 45px;
    line-height: 52px;
    font-weight: 700;
}

.sp-sale-timer {
    font-size: 27.6px;
    line-height: 32px;
    font-weight: 500;
}

/* бонусный калькулятор */
.sp-calc {
    position: absolute;
    left: 496px;
    top: 571px;
    height: 129px;
    z-index: 2;
}

.sp-coin { width: 41px; height: 41px; }

/* Белый блок собран по абсолютным координатам макета:
   «200» (52,11), монета (130,22), «+» (179,10), золотой вложенный блок (220,0).
   Флекс здесь давал плавающие зазоры — «двести + бонус» смотрелось криво. */
.sp-calc-white {
    position: absolute;
    left: 0;
    top: 44px;
    width: 409px;
    height: 85px;
    background: #fff;
    border-radius: 5px;
    color: var(--kui-bg);
}

.sp-calc-num {
    font-size: 54px;
    font-weight: 700;
    line-height: 63px;
}

.sp-calc-white > .sp-calc-num {
    position: absolute;
    left: 52px;
    top: 11px;
}

.sp-calc-white > .sp-coin {
    position: absolute;
    left: 130px;
    top: 22px;
}

.sp-calc-plus {
    position: absolute;
    left: 179px;
    top: 10px;
    font-size: 54px;
    font-weight: 700;
}

.sp-calc-gold {
    background: #FFBC37;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;                   /* цифра прижата к монете, как в макете */
    color: var(--kui-bg);
}

.sp-calc-in {
    position: absolute;
    left: 220px;
    top: 0;
    width: 189px;
    height: 85px;
    padding-left: 5px;          /* в макете кластер «300 + монета» на 2.5px правее центра */
}

/* красный язычок «БОНУС» над золотым блоком: в макете 189×93,
   нижняя часть уходит под золотой блок, виден верхний ремень 44px */
.sp-calc-tag {
    position: absolute;
    left: 0;
    top: -44px;
    width: 189px;
    height: 93px;
    background: var(--kui-red);
    border-radius: 14.7px;
    z-index: -1;
    color: #fff;
    font-size: 33px;
    font-weight: 500;
    text-align: center;
    line-height: 44px;
}

.sp-calc-eq {
    position: absolute;
    left: 424px;
    top: 55px;
    color: #fff;
    font-size: 54px;
    font-weight: 700;
}

.sp-calc-total {
    position: absolute;
    left: 465px;
    top: 44px;
    width: 203px;
    height: 85px;
    padding-left: 9px;          /* «500 + монета» — на 4.5px правее центра */
}

/* строка доп-бонуса */
.sp-extra {
    position: absolute;
    left: 0;
    top: 716px;
    width: 100%;
    text-align: center;
    font-size: 37.9px;
    line-height: 44px;
    font-weight: 700;
    color: #fff;
}

.sp-extra-gold { color: var(--kui-gold-a); }

.sp-coin-inline {
    width: 31px;
    height: 31px;
    vertical-align: -4px;
    margin-left: 6px;
}

/* плитки наград */
.sp-items {
    position: absolute;
    left: 174.9px;
    top: 777px;
    display: flex;
    gap: 34.6px;
}

.sp-tile {
    position: relative;
    width: 234.3px;
    height: 234.3px;
    flex: 0 0 auto;
    background: var(--kui-bg);
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 36.8px;
    overflow: hidden;
}

.sp-tile-img { position: absolute; }

.sp-tile-img-auto {
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    max-width: 92%;
    max-height: 64%;
}

/* Две строки: длинные названия вроде "MERCEDES-BENZ CLS63" в одну не влезают
   и раньше обрезались многоточием. */
.sp-tile-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 22px;
    font-size: 29px;
    line-height: 32px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-left {
    position: absolute;
    left: 0;
    top: 1027px;
    width: 100%;
    text-align: center;
    font-size: 38.6px;
    line-height: 45px;
    font-weight: 700;
    color: #fff;
}

/* кнопка покупки: свисает за нижний край панели */
.sp-buy {
    position: absolute;
    left: 534px;
    /* В макете кнопка свисает за нижний край панели (1140) и на телефоне
       упиралась в край экрана - поднимаем её внутрь панели. */
    top: 1019px;
    width: 593px;
    height: 102px;
    border: none;
    border-radius: 17px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    cursor: pointer;
    z-index: 3;
}

.sp-buy:active { transform: scale(0.99); }
.sp-buy-off { filter: grayscale(1); opacity: 0.5; }

.sp-price {
    font-size: 52.8px;
    line-height: 61px;
    font-weight: 700;
}

.sp-old {
    position: relative;
    font-size: 30.3px;
    line-height: 35px;
    font-weight: 700;
    color: rgba(33, 34, 40, 0.8);
    white-space: nowrap;
}

.sp-old::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    border-top: 3.44px solid var(--kui-red);
    border-radius: 21.8px;
}

/* ==========================================================================
   Виджет-кнопка «Специальное предложение» (Figma 5903:19, 300×130)
   ========================================================================== */

.spbtn {
    position: fixed;
    right: 10px;
    /* выше середины: на телефоне снизу игровые кнопки, виджет попадал под них */
    top: 34%;
    width: 300px;
    height: 130px;
    background: #1C1D22;
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 7.6px;
    overflow: hidden;
    cursor: pointer;
    z-index: 8000;
    font-family: var(--kui-font);
    transform-origin: 100% 0;
}

.spbtn:active { filter: brightness(1.1); }

.spbtn-hidden { display: none !important; }

/* тёплое свечение за машинами */
.spbtn-glow {
    position: absolute;
    left: 182px;
    top: -16px;
    width: 171px;
    height: 171px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 213, 92, 0.5) 0%, rgba(255, 213, 92, 0) 70%);
    pointer-events: none;
}

.spbtn-art {
    position: absolute;
    left: 140px;
    top: -4px;
    width: 229px;
    height: 165px;
    z-index: 1;
    pointer-events: none;
}

.spbtn-title {
    position: absolute;
    left: 24.6px;
    top: 16.3px;
    width: 160px;
    font-size: 27.2px;
    line-height: 27.2px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}

.spbtn-badge {
    position: absolute;
    left: 24.3px;
    top: 76.4px;
    width: 137px;
    height: 33px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 9.1px;
    display: flex;
    align-items: center;
    padding-left: 18.7px;
    gap: 7px;
    z-index: 2;
}

.spbtn-logo { width: 21px; height: 21px; }

.spbtn-time {
    font-size: 22px;
    font-weight: 500;
    color: var(--kui-bg);
    letter-spacing: 0.3px;
}


/* ==========================================================================
   Экран «Кейсы» (Figma 5878:8130, холст 1920×1080)
   ========================================================================== */

.kc-bg {
    position: absolute;
    inset: 0;
    background: #1C1D22 url("assets/cases-bg.png") center / cover no-repeat;
}

/* --- верхняя панель --- */
.kc-top { position: absolute; inset: 0; pointer-events: none; }
.kc-top > * { pointer-events: auto; }

.kc-back {
    position: absolute;
    left: 71px;
    top: 60px;
    width: 350px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    color: #fff;
    font-family: var(--kui-font);
    display: flex;
    align-items: center;
    padding-left: 66px;
    gap: 26px;
    cursor: pointer;
}

.kc-back:active { transform: scale(0.98); }

.kc-back-circ, .kc-plus-circ {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #DDE3FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.kc-back-txt { font-size: 50.8px; font-weight: 500; }

.kc-title {
    position: absolute;
    left: 0;
    top: 85px;
    width: 100%;
    text-align: center;
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
    color: #fff;
}

/* Блок баланса привязан к правому краю, а не к левому: холст у адаптивных
   экранов шире макета, и по left эти элементы зависли бы посреди пустоты.
   Отступы посчитаны от макетной ширины 1920: 1920 - left - width. */
.kc-coin { position: absolute; right: 522px; top: 78px; width: 88px; height: 88px; }

.kc-balance {
    position: absolute;
    right: 199px;
    top: 92px;
    width: 280px;
    font-size: 50.8px;
    line-height: 59px;
    font-weight: 500;
    color: #fff;
}

.kc-plus {
    position: absolute;
    right: 71px;
    top: 60px;
    width: 124px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kc-plus:active { transform: scale(0.95); }
.kc-plus-circ { width: 56px; height: 56px; }

/* --- список кейсов --- */
.kc-grid {
    position: absolute;
    left: 71px;
    top: 235px;
    /* Ровно под контент: 4 колонки по 416 + 3 зазора по 38 = 1778, и при
       1920 - 71 - 71 = 1778 свободного места не остаётся - ряд начинается
       ровно на «НАЗАД» и заканчивается ровно на «+». */
    right: 71px;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 416px);
    grid-auto-rows: 495px;
    column-gap: 38px;
    /* На широком холсте свободное место появляется справа: без этого колонки
       фиксированной ширины прижались бы к левому краю и сетка уехала бы вбок. */
    justify-content: center;
    overflow-y: auto;
    scrollbar-width: none;
}

.kc-grid::-webkit-scrollbar { display: none; }

.kc-case { position: relative; width: 416px; height: 452.6px; }

/* Телефон (ui-cases.js ставит на сетку --kc-case-k): карточка свёрстана в
   макетных 416x452.6 и целиком масштабируется под ширину колонки, так арт,
   название и кнопка растут вместе. */
.kc-m .kc-case { transform: scale(var(--kc-case-k, 1)); transform-origin: top left; }

/* Телефон, экран кейса: лента крупнее. Панель содержимого не трогаем -
   её высота задаёт три ряда призов, и увеличение карточек их ломало. */
.kc-m .kc-card-sm .kc-card-cap { font-size: 19px; }
/* Лента ниже макетных 789: панель содержимого (235 + 540 = 775) держит три
   ряда призов, а прежние 745 накрывали её низ и третий ряд был срезан.
   292 = карточка 224 + поля окна 2*34; низ ленты 786 + 292 = 1078 <= 1080. */
.kc-m .kc-reel { top: 786px; height: 292px; }
.kc-m .kc-reel-win { top: 34px; bottom: 34px; }
.kc-m .kc-reel-track { gap: 22.75px; }
.kc-m .kc-reel-endl, .kc-m .kc-reel-endr { top: 82px; height: 136px; }
.kc-m .kc-card-reel { width: 224px; height: 224px; }
.kc-m .kc-card-reel .kc-card-cap { font-size: 26px; }
.kc-m .kc-arrow { top: 776px; height: 312px; }

.kc-case-art {
    position: absolute;
    left: 0;
    top: 0;
    width: 416px;
    height: 416px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 13px;
    overflow: hidden;
}

.kc-case-art img {
    /* Тело кейса внутри экспорта занимает 43% квадрата (остальное — поля под
       свечение). Было 373.6px и срезалось нижним краем карточки. Уменьшили
       до 330px и подняли на посадку (43,45): кейс влезает целиком, над
       подписью остаётся воздух. */
    position: absolute;
    left: -203px;
    top: -163px;
    width: 773px;
    height: 773px;
}

.kc-case-name {
    position: absolute;
    left: 0;
    top: 26px;
    width: 100%;
    text-align: center;
    font-size: 50px;
    line-height: 58px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.kc-case-btn {
    position: absolute;
    left: 69px;
    top: 379px;
    width: 278px;
    height: 73.6px;
    border: none;
    border-radius: 15.6px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    font-size: 37.4px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
}

.kc-case-btn:active { transform: scale(0.97); }

/* --- карточка приза: настоящая рамка из макета (карточки.png / Group 7) --- */
.kc-card { position: relative; }

/* Полоса-подсказка внизу панели содержимого: сразу видно, что список
   прокручивается. Гаснет после первого скролла. */
.kc-left-more {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    height: 46px;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, rgba(33, 34, 40, 0) 0%, #212228 62%);
    color: var(--kui-gold-b);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 62px;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    z-index: 2;
}
.kc-left-more-off { opacity: 0; }

.kc-card-bg {
    position: absolute;
    inset: 0;
    /* Group 7 — чистая рамка без запечённого арта. Экспорт 700px соответствует
       карточке 563.7 макета (поля под свечение), поэтому фон рисуется в 124.2%:
       внутренний квадрат рамки встаёт ровно как в макете на любом размере. */
    background: url("assets/card-big.png") center / 124.2% 124.2% no-repeat;
    pointer-events: none;
}

/* цвет редкости: сине-фиолетовый исходник крутится по тону,
   серебро рамки hue-rotate не задевает */
.kc-c-pink   .kc-card-bg { filter: hue-rotate(70deg); }
.kc-c-blue   .kc-card-bg { filter: hue-rotate(315deg); }
.kc-c-green  .kc-card-bg { filter: hue-rotate(245deg); }
.kc-c-gold   .kc-card-bg { filter: hue-rotate(150deg) saturate(1.3); }
.kc-c-red    .kc-card-bg { filter: hue-rotate(110deg); }

/* Приз: фиксированный бокс + object-fit contain. Именно бокс, а не max-размеры:
   мелкие иконки (мешок 47px) иначе не растягиваются и теряются в карточке. */
.kc-card-art {
    position: absolute;
    left: 50%;
    /* Крупнее прежнего (было 54/44 на 42%): мелкие снапшоты не читались.
       Центр чуть выше, чтобы низ арта не наезжал на подпись, которая на 66%. */
    /* Ещё крупнее (66/52 -> 78/56): живой снапшот модели идёт с прозрачными
       полями и при 66% машина/скин читались хуже плоских иконок. Центр на 37%:
       низ арта на 65%, подпись начинается на 66%. */
    top: 37%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 56%;
    object-fit: contain;
    z-index: 1;
}

.kc-card-cap {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 66%;
    text-align: center;
    font-size: 17.5px;
    line-height: 0.95;
    font-weight: 500;
    color: #fff;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Переносим по пробелам, а слово рвём только если оно само не влезает.
       С прежним break-word «БЕСПЛАТНАЯ РУЛЕТКА» рвалась посреди слова, хотя
       между словами есть пробел. */
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Название из одного длинного слова: переносить не по чему, поэтому мельче.
   Ставится из ui-cases.js, когда самое длинное слово больше 12 символов. */
.kc-card-cap-long {
    font-size: 12.6px;
    letter-spacing: -0.2px;
}

/* размеры карточек */
.kc-card-sm { width: 160px; height: 160px; flex: 0 0 auto; }   /* крупнее макета (138): подписи должны читаться на телефоне */
.kc-card-reel { width: 165.8px; height: 165.8px; flex: 0 0 auto; }
.kc-card-reel .kc-card-cap { font-size: 19px; }
.kc-card-lane { width: 124px; height: 124px; flex: 0 0 auto; }
.kc-card-lane .kc-card-cap { font-size: 14px; }
.kc-card-med { width: 280px; height: 280px; flex: 0 0 auto; }
.kc-card-med .kc-card-cap { font-size: 27px; }

/* --- содержимое кейса (левая панель) --- */
/* Панель содержимого выросла с 516x495: на телефоне карточки призов были
   нечитаемы, а кнопки листания терялись. Низ упирается в ленту на 789. */
.kc-left {
    position: absolute;
    left: 71px;
    top: 235px;
    width: 580px;
    height: 540px;
    z-index: 1;
    background: #212228;
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 17px;
    overflow: hidden;
}

.kc-left-grid {
    position: absolute;
    left: 18px;
    top: 24px;
    /* правее - дорожка полосы прокрутки */
    right: 20px;
    /* 16, а не 20: 3*160 + 2*8 = 496 при доступных 500 - четыре пикселя запаса,
       иначе на дробном масштабе телефона третий ряд срезало по нижней рамке */
    bottom: 16px;
    display: grid;
    /* Крупнее макета (138 -> 160), но так, чтобы В ВИДИМОЙ ЧАСТИ помещались
       ТРИ ряда, как в макете. При 170px третий ряд уже не влезал и призов
       было видно только два. */
    grid-template-columns: repeat(3, 160px);
    grid-auto-rows: 160px;
    gap: 8px;
    justify-content: start;
    align-content: start;
    /* hidden, а не auto: список тянет dragScroll (ui-cases.js) через scrollTop,
       нативный скролл вебвью параллельно дёргал его и в конце возвращал назад */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* полосу здесь показываем, в отличие от остальных списков интерфейса */
    scrollbar-width: thin;
    scrollbar-color: var(--kui-gold-a) rgba(255, 255, 255, 0.10);
}

/* Полоса прокрутки как в макете: тонкая дорожка с золотым бегунком у правого
   края списка. Штатная, а не самодельная - вебвью клиента это Chromium, он её
   и рисует, и таскает сам, без единой строчки JS. */
.kc-left-grid::-webkit-scrollbar { width: 8px; }

.kc-left-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}

.kc-left-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 4px;
}



/* --- центр --- */
.kc-hero {
    /* тело кейса 388px на (766,219); экспорт с полями -> 910px на (476,-26).
       z-index ниже панелей: прозрачные поля картинки не должны ложиться
       поверх карточек содержимого. */
    position: absolute;
    left: 476px;
    top: -26px;
    width: 910px;
    height: 910px;
    pointer-events: none;
    z-index: 0;
    animation: kcFloat 3.2s ease-in-out infinite;
}

@keyframes kcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* одна кнопка: есть кейсы — «ОТКРЫТЬ N ШТ.», нет — «КУПИТЬ ЗА X KC» */
.kc-act {
    position: absolute;
    left: 719px;
    top: 642px;
    width: 458px;
    height: 88px;
    border: none;
    border-radius: 15.6px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    font-size: 37.4px;
    font-weight: 500;
    cursor: pointer;
}

.kc-act:active { transform: scale(0.98); }

/* --- правая панель --- */
.kc-right {
    position: absolute;
    left: 1310px;
    top: 235px;
    width: 539px;
    height: 339px;
    z-index: 1;
    background: #212228;
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 17px;
}

.kc-right-title {
    position: absolute;
    left: 40px;
    top: 36px;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    color: #fff;
}

.kc-counts {
    position: absolute;
    left: 40px;
    top: 104px;
    display: flex;
    gap: 14px;
}

.kc-count {
    position: relative;
    width: 104px;
    height: 83px;
    background: #212228;
    border: 4px solid var(--kui-line);
    border-radius: 13px;
    color: #fff;
    font-family: var(--kui-font);
    font-size: 34px;
    font-weight: 700;
    cursor: pointer;
}

.kc-count-on {
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-color: transparent;
    color: var(--kui-bg);
}

.kc-count-disc {
    position: absolute;
    top: -17px;
    right: -10px;
    padding: 1px 7px;
    background: var(--kui-red);
    border-radius: 7px;
    font-size: 23.7px;
    font-weight: 700;
    color: #fff;
}

.kc-fast {
    position: absolute;
    left: 40px;
    top: 233px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.kc-toggle {
    position: relative;
    width: 133px;
    height: 70px;
    border: none;
    border-radius: 35px;
    background: #41434C;
    cursor: pointer;
    transition: background 0.2s;
}

.kc-toggle-on {
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
}

.kc-knob {
    position: absolute;
    left: 9px;
    top: 9px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
}

.kc-toggle-on .kc-knob { left: 72px; background: #212228; }

.kc-fast-label {
    font-size: 40px;
    font-weight: 700;
    color: var(--kui-gold-a);
}

/* --- лента-рулетка --- */
.kc-reel {
    position: absolute;
    left: 71px;
    top: 789px;
    z-index: 1;
    width: 1778px;
    height: 222.4px;
    background: #212228;
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 17px;
    overflow: hidden;
}

.kc-reel-endl, .kc-reel-endr {
    position: absolute;
    top: 61px;
    width: 11.7px;
    height: 100px;
    background: var(--kui-gold-b);
    border-radius: 4px;
    z-index: 2;
}

.kc-reel-endl { left: 18px; }
.kc-reel-endr { right: 18px; }

.kc-reel-win {
    position: absolute;
    left: 75px;
    top: 28px;
    right: 75px;
    bottom: 28px;
    overflow: hidden;
}

.kc-reel-track {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    gap: 16.85px;
    will-change: transform;
}

.kc-arrow {
    position: absolute;
    left: 940px;
    top: 781px;
    width: 40px;
    height: 239px;
    z-index: 3;
    pointer-events: none;
}


/* --- экран мультиоткрытия: дорожки появляются по очереди (рулетка кейсы 10) --- */
.kc-lanes {
    position: absolute;
    left: 130px;
    right: 130px;
    /* Ниже заголовка: он стоит на 0 и занимает 75px по высоте, а прежние 46px
       пускали первый ряд дорожек прямо под текст — на десяти кейсах название
       кейса налезало на призы. */
    top: 80px;
    bottom: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    /* Пять рядов по 170 + зазоры должны уложиться в 900px, оставшиеся после
       сдвига вниз: при прежних 20px выходило 930 и ряды выпирали за края. */
    row-gap: 12px;
    align-content: center;
}

/* Широкий холст (телефон 20:9, canvasW >= 2200): три колонки по четыре ряда.
   Так дорожки выше (203 против 170, карточки 150 против 124) и остаётся место
   опустить название кейса из-под выреза экрана. */
.kc-lanes-wide {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
    top: 130px;
    bottom: 96px;
    row-gap: 14px;
}
.kc-lanes-wide .kc-lane { height: 203px; }
.kc-lanes-wide .kc-lane-win { top: 26px; bottom: 26px; }
.kc-lanes-wide .kc-lane-endl, .kc-lanes-wide .kc-lane-endr { top: 66px; }
.kc-lanes-wide .kc-card-lane { width: 150px; height: 150px; }
.kc-lanes-wide .kc-card-lane .kc-card-cap { font-size: 17px; }
/* 2 приза — одна колонка по центру, как половина макета */
.kc-lanes-few {
    grid-template-columns: 800px;
    justify-content: center;
}

.kc-lane {
    position: relative;
    height: 170px;
    background: #1A1B20;
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 14px;
    opacity: 0;
    transform: translateY(26px) scale(0.98);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.kc-lane-on {
    opacity: 1;
    transform: none;
}

.kc-lane-endl, .kc-lane-endr {
    position: absolute;
    top: 50px;
    width: 8px;
    height: 70px;
    background: var(--kui-gold-b);
    border-radius: 3px;
    z-index: 2;
}

.kc-lane-endl { left: 12px; }
.kc-lane-endr { right: 12px; }

.kc-lane-win {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 23px;
    bottom: 23px;
    overflow: hidden;
}

.kc-lane-track {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    gap: 16px;
    will-change: transform;
}

.kc-lane-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 62px;
    z-index: 3;
    pointer-events: none;
}

.kc-lane-arrow-t { top: -8px; clip-path: inset(0 0 55% 0); }
.kc-lane-arrow-b { bottom: -8px; clip-path: inset(55% 0 0 0); }

/* кнопка пропуска на экране мультиоткрытия */
.kc-skip {
    position: absolute;
    left: 50%;                  /* центр холста: на телефоне холст шире 1920 */
    margin-left: -164px;
    bottom: 22px;
    width: 328px;
    height: 62px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    font-size: 33px;
    font-weight: 700;
    cursor: pointer;
    z-index: 4;
}

.kc-skip:active { transform: scale(0.98); }

/* --- выигрыш --- */
/* Пока клиент рендерит модели призов, показываем ожидание: иначе игрок
   видит пустые карточки и думает, что интерфейс сломался. */
.kc-loading {
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 26, 0.9);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    font-family: var(--kui-font);
}
.kc-loading-text {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.kc-loading-bar {
    width: 420px;
    height: 12px;
    border-radius: 6px;
    background: #2A2C34;
    overflow: hidden;
}
.kc-loading-fill {
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    transition: width 0.25s linear;
}

.kc-winover {
    position: absolute;
    inset: 0;
    /* Figma: #1c1d22 @0.95, но на OLED телефона задний экран просвечивал кашей -
       держим плотнее, а яркие кнопки под оверлеем прячем в renderWin */
    background: rgba(20, 21, 26, 0.975);
    z-index: 10;
    animation: kcFadeIn 0.35s ease-out;
}

@keyframes kcFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kc-confetti {
    position: absolute;
    inset: -20% 0 0 0;
    background: url("assets/confetti.png") center top / cover no-repeat;
    pointer-events: none;
    animation: kcConfetti 11s linear infinite;
}

@keyframes kcConfetti {
    from { transform: translateY(-6%) rotate(0.0001deg); }
    to { transform: translateY(14%) rotate(0.0001deg); }
}

.kc-winover .kc-win-title {
    animation: kcDrop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes kcDrop {
    from { transform: translateY(-60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.kc-winover .kc-card-big,
.kc-winover .kc-card-med {
    animation: kcPop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.kc-winover .kc-card-med:nth-child(2) { animation-delay: 0.06s; }
.kc-winover .kc-card-med:nth-child(3) { animation-delay: 0.12s; }
.kc-winover .kc-card-med:nth-child(4) { animation-delay: 0.18s; }
.kc-winover .kc-card-med:nth-child(5) { animation-delay: 0.24s; }
.kc-winover .kc-card-med:nth-child(6) { animation-delay: 0.30s; }
.kc-winover .kc-card-med:nth-child(7) { animation-delay: 0.36s; }
.kc-winover .kc-card-med:nth-child(8) { animation-delay: 0.42s; }
.kc-winover .kc-card-med:nth-child(9) { animation-delay: 0.48s; }
.kc-winover .kc-card-med:nth-child(10) { animation-delay: 0.54s; }

@keyframes kcPop {
    from { transform: scale(0.55); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.kc-winover .kc-take {
    animation: kcRise 0.45s 0.25s ease-out both;
}

@keyframes kcRise {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* подсветка карточки-победителя после остановки ленты */
.kc-win-flash .kc-card-bg {
    animation: kcFlash 0.55s ease-in-out 3;
}

@keyframes kcFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.9); }
}

.kc-win-title {
    position: absolute;
    left: 0;
    top: 91px;
    width: 100%;
    text-align: center;
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
    color: #fff;
}

.kc-card-big {
    position: absolute;
    left: 50%;                  /* центр холста: на телефоне холст шире 1920 */
    margin-left: -282px;
    top: 213px;
    width: 563.7px;
    height: 563.7px;
}

/* большая карточка выигрыша: приз 343.6×358.4 (61%×64%) с центром на 50%,
   подпись из макета — 64.5px на 68% высоты, две строки внутри тёмного квадрата */
.kc-card-big .kc-card-art { width: 70%; height: 56%; top: 41%; }
.kc-card-big .kc-card-cap {
    top: 68%;
    font-size: 65px;        /* Figma: 65px/58 */
    line-height: 0.9;
    font-weight: 700;
}

/* средние карточки мультивыигрыша — те же пропорции */
.kc-card-med .kc-card-art { width: 68%; height: 52%; top: 40%; }
.kc-card-med .kc-card-cap { top: 68%; font-size: 32px; line-height: 0.91; font-weight: 700; }   /* Figma: 32px/29 */
/* одно длинное слово («ЗАКОНОПОСЛУШНОСТЬ») в 218px при 32px не влезает - ужимаем,
   иначе рвётся посреди слова; специфичность выше базового .kc-card-cap-long */
.kc-card-med .kc-card-cap-long { font-size: 24px; }
.kc-card-big .kc-card-cap-long { font-size: 50px; }

.kc-win-grid {
    /* Figma «выигрыш 10»: карточки 279 на 132/476/820/1164/1508 (зазор 65),
       ряды 212 и 511 (зазор 20). max-width держит пять в ряд и на широком холсте. */
    position: absolute;
    left: 0;
    right: 0;
    top: 212px;
    height: 580px;
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 65px;
    row-gap: 20px;
    align-items: center;
    justify-content: center;
    align-content: center;
}


.kc-take {
    position: absolute;
    left: 50%;              /* Figma «выигрыш»: 778,814 367×97, r17; центр холста */
    margin-left: -183.5px;
    top: 814px;
    width: 367px;
    height: 97px;
    border: none;
    border-radius: 17px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    font-size: 41.3px;
    font-weight: 700;
    cursor: pointer;
    z-index: 11;
}

.kc-take:active { transform: scale(0.98); }


/* ==========================================================================
   Промо-попап «АКЦИЯ Х3» (Figma 5920:148, холст 1075×727)
   ========================================================================== */

.pr-panel {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 188, 55, 0) 52%, rgba(255, 188, 55, 0.34) 128%),
        #202126;
    border-radius: 17px;
    overflow: hidden;
    font-family: var(--kui-font);
}

.pr-deco {
    position: absolute;
    pointer-events: none;
    /* экспортированы исходники заливок, а не рендеры узлов — Figma кропит их
       режимом FILL, что в CSS соответствует object-fit: cover */
    object-fit: cover;
}

/* заголовок: Halvar Black с вертикальным бликом */
.pr-title {
    position: absolute;
    left: 0;
    top: 238px;
    width: 100%;
    text-align: center;
    font-size: 154.2px;
    line-height: 179px;
    font-weight: 900;
    /* В макете надпись наклонная и светлая сверху вниз: белый переходит в
       серебро у нижней кромки. Прежний градиент шёл наоборот - от серого
       сверху, - и вся надпись читалась как серая. */
    font-style: italic;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #d8d8d8 70%, #9b9b9b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* text-shadow при прозрачном цвете не виден вовсе - тень и обводку даёт
       filter, он работает по отрисованным глифам */
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.38)) drop-shadow(0 0 7px rgba(0, 0, 0, 0.55));
}

/* красная плашка: виден верх над кнопкой, низ уходит под неё */
.pr-strip {
    position: absolute;
    left: 352px;
    top: 552px;
    width: 368px;
    height: 80px;
    background: var(--kui-red);
    border-radius: 14.5px;
    text-align: center;
    padding-top: 7px;
    font-size: 29.9px;
    line-height: 35px;
    font-weight: 500;
    color: #fff;
}

.pr-btn {
    position: absolute;
    left: 352px;
    top: 599px;
    width: 368px;
    height: 107.6px;
    border: none;
    border-radius: 14.8px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: var(--kui-bg);
    font-family: var(--kui-font);
    font-size: 44.1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    cursor: pointer;
}

.pr-btn:active { transform: scale(0.98); }

.pr-btn-circ {
    width: 50.6px;
    height: 50.6px;
    border-radius: 50%;
    background: #212228;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* плитки множителей */
.pr-tiles {
    position: absolute;
    left: 319px;
    top: 409px;
    display: flex;
    gap: 19.2px;
}

.pr-tile {
    position: relative;
    width: 132.2px;
    height: 132.2px;
    background: #212228;
    border-radius: 20.8px;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Обводка вынесена в отдельный слой поверх содержимого. Как inset-тень на
   самой плитке она рисуется ПОД детьми, и красный уголок её закрашивал -
   в макете же серая рамка идёт поверх уголка и замыкает его по радиусу. */
.pr-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20.8px;
    box-shadow: inset 0 0 0 4.9px var(--kui-line);
    pointer-events: none;
    z-index: 2;
}

/* Красный уголок в левом верхнем углу плитки - как в макете. Раньше здесь
   лежала звезда, обрезанная краями плитки: от неё оставались случайные лучи,
   и плашка читалась как красная стрелка. */
/* Уголок из макета: квадрат 95.08 на (-52.34,-52.34), повёрнутый на 45° -
   его нижняя грань проходит по x + y = 57.6, т.е. в плитке виден треугольник
   с катетами 57.6. */
.pr-star {
    position: absolute;
    left: 0;
    top: 0;
    width: 57.6px;
    height: 57.6px;
    background: var(--kui-red);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Х2: макет 12.63/11.29, кегль 17.39/20. Раньше стояла 15px на (9,9) - надпись
   липла к углу и "2" вылезала за диагональ. */
.pr-x {
    position: absolute;
    left: 12.6px;
    top: 11.3px;
    font-size: 17.4px;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
    z-index: 3;
}

.pr-tile-art {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 58%;
    height: 56%;
    object-fit: contain;
}

.pr-tile-cap {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    text-align: center;
    font-size: 16.8px;
    line-height: 19px;
    font-weight: 500;
    color: #fff;
}

/* закрыть */
/* крестик акции скрыт первые 3 секунды (см. ui-promo.js) */
.pr-close-wait { opacity: 0; pointer-events: none; }

/* Крестик появляется не сразу: экран должны успеть прочитать, а не закрыть
   рефлекторно. Класс снимается через KUI_CLOSE_WAIT мс. */
.kui-close-wait { opacity: 0; pointer-events: none; }
.pr-close { transition: opacity 0.35s ease-out; }

.pr-close {
    position: absolute;
    left: 908px;
    top: 46px;
    width: 124px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

.pr-close:active { transform: scale(0.95); }

.pr-close-circ {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #DDE3FF;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   «Календарь новичка» (Figma 5945:6, холст 1920×1080)
   ========================================================================== */

.cl-panel {
    position: absolute;
    inset: 0;
    /* полосы - экспорт слоя из макета (calendar_bg.png, белые с альфой до 20%),
       тянутся на всю ширину холста; затемнение к низу поверх */
    background:
        linear-gradient(180deg, rgba(33, 34, 40, 0) 0%, #111215 81%),
        radial-gradient(1055px 913px at calc(100% - 257px) 853px, rgba(255, 188, 55, 0.30) 0%, rgba(255, 188, 55, 0.10) 45%, rgba(255, 188, 55, 0) 72%),
        url(assets/bg-stripes.png?v=20260903v) 0 0 / 100% 100% no-repeat,
        #202126;
    overflow: hidden;
    font-family: var(--kui-font);
}

.cl-photo {
    position: absolute;
    right: 0;
    top: 0;
    width: 939px;
    height: 1080px;
    pointer-events: none;
}

/* --- таймер --- */
.cl-timer {
    position: absolute;
    left: 120px;
    top: 46px;
    width: 674px;
    height: 98px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    z-index: 1;
}

.cl-timer-ico {
    position: absolute;
    left: 0;
    top: 0;
    width: 98px;
    height: 98px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-timer-ico img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.cl-timer-text {
    position: absolute;
    left: 117px;
    top: 24px;
    font-size: 44.1px;
    line-height: 51px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.cl-timer-gold { color: #FFBC37; }

/* --- закрыть --- */
.cl-close {
    position: absolute;
    /* к правому краю, а не по left: 1920 - 1750 - 124 = 46 */
    right: 46px;
    top: 46px;
    width: 124px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.cl-close:active { transform: scale(0.95); }

.cl-close-circ {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #DDE3FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- заголовки --- */
.cl-title {
    position: absolute;
    left: 113px;
    top: 207px;
    font-size: 165.8px;
    line-height: 192px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
}

.cl-title-gold {
    top: 349px;
    color: #FFBC37;
}

.cl-sub {
    position: absolute;
    left: 119px;
    top: 541px;
    width: 762px;
    font-size: 40px;
    line-height: 46px;
    font-weight: 500;
    color: #BCBCBC;
    z-index: 1;
}

/* --- карточки дней --- */
.cl-day {
    position: absolute;
    top: 712px;
    width: 227.3px;
    z-index: 1;
}

.cl-day-box {
    position: absolute;
    left: 1px;
    top: 16px;             /* макет: квадрат на 728 при обёртке 712 */
    width: 227px;
    height: 227px;
    background: rgba(33, 34, 40, 0.85);
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 24px;
    overflow: hidden;
}

.cl-day-art {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Figma: арт 154 в квадрате 227 (68%). Подняли до 76%: живой снапшот
       идёт с прозрачными полями и на 68% выглядел мельче иконок макета. */
    width: 76%;
    height: 76%;
    object-fit: contain;
}

/* Телефон: ряд дней тянется на ширину холста - карточка масштабируется целиком
   в ui-calendar.js (transform: scale(k)), отдельных размеров тут нет. */

/* активный день: золотая карточка «ЗАБРАТЬ НАГРАДУ» */
.cl-day-claim .cl-day-box {
    background: linear-gradient(160deg, #FFD867 0%, #DFA53A 55%, #C8892B 100%);
    box-shadow: inset 0 0 0 4px #FFD55C;
    cursor: pointer;
}

.cl-day-claim .cl-day-box:active { transform: scale(0.98); }
.cl-day-claim .cl-day-art { opacity: 0.28; }
.cl-day-claim .cl-day-tab { background: linear-gradient(90deg, var(--kui-gold-a), var(--kui-gold-b)); }

.cl-day-take {
    position: absolute;
    left: 20px;
    right: 10px;
    top: 66px;
    text-align: center;
    font-size: 41.7px;
    line-height: 48px;
    font-weight: 500;
    color: #212228;
    z-index: 1;
}

/* забранный день */
.cl-day-done { opacity: 0.45; }

/* красный уголок X2 */
.cl-day-star {
    position: absolute;
    left: 83px;
    top: 105px;
    width: 231.2px;
    height: 231.2px;
    pointer-events: none;
}
.cl-day-star svg { display: block; }

.cl-day-x {
    position: absolute;
    right: 10px;
    bottom: 17px;
    font-size: 24.8px;
    font-weight: 500;
    color: #fff;
    z-index: 1;
}

/* сколько ещё отыграть до награды - на текущем дне новичкового календаря */
/* Над карточкой, выше ярлыка "ДЕНЬ N": внутри плашка ложилась на арт приза
   и жалась к ярлыку. Ряд в новичковом календаре один, сверху пусто. */
.cl-day-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -36px;
    padding: 5px 16px;
    background: var(--kui-red);
    border-radius: 10px;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    z-index: 3;
}

/* бесплатный кейс, а открывать нечего: кнопка на месте, но приглушена */
.kc-act-off { opacity: 0.55; }

.cl-day-tab {
    position: absolute;
    left: 56px;
    top: 0;                /* макет: ярлык вровень с верхом группы */
    width: 117px;
    height: 38px;
    background: #FFBC37;
    border-radius: 9px;
    text-align: center;
    font-size: 19.2px;
    line-height: 38px;
    font-weight: 700;
    color: #212228;
    z-index: 2;
}

.cl-day-cap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 252px;
    width: 220px;
    text-align: center;
    font-size: 28.8px;
    line-height: 33px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}


/* ==========================================================================
   Попапы календаря: «ЕЖЕДНЕВНЫЕ НАГРАДЫ» (1075×886) и «ВЫ НЕ ЗАБРАЛИ ПРИЗЫ»
   (800×800). Общий тёмный фон с волнами.
   ========================================================================== */

.dr-panel, .ms-panel {
    position: absolute;
    inset: 0;
    /* По макету (king_design/calendar/ЕЖЕДНЕВНЫЕ НАГРАДЫ.png) подложка тёплая:
       к правому верхнему углу уходит в коричнево-золотой, а не остаётся
       холодной #1C1D22, как было. Волны те же, но поверх тёплой заливки. */
    background:
        radial-gradient(85% 70% at 100% 0%, rgba(255, 188, 55, 0.30) 0%, rgba(255, 188, 55, 0.10) 45%, rgba(255, 188, 55, 0) 78%),
        radial-gradient(60% 55% at 100% 100%, rgba(255, 170, 40, 0.18) 0%, rgba(255, 170, 40, 0) 65%),
        url(assets/bg-waves-800.png?v=20260903v) center / cover no-repeat,
        linear-gradient(118deg, #1B1C21 0%, #24211E 55%, #2F2721 100%);
    border-radius: 17px;
    overflow: hidden;
    font-family: var(--kui-font);
}

.dr-deco { position: absolute; pointer-events: none; }

/* --- ежедневные награды --- */
.dr-title {
    position: absolute;
    left: 40px;
    top: 44px;
    font-size: 55px;
    line-height: 64px;
    font-weight: 700;
    color: #FFBC37;
    z-index: 1;
}

.dr-close, .ms-close {
    position: absolute;
    left: 907px;
    top: 46px;
    width: 124px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

.dr-close:active { transform: scale(0.95); }

.dr-close-circ {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #DDE3FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* финальная награда */
.dr-card {
    position: absolute;
    left: 40px;
    top: 135px;
    width: 750px;
    height: 235px;
    background: rgba(33, 34, 40, 0.6);
    box-shadow: inset 0 0 0 4px #FFBC37;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

.dr-card-tab {
    position: absolute;
    left: 43px;
    top: 43px;
    width: 420px;
    height: 72px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 14px;
    text-align: center;
    font-size: 43.5px;
    line-height: 72px;
    font-weight: 700;
    color: #212228;
}

.dr-card-name {
    position: absolute;
    left: 79px;
    top: 133px;
    font-size: 37px;
    line-height: 43px;
    font-weight: 500;
    color: #fff;
}

.dr-h2 {
    position: absolute;
    left: 40px;
    top: 410px;
    font-size: 55px;
    line-height: 64px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
}

.dr-sub {
    position: absolute;
    left: 40px;
    top: 470px;
    font-size: 22.7px;
    line-height: 26px;
    font-weight: 500;
    color: #BCBCBC;
    z-index: 1;
}

.dr-tiles {
    position: absolute;
    left: 40px;
    top: 511px;
    display: flex;
    gap: 15px;
    z-index: 1;
}

.dr-tile {
    position: relative;
    width: 198.6px;
    height: 198.6px;
    background: rgba(33, 34, 40, 0.5);
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 31px;
    flex: 0 0 auto;
}

.dr-tile-art {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    /* Живой 3D-снапшот модели даёт много прозрачных полей вокруг предмета -
       при том же проценте от плитки, что и у плоских иконок (62%), снапшот
       выглядит заметно мельче. Плитка одна на оба случая, поэтому просто
       поднимаем общий процент. */
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.dr-tile-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 147px;
    text-align: center;
    font-size: 25.2px;
    line-height: 29px;
    font-weight: 500;
    color: #fff;
}

.dr-go {
    position: absolute;
    left: 40px;
    top: 735px;
    width: 284px;
    height: 95px;
    border: none;
    border-radius: 14.75px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: #212228;
    font-family: var(--kui-font);
    font-size: 44.1px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
}

.dr-go:active { transform: scale(0.98); }

/* чекбокс «больше не показывать» */
.dr-chk {
    position: absolute;
    left: 357px;
    top: 740px;
    width: 86px;
    height: 86px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-chk svg { opacity: 0; transition: opacity 0.15s; }
.dr-chk-on svg { opacity: 1; }

.dr-chk-label {
    position: absolute;
    left: 463px;
    top: 740px;
    width: 230px;
    font-size: 39.7px;
    line-height: 43px;
    font-weight: 500;
    color: #fff;
    z-index: 1;
}

/* --- не забрали призы --- */
.ms-t1 {
    /* Figma «не забрали призы 5» (5979:409): вся композиция по центру */
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 155px;
    font-size: 60.3px;
    line-height: 70px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
}

.ms-t2 {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 210px;
    font-size: 103px;
    line-height: 119px;
    font-weight: 700;
    color: #FFBC37;
    z-index: 1;
}

.ms-text {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 345px;
    font-size: 32.2px;
    line-height: 37px;
    font-weight: 500;
    color: #fff;
    z-index: 1;
}

.ms-gold { color: #FFBC37; }

.ms-price {
    position: absolute;
    left: 0;
    width: 100%;
    top: 425px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 82.5px;
    line-height: 96px;
    font-weight: 700;
    color: #FFBC37;
    z-index: 1;
}

.ms-coin { width: 67.5px; height: 67.5px; }

.ms-buy {
    position: absolute;
    left: 112px;
    top: 550px;
    width: 284px;
    height: 95px;
    border: none;
    border-radius: 14.75px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    color: #212228;
    font-family: var(--kui-font);
    font-size: 44.1px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
}

.ms-cancel {
    position: absolute;
    left: 416px;
    top: 550px;
    width: 284px;
    height: 95px;
    border: none;
    border-radius: 14.75px;
    background: rgba(33, 34, 40, 0.5);
    box-shadow: inset 0 0 0 4px var(--kui-line);
    color: #fff;
    font-family: var(--kui-font);
    font-size: 44.1px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
}

.ms-buy:active, .ms-cancel:active { transform: scale(0.98); }


/* ==========================================================================
   Основной календарь «ЕЖЕДНЕВНЫЕ НАГРАДЫ» (1920×1080, сетка 6×N со скроллом)
   ========================================================================== */

.dc-panel {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(33, 34, 40, 0) 53%, #111215 100%),
        url(assets/bg-stripes.png?v=20260903v) 0 0 / 100% 100% no-repeat,
        #202126;
    overflow: hidden;
    font-family: var(--kui-font);
}

.dc-deco { position: absolute; pointer-events: none; object-fit: contain; }
/* вырезка макета с запечённым золотым свечением: края растушёваны альфой,
   смешивание не нужно - с lighten искра за ней просвечивала сквозь плашку */
.dc-deco-baked { mix-blend-mode: normal; }

/* финальная награда dcal: контейнер на месте прежней вырезки 1408,390 512×550 */
/* Габариты по макету: блок прижат к правому нижнему углу, ножка кубка
   уходит под него. Увеличивать его нельзя - он тут же наезжает на сетку. */
.dc-final { position: absolute; left: 1408px; top: 390px; width: 512px; height: 550px; }
.dc-final-glow {
    position: absolute; left: -160px; top: -120px; width: 840px; height: 800px;
    background: radial-gradient(closest-side, rgba(255, 188, 55, 0.42) 0%, rgba(255, 188, 55, 0.18) 45%, rgba(255, 188, 55, 0) 100%);
    pointer-events: none;
}
.dc-final-car { position: absolute; object-fit: contain; pointer-events: none; }
.dc-final-inner {
    position: absolute; left: 66px; top: 150px; width: 379px; height: 300px;
    background: linear-gradient(180deg, #17181c 0%, #202126 70%, rgba(255, 188, 55, 0.25) 100%);
    border-radius: 10px;
}
/* Имя приза ложится на жёлтый подиум, белым по жёлтому не читалось - под
   строкой мягкая тёмная подложка. */
.dc-final-name {
    position: absolute; left: 45px; top: 386px; width: 421px; text-align: center;
    padding: 5px 0; border-radius: 9px;
    background: linear-gradient(180deg, rgba(23, 24, 28, 0) 0%, rgba(23, 24, 28, 0.88) 22%,
                rgba(23, 24, 28, 0.88) 78%, rgba(23, 24, 28, 0) 100%);
    font-size: 36px; line-height: 42px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-final-tab {
    position: absolute; left: 45px; top: 455px; width: 421px; height: 66px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 14px; text-align: center; font-size: 34px; line-height: 66px; font-weight: 700; color: #212228;
}
.dc-gold { color: #FFBC37; }

.dc-timer {
    position: absolute;
    left: 120px;
    top: 46px;
    width: 810px;
    height: 98px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    z-index: 2;
}

.dc-timer-ico {
    position: absolute;
    left: 0;
    top: 0;
    width: 98px;
    height: 98px;
    background: linear-gradient(90deg, var(--kui-gold-a) 0%, var(--kui-gold-b) 100%);
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-timer-ico img { width: 62px; height: 62px; object-fit: contain; }

.dc-timer-text {
    position: absolute;
    left: 117px;
    top: 24px;
    /* ширина ограничена телом плашки: длинная строка раньше вылезала
       за её правый край и выглядела съехавшей */
    right: 30px;
    font-size: 44.1px;
    line-height: 51px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-close {
    position: absolute;
    /* к правому краю, а не по left: 1920 - 1750 - 124 = 46 */
    right: 46px;
    top: 46px;
    width: 124px;
    height: 124px;
    background: #212228;
    box-shadow: inset 0 0 0 4px var(--kui-line);
    border-radius: 17px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.dc-close:active { transform: scale(0.95); }

.dc-close-circ {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #DDE3FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-title {
    position: absolute;
    left: 116px;
    top: 182px;
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
    color: #FFBC37;
    z-index: 1;
}

.dc-sub {
    position: absolute;
    left: 118px;
    top: 268px;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    color: #BCBCBC;
    z-index: 1;
}

/* сетка дней */
.dc-scroll {
    position: absolute;
    left: 121px;
    top: 336px;
    width: 1290px;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
}

.dc-scroll::-webkit-scrollbar { display: none; }

.dc-grid { position: relative; }   /* отступ сверху задаётся в ui-dcal.js: padding на абсолютных детях не работает */

.dc-day {
    position: absolute;
    width: 196px;
    height: 186px;
    background: rgba(33, 34, 40, 0.6);
    box-shadow: inset 0 0 0 3px var(--kui-line);
    border-radius: 20px;
}

.dc-active {
    box-shadow: inset 0 0 0 4px #FFBC37;
    cursor: pointer;
}

.dc-active:active { transform: scale(0.98); }
.dc-done { opacity: 0.45; }

/* красный бейдж отыгрыша над активным днём */
/* По макету плашка сидит НАД карточкой, слева, чуть заходя за её край -
   рядом с ярлыком "ДЕНЬ N", а не по центру и не внутри. */
.dc-day-badge {
    position: absolute;
    left: 6px;
    top: -44px;
    padding: 4px 14px;
    background: var(--kui-red);
    border-radius: 9px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    z-index: 3;
}

.dc-day-tab {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -14px;
    width: 96px;
    height: 28px;
    background: #FFBC37;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    color: #212228;
    z-index: 1;
}

.dc-active .dc-day-tab {
    background: linear-gradient(90deg, var(--kui-gold-a), var(--kui-gold-b));
}

.dc-day-art {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 52%;
    height: 52%;
    object-fit: contain;
}

/* Две строки вместо одной обрезанной: «VIP SAPPHIRE 2 ДНЯ», «АКС. ДЕРЕВ. ПОСОХ»
   и «СКИН РИКАРДО МИЛОС» в одну строку не влезают и кончались многоточием. */
.dc-day-cap {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 10px;
    text-align: center;
    font-size: 24px;
    line-height: 26px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}


/* края декор-кропов растворяются в фон — волны кропа не совпадают с CSS-фоном */
.dr-fade {
    -webkit-mask-image: linear-gradient(135deg, transparent 0, #000 56px);
    mask-image: linear-gradient(135deg, transparent 0, #000 56px);
}

/* золотой луч за девушкой в календаре новичка (в экспорт фона не вошёл) */
.cl-beam {
    position: absolute;
    /* Луч подсвечивает арт справа (.cl-photo, right: 0), поэтому привязан
       к правому краю, а не к левому: 1920 - 900 - 1500 = -480. */
    right: -480px;
    top: -260px;
    width: 1500px;
    height: 560px;
    background: rgba(255, 188, 55, 0.55);
    filter: blur(160px);
    transform: rotate(-36deg);
    pointer-events: none;
}

/* галочка на забранном дне календаря новичка */
.cl-day-check {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* галочка на забранном дне основного календаря */
.dc-done .dc-day-check {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}

/* --- телефон (класс dc-m): сетка 6 в ряд тянется на ширину холста, карточка
   масштабируется целиком в ui-dcal.js (transform: scale(k)) --- */
/* бейдж времени - по центру над плашкой «ДЕНЬ N», одной с ней ширины */
.dc-m .dc-day-badge {
    left: 50%;
    transform: translateX(-50%);
    top: -46px;
    width: 110px;
    padding: 0;
    text-align: center;
    font-size: 19px;
    line-height: 34px;
    border-radius: 8px 8px 0 0;
}
.dc-m .dc-final-name { font-size: 40px; line-height: 46px; }
.dc-m .dc-final-tab { font-size: 36px; }

/* подсказка «листай вниз» у сетки дней */
.dc-hint {
    position: absolute;
    left: 121px;
    width: 1290px;
    bottom: 0;
    height: 110px;
    background: linear-gradient(180deg, rgba(17, 18, 21, 0) 0%, rgba(17, 18, 21, 0.92) 78%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    transition: opacity 0.35s;
}

.dc-hint-off { opacity: 0; }

.dc-hint svg {
    animation: dcBounce 1.4s ease-in-out infinite;
}

@keyframes dcBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}