/* ===================================================================
   DARK HAVEN — публичная витрина кейсов (T01, 2026-09-27)
   Нативный терминальный стиль магазина: те же CSS-переменные, что у
   каталога (style.css). Никакой клиентской математики шансов — все
   значения отрисованы сервером.
   =================================================================== */

/* --- полоса кошелька / входа ------------------------------------- */
.cp-wallet-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
}
.cp-wallet-balance {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* --- вывод DH: заявка покупателя, ручная обработка админом -------- */
.cp-withdraw {
    border: 1px solid var(--border-dim);
    border-top: 3px solid var(--accent, #35e08d);
    background:
        radial-gradient(circle at 12% 0%, rgba(53, 224, 141, .10), transparent 34%),
        var(--bg-primary);
    padding: 18px;
    scroll-margin-top: 150px;
}
.cp-withdraw-head {
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}
.cp-kicker {
    margin: 0 0 4px;
    font-size: .72rem;
    letter-spacing: .16em;
}
.cp-withdraw-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.cp-withdraw-rate {
    margin: 5px 0 0;
    color: var(--accent, #35e08d);
    font-size: .88rem;
    font-weight: 800;
}
.cp-withdraw-note {
    margin: 0;
    line-height: 1.55;
    font-size: .86rem;
}
.cp-withdraw-form {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(140px, .8fr) 1fr 1.4fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.cp-withdraw-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cp-withdraw-form span {
    color: var(--text-dim);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cp-withdraw-form input,
.cp-withdraw-form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255,255,255,.03));
    color: var(--text-primary);
    padding: 8px 10px;
    outline: none;
}
.cp-withdraw-form input:focus,
.cp-withdraw-form select:focus {
    border-color: var(--accent, #35e08d);
    box-shadow: 0 0 0 1px rgba(53, 224, 141, .24);
}
.cp-withdraw-submit {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
.cp-withdraw-crypto-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr) minmax(240px, 1fr);
    gap: 10px;
    align-items: end;
}
.cp-withdraw-crypto-fields[hidden] { display: none; }
@media (max-width: 1100px) {
    .cp-withdraw-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cp-withdraw-submit {
        grid-column: 1 / -1;
    }
}

.cp-withdraw-form .cp-withdraw-bank-field[hidden] { display: none; }
.cp-withdraw-crypto-quote,
.cp-withdraw-crypto-disclosure {
    margin: 0;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}
.cp-withdraw-crypto-quote { color: var(--text-primary); }
.cp-withdraw-crypto-load {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    line-height: 1.5;
}
.cp-withdraw-crypto-load[hidden] { display: none; }
.cp-withdraw-crypto-load.is-error { color: #ff6b7a; }
.cp-withdraw-crypto-load .btn-terminal {
    min-height: 36px;
    padding: 6px 10px;
    font-size: .72rem;
}
.cp-withdraw-crypto-load .btn-terminal[hidden] { display: none; }
.cp-case-available-balance {
    flex: 1 0 100%;
    margin: 0 0 2px;
    font-size: .82rem;
}
.cp-case-available-balance strong { color: var(--cp-preview-ink, var(--cp-ivory)); }
.cp-withdraw-status {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255,255,255,.03));
}
.cp-withdraw-status.is-ok {
    color: var(--accent, #35e08d);
}
.cp-withdraw-status.is-error {
    color: #ff6b7a;
    border-color: rgba(255, 107, 122, .5);
}
.cp-withdraw-history {
    margin-top: 16px;
}
.cp-withdraw-history h3 {
    margin: 0 0 10px;
    font-size: .9rem;
}
.cp-withdraw-rows {
    display: grid;
    gap: 8px;
}
.cp-withdraw-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-dim);
    background: rgba(255,255,255,.025);
}
.cp-withdraw-row strong {
    color: var(--text-primary);
}
.cp-withdraw-row span {
    color: var(--text-dim);
    font-size: .8rem;
}
.cp-withdraw-row .cp-withdraw-row-status {
    color: var(--accent, #35e08d);
    font-weight: 700;
    text-align: right;
}

.cp-wallet-reserved {
    font-size: .82rem;
}
.cp-withdraw-cancel {
    display: inline-flex;
    margin-top: 6px;
    padding: 5px 8px;
    font-size: .68rem;
    color: #ffb86b;
    border-color: rgba(255, 184, 107, .55);
}
.cp-withdraw-cancel:disabled {
    opacity: .55;
    cursor: wait;
}

/* «Мои выигрыши» в шапке (жалоба 789): акцентная кайма — кнопка читается
   без скролла с первого экрана; на мобиле остаётся иконка-кубок. */
.cp-winnings-nav {
    border: 1px solid var(--accent, #35e08d);
    color: var(--accent, #35e08d);
    text-decoration: none;
    flex-shrink: 0;
}
.cp-winnings-nav:hover {
    background: rgba(53, 224, 141, 0.12);
}

/* Кнопка связи с поддержкой: возвращена в старые места (раздел
   выигрышей + попап товарного приза), но ведёт на @ezkl_sup2, не на
   публичный канал из SiteSettings.contact_telegram. */
.cp-manager-btn {
    display: inline-block;
}

/* --- блок кейса: карточка + манифест «что внутри» ------------------ */
.case-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border-dim);
    background: var(--bg-primary);
}

.cp-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cp-case-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cp-case-meta {
    font-size: 0.85rem;
    white-space: nowrap;
}
.cp-case-rtp {
    display: block;
    margin-top: 4px;
    color: var(--cp-preview-ink, inherit);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* превью содержимого: плитки фото призов */
.cp-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cp-preview img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
}

.cp-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-price {
    font-size: 1.4rem;
    font-weight: 700;
}
.cp-price-rub {
    font-size: 0.95rem;
}
.cp-price-note {
    font-size: 0.8rem;
}
.cp-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- СБП-оплата спина (T03, 2026-09-29) ----------------------------
   Кнопка ₽ — стиль витрины (btn-terminal); живой pending → «Перейти к
   оплате»; активный грант → главная «Открыть (оплачено)» + DH-вариант
   рядом (компактный .is-alt), карточка подсвечена до прокрута. */
.cp-open-btn.is-alt {
    padding: 8px 14px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
.cp-sbp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-sbp-flash {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 12px 16px;
    border: 1px solid var(--border-dim);
    border-left: 3px solid var(--accent, #35e08d);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
}
.case-block.is-sbp-paid {
    border-color: var(--accent, #35e08d);
    box-shadow: 0 0 0 1px var(--accent, #35e08d);
}

/* --- манифест призов («что внутри»: цена + бейдж редкости) ---------- */
.cp-manifest-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.cp-manifest-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-dim);
}
.cp-manifest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 480px;
}
.cp-manifest-table th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dim);
    white-space: nowrap;
}
.cp-manifest-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-dim);
    vertical-align: middle;
}
.cp-manifest-table tbody tr:last-child td {
    border-bottom: none;
}
.cp-manifest-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.cp-col-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}
.cp-col-price {
    white-space: nowrap;
    color: var(--text-dim);
}
.cp-col-rarity {
    white-space: nowrap;
    text-align: right;
}
/* Бейдж редкости (директива оператора 29.09): вместо процента — тир;
   пороги считает сервер, палитра от зелёного (частый) к золоту
   (легендарный). */
.cp-rarity-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
}
.cp-rarity-badge[data-rarity="frequent"] {
    color: var(--accent, #35e08d);
    border-color: rgba(53, 224, 141, 0.5);
}
.cp-rarity-badge[data-rarity="rare"] {
    color: #5aa0ff;
    border-color: rgba(90, 160, 255, 0.55);
}
.cp-rarity-badge[data-rarity="epic"] {
    color: #c87fff;
    border-color: rgba(200, 120, 255, 0.6);
}
.cp-rarity-badge[data-rarity="legendary"] {
    color: #ffbe50;
    border-color: rgba(255, 190, 80, 0.65);
}
th.cp-col-rarity {
    text-align: right;
}
.cp-row-photo,
.cp-row-coin,
.cp-row-preorder {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid var(--border-dim);
    flex-shrink: 0;
}
.cp-row-coin,
.cp-row-preorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #d9ffe9;
    background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.38), transparent 34%),
        linear-gradient(145deg, rgba(38,72,48,.92), rgba(7,17,11,.95));
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.55), 0 0 18px -8px rgba(53,224,141,.38);
}
.cp-row-preorder {
    color: #fff4cc;
    border-color: rgba(196, 142, 255, .62);
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.35), transparent 35%),
        linear-gradient(145deg, rgba(86,52,136,.92), rgba(24,13,38,.96));
    box-shadow: 0 8px 18px -8px rgba(123,63,242,.75), 0 0 22px -10px rgba(255,190,80,.55);
}
.cp-manifest-foot {
    font-size: 0.75rem;
    margin: 8px 0 0;
}

/* --- пустая витрина -------------------------------------------------- */
.cp-empty {
    text-align: center;
    padding: 64px 16px;
    border: 1px dashed var(--border-dim);
}

/* --- «Мои выигрыши» (T03): история открытий покупателя ---------------- */
.cp-winnings {
    margin-top: 48px;
    border: 1px solid var(--border-dim);
    border-top: 3px solid var(--accent, #35e08d);
    padding: 20px;
    background: var(--bg-primary);
    scroll-margin-top: 160px;
}
.cp-winnings-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.cp-winnings-note {
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 0 14px;
}
.cp-winnings-flash {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-dim);
    border-left: 3px solid var(--accent, #35e08d);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
}
.cp-winnings-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-dim);
}
.cp-winnings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 640px;
}
.cp-winnings-table th {
    text-align: left;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dim);
    white-space: nowrap;
}
.cp-winnings-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dim);
    vertical-align: middle;
}
.cp-winnings-table tbody tr:last-child td {
    border-bottom: none;
}
.cp-winnings-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.cp-col-date {
    white-space: nowrap;
    color: var(--text-dim);
}
.cp-col-case {
    min-width: 140px;
}
.cp-col-prize {
    min-width: 220px;
}
.cp-prize-cell-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cp-col-status {
    min-width: 200px;
}
.cp-status-cell-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    min-width: 0;
}
.cp-w-status {
    display: inline-block;
    line-height: 1.45;
}
tr[data-status='credited_dh'] .cp-w-status,
tr[data-status='fulfilled'] .cp-w-status {
    color: var(--accent, #35e08d);
    font-weight: 700;
}
tr[data-status='requested'] .cp-w-status {
    color: var(--text-primary);
    font-weight: 700;
}
tr[data-status='refunded_opening'] .cp-w-status,
tr[data-status='claim_refunded'] .cp-w-status {
    color: var(--text-dim);
}
.cp-claim-form {
    display: inline-block;
    margin-top: 6px;
}
.cp-winnings-foot {
    font-size: 0.8125rem;
    margin: 8px 0 0;
}
/* «Показать ещё» (жалоба 825, T03 2026-09-30): по центру под таблицей —
   догрузка старых записей постранично (лимит 20 — размер страницы). */
.cp-winnings-more {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* ===================================================================
   Оверлей открытия кейса (T02): рил 64 плитки + результат от сервера
   =================================================================== */
.cp-spin-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.cp-spin-overlay.is-open {
    opacity: 1;
}
/* Скрытие по атрибуту hidden — из СОБСТВЕННОГО css страницы, а не из
   runtime-preflight Tailwind CDN (.cp-spin-overlay{display:flex} сильнее
   браузерного [hidden]{display:none}): пока Tailwind-компилятор не
   сгенерировал стили (медленный канал/webview, перегенерация при
   мутациях DOM), закрытый оверлей оставался невидимым слоем на весь
   экран и перехватывал все клики — второй прокрут без F5 был
   невозможен (жалобы 787/788, T02 2026-09-30). */
[hidden] {
    display: none !important;
}
.cp-spin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(3px);
}
.cp-spin-stage {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid var(--border-color, var(--border-dim));
    background: var(--bg-primary);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-spin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cp-spin-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.cp-spin-close {
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-dim);
    width: 34px;
    height: 34px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.cp-spin-close:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}
.cp-spin-case {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin: 0;
}

/* --- рил ------------------------------------------------------------ */
.cp-reel-viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
    padding: 14px 0;
}
.cp-reel-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--accent, #35e08d);
    box-shadow: 0 0 10px var(--accent, #35e08d);
    z-index: 2;
    pointer-events: none;
}
.cp-reel-strip {
    display: flex;
    gap: 10px;
    will-change: transform;
    padding: 0 6px;
}
.cp-reel-tile {
    flex: 0 0 auto;
    width: 108px;
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-dim);
    background: var(--bg-primary);
    padding: 8px;
    text-align: center;
}
.cp-reel-tile.is-winner {
    border-color: var(--accent, #35e08d);
    box-shadow: 0 0 14px rgba(53, 224, 141, 0.25);
}
.cp-reel-tile img {
    max-width: 72px;
    max-height: 72px;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--border-dim);
}
.cp-tile-coin,
.cp-result-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--accent, #35e08d);
    color: var(--accent, #35e08d);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}
.cp-tile-name {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* витринный ранг ценности плитки (не вероятность) */
.cp-reel-tile[data-tier="rare"] {
    border-color: rgba(90, 160, 255, 0.55);
}
.cp-reel-tile[data-tier="legend"] {
    border-color: rgba(200, 120, 255, 0.6);
}
.cp-reel-tile[data-tier="excl"] {
    border-color: rgba(255, 190, 80, 0.65);
}

.cp-spin-phase {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    min-height: 1.2em;
    margin: 0;
}

/* --- сообщение/ошибка попытки ---------------------------------------- */
.cp-request-box {
    border: 1px dashed var(--border-dim);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cp-request-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}
.cp-request-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- карточка результата --------------------------------------------- */
.cp-result-card {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--accent, #35e08d);
    padding: 16px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.cp-result-card.is-reveal {
    opacity: 1;
    transform: none;
}
.cp-result-media {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-result-media img {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    border: 1px solid var(--border-dim);
}
.cp-result-coin {
    width: 72px;
    height: 72px;
    font-size: 1.3rem;
}
.cp-result-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cp-result-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.cp-result-tier {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
}
.cp-result-tier[data-tier="rare"] {
    color: #5aa0ff;
    border-color: rgba(90, 160, 255, 0.55);
}
.cp-result-tier[data-tier="legend"] {
    color: #c87fff;
    border-color: rgba(200, 120, 255, 0.6);
}
.cp-result-tier[data-tier="excl"] {
    color: #ffbe50;
    border-color: rgba(255, 190, 80, 0.65);
}
.cp-result-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}
.cp-result-kind {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
}
.cp-result-balance {
    font-size: 0.8rem;
    margin: 0;
}
.cp-result-replayed {
    font-size: 0.75rem;
    margin: 0;
}
.cp-result-actions {
    margin-top: 4px;
}
/* «КРУТИТЬ СНОВА» (жалоба 816, T03 2026-09-30): главное действие
   результата — акцентная кайма, как у «Мои выигрыши» в шапке. */
.cp-again-btn {
    border-color: var(--accent, #35e08d);
    color: var(--accent, #35e08d);
}
.cp-again-btn:hover {
    background: var(--accent, #35e08d);
    color: var(--bg-primary);
    box-shadow: none;
}

/* --- скорость анимации ------------------------------------------------ */
.cp-speed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-speed-group {
    display: inline-flex;
    border: 1px solid var(--border-dim);
}
.cp-speed-opt {
    padding: 5px 12px;
    font-size: 0.78rem;
    background: transparent;
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
}
.cp-speed-opt + .cp-speed-opt {
    border-left: 1px solid var(--border-dim);
}
.cp-speed-opt[aria-checked="true"] {
    color: var(--bg-primary);
    background: var(--text-primary);
}

body.cp-overlay-open {
    overflow: hidden;
}

/* --- лента «Последние дропы» (T04) ----------------------------------- */
.cp-drops {
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
    padding: 12px 16px;
}
.cp-drops-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
/* «живая» точка ленты: мягкий пульс, отключается reduced-motion */
.cp-drops-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #35e08d);
    animation: cp-drops-pulse 2.4s ease-in-out infinite;
}
@keyframes cp-drops-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.cp-drops-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.cp-drop-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-dim);
    background: var(--bg-primary);
    font-size: 0.85rem;
    white-space: nowrap;
}
.cp-drop-nick {
    letter-spacing: 0.03em;
}
.cp-drop-arrow {
    color: var(--accent, #35e08d);
    font-size: 0.78rem;
}
.cp-drop-photo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 1px solid var(--border-dim);
}
.cp-drop-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--accent, #35e08d);
    color: var(--accent, #35e08d);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.cp-drop-prize {
    font-weight: 600;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-drop-when {
    font-size: 0.78rem;
}

/* --- мобильный вид (390 px) ------------------------------------------ */
@media (max-width: 640px) {
    .case-block {
        padding: 14px;
        gap: 12px;
    }
    .cp-case-name {
        font-size: 1.05rem;
    }
    .cp-preview img {
        width: 56px;
        height: 56px;
    }
    .cp-price {
        font-size: 1.2rem;
    }
    /* манифест превращается в стопку строк: подпись колонки — из
       data-label (приз/цена/бейдж редкости — серверный текст) */
    .cp-manifest-scroll {
        overflow-x: visible;
    }
    .cp-manifest-table {
        min-width: 0;
    }
    .cp-manifest-table thead {
        display: none;
    }
    .cp-manifest-table tr {
        display: block;
        border-bottom: 1px solid var(--border-dim);
        padding: 8px 10px;
    }
    .cp-manifest-table tbody tr:last-child {
        border-bottom: none;
    }
    .cp-manifest-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border-bottom: none;
        padding: 4px 0;
    }
    .cp-manifest-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-dim);
        flex-shrink: 0;
    }
    .cp-manifest-table td.cp-col-name span {
        text-align: right;
    }
    .cp-wallet-bar {
        padding: 10px 12px;
        gap: 8px;
    }
    .cp-withdraw {
        padding: 14px;
        scroll-margin-top: 130px;
    }
    .cp-withdraw-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .cp-withdraw-form {
        grid-template-columns: 1fr;
    }
    .cp-withdraw-row {
        grid-template-columns: 1fr;
    }
    .cp-withdraw-row .cp-withdraw-row-status {
        text-align: left;
    }
    /* СБП-кнопки на 390 px не разъезжаются: главный ряд переносится,
       ₽/«Перейти к оплате» занимают строку целиком */
    .cp-cta-row {
        flex-wrap: wrap;
    }
    .cp-sbp-row {
        width: 100%;
    }
    .cp-sbp-btn,
    .cp-sbp-pay-link {
        flex: 1 1 100%;
        text-align: center;
    }
    /* «Мои выигрыши» на 390 px: таблица — стопка строк, статус с кнопкой
       переносится под подпись */
    .cp-winnings {
        margin-top: 32px;
        padding: 14px;
        scroll-margin-top: 130px;
    }
    .cp-winnings-scroll {
        overflow-x: visible;
    }
    .cp-winnings-table {
        min-width: 0;
    }
    .cp-winnings-table thead {
        display: none;
    }
    .cp-winnings-table tr {
        display: block;
        border-bottom: 1px solid var(--border-dim);
        padding: 8px 10px;
    }
    .cp-winnings-table tbody tr:last-child {
        border-bottom: none;
    }
    .cp-winnings-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border-bottom: none;
        padding: 4px 0;
    }
    .cp-winnings-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-dim);
        flex-shrink: 0;
    }
    .cp-winnings-table td.cp-col-prize {
        min-width: 0;
    }
    .cp-winnings-table td.cp-col-prize span {
        text-align: right;
    }
    .cp-winnings-table td.cp-col-status {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
    .cp-claim-form {
        margin-top: 0;
    }
    /* оверлей открытия на 390 px: плитки компактнее, результат — стопкой */
    .cp-spin-overlay {
        padding: 8px;
    }
    .cp-spin-stage {
        padding: 12px;
        gap: 10px;
    }
    .cp-reel-tile {
        width: 84px;
        height: 106px;
        gap: 6px;
    }
    .cp-reel-tile img {
        width: 56px;
        height: 56px;
    }
    .cp-tile-name {
        font-size: 0.64rem;
        -webkit-line-clamp: 2;
    }
    .cp-result-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }
    .cp-result-media {
        align-self: center;
    }
    .cp-result-name {
        font-size: 1rem;
    }
    /* «КРУТИТЬ СНОВА» видна без скролла на 390 px (жалоба 816): кнопки
       результата переносятся строками с компактным ритмом — три кнопки
       не растягивают сцену по высоте */
    .cp-result-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .cp-result-actions .btn-terminal {
        padding: 8px 12px;
        font-size: 0.78rem;
        letter-spacing: 0.06em;
    }
    .cp-winnings-more .btn-terminal {
        width: 100%;
    }
    /* лента дропов на 390 px: свёртка в однострочную карусель со снапом */
    .cp-drops {
        padding: 10px 12px;
    }
    .cp-drops-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .cp-drop-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .cp-drop-prize {
        max-width: 170px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-drops-live {
        animation: none;
    }
}

/* ===================================================================
   2026-10-01 — PREMIUM SKIN TRANSFER FROM cases_concept
   Scope: only the production cases page body.cases-premium-skin.
   Logic/API/CSRF/SBP/winnings stay unchanged; this is a visual skin.
   Reference: ATELIER CONVEYOR / MANIFEST CONVEYOR concept.
   =================================================================== */
