/* ============================================================================
   Stars TMA — style.css  ·  AAA casino / lootbox-luxury визуал
   Тёмная сцена + золото. Глубина, объём, стекло, кинематографичный свет.
   Совместимость: сохранены ВСЕ классы/id из app.js и juice.css.
   Инлайновые стили из JS (aura accent, reel-cell borderColor, badge bg,
   win-halo --halo, hist-gift/rc-nm color) остаются работать поверх.
   ГЕОМЕТРИЯ ЛЕНТЫ НЕПРИКОСНОВЕННА: reel-cell 110px + margin 5px = CELL 120.
   ========================================================================== */

:root{
  /* ── Сцена ── */
  --bg:#0a0b11; --bg2:#111420; --card:#1a1d2b; --card2:#232838;
  --line:#2a2f42; --line2:#363c52;
  --txt:#eef1f7; --muted:#8a93a6; --muted2:#636b80;

  /* ── Золото (фольга) ── */
  --gold:#ffd24a; --gold2:#ffb020; --gold3:#fff0b8; --gold-deep:#b9791a;

  /* ── Редкости (единая карта эмоций) ── */
  --r-common:#9aa7bd; --r-rare:#4aa3ff; --r-epic:#b76bff; --r-legend:#ffd24a;

  /* ── Радиусы ── */
  --r-xl:24px; --r-lg:20px; --r-md:16px; --r-sm:12px; --r-pill:999px;

  /* ── Система теней (elevation) ── */
  --e1:0 2px 8px rgba(0,0,0,.35);
  --e2:0 8px 24px rgba(0,0,0,.45);
  --e3:0 18px 44px rgba(0,0,0,.55);
  --e4:0 30px 70px rgba(0,0,0,.62);
  /* внутренние блики/огранка */
  --sheen:inset 0 1px 0 rgba(255,255,255,.08);
  --sheen-strong:inset 0 1px 0 rgba(255,255,255,.16);
  --bevel:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 6px rgba(0,0,0,.4);

  /* ── Свечения ── */
  --glow-gold:0 0 24px rgba(255,210,74,.35);

  /* ── Стекло ── */
  --glass:linear-gradient(180deg,rgba(24,28,42,.78),rgba(12,14,22,.72));
  --glass-line:1px solid rgba(255,255,255,.06);

  --spring:cubic-bezier(.2,1.3,.4,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{margin:0;padding:0}
body{margin:0;padding:0;min-height:100%}

/* ── Сцена: многослойный кинематографичный фон ── */
body{
  position:relative;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  font-feature-settings:"tnum" 1;
  overflow-x:hidden;
  padding-bottom:calc(110px + var(--safe-bot));
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(255,210,74,.10), transparent 62%),
    radial-gradient(760px 420px at 108% 8%, rgba(183,107,255,.07), transparent 60%),
    radial-gradient(820px 460px at -8% 22%, rgba(74,163,255,.06), transparent 60%),
    linear-gradient(180deg,#0c0e16 0%, var(--bg) 40%, #07080d 100%);
}
/* Фоновый арт-слой (золотые лучи + боке) — приглушён, чтобы контент читался */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('/assets/ui/bg.webp') center top / cover no-repeat;
  opacity:.28;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 85%);
          mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 85%);
}
/* Тонкая виньетка сцены — держит взгляд в центре */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 60%, rgba(0,0,0,.5) 100%);
}
#app,.topbar,.tabbar{position:relative;z-index:2}
#app{position:relative;z-index:1}

