::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #12151c; }
::-webkit-scrollbar-thumb { background: #2d3546; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #e89b3c; }

.cb-panel { background: linear-gradient(180deg, rgba(22, 26, 35, 0.96) 0%, rgba(15, 18, 25, 0.98) 100%); border: 1px solid #232936; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.cb-stage-box { background: radial-gradient(circle at 50% 45%, #1d2330 0%, #11141c 85%); border: 1px solid #242a38; position: relative; overflow: hidden; }
.cb-skew-btn { transform: skewX(-16deg); background: linear-gradient(180deg, #1d222d 0%, #151922 100%); border: 1px solid #2a3142; color: #7c8599; transition: all 0.16s ease; }
.cb-skew-btn > span { display: inline-block; transform: skewX(16deg); }
.cb-skew-btn:hover:not(:disabled) { border-color: #e89b3c; color: #fff; background: linear-gradient(180deg, #272e3d 0%, #1b202c 100%); }
.cb-skew-btn.active-mult { border-color: #e89b3c; background: linear-gradient(180deg, #e89b3c 0%, #c77b22 100%); color: #000; font-weight: 800; }

.cb-upgrade-btn { background: linear-gradient(180deg, #1e2430 0%, #151922 100%); border: 1px solid #2d3546; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 20px rgba(0,0,0,0.45); transition: all 0.2s ease; }
.cb-upgrade-btn:hover:not(:disabled) { border-color: #6bc449; color: #fff; box-shadow: 0 0 22px rgba(107, 196, 73, 0.28); transform: translateY(-1px); }
.cb-upgrade-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.uma-card { background: radial-gradient(circle at 50% 35%, #252b3b 0%, #151821 90%); border: 1px solid #262c3a; position: relative; transition: all 0.16s ease; overflow: hidden; }
.uma-card:hover { transform: translateY(-2px); border-color: #49546e; }
.uma-card.selected { border: 1px solid #e89b3c !important; box-shadow: inset 0 0 18px rgba(232, 155, 60, 0.22), 0 0 10px rgba(232, 155, 60, 0.2); }

.rarity-common { border-bottom: 3px solid #5e98d9; }
.rarity-rare { border-bottom: 3px solid #8847ff; }
.rarity-ssr { border-bottom: 3px solid #d32ce6; }
.rarity-ur { border-bottom: 3px solid #eb4b4b; }
.rarity-legend { border-bottom: 3px solid #e89b3c; }

input[type=range].cb-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #252b38; border-radius: 4px; outline: none; }
input[type=range].cb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #c5cddb; border: 2px solid #e89b3c; cursor: pointer; }

.wheel-center-plate { background: radial-gradient(circle at 50% 35%, #2b3242 0%, #1a1f29 70%, #12161f 100%); box-shadow: inset 0 2px 6px rgba(255,255,255,0.06), inset 0 -6px 14px rgba(0,0,0,0.75), 0 10px 30px rgba(0,0,0,0.65); }
#wheelLiquidFill { transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1), top 0.28s ease, bottom 0.28s ease; background: linear-gradient(180deg, rgba(118, 201, 69, 0.46) 0%, rgba(70, 150, 35, 0.24) 100%); border-top: 2px solid #76c945; box-shadow: 0 0 20px rgba(118, 201, 69, 0.38), inset 0 3px 12px rgba(118, 201, 69, 0.35); }

.uma-img-glow { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.65)); transition: transform 0.25s ease; }
.uma-card:hover .uma-img-glow { transform: scale(1.06); }

.lost-uma-ghost { opacity: 0.36; filter: grayscale(100%) contrast(1.05); transition: all 0.35s ease; pointer-events: none; }
.wheel-lost-grayscale { filter: grayscale(100%) brightness(0.75) contrast(1.05); opacity: 0.68; transition: all 0.35s ease; }

.cb-ref-case-card { background: transparent; transition: transform 0.22s ease; }
.cb-ref-case-card:hover { transform: translateY(-5px); }
.cb-ref-case-card:hover .cb-case-price-btn { background: rgba(217, 107, 39, 0.18); border-color: #ff8c3b; color: #ffffff; box-shadow: 0 0 15px rgba(232, 115, 40, 0.35); }
.cb-case-price-btn { border: 1px solid #b85423; color: #e87b35; background: rgba(18, 21, 29, 0.85); transition: all 0.18s ease; }
.cb-series-banner { position: relative; display: flex; align-items: center; justify-content: center; margin: 28px 0 20px; }
.cb-series-banner::before, .cb-series-banner::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(225, 95, 65, 0.45), transparent); }
.cb-series-title { padding: 6px 32px; background: radial-gradient(ellipse at center, rgba(165, 52, 58, 0.28) 0%, rgba(21, 25, 34, 0.9) 80%); border-top: 1px solid rgba(225, 95, 65, 0.4); border-bottom: 1px solid rgba(225, 95, 65, 0.4); color: #dce3f0; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }

.roulette-viewport { background: linear-gradient(180deg, #10131b 0%, #171c27 50%, #10131b 100%); border: 1px solid #2c3548; box-shadow: inset 0 0 35px rgba(0,0,0,0.85); position: relative; overflow: hidden; }
.roulette-viewport::before, .roulette-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 20; pointer-events: none; }
.roulette-viewport::before { left: 0; background: linear-gradient(90deg, #0f1218 0%, transparent 100%); }
.roulette-viewport::after { right: 0; background: linear-gradient(270deg, #0f1218 0%, transparent 100%); }

@keyframes toastSlideIn { from { transform: translateX(115%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-enter { animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/* === MOBILE CASE-BATTLE LAYOUT === */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Перестраиваем 3 колонки апгрейда в мобильный порядок Case-Battle */
  .mob-stage-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Раскрываем левую и правую обёртки, чтобы их дочерние блоки встали в общую сетку */
  .mob-left-col,
  .mob-right-col {
    display: contents !important;
  }

  /* 1. Колесо + кнопка ПРОКАЧАТЬ — на самом верху на всю ширину */
  .mob-wheel-col {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
    padding-top: 2px !important;
  }

  /* 2. Кнопки множителей (x2, x5, x10, 5%, 33%, 70%, shuffle) — под кнопкой ПРОКАЧАТЬ */
  .mob-mult-wrap {
    order: 2 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 2px 0 6px 0 !important;
  }
  .mob-mult-wrap button {
    padding: 8px 2px !important;
    font-size: 11px !important;
    min-width: 0 !important;
  }

  /* 3. Левая и правая карточки выбора предметов — бок о бок (50% на 50%) */
  .mob-left-card {
    order: 3 !important;
    grid-column: 1 / 2 !important;
    min-height: 196px !important;
    padding: 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .mob-right-card {
    order: 4 !important;
    grid-column: 2 / 3 !important;
    min-height: 196px !important;
    padding: 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Компактные портреты и шрифты внутри двух карточек на смартфоне */
  .mob-left-card #leftStageHeaderText,
  .mob-right-card .text-xs {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  .mob-left-card .w-28.h-28,
  .mob-right-card .w-24.h-24,
  .mob-right-card .w-28.h-28 {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }
  .mob-left-card #leftSelectedTitle,
  .mob-right-card #rightTargetName {
    font-size: 11px !important;
  }
  .mob-left-card #leftSelectedTotalValue,
  .mob-right-card #rightTargetPrice {
    font-size: 12px !important;
  }

  /* 4. Ползунок "Добавить баланс" — на всю ширину под двумя карточками */
  .mob-balance-wrap {
    order: 5 !important;
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
    padding: 10px 12px !important;
  }

  /* 5. Переключатель нижних панелей ("Мои предметы" | "Желаемые предметы") */
  .mob-bottom-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: #11151e !important;
    border: 1px solid #232a3b !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
  }
  .mob-bottom-tab-btn {
    padding: 12px 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #6d768a !important;
    background: #0e121a !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
  }
  .mob-bottom-tab-btn.active {
    color: #ffffff !important;
    background: #171c28 !important;
    border-bottom-color: #e89b3c !important;
  }

  .mob-hidden-panel {
    display: none !important;
  }

  /* Укрупняем карточки в инвентаре и каталоге на смартфоне (по 3 в ряд вместо 5) */
  #myInventoryBody .grid,
  #catalogGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Адаптация верхней панели шанса и тикета на смартфоне */
  #topRightChanceBar {
    font-size: 10px !important;
    padding: 4px 8px !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  #myInventoryBody .grid,
  #catalogGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}