.cases-premium-skin {
    --cp-bg-page: #0c0b0f;
    --cp-bg-deep: #070609;
    --cp-bg-panel: rgba(23, 22, 28, 0.92);
    --cp-bg-panel-2: rgba(33, 31, 38, 0.92);
    --cp-ivory: #f5f1e8;
    --cp-ivory-soft: rgba(245, 241, 232, 0.78);
    --cp-muted: rgba(245, 241, 232, 0.55);
    --cp-gold: #c9a96a;
    --cp-gold-bright: #d9bc80;
    --cp-gold-line: rgba(201, 169, 106, 0.44);
    --cp-gold-soft: rgba(201, 169, 106, 0.14);
    --cp-red: #e5322d;
    --cp-purple: #7b3ff2;
    --cp-radius: 16px;
    background: var(--cp-bg-page) !important;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin.light-theme {
    background: var(--cp-bg-page) !important;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin #global-bg,
.cases-premium-skin .global-animated-bg {
    background:
        radial-gradient(circle at 18% 16%, rgba(201,169,106,.13), transparent 32%),
        radial-gradient(circle at 80% 8%, rgba(123,63,242,.10), transparent 26%),
        radial-gradient(circle at 50% 110%, rgba(229,50,45,.11), transparent 30%),
        linear-gradient(180deg, #111015 0%, #09080b 58%, #050406 100%) !important;
}
.cases-premium-skin main {
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(circle at 50% -8%, rgba(201,169,106,.12), transparent 32%);
    background-size: 100% 26px, auto;
}
.cases-premium-skin #utility-bar,
.cases-premium-skin nav.nav-blur {
    background: rgba(8, 7, 10, .92) !important;
    border-color: rgba(201,169,106,.24) !important;
    color: var(--cp-ivory) !important;
    backdrop-filter: blur(14px) saturate(1.05);
}
.cases-premium-skin #utility-bar {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.025);
}
.cases-premium-skin nav.nav-blur {
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
}
.cases-premium-skin #utility-bar button,
.cases-premium-skin #currency-switcher button,
.cases-premium-skin nav.nav-blur a,
.cases-premium-skin nav.nav-blur button,
.cases-premium-skin nav.nav-blur .terminal-text,
.cases-premium-skin nav.nav-blur .terminal-text-dim,
.cases-premium-skin #site-name-nav,
.cases-premium-skin #logo-letter {
    color: var(--cp-ivory) !important;
    text-shadow: 0 0 12px rgba(201,169,106,.16);
}
.cases-premium-skin nav.nav-blur .terminal-text-dim,
.cases-premium-skin #currency-switcher button.opacity-50 {
    color: rgba(245,241,232,.64) !important;
}
.cases-premium-skin nav.nav-blur a:hover,
.cases-premium-skin nav.nav-blur a[aria-current="page"],
.cases-premium-skin #nav-cases,
.cases-premium-skin #currency-switcher button.opacity-100,
.cases-premium-skin .cp-winnings-nav {
    color: var(--cp-gold-bright) !important;
}
.cases-premium-skin nav.nav-blur [style*="border"],
.cases-premium-skin nav.nav-blur .border,
.cases-premium-skin nav.nav-blur .border-b,
.cases-premium-skin #utility-bar .border-b-2 {
    border-color: rgba(201,169,106,.45) !important;
}
.cases-premium-skin .terminal-text,
.cases-premium-skin .terminal-text-dim,
.cases-premium-skin h1,
.cases-premium-skin h2,
.cases-premium-skin h3,
.cases-premium-skin p,
.cases-premium-skin td,
.cases-premium-skin th,
.cases-premium-skin span {
    color: inherit;
}
.cases-premium-skin .terminal-text-dim { color: var(--cp-muted) !important; }
.cases-premium-skin .btn-terminal {
    border-color: var(--cp-gold-line) !important;
    color: var(--cp-ivory) !important;
    background: rgba(12, 11, 15, .58) !important;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.cases-premium-skin .btn-terminal:hover,
.cases-premium-skin .btn-terminal:focus-visible {
    border-color: var(--cp-gold) !important;
    color: var(--cp-bg-deep) !important;
    background: var(--cp-gold) !important;
    box-shadow: 0 16px 42px rgba(201,169,106,.18);
}
.cases-premium-skin .cp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 58px);
    border: 1px solid var(--cp-gold-line);
    border-radius: 22px;
    background:
        linear-gradient(120deg, rgba(245,241,232,.08), transparent 40%),
        radial-gradient(circle at 84% 22%, rgba(201,169,106,.22), transparent 28%),
        radial-gradient(circle at 20% 90%, rgba(123,63,242,.15), transparent 32%),
        linear-gradient(180deg, rgba(28,26,32,.94), rgba(14,13,17,.96));
    box-shadow: 0 34px 110px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.cases-premium-skin .cp-hero::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(201,169,106,.11);
    border-radius: 18px;
    pointer-events: none;
}
.cases-premium-skin .cp-hero::after {
    content: '';
    position: absolute;
    right: -90px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,169,106,.20), transparent 62%);
    filter: blur(2px);
    pointer-events: none;
}
.cases-premium-skin .cp-hero > * { position: relative; z-index: 1; }
.cases-premium-skin .cp-hero-eyebrow {
    margin: 0 0 12px;
    color: var(--cp-gold) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .22em;
}
.cases-premium-skin #page-title-cases {
    font-family: 'VT323', 'Share Tech Mono', monospace;
    font-size: clamp(64px, 9vw, 128px);
    line-height: .82;
    letter-spacing: .025em;
    color: var(--cp-ivory) !important;
    text-shadow: 0 12px 36px rgba(0,0,0,.42);
}
.cases-premium-skin .cp-hero p:not(.cp-hero-eyebrow) {
    max-width: 760px;
    color: var(--cp-ivory-soft) !important;
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.75;
}
.cases-premium-skin .cp-hero-primary {
    background: var(--cp-gold) !important;
    color: var(--cp-bg-deep) !important;
    border-color: var(--cp-gold) !important;
}
.cases-premium-skin .cp-wallet-bar,
.cases-premium-skin .cp-sbp-flash,
.cases-premium-skin .cp-drops,
.cases-premium-skin .cp-winnings,
.cases-premium-skin .cp-empty {
    border-color: var(--cp-gold-line);
    background: var(--cp-bg-panel);
    border-radius: var(--cp-radius);
    box-shadow: 0 18px 70px rgba(0,0,0,.26);
}
.cases-premium-skin .cp-wallet-balance,
.cases-premium-skin .cp-price,
.cases-premium-skin .cp-drops-live,
.cases-premium-skin .cp-drop-arrow,
.cases-premium-skin .cp-winnings-title,
.cases-premium-skin .cp-manifest-title {
    color: var(--cp-gold-bright) !important;
}
.cases-premium-skin .cases-grid { align-items: start; }
.cases-premium-skin .case-block {
    position: relative;
    overflow: hidden;
    gap: 20px;
    padding: clamp(18px, 2vw, 30px);
    border: 1px solid var(--cp-gold-line);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(245,241,232,.055), transparent 36%),
        linear-gradient(180deg, var(--cp-bg-panel-2), var(--cp-bg-panel));
    box-shadow: 0 30px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.055);
}
.cases-premium-skin .case-block::before {
    content: 'MANIFEST';
    position: absolute;
    top: 16px;
    right: 18px;
    color: rgba(201,169,106,.12);
    font-size: 10px;
    letter-spacing: .42em;
    pointer-events: none;
}
.cases-premium-skin .case-block.is-sbp-paid {
    border-color: var(--cp-gold);
    box-shadow: 0 0 0 1px var(--cp-gold), 0 30px 90px rgba(0,0,0,.38);
}
.cases-premium-skin .cp-case-name {
    font-family: 'VT323', 'Share Tech Mono', monospace;
    font-size: clamp(32px, 3vw, 54px);
    line-height: .95;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin .cp-case-meta,
.cases-premium-skin .cp-price-note,
.cases-premium-skin .cp-price-rub,
.cases-premium-skin .cp-manifest-foot {
    color: var(--cp-muted) !important;
}
.cases-premium-skin .cp-preview {
    display: grid;
    grid-template-columns: repeat(5, minmax(54px, 84px));
    gap: 10px;
}
.cases-premium-skin .cp-preview img,
.cases-premium-skin .cp-row-photo,
.cases-premium-skin .cp-row-preorder,
.cases-premium-skin .cp-drop-photo {
    border-radius: 10px;
    border-color: rgba(245,241,232,.22);
    background: #f2eee3;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.cases-premium-skin .cp-preview img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    padding: 6px;
}
.cases-premium-skin .cp-price {
    color: var(--cp-gold-bright) !important;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: .02em;
}
.cases-premium-skin .cp-manifest-scroll,
.cases-premium-skin .cp-winnings-scroll {
    border-color: rgba(201,169,106,.22);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(7,6,9,.34);
}
.cases-premium-skin .cp-manifest-table th,
.cases-premium-skin .cp-winnings-table th {
    color: var(--cp-gold) !important;
    border-bottom-color: rgba(201,169,106,.24);
    background: rgba(201,169,106,.055);
}
.cases-premium-skin .cp-manifest-table td,
.cases-premium-skin .cp-winnings-table td,
.cases-premium-skin .cp-manifest-table tr,
.cases-premium-skin .cp-winnings-table tr {
    border-color: rgba(201,169,106,.16) !important;
}
.cases-premium-skin .cp-manifest-table tbody tr:hover,
.cases-premium-skin .cp-winnings-table tbody tr:hover,
.cases-premium-skin .cp-drop-chip {
    background: rgba(201,169,106,.055);
}
.cases-premium-skin .cp-rarity-badge,
.cases-premium-skin .cp-result-tier,
.cases-premium-skin .league-pill {
    border-radius: 999px;
    background: rgba(0,0,0,.22);
}
.cases-premium-skin .cp-rarity-badge[data-rarity="legendary"],
.cases-premium-skin .cp-result-tier[data-tier="legend"],
.cases-premium-skin .cp-result-tier[data-tier="excl"] {
    color: var(--cp-gold-bright) !important;
    border-color: var(--cp-gold-line);
}
.cases-premium-skin .cp-drop-chip {
    border-color: rgba(201,169,106,.22);
    border-radius: 999px;
}
.cases-premium-skin .cp-drop-coin,
.cases-premium-skin .cp-tile-coin,
.cases-premium-skin .cp-result-coin,
.cases-premium-skin .cp-row-coin {
    color: var(--cp-bg-deep) !important;
    border-color: var(--cp-gold);
    background:
        radial-gradient(circle at 32% 28%, #fff4c7 0 9%, transparent 10%),
        radial-gradient(circle at 50% 48%, var(--cp-gold-bright), var(--cp-gold) 58%, #8d6f35 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 12px 35px rgba(201,169,106,.28);
    text-shadow: none;
}
.cases-premium-skin .cp-row-preorder {
    color: #fff2c8 !important;
    border-color: rgba(176,140,255,.62) !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,244,199,.36), transparent 34%),
        linear-gradient(145deg, rgba(76,44,126,.94), rgba(17,10,28,.98)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 28px -12px rgba(123,63,242,.75), 0 0 24px -12px rgba(255,190,80,.62) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;
}
.cases-premium-skin .cp-spin-overlay { z-index: 120; transition: opacity .42s ease; }
.cases-premium-skin .cp-spin-backdrop {
    background: rgba(4, 3, 6, .88);
    backdrop-filter: blur(10px) saturate(1.05);
}
.cases-premium-skin .cp-spin-stage {
    width: min(1120px, calc(100vw - 24px));
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    gap: 14px;
}
.cases-premium-skin .cp-spin-head {
    align-items: center;
    padding: 0 4px;
}
.cases-premium-skin .cp-spin-head h3 {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--cp-ivory) !important;
    font-size: clamp(28px, 4vw, 46px);
    letter-spacing: .015em;
    text-transform: none;
}
.cases-premium-skin .cp-spin-close {
    width: auto;
    min-width: 132px;
    padding: 0 18px;
    border-radius: 12px;
    border-color: var(--cp-gold-line);
    color: var(--cp-ivory) !important;
    background: rgba(12,11,15,.72);
    font-size: 0;
}
.cases-premium-skin .cp-spin-close::before {
    content: attr(data-label);
    font-size: 12px;
    letter-spacing: .08em;
}
.cases-premium-skin .cp-spin-case {
    color: var(--cp-gold) !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding-left: 4px;
}
.cases-premium-skin .cp-reel-viewport {
    height: 226px;
    padding: 30px 0 42px;
    border-color: rgba(201,169,106,.20);
    border-radius: 18px;
    background:
        linear-gradient(to right, rgba(12,11,15,.98), transparent 16%, transparent 84%, rgba(12,11,15,.98)),
        linear-gradient(180deg, rgba(245,241,232,.045), rgba(7,6,9,.72));
    box-shadow: 0 24px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055);
}
.cases-premium-skin .cp-reel-viewport::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 14px;
    background-image:
        linear-gradient(90deg, transparent, rgba(201,169,106,.55), transparent),
        repeating-linear-gradient(90deg, rgba(201,169,106,.55) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(201,169,106,.28) 0 1px, transparent 1px 56px);
    background-size: 100% 1px, 100% 8px, 100% 14px;
    background-repeat: no-repeat, repeat-x, repeat-x;
    background-position: 0 13px, 0 0, 0 0;
    pointer-events: none;
}
.cases-premium-skin .cp-reel-strip { gap: 12px; padding: 0 16px; }
.cases-premium-skin .cp-reel-marker {
    width: 2px;
    top: 0;
    bottom: 22px;
    background: linear-gradient(180deg, var(--cp-gold), var(--cp-gold-bright), var(--cp-gold));
    box-shadow: 0 0 18px rgba(201,169,106,.48);
}
.cases-premium-skin .cp-reel-marker::before {
    content: attr(data-label);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cp-gold);
    color: var(--cp-bg-deep);
    font-size: 10px;
    letter-spacing: .08em;
    font-weight: 800;
}
.cases-premium-skin .cp-reel-tile {
    width: 136px;
    height: 164px;
    flex-basis: 136px;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 10px 10px;
    border-radius: 16px;
    border-color: rgba(245,241,232,.20);
    background: #f2eee3;
    color: #1b1712;
    box-shadow: 0 18px 45px rgba(0,0,0,.34);
}
.cases-premium-skin .cp-reel-tile.is-winner {
    border-color: var(--cp-gold);
    box-shadow: 0 0 0 2px rgba(201,169,106,.36), 0 24px 60px rgba(201,169,106,.22);
}
.cases-premium-skin .cp-reel-tile img {
    width: 92px;
    height: 92px;
    max-width: 92px;
    max-height: 92px;
    object-fit: contain;
    border: 0;
    background: transparent;
}
.cases-premium-skin .cp-tile-name {
    width: 100%;
    min-height: 2.4em;
    color: #1b1712 !important;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cases-premium-skin .cp-reel-tile::after {
    content: '';
    width: 78%;
    height: 7px;
    margin-top: auto;
    background-image: repeating-linear-gradient(90deg, #111 0 3px, transparent 3px 7px, #111 7px 9px, transparent 9px 13px, var(--cp-red) 13px 16px, transparent 16px 18px);
    opacity: .9;
}
.cases-premium-skin .cp-reel-tile[data-tier="legend"]::after,
.cases-premium-skin .cp-reel-tile[data-tier="excl"]::after {
    background-image: repeating-linear-gradient(90deg, var(--cp-gold) 0 3px, transparent 3px 7px, #111 7px 9px, transparent 9px 13px, var(--cp-gold) 13px 16px, transparent 16px 18px);
}
.cases-premium-skin .cp-spin-phase {
    min-height: 1.4em;
    color: var(--cp-gold-bright) !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
}
.cases-premium-skin .cp-result-card {
    width: min(520px, 100%);
    align-self: center;
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 24px;
    border-color: var(--cp-gold-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(201,169,106,.12), transparent 48%),
        var(--cp-bg-panel-2);
    box-shadow: 0 28px 100px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.055);
}
.cases-premium-skin .cp-result-card.is-reveal {
    transform: translateY(0) scale(1);
    animation: cp-premium-result-pop .42s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cp-premium-result-pop {
    0% { opacity: 0; transform: translateY(10px) scale(.97); }
    72% { opacity: 1; transform: translateY(0) scale(1.025); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cases-premium-skin .cp-result-media {
    width: 176px;
    height: 176px;
    align-self: center;
    border-radius: 18px;
    background: #f2eee3;
    border: 1px solid var(--cp-gold);
    box-shadow: 0 0 0 4px rgba(201,169,106,.12);
}
.cases-premium-skin .cp-result-media img {
    max-width: 154px;
    max-height: 154px;
    border: 0;
    object-fit: contain;
}
.cases-premium-skin .cp-result-coin {
    width: 132px;
    height: 132px;
    font-size: 2rem;
}
.cases-premium-skin .cp-result-body { align-items: center; }
.cases-premium-skin .cp-result-kicker,
.cases-premium-skin .cp-result-price-note { color: var(--cp-gold) !important; }
.cases-premium-skin .cp-result-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--cp-ivory) !important;
}
.cases-premium-skin .cp-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.cases-premium-skin .cp-request-box,
.cases-premium-skin .cp-speed-group {
    border-color: var(--cp-gold-line);
    background: rgba(12,11,15,.70);
    border-radius: 12px;
}
.cases-premium-skin .cp-speed-opt[aria-checked="true"] {
    background: var(--cp-gold);
    color: var(--cp-bg-deep) !important;
}
@media (max-width: 640px) {
    .cases-premium-skin .cp-hero { padding: 22px 18px; border-radius: 18px; }
    .cases-premium-skin #page-title-cases { font-size: clamp(56px, 17vw, 76px); }
    .cases-premium-skin .case-block { padding: 16px; border-radius: 18px; }
    .cases-premium-skin .cp-preview { grid-template-columns: repeat(4, minmax(48px, 1fr)); }
    .cases-premium-skin .cp-preview img { width: 100%; height: 70px; }
    .cases-premium-skin .cp-reel-viewport { height: 172px; padding: 20px 0 36px; }
    .cases-premium-skin .cp-reel-tile { width: 100px; height: 124px; flex-basis: 100px; border-radius: 12px; }
    .cases-premium-skin .cp-reel-tile img { width: 68px; height: 68px; max-width: 68px; max-height: 68px; }
    .cases-premium-skin .cp-tile-name { font-size: 8px; }
    .cases-premium-skin .cp-spin-close { min-width: 98px; height: 36px; padding: 0 10px; }
    .cases-premium-skin .cp-spin-close::before { content: attr(data-label); font-size: 10px; }
    .cases-premium-skin .cp-result-card { padding: 16px; }
    .cases-premium-skin .cp-result-media { width: 140px; height: 140px; }
    .cases-premium-skin .cp-result-media img { max-width: 122px; max-height: 122px; }
}
@media (prefers-reduced-motion: reduce) {
    .cases-premium-skin .cp-result-card.is-reveal,
    .cases-premium-skin .cp-drops-live { animation: none !important; }
}

/* ===================================================================
   2026-10-01 — PHOSPHOR VAULT PRODUCTION SKIN
   Source assets: /work/glm/tasks/ezkl_cases_motion_catalog_20260922
   Generated via /work/chatgpt_integration; copied into cases_public/img.
   This is the final visual layer for public /cases/: same backend/API.
   =================================================================== */
.cases-premium-skin {
    --cp-bg-page: #060a08;
    --cp-bg-deep: #040806;
    --cp-bg-panel: rgba(8, 15, 11, 0.78);
    --cp-bg-panel-2: rgba(12, 22, 16, 0.90);
    --cp-ivory: #edf3ec;
    --cp-ivory-soft: rgba(237, 243, 236, 0.80);
    --cp-muted: rgba(199, 211, 197, 0.62);
    --cp-gold: #35e08d;
    --cp-gold-bright: #6bf2ac;
    --cp-gold-line: rgba(53, 224, 141, 0.40);
    --cp-gold-soft: rgba(53, 224, 141, 0.15);
    --cp-red: #e5322d;
    --cp-purple: #7b3ff2;
    --cp-tile: #f5f1e6;
    --cp-tile-ink: #22301f;
    --cp-radius: 16px;
    background: var(--cp-bg-page) !important;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin.light-theme,
html.light-theme .cases-premium-skin {
    background: var(--cp-bg-page) !important;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin #global-bg,
.cases-premium-skin .global-animated-bg {
    position: fixed;
    inset: 0;
    opacity: 1 !important;
    background-color: var(--cp-bg-page) !important;
    background-image: url("img/vault-bg-desktop.3978afa10de5.jpg") !important;
    background-size: cover !important;
    background-position: center 24% !important;
    background-repeat: no-repeat !important;
    filter: saturate(.98) brightness(.92);
}
.cases-premium-skin #global-bg,
.cases-premium-skin .global-animated-bg {
    background-image: -webkit-image-set(url("img/vault-bg-desktop.3cc9c7eef590.webp") 1x, url("img/vault-bg-desktop-2x.8423703a619c.webp") 2x) !important;
    background-image: image-set(url("img/vault-bg-desktop.3cc9c7eef590.webp") type('image/webp') 1x, url("img/vault-bg-desktop-2x.8423703a619c.webp") type('image/webp') 2x) !important;
}
.cases-premium-skin #global-bg::after,
.cases-premium-skin .global-animated-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 68% 17%, rgba(107,242,172,.10), transparent 26%),
        linear-gradient(180deg, rgba(4,8,6,.72) 0%, rgba(4,8,6,.28) 22%, rgba(4,8,6,.16) 52%, rgba(4,8,6,.78) 100%),
        linear-gradient(90deg, rgba(4,8,6,.70) 0%, rgba(4,8,6,.30) 34%, rgba(4,8,6,.06) 63%, rgba(4,8,6,.24) 100%);
    pointer-events: none;
}
.cases-premium-skin main {
    background:
        linear-gradient(rgba(53,224,141,.030) 1px, transparent 1px),
        radial-gradient(circle at 50% -8%, rgba(53,224,141,.10), transparent 32%) !important;
    background-size: 100% 26px, auto !important;
}
.cases-premium-skin #utility-bar,
.cases-premium-skin nav.nav-blur {
    background: rgba(3, 7, 5, .90) !important;
    border-color: rgba(53,224,141,.24) !important;
    box-shadow: 0 18px 70px rgba(0,0,0,.28), inset 0 -1px 0 rgba(237,243,236,.035);
}
.cases-premium-skin nav.nav-blur a:hover,
.cases-premium-skin nav.nav-blur a[aria-current="page"],
.cases-premium-skin #nav-cases,
.cases-premium-skin .cp-winnings-nav,
.cases-premium-skin #currency-switcher button.opacity-100 {
    color: var(--cp-gold-bright) !important;
}
.cases-premium-skin .cp-hero {
    min-height: clamp(300px, 33vw, 430px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(53,224,141,.34) !important;
    background:
        linear-gradient(90deg, rgba(4,8,6,.82) 0%, rgba(4,8,6,.54) 42%, rgba(4,8,6,.10) 100%),
        radial-gradient(circle at 70% 22%, rgba(53,224,141,.16), transparent 34%),
        rgba(6,10,8,.38) !important;
    box-shadow: 0 34px 120px rgba(0,0,0,.52), inset 0 1px 0 rgba(237,243,236,.055), 0 0 80px -36px rgba(53,224,141,.50);
    backdrop-filter: blur(2px);
}
.cases-premium-skin .cp-hero::before {
    border-color: rgba(53,224,141,.14) !important;
}
.cases-premium-skin .cp-hero::after {
    right: 8%;
    top: 8%;
    width: min(420px, 38vw);
    height: min(420px, 38vw);
    background: radial-gradient(circle, rgba(53,224,141,.18), transparent 64%) !important;
    filter: blur(10px);
}
.cases-premium-skin .cp-hero-eyebrow,
.cases-premium-skin .cp-case-meta,
.cases-premium-skin .cp-spin-case {
    color: var(--cp-gold-bright) !important;
    text-shadow: 0 0 18px rgba(53,224,141,.18);
}
.cases-premium-skin #page-title-cases {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(66px, 9vw, 136px);
    letter-spacing: .015em;
    line-height: .86;
    color: var(--cp-ivory) !important;
    text-shadow: 0 18px 55px rgba(0,0,0,.56), 0 0 44px rgba(53,224,141,.13);
}
.cases-premium-skin .cp-hero-primary,
.cases-premium-skin .btn-terminal:hover,
.cases-premium-skin .btn-terminal:focus-visible,
.cases-premium-skin .cp-speed-opt[aria-checked="true"] {
    background: var(--cp-gold) !important;
    border-color: var(--cp-gold) !important;
    color: #03140b !important;
    box-shadow: 0 16px 45px rgba(53,224,141,.18);
}
.cases-premium-skin .btn-terminal {
    border-color: rgba(53,224,141,.36) !important;
    background: rgba(5,10,7,.68) !important;
    color: var(--cp-ivory) !important;
}
.cases-premium-skin .cp-wallet-bar,
.cases-premium-skin .cp-sbp-flash,
.cases-premium-skin .cp-drops,
.cases-premium-skin .cp-winnings,
.cases-premium-skin .cp-empty,
.cases-premium-skin .case-block,
.cases-premium-skin .cp-request-box,
.cases-premium-skin .cp-speed-group {
    border-color: rgba(53,224,141,.28) !important;
    background: linear-gradient(180deg, rgba(11,19,14,.80), rgba(7,12,9,.86)) !important;
    box-shadow: 0 26px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(237,243,236,.045);
    backdrop-filter: blur(10px) saturate(1.05);
}
.cases-premium-skin .case-block {
    overflow: hidden;
}
.cases-premium-skin .case-block::before {
    content: 'VAULT MANIFEST';
    color: rgba(53,224,141,.13) !important;
}
.cases-premium-skin .case-block::after {
    content: '';
    position: absolute;
    inset: auto -18% -38% 34%;
    height: 58%;
    background: radial-gradient(circle, rgba(53,224,141,.10), transparent 68%);
    pointer-events: none;
}
.cases-premium-skin .cp-wallet-balance,
.cases-premium-skin .cp-price,
.cases-premium-skin .cp-drops-live,
.cases-premium-skin .cp-drop-arrow,
.cases-premium-skin .cp-winnings-title,
.cases-premium-skin .cp-manifest-title {
    color: var(--cp-gold-bright) !important;
}
.cases-premium-skin .cp-case-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.cases-premium-skin .cp-preview img,
.cases-premium-skin .cp-row-photo,
.cases-premium-skin .cp-drop-photo,
.cases-premium-skin .cp-reel-tile,
.cases-premium-skin .cp-result-media {
    background: linear-gradient(180deg, #fcfaf3 0%, #f1ecdd 78%, #e9e9d6 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(34,48,31,.10), 0 14px 30px -18px rgba(0,0,0,.72);
}
.cases-premium-skin .cp-preview img,
.cases-premium-skin .cp-row-photo,
.cases-premium-skin .cp-drop-photo,
.cases-premium-skin .cp-reel-tile img,
.cases-premium-skin .cp-result-media img {
    mix-blend-mode: multiply;
}
.cases-premium-skin .cp-manifest-scroll,
.cases-premium-skin .cp-winnings-scroll {
    background: rgba(4,8,6,.50) !important;
    border-color: rgba(53,224,141,.20) !important;
}
.cases-premium-skin .cp-manifest-table th,
.cases-premium-skin .cp-winnings-table th {
    background: rgba(53,224,141,.055) !important;
    color: var(--cp-gold-bright) !important;
    border-bottom-color: rgba(53,224,141,.22) !important;
}
.cases-premium-skin .cp-manifest-table td,
.cases-premium-skin .cp-winnings-table td,
.cases-premium-skin .cp-manifest-table tr,
.cases-premium-skin .cp-winnings-table tr {
    border-color: rgba(53,224,141,.14) !important;
}
.cases-premium-skin .cp-drop-chip {
    background: rgba(5,10,7,.72) !important;
    border-color: rgba(53,224,141,.22) !important;
}
.cases-premium-skin .cp-rarity-badge[data-rarity="legendary"],
.cases-premium-skin .cp-result-tier[data-tier="legend"],
.cases-premium-skin .cp-result-tier[data-tier="excl"] {
    color: #b08cff !important;
    border-color: rgba(123,63,242,.55) !important;
}
.cases-premium-skin .cp-spin-backdrop {
    background:
        radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.13), transparent 70%),
        rgba(3,7,5,.91) !important;
    backdrop-filter: blur(8px) saturate(.96);
}
.cases-premium-skin .cp-spin-head h3,
.cases-premium-skin .cp-result-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    text-shadow: 0 0 28px rgba(53,224,141,.13);
}
.cases-premium-skin .cp-spin-close,
.cases-premium-skin .cp-request-box,
.cases-premium-skin .cp-speed-group {
    background: rgba(6,10,8,.80) !important;
    border-color: rgba(53,224,141,.34) !important;
}
.cases-premium-skin .cp-reel-viewport {
    border-color: rgba(53,224,141,.22) !important;
    background:
        linear-gradient(to right, rgba(4,8,6,.98), transparent 14%, transparent 86%, rgba(4,8,6,.98)),
        radial-gradient(90% 120% at 50% -30%, rgba(53,224,141,.075), transparent 60%),
        #060a08 !important;
    box-shadow: inset 0 10px 30px rgba(0,0,0,.55), inset 0 -10px 30px rgba(0,0,0,.55), 0 24px 66px -26px rgba(0,0,0,.86), 0 0 54px -30px rgba(53,224,141,.55) !important;
}
.cases-premium-skin .cp-reel-viewport::after {
    background-image:
        linear-gradient(90deg, transparent, rgba(53,224,141,.62), transparent),
        repeating-linear-gradient(90deg, rgba(53,224,141,.42) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(53,224,141,.24) 0 1px, transparent 1px 56px) !important;
}
.cases-premium-skin .cp-reel-marker {
    background: linear-gradient(180deg, var(--cp-gold), var(--cp-gold-bright), var(--cp-gold)) !important;
    box-shadow: 0 0 18px rgba(53,224,141,.58) !important;
}
.cases-premium-skin .cp-reel-marker::before {
    background: var(--cp-gold) !important;
    color: #03140b !important;
}
.cases-premium-skin .cp-reel-tile {
    color: var(--cp-tile-ink) !important;
}
.cases-premium-skin .cp-reel-tile.is-winner {
    border-color: var(--cp-gold) !important;
    box-shadow: 0 0 0 4px rgba(53,224,141,.18), 0 0 34px -2px rgba(53,224,141,.45), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.cases-premium-skin .cp-reel-tile::after {
    background-image: repeating-linear-gradient(90deg, #2e3b2c 0 2px, transparent 2px 5px, #2e3b2c 5px 6px, transparent 6px 9px, #2e3b2c 9px 12px, transparent 12px 13px, #2e3b2c 13px 15px, transparent 15px 19px, #2e3b2c 19px 22px, transparent 22px 23px, #2e3b2c 23px 26px, transparent 26px 28px) !important;
}
.cases-premium-skin .cp-spin-phase,
.cases-premium-skin .cp-result-kicker,
.cases-premium-skin .cp-result-price-note {
    color: var(--cp-gold-bright) !important;
}
.cases-premium-skin .cp-result-card {
    border-color: rgba(53,224,141,.40) !important;
    background:
        radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.13), transparent 70%),
        linear-gradient(180deg, rgba(13,22,16,.90), rgba(8,14,10,.94)) !important;
    box-shadow: 0 34px 80px -28px rgba(0,0,0,.88), 0 0 72px -22px rgba(53,224,141,.30) !important;
}
.cases-premium-skin .cp-result-media {
    border-color: rgba(53,224,141,.48) !important;
}
.cases-premium-skin .cp-drop-coin,
.cases-premium-skin .cp-tile-coin,
.cases-premium-skin .cp-result-coin,
.cases-premium-skin .cp-row-coin {
    color: #d9ffe9 !important;
    background-color: transparent !important;
    background-image: url("img/dh-coin.d33c62b4a086.png") !important;
    background-size: cover !important;
    background-position: center !important;
    border: 0 !important;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.55), 0 0 18px -6px rgba(53,224,141,.35) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}