/* ============================================================================
   ТОПБАР — стеклянная панель с золотым хайрлайном
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--safe-top)) 16px 13px;
  background:linear-gradient(180deg,rgba(10,11,17,.94),rgba(10,11,17,.6));
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid transparent;
}
/* Золотой градиентный разделитель под топбаром */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,210,74,.55) 25%,rgba(255,210,74,.75) 50%,rgba(255,210,74,.55) 75%,transparent);
  box-shadow:0 1px 10px rgba(255,210,74,.25);
}
.brand{
  font-weight:900;font-size:21px;letter-spacing:.4px;
  display:flex;align-items:center;gap:6px;
  text-shadow:0 2px 12px rgba(255,210,74,.25);
}
.brand span{
  background:linear-gradient(180deg,var(--gold3),var(--gold) 45%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.balances{display:flex;gap:8px}

/* Баланс-чип как объёмный жетон/монета */
.chip{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:var(--r-pill);
  padding:8px 15px;font-weight:800;font-size:15px;letter-spacing:.2px;
  box-shadow:var(--e1),var(--sheen);
  position:relative;
}
.chip img{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.chip.tickets{
  border-color:rgba(255,210,74,.45);
  background:
    linear-gradient(180deg,rgba(255,210,74,.14),rgba(255,210,74,.03)),
    linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,220,120,.25), 0 0 18px rgba(255,210,74,.14);
}
.chip.tickets b{
  background:linear-gradient(180deg,var(--gold3),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================================
   ЭКРАНЫ + ТИПОГРАФИКА
   ========================================================================== */
.screen{display:none;padding:16px 16px 8px;animation:fade .28s var(--ease-out)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.section-title{
  font-size:15px;margin:22px 4px 13px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:#c7cede;
  display:flex;align-items:center;gap:10px;
}
/* Золотая засечка перед заголовком секции */
.section-title::before{
  content:"";width:4px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold3),var(--gold2));
  box-shadow:0 0 10px rgba(255,210,74,.6);
}

/* ============================================================================
   БАННЕР — кинематографичный герой-блок
   ========================================================================== */
.banner{
  height:164px;border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#1d2233,#101320);
  background-size:cover;background-position:center;
  border:1px solid var(--line2);
  box-shadow:var(--e3), var(--sheen);
}
/* Виньетка + нижний градиент для читаемости заголовка */
.banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,210,74,.14), transparent 55%),
    radial-gradient(100% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.6) 100%);
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.55) 100%);
}
.banner-cta{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  font-weight:800;font-size:19px;letter-spacing:.2px;line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.banner-cta b{
  background:linear-gradient(180deg,var(--gold3),var(--gold) 55%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================================
   ТАЙМЕР — премиальный «тикет-стаб»
   ========================================================================== */
.timer-card{
  display:flex;align-items:center;gap:12px;margin-top:16px;position:relative;
  background:
    linear-gradient(135deg,rgba(255,210,74,.16),rgba(255,176,32,.02) 55%),
    linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid rgba(255,210,74,.32);
  border-radius:var(--r-lg);padding:15px 16px;
  box-shadow:var(--e2), var(--sheen), inset 0 0 24px rgba(255,210,74,.06);
  overflow:hidden;
}
/* Мягкое золотое гало слева (источник ценности) */
.timer-card::before{
  content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,74,.28),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.timer-info{flex:1;position:relative;z-index:1}
.timer-title{font-weight:800;font-size:16px;letter-spacing:.2px}
.timer-sub{color:var(--muted);font-size:13px;margin-top:3px;font-variant-numeric:tabular-nums}

/* ============================================================================
   СЕТКА КЕЙСОВ — объём, постамент, парящий кейс, лента-цена
   ========================================================================== */
.cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.case-card{
  position:relative;border-radius:var(--r-lg);padding:20px 14px 16px;cursor:pointer;
  /* Двухслойный градиент + рамка через padding/border-box */
  background:
    linear-gradient(180deg,#20263a 0%, #171b28 60%, #12151f 100%) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%,rgba(255,255,255,.05)) border-box;
  border:1px solid transparent;
  box-shadow:var(--e3), var(--sheen);
  transition:transform .18s var(--ease-out), box-shadow .25s;
  overflow:hidden;isolation:isolate;
}
.case-card:active{transform:scale(.97)}

/* Верхний внутренний свет — объём «стекла» сверху */
.case-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 55% at 50% -8%, rgba(255,255,255,.10), transparent 60%);
}
/* Постамент/подиум под кейсом — эллипс света цвета редкости (усилен aura) */
.case-card::after{
  content:"";position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  width:78%;height:26px;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 80%);
  filter:blur(4px);
}
/* aura (инлайн-цвет редкости из JS) — подсветка кейса снизу */
.case-card .aura{
  position:absolute;left:0;right:0;bottom:36px;top:auto;height:130px;
  filter:blur(34px);opacity:.75;pointer-events:none;z-index:0;
}
/* Кейс будто парит и подсвечен снизу */
.case-img{
  width:100%;height:118px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.case-name{
  font-weight:800;margin-top:12px;text-align:center;font-size:15px;letter-spacing:.3px;
  position:relative;z-index:1;
}

/* Цена — премиальная золотая лента/шеврон */
.case-price{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px auto 0;width:fit-content;position:relative;z-index:1;
  font-weight:900;font-size:14px;letter-spacing:.3px;
  color:#3a2600;
  background:linear-gradient(180deg,var(--gold3) 0%,var(--gold) 45%,var(--gold2) 100%);
  border-radius:var(--r-pill);padding:7px 16px;
  box-shadow:0 6px 16px rgba(255,176,32,.35), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(150,90,0,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.case-price img{width:16px;height:16px;filter:drop-shadow(0 1px 1px rgba(120,70,0,.5))}

/* Легендарный кейс — рамка/пульс (legend-glow из juice.css рулит box-shadow) */
.case-card .legend-glow{position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;z-index:2}

/* ============================================================================
   ИНВЕНТАРЬ — премиальные тайлы с постаментом
   ========================================================================== */
.inv-summary{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  color:var(--muted);font-size:13px;
  background:var(--glass);border:var(--glass-line);border-radius:var(--r-md);
  padding:12px 16px;box-shadow:var(--e1),var(--sheen);
}
.inv-summary b{color:var(--gold);font-size:15px}

.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.inv-item{
  position:relative;border-radius:var(--r-md);padding:14px 8px 12px;text-align:center;overflow:hidden;
  background:
    linear-gradient(180deg,#1e2333,#141824) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.12),transparent 45%) border-box;
  border:1px solid transparent;
  box-shadow:var(--e2), var(--sheen);
}
/* Постамент под подарком */
.inv-item::after{
  content:"";position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  width:64%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent 80%);filter:blur(3px);
}
.inv-item img{
  width:100%;height:72px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.inv-item .nm{font-size:12px;font-weight:700;margin-top:8px;position:relative;z-index:1}
.inv-item .val{font-size:12px;color:var(--gold);font-weight:800;margin-top:3px;position:relative;z-index:1}
/* Бейдж редкости (цвет background ставит JS) — как объёмный ярлык */
.inv-item .badge{
  position:absolute;top:9px;right:9px;z-index:3;
  font-size:9px;padding:3px 8px;border-radius:var(--r-pill);font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.empty{
  color:var(--muted);text-align:center;padding:48px 20px;font-size:14px;line-height:1.7;
  grid-column:1/-1;
}

/* ============================================================================
   ИСТОРИЯ — стеклянные строки
   ========================================================================== */
.history-list{display:flex;flex-direction:column;gap:10px}
.hist-row{
  display:flex;align-items:center;gap:14px;position:relative;
  background:var(--glass);border:var(--glass-line);
  border-radius:var(--r-md);padding:11px 14px;
  box-shadow:var(--e1),var(--sheen);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hist-row img{
  width:48px;height:48px;object-fit:contain;flex:0 0 48px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.hist-main{flex:1;min-width:0}
.hist-gift{font-weight:800;font-size:15px;letter-spacing:.2px}/* color инлайн из JS */
.hist-meta{font-size:12px;color:var(--muted);margin-top:3px}
.hist-val{
  font-weight:900;font-size:15px;
  background:linear-gradient(180deg,var(--gold3),var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================================
   ДРУЗЬЯ — герой-карточка
   ========================================================================== */
.friends-card{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,210,74,.14), transparent 60%),
    linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:28px 20px 22px;box-shadow:var(--e3),var(--sheen);
}
.friends-big{
  font-size:60px;font-weight:900;line-height:1;letter-spacing:-1px;
  background:linear-gradient(180deg,var(--gold3),var(--gold) 50%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,210,74,.25);
}
.friends-label{color:var(--muted);margin-top:2px;font-size:14px;letter-spacing:.4px}
.friends-desc{font-size:14px;color:#b6bfd0;margin:20px 0;line-height:1.6}
.friends-desc b{color:var(--gold);font-weight:800}
.ref-box{display:flex;gap:10px;margin-bottom:12px}
.ref-box input{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);color:#c7cede;
  border-radius:var(--r-sm);padding:13px 14px;font-size:13px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}

/* ============================================================================
   КНОПКИ — золотая с огранкой/глянцем, ghost-стекло
   ========================================================================== */
.btn{
  border:none;border-radius:var(--r-sm);padding:13px 20px;
  font-weight:800;font-size:14px;letter-spacing:.3px;cursor:pointer;
  transition:transform .12s var(--ease-out),filter .2s,box-shadow .2s;
}
.btn:active{transform:scale(.96)}
.btn.gold{
  color:#3a2600;position:relative;
  background:linear-gradient(180deg,var(--gold3) 0%,var(--gold) 42%,var(--gold2) 100%);
  box-shadow:0 8px 22px rgba(255,176,32,.42), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(150,90,0,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn.gold:disabled{filter:grayscale(.75) brightness(.62);cursor:default;box-shadow:var(--e1)}
.btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line2);color:var(--txt);width:100%;margin-top:6px;
  box-shadow:var(--sheen);
}
.btn.big{width:100%;padding:16px;font-size:16px;border-radius:var(--r-md)}

/* ============================================================================
   ТАББАР — стекло + золотой активный индикатор
   ========================================================================== */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(0deg,rgba(8,9,14,.98),rgba(10,11,17,.82));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid transparent;
  padding:9px 6px calc(9px + var(--safe-bot));
}
/* Золотой хайрлайн над таббаром */
.tabbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,210,74,.4) 50%,transparent);
}
.tab{
  position:relative;background:none;border:none;color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.3px;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 6px 6px;cursor:pointer;
  transition:color .2s;
}
.tab span{font-size:21px;transition:transform .25s var(--spring),filter .25s}
.tab.active{color:var(--gold)}
.tab.active span{
  transform:translateY(-1px) scale(1.12);
  filter:drop-shadow(0 4px 12px rgba(255,210,74,.55));
}
/* Индикатор активной вкладки — светящаяся золотая пилюля сверху */
.tab.active::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  box-shadow:0 2px 12px rgba(255,210,74,.7);
}

/* ============================================================================
   МОДАЛКА РУЛЕТКИ — премиальная сцена открытия
   ========================================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:radial-gradient(120% 90% at 50% 40%, rgba(20,22,34,.72), rgba(4,5,9,.92));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;animation:fade .22s var(--ease-out)}
.roulette-box{
  width:100%;max-width:420px;position:relative;overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% -5%, rgba(255,210,74,.12), transparent 55%),
    linear-gradient(180deg,var(--card2),var(--bg2));
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:24px 22px;
  box-shadow:var(--e4), var(--sheen);
}
.roulette-box h3{
  text-align:center;margin:0 0 18px;font-size:19px;font-weight:800;letter-spacing:.3px;
}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:5;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);color:#c7cede;
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:14px;
  box-shadow:var(--sheen);transition:transform .15s,background .2s;
}
.modal-close:active{transform:scale(.9)}

/* Лента рулетки — виньетка по краям + глубина */
.reel-viewport{
  position:relative;height:140px;overflow:hidden;border-radius:var(--r-md);
  background:radial-gradient(120% 100% at 50% 50%, #14172250, #0a0b11);
  border:1px solid var(--line2);
  box-shadow:inset 0 8px 24px rgba(0,0,0,.6), inset 0 -8px 24px rgba(0,0,0,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
}
/* Золотой указатель — светящееся лезвие */
.reel-pointer{
  position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);z-index:4;
  background:linear-gradient(180deg,var(--gold3),var(--gold) 50%,var(--gold2));
  box-shadow:0 0 16px var(--gold), 0 0 32px rgba(255,210,74,.5);border-radius:3px;
}
.reel-pointer::before,.reel-pointer::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:8px solid transparent}
.reel-pointer::before{top:-2px;border-top-color:var(--gold3);filter:drop-shadow(0 0 6px var(--gold))}
.reel-pointer::after{bottom:-2px;border-bottom-color:var(--gold3);filter:drop-shadow(0 0 6px var(--gold))}

.reel-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;will-change:transform}
/* ЯЧЕЙКА: 110 + margin 5*2 = 120 (CELL). НЕ МЕНЯТЬ ширину/margin. */
.reel-cell{
  width:110px;height:110px;flex:0 0 110px;margin:0 5px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1c2130,#141824);
  border:1px solid var(--line);/* borderColor цвета редкости ставит JS */
  box-shadow:var(--e1), var(--sheen), inset 0 0 20px rgba(0,0,0,.35);
  position:relative;
}
/* Подсветка ячейки цветом её рамки (редкости) снизу */
.reel-cell::after{
  content:"";position:absolute;left:10%;right:10%;bottom:6px;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,currentColor,transparent 75%);
  opacity:.35;filter:blur(4px);color:inherit;
}
.reel-cell img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.reel-cell .rc-nm{font-size:10px;color:var(--muted);margin-top:5px;font-weight:600}/* color инлайн из JS */

/* ============================================================================
   ЭКРАН ВЫИГРЫША — приз на пьедестале, лучи света
   ========================================================================== */
.win-result{text-align:center;min-height:0;overflow:hidden;transition:min-height .35s var(--ease-out)}
.win-result.show{min-height:180px;margin-top:18px}
.win-card{position:relative;padding:14px 0 4px}
/* Лучи света за призом */
.win-card::before{
  content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:220px;height:220px;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.14) 0deg, transparent 12deg, rgba(255,255,255,.10) 24deg, transparent 36deg,
    rgba(255,255,255,.14) 48deg, transparent 60deg, rgba(255,255,255,.10) 72deg, transparent 84deg,
    rgba(255,255,255,.14) 96deg, transparent 108deg, rgba(255,255,255,.10) 120deg, transparent 132deg);
  -webkit-mask-image:radial-gradient(circle,#000 20%,transparent 68%);
          mask-image:radial-gradient(circle,#000 20%,transparent 68%);
  animation:rays 14s linear infinite;
}
@keyframes rays{to{transform:translateX(-50%) rotate(360deg)}}
/* Пьедестал под призом */
.win-card::after{
  content:"";position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:120px;height:22px;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(255,210,74,.35),transparent 75%);filter:blur(5px);
}
.win-card img{
  width:108px;height:108px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
}
.win-card .wc-nm{font-weight:900;font-size:20px;margin-top:8px;position:relative;z-index:1;letter-spacing:.3px}
.win-card .wc-val{
  font-weight:800;font-size:14px;margin-top:4px;position:relative;z-index:1;
  color:var(--gold);letter-spacing:.4px;
}
/* halo (цвет из инлайн --halo) */
.win-halo{
  position:absolute;left:50%;top:24px;transform:translateX(-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--halo),transparent 65%);
  filter:blur(8px);animation:halo-breathe 1.6s ease-in-out infinite;z-index:0;
}
@keyframes halo-breathe{0%,100%{transform:translateX(-50%) scale(.85);opacity:.5}50%{transform:translateX(-50%) scale(1.12);opacity:.9}}

