/* =====================================================================
   CASES + LUCKY WHEEL POLISH (rewrite v2 — conservative)
   Унификация страниц "Кейсы" + "Колесо Фортуны" с navy-палитрой.
   Сохраняем vendor flex-сетку (.cases__case с width:calc), меняем
   только палитру + прячем .case__content для tooltip.
   ---------------------------------------------------------------------
   Шаблоны:
     - template/panel/Modules/Plugins/Cases/cases_open.tpl
     - template/panel/Modules/Plugins/LuckyWheel/lucky_wheel.tpl
   ===================================================================== */


/* ===== Общие контейнеры (.gamepage, .game, .cases, .wh, .inf) ===== */
#page-container .gamepage {
    background: transparent !important;
}
#page-container .gamepage .block.block-solid {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: var(--tbc-radius-block, 8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Заголовки секций ("СОДЕРЖИМОЕ КЕЙСА", "ПРИЗЫ") */
#page-container .cases__ttl,
#page-container .inf__title {
    color: var(--tbc-accent-cta, #F5A623) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--tbc-border-subtle, rgba(47, 52, 84, 0.5));
    margin-bottom: 14px !important;
}

/* Info-блок снизу */
#page-container .inf {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: var(--tbc-radius-block, 8px) !important;
    padding: 16px 20px;
}
#page-container .inf__content {
    color: var(--tbc-text-secondary, #8B90B0);
    line-height: 1.5;
}


/* =====================================================================
   КАРТОЧКА ПРИЗА — оставляем vendor flex+calc layout, меняем цвета.
   .cases__list { display: flex; flex-wrap: wrap } из vendor сохранён.
   .cases__case { width: calc(100% / N - ...) } из vendor работает.
   ===================================================================== */

/* Уменьшаем cases__case до 6 колонок на десктопе (было 5).
   Карточки чуть компактнее без поломки сетки. */
@media (min-width: 1401px) {
    #page-container .cases__case {
        width: calc(100% / 6 - 12px) !important;
    }
}

#page-container a.cases__case,
#page-container .cases__case {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 6px !important;
    padding: 14px 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: help; /* указатель на tooltip */
    position: relative !important;
    box-sizing: border-box;
}
#page-container a.cases__case:hover,
#page-container .cases__case:hover {
    background: var(--tbc-bg-card-hover, #2C3050) !important;
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 12px -4px rgba(245, 166, 35, 0.40);
}

/* Картинка/иконка — убираем purple radial-gradient vendor'a,
   ставим тёмный фон с тонким бордером (gold для visual punch). */
#page-container .case__pic {
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid rgba(245, 166, 35, 0.25) !important;
    box-shadow: none !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    border-radius: 6px !important;
}
#page-container .case__img {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Название (B-COIN CASE / Earring of Force и т.п.) */
#page-container .case__title {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
    margin-top: 10px !important;
    /* НЕ ограничиваем word-break — пусть текст переносится по словам
       естественно. Если карточка узкая — высота вырастет, но текст
       не превратится в "E. F." (как было после агрессивного line-clamp). */
}

/* Описание — спрятано, переезжает в Tippy tooltip */
#page-container .case__content {
    display: none !important;
}

/* Заточка (+enc для lucky_wheel) — gold accent */
#page-container .case__title .text-warning {
    color: var(--tbc-accent-cta, #F5A623) !important;
    font-weight: 800;
}

/* Бэйдж количества (x10/x25/x250/x2500 — может быть до 5 символов).
   Vendor рендерит его как flex-child (margin-top: 10px). Делаем
   absolute pill в правом верхнем углу — компактнее, не мешает контенту. */
#page-container .case__type {
    position: absolute !important;
    top: 6px;
    right: 6px;
    background: var(--tbc-accent-cta, #F5A623) !important;
    color: #1A1D2E !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
#page-container .cases__case:hover .case__type {
    background: var(--tbc-accent-cta-hover, #FFB840) !important;
}


/* =====================================================================
   TIPPY tooltip overrides — navy theme
   ===================================================================== */

.tippy-tooltip.tlt-theme,
.tippy-box[data-theme~="tlt"] {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    font-size: 12px !important;
    padding: 10px 12px !important;
    line-height: 1.45;
    max-width: 280px !important;
}
.tippy-tooltip.tlt-theme .tippy-content,
.tippy-box[data-theme~="tlt"] .tippy-content {
    padding: 0 !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
}


/* =====================================================================
   LUCKY WHEEL — дополнительная стилизация
   ===================================================================== */

#page-container .wh .lw_server {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#page-container .gamef__balance .gbal,
#page-container .gamef .gbal {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 6px;
}
#page-container .gbal__num,
#page-container .gbal__num_price {
    color: var(--tbc-text-primary, #FFFFFF) !important;
}
#page-container .gbal__content {
    color: var(--tbc-text-secondary, #8B90B0) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
#page-container .gbal_color .gbal__num {
    color: var(--tbc-accent-success, #3AC569) !important;
}

#page-container .wh__history .ttl,
#page-container .history__date {
    color: var(--tbc-text-secondary, #8B90B0) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

#page-container .lw_discount {
    color: var(--tbc-accent-cta, #F5A623) !important;
    font-weight: 600;
}


@media (prefers-reduced-motion: reduce) {
    #page-container a.cases__case,
    #page-container .cases__case {
        transition: none !important;
    }
}