.cases-premium-skin .cp-drop-coin,
.cases-premium-skin .cp-tile-coin,
.cases-premium-skin .cp-result-coin,
.cases-premium-skin .cp-row-coin {
    background-image: -webkit-image-set(url("img/dh-coin.a8620a316b13.webp") 1x) !important;
    background-image: image-set(url("img/dh-coin.a8620a316b13.webp") type('image/webp') 1x) !important;
}
.cases-premium-skin .cp-result-coin {
    width: 150px;
    height: 150px;
    font-size: 2.05rem;
}
.cases-premium-skin body.cp-overlay-open #global-bg,
.cases-premium-skin.cp-overlay-open #global-bg,
.cases-premium-skin.cp-overlay-open .global-animated-bg {
    transform: scale(1.045);
    filter: brightness(.58) saturate(.90) blur(2px);
}
@media (max-width: 720px) {
    .cases-premium-skin #global-bg,
    .cases-premium-skin .global-animated-bg {
        background-image: url("img/vault-bg-mobile.20dde3dfd9ac.jpg") !important;
        background-position: 58% top !important;
    }
    .cases-premium-skin #global-bg,
    .cases-premium-skin .global-animated-bg {
        background-image: -webkit-image-set(url("img/vault-bg-mobile.c260f233652a.webp") 1x) !important;
        background-image: image-set(url("img/vault-bg-mobile.c260f233652a.webp") type('image/webp') 1x) !important;
    }
    .cases-premium-skin #global-bg::after,
    .cases-premium-skin .global-animated-bg::after {
        background:
            linear-gradient(180deg, rgba(4,8,6,.78) 0%, rgba(4,8,6,.30) 28%, rgba(4,8,6,.42) 62%, rgba(4,8,6,.82) 100%),
            linear-gradient(90deg, rgba(4,8,6,.34), rgba(4,8,6,.08), rgba(4,8,6,.34));
    }
    .cases-premium-skin .cp-hero {
        min-height: 420px;
    }
    .cases-premium-skin #page-title-cases {
        font-size: clamp(58px, 16vw, 82px);
    }
    .cases-premium-skin .cp-result-coin {
        width: 128px;
        height: 128px;
        font-size: 1.75rem;
    }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .cases-premium-skin .cp-wallet-bar,
    .cases-premium-skin .cp-sbp-flash,
    .cases-premium-skin .cp-drops,
    .cases-premium-skin .cp-winnings,
    .cases-premium-skin .cp-empty,
    .cases-premium-skin .case-block,
    .cases-premium-skin .cp-result-card {
        background: #0b130e !important;
    }
}

/* Real catalog photos are not the transparent demo renders from the concept;
   keep them crisp on the ivory plates instead of multiply-darkening them. */
.cases-premium-skin .cp-preview img,
.cases-premium-skin .cp-row-photo,
.cases-premium-skin .cp-drop-photo,
.cases-premium-skin .cp-reel-tile img,
.cases-premium-skin .cp-result-media img {
    mix-blend-mode: normal !important;
    filter: none !important;
}
.cases-premium-skin .cp-preview img {
    background: linear-gradient(180deg, #fffdf7, #f0eadc) !important;
}

/* ===================================================================
   2026-10-01 — VAULT POLISH HOTFIX
   Fixes: visible light-theme state, header overlap at 1366/1440 widths,
   and generated vault ambience inside the spin overlay.
   =================================================================== */
.cases-premium-skin nav.nav-blur .desktop-nav {
    gap: clamp(8px, .75vw, 16px) !important;
    margin-left: clamp(10px, 1.2vw, 24px) !important;
}
.cases-premium-skin nav.nav-blur .desktop-nav a {
    font-size: clamp(11px, .78vw, 14px) !important;
    letter-spacing: .03em;
}
.cases-premium-skin nav.nav-blur > div > div > div:last-child {
    gap: clamp(6px, .6vw, 12px) !important;
    margin-left: clamp(8px, .7vw, 16px) !important;
}
.cases-premium-skin nav.nav-blur .theme-toggle {
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
}
.cases-premium-skin nav.nav-blur .theme-toggle-slider {
    width: 16px;
    height: 16px;
    transform: translateX(20px);
}
html.light-theme .cases-premium-skin nav.nav-blur .theme-toggle-slider {
    transform: translateX(0);
}
/* Complete header navigation is now owned by the shared measured-fit contract. */

/* Light theme is not a separate brand: it is the same vault world with
   brighter glass, stronger ivory plates and readable dark text. */
html.light-theme .cases-premium-skin {
    --cp-bg-page: #eef4ee;
    --cp-bg-deep: #e6eee7;
    --cp-bg-panel: rgba(244, 249, 244, 0.80);
    --cp-bg-panel-2: rgba(250, 253, 249, 0.92);
    --cp-ivory: #132018;
    --cp-ivory-soft: rgba(19, 32, 24, 0.80);
    --cp-muted: rgba(42, 64, 50, 0.66);
    --cp-gold: #109e60;
    --cp-gold-bright: #087a48;
    --cp-gold-line: rgba(16, 158, 96, 0.36);
    background: var(--cp-bg-page) !important;
    color: var(--cp-ivory) !important;
}
html.light-theme .cases-premium-skin #global-bg,
html.light-theme .cases-premium-skin .global-animated-bg {
    opacity: .58 !important;
    filter: saturate(.70) brightness(1.95) contrast(.72) !important;
}
html.light-theme .cases-premium-skin #global-bg::after,
html.light-theme .cases-premium-skin .global-animated-bg::after {
    background:
        linear-gradient(180deg, rgba(246,250,246,.90) 0%, rgba(246,250,246,.60) 26%, rgba(246,250,246,.38) 55%, rgba(246,250,246,.90) 100%),
        linear-gradient(90deg, rgba(246,250,246,.82) 0%, rgba(246,250,246,.38) 44%, rgba(246,250,246,.70) 100%) !important;
}
html.light-theme .cases-premium-skin main {
    background:
        linear-gradient(rgba(16,158,96,.045) 1px, transparent 1px),
        radial-gradient(circle at 50% -8%, rgba(16,158,96,.13), transparent 32%) !important;
    background-size: 100% 26px, auto !important;
}
html.light-theme .cases-premium-skin #utility-bar,
html.light-theme .cases-premium-skin nav.nav-blur {
    background: rgba(247, 251, 247, .92) !important;
    border-color: rgba(16,158,96,.25) !important;
    color: #132018 !important;
    box-shadow: 0 18px 70px rgba(18,45,30,.12), inset 0 -1px 0 rgba(16,158,96,.10) !important;
}
html.light-theme .cases-premium-skin #utility-bar button,
html.light-theme .cases-premium-skin #currency-switcher button,
html.light-theme .cases-premium-skin nav.nav-blur a,
html.light-theme .cases-premium-skin nav.nav-blur button,
html.light-theme .cases-premium-skin nav.nav-blur .terminal-text,
html.light-theme .cases-premium-skin nav.nav-blur .terminal-text-dim,
html.light-theme .cases-premium-skin #site-name-nav,
html.light-theme .cases-premium-skin #logo-letter {
    color: #132018 !important;
    text-shadow: none !important;
}
html.light-theme .cases-premium-skin nav.nav-blur .terminal-text-dim,
html.light-theme .cases-premium-skin #currency-switcher button.opacity-50 {
    color: rgba(19,32,24,.58) !important;
}
html.light-theme .cases-premium-skin #nav-cases,
html.light-theme .cases-premium-skin .cp-winnings-nav,
html.light-theme .cases-premium-skin #currency-switcher button.opacity-100 {
    color: #087a48 !important;
}
html.light-theme .cases-premium-skin .cp-hero,
html.light-theme .cases-premium-skin .cp-wallet-bar,
html.light-theme .cases-premium-skin .cp-sbp-flash,
html.light-theme .cases-premium-skin .cp-drops,
html.light-theme .cases-premium-skin .cp-winnings,
html.light-theme .cases-premium-skin .cp-empty,
html.light-theme .cases-premium-skin .case-block,
html.light-theme .cases-premium-skin .cp-request-box,
html.light-theme .cases-premium-skin .cp-speed-group {
    background: linear-gradient(180deg, rgba(251,253,250,.86), rgba(235,244,237,.88)) !important;
    border-color: rgba(16,158,96,.30) !important;
    color: #132018 !important;
    box-shadow: 0 24px 80px rgba(18,45,30,.14), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
html.light-theme .cases-premium-skin .cp-hero {
    background:
        linear-gradient(90deg, rgba(251,253,250,.92) 0%, rgba(240,248,241,.70) 48%, rgba(240,248,241,.30) 100%),
        radial-gradient(circle at 70% 22%, rgba(16,158,96,.14), transparent 34%) !important;
}
html.light-theme .cases-premium-skin .btn-terminal {
    background: rgba(255,255,255,.66) !important;
    border-color: rgba(16,158,96,.38) !important;
    color: #132018 !important;
}
html.light-theme .cases-premium-skin .cp-hero-primary,
html.light-theme .cases-premium-skin .btn-terminal:hover,
html.light-theme .cases-premium-skin .btn-terminal:focus-visible,
html.light-theme .cases-premium-skin .cp-speed-opt[aria-checked="true"] {
    background: #109e60 !important;
    border-color: #109e60 !important;
    color: #f7fff9 !important;
}
html.light-theme .cases-premium-skin .cp-manifest-scroll,
html.light-theme .cases-premium-skin .cp-winnings-scroll {
    background: rgba(255,255,255,.55) !important;
    border-color: rgba(16,158,96,.22) !important;
}
html.light-theme .cases-premium-skin .cp-drop-chip {
    background: rgba(255,255,255,.66) !important;
    border-color: rgba(16,158,96,.24) !important;
}
html.light-theme .cases-premium-skin #page-title-cases,
html.light-theme .cases-premium-skin .cp-case-name,
html.light-theme .cases-premium-skin .cp-result-name,
html.light-theme .cases-premium-skin .cp-spin-head h3 {
    color: #132018 !important;
    text-shadow: 0 10px 34px rgba(16,58,35,.12) !important;
}
html.light-theme .cases-premium-skin .cp-hero-eyebrow,
html.light-theme .cases-premium-skin .cp-wallet-balance,
html.light-theme .cases-premium-skin .cp-price,
html.light-theme .cases-premium-skin .cp-drops-live,
html.light-theme .cases-premium-skin .cp-drop-arrow,
html.light-theme .cases-premium-skin .cp-winnings-title,
html.light-theme .cases-premium-skin .cp-manifest-title,
html.light-theme .cases-premium-skin .cp-spin-case,
html.light-theme .cases-premium-skin .cp-result-kicker,
html.light-theme .cases-premium-skin .cp-result-price-note {
    color: #087a48 !important;
}

/* Spin overlay must keep the generated vault ambience, not a flat black layer. */
.cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(3, 7, 5, .86) !important;
    background-image:
        radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.18), transparent 70%),
        linear-gradient(180deg, rgba(3,7,5,.70), rgba(3,7,5,.88)),
        image-set(url("img/vault-bg-desktop.3cc9c7eef590.webp") type('image/webp') 1x, url("img/vault-bg-desktop-2x.8423703a619c.webp") type('image/webp') 2x) !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, center 24% !important;
    filter: saturate(.95) brightness(.88);
}
html.light-theme .cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(239, 247, 240, .82) !important;
    background-image:
        radial-gradient(70% 46% at 50% 0%, rgba(16,158,96,.15), transparent 70%),
        linear-gradient(180deg, rgba(247,251,247,.58), rgba(235,244,237,.78)),
        image-set(url("img/vault-bg-desktop.3cc9c7eef590.webp") type('image/webp') 1x, url("img/vault-bg-desktop-2x.8423703a619c.webp") type('image/webp') 2x) !important;
    filter: saturate(.70) brightness(1.55) contrast(.78);
}
@media (max-width: 720px) {
    .cases-premium-skin .cp-spin-backdrop,
    html.light-theme .cases-premium-skin .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.18), transparent 70%),
            linear-gradient(180deg, rgba(3,7,5,.70), rgba(3,7,5,.88)),
            image-set(url("img/vault-bg-mobile.c260f233652a.webp") type('image/webp') 1x) !important;
        background-position: center, center, 58% top !important;
    }
    html.light-theme .cases-premium-skin .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(16,158,96,.15), transparent 70%),
            linear-gradient(180deg, rgba(247,251,247,.58), rgba(235,244,237,.78)),
            image-set(url("img/vault-bg-mobile.c260f233652a.webp") type('image/webp') 1x) !important;
    }
}