.roulette-actions{margin-top:18px;display:flex;gap:12px}
.roulette-actions .btn{flex:1;margin-top:0}

/* ============================================================================
   ТОСТ + КОНФЕТТИ + МИКРО-АНИМАЦИИ
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:calc(100px + var(--safe-bot));
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);color:var(--txt);
  padding:13px 22px;border-radius:var(--r-sm);font-weight:800;font-size:14px;z-index:60;
  opacity:0;pointer-events:none;transition:.3s var(--ease-out);
  box-shadow:var(--e3),var(--sheen);max-width:90%;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.confetti{position:fixed;top:-10px;width:9px;height:9px;z-index:55;pointer-events:none;border-radius:2px;will-change:transform,opacity}
@keyframes confetti-fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot));opacity:0}
}

/* Баланс-чип «прыгает» при изменении */
.chip.bump{animation:chip-bump .5s var(--spring)}
@keyframes chip-bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

/* Пульс готового таймера */
.ready-pulse{animation:ready-pulse 1.8s ease-in-out infinite}
@keyframes ready-pulse{
  0%,100%{box-shadow:var(--e2), inset 0 0 24px rgba(255,210,74,.06)}
  50%{box-shadow:var(--e2), 0 0 26px 2px rgba(255,210,74,.35), inset 0 0 30px rgba(255,210,74,.12)}
}

