/* ==========================================================================
   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;
}

/* Тач-зона. Холст масштабируется целиком, поэтому на телефоне кнопка 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)));
}

/* ---------------- панель ---------------- */
/* Рамки заданы через 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;
}

.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: 8px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.nb-tile-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 12px;
    font-size: 12.07px;
    line-height: 14px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------- кнопка ---------------- */
.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: 12px;
    color: var(--kui-bg);
}

.sp-calc-in {
    position: absolute;
    left: 220px;
    top: 0;
    width: 189px;
    height: 85px;
}

/* красный язычок «БОНУС» над золотым блоком: в макете 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;
}

/* строка доп-бонуса */
.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%;
}

.sp-tile-cap {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 34px;
    font-size: 26.1px;
    line-height: 30px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    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;
    top: 1089px;
    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: 14px;
    top: 52%;
    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;
}

.kc-coin { position: absolute; left: 1310px; top: 78px; width: 88px; height: 88px; }

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

.kc-plus {
    position: absolute;
    left: 1725px;
    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;
    right: 33px;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 416px);
    grid-auto-rows: 495px;
    column-gap: 38px;
    overflow-y: auto;
    scrollbar-width: none;
}

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

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

.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 {
    /* тело кейса внутри экспорта кейс.png занимает 43% квадрата (остальное —
       поля под свечение). Чтобы тело было 373.6px с посадкой (21,96) как в
       макете, img растягивается до 876px со смещением (-258,-140). */
    position: absolute;
    left: -258px;
    top: -140px;
    width: 876px;
    height: 876px;
}

.kc-case-name {
    position: absolute;
    left: 0;
    top: 35px;
    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-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%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 54%;
    height: 44%;
    object-fit: contain;
    z-index: 1;
}

.kc-card-cap {
    position: absolute;
    left: 11%;
    right: 11%;
    top: 66%;
    text-align: center;
    font-size: 15.8px;
    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;
    word-break: break-word;
}

/* размеры карточек */
.kc-card-sm { width: 138.3px; height: 138.3px; flex: 0 0 auto; }
.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; }

/* --- содержимое кейса (левая панель) --- */
.kc-left {
    position: absolute;
    left: 71px;
    top: 235px;
    width: 516px;
    height: 495px;
    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: 30px;
    top: 32px;
    right: 14px;
    bottom: 12px;
    display: grid;
    grid-template-columns: repeat(3, 138.3px);
    grid-auto-rows: 138.3px;
    gap: 7.5px;
    justify-content: start;
    align-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

/* --- центр --- */
.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;
    top: 46px;
    bottom: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 20px;
    align-content: center;
}

/* 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: 796px;
    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-winover {
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 26, 0.94);
    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: 678px;
    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: 61%; height: 50%; top: 44%; }
.kc-card-big .kc-card-cap {
    top: 68%;
    font-size: 56px;
    line-height: 0.98;
    font-weight: 700;
}

/* средние карточки мультивыигрыша — те же пропорции */
.kc-card-med .kc-card-art { width: 58%; height: 46%; top: 43%; }
.kc-card-med .kc-card-cap { top: 66%; font-size: 23px; font-weight: 700; }

.kc-win-grid {
    position: absolute;
    left: 160px;
    right: 160px;
    top: 230px;
    bottom: 300px;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    justify-content: center;
    align-content: center;
}


.kc-take {
    position: absolute;
    left: 782px;
    top: 822px;
    width: 356px;
    height: 81px;
    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: 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;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #9d9d9d 0%, #ffffff 55%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* красная плашка: виден верх над кнопкой, низ уходит под неё */
.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;
    box-shadow: inset 0 0 0 4.9px var(--kui-line);
    border-radius: 20.8px;
    overflow: hidden;
    flex: 0 0 auto;
}

/* красная звезда в верхнем левом углу, большая часть обрезана плиткой */
.pr-star {
    position: absolute;
    left: -52.3px;
    top: -52.3px;
    width: 134.5px;
    height: 134.5px;
    background: var(--kui-red);
    clip-path: polygon(50% 0%, 59% 35%, 93% 25%, 68% 50%, 98% 68%, 62% 66%,
        66% 100%, 45% 70%, 20% 95%, 32% 60%, 2% 55%, 36% 42%, 15% 12%, 45% 30%);
}

.pr-x {
    position: absolute;
    left: 10px;
    top: 9px;
    font-size: 17.4px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    z-index: 1;
}

.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;
}

/* закрыть */
.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;
    /* тёмная зебра из макета: диагональные полосы двух тонов + затемнение к низу */
    background:
        linear-gradient(180deg, rgba(33, 34, 40, 0) 0%, #111215 81%),
        repeating-linear-gradient(115deg, #1D1E23 0 110px, #17181C 110px 220px),
        #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: 1750px;
    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: 1px;
    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%);
    width: 62%;
    height: 62%;
    object-fit: contain;
}

/* активный день: золотая карточка «ЗАБРАТЬ НАГРАДУ» */
.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: 20px;
    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;
    right: -80px;
    bottom: -80px;
    width: 163px;
    height: 163px;
    background: var(--kui-red);
    transform: rotate(45deg);
}

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

.cl-day-tab {
    position: absolute;
    left: 56px;
    top: -19px;
    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;
    background:
        radial-gradient(90% 60% at 110% 10%, rgba(255, 188, 55, 0.16) 0%, rgba(255, 188, 55, 0) 60%),
        repeating-radial-gradient(140% 110% at -20% 120%,
            rgba(255, 255, 255, 0.035) 0 3px, rgba(255, 255, 255, 0) 3px 90px),
        #1C1D22;
    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%);
    width: 62%;
    height: 62%;
    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 {
    position: absolute;
    left: 112px;
    top: 155px;
    font-size: 60.3px;
    line-height: 70px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
}

.ms-t2 {
    position: absolute;
    left: 112px;
    top: 210px;
    font-size: 103px;
    line-height: 119px;
    font-weight: 700;
    color: #FFBC37;
    z-index: 1;
}

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

.ms-gold { color: #FFBC37; }

.ms-price {
    position: absolute;
    left: 112px;
    top: 425px;
    display: flex;
    align-items: 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%),
        repeating-linear-gradient(115deg, #1D1E23 0 110px, #17181C 110px 220px),
        #202126;
    overflow: hidden;
    font-family: var(--kui-font);
}

.dc-deco { position: absolute; pointer-events: none; object-fit: contain; }
.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;
    font-size: 44.1px;
    line-height: 51px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.dc-close {
    position: absolute;
    left: 1750px;
    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; padding-top: 46px; }

.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; }

/* красный бейдж отыгрыша над активным днём */
.dc-day-badge {
    position: absolute;
    left: 45px;
    top: -42px;
    padding: 3px 12px;
    background: var(--kui-red);
    border-radius: 8px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.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;
}

.dc-day-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 14px;
    text-align: center;
    font-size: 25px;
    line-height: 29px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}


/* края декор-кропов растворяются в фон — волны кропа не совпадают с 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;
    left: 900px;
    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-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); }
}