/* Mobile header must never collide with the logo. Keep the essential actions
   visible; secondary search/channel affordances remain available elsewhere. */
@media (max-width: 480px) {
    .cases-premium-skin nav.nav-blur > div > div {
        gap: 8px;
    }
    .cases-premium-skin nav.nav-blur > div > div > div:first-child {
        flex: 0 0 auto !important;
        min-width: 32px !important;
    }
    .cases-premium-skin nav.nav-blur > div > div > div:last-child {
        width: auto !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 6px !important;
    }
    .cases-premium-skin nav.nav-blur a.glitch {
        margin-right: 0 !important;
        width: 32px !important;
        overflow: hidden;
    }
    .cases-premium-skin nav.nav-blur #site-name-nav {
        display: none !important;
    }
    .cases-premium-skin nav.nav-blur button[onclick="openSearch()"],
    .cases-premium-skin nav.nav-blur #nav-telegram-channel,
    .cases-premium-skin nav.nav-blur #game-wallet-badge {
        display: none !important;
    }
    .cases-premium-skin nav.nav-blur button[onclick="openCart()"],
    .cases-premium-skin nav.nav-blur #user-avatar-btn,
    .cases-premium-skin nav.nav-blur .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 7px !important;
    }
}

/* ===================================================================
   2026-10-01 — LUXURY THEME ASSET MAP
   Separate generated scenes per theme and state:
   landing page, spin reel, win/result reveal, and theme-specific coin.
   Assets generated through /work/chatgpt_integration.
   =================================================================== */
.cases-premium-skin #global-bg,
.cases-premium-skin .global-animated-bg {
    background-image: url("img/cases-bg-dark.cc2023642dbd.jpg") !important;
    background-image: -webkit-image-set(url("img/cases-bg-dark.460c0cd16f28.webp") 1x) !important;
    background-image: image-set(url("img/cases-bg-dark.460c0cd16f28.webp") type('image/webp') 1x) !important;
    background-position: center 42% !important;
    filter: saturate(1.03) brightness(.88) contrast(1.04) !important;
}
html.light-theme .cases-premium-skin #global-bg,
html.light-theme .cases-premium-skin .global-animated-bg {
    background-image: url("img/cases-bg-light.1fd2ef46470b.jpg") !important;
    background-image: -webkit-image-set(url("img/cases-bg-light.51aa36b8160f.webp") 1x) !important;
    background-image: image-set(url("img/cases-bg-light.51aa36b8160f.webp") type('image/webp') 1x) !important;
    background-position: center 42% !important;
    filter: saturate(.94) brightness(1.03) contrast(.98) !important;
}
.cases-premium-skin #global-bg::after,
.cases-premium-skin .global-animated-bg::after {
    background:
        radial-gradient(circle at 68% 17%, rgba(107,242,172,.12), transparent 28%),
        linear-gradient(180deg, rgba(4,8,6,.70) 0%, rgba(4,8,6,.24) 24%, rgba(4,8,6,.12) 54%, rgba(4,8,6,.78) 100%),
        linear-gradient(90deg, rgba(4,8,6,.62) 0%, rgba(4,8,6,.22) 36%, rgba(4,8,6,.04) 63%, rgba(4,8,6,.18) 100%) !important;
}
html.light-theme .cases-premium-skin #global-bg::after,
html.light-theme .cases-premium-skin .global-animated-bg::after {
    background:
        radial-gradient(circle at 68% 16%, rgba(224,178,82,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,.10) 58%, rgba(237,246,238,.64) 100%),
        linear-gradient(90deg, rgba(247,251,247,.56) 0%, rgba(247,251,247,.12) 40%, rgba(247,251,247,.04) 66%, rgba(247,251,247,.22) 100%) !important;
}
.cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(2, 4, 3, .90) !important;
    background-image:
        radial-gradient(72% 48% at 50% 10%, rgba(53,224,141,.16), transparent 72%),
        linear-gradient(180deg, rgba(3,7,5,.38), rgba(3,7,5,.74)),
        image-set(url("img/cases-spin-dark.9ccb4cad81ae.webp") type('image/webp') 1x) !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, center 50% !important;
    filter: saturate(1.05) brightness(.92) contrast(1.03) !important;
}
html.light-theme .cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(246, 251, 247, .76) !important;
    background-image:
        radial-gradient(70% 48% at 50% 8%, rgba(224,178,82,.18), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.32), rgba(240,247,241,.58)),
        image-set(url("img/cases-spin-light.529d40dbc976.webp") type('image/webp') 1x) !important;
    filter: saturate(.92) brightness(1.02) contrast(.98) !important;
}
.cases-premium-skin .cp-spin-overlay.is-result .cp-spin-backdrop {
    background-image:
        radial-gradient(70% 46% at 50% 8%, rgba(53,224,141,.20), transparent 72%),
        linear-gradient(180deg, rgba(3,7,5,.34), rgba(3,7,5,.72)),
        image-set(url("img/cases-win-dark.25702ce05a0d.webp") type('image/webp') 1x) !important;
}
html.light-theme .cases-premium-skin .cp-spin-overlay.is-result .cp-spin-backdrop {
    background-image:
        radial-gradient(70% 46% at 50% 8%, rgba(224,178,82,.20), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(240,247,241,.54)),
        image-set(url("img/cases-win-light.7a9d13dfbc00.webp") type('image/webp') 1x) !important;
}
.cases-premium-skin .cp-drop-coin,
.cases-premium-skin .cp-tile-coin,
.cases-premium-skin .cp-result-coin,
.cases-premium-skin .cp-row-coin {
    background-image: url("img/dh-coin-dark.137c7e6ba6c3.png") !important;
    background-image: -webkit-image-set(url("img/dh-coin-dark.f793f485f6c4.webp") 1x) !important;
    background-image: image-set(url("img/dh-coin-dark.f793f485f6c4.webp") type('image/webp') 1x) !important;
}
html.light-theme .cases-premium-skin .cp-drop-coin,
html.light-theme .cases-premium-skin .cp-tile-coin,
html.light-theme .cases-premium-skin .cp-result-coin,
html.light-theme .cases-premium-skin .cp-row-coin {
    background-image: url("img/dh-coin-light.50ed0a939dd2.png") !important;
    background-image: -webkit-image-set(url("img/dh-coin-light.e390a49ef97a.webp") 1x) !important;
    background-image: image-set(url("img/dh-coin-light.e390a49ef97a.webp") type('image/webp') 1x) !important;
    box-shadow: 0 10px 24px -12px rgba(119,94,38,.42), 0 0 22px -12px rgba(16,158,96,.28) !important;
}
.cases-premium-skin .cp-dh-coin-skin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent !important;
    font-size: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: url("img/dh-coin-dark.137c7e6ba6c3.png") !important;
    background-image: -webkit-image-set(url("img/dh-coin-dark.f793f485f6c4.webp") 1x) !important;
    background-image: image-set(url("img/dh-coin-dark.f793f485f6c4.webp") type('image/webp') 1x) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
html.light-theme .cases-premium-skin .cp-dh-coin-skin {
    background-image: url("img/dh-coin-light.50ed0a939dd2.png") !important;
    background-image: -webkit-image-set(url("img/dh-coin-light.e390a49ef97a.webp") 1x) !important;
    background-image: image-set(url("img/dh-coin-light.e390a49ef97a.webp") type('image/webp') 1x) !important;
}
.cases-premium-skin .cp-result-card.is-reveal {
    box-shadow: 0 34px 110px -36px rgba(0,0,0,.72), 0 0 80px -34px rgba(53,224,141,.62) !important;
}
html.light-theme .cases-premium-skin .cp-result-card.is-reveal {
    box-shadow: 0 34px 110px -42px rgba(80,62,26,.30), 0 0 72px -38px rgba(16,158,96,.38) !important;
}
@media (max-width: 720px) {
    .cases-premium-skin #global-bg,
    .cases-premium-skin .global-animated-bg {
        background-image: url("img/cases-bg-dark-mobile.0202810f923f.jpg") !important;
        background-image: -webkit-image-set(url("img/cases-bg-dark-mobile.867a139cd17e.webp") 1x) !important;
        background-image: image-set(url("img/cases-bg-dark-mobile.867a139cd17e.webp") type('image/webp') 1x) !important;
        background-position: center top !important;
    }
    html.light-theme .cases-premium-skin #global-bg,
    html.light-theme .cases-premium-skin .global-animated-bg {
        background-image: url("img/cases-bg-light-mobile.97e4cff4f803.jpg") !important;
        background-image: -webkit-image-set(url("img/cases-bg-light-mobile.b4bebcb59cbe.webp") 1x) !important;
        background-image: image-set(url("img/cases-bg-light-mobile.b4bebcb59cbe.webp") type('image/webp') 1x) !important;
        background-position: center top !important;
    }
    .cases-premium-skin .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.18), transparent 70%),
            linear-gradient(180deg, rgba(3,7,5,.48), rgba(3,7,5,.78)),
            image-set(url("img/cases-spin-dark-mobile.f5669492a2b1.webp") type('image/webp') 1x) !important;
        background-position: center, center, center center !important;
    }
    html.light-theme .cases-premium-skin .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(224,178,82,.18), transparent 70%),
            linear-gradient(180deg, rgba(255,255,255,.32), rgba(240,247,241,.60)),
            image-set(url("img/cases-spin-light-mobile.90d690a9d5fb.webp") type('image/webp') 1x) !important;
    }
    .cases-premium-skin .cp-spin-overlay.is-result .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(53,224,141,.22), transparent 70%),
            linear-gradient(180deg, rgba(3,7,5,.44), rgba(3,7,5,.76)),
            image-set(url("img/cases-win-dark-mobile.97b32e4cb977.webp") type('image/webp') 1x) !important;
    }
    html.light-theme .cases-premium-skin .cp-spin-overlay.is-result .cp-spin-backdrop {
        background-image:
            radial-gradient(70% 46% at 50% 0%, rgba(224,178,82,.20), transparent 70%),
            linear-gradient(180deg, rgba(255,255,255,.30), rgba(240,247,241,.58)),
            image-set(url("img/cases-win-light-mobile.e223c3dc9151.webp") type('image/webp') 1x) !important;
    }
}

/* 2026-10-01 QA: mobile manifest + light result overlay polish. */
html.light-theme .cases-premium-skin .cp-spin-close {
    color: #f8fff9 !important;
    background: rgba(6, 24, 15, .88) !important;
    border-color: rgba(16, 158, 96, .52) !important;
    box-shadow: 0 12px 34px rgba(18, 45, 30, .22), inset 0 1px 0 rgba(255,255,255,.12) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.35) !important;
}
html.light-theme .cases-premium-skin .cp-spin-close::before {
    color: #f8fff9 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.35) !important;
}
html.light-theme .cases-premium-skin .cp-result-card.is-reveal {
    background:
        radial-gradient(circle at 50% 0%, rgba(224,178,82,.20), transparent 50%),
        linear-gradient(180deg, rgba(7,31,20,.94), rgba(3,14,9,.94)) !important;
    border-color: rgba(224,178,82,.52) !important;
    color: #f8fff4 !important;
}
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-name,
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-kind,
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-balance,
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-replayed {
    color: #f8fff4 !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-kicker,
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-price-note {
    color: #9ff0c1 !important;
}
html.light-theme .cases-premium-skin .cp-result-card.is-reveal .cp-result-tier {
    background: rgba(0,0,0,.28) !important;
}

@media (max-width: 640px) {
    .cases-premium-skin .cp-manifest-scroll {
        overflow-x: visible !important;
    }
    .cases-premium-skin .cp-manifest-table {
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 8px !important;
    }
    .cases-premium-skin .cp-manifest-table thead {
        display: none !important;
    }
    .cases-premium-skin .cp-manifest-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "name rarity" "price rarity" !important;
        gap: 6px 10px !important;
        min-height: 70px !important;
        padding: 12px 12px 12px 68px !important;
        border: 1px solid rgba(53,224,141,.16) !important;
        border-radius: 16px !important;
        background: rgba(4,8,6,.50) !important;
    }
    html.light-theme .cases-premium-skin .cp-manifest-table tbody tr {
        background: rgba(255,255,255,.70) !important;
        border-color: rgba(16,158,96,.20) !important;
    }
    .cases-premium-skin .cp-manifest-table td {
        display: block !important;
        border-bottom: 0 !important;
        padding: 0 !important;
    }
    .cases-premium-skin .cp-manifest-table td::before {
        content: none !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-name {
        grid-area: name !important;
        min-width: 0 !important;
        display: block !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-name span {
        text-align: left !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-row-photo,
    .cases-premium-skin .cp-manifest-table .cp-row-coin,
    .cases-premium-skin .cp-manifest-table .cp-row-preorder,
    .cases-premium-skin .cp-manifest-table .cp-col-name .cp-row-photo,
    .cases-premium-skin .cp-manifest-table .cp-col-name .cp-row-coin,
    .cases-premium-skin .cp-manifest-table .cp-col-name .cp-row-preorder {
        position: absolute !important;
        left: 14px !important;
        top: 13px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-price {
        grid-area: price !important;
        color: var(--cp-gold-bright, #f1d28a) !important;
        font-size: .86rem !important;
        font-weight: 700 !important;
    }
    html.light-theme .cases-premium-skin .cp-manifest-table .cp-col-price {
        color: #087a48 !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-rarity {
        grid-area: rarity !important;
        align-self: center !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    .cases-premium-skin .cp-payback-badge {
        display: inline-flex !important;
        margin-top: 6px !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
}

/* ===================================================================
   2026-10-01 — PREVIEW → PRODUCTION TRANSFER
   Visual shell from the approved /cases/preview concept, production
   mechanics unchanged: backend still chooses the prize, this layer only
   upgrades catalog/detail/reel/result presentation.
   =================================================================== */
.cases-premium-skin {
    --cp-preview-page: #131217;
    --cp-preview-deep: #0e0d11;
    --cp-preview-panel: rgba(27, 26, 33, .84);
    --cp-preview-panel-2: rgba(34, 33, 40, .90);
    --cp-preview-ink: #f2eee3;
    --cp-preview-dim: #a8a093;
    --cp-preview-hairline: rgba(242,238,227,.14);
    --cp-preview-soft: rgba(242,238,227,.08);
    --cp-preview-gold: #c9a96a;
    --cp-preview-gold-bright: #d9bc80;
    --cp-preview-gold-line: rgba(201,169,106,.38);
    --cp-preview-tile: #f4f0e6;
    --cp-preview-tile-ink: #262014;
    --cp-bg-page: var(--cp-preview-page);
    --cp-bg-deep: var(--cp-preview-deep);
    --cp-bg-panel: var(--cp-preview-panel);
    --cp-bg-panel-2: var(--cp-preview-panel-2);
    --cp-ivory: var(--cp-preview-ink);
    --cp-ivory-soft: rgba(242,238,227,.86);
    --cp-muted: var(--cp-preview-dim);
    --cp-gold: var(--cp-preview-gold);
    --cp-gold-bright: var(--cp-preview-gold-bright);
    --cp-gold-line: var(--cp-preview-gold-line);
}

.cases-premium-skin main {
    background:
        radial-gradient(46% 44% at 72% 8%, rgba(201,169,106,.10), transparent 64%),
        radial-gradient(36% 42% at 12% 82%, rgba(123,63,242,.045), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,.14), transparent 18%, rgba(0,0,0,.22));
}

.cases-premium-skin .cp-hero {
    min-height: clamp(360px, 38vw, 560px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 58px) !important;
    padding: clamp(34px, 5vw, 72px) clamp(18px, 3vw, 34px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(242,238,227,.08) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(46% 60% at 78% 24%, rgba(201,169,106,.13), transparent 68%),
        radial-gradient(30% 44% at 12% 88%, rgba(123,63,242,.055), transparent 70%) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.cases-premium-skin .cp-hero::before,
.cases-premium-skin .cp-hero::after { display: none !important; }
.cases-premium-skin .cp-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.cases-premium-skin .cp-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px !important;
    color: var(--cp-preview-gold) !important;
    font-size: 12px !important;
    letter-spacing: .16em !important;
}
.cases-premium-skin .cp-hero-eyebrow::after {
    content: '';
    width: 56px;
    height: 1px;
    background: var(--cp-preview-gold-line);
}
.cases-premium-skin #page-title-cases {
    margin: 0 !important;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    font-size: clamp(72px, 9vw, 138px) !important;
    line-height: .90 !important;
    letter-spacing: .01em !important;
    color: var(--cp-preview-ink) !important;
    text-shadow: 0 22px 58px rgba(0,0,0,.60) !important;
}
.cases-premium-skin .cp-hero-outline {
    display: block;
    margin: -4px 0 18px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(32px, 4.2vw, 62px);
    line-height: .92;
    letter-spacing: .08em;
    color: transparent;
    -webkit-text-stroke: 1px var(--cp-preview-gold-line);
    text-transform: uppercase;
}
.cases-premium-skin .cp-hero p:not(.cp-hero-eyebrow) {
    max-width: 54ch !important;
    color: var(--cp-preview-dim) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}
.cases-premium-skin .cp-hero-primary {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    background: var(--cp-preview-gold) !important;
    border-color: var(--cp-preview-gold) !important;
    color: #1d160b !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 30px -14px rgba(201,169,106,.45) !important;
}

.cases-premium-skin .cp-hero-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(110px, .72fr);
    gap: 16px;
    align-items: stretch;
}
.cases-premium-skin .cp-hs-main,
.cases-premium-skin .cp-hs-mini {
    position: relative;
    background: var(--cp-preview-tile);
    color: var(--cp-preview-tile-ink);
    border-radius: 16px;
    box-shadow: 0 28px 52px -24px rgba(0,0,0,.72), 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(38,32,20,.06);
    overflow: hidden;
}
.cases-premium-skin .cp-hs-main {
    min-height: clamp(260px, 27vw, 360px);
    padding: 30px 24px 22px;
    display: grid;
    place-items: center;
}
.cases-premium-skin .cp-hs-main::after,
.cases-premium-skin .cp-hs-mini::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(38,32,20,.12);
    border-radius: 10px;
    pointer-events: none;
}
.cases-premium-skin .cp-hs-main img,
.cases-premium-skin .cp-hs-mini img {
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgba(20,16,8,.34));
}
.cases-premium-skin .cp-hs-tag,
.cases-premium-skin .cp-hs-mini span {
    position: absolute;
    left: 18px;
    top: 16px;
    z-index: 2;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--cp-preview-tile-ink);
    border: 1px solid rgba(38,32,20,.28);
    padding: 4px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    background: rgba(244,240,230,.72);
}
.cases-premium-skin .cp-hs-watermark {
    position: absolute;
    right: 18px;
    bottom: 12px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(34px, 4vw, 56px);
    color: rgba(38,32,20,.14);
}
.cases-premium-skin .cp-hs-stack {
    display: grid;
    gap: 16px;
}
.cases-premium-skin .cp-hs-mini {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 28px 16px 16px;
    background: rgba(244,240,230,.96);
}
.cases-premium-skin .cp-hs-mini span {
    font-size: 9px;
    left: 14px;
    top: 12px;
}

.cases-premium-skin .cases-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)) !important;
    gap: 22px !important;
}
.cases-premium-skin .case-block {
    display: grid !important;
    grid-template-columns: minmax(300px, .72fr) minmax(360px, 1fr) !important;
    gap: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}
.cases-premium-skin .case-block::before,
.cases-premium-skin .case-block::after { display: none !important; }
.cases-premium-skin .cp-card,
.cases-premium-skin .cp-manifest {
    position: relative;
    border: 1px solid var(--cp-preview-soft) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, var(--cp-preview-panel-2), var(--cp-preview-panel)) !important;
    box-shadow: 0 24px 48px -24px rgba(0,0,0,.60), 0 2px 10px rgba(0,0,0,.35) !important;
}
.cases-premium-skin .cp-card {
    padding: 14px 14px 18px !important;
    gap: 14px !important;
}
.cases-premium-skin .cp-card-head {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'code meta' 'name name';
    gap: 6px 12px !important;
    align-items: end !important;
}
.cases-premium-skin .cp-case-code {
    grid-area: code;
    color: var(--cp-preview-gold) !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}