/* ============================================================================
   CRASH — ракета и коэффициент
   ========================================================================== */
.crash-stage{
  position:relative;height:360px;border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(74,120,255,.14), transparent 60%),
    linear-gradient(180deg,#0e1424 0%, #0a0f1c 60%, #070a14 100%);
  border:1px solid var(--line2);box-shadow:var(--e3), var(--sheen);
}
/* звёздное небо */
.crash-sky{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 50%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 12% 75%, rgba(255,255,255,.5), transparent);
  opacity:.7;transition:transform .3s;}
.crash-stage.flying .crash-sky{animation:sky-drift 6s linear infinite}
@keyframes sky-drift{from{transform:translateY(0)}to{transform:translateY(20px)}}

.crash-graph{position:absolute;inset:0;z-index:1;pointer-events:none}

.crash-mult{
  position:absolute;top:34%;left:0;right:0;text-align:center;z-index:3;
  font-size:56px;font-weight:900;letter-spacing:1px;color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 30px rgba(255,210,74,.25);
  transition:color .2s;
}
.crash-stage.flying .crash-mult{animation:mult-pulse .6s ease-in-out infinite}
@keyframes mult-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.crash-stage.crashed .crash-mult{animation:mult-shatter .5s var(--spring)}
@keyframes mult-shatter{0%{transform:scale(1.3);filter:blur(2px)}100%{transform:scale(1)}}

.crash-status{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;z-index:3;
  font-size:14px;font-weight:700;color:var(--muted);padding:0 16px;
}
.crash-status b{font-weight:900}

.crash-rocket{
  position:absolute;top:0;left:0;width:76px;height:76px;z-index:2;
  object-fit:contain;filter:drop-shadow(0 6px 14px rgba(255,140,40,.5));
  will-change:transform;
}
.crash-boom{
  position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) scale(0);
  width:200px;height:200px;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,#ffd24a 18%,#ff7a2a 38%,#ff3a3a 55%,transparent 72%);
  border-radius:50%;
}
.crash-boom.show{animation:boom .6s ease-out forwards}
@keyframes boom{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}
  60%{opacity:1}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}

/* панель ставок */
.crash-panel{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.crash-bet-row{display:flex;align-items:stretch;gap:10px}
.crash-step{
  width:52px;flex:0 0 52px;border:none;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--card2),var(--card));color:var(--gold);
  border:1px solid var(--line2);font-size:26px;font-weight:800;cursor:pointer;
  box-shadow:var(--e1),var(--sheen);
}
.crash-step:active{transform:scale(.94)}
.crash-bet{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid rgba(255,210,74,.32);border-radius:var(--r-md);
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,220,120,.2);
}
.crash-bet input{
  width:90px;background:none;border:none;color:var(--txt);text-align:right;
  font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;outline:none;
  -moz-appearance:textfield;
}
.crash-bet input::-webkit-outer-spin-button,.crash-bet input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.crash-bet span{font-size:20px}
.crash-quick{display:flex;gap:8px}
.crash-quick button{
  flex:1;padding:11px 0;border-radius:var(--r-sm);cursor:pointer;
  background:var(--glass);border:var(--glass-line);color:#c7cede;font-weight:800;font-size:14px;
}
.crash-quick button:active{transform:scale(.95)}
.crash-quick .crash-max{color:var(--gold);border-color:rgba(255,210,74,.4)}
.crash-potential{text-align:center;color:var(--muted);font-size:14px;font-weight:700;min-height:18px}
.crash-potential b{color:var(--gold);font-size:16px}

/* кнопка в режиме кешаута */
#crashBtn.cashout-btn{
  background:linear-gradient(180deg,#4fe89a,#22b56d);color:#053018;
  box-shadow:0 6px 20px rgba(34,181,109,.45), inset 0 1px 0 rgba(255,255,255,.4);
  animation:cash-pulse .7s ease-in-out infinite;
}
@keyframes cash-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}