.cases-premium-skin .cp-card-head .cp-case-meta {
    grid-area: meta;
    align-self: start;
    color: var(--cp-preview-dim) !important;
    /* R8 semantic readability: case metadata remains secondary but not tiny. */
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cases-premium-skin .cp-case-name {
    grid-area: name;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: clamp(34px, 3vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: .01em !important;
    color: var(--cp-preview-ink) !important;
}
.cases-premium-skin .cp-preview {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(46px, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 14px;
    background: var(--cp-preview-tile);
    min-height: 126px;
    box-shadow: inset 0 0 0 1px rgba(38,32,20,.08);
}
.cases-premium-skin .cp-preview img {
    width: 100% !important;
    height: 92px !important;
    border: 0 !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    padding: 5px !important;
    background: rgba(255,255,255,.34) !important;
    box-shadow: 0 10px 20px -12px rgba(20,16,8,.34) !important;
    filter: drop-shadow(0 10px 10px rgba(20,16,8,.18));
}
.cases-premium-skin .cp-price-row {
    border-top: 1px solid var(--cp-preview-soft);
    border-bottom: 1px solid var(--cp-preview-soft);
    padding: 14px 0;
}
.cases-premium-skin .cp-price {
    font-family: 'Playfair Display', Georgia, serif;
    font-variant-numeric: lining-nums;
    color: var(--cp-preview-gold-bright) !important;
    font-size: clamp(30px, 3vw, 46px) !important;
}
.cases-premium-skin .cp-cta-row,
.cases-premium-skin .cp-sbp-row { gap: 10px !important; }
.cases-premium-skin .cp-card .btn-terminal,
.cases-premium-skin .cp-manifest .btn-terminal {
    border-radius: 10px !important;
}
.cases-premium-skin .cp-card .cp-open-btn:not(.is-alt),
.cases-premium-skin .cp-card .cp-open-paid-btn:not([hidden]) {
    flex: 1 1 210px;
    justify-content: center;
    background: var(--cp-preview-gold) !important;
    border-color: var(--cp-preview-gold) !important;
    color: #1d160b !important;
    min-height: 50px;
}
.cases-premium-skin .cp-card .cp-cta-row > .cp-open-btn:not(.is-alt),
.cases-premium-skin .cp-card .cp-sbp-row > .cp-sbp-btn {
    display: inline-flex;
    width: 100%;
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.cases-premium-skin .cp-manifest {
    padding: 16px 16px 14px !important;
}
.cases-premium-skin .cp-manifest-title {
    color: var(--cp-preview-gold) !important;
    font-size: 13px !important;
    letter-spacing: .14em !important;
}
.cases-premium-skin .cp-manifest-scroll {
    background: rgba(12,11,15,.55) !important;
    border-color: var(--cp-preview-soft) !important;
    border-radius: 14px !important;
}
.cases-premium-skin .cp-manifest-table {
    min-width: 0 !important;
}
.cases-premium-skin .cp-manifest-table th {
    color: var(--cp-preview-dim) !important;
    background: rgba(201,169,106,.045) !important;
    border-bottom-color: var(--cp-preview-soft) !important;
}
.cases-premium-skin .cp-manifest-table td {
    border-bottom-color: var(--cp-preview-soft) !important;
}
.cases-premium-skin .cp-row-photo,
.cases-premium-skin .cp-row-coin,
.cases-premium-skin .cp-row-preorder {
    border-radius: 9px !important;
    background-color: var(--cp-preview-tile) !important;
}
.cases-premium-skin .cp-rarity-badge {
    border-radius: 999px !important;
    background: rgba(0,0,0,.24) !important;
}

.cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(12,11,15,.88) !important;
    background-image:
        radial-gradient(72% 48% at 50% 10%, rgba(201,169,106,.16), transparent 72%),
        linear-gradient(180deg, rgba(12,11,15,.52), rgba(12,11,15,.82)),
        image-set(url("img/cases-spin-dark.9ccb4cad81ae.webp") type('image/webp') 1x) !important;
}
.cases-premium-skin .cp-reel-viewport {
    height: 206px !important;
    border-color: var(--cp-preview-soft) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(to right, #0c0b0f 0%, transparent 14%, transparent 86%, #0c0b0f 100%),
        linear-gradient(180deg, rgba(0,0,0,.34), transparent 18%, transparent 82%, rgba(0,0,0,.46)),
        #0c0b0f !important;
    box-shadow: inset 0 10px 30px rgba(0,0,0,.55), inset 0 -10px 30px rgba(0,0,0,.55), 0 22px 70px rgba(0,0,0,.38) !important;
}
.cases-premium-skin .cp-reel-tile {
    width: 138px !important;
    height: 156px !important;
    flex-basis: 138px !important;
    padding: 8px !important;
    justify-content: flex-end !important;
    background: var(--cp-preview-tile) !important;
    color: var(--cp-preview-tile-ink) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,.50), inset 0 0 0 1px rgba(38,32,20,.06) !important;
}
.cases-premium-skin .cp-reel-tile img {
    width: calc(100% - 20px) !important;
    height: 100px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 10px rgba(20,16,8,.28));
}
.cases-premium-skin .cp-tile-name {
    color: #4a4436 !important;
    font-size: 9px !important;
}
.cases-premium-skin .cp-reel-marker {
    background: linear-gradient(180deg, var(--cp-preview-gold), var(--cp-preview-gold-bright), var(--cp-preview-gold)) !important;
    box-shadow: 0 0 14px rgba(201,169,106,.55) !important;
}
.cases-premium-skin .cp-reel-marker::before {
    background: var(--cp-preview-gold) !important;
    color: #1d160b !important;
}
.cases-premium-skin .cp-spin-head h3,
.cases-premium-skin .cp-result-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    color: var(--cp-preview-ink) !important;
}
.cases-premium-skin .cp-result-card {
    border-color: var(--cp-preview-gold-line) !important;
    background:
        radial-gradient(70% 46% at 50% 0%, rgba(201,169,106,.15), transparent 70%),
        var(--cp-preview-panel) !important;
    box-shadow: 0 34px 70px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(201,169,106,.08) !important;
}
.cases-premium-skin .cp-result-media {
    background: var(--cp-preview-tile) !important;
    border-color: var(--cp-preview-gold) !important;
}
.cases-premium-skin .cp-result-card.is-reveal {
    animation: cp-preview-result-pop .42s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes cp-preview-result-pop {
    0% { opacity: 0; transform: translateY(8px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1.05); }
}

html.light-theme .cases-premium-skin {
    --cp-preview-page: #f1f0ea;
    --cp-preview-deep: #e9e6db;
    --cp-preview-panel: rgba(255,255,249,.82);
    --cp-preview-panel-2: rgba(255,255,252,.94);
    --cp-preview-ink: #17140f;
    --cp-preview-dim: rgba(48,42,33,.78);
    --cp-preview-hairline: rgba(70,56,30,.15);
    --cp-preview-soft: rgba(70,56,30,.10);
    --cp-preview-gold: #b08a3c;
    --cp-preview-gold-bright: #8a6724;
    --cp-preview-gold-line: rgba(176,138,60,.38);
    --cp-preview-tile: #fffefa;
    --cp-preview-tile-ink: #17140f;
    --cp-bg-page: var(--cp-preview-page);
    --cp-bg-panel: var(--cp-preview-panel);
    --cp-bg-panel-2: var(--cp-preview-panel-2);
    --cp-ivory: var(--cp-preview-ink);
    --cp-ivory-soft: rgba(23,20,15,.82);
    --cp-muted: var(--cp-preview-dim);
    --cp-gold: var(--cp-preview-gold);
    --cp-gold-bright: var(--cp-preview-gold-bright);
    --cp-gold-line: var(--cp-preview-gold-line);
}
html.light-theme .cases-premium-skin .cp-hero {
    background:
        radial-gradient(46% 60% at 78% 24%, rgba(176,138,60,.13), transparent 68%),
        radial-gradient(30% 44% at 12% 88%, rgba(123,63,242,.04), transparent 70%) !important;
}
html.light-theme .cases-premium-skin #page-title-cases,
html.light-theme .cases-premium-skin .cp-case-name,
html.light-theme .cases-premium-skin .cp-spin-head h3 {
    color: var(--cp-preview-ink) !important;
    text-shadow: 0 14px 42px rgba(80,62,26,.13) !important;
}
html.light-theme .cases-premium-skin .cp-spin-backdrop {
    background-color: rgba(244,241,232,.76) !important;
    background-image:
        radial-gradient(70% 48% at 50% 8%, rgba(176,138,60,.18), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.34), rgba(244,241,232,.62)),
        image-set(url("img/cases-spin-light.529d40dbc976.webp") type('image/webp') 1x) !important;
}

@media (max-width: 900px) {
    .cases-premium-skin .cp-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .cases-premium-skin .cp-hero-showcase {
        max-width: 620px;
    }
    .cases-premium-skin .case-block {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 640px) {
    .cases-premium-skin .cp-hero {
        padding: 24px 14px 28px !important;
        gap: 16px !important;
    }
    .cases-premium-skin #page-title-cases {
        font-size: clamp(54px, 16vw, 76px) !important;
    }
    .cases-premium-skin .cp-hero-outline {
        font-size: clamp(24px, 7vw, 34px) !important;
        margin-bottom: 12px;
    }
    .cases-premium-skin .cp-hero-showcase {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 10px;
    }
    .cases-premium-skin .cp-hs-main { min-height: 190px; padding: 22px 12px 14px; }
    .cases-premium-skin .cp-hs-stack { gap: 10px; }
    .cases-premium-skin .cp-hs-mini { min-height: 90px; padding: 22px 8px 8px; }
    .cases-premium-skin .cp-hs-tag,
    .cases-premium-skin .cp-hs-mini span { font-size: 8px; left: 10px; top: 9px; }
    .cases-premium-skin .cp-card,
    .cases-premium-skin .cp-manifest { border-radius: 14px !important; }
    .cases-premium-skin .cp-preview { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .cases-premium-skin .cp-preview img { height: 72px !important; }
    .cases-premium-skin .cp-cta-row .btn-terminal,
    .cases-premium-skin .cp-sbp-row .btn-terminal { width: 100%; justify-content: center; }
    .cases-premium-skin .cp-reel-viewport { height: 162px !important; }
    .cases-premium-skin .cp-reel-tile { width: 100px !important; height: 124px !important; flex-basis: 100px !important; }
    .cases-premium-skin .cp-reel-tile img { height: 76px !important; }
}

/* 2026-10-01 QA 17:36 — remove wrong static hero cards and port the
   missing preview reveal motion: flash frame + delayed result actions. */
.cases-premium-skin .cp-flash-frame {
    position: fixed;
    inset: 0;
    z-index: 180;
    pointer-events: none;
    opacity: 0;
    background: #f2eee3;
}
.cases-premium-skin .cp-flash-frame.is-flash {
    animation: cp-preview-flash-80ms 90ms steps(1) forwards;
}
@keyframes cp-preview-flash-80ms {
    0% { opacity: .88; }
    100% { opacity: 0; }
}
.cases-premium-skin .cp-result-actions {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .30s steps(3), transform .30s cubic-bezier(.22,1,.36,1);
}
.cases-premium-skin .cp-result-actions.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .cases-premium-skin .cp-flash-frame.is-flash { animation: none !important; }
    .cases-premium-skin .cp-result-actions { transition: none !important; transform: none !important; }
}

/* 2026-10-01 — full preview-style flow: catalog → detail → reel → result. */
.cases-premium-skin .cp-catalog-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--cp-preview-soft, rgba(242,238,227,.08));
    padding-top: 24px;
}
.cases-premium-skin .cp-catalog-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(30px, 4vw, 52px);
    color: var(--cp-preview-ink, var(--cp-ivory)) !important;
    letter-spacing: .01em;
}
.cases-premium-skin .cp-catalog-sub {
    max-width: 560px;
    text-align: right;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-preview-dim, var(--cp-muted)) !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block {
    display: flex !important;
    flex-direction: column !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card {
    flex: 1 1 auto !important;
    min-height: 100%;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card:hover {
    border-color: var(--cp-preview-gold-line, var(--cp-gold-line)) !important;
    box-shadow: 0 30px 56px -24px rgba(0,0,0,.70), 0 4px 14px rgba(0,0,0,.40) !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-manifest,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-cta-row,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-sbp-row,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-detail-back {
    display: none !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-catalog-action {
    display: flex !important;
    margin-top: auto;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-detail-btn {
    width: 100%;
    justify-content: center;
}
.cases-premium-skin .cases-grid[data-flow-state="detail"] {
    grid-template-columns: 1fr !important;
}
.cases-premium-skin .case-block.is-catalog-hidden {
    display: none !important;
}
.cases-premium-skin .case-block.is-detail-active {
    display: grid !important;
    grid-template-columns: minmax(320px, .72fr) minmax(360px, 1fr) !important;
    gap: 22px !important;
    animation: cp-detail-enter .26s cubic-bezier(.22,1,.36,1) both;
}
.cases-premium-skin .case-block.is-detail-active > .cp-card {
    align-self: start;
}
.cases-premium-skin .case-block.is-detail-active > .cp-card > .cp-cta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.cases-premium-skin .case-block.is-detail-active .cp-open-paid-btn:not([hidden]) {
    order: -1;
}
@keyframes cp-detail-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.cases-premium-skin .cases-grid[data-flow-state="detail"] .cp-catalog-action {
    display: none !important;
}
.cases-premium-skin .cp-detail-back {
    align-self: flex-start;
    width: max-content;
    border: 0;
    background: transparent;
    color: var(--cp-preview-gold, var(--cp-gold)) !important;
    font-size: 11px;
    letter-spacing: .14em;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 0 2px;
    border-bottom: 1px solid transparent;
}
.cases-premium-skin .cp-detail-back:hover,
.cases-premium-skin .cp-detail-back:focus-visible {
    border-bottom-color: currentColor;
}
@media (max-width: 900px) {
    .cases-premium-skin .cp-catalog-heading { display: block; }
    .cases-premium-skin .cp-catalog-sub { text-align: left; margin-top: 8px; }
    .cases-premium-skin .case-block.is-detail-active {
        grid-template-columns: 1fr !important;
    }
}

/* 2026-10-01 — player-facing copy polish + scalable multi-case catalog. */
.cases-premium-skin .cases-grid[data-flow-state="catalog"] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block {
    width: min(100%, 340px) !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card {
    width: 100% !important;
    min-height: 440px !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card-head {
    min-height: 96px;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 180px !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-preview img {
    height: 76px !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-price-row {
    margin-top: auto;
}
.cases-premium-skin .case-block.is-detail-active .cp-preview {
    grid-template-columns: repeat(5, minmax(46px, 1fr)) !important;
}
@media (max-width: 720px) {
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block {
        width: 100% !important;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card {
        min-height: 0 !important;
    }
}

/* 2026-10-01 — mobile detail must not become a long sheet. Keep the
   composition premium and bounded; the prize list scrolls inside the card. */
@media (max-width: 720px) {
    .cases-premium-skin .case-block.is-detail-active {
        gap: 12px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-card {
        padding: 12px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-card-head {
        min-height: 0 !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-preview {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-height: 0 !important;
        padding: 8px !important;
        gap: 6px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-preview img {
        height: 52px !important;
        padding: 3px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-price-row {
        padding: 8px 0 !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-price {
        font-size: 24px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-cta-row,
    .cases-premium-skin .case-block.is-detail-active .cp-sbp-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-cta-row .btn-terminal,
    .cases-premium-skin .case-block.is-detail-active .cp-sbp-row .btn-terminal {
        height: 38px !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest {
        padding: 12px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-title {
        margin-bottom: 8px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-scroll {
        max-height: min(46vh, 390px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table tbody tr {
        min-height: 56px !important;
        padding: 9px 10px 9px 58px !important;
        border-radius: 13px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-row-photo,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-row-coin,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-row-preorder,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-photo,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-coin,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-preorder {
        left: 10px !important;
        top: 9px !important;
        width: 38px !important;
        height: 38px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-foot {
        display: none !important;
    }
}

/* 2026-10-01 self-check: desktop detail was still 4600px tall because the
   full prize list expanded the right column. Bound it on all viewports. */
.cases-premium-skin .case-block.is-detail-active .cp-manifest-scroll {
    max-height: min(64vh, 720px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.cases-premium-skin .case-block.is-detail-active .cp-manifest {
    align-self: start !important;
}
@media (min-width: 901px) {
    .cases-premium-skin .case-block.is-detail-active {
        align-items: start !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-card {
        position: sticky;
        top: 138px;
    }
}

/* Final mobile override after the desktop-bound rule: mobile detail must fit
   one screen with the long prize list scrolling inside. */
@media (max-width: 720px) {
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-scroll {
        max-height: min(46vh, 390px) !important;
    }
}
/* --- 19:28 customer polish: menu accent, SBP clarity, premium contents --- */
.cp-mobile-cases-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: max-content;
    min-width: 170px;
    padding: 10px 14px !important;
    border: 1px solid rgba(201, 169, 106, .55);
    border-radius: 12px;
    color: var(--cp-gold-bright, #c9a96a) !important;
    background: linear-gradient(135deg, rgba(201,169,106,.18), rgba(201,169,106,.04));
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.cp-mobile-cases-link::after {
    content: 'DROP';
    font-size: 10px;
    letter-spacing: .14em;
    padding: 2px 7px;
    border-radius: 999px;
    color: #08070a;
    background: var(--cp-gold-bright, #c9a96a);
}
.cp-pay-options {
    margin: -4px 0 2px;
    font-size: .82rem;
    line-height: 1.45;
    max-width: 520px;
}
.cp-manifest-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}
.cp-manifest-lede {
    max-width: 680px;
    margin: 0 0 10px;
    font-size: .86rem;
    line-height: 1.45;
}
.cp-prize-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.cp-prize-card {
    position: relative;
    overflow: hidden;
    min-height: 222px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(201,169,106,.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.85), transparent 25%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,236,224,.78));
    color: #16130d;
    box-shadow: 0 18px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.cp-prize-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 42%, rgba(201,169,106,.22) 46%, transparent 52%),
        radial-gradient(circle at 80% 0%, rgba(201,169,106,.28), transparent 32%);
    opacity: .68;
    pointer-events: none;
}
.cp-prize-card[data-rarity="legendary"] {
    border-color: rgba(201,169,106,.70);
    box-shadow: 0 22px 58px rgba(201,169,106,.22), 0 18px 44px rgba(0,0,0,.18);
}
.cp-prize-card[data-rarity="epic"] { border-color: rgba(186, 122, 255, .48); }
.cp-prize-card[data-rarity="rare"] { border-color: rgba(90,160,255,.48); }
.cp-prize-media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 124px;
    padding: 18px 16px 6px;
}
.cp-prize-media img {
    width: min(112px, 80%);
    height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.18));
    transform: rotate(-1deg);
}
.cp-prize-card:nth-child(3n) .cp-prize-media img { transform: rotate(1.5deg); }
.cp-prize-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px 12px;
}
.cp-prize-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
    color: #16130d !important;
    font-size: .92rem;
    line-height: 1.14;
    letter-spacing: .03em;
}
.cp-prize-meta {
    color: rgba(22,19,13,.58) !important;
    font-size: .78rem;
}
.cp-prize-card .cp-rarity-badge {
    width: max-content;
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(4px);
}
.cp-prize-preorder {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    background: #111;
    color: #f3dfaa;
    font-size: 10px;
    letter-spacing: .10em;
    font-weight: 800;
}
.cp-prize-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    color: #16130d;
    font-weight: 900;
    letter-spacing: .06em;
    border: 2px solid rgba(201,169,106,.78);
    background:
        radial-gradient(circle at 32% 28%, #fff7d4 0 12%, transparent 13%),
        radial-gradient(circle, #e6cd8b, #b9934b 62%, #765827 100%);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), 0 18px 34px rgba(0,0,0,.18);
}
.cp-payback-badge {
    display: inline-flex;
    width: max-content;
    margin-top: 4px;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-gold-bright, #c9a96a);
    border: 1px solid rgba(201,169,106,.36);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    background: rgba(201,169,106,.08);
}
.cases-premium-skin:not(.light-theme) .cp-prize-card,
html:not(.light-theme) .cases-premium-skin .cp-prize-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(201,169,106,.22), transparent 30%),
        linear-gradient(145deg, rgba(32,29,35,.96), rgba(12,11,15,.90));
    color: var(--cp-ivory, #f5f1e8);
    box-shadow: 0 24px 58px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.055);
}
.cases-premium-skin:not(.light-theme) .cp-prize-name,
html:not(.light-theme) .cases-premium-skin .cp-prize-name { color: var(--cp-ivory, #f5f1e8) !important; }
.cases-premium-skin:not(.light-theme) .cp-prize-meta,
html:not(.light-theme) .cases-premium-skin .cp-prize-meta { color: rgba(245,241,232,.58) !important; }
.cases-premium-skin:not(.light-theme) .cp-prize-card .cp-rarity-badge,
html:not(.light-theme) .cases-premium-skin .cp-prize-card .cp-rarity-badge { background: rgba(0,0,0,.30); }
.cases-premium-skin:not(.light-theme) .cp-prize-card::before,
html:not(.light-theme) .cases-premium-skin .cp-prize-card::before { opacity: .42; }

@media (max-width: 640px) {
    .cp-manifest-head { display: block; }
    .cp-prize-gallery {
        display: flex;
        overflow-x: auto;
        padding: 2px 2px 12px;
        scroll-snap-type: x mandatory;
    }
    .cp-prize-card {
        min-width: 158px;
        max-width: 168px;
        min-height: 214px;
        scroll-snap-align: start;
    }
    .cp-prize-media { min-height: 112px; }
    .cp-prize-media img { height: 96px; }
    .cp-pay-options { font-size: .78rem; }
}

/* 2026-10-01 20:03 — premium case-cover composition.
   Customer feedback: the first in-card preview must not look like plain
   product tiles. This layer turns the same real prize assets into a designed
   vault composition: layered hero pieces, rarity glow, and an editorial badge. */
.cp-case-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    min-height: 186px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(201,169,106,.22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.82), transparent 23%),
        radial-gradient(circle at 74% 16%, rgba(201,169,106,.28), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.90), rgba(240,236,224,.64) 62%, rgba(226,219,198,.70));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 24px 58px rgba(0,0,0,.14);
}
.cp-case-showcase::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(22,19,13,.08);
    border-radius: 18px;
    pointer-events: none;
}
.cp-case-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 39%, rgba(255,255,255,.52) 45%, transparent 51%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(22,19,13,.035) 23px 24px);
    opacity: .65;
    pointer-events: none;
}
.cp-showcase-stage {
    position: relative;
    min-height: 160px;
    isolation: isolate;
}
.cp-showcase-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(320px, 86%);
    height: 104px;
    border: 1px solid rgba(201,169,106,.26);
    border-radius: 999px;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: .80;
}
.cp-showcase-orbit-b {
    width: min(250px, 70%);
    height: 74px;
    transform: translate(-50%, -50%) rotate(12deg);
    opacity: .45;
}
.cp-showcase-title {
    position: absolute;
    left: 12px;
    bottom: 8px;
    z-index: 5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .20em;
    color: rgba(22,19,13,.44);
    text-transform: uppercase;
}
.cp-showcase-item {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 22px;
    background:
        radial-gradient(circle at 28% 16%, rgba(255,255,255,.96), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(238,232,214,.46));
    box-shadow: 0 24px 44px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.82);
    transform-origin: 50% 92%;
}
.cp-showcase-item::after {
    content: '';
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 10px;
    height: 8px;
    border-radius: 999px;
    background: rgba(22,19,13,.16);
    filter: blur(5px);
    z-index: -1;
}
.cp-showcase-item img {
    width: 94%;
    height: 94%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 17px 18px rgba(0,0,0,.20));
}
.cp-showcase-item[data-rarity="legendary"] {
    border-color: rgba(201,169,106,.78);
    box-shadow: 0 0 0 1px rgba(201,169,106,.22), 0 28px 56px -24px rgba(201,169,106,.68), inset 0 1px 0 rgba(255,255,255,.82);
}
.cp-showcase-item[data-rarity="epic"] { border-color: rgba(186,122,255,.55); }
.cp-showcase-item[data-rarity="rare"] { border-color: rgba(90,160,255,.52); }
.cp-showcase-item-1 { left: 50%; top: 47%; transform: translate(-50%, -50%) rotate(-2deg) scale(1.10); z-index: 4; }
.cp-showcase-item-2 { left: 17%; top: 52%; transform: translate(-50%, -50%) rotate(-11deg) scale(.86); }
.cp-showcase-item-3 { left: 81%; top: 52%; transform: translate(-50%, -50%) rotate(10deg) scale(.86); }
.cp-showcase-item-4 { left: 35%; top: 25%; transform: translate(-50%, -50%) rotate(8deg) scale(.66); opacity: .94; }
.cp-showcase-item-5 { left: 66%; top: 25%; transform: translate(-50%, -50%) rotate(-9deg) scale(.66); opacity: .94; }
.cp-showcase-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    color: #17120a;
    font-weight: 900;
    letter-spacing: .08em;
    border: 2px solid rgba(201,169,106,.78);
    background:
        radial-gradient(circle at 32% 25%, #fff8d6 0 12%, transparent 13%),
        radial-gradient(circle, #ead38e, #bc9449 62%, #6d4e22 100%);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), 0 18px 34px rgba(0,0,0,.20);
}
.cp-showcase-side {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 108px;
    padding: 10px 8px 8px 0;
    color: rgba(22,19,13,.58) !important;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .15em;
}
.cp-showcase-side span { font-size: 1rem; color: rgba(22,19,13,.68); }
.cp-showcase-side small { max-width: 105px; font-size: 10px; line-height: 1.25; color: rgba(22,19,13,.42); }

.cases-premium-skin:not(.light-theme) .cp-case-showcase,
html:not(.light-theme) .cases-premium-skin .cp-case-showcase {
    border-color: rgba(53,224,141,.30);
    background:
        radial-gradient(circle at 22% 14%, rgba(53,224,141,.18), transparent 25%),
        radial-gradient(circle at 78% 10%, rgba(201,169,106,.16), transparent 28%),
        linear-gradient(135deg, rgba(15,27,20,.92), rgba(6,10,8,.72));
    box-shadow: inset 0 1px 0 rgba(237,243,236,.06), 0 28px 74px rgba(0,0,0,.36);
}
.cases-premium-skin:not(.light-theme) .cp-case-showcase::before,
html:not(.light-theme) .cases-premium-skin .cp-case-showcase::before { border-color: rgba(237,243,236,.08); }
.cases-premium-skin:not(.light-theme) .cp-case-showcase::after,
html:not(.light-theme) .cases-premium-skin .cp-case-showcase::after {
    background:
        linear-gradient(120deg, transparent 0 39%, rgba(53,224,141,.12) 45%, transparent 51%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(237,243,236,.045) 23px 24px);
}
.cases-premium-skin:not(.light-theme) .cp-showcase-item,
html:not(.light-theme) .cases-premium-skin .cp-showcase-item {
    border-color: rgba(237,243,236,.14);
    background:
        radial-gradient(circle at 28% 16%, rgba(237,243,236,.14), transparent 34%),
        linear-gradient(180deg, rgba(27,36,30,.88), rgba(10,16,12,.70));
    box-shadow: 0 26px 52px -22px rgba(0,0,0,.86), inset 0 1px 0 rgba(255,255,255,.06);
}
.cases-premium-skin:not(.light-theme) .cp-showcase-item img,
html:not(.light-theme) .cases-premium-skin .cp-showcase-item img { mix-blend-mode: normal; }
.cases-premium-skin:not(.light-theme) .cp-showcase-title,
html:not(.light-theme) .cases-premium-skin .cp-showcase-title,
.cases-premium-skin:not(.light-theme) .cp-showcase-side,
html:not(.light-theme) .cases-premium-skin .cp-showcase-side,
.cases-premium-skin:not(.light-theme) .cp-showcase-side span,
html:not(.light-theme) .cases-premium-skin .cp-showcase-side span,
.cases-premium-skin:not(.light-theme) .cp-showcase-side small,
html:not(.light-theme) .cases-premium-skin .cp-showcase-side small { color: rgba(237,243,236,.58) !important; }
.cases-premium-skin:not(.light-theme) .cp-showcase-title,
html:not(.light-theme) .cases-premium-skin .cp-showcase-title { color: rgba(53,224,141,.56) !important; }

@media (max-width: 640px) {
    .cp-case-showcase {
        grid-template-columns: minmax(0, 1fr);
        min-height: 196px;
        padding: 10px;
        border-radius: 18px;
    }
    .cp-showcase-stage { min-height: 172px; }
    .cp-showcase-side {
        position: absolute;
        top: 12px;
        right: 14px;
        min-width: 0;
        padding: 0;
        gap: 1px;
    }
    .cp-showcase-side span { font-size: .78rem; }
    .cp-showcase-side small { display: none; }
    .cp-showcase-item { width: 102px; height: 102px; border-radius: 18px; }
    .cp-showcase-item-1 { left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-2deg) scale(1.08); }
    .cp-showcase-item-2 { left: 21%; top: 58%; transform: translate(-50%, -50%) rotate(-12deg) scale(.78); }
    .cp-showcase-item-3 { left: 79%; top: 58%; transform: translate(-50%, -50%) rotate(11deg) scale(.78); }
    .cp-showcase-item-4 { left: 34%; top: 28%; transform: translate(-50%, -50%) rotate(8deg) scale(.58); }
    .cp-showcase-item-5 { left: 66%; top: 28%; transform: translate(-50%, -50%) rotate(-9deg) scale(.58); }
}

/* 2026-10-01 prod visual verification: mobile detail must never be wider
   than the viewport. The preview-flow desktop grid is intentionally rich,
   but on phones the active case becomes a strict single-column stack. */
@media (max-width: 720px) {
    .cases-premium-skin .cases-grid[data-flow-state="detail"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .cases-premium-skin .case-block.is-detail-active {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-card,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest,
    .cases-premium-skin .case-block.is-detail-active .cp-case-showcase,
    .cases-premium-skin .case-block.is-detail-active .cp-prize-gallery,
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-scroll {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-showcase-stage {
        min-width: 0 !important;
        overflow: hidden !important;
    }
}

/* 2026-10-01 prod screenshot 20:33 — readability fix.
   On light backgrounds the small rarity caption inside prize cards was too
   low-contrast, especially on dark cards with DH coins. Make prize captions
   look like deliberate premium labels, not faint outlines. */
.cases-premium-skin .cp-manifest-lede,
html.light-theme .cases-premium-skin .cp-manifest-lede {
    color: rgba(34, 30, 22, .68) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
}
.cases-premium-skin:not(.light-theme) .cp-manifest-lede,
html:not(.light-theme) .cases-premium-skin .cp-manifest-lede {
    color: rgba(242,238,227,.72) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.42) !important;
}
.cases-premium-skin .cp-prize-card .cp-rarity-badge {
    min-height: 20px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    font-weight: 900 !important;
    color: #06140c !important;
    border-color: rgba(53,224,141,.70) !important;
    background: linear-gradient(180deg, #8ff3bd, #35e08d) !important;
    box-shadow: 0 8px 18px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.45) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.cases-premium-skin .cp-prize-card .cp-rarity-badge[data-rarity="rare"] {
    color: #06111f !important;
    border-color: rgba(90,160,255,.70) !important;
    background: linear-gradient(180deg, #b8d7ff, #5aa0ff) !important;
}
.cases-premium-skin .cp-prize-card .cp-rarity-badge[data-rarity="epic"] {
    color: #180521 !important;
    border-color: rgba(200,120,255,.74) !important;
    background: linear-gradient(180deg, #e0b7ff, #c87fff) !important;
}
.cases-premium-skin .cp-prize-card .cp-rarity-badge[data-rarity="legendary"] {
    color: #1c1200 !important;
    border-color: rgba(255,190,80,.82) !important;
    background: linear-gradient(180deg, #ffe4a8, #ffbe50) !important;
}
.cases-premium-skin .cp-prize-meta,
.cases-premium-skin:not(.light-theme) .cp-prize-meta,
html:not(.light-theme) .cases-premium-skin .cp-prize-meta {
    color: rgba(242,238,227,.78) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.42) !important;
}
html.light-theme .cases-premium-skin .cp-prize-meta {
    color: rgba(34, 30, 22, .62) !important;
    text-shadow: none !important;
}

/* Follow-up: the badge is readable now; keep the actual prize name/price
   readable on dark prize cards in light theme too. */
.cases-premium-skin .cp-prize-card .cp-prize-name,
html.light-theme .cases-premium-skin .cp-prize-card .cp-prize-name,
.cases-premium-skin:not(.light-theme) .cp-prize-card .cp-prize-name,
html:not(.light-theme) .cases-premium-skin .cp-prize-card .cp-prize-name {
    color: #f8fff4 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.58) !important;
}
.cases-premium-skin .cp-prize-card .cp-prize-meta,
html.light-theme .cases-premium-skin .cp-prize-card .cp-prize-meta,
.cases-premium-skin:not(.light-theme) .cp-prize-card .cp-prize-meta,
html:not(.light-theme) .cases-premium-skin .cp-prize-card .cp-prize-meta {
    color: rgba(248,255,244,.84) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.58) !important;
    font-weight: 900 !important;
}

/* 2026-10-02 customer screenshot 11:17 — universal animated case cover.
   The card cover must not look like cheap white product tiles. It is now a
   generated Dark Haven vault/drop scene (DH coins + preorder box + cash) with
   lightweight CSS motion; the real prize photos remain in the detailed
   manifest below for transparency. */
.cp-case-showcase {
    min-height: 206px;
    padding: 10px;
    gap: 10px;
    border-color: rgba(53,224,141,.32);
    background:
        radial-gradient(circle at 22% 10%, rgba(53,224,141,.25), transparent 28%),
        linear-gradient(135deg, rgba(9,16,12,.98), rgba(4,7,6,.90));
    box-shadow: inset 0 1px 0 rgba(237,243,236,.10), 0 26px 72px rgba(0,0,0,.34);
}
.cp-case-showcase::before {
    inset: 9px;
    border-color: rgba(237,243,236,.11);
    box-shadow: inset 0 0 34px rgba(53,224,141,.10);
}
.cp-case-showcase::after {
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,240,178,.13) 48%, transparent 54%),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(237,243,236,.055) 25px 26px);
    opacity: .78;
    animation: cp-showcase-light-sweep 6.8s ease-in-out infinite;
}
.cp-showcase-stage {
    min-height: 184px;
    overflow: hidden;
    border-radius: 18px;
    background: #06100b;
}
.cp-showcase-art,
.cp-showcase-vignette,
.cp-showcase-scanline {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}
.cp-showcase-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.05) brightness(.92);
    animation: cp-showcase-breathe 10s ease-in-out infinite;
}
.cp-showcase-vignette {
    z-index: 2;
    background:
        radial-gradient(circle at 50% 56%, transparent 0 35%, rgba(0,0,0,.16) 54%, rgba(0,0,0,.52) 100%),
        linear-gradient(180deg, rgba(3,8,6,.20), rgba(3,8,6,.44));
}
.cp-showcase-scanline {
    z-index: 7;
    inset: 8px;
    border-radius: 16px;
    border: 1px solid rgba(53,224,141,.20);
    background:
        linear-gradient(180deg, transparent 0 47%, rgba(53,224,141,.20) 50%, transparent 53%),
        repeating-linear-gradient(0deg, transparent 0 6px, rgba(237,243,236,.045) 7px 8px);
    opacity: .50;
    mix-blend-mode: screen;
    animation: cp-showcase-scan 4.9s linear infinite;
}
.cp-showcase-orbit {
    z-index: 5;
    border-color: rgba(53,224,141,.34);
    box-shadow: 0 0 22px rgba(53,224,141,.10);
    mix-blend-mode: screen;
    animation: cp-showcase-orbit 8s ease-in-out infinite;
}
.cp-showcase-orbit-b {
    border-color: rgba(201,169,106,.30);
    animation-duration: 10s;
    animation-direction: reverse;
}
.cp-showcase-title {
    z-index: 8;
    left: 14px;
    bottom: 12px;
    color: rgba(53,224,141,.82) !important;
    text-shadow: 0 0 18px rgba(53,224,141,.34), 0 2px 9px rgba(0,0,0,.70);
}
.cp-showcase-chip {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    border: 0;
    background-color: transparent;
    background-image: url("img/dh-coin-dark.137c7e6ba6c3.png");
    background-image: -webkit-image-set(url("img/dh-coin-dark.f793f485f6c4.webp") 1x);
    background-image: image-set(url("img/dh-coin-dark.f793f485f6c4.webp") type('image/webp') 1x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(53,224,141,.42)) drop-shadow(0 16px 20px rgba(0,0,0,.42));
    opacity: .92;
    animation: cp-showcase-coin-float 5.8s ease-in-out infinite;
}
.cp-showcase-chip-a { left: 10%; top: 62%; transform: rotate(-12deg); }
.cp-showcase-chip-b { right: 14%; top: 58%; width: 46px; height: 46px; transform: rotate(10deg); animation-delay: -1.8s; }
.cp-showcase-chip-c { left: 53%; top: 18%; width: 38px; height: 38px; transform: rotate(7deg); opacity: .72; animation-delay: -3.2s; }
html.light-theme .cases-premium-skin .cp-showcase-chip {
    background-image: url("img/dh-coin-light.50ed0a939dd2.png");
    background-image: -webkit-image-set(url("img/dh-coin-light.e390a49ef97a.webp") 1x);
    background-image: image-set(url("img/dh-coin-light.e390a49ef97a.webp") type('image/webp') 1x);
}
.cp-showcase-side {
    z-index: 8;
    min-width: 102px;
    color: rgba(237,243,236,.62) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.cp-showcase-side span { color: rgba(245,241,232,.80) !important; }
.cp-showcase-side small { color: rgba(237,243,236,.54) !important; }

@keyframes cp-showcase-breathe {
    0%, 100% { transform: scale(1.035) translate3d(0,0,0); filter: saturate(1.08) contrast(1.05) brightness(.92); }
    50% { transform: scale(1.075) translate3d(-1.2%, -.8%, 0); filter: saturate(1.16) contrast(1.08) brightness(1.0); }
}
@keyframes cp-showcase-light-sweep {
    0%, 24% { transform: translateX(-44%); opacity: .34; }
    48%, 100% { transform: translateX(44%); opacity: .78; }
}
@keyframes cp-showcase-scan {
    0% { background-position: 0 -170px, 0 0; opacity: .34; }
    50% { opacity: .62; }
    100% { background-position: 0 190px, 0 14px; opacity: .34; }
}
@keyframes cp-showcase-orbit {
    0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: .55; }
    50% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.04); opacity: .86; }
}
@keyframes cp-showcase-coin-float {
    0%, 100% { translate: 0 0; filter: brightness(1); }
    50% { translate: 0 -9px; filter: brightness(1.16); }
}

@media (max-width: 640px) {
    .cp-case-showcase { min-height: 218px; }
    .cp-showcase-stage { min-height: 196px; }
    .cp-showcase-art img { object-position: 50% 50%; }
    .cp-showcase-chip-a { left: 7%; top: 63%; width: 50px; height: 50px; }
    .cp-showcase-chip-b { right: 9%; top: 58%; width: 42px; height: 42px; }
    .cp-showcase-chip-c { left: 55%; top: 17%; }
    .cp-showcase-title { left: 12px; bottom: 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-case-showcase::after,
    .cp-showcase-art img,
    .cp-showcase-scanline,
    .cp-showcase-orbit,
    .cp-showcase-chip {
        animation: none !important;
    }
}

/* 2026-10-02 wow-premium pass: every public DROP tier has its own generated
   cover art and a richer card interaction layer. */
.cases-premium-skin .cp-card {
    transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease, border-color .32s ease;
    will-change: transform;
}
.cases-premium-skin .case-block:hover .cp-card,
.cases-premium-skin .case-block:focus-within .cp-card {
    transform: translateY(-6px);
    box-shadow: 0 34px 82px rgba(0,0,0,.18), 0 0 0 1px rgba(53,224,141,.16);
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block:hover .cp-card,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block:focus-within .cp-card {
    transform: none !important;
}
.cases-premium-skin .case-block:active .cp-card { transform: translateY(-2px) scale(.995); }
.cases-premium-skin .cp-case-showcase {
    min-height: 236px;
    transform: translateZ(0);
}
.cases-premium-skin .cp-case-showcase::before {
    z-index: 9;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.cases-premium-skin .case-block:hover .cp-case-showcase::before,
.cases-premium-skin .case-block:focus-within .cp-case-showcase::before {
    border-color: rgba(245,215,135,.34);
    box-shadow: inset 0 0 46px rgba(53,224,141,.18), 0 0 28px rgba(53,224,141,.12);
}
.cases-premium-skin .cp-showcase-stage { min-height: 214px; }
.cases-premium-skin .cp-showcase-art img {
    filter: saturate(1.13) contrast(1.08) brightness(.90);
    transition: filter .42s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.cases-premium-skin .case-block:hover .cp-showcase-art img,
.cases-premium-skin .case-block:focus-within .cp-showcase-art img {
    transform: scale(1.105) translate3d(-1.5%, -1%, 0);
    filter: saturate(1.28) contrast(1.11) brightness(1.04);
}
.cases-premium-skin .cp-case-showcase--entry { --cp-tier-accent: 53,224,141; --cp-tier-gold: 214,183,103; }
.cases-premium-skin .cp-case-showcase--rotation { --cp-tier-accent: 59,239,166; --cp-tier-gold: 232,203,116; }
.cases-premium-skin .cp-case-showcase--heat { --cp-tier-accent: 255,168,73; --cp-tier-gold: 255,216,126; }
.cases-premium-skin .cp-case-showcase--immortal { --cp-tier-accent: 245,204,102; --cp-tier-gold: 255,229,142; }
.cases-premium-skin .cp-case-showcase--heat,
.cases-premium-skin .cp-case-showcase--immortal {
    border-color: rgba(var(--cp-tier-gold), .34);
}
.cases-premium-skin .cp-case-showcase--heat .cp-showcase-scanline,
.cases-premium-skin .cp-case-showcase--immortal .cp-showcase-scanline {
    border-color: rgba(var(--cp-tier-gold), .24);
    background:
        linear-gradient(180deg, transparent 0 47%, rgba(var(--cp-tier-gold), .20) 50%, transparent 53%),
        repeating-linear-gradient(0deg, transparent 0 6px, rgba(237,243,236,.040) 7px 8px);
}
.cases-premium-skin .cp-case-showcase--rotation .cp-showcase-orbit,
.cases-premium-skin .cp-case-showcase--heat .cp-showcase-orbit,
.cases-premium-skin .cp-case-showcase--immortal .cp-showcase-orbit {
    width: min(360px, 92%);
    height: 122px;
}
.cases-premium-skin .cp-case-showcase--immortal .cp-showcase-title,
.cases-premium-skin .cp-case-showcase--heat .cp-showcase-title {
    color: rgba(var(--cp-tier-gold), .88) !important;
    text-shadow: 0 0 22px rgba(var(--cp-tier-gold), .30), 0 2px 9px rgba(0,0,0,.72);
}
.cases-premium-skin .cp-showcase-chip {
    opacity: .82;
    transition: opacity .25s ease, transform .35s ease;
    /* 2026-10-02 11:40 feedback: use real DH coin asset, not generated/text coin. */
    filter: drop-shadow(0 0 12px rgba(var(--cp-tier-accent, 53,224,141), .42)) drop-shadow(0 18px 24px rgba(0,0,0,.48));
}
.cases-premium-skin .case-block:hover .cp-showcase-chip,
.cases-premium-skin .case-block:focus-within .cp-showcase-chip { opacity: .98; }
.cases-premium-skin .cp-case-showcase--immortal .cp-showcase-chip-a { width: 66px; height: 66px; }
.cases-premium-skin .cp-case-showcase--rotation .cp-showcase-chip-b { top: 50%; }
.cases-premium-skin .cp-case-showcase--heat .cp-showcase-chip-c,
.cases-premium-skin .cp-case-showcase--immortal .cp-showcase-chip-c { top: 14%; }

@media (max-width: 640px) {
    .cases-premium-skin .cp-case-showcase { min-height: 248px; }
    .cases-premium-skin .cp-showcase-stage { min-height: 226px; }
    .cases-premium-skin .case-block:hover .cp-card,
    .cases-premium-skin .case-block:focus-within .cp-card { transform: none; }
    .cases-premium-skin .cp-showcase-art img { object-position: 50% 50%; }
}

/* 2026-10-02 18:08 feedback: the expanded case contents also need the
   premium treatment. Keep real prizes visible, but remove white photo-card
   backgrounds, use the real DH coin, and make PRE a badge over the item photo. */
.cases-premium-skin .cp-prize-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(53,224,141,.16), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(201,169,106,.18), transparent 36%),
        linear-gradient(145deg, rgba(9,13,12,.98), rgba(28,25,32,.96) 56%, rgba(9,16,13,.98)) !important;
    border-color: rgba(53,224,141,.22) !important;
    box-shadow: 0 22px 56px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055) !important;
    color: var(--cp-ivory, #f5f1e8) !important;
}
.cases-premium-skin .cp-prize-card::before {
    background:
        linear-gradient(120deg, transparent 0 43%, rgba(53,224,141,.12) 47%, transparent 53%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px) !important;
    opacity: .52 !important;
}
.cases-premium-skin .cp-prize-card[data-rarity="legendary"] {
    border-color: rgba(245,204,102,.58) !important;
    box-shadow: 0 22px 62px rgba(245,204,102,.15), 0 20px 52px rgba(0,0,0,.40) !important;
}
.cases-premium-skin .cp-prize-media {
    min-height: 128px;
    margin: 12px 12px 0;
    padding: 14px 12px 8px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 34%, rgba(245,204,102,.16), transparent 42%),
        linear-gradient(145deg, rgba(4,7,7,.60), rgba(28,31,34,.48));
    box-shadow: inset 0 0 30px rgba(0,0,0,.34);
}
.cases-premium-skin .cp-prize-media .cp-prize-img {
    width: min(118px, 88%) !important;
    height: 108px !important;
    object-fit: contain !important;
    border-radius: 14px;
    background: transparent !important;
    mix-blend-mode: multiply;
    filter: brightness(1.22) contrast(1.18) saturate(1.06) drop-shadow(0 18px 20px rgba(0,0,0,.46)) !important;
}
.cases-premium-skin .cp-prize-media .cp-prize-dh-img {
    width: 88px !important;
    height: 88px !important;
    object-fit: contain !important;
    background-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(53,224,141,.34)) drop-shadow(0 18px 18px rgba(0,0,0,.42)) !important;
}
.cases-premium-skin .cp-prize-mystery {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    border: 1px solid rgba(245,204,102,.32);
    color: rgba(245,204,102,.86);
    background: rgba(0,0,0,.22);
    font-weight: 900;
}
.cases-premium-skin .cp-prize-preorder {
    top: 12px;
    left: 12px;
    border: 1px solid rgba(245,204,102,.38);
    background: rgba(0,0,0,.70);
    color: #f5d781;
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.cases-premium-skin .cp-prize-name,
html.light-theme .cases-premium-skin .cp-prize-name,
html:not(.light-theme) .cases-premium-skin .cp-prize-name {
    color: var(--cp-ivory, #f5f1e8) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.cases-premium-skin .cp-prize-meta,
html.light-theme .cases-premium-skin .cp-prize-meta,
html:not(.light-theme) .cases-premium-skin .cp-prize-meta {
    color: rgba(245,241,232,.70) !important;
}
.cases-premium-skin .cp-manifest-table .cp-col-name {
    position: relative;
    padding-left: 72px !important;
    min-height: 48px;
    vertical-align: middle;
}
.cases-premium-skin .cp-manifest-table .cp-col-name > span:not(.cp-row-visual):not(.cp-payback-badge) {
    display: block;
}
.cases-premium-skin .cp-row-visual {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px !important;
    border: 1px solid rgba(53,224,141,.22);
    background: radial-gradient(circle at 50% 35%, rgba(245,204,102,.12), rgba(4,8,8,.74));
    box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}
.cases-premium-skin .cp-row-visual > .cp-row-photo,
.cases-premium-skin .cp-row-visual > .cp-row-coin-img,
.cases-premium-skin .cp-row-visual > .cp-row-mystery {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cases-premium-skin .cp-row-visual > .cp-row-photo {
    padding: 3px;
    mix-blend-mode: multiply;
    filter: brightness(1.22) contrast(1.18) saturate(1.06);
}
.cases-premium-skin .cp-winnings-table .cp-row-photo {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain !important;
}
.cases-premium-skin .cp-drop-chip > .cp-row-preorder {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 9px;
}
.cases-premium-skin .cp-row-coin-img {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 0 8px rgba(53,224,141,.38));
}
.cases-premium-skin .cp-row-visual .cp-row-preorder {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f5d781 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
}
.cases-premium-skin .cp-row-visual .cp-row-coin {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cases-premium-skin .cp-row-visual .cp-row-coin-img {
    width: 34px !important;
    height: 34px !important;
}
.cases-premium-skin .cp-row-preorder-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    padding: 1px 3px;
    border-radius: 5px;
    background: rgba(0,0,0,.78);
    color: #f5d781;
    border: 1px solid rgba(245,204,102,.38);
    font-size: 8px;
    line-height: 1;
    letter-spacing: .04em;
    font-weight: 900;
}
@media (max-width: 640px) {
    .cases-premium-skin .cp-prize-gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 0 2px 10px;
    }
    .cases-premium-skin .cp-prize-card {
        flex: 0 0 218px;
        scroll-snap-align: start;
    }
    .cases-premium-skin .cp-prize-media .cp-prize-img { height: 102px !important; }
}

/* 2026-10-03 feedback: mobile manifest rows must read as one straight
   row. The icon lives in the row gutter; name and price start on the same
   x-axis, so prices no longer sit under the icon. */
@media (max-width: 640px) {
    .cases-premium-skin .cp-manifest-table tbody tr {
        position: relative !important;
        min-height: 76px !important;
        padding: 12px 12px 12px 76px !important;
        align-items: center !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-name {
        position: static !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-name > span:not(.cp-row-visual):not(.cp-payback-badge) {
        display: block !important;
        max-width: 100% !important;
        text-align: left !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-row-visual {
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-row-coin-img {
        width: 40px !important;
        height: 40px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table tbody tr {
        min-height: 76px !important;
        padding: 12px 12px 12px 82px !important;
    }
    .cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-row-visual {
        left: 14px !important;
        top: 50% !important;
        width: 48px !important;
        height: 48px !important;
        transform: translateY(-50%) !important;
    }
}


/* 2026-10-03 feedback: replace the temporary CSS glyphs with generated
   premium Dark Haven symbols. The top manifest gallery remains a designed
   showcase (no product-photo cards), while real product photos stay only in
   the table rows below. */
.cases-premium-skin .cp-prize-gallery .cp-prize-img,
.cases-premium-skin .cp-prize-gallery .cp-prize-img--preorder {
    display: none !important;
}
.cases-premium-skin .cp-prize-symbol {
    position: relative;
    z-index: 1;
    display: block;
    width: 112px;
    height: 112px;
    max-width: 88%;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter:
        drop-shadow(0 0 16px rgba(53,224,141,.30))
        drop-shadow(0 18px 20px rgba(0,0,0,.48));
}
.cases-premium-skin .cp-prize-card:nth-child(3n) .cp-prize-symbol {
    transform: rotate(1.4deg);
}
.cases-premium-skin .cp-prize-symbol::before,
.cases-premium-skin .cp-prize-symbol::after,
.cases-premium-skin .cp-prize-symbol > span,
.cases-premium-skin .cp-prize-symbol > span::before,
.cases-premium-skin .cp-prize-symbol > span::after {
    content: none !important;
    display: none !important;
}
.cases-premium-skin .cp-prize-symbol--item {
    background-image: url("img/case-prize-symbol-item.0d4fd9da0faf.png");
    background-image: image-set(
        url("img/case-prize-symbol-item.eb32e5fb88ba.webp") type('image/webp'),
        url("img/case-prize-symbol-item.0d4fd9da0faf.png") type('image/png')
    );
}
.cases-premium-skin .cp-prize-symbol--preorder {
    background-image: url("img/case-prize-symbol-preorder.02121e033dcc.png");
    background-image: image-set(
        url("img/case-prize-symbol-preorder.a1238804adc0.webp") type('image/webp'),
        url("img/case-prize-symbol-preorder.02121e033dcc.png") type('image/png')
    );
}
@media (max-width: 640px) {
    .cases-premium-skin .cp-prize-symbol {
        width: 104px;
        height: 104px;
    }
}

/* 2026-10-03 footer/customer screenshot: the global discount tab is fixed at
   the bottom on mobile and can cover the copyright line. Keep enough safe
   space under the cases footer so "Все права защищены" remains visible. */
@media (max-width: 640px) {
    .cases-premium-skin footer {
        padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 2026-10-03 footer readability: on cases pages the animated glitch clones
   can duplicate/overlay the copyright line in light theme screenshots. Keep
   the footer static and readable while preserving the terminal typography. */
.cases-premium-skin #footer-text.glitch-text {
    display: inline-block;
    line-height: 1.45;
    animation: none !important;
    transform: none !important;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.cases-premium-skin #footer-text.glitch-text::before,
.cases-premium-skin #footer-text.glitch-text::after {
    content: none !important;
    display: none !important;
}

/* 2026-10-03 systemic mobile row alignment: keep the current visual design,
   but stop mobile prize visuals from drifting when value text length changes. */
@media (max-width: 640px) {
    .cases-premium-skin .cp-manifest-table tbody tr {
        align-content: center !important;
        row-gap: 4px !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-name {
        align-self: end !important;
    }
    .cases-premium-skin .cp-manifest-table .cp-col-price {
        align-self: start !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 12px !important;
        min-width: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize::before {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 12px !important;
        min-width: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-coin,
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-photo,
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-preorder {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        margin: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > span:not(.cp-row-coin):not(.cp-row-preorder):not(.cp-payback-badge) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* 2026-10-03 customer screenshot: center the actual item/coin artwork inside
   the manifest row square. Keep the square, colors and row design unchanged;
   only the child visual is pinned to the exact center with even inset. */
.cases-premium-skin .cp-row-visual > .cp-row-photo,
.cases-premium-skin .cp-row-visual > .cp-row-coin,
.cases-premium-skin .cp-row-visual > .cp-row-preorder,
.cases-premium-skin .cp-row-visual > .cp-row-mystery {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    max-width: 40px !important;
    max-height: 40px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.cases-premium-skin .cp-row-visual > .cp-row-photo {
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}
.cases-premium-skin .cp-row-visual > .cp-row-coin,
.cases-premium-skin .cp-row-visual > .cp-row-preorder,
.cases-premium-skin .cp-row-visual > .cp-row-mystery {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-position: 50% 50% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Mobile detail rows have older high-specificity rules for .cp-row-photo/.cp-row-coin.
   Re-apply exact centering at higher specificity so expanded cases are covered too. */
.cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-visual > .cp-row-photo,
.cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-visual > .cp-row-coin,
.cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-visual > .cp-row-preorder,
.cases-premium-skin .case-block.is-detail-active .cp-manifest-table .cp-col-name .cp-row-visual > .cp-row-mystery {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    max-width: 40px !important;
    max-height: 40px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* 2026-10-04 systemic UI hardening: shared buyer-facing layout contract.
   This is intentionally layout-only: no colors/assets/economics semantics. */
.cases-premium-skin .cp-withdraw-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) !important;
    align-items: center !important;
    column-gap: 22px !important;
}
.cases-premium-skin .cp-withdraw-row .cp-withdraw-row-status {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-width: max-content !important;
    text-align: right !important;
    white-space: nowrap !important;
}
.cases-premium-skin .cp-withdraw-row .cp-withdraw-row-status > strong,
.cases-premium-skin .cp-withdraw-row .cp-withdraw-row-status > span {
    white-space: nowrap !important;
}
.cases-premium-skin .cp-withdraw-cancel {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.cases-premium-skin .cp-winnings-table {
    min-width: 880px;
}
.cases-premium-skin .cp-winnings-table td.cp-col-prize {
    min-width: 300px;
}
.cases-premium-skin .cp-winnings-table td.cp-col-status {
    min-width: 250px;
}
.cases-premium-skin .cp-winnings-table .cp-status-cell-content {
    display: grid !important;
    grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr);
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
}
.cases-premium-skin .cp-winnings-table .cp-w-status {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.35;
}
.cases-premium-skin .cp-winnings-table .cp-claim-form {
    margin-top: 0 !important;
    justify-self: end !important;
    white-space: nowrap !important;
}
.cases-premium-skin .cp-winnings-table .cp-claim-form .btn-terminal,
.cases-premium-skin .cp-sbp-row .btn-terminal,
.cases-premium-skin .cp-sbp-btn,
.cases-premium-skin .cp-sbp-pay-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.cases-premium-skin .cp-reel-tile {
    display: grid !important;
    grid-template-rows: minmax(68px, 1fr) auto 8px !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    align-content: stretch !important;
    row-gap: 6px !important;
}
.cases-premium-skin .cp-reel-tile > img,
.cases-premium-skin .cp-reel-tile > .cp-tile-coin {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    transform: translateY(8px) !important;
}
.cases-premium-skin .cp-reel-tile > .cp-tile-name {
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
}
.cases-premium-skin .cp-reel-tile::after {
    grid-row: 3 !important;
    align-self: end !important;
    justify-self: center !important;
    margin-top: 0 !important;
}

@media (min-width: 1180px) {
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block {
        width: auto !important;
        min-width: 0 !important;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card {
        width: 100% !important;
        min-width: 0 !important;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-case-name {
        font-size: clamp(28px, 2.35vw, 44px) !important;
    }
}

@media (max-width: 640px) {
    .cases-premium-skin .cp-withdraw-row {
        grid-template-columns: 1fr !important;
        row-gap: 10px !important;
    }
    .cases-premium-skin .cp-withdraw-row .cp-withdraw-row-status {
        justify-content: space-between !important;
        min-width: 0 !important;
        width: 100% !important;
        white-space: normal !important;
    }
    .cases-premium-skin .cp-winnings-table {
        min-width: 0 !important;
    }
    .cases-premium-skin .cp-winnings-scroll {
        overflow-x: visible !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-status {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
        width: 100% !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-status::before {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-status-cell-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-self: stretch !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-status-cell-content .cp-w-status {
        text-align: right !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-status-cell-content .cp-claim-form {
        margin-top: 0 !important;
    }
    .cases-premium-skin .cp-reel-tile > img,
    .cases-premium-skin .cp-reel-tile > .cp-tile-coin {
        transform: translateY(6px) !important;
    }
}

/* 2026-10-05 follow-up: table semantics and catalog geometry.
   Desktop headings/cells remain table cells; layout lives in inner wrappers.
   Catalog wrappers stretch their cards but detail mode keeps intrinsic height. */
@media (min-width: 641px) {
    .cases-premium-skin .cp-winnings-table th.cp-col-prize,
    .cases-premium-skin .cp-winnings-table th.cp-col-status,
    .cases-premium-skin .cp-winnings-table td.cp-col-prize,
    .cases-premium-skin .cp-winnings-table td.cp-col-status {
        display: table-cell !important;
    }
}

html.light-theme .cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 2026-10-07 owner corrections: truthful choice copy, exact paid bundles,
   unclipped two-line catalog titles, and balanced winnings actions. */
.cases-premium-skin .cp-choice-story {
    position: relative;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--cp-preview-gold-line, rgba(201,169,106,.35));
    border-radius: 20px;
    background:
        radial-gradient(55% 120% at 100% 0%, rgba(201,169,106,.16), transparent 68%),
        linear-gradient(135deg, var(--cp-preview-panel-2), var(--cp-preview-panel));
    box-shadow: 0 28px 72px -38px rgba(0,0,0,.78);
}
.cases-premium-skin .cp-choice-title {
    margin: 8px 0 12px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(34px, 5vw, 70px);
    line-height: .98;
    letter-spacing: -.025em;
    color: var(--cp-preview-ink, var(--cp-ivory));
}
.cases-premium-skin .cp-choice-lede {
    max-width: 900px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.35;
    color: var(--cp-preview-ink, var(--cp-ivory));
}
.cases-premium-skin .cp-choice-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.cases-premium-skin .cp-choice-notes span {
    padding-top: 12px;
    border-top: 1px solid var(--cp-preview-gold-line, rgba(201,169,106,.28));
    color: var(--cp-preview-ink, var(--cp-ivory));
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card-head {
    --cp-catalog-title-line-height: clamp(32px, 2.9vw, 44px);
    min-height: calc(50px + var(--cp-catalog-title-line-height) + var(--cp-catalog-title-line-height));
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .case-block,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card,
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card-head {
    overflow: visible !important;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-case-name {
    min-height: calc(var(--cp-catalog-title-line-height) + var(--cp-catalog-title-line-height));
    font-size: var(--cp-fitted-title-size, clamp(22px, 2vw, 31px)) !important;
    line-height: var(--cp-catalog-title-line-height) !important;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.cases-premium-skin .cp-sbp-bundles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-sbp-bundles {
    display: none;
}
.cases-premium-skin .case-block.is-detail-active .cp-sbp-bundles {
    display: grid;
    margin-top: -4px;
}
.cases-premium-skin .cp-sbp-bundles .btn-terminal {
    min-height: 40px;
    padding: 8px;
    font-size: 10px;
    white-space: normal;
}
.cases-premium-skin .cp-paid-entitlements {
    display: grid;
    gap: 12px;
}
.cases-premium-skin .cp-paid-entitlements[hidden] { display: none; }
.cases-premium-skin .cp-paid-card {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--cp-preview-gold-line, rgba(201,169,106,.35));
    border-radius: 16px;
    background: var(--cp-preview-panel, rgba(18,17,21,.88));
}
.cases-premium-skin .cp-paid-card-title {
    margin: 4px 0 8px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(24px, 3vw, 38px);
}
.cases-premium-skin .cp-paid-card-copy .btn-terminal { margin-top: 14px; }
.cases-premium-skin .cp-paid-blocked {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(245,158,11,.34);
    border-radius: 10px;
    color: #f2bf63 !important;
    line-height: 1.45;
}
.cases-premium-skin .cp-paid-manifest {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 7px;
}
.cases-premium-skin .cp-paid-cover {
    flex: 1 0 100%;
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
}
.cases-premium-skin picture.cp-paid-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.cases-premium-skin .cp-paid-prize-chip {
    padding: 6px 9px;
    border: 1px solid var(--cp-preview-soft, rgba(255,255,255,.1));
    border-radius: 999px;
    font-size: 9px;
}
.cases-premium-skin .cp-paid-manifest-data { display: none; }
.cases-premium-skin .cp-win-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 7px;
}
.cases-premium-skin .cp-win-actions .btn-terminal {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 9px;
    white-space: normal;
}

@media (max-width: 720px) {
    .cases-premium-skin .cp-choice-notes { grid-template-columns: 1fr; }
    .cases-premium-skin .cp-withdraw-crypto-fields { grid-template-columns: 1fr; }
    .cases-premium-skin .cp-paid-card { grid-template-columns: 1fr; }
    .cases-premium-skin .cp-sbp-bundles { grid-template-columns: 1fr; }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card-head {
        --cp-catalog-title-line-height: 32px;
        min-height: 114px;
    }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-case-name {
        min-height: 64px;
    }
    .cases-premium-skin .cp-win-actions { justify-content: stretch; }
    .cases-premium-skin .cp-win-actions > * { flex: 1 1 150px; }
}

/* 2026-10-06 buyer corrections: complete manifest gallery, seven cover
   identities, and a result dialog that remains usable in short viewports.
   The page stays locked while open; only the bounded stage scrolls. */
.cases-premium-skin .cp-spin-stage {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.cases-premium-skin .cp-reel-viewport {
    flex: 0 0 auto;
    min-height: 206px;
}
.cases-premium-skin .cp-result-card,
.cases-premium-skin .cp-result-actions {
    flex-shrink: 0;
}

/* The original four identities keep their established values.  New tiers
   only supply accents; their generated art is selected by the server-side
   allowlist rather than by arbitrary template paths. */
.cases-premium-skin .cp-case-showcase--spark {
    --cp-tier-accent: 88,231,255;
    --cp-tier-gold: 181,237,255;
}
.cases-premium-skin .cp-case-showcase--entry {
    --cp-tier-accent: 53,224,141;
    --cp-tier-gold: 214,183,103;
}
.cases-premium-skin .cp-case-showcase--rotation {
    --cp-tier-accent: 59,239,166;
    --cp-tier-gold: 232,203,116;
}
.cases-premium-skin .cp-case-showcase--heat {
    --cp-tier-accent: 255,168,73;
    --cp-tier-gold: 255,216,126;
}
.cases-premium-skin .cp-case-showcase--eclipse {
    --cp-tier-accent: 174,112,255;
    --cp-tier-gold: 240,196,255;
}
.cases-premium-skin .cp-case-showcase--immortal {
    --cp-tier-accent: 245,204,102;
    --cp-tier-gold: 255,229,142;
}
.cases-premium-skin .cp-case-showcase--apex {
    --cp-tier-accent: 255,92,126;
    --cp-tier-gold: 255,224,174;
}
.cases-premium-skin .cp-case-showcase--spark,
.cases-premium-skin .cp-case-showcase--eclipse,
.cases-premium-skin .cp-case-showcase--apex {
    border-color: rgba(var(--cp-tier-gold), .36);
}
.cases-premium-skin .cp-case-showcase--spark .cp-showcase-scanline,
.cases-premium-skin .cp-case-showcase--eclipse .cp-showcase-scanline,
.cases-premium-skin .cp-case-showcase--apex .cp-showcase-scanline {
    border-color: rgba(var(--cp-tier-gold), .28);
}

@media (max-width: 640px) {
    .cases-premium-skin .cp-spin-stage {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
    .cases-premium-skin .cp-spin-overlay.is-result .cp-spin-stage {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
    .cases-premium-skin .cp-reel-viewport {
        min-height: 162px;
    }
    .cases-premium-skin .cp-prize-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        padding: 0 0 10px;
        scroll-snap-type: none;
    }
    .cases-premium-skin .cp-prize-card {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 360px) {
    .cases-premium-skin .cp-prize-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 2026-10-07 customer UI packet: payment legibility and a deliberate
   winnings hierarchy. Scoped to cases so the premium wallpaper and the gold
   DH action remain unchanged. */
.cases-premium-skin .cp-dh-equivalence {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 14px 0 0;
    padding: 7px 12px;
    border: 1px solid rgba(201, 169, 106, .48);
    border-radius: 999px;
    color: var(--cp-gold-bright) !important;
    background: rgba(7, 12, 9, .68);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.light-theme .cases-premium-skin .cp-dh-equivalence {
    color: #5b451c !important;
    background: rgba(255, 252, 241, .9);
}
.cases-premium-skin .cp-sbp-btn {
    border-color: rgba(87, 124, 94, .62) !important;
    background: linear-gradient(180deg, #f8fbf5 0%, #e4eee0 100%) !important;
    color: #174b34 !important;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: .025em;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 20px -15px rgba(8, 47, 30, .82);
}
.cases-premium-skin .cp-sbp-btn:hover,
.cases-premium-skin .cp-sbp-btn:focus-visible {
    border-color: rgba(43, 102, 67, .9) !important;
    background: linear-gradient(180deg, #ffffff 0%, #dcebd8 100%) !important;
    color: #0c3b27 !important;
}
.cases-premium-skin .cp-sbp-label {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.25;
}

.cases-premium-skin .cp-winnings {
    overflow: hidden;
}
.cases-premium-skin .cp-winnings-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.cases-premium-skin .cp-winnings-table {
    min-width: 1040px;
}
.cases-premium-skin .cp-winnings-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}
.cases-premium-skin .cp-winnings-table td.cp-col-prize {
    min-width: 310px;
}
.cases-premium-skin .cp-winnings-table td.cp-col-status {
    min-width: 500px;
}
.cases-premium-skin .cp-prize-cell-content {
    align-items: center;
    white-space: normal;
}
.cases-premium-skin .cp-prize-cell-content > span:last-child {
    min-width: 0;
    line-height: 1.42;
    overflow-wrap: anywhere;
}
.cases-premium-skin .cp-status-cell-content {
    grid-template-columns: minmax(138px, .34fr) minmax(330px, 1fr);
    align-items: center;
    gap: 12px 18px;
}
.cases-premium-skin .cp-win-status-region {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-left: 11px;
    border-left: 2px solid rgba(201, 169, 106, .62);
}
.cases-premium-skin .cp-win-status-label {
    color: var(--cp-muted) !important;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}
.cases-premium-skin .cp-win-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 0;
}
.cases-premium-skin .cp-win-actions-primary,
.cases-premium-skin .cp-win-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}
.cases-premium-skin .cp-win-actions-primary > *,
.cases-premium-skin .cp-win-actions-primary .cp-win-primary {
    min-height: 42px;
    margin: 0;
}
.cases-premium-skin .cp-win-actions-primary .cp-win-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: .67rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.cases-premium-skin .cp-win-actions-secondary {
    align-items: center;
}
.cases-premium-skin .cp-win-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 7px 4px;
    border: 0;
    border-bottom: 1px solid rgba(201, 169, 106, .38);
    border-radius: 0;
    color: var(--cp-ivory-soft) !important;
    background: transparent;
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.cases-premium-skin .cp-win-secondary:hover,
.cases-premium-skin .cp-win-secondary:focus-visible {
    border-bottom-color: var(--cp-gold);
    color: var(--cp-gold-bright) !important;
}

@media (max-width: 640px) {
    .cases-premium-skin .cp-sbp-label {
        white-space: normal;
        text-wrap: balance;
    }
    .cases-premium-skin .cp-sbp-bundles .cp-sbp-btn {
        min-height: 48px;
        font-size: .69rem;
    }
}

/* Below the width required by the native 1040px table, use the same
   information as premium cards instead of hiding actions off-canvas. */
@media (max-width: 1199px) {
    .cases-premium-skin .cp-winnings {
        padding: 12px;
    }
    .cases-premium-skin .cp-winnings-scroll {
        border: 0 !important;
        background: transparent !important;
    }
    .cases-premium-skin .cp-winnings-table {
        width: 100%;
        min-width: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table thead {
        display: none;
    }
    .cases-premium-skin .cp-winnings-table tbody {
        display: grid;
        gap: 12px;
    }
    .cases-premium-skin .cp-winnings-table tr {
        display: grid;
        gap: 3px;
        padding: 13px;
        border: 1px solid rgba(201, 169, 106, .22) !important;
        border-radius: 12px;
        background: rgba(6, 11, 8, .62);
    }
    html.light-theme .cases-premium-skin .cp-winnings-table tr {
        background: rgba(255, 252, 242, .78);
    }
    .cases-premium-skin .cp-winnings-table td {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        width: 100%;
        min-width: 0 !important;
        padding: 5px 0;
        border-bottom: 0;
    }
    .cases-premium-skin .cp-winnings-table td::before {
        content: attr(data-label);
        padding-top: 3px;
        color: var(--cp-muted);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        line-height: 1.35;
        text-align: left;
        text-transform: uppercase;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize {
        display: grid !important;
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize::before,
    .cases-premium-skin .cp-winnings-table td.cp-col-prize .cp-prize-cell-content {
        grid-row: auto !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize::before {
        grid-column: 1 !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content {
        grid-column: 2 !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-coin,
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-photo,
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-row-preorder {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > span:last-child {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center;
        justify-self: start !important;
        text-align: left !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-status {
        display: block !important;
        width: 100% !important;
        padding-top: 10px;
        border-top: 1px solid rgba(201, 169, 106, .16);
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-status::before {
        content: none !important;
    }
    .cases-premium-skin .cp-winnings-table .cp-status-cell-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
        width: 100%;
    }
    .cases-premium-skin .cp-winnings-table .cp-win-status-region {
        align-items: start;
        justify-self: stretch;
    }
    .cases-premium-skin .cp-winnings-table .cp-w-status {
        text-align: left !important;
    }
    .cases-premium-skin .cp-win-actions,
    .cases-premium-skin .cp-win-actions-primary,
    .cases-premium-skin .cp-win-actions-secondary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        width: 100%;
        gap: 7px;
    }
    .cases-premium-skin .cp-win-actions-primary .cp-win-primary,
    .cases-premium-skin .cp-win-actions-primary .cp-claim-form,
    .cases-premium-skin .cp-win-actions-primary .cp-claim-form button,
    .cases-premium-skin .cp-win-secondary {
        width: 100%;
        max-width: 100%;
    }
    .cases-premium-skin .cp-win-actions-primary .cp-win-primary {
        min-height: 46px;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .cases-premium-skin .cp-winnings-table td.cp-col-prize {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 7px !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize::before {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .cases-premium-skin .cp-winnings-table td.cp-col-prize .cp-prize-cell-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100%;
    }
}

/* 2026-10-08 payment cards: the official SBP sign and a premium, scannable
   hierarchy. Quantities and payment behavior remain on the existing buttons. */
.cases-premium-skin .cp-sbp-row,
.cases-premium-skin .cp-sbp-bundles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}
.cases-premium-skin .case-block.is-detail-active .cp-sbp-bundles {
    display: grid;
    margin-top: 0;
}
.cases-premium-skin .cp-sbp-row > .cp-sbp-btn,
.cases-premium-skin .cp-sbp-bundles > .cp-sbp-btn {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch !important;
    gap: 14px;
    width: 100%;
    height: auto !important;
    min-height: 92px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(80, 154, 111, .62) !important;
    border-radius: 18px;
    color: #f4f1e8 !important;
    background: linear-gradient(135deg, rgba(9, 31, 22, .98), rgba(5, 18, 13, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 38px -26px rgba(31, 171, 95, .75);
    text-align: left !important;
    text-transform: none !important;
    white-space: normal;
}
.cases-premium-skin .cp-sbp-row > .cp-sbp-btn--primary,
.cases-premium-skin .cp-sbp-btn--primary {
    border-color: rgba(215, 181, 104, .9) !important;
    background: linear-gradient(135deg, rgba(116, 86, 34, .98), rgba(55, 42, 18, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 42px -24px rgba(215, 181, 104, .7);
}
.cases-premium-skin .cp-sbp-btn:hover,
.cases-premium-skin .cp-sbp-btn:focus-visible {
    border-color: rgba(111, 205, 148, .92) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(12, 43, 29, .99), rgba(7, 25, 17, .98)) !important;
    transform: translateY(-1px);
}
.cases-premium-skin .cp-sbp-btn--primary:hover,
.cases-premium-skin .cp-sbp-btn--primary:focus-visible {
    border-color: #efd28e !important;
    background: linear-gradient(135deg, rgba(137, 102, 39, .99), rgba(66, 49, 20, .98)) !important;
}
.cases-premium-skin .cp-sbp-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: #08090b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cases-premium-skin .cp-sbp-icon img { width: 100%; height: 100%; object-fit: contain; }
.cases-premium-skin .cp-sbp-copy { min-width: 0; }
.cases-premium-skin .cp-sbp-label {
    display: block;
    color: inherit !important;
    font-size: clamp(.9rem, 1.2vw, 1.05rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: .015em;
    white-space: normal;
}
.cases-premium-skin .cp-sbp-label strong { color: var(--cp-gold-bright); }
.cases-premium-skin .cp-sbp-note {
    display: block;
    margin-top: 5px;
    color: rgba(236, 242, 235, .68);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .035em;
}
.cases-premium-skin .cp-sbp-tail { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.cases-premium-skin .cp-sbp-amount { color: var(--cp-gold-bright); font-size: 1rem; font-weight: 850; }
.cases-premium-skin .cp-sbp-arrow { color: rgba(244, 241, 232, .82); font-size: 2rem; font-weight: 300; line-height: 1; }
.cases-premium-skin .cp-sbp-btn--primary .cp-sbp-note { color: #f4f1e8; }
.cases-premium-skin .cp-sbp-btn--primary :is(.cp-sbp-label strong, .cp-sbp-amount) { color: #fff4cf; }
html.light-theme .cases-premium-skin .cp-sbp-btn {
    border-color: rgba(62, 118, 82, .55) !important;
    color: #173a29 !important;
    background: linear-gradient(135deg, #f3f8f0, #e3eee1) !important;
    box-shadow: inset 0 1px 0 #fff, 0 14px 30px -24px rgba(22, 75, 45, .48);
}
html.light-theme .cases-premium-skin .cp-sbp-btn--primary {
    border-color: rgba(150, 108, 32, .58) !important;
    color: #2b210f !important;
    background: linear-gradient(135deg, #f6e8bd, #dfc47f) !important;
}
html.light-theme .cases-premium-skin .cp-sbp-note { color: #344c3c; }
html.light-theme .cases-premium-skin .cp-sbp-btn :is(.cp-sbp-label strong, .cp-sbp-amount) { color: #25583b; }
html.light-theme .cases-premium-skin .cp-sbp-btn--primary :is(.cp-sbp-label strong, .cp-sbp-amount) { color: #453515; }
html.light-theme .cases-premium-skin .cp-sbp-arrow { color: rgba(28, 52, 38, .74); }
@media (max-width: 480px) {
    .cases-premium-skin .case-block.is-detail-active .cp-sbp-row > .cp-sbp-btn,
    .cases-premium-skin .case-block.is-detail-active .cp-sbp-bundles > .cp-sbp-btn,
    .cases-premium-skin .cp-sbp-row > .cp-sbp-btn,
    .cases-premium-skin .cp-sbp-bundles > .cp-sbp-btn {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 10px;
        height: auto !important;
        min-height: 82px !important;
        padding: 10px 12px !important;
        text-align: left !important;
    }
    .cases-premium-skin .cp-sbp-icon { width: 48px; height: 48px; padding: 7px; border-radius: 12px; }
    .cases-premium-skin .cp-sbp-note { font-size: .68rem; }
    .cases-premium-skin .cp-sbp-amount { font-size: .82rem; }
    .cases-premium-skin .cp-sbp-tail { gap: 6px; }
    .cases-premium-skin .cp-sbp-arrow { font-size: 1.65rem; }
}

/* Four SBP choices make the detail card taller than a desktop viewport.
   Only authenticated cases that render those controls leave the sticky
   preview rail, so every payment option remains reachable by normal scroll. */
@media (min-width: 901px) {
    .cases-premium-skin .case-block.is-detail-active.has-sbp-controls .cp-card {
        position: relative;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-drops-live {
        animation: none;
    }
}

/* Dynamic SBP prices use the native hidden attribute. Keep it authoritative
   over the high-specificity grid/card layout in both catalog and detail. */
.cases-premium-skin .case-block .cp-sbp-btn[hidden],
.cases-premium-skin .case-block.is-detail-active .cp-sbp-btn[hidden] {
    display: none !important;
}

/* 2026-10-08 follow-up: readable actions/results and an inline SBP create
   state.  Financial values and the premium page artwork remain unchanged. */
.cases-premium-skin .cp-detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid rgba(201, 169, 106, .55);
    border-radius: 999px;
    background: rgba(8, 14, 10, .72);
    font-size: clamp(.84rem, 1vw, .96rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .1em;
}
.cases-premium-skin .cp-detail-back:hover,
.cases-premium-skin .cp-detail-back:focus-visible {
    border-color: var(--cp-gold-bright);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(201, 169, 106, .2);
}
html.light-theme .cases-premium-skin .cp-detail-back {
    color: #674d19 !important;
    border-color: rgba(117, 82, 17, .48);
    background: rgba(255, 252, 242, .92);
}

.cases-premium-skin .cp-result-kind {
    color: var(--cp-ivory-soft);
    font-size: clamp(1rem, 1.55vw, 1.24rem);
    font-weight: 720;
    line-height: 1.5;
}
.cases-premium-skin .cp-result-balance {
    color: var(--cp-ivory-soft);
    font-size: clamp(1.05rem, 1.8vw, 1.38rem);
    font-weight: 760;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.cases-premium-skin #cp-balance-after {
    color: var(--cp-gold-bright) !important;
    font-size: 1.08em;
    font-weight: 900;
}

.cases-premium-skin .cp-winning-product-link {
    color: var(--cp-ivory-soft);
    font-weight: 780;
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 106, .5);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}
.cases-premium-skin .cp-winning-product-link:hover,
.cases-premium-skin .cp-winning-product-link:focus-visible {
    color: var(--cp-gold-bright);
    text-decoration-color: currentColor;
    outline: 2px solid transparent;
}
html.light-theme .cases-premium-skin .cp-winning-product-link {
    color: #244934;
    text-decoration-color: rgba(84, 61, 18, .55);
}

.cases-premium-skin .cp-sbp-inline-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(201, 169, 106, .36);
    border-radius: 12px;
    color: var(--cp-ivory-soft);
    background: rgba(5, 13, 8, .76);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}
.cases-premium-skin .cp-sbp-inline-status[hidden] { display: none !important; }
.cases-premium-skin .cp-sbp-inline-status.is-error {
    border-color: rgba(255, 107, 122, .58);
    color: #ffb2bb;
}
.cases-premium-skin .cp-sbp-inline-status.is-ok {
    border-color: rgba(72, 222, 143, .58);
    color: #a9f5cc;
}
.cases-premium-skin .cp-sbp-inline-retry {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: .72rem;
}
.cases-premium-skin .cp-sbp-btn.is-busy {
    cursor: wait;
    opacity: .82;
}
html.light-theme .cases-premium-skin .cp-sbp-inline-status {
    color: #214532;
    border-color: rgba(48, 94, 64, .34);
    background: rgba(248, 252, 246, .94);
}
html.light-theme .cases-premium-skin .cp-sbp-inline-status.is-error {
    color: #8d2331;
    border-color: rgba(141, 35, 49, .42);
}

.cases-premium-skin .cp-withdraw-title {
    font-size: clamp(1.28rem, 1.8vw, 1.55rem);
    font-weight: 900;
}
.cases-premium-skin .cp-withdraw-note {
    color: var(--cp-ivory-soft);
    font-size: clamp(.94rem, 1.15vw, 1.05rem);
    font-weight: 650;
    line-height: 1.65;
}
.cases-premium-skin .cp-withdraw-form span {
    color: var(--cp-ivory-soft);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
}
.cases-premium-skin .cp-withdraw-form input,
.cases-premium-skin .cp-withdraw-form select {
    min-height: 46px;
    font-size: 1rem;
    font-weight: 650;
}
.cases-premium-skin .cp-withdraw-form input::placeholder {
    color: rgba(236, 242, 235, .58);
    opacity: 1;
}
.cases-premium-skin .cp-withdraw-submit {
    min-height: 46px;
    font-size: .78rem;
    font-weight: 850;
}
html.light-theme .cases-premium-skin .cp-withdraw-note,
html.light-theme .cases-premium-skin .cp-withdraw-form span {
    color: #314c3b;
}
html.light-theme .cases-premium-skin .cp-withdraw-form input,
html.light-theme .cases-premium-skin .cp-withdraw-form select {
    color: #152d20;
    background: rgba(255, 255, 252, .94);
    border-color: rgba(43, 79, 57, .42);
}
html.light-theme .cases-premium-skin .cp-withdraw-form input::placeholder {
    color: #65786c;
}

@media (max-width: 640px) {
    .cases-premium-skin .cp-detail-back {
        width: 100%;
        min-height: 48px;
    }
    .cases-premium-skin .cp-sbp-inline-status {
        align-items: stretch;
        flex-direction: column;
    }
    .cases-premium-skin .cp-sbp-inline-retry { width: 100%; }
    .cases-premium-skin .cp-result-kind { font-size: 1.02rem; }
    .cases-premium-skin .cp-result-balance { font-size: 1.12rem; }
}

/* The existing responsive winnings grid targeted a final span. Product names
   can now be anchors, but retain the same value column and full wrapping. */
@media (max-width: 1199px) {
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-winning-product-link {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center;
        justify-self: start !important;
        min-width: 0;
        text-align: left !important;
    }
}
@media (max-width: 420px) {
    .cases-premium-skin .cp-winnings-table .cp-prize-cell-content > .cp-winning-product-link {
        grid-column: 2 !important;
    }
}


/* r3-case-card-rows: align catalog facts without changing prices, RTP, or actions. */
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card {
    display: grid !important;
    --r3-case-head-row: 116px;
    --r3-case-price-row: 92px;
    grid-template-rows: var(--r3-case-head-row) auto var(--r3-case-price-row) minmax(72px, auto) auto auto;
    align-content: start;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card-head { min-height: var(--r3-case-head-row); }
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-price-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "dh rub" "note note";
    align-content: center;
    min-height: var(--r3-case-price-row);
    column-gap: 12px;
    row-gap: 5px;
}
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-price { grid-area: dh; align-self: baseline; }
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-price-rub { grid-area: rub; align-self: baseline; font-size: .95rem; line-height: 1.4; }
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-price-note { grid-area: note; font-size: .82rem; line-height: 1.45; }
.cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-pay-options { min-height: 72px; margin: 0; font-size: .88rem; line-height: 1.55; }
@media (max-width: 640px) {
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-card { --r3-case-head-row: 110px; --r3-case-price-row: 84px; }
    .cases-premium-skin .cases-grid[data-flow-state="catalog"] .cp-pay-options { min-height: 0; font-size: .84rem; }
}